Updated April 6, 2023
Introduction to Html Nav Element
The navigation element <nav> tag inside an HTML document is used to specify a block of navigation links being enclosed, either within the same document or any other documents. Examples showcasing navigation blocks are indexes, tables of contents, menus, etc. An HTML document could contain as many as required <nav> tags, such as site navigation, intra-page navigation, etc. The <nav> tag is also used for declaring the navigational sections within HTML documents. Most websites typically prefer having sections dedicated to navigational links, which allow users to navigate on the site. These links can be placed within a nav tag. In this topic, we are going to learn about Html Nav Element.
Note:
- All the links mentioned in the HTML document are not placed inside the <nav> element; it only includes major navigation blocks. It can also be used for defining links in the footer of the website, but the <footer> tag is usually used in such cases.
- The <nav>HTML element is not allowed to be nested in the <address> element.
- Both Start and End tag are required for Nav tag in HTML5 i.e. <nav>……..</nav>
Syntax:
HTML/XHTML
<body>
<nav> ... </nav>
<body>CSS
nav{
--your css code—
}Use of <nav> tag
The <nav> tag is chartered for primary navigation areas, such as the main menu across the top of a page or section. A document can have many <nav> elements, i.e. one for site navigation, one for intra page navigation, etc. The links inside <nav> tag can be codes within a ul list or can be simply coded as separate links without a ul element. This tag helps make it much easier to create things such as a navigation menu, the neat horizontal menu of text links, or a help screen reading software to identify primary navigation areas in the document correctly.
Tag-Specific Attributes
There is no specific attribute present to be used with the <nav> tag.
Global Attributes
Like all other HTML tags present, the <nav> tag also supports the global attributes in HTML5.
The following are the global attributes:
- Onabort
- on autocomplete,
- onautocompleteerror,
- onblur,
- oncancel,
- oncanplay,
- oncanplaythrough,
- onchange,
- onclick,
- onclose,
- oncontextmenu,
- oncuechange,
- ondblclick,
- ondrag,
- ondragend,
- ondragenter,
- ondragexit,
- ondragleave,
- ondragover,
- ondragstart,
- ondrop,
- ondurationchange,
- onemptied,
- onended,
- onerror,
- onfocus,
- oninput,
- oninvalid,
- onkeydown,
- onkeypress,
- onkeyup,
- onload,
- onloadeddata,
- onloadedmetadata,
- onloadstart,
- onmousedown,
- onmouseenter,
- onmouseleave,
- onmousemove,
- onmouseout,
- onmouseover,
- onmouseup,
- onmousewheel,
- onpause,
- onplay,
- onplaying,
- onprogress,
- onratechange,
- onreset,
- onresize,
- onscroll,
- onseeked,
- onseeking,
- onselect,
- onshow,
- onsort,
- onstalled,
- onsubmit,
- onsuspend,
- ontimeupdate,
- ontoggle,
- onvolumechange,
- Onwaiting
Event Attributes
There is no event attribute present to be used with the <nav> tag.
CSS text formatting properties in <nav> tag:
- Text-color
- Text-alignment
- Text-decoration
- Text-transformation
- Line-height
- Text-direction
- Text-shadow
- Word-spacing
CSS Font properties in <nav> tag
- font-style – normal|italic|oblique|initial|inherit
- font-variant – normal|small-caps|initial|inherit
- font-weight – normal|bold|bolder|lighter|number|initial|inherit
- font-size – medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit
- font-family – family-name|generic-family|initial|inherit
CSS Test Shadow property for <nav> tag
<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>Examples
Here are the following examples mention below
Example #1
With the help of the <nav> HTML element, we can use the group of links in a single semantic element which helps in making the organized websites.
<!DOCTYPE html>
<html>
<head>
<title>HTML Nav tag</title>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<nav>
<a href="https://www.educba.com/about-us/">Who is EDUCBA?</a> |
<a href="https://www.educba.com/careers/">Careers</a> |
<a href="https://www.educba.com/instructors/">Become an instructor</a> |
<a href="https://www.educba.com/how-it-works/">How does it work?</a> |
</nav>
</body>
</html>Output:
Example #2
<nav> HTML Tag helps the users navigate to the main sections of the website.
<!DOCTYPE html>
<html>
<head>
<style>
nav{
display:flex;
flex-wrap:wrap;
}
nav a {
text-decoration: none;
display:block;
padding: 15px 25px;
text-align: center;
background-color: rgb(213, 216, 220);
color:#566573;
font-family:sans-serif;
}
nav a:hover {
background-color: #566573;
color:#ffffff;
}
</style>
</head>
<body>
<h1>Example of the HTML nav tag:</h1>
<nav>
<a href="https://www.educba.com/about-us/">About</a>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<a href="https://www.educba.com/courses/">Certification Courses</a>
</nav>
</body>
</html>Output:
Example #3
Tables of contents and menus are good examples of <nav> HTML element.
<!DOCTYPE html>
<html>
<head>
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul:after {
clear: both;
display: block;
}
nav ul li {
float: left;
position:relative;
list-style-type:none;
}
nav ul li:hover {
background: rgb(52, 73, 94);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px 30px;
color: #ffffff;
text-decoration: none;
background-color:rgb(40, 55, 71 );
font-family: sans-serif;
}
nav ul ul {
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 10px;
color: #ffffff;
text-transform: uppercase;
}
nav ul ul li a:hover {
background: rgb(27, 38, 49);
}
</style>
</head>
<body>
<h1>Dropdown menu with the HTML nav tag:</h1>
<nav>
<ul>
<li>
<a href="https://www.educba.com/about-us/">About</a>
<ul>
<li>
<a href="#">Reviews</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About Us</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href=#">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/courses/">Certification Courses</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href=#">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>Output:
Browser Support: The section tag is being new in HTML5, and it is being supported in the browser, which is listed below:
- Google Chrome 6.0
- Internet Explorer 9.0
- Firefox 4.0
- Opera 11.1
- Safari 5.0
Conclusion- Html Nav Element
Below are mentioned some of the main key points which you should remember from this topic:
- The <nav> element in HTML5 represents a section of the page whose entire purpose is to provide navigational links, either in the same document or any other document. The links in the <nav> element can point to other webpages or to different sections of the same webpage. Common examples of the nav elements are tables, menus, indexes, and contents.
- The <nav> HTML element can use for the primary navigation of the structure.
- Some developers might use the <nav> HTML element for breadcrumbs and paginations.
- Essentially, it is your own perception of how to use the <nav> element within your HTML document.
- The <nav> HTML element is a block-level element.
Recommended Articles
This is a guide to Html Nav Element. Here we discuss the use of the tags and Attributes along with the Examples and main key points. You may also have a look at the following articles to learn more –
