As I have discussed previously, XHTML really has just one generic container element: <div>, used to contain a cluster of related content.  While there is a loose convention for giving appropriate id and class values to <div> elements, the following XHTML can still be very hard to read:

<div id="banner">
	<h1>Maniacal Musings</h1>
	<h3>Daily Pondering of a Supervillain</h3>
		<ul id="nav">
			<li><a href="/blog">Read All</a></li>
			<li><a href="/latest">Latest Post</a></li>
			<li><a href="/application">Apply to be a minion</a></li>
		</ul>
</div>
<div id="sidebar">
	<h2>About Me</h2>
	<dl>
		<dt>
			<img src="images/doctor-d.jpg" alt="Doctor D" />
		</dt>
		<dd>Your host, Doctor D</dd>
	</dl>
	<p>Raised by Manchurian Zoroastrian émigrés, I was schooled in Switzerland and the Congo under the private tutelage of Herr Kaiser Stamper, an eccentric pedagogue, sadist, and collector of origami folded by the insane.</p>
</div>
<div id="content">
	<div class="article">
		<h4 class="date">January 14, 2011.</h4>
		<h4>Volcano Cleansing</h4>
		<p>We are falling behind schedule in construction of the new secret lair. The volcano – currently quiescent – is remaining uncooperative. Adding to my frustration, the trap door above the pit filled with rabid monkeys has developed a squeak.</p>
		<h5>Related articles:</h5>
		<ul class="subjects">
			<li><a href="/lairs">Lairs</a></li>
			<li><a href="/renos">Renovations</a></li>
			<li><a href="/int">Interior Decoration</a></li>
		</ul>
	</div>
</div>
<div id="footer">
	<h6>Copyright &copy; 2011 Evil Incorporated.</h6>
	<p class="fineprint">I own you.</p>
</div>

There is no universal standard for naming conventions in XHTML. As a result, the browser and search engines have no understanding of what most content on a page truly is, outside of headings, paragraphs, images and links, along with the occasional <address>, <cite>, and <abbr> tag (assuming the developer knows to use them).

HTML5 changes that. It introduces an entire lexicon of specialized container tags, with (mostly) appropriate names, that tell the browser what each part of your page is for. These tags make coding a webpage and control of content both easier and more powerful.

If we wanted to re-write the XHTML example above into pure HTML5, the result would look something like this:

<header>
	<h1>Maniacal Musings</h1>
	<h2>The Daily Ponderings of a Supervillain</h2>
	<nav>
		<a href="/blog">Read All</a>
		<a href="/latest">Latest Post</a>
		<a href="/application">Apply to be a minion</a>
	</nav>
</header>
<aside>
	<h2>About Me</h2>
	<figure>
		<img src="doctor-d.jpg" alt="Doctor D">
		<figcaption>Your host, Doctor D</figcaption>
	</figure>
	<p>Raised by Manchurian Zoroastrian émigrés, I was schooled in Switzerland and the Congo under the private tutelage of Herr Kaiser Stamper, an eccentric pedagogue, sadist, and collector of origami folded by the insane.</p>
</aside>
<section>
	<article>
		<header>
			<time datetime="2011-01-14">January 14, 2011.</time>
			<h1>Volcano Cleansing</h1>
		</header>
		<p>We are falling behind schedule in construction of the new secret lair. The volcano – currently quiescent – is remaining uncooperative. Adding to my frustration, the trap door above the pit filled with rabid monkeys has developed a squeak.</p>
		<footer>Related articles:
			<a href="/lairs">Lairs</a>
			<a href="/renos">Renovations</a>
			<a href="/int">Interior Decoration</a>
			</footer>
		</article>
</section>
<footer>
Copyright &copy; 2011 Evil Incorporated.
<small>I own you.</small>
</footer>

Not only is this code significantly easier to read and comprehend, it it's also far more semantic: the markup has meaning to browsers, search engines, and accessibility tools.

It's important to note that the new HTML5 elements take the same CSS as the XHTML example; we just need to change the selectors used in the stylesheet, as shown in the next article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.