W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

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

Display & support nav

Firefox iconChrome iconIE icon9Opera iconSafari icon

Parents, children nav

Attributes nav


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)

<navattribute="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: W3CWHATWG