But what is it good for?

Redesigning My Blogs With HTML5

Following the recent decision to finally pull finger and migrate this site across to Habari, I thought I'd look into using as much of the evolving HTML5 spec as I can, within the limits of what most browsers support. Now I'm going to admit that I've not read the whole spec (how much free time to you think I have? ) but I have glanced through the tags and seen there is a lot of new and potentially exciting stuff there. In this post I'm going to concentrate on the structural things I'm implementing.

My blogs, like millions of others, have always followed a very similar generic structure:


<html>
<head></head>
<body>
<div id="header">
	<!-- header stuff in here -->
</div>
<div id="content">
	<!-- content stuff in here -->
	<div class="post"><!-- blog post --></div>
	<div class="post"><!-- blog post --></div>
	<div class="post"><!-- blog post --></div>
</div>
<div id="sidebar">
	<!-- sidebar stuff in here -->
</div>
<div id="footer">
	<!-- footer stuff in here -->
</div>
</body>
</html>

Now there is nothing wrong with this and it suits my needs. You can clearly see the intention of the different sections. However from a functional markup perspective they don't really differ: they're all using the same <div> tag. This is primarily because HTML4 has no method to differentiate these functions in the markup. HTML5 does and this is what I'm going to start using.

Whilst browsing through the spec, I discovered HTML5 now has some new structural type tags that could be used to differentiate the various sections in the markup: <header>, <footer>, <article> and <nav>. Each of these can be used multiple times within a page.

The working draft of the spec conveniently includes a brief usage description for each tag:

<header> :

The header element represents a group of introductory or navigational aids. [...] The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
- W3C Working Draft

<footer> :

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
- W3C Working Draft

<article> :

The article element 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, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
- W3C Working Draft

<nav> :

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
- W3C Working Draft

The little snippets I've included above don't do each of the tags justice, so if you want to find out more about their usage, check out the relevant entries in the spec.

Now with the knowledge of these tags in mind, I'm implementing the following basic structure:


<html>
<head></head>
<body>
<header>
	<!-- header stuff in here -->
</header>
<div id="content">
	<!-- content stuff in here -->
	<article><!-- blog post --></article>
	<article><!-- blog post --></article>
	<article><!-- blog post --></article>
</div>
<nav>
	<!-- sidebar stuff in here -->
</nav>
<footer>
	<!-- footer stuff in here -->
</footer>
</body>
</html>

This is just a brief outline. The <header> and <footer> usage is self explanatory, but you may be wondering why I've used <nav> for the sidebar. Well, it's because the content of the side bar is mainly navigational in nature rather than actually being content.

I've use a <div> for the content because that's what the <div> tag is for. There is now the <section> tag in HTML5, but by my understanding of it in the spec, this wouldn't be an appropriate use for it here.

There are however a couple of catches with experimenting with new evolving stands. I encountered two in particular:

  1. I encountered display and layout problems with the new <header>, <footer> and <nav> tags until I made them block elements within my stylesheet using: header, footer, nav, article {display:block;} Some research revealed this has a lot to do with the fact that most browsers don't have default styles information for these elements, so I had to add them myself.
  2. IE doesn't display elements it doesn't know about due to the way it parses the DOM (more details here). Thankfully, this is easy enough to workaround BUT it requires the user have Javascript enabled. This should hopefully be resolved when IE 9 comes out with it's HTML5 support

Thanks to the intentions of the of the <header>, <footer> and <nav> tags within HTML5, each of these are likely to be used multiple times in a single page so I'll probably need to add some identifiers when it comes to styling them.

As I go through the process of learning more about HTML5 as I redesign this site, I'll be implementing the changes on my personal site too. You won't see these changes here until I finally flick the switch, but I've already implemented the above basic structure there, so you can take a look at the source, if you're interested.

Top