Updated March 23, 2023
Introduction to HTML nav Tag
HTML have many features for highlighting the front end technology in that the Navigation tag is one of the features for HTML5 Version. In the previous version, Html has different features, but in Html 5, Navigation supports Global Attributes and Event Attributes. The <nav> tag in html is a set of navigation links in the document; not all links inside in the <nav> element tag only specified major blocks of the tag in the navigation links. Generally, web pages have sections regarding navigational links, which are to be used for users to navigate the site; those links are specified inside the Navigation tag.
Syntax:
Each and Every Html tags have a separate syntax like the following code: the basic syntax for Navigation Tag. We have used the <nav> tag in both Html and CSS styles also.
HTML
<nav>
< a href="/" />
-------------------
</nav>CSS
nav{
--some codes—
}How Does Navigation Tag Work in HTML?
The user sends the request that is after clicking the tab or menu on the web page. It will move to another page so that the response of the server will display the result web page to the user. Like in HTML, it will separate the menus or tabs in the GUI that is user point of view with the help of some html elements like <nav> tags.
One HTML page document may contain several numbers of links based on the web page menus/tabs. In HTML, Navigation generally contains two types, i.e. Horizontal Navigation and Vertical Navigation. In default, Horizontal Navigation is loaded based on the user requirement it will convert into Vertical or some other user requirement types.
The above diagram is the basic understanding of the user screen through navigation links. The user clicks the home link through browser web page links is nothing but Html tags, i.e.)<a href=”/home”> it will go through the particular web page it will be either client-side page or server-side depends upon the project it will show the Home page in the user browser screen.
Examples of HTML nav Tag
Given below are the examples of HTML nav Tag:
Example #1
<html>
<body>
<nav>
<a href="/home/">Home</a> |
<a href="/contactus/">Contact Us</a> |
<a href="/about us/">About US</a>
</nav>
</body>
</html>Output:
Example #2
<html>
<head>
<style>
nav {
border:2px;
background-color:#090;
color:green;
padding:5px;
}
n {
color:white;
font-size:10px;
}
.n1{
font-size:20px;
color:#090;
font-weight:bold;
text-align:center;
}
.n2 {
text-align:center;
color:#090;
margin:20px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="n1">First</div>
<div class="n2">Second</div>
<nav>
<a href="/home/">Home</a> |
<a href="/contactus/">Contact Us</a> |
<a href="/about us/">About US</a>
</nav>
</body>
</html>Output:
Example #3
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 50%;
width: 3;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.6s;
}
.sidenav n {
padding: 5px 8px 7px 22px;
font-size: 23px;
color: #818181;
transition: 0.6s;
}
.sidenav n:hover {
color: #f1f1f1;
}
.sidenav .close{
position: absolute;
top: 0;
right: 20px;
font-size: 18px;
margin-left: 40px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav n {font-size: 18px;}
}
</style>
</head>
<body>
<div id="first" class="sidenav">
<a href="javascript:void(0)" class="close" onclick="cN()">×</a>
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">About US</a>
</div>
<h2>Sample</h2>
<span style="font-size:20px;cursor:pointer" onclick="oN()">☰ click</span>
<script>
function oN() {
document.getElementById("first").style.width = "300px";
}
function cN() {
document.getElementById("first").style.width = "1";
}
</script>
</body>
</html>Output:
When compared to previous examples, we have used some animations for navigation to attract the user.
Different Types of Navigation Menus
Generally, we have several different types of menus and idioms to consider in HTML tags like <link> and <a>(anchor) elements, and all should be closed. Most Navigation menus can be created with lists; sometimes, interface restrictions will be used based on user dependencies.
The list-based navigation menus are as follows:
- In-Page Navigation Menu
- Site Navigation Menu
- Context-Contextual Navigation Menu
- Stemaps Navigation Menu
- Pagination
1. In-Page Navigation Menu
A table or the contents for single-page links pointing to other different sections on the Web page.
Example
<nav>
<a href="/home/">Home</a> |
</nav>2. Site Navigation Menu
It is most probably and common menu types in the web pages. It is a custom or user-defined menu type of a site or a subset that shows the options to choose from the hierarchy of the site.
Example
<nav>
<ul>
<li><a href="/home/">Home</a> </li>
<li><a href="/about us/">About Us</a> </li>
<li><a href="/contact us/">Contact Us</a> </li>
</nav>3. Contextual Navigation Menus
It is a link that builds the contents of the document, and it offers some more information related to the current page of the html document. Examples of this menus are Some News Articles, Banking sites; whatever we see in the web page application contains a navigation panel we have placed the mouse cursor in the tab or menu. It will show like tooltip content of the menu.
4. Sitemaps Navigation Menus
It is a menu that looks like pop-up blocks whatever the user clicks the page the menu or tabs configured, or they need some additional plugins to configure the new window or page all the contents will map with the same site. Both Sitemap and site searches have a different set of features and offer in the Html.
5. Pagination
In Pagination, sometimes we have seen that the webpage will configure with backend for a large set of files to load in the front end screen after the user clicks on the menu or tabs. Using this option to split into separate pages. When compared to Navigation, it is different because it normally links with the back end of the same document, which results in more options or further information being displayed on the same web page.
Conclusion
Finally, we have a concluded part where usually every version of the html has a different set of features. HTML 4 is not supported for the <nav> tag it will use the navigation menu but HTML 5 supports the navigation menu and also additionally feature<nav> tag. Let it be more advanced for coming versions of HTML.
Recommended Articles
This is a guide to HTML nav Tag. Here we discuss the introduction, how does navigation tag work in HTML?different types of navigation menus with examples. You may also have a look at the following articles to learn more –
