Last week we took care of the head of our HTML5 document. If you haven’t checked it out, run over there real quick. It will only take you 5 minutes to get up to speed with a working proof of concept. Here’s the code again in case you forgot:

[html]

header

HTML 5 Demo

article

Terminology and Usage

section

• The header element represents a group of introductory or navigational aids.
• The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
• An article element is “independent” in the sense that its contents could stand alone, for example in syndication.
• The section element represents a generic document or application section…[it] is not a generic container element.
• The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
• The footer element represents a footer for its nearest ancestor sectioning content.

[/html]

header

One of the first items developers put on the page is a header. Now we have a tag to represent that part of the page. This is the obvious place to put the title of your website, the navigation, and other header-type elements. You can also put a header in other parts of the page. It doesn’t have to go at the top but usually it will. The most common place will be in an article or section tag.

nav

The nav element is just like the header element, except it contains navigational elements, i.e. links to other pages or parts of a page.

article

This is from the HTML5 Draft Spec: An article element is “independent” in the sense that its contents could stand alone, for example in syndication. I think the best way to explain this is with a little example of content that would be good for an article:

• Blog post
• News article
• Tutorials
• Main page content

And here is an example of content that would NOT be good for an article:

• Navigational elements
• Main header content
• Sidebars
• Footer content

Get the difference? One is actual content that can be swiped as-is and does not require any context. The other elements do not necessarily add or detract from the article, but would require context to be understood in a different context.

Part 2 conclusion

One of the great things about HTML5 is that the new elements are simple, few, and needed. The header, nav, and article tags are perfect examples. Next week we’ll hit up a few other elements including the aside and footer tags.