HTML5 features: what you need to know

Way back when we were laying pages out using the table element, we probably weren’t aware of semantics and standards. Nowadays, we’re using divs left right and centre. The situation isn’t terrible, because most of us are using semantic classes and ID naming conventions to describe what the function of the div is. Wouldn’t it just be better if we had a header and footer element instead? HTML5 gives us exactly that.

One of the biggest assets to us authors of HTML5 is the new semantic markup. There’s an arsenal of new elements that has been added to HTML5, and because of the ‘pave the cowpaths’ approach, these can be used by the browsers today (although some might need a little bit of prodding from JavaScript).

Here’s a non-exclusive list of the new HTML5 elements that are available:

1. Block structure

• article represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable. This could be a forum post, blog post, newspaper article, a user comment, or any other independent item of content.
• aside is used to represent a section of content that is related to the content around the aside element, eg a pull quote or a sidebar.
• footer is the footer to a section. This is not restricted to one use at the bottom of the page. You can also use the footer to mark up the footer of a blog post in addition to the footer of the entire document.
• header represents a group of navigational aids, and is used to construct the document outline. You are also not restricted to using header only once; you could use this to mark up the author’s name and the time of a comment placed on a blog post, for example.
• nav is used to wrap major navigation blocks, such as table of contents, pagination links and breadcrumbs. Note that the nav element should be used for links that navigate around site, i.e. inappropriate for a list of sponsor links.
• section is a generic document or application section. However, this isn’t a replacement for the div element. A section is only appropriate if the element’s contents would be listed explicitly in the document’s outline.

2. Inline semantics

• details is used to include additional info that the user can obtain on demand. An open attribute on the element determines whether its contents can be seen, and it can be toggled by the user or by JavaScript.
• figure is used to annotate illustrations, photos, listings etc that, if moved away from the primary content, would not affect the flow of the document.
• mark highlights a run of text, eg to mark the terms the user was searching for.
• time is intended to encode modern dates and times in a machine-readable way. The datetime attribute on this element gives the machine readable time, whereas the contents is human readable.

3. Interactive elements

The following elements include DOM interface methods that allow them to function correctly. So if the browser hasn’t implemented these elements specifically, they won’t work.

However, they all support fallbacks using nested elements within the tag to degrade down to a working solution.

• audio and video are both types of media elements. They enable you to embed audio and video directly into the browser without any need for plug-ins. However, where support is lacking in the browser, best practice suggests that you should fall back to Flash plug-ins. You can either let the browser render the chrome for the element, or take control via JavaScript to create a bespoke interface.
• source is a child element to audio and video. It enables you to specify multiple alternative sources for the media element. For example, Firefox doesn’t support the WAV audio format, so you can specify an alternative source in Ogg Theora format.
• canvas is a 2D drawing element that can be accessed using JavaScript to render graphics on the fly – for example, for games, graphs or animations.

4. Compatibility

Where the new elements aren’t relying on a new DOM interface to be available to the browser, the element is available to you right now. The media elements audio and video have a new DOM interface, so only those browsers that have specifically implemented these media elements will be able to offer native audio or video.

However, this shouldn’t hold you back from using these elements. If you use the video element and it’s not supported in the browser, its contents will be rendered.

For example, for my video element, I’ll first provide an Ogg Theroa-encoded video, then QuickTime, then finally degrade down to Flash if the video element isn’t supported:

<video height=”640” width=”360”><source src=”example.ogg” type=”video/ogg” /><source src=”example.mov” type=”video/quicktime” /><!-- otherwise let the user see flash --><object height=”640” width=”360” ...><param value=”...”></param></object></video>

However, there are a couple of browsers that do have trouble seeing the new elements natively. In particular, all versions of Internet Explorer can’t see the elements by default, and as such they can’t be styled without the help of a bit of JavaScript.

Firefox 2 and Camino 1 have a bug in the Gecko rendering engine that causes the DOM to render incorrectly. However, Firefox 2 had its A-grade support dropped last year, and Firefox has a very solid upgrade path (hence why they’ve been dropped from A-grade support in the first place).

Camino has version 2 in beta, but it hasn’t been released just yet (and arguably, it’s not an A-grade browser). However, there are a few ways to fix Firefox 2 and Camino 1 and you can read about them here.