HTML <nav> element is utilized to define a segment that includes navigation links, whether they are internal within the same document or external to another document. Navigation links can include items like menus, tables of contents, indexes, and more.
The <nav> element is a recent addition to HTML5.
Tips: You can use multiple links within a page, but it's not necessary to put all the links within
Syntax
Example
<nav>.....</nav>
Below are some details regarding the HTML <nav> element:
| Display | Block |
|---|---|
| Start tag/End tag | Both Start and End tag |
| Usage | Structural |
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>Nav Tag</title>
<style>
a{
text-decoration: none;
color: green;
font-size: 20px;
padding: 8px;
}
a:hover{
color: blue;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Example of Nav tag</h1>
<nav>
<a href="#">Home</a> |
<a href="#">Courses</a> |
<a href="#">About-us</a> |
<a href="#">Contact-us</a> |
</nav>
</body>
</html>
Attribute:
Tag-specific attributes:
The <nav> tag in HTML does not have any particular attribute associated with it.
Global attribute:
The <nav> tag facilitates the utilization of global attributes within HTML.
Event attribute:
The <nav> tag facilitates the integration of event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<nav> |
Yes | Yes | Yes | Yes | Yes |