HTML5 semantic tags 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.

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.

The 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.

Header

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

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.

Since 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.

Section

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.

Footer

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.