HTML5 – What you really need to know

by on April 18, 2010 in html, Web Development

This is a quick reference for those designers & developers who just want the facts.

What’s new?

DOCTYPE

<!-- Before -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Now -->
<!DOCTYPE html>

Most browsers will parse documents with that doctype as html5. That simple :-)

CHARSET

<!-- Before -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Now -->
<meta charset=utf-8 />

What was removed?

This tags are no longer valid in html5

<basefont>
<big>
<center>
<font>
<s>
<strike>
<tt>
<u>

Frames were removed as well.

<frame />
<frameset>
<noframes >

Obsolete tags were taken out of html5 as well:

<acronym>
<!-- Use abbr instead -->
<applet>
<!-- Obsoleted in favor of object -->
<isindex>
<!-- Replaced by usage of form controls -->
<dir>
<!-- Obsoleted in favor of ul -->

Tag’s attributes referring to visual characteristics were removed as well. Just to mention some:

align, background, bgcolor, border, clear, height

What changed?

<a>
<!-- Now it can contain block elements. Hurray! -->
<b>
<!-- Now represents text whose typical typographic presentation is emboldened -->
<hr />
<!-- Now reprensents a thematic break in paragraph-level -->
<i>
<!-- Now represents text in an alternate voice or mood -->
<menu>
<!-- Has been redefined to be usefull for toolbars and context menues -->
<small>
<!-- Is now used to represent small print in documents, generally for legal purposes -->
<b>
<!-- Now represents importance instead of strong emphasis -->

New stuff, the exiting part!

A bunch of new tags have been created to satisfy the common needs that HTML coders find everyday.

<section>
<!-- Generic document or application section -->
<article>
<!-- INDEPENDENT piece of content of a document. E.g: Blog entry, newspaper article -->
<aside>
<!-- Content slightly related to the rest of the page. *cough* side bars *cough* -->
<hgroup>
<!-- Header of a section. E.g: To include title and subtitle, or company name and slogan type of thing -->
<header>
<!-- Group of Introductory or navigational aids. Doesn't necessarily needs to be at the top of the document, it can be the header of a section of the page -->
<footer>
<!-- Footer for a section. Can contain information about the author, copyright, etc. -->
<nav>
<!-- Section of document intended for navigation. -->
<figure>
<!-- Associate a caption with some embedded content, such as graphic or video. -->
<figcaption>
<!-- Provides caption for the previous tag's embedded content -->
<video>
<!-- Video and audio multimedia content. Very exciting tag :-)  -->
<mark>
<!-- Run of marked text. E.g: Can be used for marking keywords of a search in a long text -->
<progress>
<!-- Represents a completion of a task. E.g: Downloading, performing series of expensive operations -->
<meter>
<!-- Represents a measurement, such as disk usage. -->
<time>
<!-- Represents a date and/or time. Very exciting tag :-)  -->
<canvas>
<!-- Rendering dynamic bitmap graphics on the fly. Very exciting tag -->
<command>
<!-- Represents a command the user can invoke -->
<details>
<!-- Additional information or controls which user can obtain on demand -->
<datalist>
<!-- Used for creating a list of options for the new 'select' tag. -->
<keygen>
<!-- Control for key pair generation. -->
<output>
<!-- Represents some type of output. E.g: Calculation result -->

Input tag‘s type attribute now has the following values:

  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Depending on the device or browser used, this can prompt change the way to input the value. For example, if browsing from an iPhone, the datetime value promts the native way for the iPhone to choose a date+time.

The type attribute can also be used for automatic browser native validation purposes.

For more details on form changes, take a look at http://diveintohtml5.org/forms.html

Visit: http://www.w3.org/TR/html5-diff/#new-attributes for more new attributes in html5 that you need to know about.

New html5 API’s

Other than tags, html5 implements a bunch of new API’s (think of it like javascript libraries) that will help you develop better applications in a faster way.

  • Video & Audio: API for playing of video and audio; it can be used with the new video and audio elements.
  • Offline Apps: An API that enables offline Web applications.
  • Editable Content: API for editing inline content; use it with the new global contenteditable attribute.
  • Drag & Drop: API for drag & drop elements; use in combination with a draggable attribute.
  • History: API that exposes the history and allows pages to add to it to prevent breaking the back button.
  • Geolocation: API that provides scripted access to geographical location of the device that’s browsing the site
  • Local Storage: API for persistent data storage of key-value pair data in Web clients (how exciting is that!?)

Examples:

Check out html5 examples here http://html5demos.com/ they have everything and more of what I’ve said here and it’ll also tell you the current browser support.

0 Comments Short URL ,

No comments yet.

Leave a Reply