Tip: HTML5 markup 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>

5 thoughts on “Tip: HTML5 markup for blog posts

  1. Putting comments in the footer element does not sit right with my gut feeling. Comments are probably better off in their own nested article-elements. Let’s see if markup works on your comment fields:

    <article>
    blog post goes here
    <article>
    comment 1 goes here
    </article>
    <article>
    comment 2 goes here
    </article>
    <article>
    comment 3 goes here
    </article>
    </article>

    .-= Lars Gunther´s last blog ..Gy -11 webbkursernas inbördes relation =-.

    • I didn’t mean the actual comments. Just a link to the comments. I agree, the actual comments should probably be individual article elements.

      Update: In thinking about this more, I’m wondering if you could make a semantic case for putting the whole block of comments in a section element, with each individual comment marked up as an aside.

Leave a Reply