HTML <nav> Tag
In this post, we’ll examine HTML Tag nav using examples in the hopes that it will meet your learning requirements.
The HTML <nav> tag is used to define a section of a web page that contains navigation links.
Key Features
Here are some key features of the <nav> tag:
- The <nav> tag is designed to be accessible to screen readers and other assistive technologies. By using the <nav> tag to define navigation links, developers can ensure that users with disabilities can easily navigate the site.
- The <nav> tag provides semantic markup for navigation links, making it easier for search engines and other automated tools to understand the structure of the web page.
- The <nav> tag can be styled using CSS to customize the appearance of the navigation links. This allows developers to create a consistent and cohesive visual design for the site.
- The <nav> tag is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge.
A collection of links for navigating are as follows:
Example:
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/python/">Python</a> |
<a href="/java/">Java</a> |
<a href="/flutter/">Flutter</a> |
<a href="/c#/">C-Sharp</a> |
<a href="/linux/">Linux</a> |
<a href="/ruby/">Ruby</a>
</nav>
</body>
</html>
Here is an example of the <nav> tag with in a list:
Example:
<!DOCTYPE html>
<html>
<body>
<nav>
<ul>
<li><a href="/python/">Python</a></li>
<li><a href="/java/">Java</a></li>
<li><a href="/flutter/">Flutter</a></li>
<li><a href="/c#/">C-Sharp</a></li>
<li><a href="/linux/">Linux</a></li>
<li><a href="/ruby/">Ruby</a></li>
</ul>
</nav></body>
</html>
You can style your nav bar in the following way:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
background-color: #333;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
color: #fff;
display: block;
padding: 10px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #555;
color: #eee;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/python/">Python</a></li>
<li><a href="/java/">Java</a></li>
<li><a href="/flutter/">Flutter</a></li>
<li><a href="/c#/">C-Sharp</a></li>
<li><a href="/linux/">Linux</a></li>
<li><a href="/ruby/">Ruby</a></li>
</ul>
</nav></body>
</html>
An attractive Navigation bar is enough to attract the attraction of the user to your site. Such as :
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Navigation</title>
<style>
nav {
margin: 27px auto 0;
position: relative;
width: 590px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
nav a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 110px;
}
a:nth-child(3) {
width: 100px;
}
a:nth-child(4) {
width: 160px;
}
a:nth-child(5) {
width: 120px;
}
nav .start-home, a:nth-child(1):hover~.animation {
width: 100px;
left: 0;
background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
width: 110px;
left: 100px;
background-color: #e74c3c;
}
nav .start-blog, a:nth-child(3):hover~.animation {
width: 100px;
left: 210px;
background-color: #3498db;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
width: 160px;
left: 310px;
background-color: #9b59b6;
}
nav .start-contact, a:nth-child(5):hover~.animation {
width: 120px;
left: 470px;
background-color: #e67e22;
}
body {
font-size: 12px;
font-family: sans-serif;
background: #2c3e50;
}
h1 {
text-align: center;
margin: 40px 0 40px;
text-align: center;
font-size: 30px;
color: #ecf0f1;
text-shadow: 2px 2px 4px #000000;
font-family: 'Cherry Swash', cursive;
}
p {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #ecf0f1;
font-family: 'Cherry Swash',cursive;
font-size: 16px;
}
span {
color: #2BD6B4;
}
</style>
</head>
<body>
<h1>HTML Navigation With CSS</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Portefolio</a>
<a href="#">Contact</a>
<div class="animation start-home"></div>
</nav>
<p>
By <span>Mr Examples</span>
</p>
</body>
</html>
Table Of Content-
Uses and Definition
The Tag nav <nav> specifies a set of links for navigating a website.
An <nav> element is not required for all document links. The Tag <nav> should only be employed for large groups of links to other parts of the site’s navigation.
Browsers may use this element to determine if they should skip the initial presentation of this content for users with disabilities.
HTML Navigation Tag Importance
The HTML <nav> tag is an important element for structuring the navigation sections of a web page. Here are some key reasons why the <nav> tag is important:
- The <nav> tag is designed to improve the accessibility of navigation links for users with disabilities, such as screen reader users. By using the <nav> tag to define navigation links, you can ensure that users with disabilities can easily navigate the site.
- The <nav> tag provides semantic markup for navigation links, making it easier for search engines and other automated tools to understand the structure of the web page. This can improve the search engine optimization (SEO) of the site.
- By using the <nav> tag consistently across the site, you can create a consistent and predictable user experience for users. This can improve the usability and ease of use of the site.
- The <nav> tag can be styled using CSS to customize the appearance of the navigation links. This allows you to create a consistent and cohesive visual design for the site.
- The <nav> tag is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge. This ensures that it can be used by a wide range of users and devices.
- By using the <nav> tag to group navigation links, you can create a more organized and structured layout for the site. This can make it easier for users to find what they are looking for and can improve the overall user experience.
Attributes
Global
<nav> Tags in HTML are compatible with Global Attributes.
Event
Tag <nav> in HTML are compatible with Event Attributes.
Predefined CSS
By default, the majority of browsers render the <nav> element as the following values:
nav {
display: block;
}Browser Compatibility
In the table, the numbers indicate which browser version is compatible with the element.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <nav> | 5.0 | 9.0 | 4.0 | 5.0 | 11.1 |
HTML Navigation Tag Advantages
Here are some key advantages of using the <nav> tag:
- The <nav> tag is designed to improve the accessibility of navigation links for users with disabilities, such as screen reader users. By using the <nav> tag to define navigation links, developers can ensure that users with disabilities can easily navigate the site.
- The <nav> tag provides semantic markup for navigation links, making it easier for search engines and other automated tools to understand the structure of the web page. This can improve the search engine optimization (SEO) of the site.
- By using the <nav> tag consistently across the site, developers can create a consistent and predictable user experience for users. This can improve the usability and ease of use of the site.
- The <nav> tag can be styled using CSS to customize the appearance of the navigation links. This allows developers to create a consistent and cohesive visual design for the site.
- The <nav> tag is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge. This ensures that it can be used by a wide range of users and devices.
If the content of this article made your learn something unique and informative, then do share this valuable knowledge with your close ones as well by hitting the social media links below.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
