Aquileo | HTML nav Tag - GeeksforGeeks

The <nav> tag is used in HTML to create navigation sections on a webpage. It helps users and search engines know which links are for moving around the site.

<nav> usually contains links to main parts of a website, like Home, About, or Contact.
Links can be written directly or inside an unordered list (<ul>).
Improves webpage structure, accessibility, and SEO.
Commonly used in modern websites for clear navigation.

index.html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <h2> HTML nav Tag</h2>
<!--Driver Code Ends-->

    <nav>
        <a href="#">Home</a> |
        <a href="#">Interview</a> |
        <a href="#">Languages</a> |
        <a href="#">Data Structure</a> |
        <a href="#">Algorithm</a>
    </nav>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

The <nav> tag contains a set of navigation links for sections like Home, Interview, Languages, Data Structure, and Algorithm.
The links are separated by vertical bars for clarity.

Syntax:

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

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

Using 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.

Styling the <nav> Tag Using CSS:

Apply CSS styling to the <nav> section to enhance its appearance.

index.html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <title></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>
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

The <nav> tag defines a horizontal navigation menu with section links separated by delimiters.
CSS styles give the menu a green background, white text, padding, and remove underline from links for a clean, readable look.

HTML nav Tag

Using the <nav> Tag

Styling the <nav> Tag Using CSS:

Explore