This is the second part of a series on the construction of my blog. In this post, I’ll be focusing on the underlying HTML5 markup.
When I started making this blog, I had a decision about what language to use underneath. The choices were simple: HTML4, XHTML 1.0, or HTML5. The first two options represent the old school of HTML, both based on standards from 1999, with tags which have worked for years and are well understood and supported across all browsers. What these standards fall down on are their semantic tags.
Since table layouts disappeared, site content has been divided by large blocks, created using <div> tags. Whilst having a single multi-purpose tag has been very useful, this tag has become littered around websites, trying to find ways to semantically structure their data.
HTML5 Tags
HTML5 brings a new set of structural tags for designers and developers to use in their sites. These tags are:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer>
- <figure>
These semantic elements can all be used in place of <div> tags, as they are all “block-level” elements. For an example of how they can be used, let’s take a look at the front page of my blog.
It all looks like the blog has a firm structure, that could quite easily be <div> tags. Look closer and you’ll see that there isn’t a single <div> tag defining general structure. Only the <article> and <section> tags have been repeated at any point in the page. Take a look at this next screenshot, without the content visible:
The layout is very simple, making full use of the HTML5 tags. The advantages here are clear:
- For screen readers, users can skip straight past the <header> and <nav>, and locate <articles> simply by using keyboard shortcuts or having screen readers jump to articles
- For search engines, all <articles> are marked up accordingly, making it easier to determine what the actual content of the site is
- The same goes for the <nav>, providing hard links for the main parts of the site.
There’s other benefits too. This blog uses WAI-ARIA to identify the role of each of the sections. Using this, the content section is marked up differently to the toolbox section where my Twitter and Last.fm links are displayed.
It’s a similar story on a single article page. Making use of the new tags makes reading an article easier and more clearly defined:
The single page template makes use of the <aside> tag to mark up the sidebar as inconsequential information.
Browser issues
As usual, IE has problems rendering these new tags. Thankfully, Remmy Sharp has an very useful bit of JavaScript that makes everything work nicely. IE then acts just like the other browsers. Problem solved.
HTML5 Video
Structural tags are one of the only items currently implemented in most modern web browsers. Other technologies such as web databases and drag & drop are still a long way off. What isn’t a long way off is HTML5′s <video> tag – native video in the browser. Youtube and Vimeo are already implementing this so you can too. It’s simple enough, just encode your videos in H.264 (for webkit browsers) and Ogg (for Firefox and Opera) and you’re good to go. If you want to know a bit more about the H.264/Ogg debate, read Bruce Lawson’s column.
There are lots more benefits to HTML5 that I’ll show as I add them to the blog (like the <mark> element!).
I hope you’ve found this useful. The accessibility benefits of HTML5 are excellent, and I hope you’ll be upgrading your blog soon.
