Social Enterprise

Quick tip: Example markup for blog posts with HTML5

Ryan Boudreaux describes the role of HTML5 elements that are most pertinent to creating blog posts.

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.

A <nav> element can also be added between blog posts as navigation to main pages on the site, and could also include breadcrumbs within the header. The <time> microformat is used in two instances with separate implementations — in the header as a date stamp for year, month and day only, and in the form datetime="YYYY-MM-DD", and then for comments with the date and time stamp in the form: datetime="YYYY-MM-DDTHH:MM+ZZ:ZZ", where time and time zone is also specified.

The composition of a typical blog post as marked up with HTML5 could be represented in the following wireframe:

Figure A

Based on the wireframe and the specification, a sample markup for a typical blog post might look something like this utilizing HTML5 elements:

      <span class="previous"><a href="#_previous"><— Previous Post</a></span>&nbsp;&nbsp;&nbsp;<span class="next"><a href="#_next">Next Post —></a></span>
       <a href="#" rel="permalink" title="post title"><h1>Article title</h1></a>
       <h2>Blog post sub-heading</h2>
       <h3>Author's name</h3>
       <h4><time pubdate date="2011-08-08"><em>August 8, 2011</em></time>, <a href="#_comments"><em># Comments</em></a></h4>
  <p><img src="#" align="left" alt="image" title="image"> The article body content here.</p>
   <p><a href="#_permaL">Permalink</a>, Tags: <a href="#_TagS">Tag1</a>, Social Networking: <a href="#_SocialN">Sociable</a></p>
      <ul id="comments">
            <p><time pubdate datetime="2010-08-08T18:35-05:00"><em>August 8, 2011 6:35 pm</em></time><br>
            Comment one...
      <a href="#_index">Home</a> <a href="#_blog">Blog</a> <a href="#_news">News</a> <a href="#_archive">Archive</a>

An optional screen capture of the code as displayed in Dreamweaver:

Figure B

Click to enlarge.

About Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks