HTML <nav> Tag

The HTML <nav> tag is used to define a section of a webpage that contains navigation links. This element is designed for menus, tables of contents, or any other group of links used for navigating the website. By marking navigation sections with the <nav> tag, you improve the semantic structure and accessibility of your site.

The <nav> element should only be used for significant navigation blocks, not for links within paragraphs or sections unrelated to site navigation.

Basic Syntax of HTML <nav> Tag

The basic structure of the <nav> tag is:

</>
Copy
<nav>
    Navigation links go here.
</nav>

The content inside the <nav> tag typically consists of <a> (anchor) elements.

Basic Example of HTML <nav> Tag

Here’s a simple example of a navigation menu using the <nav> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <header>
            <h1>Welcome to My Website</h1>
        </header>

        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>

        <main>
            <p>This is the main content of the page.</p>
        </main>

        <footer>
            <p>Copyright © 2024</p>
        </footer>
    </body>
</html>
Basic Example of HTML <nav> Tag

Explanation: The <nav> tag wraps a list of links to other pages, making it semantically clear that this section is for navigation.

Using Multiple <nav> Elements

You can use multiple <nav> elements on a webpage if the navigation is context-specific. For example:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <header>
            <h1>My Blog</h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <article>
                <h2>Blog Post</h2>
                <p>Content of the blog post goes here.</p>

                <nav>
                    <ul>
                        <li><a href="#comments">Comments</a></li>
                        <li><a href="#related">Related Posts</a></li>
                    </ul>
                </nav>
            </article>
        </main>

        <footer>
            <p>Copyright © 2024</p>
        </footer>
    </body>
</html>
Using Multiple <nav> Elements

Explanation: The first <nav> element provides site-wide navigation, while the second one provides context-specific links within the blog post.

Styling the <nav> Tag with CSS

You can style the <nav> element and its links to create visually appealing navigation menus:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            nav {
                background-color: #007BFF;
                padding: 10px;
            }

            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                display: flex;
            }

            nav ul li {
                margin-right: 15px;
            }

            nav ul li a {
                color: white;
                text-decoration: none;
                font-weight: bold;
            }

            nav ul li a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </body>
</html>
Styling the <nav> Tag with CSS

Result: The navigation bar appears with a blue background, white links, and hover effects that underline the links.

Practical Applications of the <nav> Tag

  • Website Navigation: Define primary menus for navigating a website.
  • Sub-Navigation: Provide local or section-specific navigation.
  • Breadcrumbs: Represent breadcrumb navigation for user guidance.
  • Table of Contents: Create a structured list of links for navigating a long document or article.