nav ... ⁄nav

Share it

nav intro nav browser display nav parents - children nav syntax

HTML5 nav element

The nav element allows you to mark up a navigation section (blocks of navigation links like: navigation menus, site maps...) in your HTML5 document. »video

The nav element creates a section (potentially has a heading = its own outline).

About nav

is an optional element
multiple nav elements allowed per HTML5 document

Display & support nav

display in browser »video
display type: block

₉

Parents, children nav

nav nested within elements »nav parents
elements nested within nav »nav children
»examples

Attributes nav

required: none
optional: global attributes, event attributes

Observations

Not every link⁄group of links on page need(s) to be nested within nav element, only the large blocks of links suitable to a section. »video

The nav element is helpful for screen readers to determine what content on page to skip or provide upon user request.

Syntax nav

1	<nav> ... </nav> »video

Attributes and Values nav (comma separated)

<nav	attribute	=	"attribute_value(s)"	Video	Examples
1. specific attributes
	All Specific Attributes
2. global attributes
1.	accesskey	=	keyboard key	»img	<nav accesskey="h"> ... </nav>
2.	class	=	class name	»html »img	<nav class="class_name"> ... </nav>
3.	contenteditable	=	"", , true, false	»html	<nav contenteditable="true"> ... </nav>
4.	contextmenu	=	menu id value	»html	<nav contextmenu="menu_id_value"> ... </nav>
5.	data-*	=	value	-	<nav data-http-error="404"> ... </nav>
6.	dir	=	ltr, rtl, auto	»html	<nav dir="ltr"> ... </nav>
7.	draggable	=	true, , false	»img	<nav draggable="false"> ... </nav>
8.	dropzone	=	copy, move, link, string:, file:	-	<nav dropzone="copy"> ... </nav>
9.	hidden	=	"", , hidden	»html »img	<nav hidden="hidden"> ... </nav>
10.	id	=	id name	»html »img	<nav id="unique_id_name"> ... </nav>
11.	itemid	=	URL	-	-
12.	itemprop	=	string	»link »a	-
13.	itemref	=	string	-	-
14.	itemscope	=	"", , itemscope	-	-
15.	itemtype	=	absolute URL	-	-
16.	lang	=	language code	»html »head »title »img	<nav lang="en"> ... </nav>
17.	spellcheck	=	"", , true, false	»html	<nav spellcheck="true"> ... </nav>
18.	style	=	CSS property:value	»html »img	<nav style="color:red"> ... </nav>
19.	tabindex	=	integer	»img	<nav tabindex="3"> ... </nav>
20.	title	=	text	»html »link »style »abbr »dfn »img »meter	<nav title="html page"> ... </nav>
21.	translate	=	"", yes, no	»html »img	<nav translate="yes"> ... </nav>
	All Global Attributes
3. global event attributes
1.	onclick	=	script	» list	<element onclick="script" > ...
2.	ondblclick	=	script	» list	<element ondblclick="script" > ...
	All Event Attributes

Video demonstration nav element

HTML5 nav element: mark up a navigation sections

min	video details
00:00	video tutorial nav element HTML5
00:01	nav element allows you to mark up a navigation section (blocks of navigation links)
00:09	this is a block of navigation links (external links (the first 4) and internal links (last 3))
00:17	together with a heading (h1) represents a block of navigational links suitable for a section
00:22	→ this section of navigation links can be marked up properly using nav element
00:31	the section has a heading(h1) and an outline
00:33	the heading of the section
00:36	the outline of the section
00:40	let's see an example
00:53	our page has a header container
00:58	a main container
01:06	and a footer container
01:13	and inside the header container we have the section with navigation links
01:21	let's highlight the section of navigation links through CSS
01:30	these 2 links do not create a section of large blocks of navigation links → should not be nested within nav element and they aren't!

For more information about the nav element, please see the specs: W3C ⁄ WHATWG