Open In App

HTML <nav> Tag

Last Updated : 28 Jul, 2025
Comments
Improve
Suggest changes
21 Likes
Like
Report

The <nav> tag in HTML is used to define navigation sections on a webpage. It typically contains links to key parts of the site, such as the main menu, table of contents, or index. These links are usually organized using unordered lists (<ul>) or displayed as standalone links.

Using the <nav> tag improves the semantic structure of a webpage, helping both users and search engines understand which parts of the page are meant for navigation. According to modern web development practices, over 85% of well-structured websites use the <nav> tag to enhance accessibility and improve SEO performance.

How to Use the <nav> Tag

Links within the <nav> tag can either be standalone or structured within an unordered list (<ul>) for better organization. While it’s common to use lists, it’s not a strict requirement.

Syntax:

<nav>
  <!-- Your navigation links here -->
</nav>

Note: The <nav> tag also supports the Global Attribute and Event Attributes in HTML.

Example 1: Basic Implementation of <nav> Tag

In this example, we will see the <nav> tag, containing a simple set of navigation links for different sections like Home, Interview, Languages, Data Structure, and Algorithm. The links are separated by vertical bars.

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML nav Tag</title>
</head>
<body>
    <h2> HTML nav Tag</h2>
    <!-- nav tag starts -->
    <nav>
        <a href="#">Home</a> |
        <a href="#">Interview</a> |
        <a href="#">Languages</a> |
        <a href="#">Data Structure</a> |
        <a href="#">Algorithm</a>
    </nav>
    <!-- nav tag ends -->
</body>
</html>

Output: 

output

Example 2: Styling the <nav> Tag Using CSS

In this example, we apply CSS styling to the <nav> section to enhance its appearance. We will style the navigation links with a green background, white text, and remove the underlines for a cleaner look.

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTML Nav Tag</title>
    <style>
        nav {
            border: 1px;
            background-color: green;
            color: white;
            padding: 6px;
        }
        a {
            text-decoration: none;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2>HTML nav Tag</h2>
  	<!-- nav tag starts -->
    <nav>
        <a href="https://www.geeksforgeeks.org/">
            Home</a> |
        <a href=
"https://www.geeksforgeeks.org/interview-experiences/company-interview-corner/">
            Interview</a> |
        <a href=
"https://www.geeksforgeeks.org/gate/gate-cs-notes-gq/">
            Gate</a> |
        <a href=
"https://www.geeksforgeeks.org/dsa/dsa-tutorial-learn-data-structures-and-algorithms/">
            Data Structure</a> |
        <a href=
"https://www.geeksforgeeks.org/dsa/dsa-tutorial-learn-data-structures-and-algorithms/">
            Algorithm</a>
    </nav>
    <!-- nav tag ends -->
</body>
</html>

Output: 

output

Browser Support


S

Sathwika123
Improve
Article Tags :

Explore

Lightbox