HTML5 semantic tags demo

Screenshot of the html5 demo"footer">

We already talked about why I chose this structure and then dug into the header and aside elements. Let’s pick right up and move on to the main content div.

Content Div

There’s quite a bit going on inside this div so let’s first look at the general structure.

1 2 3 4 5 6 7 8


As an article should be self-contained content it probably seems intuitive that it would include a header, footer, and sections of content. The inclusion of the comments might seem a little odd and it was another place I went with my gut.

You could make the argument that comments on the post should be a separate article instead of being included in the main article.

When you currently subscribe to a blog you’re delivered posts, though typically not the comments. You could also subscribe to the comments, but then those are usually considered a different subscription and are delivered without the post.

Screenshot of the content headerThe above is suggesting the use of 2 separate articles in html5 and perhaps that would have been the better choice.

Ask me again in a few weeks and I might recommend taking the comments out of the post article and placing them instead in another article (instead of a section) below the post article.


As you’d expect the header begins with an h1 tag. I want to call your attention to a couple of other things.

1 2 3 4 5 6 7

Wednesday, July 7, 2011



First is that I’ve used the time and address tags. The the former because I was adding a date and the latter to mark up my name as an .

The other thing to note is that this header closes with a couple of paragraphs of introductory text. It could have been included in a new section following the header, but sections typically (though not always) will include a header or at least a new heading.

Screenshot of the footer divSince these paragraphs are falling under the main h1 and are meant to be introductory text, it made more sense to me to include them here.


Most of the post content follows the same pattern. Each time a new heading is encountered I set up a new section, with that heading and some paragraphs of text. The paragraphs could also be lists and blockquotes, etc.

1 2 3 4 5 6 7 8 9 10 11 12 13

Headings that are siblings get their own section relative to the parent heading.


Footers are meant to include content describing the main content. Think meta information. Here I included a paragraph showing how the post was archived and then included a short author bio.

Since author name and description are related I enclosed both inside a new sections.

As I could envision moving the author bio to other types of pages I used an h1. I, but here I was pretending it had better browser support in order to play around with it in the demo.

ie7-on-xp.png ie6-on-xp.png Screenshot of the bottom of the demo page as seen in IE6 on Windows XP Screenshot of the demo in IE6 with Javascript disabled
Monaco changes hands.(Business)(Navistar pays $5 million less than originally proposed for the RV maker, whose headquarters will stay in Coburg): An article from: The Register-Guard (Eugene, OR)
Book (The Register Guard)
Uses for Monaco site weighed.(Business)(A local business leader says the facility on Interstate 5 would be ideal for a large manufacturer): An article from: The Register-Guard (Eugene, OR)
Book (The Register Guard)
Individual Software Professor Teaches Dreamweaver CS5 [Download]
Digital Software (Individual Software)
  • Developing the Site Structure. Creating and Applying CSS Styles. Inserting Text and Hyperlinks. Building Templates, Tables & Forms. Inserting Images and Multimedia
  • Importing Word or HTML. Adding a Flash Button. Creating a Nav Bar and Rollover Images. Using Frames and Formatting Options. Publishing to a Remote Site
Related Posts