HTML5 mark-up for blog posts

Writing about HTML5 while it is still in a state of flux is like standing upright on a water bed while shooting a carnival rifle at a moving row of ducks. What I’m about to tell you is based on the HTML 5 working draft dated 4 March 2010.

In HTML5 terms, the <article> element is considered sectioning content, as is the <section> element. Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element. A blog post, therefore, makes the most semantic sense to me when it is marked up as an <article> element. It can be syndicated as a unit.

An <article> element can include a <header> element, which could contain  <h1> through <h6> elements marking up things like the article title, author’s name, publication dates, and other material that makes sense. Within a <header> element, you can nest an optional <hgroup> element, which is header group, or a related group of elements within a <header>. In HTML5, each <article> can have its own <header>.

An <article> element can include a <footer> element. The <footer> could contain links to comments, various permalinks, options to share the post on Twitter or Facebook or StumbleUpon, an hCard, or other material relevant to the article content. In HTML5, each <article> can have its own <footer>.

Based on that background information, here’s sample markup for one way to format a blog post with HTML5. I suggest a few ways to add content, but there are many more ways to deal with this. For example, you might want the pubdate in the footer.

<article>
<header>
<a href="#" rel="bookmark" title="post title"><h1>Article title</h1></a>
<h2>Author's name</h2>
<p>Published <time pubdate datetime="2010-03-26T18:26-07:00"></time>.</p>
</header>
<p>A lot of great article content.</p>
<footer>
Footer info here: comment links, whatever.
</footer>
</article>

Written by

Barry Smith