HTML 5 is an emerging standard that is slowly being taken up by sites in favour of XHTML due to some of the new and useful tags that it introduces; but it's adoption has been marred by lack of support and an initial degree of misunderstanding over what the new standard means to developers. The aim of this article is to clarify what the new tags are and where HTML 5 stands in the grand perspective of the future of the web.
I've left it quite a while before covering HTML 5 here so I could first watch what use it gets and what the general take-up of the standard would be; but now that the dust has started to settle it is time to discuss the changes that it brings.
To start with the most argued about change is to the DOCTYPE declaration that is specified at the top of every (X)HTML page.Now what they've done here is to shorten it so that the details of the namespace are no longer a requirement; because of this we now have:
<!DOCTYPE html>Moving down a standard webpage we next move on to the meta tag and other similar tags that in XHTML were self-closing tags such as:
<meta name="language" content="en" />In HTML 5 we no longer have to worry about this difference as it is now acceptable to have both self-closing tags and ones that omit the forward slash. Moving down the page further to the body of the page we often see markup that has been arranged with the intention of having a header, the main page body, a column, and a footer - usually it is preferable that these are arranged in order so that if the sites styles were turned off they would still make sense. To aid web developers in arranging their sites the HTML 5 standard has introduced a number of elements with this in mind.
The new <header> element doesn't do anything special, it's basically a substitute for using a div element with an id="header" as many people do at the minute. The same goes for the <footer>, <section>, <article>, <nav>, and <aside>. What this does do however is to bring some semantic meaning to the content without having to specify any additional attributes - and that is something which is important in the mobile world.
So what we've seen so far has been about streamlining the language to make it both quicker to type and to download (meaning less bandwidth costs for mobile devices) and also more accepting when typing - we no longer have to worry about forgetting self-closing tags. Moving past this there have been additions to HTML5 that do neither, they add new exciting features that highlight the fact that the language of the web is still evolving.
Of these new elements we now get <video> and <audio> to use when embedding meaning that we are actually specifying what sort of object it is that we are about to embed. This means that web designers don't necessarily have to understand MIME types as it's not a requirement of the tag. The audio element is at the time of writing only supported by Firefox, Opera and Safari so if you chose to use this element it may be wise to also consider an alternative for Chrome and IE users. The video element also has it's own share of troubles in that different browsers support different formats and don't seem to offer a common format between them making it almost useless for cross-browser sites. These tags take the following attributes:
- autoplay
- autobuffer
- controls
- loop
- src
- poster (video only)
- width (video only)
- height (video only)
Some of the other new elements include:
- progress
- meter
- output
- canvas
- ruby
- rp
- rt
- source
- time
Beyond the addition of new elements there are also specifications for application caching and an offline mode for webpages so that they are usable whilst you have no net connection. The primary purpose for these is with mobile devices so that you can access pages you have cached on the go without a net connection. Google have been very proactive with using these new features and have built them into most of their web applications including Google Mail, Google Wave and Google Docs. Hopefully offline web applications and application caching is something I'll revisit in a future article as it's these features that interest me the most.
Most of these new elements and functionality will work in Firefox, Safari, Opera and Chrome with a few exceptions. As you may expect nearly every one of these features has problems in ALL versions of Internet Explorer. Some of the more advanced features still have very little compatibility with browsers, such as the offline mode which only works properly in Firefox and Safari, with some very limited support by Chrome.
So for now it's limited where we can use them and expect results, but there are ways round it such as using JavaScript but it then leaves the problem of readability and presentation without JavaScript enabled. If you're interested in seeing HTML 5 in action then I've built the site for Linnaeus for iPhone using some of the new HTML 5 elements.
