"HTML 5 – NEXT GENERATION PAGE MARKUP"

Written By:

THOMAS W. POHL
CYBERVISION WEB LLC

FEBRUARY 13, 2009

Introduction

HTML 5 helps to eliminate large AJAX JavaScript libraries by including tools for working offline and using local storage, as well as a 2D drawing canvas and better ways of working with user inputs. HTML 5 improves over HTML 4 in the handling of the Back button, which is important for screen readers and other accessibility tools where voice-recognition is the only option. HTML 5 also allows for easier implementation of local storage of database information.

New Features

HTML 5 helps to eliminate large AJAX JavaScript libraries by including tools for working offline and using local storage, as well as a 2D drawing canvas and better ways of working with user inputs. HTML 5 improves over HTML 4 in the handling of the Back button, which is important for screen readers and other accessibility tools where voice-recognition is the only option. HTML 5 also allows for easier implementation of local storage of database information.

New Tags

HTML5 includes a number of new markup tags that help implement its features. These fall into two categories, page structure and multimedia.

Page Structure Tags:

• <header> – This contains content that would be displayed in the header section of a web page or in a section. You can use this tag to handle metadata, hold editing information, handle advertising banners and high-level page navigation.
• <footer> – This tag can hold information about what's repeated at the bottom of every web page including copyrights, navigation information and links to credits.
• <nav> – This tag is used to contain a web page's navigation links, primarily the main navigation.
• <aside> – This tag can hold Sidebar information, including blockquotes, navigation elements and text to be repeated on every page. It can also be used to hold and manage advertising elements.
• <article> – This tag can be used to surround major content blocks including news articles, blog posts or snippets of text quoted from another source.
• <section> – This tag is used to delineate and control sections of content with their own headers and formatting.
• <figure> – This semantic tag can be used to contain an image and a caption.
• <dialog> – This semantic tag is used to contain a conversation between people, using <dt> for speakers and <dd> for the text. These are very useful if you are publishing the transcripts of a podcast.

Multimedia Tags:

• <audio> – This tag is used to playing audio.
• <video> – This tag is used to display video.
• <canvas> – This tag allows the 2D drawing API to use JavaScript to draw, animate and manipulate images, with support for alpha transparency and patterns, including very Web 2.0 gradients.

Deprecated Tags

The current draft of HTML 5 does away with some HTML 4 tags. These include support for frames and formatting elements that are best handled by CSS.

Who's Supporting HTML 5?

HTML 5 is being supported by not only the W3C but also by the informal Web Hypertext Application Technology Working Group (WHATWG), which includes browser companies Mozilla (Firefox), Opera and Apple (Safari). The WHATWG aim is to get the code out onto the web quicker than the formal W3C process, which isn't may not be formalized until 2012, and enable web designers and developers to use it in their web pages and application a lot sooner.

Browser Support

Implementing a new standards specification has much to do with browser makers adopting them as anything else. Browser support for HTML 5 tags is still spotty. Opera's HTML 5 implementation seems to be the most advanced, supporting most, including WebForms 2.0. According to David Storey, Opera's chief web opener, he sees HTML 5 as having two main aims. "One is to standardize browser behavior to make browsers more interoperable, both by cleaning up ambiguities in the HTML spec and standardizing useful extensions to HTML that have found common usage from web developers or have been implemented by a number of browsers. The second is to advance HTML by adding new features to HTML more useful for things like web applications." For more information on Opera's work with HTML 5, you can visit its dev.opera.com site which Opera uses to explore the specification, with articles explaining HTML 5 for designers and developers. It's also using preview versions of its browsers to try out proposed HTML 5 features, including 3D support for the <canvas> element.

Conclusion

As you can see, the developing HTML 5 specification has to the potential to be a boon to web designers and developers. Hopefully, the specification will be formalized well before 2012 and implemented by browser makers even quicker. For more information and tutorials concerning HTML 5 check out Issue 149 of "Web Designer" magazine.