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.
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
- 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.
- 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.
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>
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.