Semantosoph

HTML5 and Semantics

If you ever did a web project that featured dated entries, like articles in a blog, you may have typed something like

<div id="navigation">
  <ul>
    <li>Home</li>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

and

<span class="publication-date">2009-11-03</span>

Now, this is higly understandable for any developer and for most of your users, but not for crawlers and the like. As this is the central issue in the field of the semantic web, there are already some solutions that address this problem. You could, for example, enhance your code with semantic markup like RDFa or microformats.

But then, that may be overkill. Why not just use the possibilities that come with the shiny new HTML5? Most of the modern browsers already support at least some of the new features. Features, in this case, are new text-level semantic tags that allow a lightweight semantic annotation of content. With the use of these new tags, our first example would read:

<nav>
  <ul>
    <li>Home</li>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</nav>

This enables screen readers, mostly used by people with limited sight, to jump directly to the sites menu and allow a quick navigation. Even more fun comes with the second example:

<time datetime="2009-11-03" pubdate>2009-11-03</time>

This promotes the human readable string to a full machine readable timestamp that tells every crawler/browser/whatever the publication date of the embracing document.

If you want to learn more about these two and all the other cool new tags, please have a look at Dive into HTML5, a clearly structured and neatly designed publication by the great Mark Pilgrim.