Sunday, January 10, 2010

Get Ready for HTML5

David Piening, Creative Director

HTML5 is the next major revision of HTML (the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML). HTML5 aims to reduce the need for proprietary plug-in-based rich Internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX. HTML5 has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML5 will soon define how you build websites.


HTML5 includes several new APIs that are integrated with some of the new HTML5 elements. Here’s the complete list from

  • 2D drawing API which can be used with the new canvas element.
  • API for playing of video and audio which can be used with the new video and audio elements.
  • An API that enables offline Web applications.
  • An API that allows a Web application to register itself for certain protocols or media types.
  • Editing API in combination with a new global contenteditable attribute.
  • Drag & drop API in combination with a draggable attribute.
  • API that exposes the history and allows pages to add to it to prevent breaking the back button.
  • Cross-document messaging.

The principal purpose of these APIs is to facilitate web application creation. Notice the third API enables offline web apps. This is excellent news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment. You can expect to see many of your favorite applications follow Gmail in introducing offline access.

New Elements

HTML5 introduces several new elements (source: w3schools):

  • <article> Defines an article
  • <aside> Defines some content aside from the article it is placed in
  • <audio> Defines sound, such as music or other audio streams
  • <canvas> Defines graphic, such as graphs or other images
  • <command> Defines a command button, like a radiobutton, a checkbox, or a button
  • <datalist> Defines a dropdown list.
  • <details> Defines details of an element, which the user can see, and click to hide
  • <dialog> Defines a dialog, such as a conversation
  • <embed> Defines external interactive content or plugin
  • <figure> Defines a group of media content, and their caption
  • <footer> Defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information
  • <header> Defines the header of a section or page
  • <hgroup> Defines information about a section in a document
  • <keygen> Defines a generated key in a form
  • <mark> Defines marked text. Use the <mark> tag if you want to highlight parts of your text
  • <meter> Defines measurement within a predefined range
  • <nav> Defines navigation links
  • <output> Defines different types of output, such as output written by a script
  • <progress> Defines progress of a task of any kind. Use the progress element to display the progress of a time consuming function in JavaScript
  • <rp> Used in ruby annotations to define what to show browsers that to not support the ruby element.
  • <ruby> Defines ruby annotations.
  • <section> Defines a section, such as chapters, headers, footers, or any other sections of the document
  • <source> Defines media resources
  • <time> Defines a date/time
  • <video> Defines a video, such as a movie clip or other video streams


Structural Changes

This is the part that should fundamentally change the way you structure your sites. Included in the list above are six new structural elements that will help bring consistency to the basic frame of sites all across the web. These six elements are:

1. <nav>
2. <section>
3. <article>
4. <header>
5. <footer>
6. <aside>

Think of these as the replacement for many of the DIVs that you currently use to structure your site. So instead of “<div class=”header”>,” you will simply have “<header>.”


What does this mean to you?

As many of you already know, all the major web browsers still differ (some are worse than others) on support for HTML4.01 and XHTML 1.0. Now imagine what that means for a change as big and new as HTML5. Even though some say we will see major changes this year (Opera Predicts 2010 The Year of HTML 5) and mega-developers like Google are pushing along the acceptance of HTML5, it won’t be supported across the board for some time. However, that doesn’t mean that you shouldn’t begin preparing for the big switch today, and it certainly doesn’t mean there aren’t clever tricks out there to enable you to start playing with HTML5 now.