The Nav Element

With HTML5 came the nav element. A <nav> block can contain your site’s major page or intra-page links, and can be used to declare a menu, table of contents, or site index.

Using the <nav> element is considered good practice because of its accessible features, but is also useful for styling purposes.

Important As with anything you want visible to users, the <nav> element must be within the <body> of the page.

HTML 
<nav>
  <!-- Site Links -->
</nav>


<!-- For example... -->
<nav id="main-menu">
  <a href="#">Home</a>
  <a href="#">Gallery</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

To add links using HTML structural elements, you’ll need to weigh appearance versus accessibility.

Flat Text

To get a “horizontal” nav without much styling, you can simply add <a href=""> contents, separated with a visual signifier like:

  • vertical bars ( | , written with escape name &vert; )
  • interpunct ( · , written with escape name &middot; )
  • additional spaces ( written with escape name &nbsp; for each )
  • etc

Lists

However, lists are preferred by screen-reader technologies as it increases the accessibility of the navigation. The “Styling Text” page in the previous subtopic showed you how to display these items horizontally, if preferred.