HTML - <nav> Tag

The HTML <nav> tag is used to represent a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.

Not all links need to be included in the <nav> element. <nav> is only intended for a major block of navigation links. Usually, the <footer> element often contains a list of links that don't need to be in the <nav> element.

Syntax

Following is the syntax for HTML <nav> tag −

<nav>...</nav>

Example

In the following example, we are using the <nav> tag to specify the sections that contain the navigation links.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>nav Tag</title>
   <style>
      nav {
         text-align: center;
         width: 20%;
         height: 200px;
         background-color: antiquewhite;
      }

      nav a {
         display: block;
         width: 100px;
         padding: 10px;
         background-color: aquamarine;
         margin: 10px;
         position: relative;
         top: 10px;
         left: 10px;
      }
   </style>
</head>
<body>
   <h1>Links: </h1>
   <nav>
      <a href="https://www.tutorialspoint.com/html/index.htm">HTML</a>
      <a href="https://www.tutorialspoint.com/css/index.htm">CSS</a>
      <a href="https://www.tutorialspoint.com/javascript/index.htm">JavaScript</a>
   </nav>
</body>
</html>

When we run the above code, it will generate an output consisting of the nav bar with a hyperlinks displayed on the webpage.

Example

Following is another example of the <nav> tag. Here, we are using the <nav> to specify the section that contains the lists.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>nav Tag</title>
   <style>
      nav {
         width: 30%;
         height: 200px;
         background-color: aqua;
         border-radius: 10px;
      }

      nav ul {
         list-style: none;
         padding: 10px 10px 10px 10px;
         line-height: 40px;
      }

      nav ul li {
         position: relative;
         top: 10px;
         width: 100%;
         text-align: center;
         border-radius: 5px;
      }

      nav ul li:nth-child(odd) {
         background-color: antiquewhite;
      }

      nav ul li:nth-child(even) {
         background-color: rgb(153, 212, 43);
      }
   </style>
</head>
<body>
   <h1>Fruits List: </h1>
   <p>Following are lists of the fruits lists: </p>
   <nav>
      <ul>
         <li>Apple</li>
         <li>Banana</li>
         <li>Orange</li>
         <li>Grapes</li>
      </ul>
   </nav>
</body>
</html>

On running the above code, the output window will pop up displaying the nav bar applied with CSS on the webpage.

Example

In this example, we are using the <nav> tag along with the <ul>, <li>, and <a> tags to create a navigation bar and specify the sections as well, this can be presented as a sidebar, navigation bar, or drop-down menu.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>nav Tag</title>
   <style>
      * {
         padding: 0;
         margin: 0;
      }

      nav {
         width: 30%;
         background-color: aquamarine;
         height: 30px;
         display: grid;
         place-items: center;
      }

      nav ul {
         list-style: none;
      }

      nav ul li {
         display: inline-block;
      }

      nav ul li a {
         text-decoration: none;
         margin: 0px 20px;
         font-size: 16px;
         font-family: sans-serif;
      }
   </style>
</head>
<body>
   <h1>Welcome to Navigation Bar</h1>
   <br>
   <nav>
      <ul>
         <li>NavigationBar</li>
         <li>
            <a href="https://www.tutorialspoint.com/index.htm">Home</a>
         </li>| <li>
            <a href="https://www.tutorialspoint.com/about/index.htm">About</a>
         </li>| <li>
            <a href="https://www.tutorialspoint.com/about/contact_us.htm">Contacts</a>
         </li>
      </ul>
   </nav>
   <br>
   <p>Click on the above links, it will redirect you to the related page...</p>
</body>
</html>

When we run the above code, it will generate an output consisting of the nav bar displayed on the webpage.

Example

In this program, we are creating two <nav> tags to specify the sections. The semantics of the new element is to provide a link. Although an <nav> element does not have to contain a list, it can contain other types of content as well.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>nav Tag</title>
   <style></style>
</head>
<body>
   <nav>
      <ul>
         <li>
            <a href="">HOME</a>
         </li>
         <li>
            <a href="">ABOUT</a>
         </li>
         <li>
            <a href="">CONTACT</a>
         </li>
         <li>
            <a href="">BLOG</a>
         </li>
      </ul>
   </nav>
   <nav>
      <h1>Navigation Bar</h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam neque voluptates, cupiditate qui labore magni itaque iure eligendi doloribus sequi voluptas laborum illum sapiente accusamus quae perspiciatis eos! Vero, asperiores? <a href="">Read more </a>
      </p>
   </nav>
</body>
</html>

On running the above code, the output window will pop up displaying the multiple nav bar on the webpage.

html_tags_reference.htm
Advertisements