Open In App

HTML <nav> Tag

Last Updated : 28 Jul, 2025
Comments
Improve
Suggest changes
Like Article
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


Next Article
HTML Introduction

S
Sathwika123
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox