join: new@juude

get alerts for new articles

CLOSE WINDOW

html5

Structural, Layout and More

<nav></nav> (w3c)

The allowed parent is any element that can contain flow elements which is fairly broad. It cannot be a descendent of the address element.

ARIA role attribute value: navigation
role="navigation"

The best bet is to use the nav element for major navigation, which is most likely in the header or sidebar. It can also be placed directly within the body, a section, aside or article. It can be used in the footer, but is not normally necessary. You can add a short list of links to the footer without including a nav.

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. In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation. Not all groups of links on a page need to be in a nav element... it is common for footers to have a short list of links to various pages of a site.. but it is usually unnecessary to include a nav in the footer. HTML 5.1 Nightly

Attributes: All Global

DON'T USE FOR STYLING
A nav should not be used to wrap information for styling only, in that case you need to use a div.

MAKE SURE IT DISPLAYS IN AND PRINTS CORRECTLY FROM ALL VERSIONS OF EACH BROWSER
In your CSS you need to make sure that this element is a block:
nav{
display: block;
}

Include the javaScript (info on this page) so that it works in all IE versions 9 down which will also allow it to print correctly from older versions of IE

NAV

The nav element can contain :

links to other pages
links within a page

The nav element can be a child of most other elements it is most commonly used as a child of:

body
header
aside
Can only be used as a decendent of main if the links are to areas within that element

Examples

<body>
<header><nav> menu items</nav></header>
<article></article>
</body>

<body>
<header></header>
<nav> menu items</nav>
<section></section>
<section></section>
</body>

<body>
<header></header>
<article></article>
<aside><nav> menu items</nav></aside>
</body>