HTML - <nav> Tag

Quiz

Introduction to <nav> Tag

The HTML <nav> tag is a semantic element used to define the block of navigation links. It helps the search engines to understand the structure of a webpage, making navigation more accessible. The <nav> tag contains the links to other sections of the website, such as homepages or contact pages.

The <nav> tag is projected specifically for primary navigation, such as menu or table of contents, rathert han general hyperlinks in the document. We can use the multiple <nav> within a single webpage.

Syntax

Following is the syntax of HTML <nav> tag −

<nav>...</nav>

Attributes

HTML nav tag supports Global and Event attributes of HTML.

Example : Basic Navigation Menu

Let's look at the following example, where we are going to create a horizontal navigation bar with links to the website.

<!DOCTYPE html>
<html>
    <style>
        body{
            text-align:center;
            font-family:verdana;
        }
        a{
              color:#a569bd;
        }
    </style>
<body>
<nav>
  <a href="https://www.tutorialspoint.com/index.htm">Home</a>
  <a href="https://www.tutorialspoint.com/whiteboard.htm">Whiteboard</a>
  <a href="https://www.tutorialspoint.com/online_dev_tools.htm">Tools</a>
</nav>
</body>
</html>

Example : Navigation with List

Consider the following example, where we are going to use the unordered list inside the <nav> tag.

<!DOCTYPE html>
<html>
    <style>
        body{
            font-family:verdana;
        }
        a{
              color:#a569bd;
        }
    </style>
<body>
<nav>
  <ul>
    <li><a href="https://www.tutorialspoint.com/index.htm">Home</a></li>
    <li><a href="https://www.tutorialspoint.com/articles/index.php">Articles</a></li>
    <li><a href="https://www.tutorialspoint.com/online-programming-compilers.htm">Compilers</a></li>
  </ul>
</nav>

</body>
</html>

Supported Browsers

Tag
nav	Yes 5.0	Yes 9.0	Yes 4.0	Yes 5.0	Yes 11.1

html_tags_reference.htm

Previous Quiz Next