Hello, HTML5
This week I've been skimming Mark Pilgrim's HTML5: Up and Running book with a keen interest in the new semantic elements that are being formalized as part of the HTML 5 spec. There are some great new semantic elements being proposed to replace pervasive, unformalized web developer memes like ...
<!-- This is _so_ 2008. --> <div id="header"> <ul id="navigation"></ul> </div> <div id="content"></div> <div id="main"></div> <div id="sidebar"></div> </div>
Notice in the above markup that the semantic info about each <div>'s purpose is captured in its id attribute. This is totally valid markup and will produce a well organized document, but it does have some serious drawbacks. While such a id-as-semantic-messenger anti-pattern is easily understood by a human web developer, it's not easily parsed by machines.
So why, you may ask, should we care whether machines can understand the semantics of our web pages? Aren't web pages designed to be read and understood by humans? No. Not, all humans read web pages. People with visual impairments have the web read to them by screen readers.
Screen readers aren't that great. Yet. For example, whereas a human can easily and reliably find the main navigation content of a web page, screen readers don't yet support jumping straight to a page's main navigation content. Consider the myriad HTML4 variations that a screen reader would have to handle in order to support a jump-straight-to-navigation feature:
- <ul id="navigation"></ul>
- <ul id="nav"></ul>
- <div id="navigation"></div>
- <ul id="navigacion"></ul>
- <ul id="menu_bar"></ul>
- etc.
HTML5 to the rescue! Writing screen readers that can find the <nav> element in a HTML5 document will be much easier than coding to handle the tag soup detailed above. And <nav> is not the only new semantic element that will make it easier to write better screen readers. HTML5 also defines <header>, <footer>, <section> and <aside>.
That's great news. As a father of a visually impaired child, I'm hoping that future screen reader software can provide my daughter with web interactions that are as rich as those that I enjoy. With that vision of the future in mind, I'm embracing HTML5 and have authored a quick "Hello, World!" example of HTML5 semantic elements in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello, HTML5 Semantic Elements!</title>
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Lorem ipsum ...</h1>
<h2>dolor sit amet, consectetur adipiscing.</h2>
</hgroup>
<nav>
<ul>
<li><a>Donec hendrerit</a></li>
<li><a>Pellentesque eget turpis</a></li>
<li><a>Quisque facilisis porttitor</a></li>
</ul>
</nav>
</header>
<div id="main">
<section>
<header>
<h2>Morbi a posuere magna</h2>
</header>
<p>Etiam feugiat pellentesque dapibus...</p>
<p>Phasellus ullamcorper condimentum urna...</p>
</section>
<section>
<header>
<h2>Donec posuere lobortis ipsum</h2>
</header>
<p>Cras tellus odio, facilisis nec porttitor...</p>
<p>Donec blandit suscipit urna ac luctus...</p>
</section>
</div>
<div id="sidebar">
<aside>
<header>
<h2>Ut tincidunt tincidunt</h2>
</header>
<p>Suspendisse varius, lacus a egestas...</p>
</aside>
<aside>
<header>
<h2>Praesent massa sapien</h2>
</header>
<p>Phasellus porttitor auctor sapien at...</p>
</aside>
</div>
<footer>
<p>© 2010 Dave Wingate</p>
</footer>
</body>
</html>
No comments:
Post a Comment