HTML <nav> Tag

The <nav> tag is an HTML5 element used to define a section of navigation links within a web page. This tag helps with both the structure and semantics of the webpage, making it more accessible for users and search engines alike. The <nav> element can be used to group the main navigation links, such as links to different sections or pages of a website.

The <nav> tag is one of the HTML5 elements. It is used to specify a block of navigation links, either within the current document or to other documents. Examples of navigation blocks are tables of contents, menus, and indexes.

nat tag example

One HTML document may contain several <nav> tags, for example, one for site navigation and one for intra-page navigation.

Note that not all links in the HTML document are placed inside the <nav> element, it includes major navigation blocks. The <nav> tag can be placed for defining links in the footer of the website, but the <footer> tag is usually used in such cases.

The <nav> tag cannot be nested in the <address> element.

Syntax

The <nav> tag comes in pairs. The content is written between the opening (<nav>) and closing (</nav>) tags.

Example of using the HTML <nav> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h1>Programming Courses</h1>
    </header>
    <nav>
      <a href="/learn-html.html">HTML</a> | 
      <a href="/learn-css.html">CSS</a> | 
      <a href="/learn-javascript.html">JavaScript</a> | 
      <a href="/learn-php.html">PHP</a> |
    </nav>
    <h2>Welcome to W3Docs!</h2>
  </body>
</html>

Example of the <nav> tag:

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav {
        display: flex;
        flex-wrap: wrap;
      }
      nav a {
        text-decoration: none;
        display: block;
        padding: 15px 25px;
        text-align: center;
        background-color: rgb(189, 185, 185);
        color: #464141;
        margin: 0;
        font-family: sans-serif;
      }
      nav a:hover {
        background-color: #777777;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML nav tag:</h1>
    <nav>
      <a href="https://www.w3docs.com/">Home</a>
      <a href="https://www.w3docs.com/quiz/">Quizzes</a>
      <a href="https://www.w3docs.com/snippets">Snippets</a>
      <a href="https://www.w3docs.com/tool/">Tools</a>
      <a href="https://www.w3docs.com/string-functions/">String Functions</a>
    </nav>
  </body>
</html>

Example of creating a dropdown menu using the HTML <nav> tag:

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav ul ul {
        display: none;
      }
      nav ul li:hover > ul {
        display: block;
      }
      nav ul:after {
        content: "";
        clear: both;
        display: block;
      }
      nav ul li {
        float: left;
        position: relative;
        list-style-type: none;
      }
      nav ul li:hover {
        background: rgba(19, 20, 123, 0.67);
      }
      nav ul li:hover a {
        color: #fff;
      }
      nav ul li a {
        display: block;
        padding: 20px 30px;
        color: #ffffff;
        text-decoration: none;
        background-color: rgba(35, 17, 134, 0.8);
        font-family: sans-serif;
      }
      nav ul ul {
        background: #5f6975;
        padding: 0;
        position: absolute;
        top: 100%;
      }
      nav ul ul li {
        float: none;
        position: relative;
      }
      nav ul ul li a {
        padding: 15px 10px;
        color: #ffffff;
        text-transform: uppercase;
      }
      nav ul ul li a:hover {
        background: rgba(19, 20, 123, 0.67);
      }
    </style>
  </head>
  <body>
    <h1>Dropdown menu with the HTML nav tag:</h1>
    <nav>
      <ul>
        <li>
          <a href="https://www.w3docs.com/">Home</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
          <ul>
            <li>
              <a href="https://www.w3docs.com/quiz-start/html-basic">HTML Bacis</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/quiz-start/css-basic">CSS Bacis</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/quiz-start/javascript-basic">JavaScript Bacis</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/quiz-start/php-basic">PHP Bacis</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/quiz-start/es6-basic">ES6 Bacis</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
          <ul>
            <li>
              <a href="https://www.w3docs.com/snippets/angularjs.html">Angular JS</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/snippets/apache.html">Apache</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/snippets/git.html">Git</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/snippets/linux.html">Linux</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/snippets/nodejs.html">Node.Js</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/snippets/symfony.html">Symfony</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
          <ul>
            <li>
              <a href="https://www.w3docs.com/tools/html-encoder/">HTML ENCODER/DECODER</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/css3-maker/border-radius">CSS MAKER</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/password-generator">PASSWORD GENERATOR</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/image-base64">Base 64</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/code-diff/">CODE DIFF</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
          <ul>
            <li>
              <a href="https://www.w3docs.com/tools/string-revers">STRING REVERSE</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/string-word-count">STRING WORD COUNT</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/string-remove-empty-lines">EMPTY LINES REMOVER</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>

Attributes

The <nav> tag supports the Global Attributes and the Event Attributes.

How to style <nav> tag?

Common properties to alter the visual weight/emphasis/size of text in <nav> tag:

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick.
  • CSS text-transform property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <nav> tag:

  • CSS color property describes the color of the text content and text decorations.
  • CSS background-color property sets the background color of an element.

Text layout styles for <nav> tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <nav> tag:

Browser support

chrome firefox safari opera
6+ 4+ 5+ 11.1+

Practice Your Knowledge

What is the purpose and usage of the <nav> tag in HTML?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?