Slowly but surely this site moves onward, this post marks the third rewrite of the HTML as I get to grips with HTML5 semantics. There is a lot of weak and confusing documentation out there but dive into html 5 has the answers in plain English.

The lack of documentation isn’t helped by the endless blog related tutorials, so here’s how I think a real world example based on a real site. This markup is for a two column content area, the wrapper is for an additional background image so could I’ve assumed CSS3 multiple background-image support would be available for the HTML5 update.

HTML4 or XHTML1 markup

<div id="content">
	<h1>Main heading</h1>
	<h2>Subheading</h2>
	<div class="wrapper">
		<div id="main">
			<h3>Content heading</h3>
			<p>Content body</p>
		</div>
		<div id="side">
			<h4>Sidebar heading</h4>
			<ul>
				<li>Sidebar content</li>
			</ul>
		</div>
	</div>
</div>

HTML5 markup

<section id="content">
	<header>
		<hgroup>
			<h1>Main heading</h1>
			<h2>Subheading</h2>
		</hgroup>
	</header>
	<article>
		<header>
			<h1>Content heading</h1>
		</header>
		<p>Content body</p>
	</article>
	<aside>
		<header>
			<h1>Sidebar heading</h1>
		</header>
		<ul>
			<li>Sidebar content</li>
		</ul>
	</aside>
</section>

What say you?

Agree? Disagree? Questions? You can find me on Twitter here for discussion – I’m yet to sort out the comments on this site. I still have mental grey areas on when which tags are acceptable for different types of content - want to get this HTML5 busiess locked down, not just replace <div> with <section> and call it the future.

PS

I have moved from Typekit to Cufon, it’s a lot easier to work with. I also bought Street Fighter 4, again, but on PS3 this time. The special edition was on sale, hence the cool figurines photo.