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>
<a href="#">Home</a> |
<a href="#">Interview</a> |
<a href="#">Languages</a> |
<a href="#">Data Structure</a> |
<a href="#">Algorithm</a>
</nav>
</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>
<a href=
Home</a> |
<a href=
Interview</a> |
<a href=
Gate</a> |
<a href=
Data Structure</a> |
<a href=
Algorithm</a>
</nav>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome 5.0 and above
- Edge 12 and above
- Internet Explorer 9.0 and above
- Mozilla 4.0 and above
- Safari 5.0 and above
- Opera 11.1 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
26 Jul, 2022
Like Article
Save Article