HTML5 and CSS3: Baby Steps

Post on February 17, 2012 by J Andrew Scott

So you’re ready to plunge into the brave new world of HTML 5, huh? Technically, the W3C working group started working on the HTML 5 standard in 2004 and released its first working draft in 2008. As of February 2012, no final specification exists. Eight years without a finished product doesn’t sound particularly brave or new. On the upside, non-revolutionary changes are pretty easy to transition into. In fact, if your current markup is strictly HTML 4.01 compliant, then it is mostly HTML 5 compliant already.

So we’re done, right?

Well, not exactly. As often happens, it’s actually the major browsers who are driving standardization. Fortunately for us, the big hitters are generally sticking to the W3C’s working draft, at least on the basics. So let’s start there.

Part #1: The Basics The Requirements

Oh, wait! First things first. We need to change our HTML <!DOCTYPE> declaration. You were using one, right? Of course you were. If not, today’s a good day to start. Your old doctype probably looked something like this:

HTML 4.01 DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

That’s pretty cumbersome. Imagine our joy to discover how simple the doctype looks:

HTML 5 DOCTYPE
<!DOCTYPE html>

That’s a pretty bit of code we can live with. Now that we have that cleared up…

Part #1: The Basics (for real this time)

As I said before, if your markup is strictly HTML 4.01 compliant, it’s already mostly HTML 5 compliant. The difference is all the new gadgets that HTML 5 offers. If you’ve been writing html for any length of time, then you’re familiar with ye olde <div> tag. In fact, you’ve probably used it for pretty much every block-level element ever. That’s about to change. HTML 5 offers us more intuitive semantics than the generic <div> for describing our content:

  • <header> for page, article, and section headers
  • <footer> for page, article, and section footers
  • <article> for the primary content blocks on a page
  • <section> for portions of content in an article
  • <aside> for supplementary content blocks on a page (think sidebars, etc)
  • <nav> for navigation menus and the like

Consider the following page:

HTML 4.01 Markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Old-School Markup</title>
	</head>
	<body>
		<div class="header">
			<h1>Welcome</h1>
		</div>
		<div class="nav">
			<ul>
				<li><a href="/link/url/">Link Text</a></li>
				<li><a href="/link/url/">Link Text</a></li>
				<li><a href="/link/url/">Link Text</a></li>
				<li><a href="/link/url/">Link Text</a></li>
				<li><a href="/link/url/">Link Text</a></li>
			</ul>
		</div>
		<div class="article">
			<div class="header">Lorem Ipsum</div>
			<p>Lorem ipsum dolor sit amet...</p>
			<div class="section">
				<div class="header">Lorem Ipsum</div>
				<p>Lorem ipsum dolor sit amet...</p>
				<p>Lorem ipsum dolor sit amet...</p>
				<p>Lorem ipsum dolor sit amet...</p>
			</div>
			<div class="section">
				<div class="header">Lorem Ipsum</div>
				<p>Lorem ipsum dolor sit amet...</p>
				<p>Lorem ipsum dolor sit amet...</p>
				<p>Lorem ipsum dolor sit amet...</p>
			</div>
		</div>
		<div class="sidebar">
			<p>Lorem ipsum dolor sit amet...</p>
		</div>
		<div class="footer">
			<h4>&copy; 2012</h4>
		</div>
	</body>
</html>

Pretty standard stuff here. Nothing is wrong with this per se, but all those <div>‘s can be a bit ambiguous and the extra class names to differentiate them are taking up extra bandwidth. While that may not be a concern for desktop users with broadband, we also want to consider mobile users with slower 3G connections. More markup means longer load times and higher data fees. Nobody wants that. So, we update our markup like so:

HTML 5 Markup

<!DOCTYPE html>
<html>
	<head>
		<title>New-Fangled Markup</title>
	</head>
	<body>
		<header>
			<h1>Welcome</h1>
		</header>
		<nav>
			<ul>
				<li><a href="/link/url/">Link Text</a></li>
				<li><a href="/link/url/">Link Text</a></li>
				<li><a href="/link/url/">Link Text</a></li>
				<li><a href="/link/url/">Link Text</a></li>
				<li><a href="/link/url/">Link Text</a></li>
			</ul>
		</nav>
		<article>
			<header>Lorem Ipsum</header>
			<p>Lorem ipsum dolor sit amet...</p>
			<section>
				<header>Lorem Ipsum</header>
				<p>Lorem ipsum dolor sit amet...</p>
				<p>Lorem ipsum dolor sit amet...</p>
				<p>Lorem ipsum dolor sit amet...</p>
			</section>
			<section>
				<header>Lorem Ipsum</header>
				<p>Lorem ipsum dolor sit amet...</p>
				<p>Lorem ipsum dolor sit amet...</p>
				<p>Lorem ipsum dolor sit amet...</p>
			</section>
		</article>
		<aside>
			<p>Lorem ipsum dolor sit amet...</p>
		</aside>
		<footer>
			<h4>&copy; 2012</h4>
		</footer>
	</body>
</html>

Not only is our new markup more readable, we’ve dropped our file size from 1155 bytes to 988 bytes. While that doesn’t sound like much, we’ve saved ourselves and our users almost 15% of the original bandwidth cost. Not bad for a few minutes’ work.

So congratulations, you’re using HTML 5. Of course there’s a lot more to it than that. We haven’t touched on the new media elements like <audio> and <video>, or really nifty stuff like <canvas>, but one thing at a time. We’ll get there, I promise.