By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HTML Nav Tag

How to use the nav tag. The nav element is used for navigation. Example, and attribute list included in this reference.

Edited: 2014-12-28 05:50

The nav element of HTML is used for navigation columns on a page, usually containing a list with links.

The nav element can contain a list of navigation links, either linking to different pages on the site, or subsections on the same page.

Use the nav element to make it easier for screen readers to "skip" the navigation, directly to the content, and vise versa.

Not all links should be marked up with the nav element, many links can't be considered part of the main navigation. An example would be links troughout the content of a page.

Benefits of using nav

One of the main benefits from using the nav element, is that some user agents, such as screen readers, will be able to identify navigation links more adequately, and tell them apart from the main content.

This ability allows the users, to easily jump between areas of interest on a page, more adequately then possible if the web-designer followed traditional usability practices.

Attributes

Attribute: Value: Description:
Attributes Global Attributes Common, Event, I18n

Using Section

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>My first Website</title>
    <style type="text/css">
     article, section { /* Older browsers need this fix, to render these elements properly */
     display: block;
    }
     
     /* The below styles are only included to
        demonstrate the structure of the page visually
        for the purpose of this example
     */
     section {
     border: 1px solid #298e31;
     padding: 1em;
    }
     article {
      border: 1px solid #ffbc66;
      padding: 1em;
      margin: 1em;
     }
    </style>
  </head>

  <body>
    <article>
       <h1>Example of how to use the nav element, along with other Semantic elements</h1>
       <p>Main blog post, article, etc..</p>
       
       <section>
        <h1>Subsection of article</h1>
        <p>A subsection of the main article.</p>

        <section>
         <h1>This is a subsection of the first subsection</h1>
         <p>This is a subsection to a subsection</p>
        </section>
       </section>
      </section>

      <article>
       <section>
        <h1>Some Blog comment or forum reply</h1>
        <p>The text of the comment, or individual post in a forum thread. Note. subsections are also allowed.</p>
       </section>
      </article>
      <article>
       <section>
        <h1>Another Blog comment or forum reply</h1>
        <p>The text of the comment, or individual post in a forum thread. Note. subsections are also allowed.</p>
      </article>
    </article>
    <nav>
     <h1>Navigation</h1>
     <ol>
      <li><a href="http://brugbart.com/Infrastructure/About_8.html">About us</a></li>
      <li><a href="http://brugbart.com/Infrastructure/Contact_9.html">Contact</a></li>
      <li><a href="http://brugbart.com/Infrastructure/Privacy-Policy_54.html">Privacy Policy</a></li>
     </ol>
    </nav>
  </body>

</html>

Brugbart Vision!