Skip to content
Related Articles

Related Articles

Improve Article

HTML <nav> Tag

  • Difficulty Level : Basic
  • Last Updated : 02 Mar, 2021

The <nav> tag is used for declaring the navigational section in HTML documents. Websites typically have sections dedicated to navigational links, which enables users to navigate the site. These links can be placed inside a nav tag. In other words, the nav element represents a section of the page whose purpose is to provide navigational links, either in the current document or to another document. The links in the nav element may point to other webpages or to different sections of the same webpage. It is a semantic element. Common examples of the nav elements are menus, tables, contents, and indexes. 

The nav tag is reserved for primary navigation areas, like the main menu across the top of the page or section. A document may have several nav elements, for example, site navigation and one for intra-page navigation. Links within nav tag can be codes within a ul list or simply coded as separate links, without ul element. This element makes it much easier to create a navigation menu, creates a neat horizontal menu of text links, and helps screen reading software to correctly identify primary navigation areas in the document.

 Syntax: 

<nav> Links... </nav>

Example: 

html




<!DOCTYPE html>
<html>
 
<body>
    <h1>GeeksforGeeks</h1>
    <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: 
 



Example: Styling nav using CSS.

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        nav {
            border: 1px;
            background-color: green;
            color: white;
            padding: 6px;
        }
         
        a {
            text-decoration: none;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML nav Tag</h2>
    <!-- nav tag starts -->
    <nav>
        <a href=
                Home</a> |
        <a href=
                Interview</a> |
        <a href=
                Gate</a> |
        <a href=
                Data Structure</a> |
        <a href=
                Algorithm</a>
    </nav>
    <!-- nav tag ends -->
</body>
 
</html>

Output: 
 

 Supported Browser: 

  • Google Chrome 6.0 and above
  • Internet Explorer 9.0 and above
  • Mozilla 4.0 and above
  • Safari 5.0 and above
  • Opera 11.1 and above

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :