HTML 5 now?

HTML 5

Post Tags

Among the hot topics covered by the @media conference in London, HTML 5 is one of the most intriguing and remarkable. This is not just because, in all likelihood, it is going to create a new frontier for web design, gradually replacing XHTML, but also because we can already start using it in our work.

The specification is still a work in progress and quite a long way from completion, but despite that, its modular structure allow us to start implementing parts of it.

HTML 5 has been brought to life thanks to the joint effort of different web organizations, such as W3C and WHATWG, and with the active support of all the most prominent browser vendors: Mozilla, Microsoft, Opera and Apple. It goes without saying that the browser vendors involvement in the project is completely necessary, and hopefully will lead to agreement on the specifications and, consequently, to a cross the board support for HTML 5.

HTML 5 aims to enhance existing features such as forms and multimedia embedding and to introduce some new features such as, for example, the ability to add dynamic scriptable rendering of bitmap images in a web page simply using the new <canvas> tag.

The doctype of the document becomes very easy to remember. Forget about all the different DTDs now available. The doctype of an HTML 5 document is simply  <!doctype html>. It tells the browser that the page is HTML. No versions anymore, or transitional or strict DTDs. Simply HTML.

Among the aims of this project is the goal to allow people to create more semantic documents. When we build a site using XHTML we usually use div elements to indentify the different sections of the page. Every div has a unique ID that describes its content.

This way of structuring the page is largely due to the lack in HTML 4 and XHTML, of the necessary semantics for describing these parts more specifically.

HTML 5 addresses this issue by introducing new elements for representing each of these sections. Tags as <header>, <nav>, <article>, <section>, <aside> and <footer> are now available to give a proper semantic structure to our pages. Both search engines and screen readers will greatly benefit from the use of these appropriate semantic tags, as they’ll be able to easily figure out what’s what in the page. Assistive technologies will also be able to give more options to their users, letting them easily skipping over the navigation section or quickly jump from one section to another or from one article to the next, without the need for the use of hidden links.

Unfortunately the browser support for this new specification is still pretty poor, but that doesn’t mean that we cannot start using some of the new features. Opera and safari are, at the moment, the browsers that best support HTML5 and Firefox is running fast to catch up with them. Enhancements and bug fixing are happening every day and in the case that a browser doesn’t support a given feature, there may be viable JavaScript workarounds to have the functionality work in the interim.

Alternatively, we can consider implementing the new features in those browsers that already support them whilst making sure that the content is still available for older browsers. This is what is often called graceful degradation and progressive enhancement, specially in relation to accessiblity.

If you’re an IE6 user you will see things slightly differently and you might not have the latest and coolest features available, but you’ll still be able to browse the content of the site. Conversely, if you’re an Opera, Safari or Firefox user, you’ll be able to get the most in terms of user experience from the site.

To sum up, let’s start experimenting with it!

If you are keen to take a peek at some well-designed HTML 5 websites, you can visit the first HTML 5 showcase. Even if in beta version, validators are already available to test your new HTML 5 pages: W3C Validator and Validator.nu.

For further information on HTML 5 visit:

For more info about the current browser support visit:

Comments are closed.