Quick tip: Example markup for blog posts with HTML5

By Ryan Boudreaux August 30, 2011 TechRepublic, Web Design

Although the HTML5 specification is in a state of transition, there are several elements which can be implemented before all browsers support 100% of the requirements. Based on this specification, the components which lend themselves readily to blog posts, in particular, are actually used for sectioning content and include the <article> and <section> elements.

The HTML5 specification on the <section> element does make note that web authors are encouraged to use the <article> element instead of the <section> element when it would be appropriate to syndicate the contents of the element. As the specification states, the <article> element can represent a self-contained composition in a document, page, application, or site that is independently reusable or available for distribution, e.g., in syndication. Most individual blog posts are syndicated, so it becomes a perfect fit for the <article> element to semantically markup the content contained as a distinct entity.

An <article> element can contain many other elements, including its own <header>, along with a nested <hgroup> including <h1 – h6> headings; the blog writer’s name; and the publication date. Then the main content of the blog post is marked up as paragraph, blockquote, etc., and is grabbed from the database as usual. The <article> can contain its own <footer> element which could comprise copyright information, permalinks, print, and social media sharing opportunities to Delicious, Facebook, StumbleUpon, and Twitter, for example.

Another nested <article> section would include comments added by visitors. The specification states that when an article element is nested, the inner article elements represent articles that are primarily related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry. (Read more…