Home > Article > Web Front-end > HTML nav Tag
HTML nav Tag
- WBOYOriginal
- 2024-09-04 16:24:011035browse
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
Syntax:
Each and Every Html tags have a separate syntax like the following code: the basic syntax for Navigation Tag. We have used the
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
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.) 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 and (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
The above is the detailed content of HTML nav Tag. For more information, please follow other related articles on the PHP Chinese website!