Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

HTML5 Nav Element

By Stephen Bucaro

The <nav> element is one of HTML5's semantic elements. Whereas non-semantic elements such as a <div> can be used for web page layout, it provides no information about the meaning of its content. The semantic elements allow search engine spiders to more accurately index a webpage, and allow to accessibility applications such as document readers to present a document.

HTML5 semantic elements

Element	Purpose
<article>	contains an article
<aside>	contains side information
<details>	contains additional details
<figcaption>	contains a caption for a picture, diagram, or list
<figure>	contains a picture, diaagram, or list
<footer>	contains footer informtion
<header>	contains header information
<main>	identifies main content of a document
<mark>	identifies marked or highlighted text
<nav>	contains navigation links
<section>	contains a section of a document
<summary>	clicking <summary> element toggles visibility of <details> element
<time>	contains a date/time

The <nav> element provides a container for a block of navigational links. You should not place every stray link in a <nav> element. Applications such as parsers and screen readers for visually challenged users use the <nav> element to identify major navigation blocks.

Navigation Block Example

<nav>
  <a href="naviation_link_1.htm">Naviation Link 1</a> | 
  <a href="naviation_link_2.htm">Naviation Link 2</a> | 
  <a href="naviation_link_3.htm">Naviation Link 3</a> | 
  <a href="naviation_link_4.htm">Naviation Link 4</a> |
</nav>

Vertical Navigation Bar Using a List Element

<nav>
<ul>
<li><a href="naviation_link_1.htm">Naviation Link 1</a></li>
<li><a href="naviation_link_2.htm">Naviation Link 2</a></li>
<li><a href="naviation_link_3.htm">Naviation Link 3</a></li>
<li><a href="naviation_link_4.htm">Naviation Link 4</a></li>
</ul>
</nav>

One problem with using the nav element for applications such as parsers and screen readers is that the nav element has been used by some coders unofficially since the Web began. So the WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) recommends that a these applications can be sure that a role="navigation" attribute be added, as shown below.

<nav role="navigation">
<ul>
<li><a href="naviation_link_1.htm">Naviation Link 1</a></li>
<li><a href="naviation_link_2.htm">Naviation Link 2</a></li>
<li><a href="naviation_link_3.htm">Naviation Link 3</a></li>
<li><a href="naviation_link_4.htm">Naviation Link 4</a></li>
</ul>
</nav>

For more informatiion about the WAI-ARIA specification, visit: WAI-ARIA specification

More HTML Code:
• Wrapping Text Around Images
• HTML DIV Basics
• Semantic (X)HTML: Markup with Meaning
• How to Debug HTML
• HTML Bulleted or Unordered List
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• Checkbox Basics
• XHTML Basics
• Line Breaks in HTML
• HTML Select List Basics