This article is one in a series of brief discussions about the proposed specifications for HTML 5. View the Working Draft for HTML 5 at the W3C.
The nav element is a new semantic element. It is meant for navigation or a table of contents. Each nav may include other HTML elements, particularly lists of links. The nav element is meant for blocks of links, not for individual links mentioned in textual content or for links in the footer area of a section or article.
It replaces the concept of a <div id=”nav”> element with a semantic element meant specifically as a navigation area.
As with other new semantic elements in HTML5, there may be more than one nav element on a page. Perhaps global site navigation and secondary level navigation blocks for subsections of a site. They can be styled with hooks like individual id or class attributes, or using descendant selectors based on where they are nested on the page. The HTML5 replacement for what we have commonly thought of as a sidebar is the new aside element, which is meant to hold content such as the nav element.
Here is sample HTML for a nav element:
<nav>
<h1>The Navigation</h1> <ul>
<li><a href="/">Home</a></li>
<li><a href="/software">Software</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
The Opera browser, Safari, Firefox, and, to a more limited extent Internet Explorer, support some or most of the HTML5 specifications, including the nav element.
See also HTML5: The Doctype Declaration
I’m sorry to say this, Virginia, but I actually believe that you should no wrap your navigation in aside.
And it is really not necessary either. This is ok (hoping the pre-tag will work):
The Navigation
Home
Software
Support
About
OK, your WP-install butchered that comment. The idea was that you should put the nav-tags where you have the aside-tags now, enclosing the whole block, including the heading.
Lars Gunthers last blog post.. Piratpartiet liknar Humanisterna
Lars, I removed the aside based on your suggestion. However, I’ve been searching Google for some explanation as to how the semantic elements such as nav can be nested and I’m not finding much helpful information. Are you saying that a nav element never needs to be nested? If that’s the case, I may have further changes to make.
Short answer. The nav element is basically just a more semantic div. It can be nested, although it does not need to.
The problem I saw in your original version was not that nav was nested per se, but that it should not be nested inside aside.
Aside should be “tangentially related” to the article (or something like that). Like a quick facts box, pull quotes or specific read more links related to the article.
I think this article explains the new structural elements best: http://www.alistapart.com/articles/previewofhtml5
Note, however, that it is slightly wrong when discussing header, since a new element, hgroup, is better suited for some of the use cases.
(And, no, I don’t know why blockquote is not deemed worthy of being used for pull quotes…)
I saw that aside was “tangentially related” but I also saw someone’s HTML5 tutorial where it was used like a sidebar div and contained a nav element.
Some confusion might come from the use of the word “sidebar” in this in the working draft. “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. Such sections are often represented as sidebars in printed typography.”
Looking at the actual links in your example they seemed to represent site navigation, not a sidebar navigation…
I suppose the links you have to the right with the heading CATEGORIES could be a nav-element, within an aside. I still think it would be appropriate to have the heading inside the nav-tags, though.