Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Navigation Links using HTML5?
Generating navigation links is a pivotal element of developing websites as it enables users to easily peruse and locate the information they require. In this exposition, we will expound on the procedure of creating navigation links utilizing HTML5, the most recent iteration of the Hypertext Markup Language. HTML5 provides semantic attributes and elements that facilitate the arrangement and exhibition of content on the internet. With the guidance of this piece of writing, you will acquire the knowledge of utilizing HTML5 to establish a navigation menu that is coherent, structured, and easy to use.
Syntax
<nav> <!-- navigation links and content here --> </nav>
<nav> Tag
The nav element in HTML5 is a semantically rich tag that denotes a segment of a webpage that houses a series of navigational links. It furnishes a means of organizing the content of a webpage and helps search engines and auxiliary technologies apprehend the intent and organization of the navigation links on a webpage. The nav tag is formulated to function as a receptacle for navigation links, such as a primary navigation menu, a table of contents, or a site map. It can hold textual content, images, and other categories of content, but its fundamental objective is to serve as a container for navigation links.
Approach
We are going to follow the following set of steps to create navigation links −
Step 1 − Create the Navigation Container
Step 2 − Create the List of Navigation Links
Step 3 − Create the Navigation Links
The primary stride in the creation of navigation links through HTML5 is to establish a container for the navigation menu. In this course of action, the nav element comes into play, which is a semantic component in HTML5 that epitomizes a segment of a page that embodies navigation links.
Next, we will create a list of navigation links within the navigation container. The ul (unordered list) element is used to create a list of navigation links.
Finally, we will create individual navigation links within the list of navigation links. The li (list item) element is used to create an individual item within the list, and the a (anchor) element is used to create a hyperlink to other pages or to specific sections within the same page.
Example
In the following example, a receptacle for the navigational menu is fashioned by utilizing the "nav" element, which is a semantic component in HTML5 that indicates a fragment of a webpage that consists of navigation links. After that, the menu entries are fashioned utilizing the "ul" and "li" elements to shape an unordered list of links, which are adorned with CSS to offer an uncluttered and refined appearance.
To augment interactivity to the navigation links, JavaScript is utilized to append event listeners to every link. Upon clicking a link, the customary behavior of traversing to a new page is obstructed, and alternatively, a message is shown on the page that declares which page has been picked by the user. This is executed by utilizing the "addEventListener" technique to keep watch for the "click" event on each link, and subsequently, using the "substring" and "toUpperCase" techniques to isolate the name of the selected page and display it in the message.
<!DOCTYPE html>
<html>
<head>
<title>How to Create Navigation Links using HTML5?</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<h4>How to Create Navigation Links using HTML5?</h4>
<nav>
<ul>
<li><a href="#home" class="link">Home</a></li>
<li><a href="#news" class="link">News</a></li>
<li><a href="#contact" class="link">Contact</a></li>
<li><a href="#about" class="link">About</a></li>
</ul>
</nav>
<br/>
<br/>
<p id="msg"></p>
<script>
let links=document.getElementsByClassName("link");
for(let i=0;i<links.length;i++){
let link=links[i];
link.addEventListener("click", function(event){
event.preventDefault();
let p=document.getElementById("msg");
let href=this.href;
let index=href.indexOf("#");
let msg=`This is ${href.substring(index+1).toUpperCase()} Page`;
p.innerHTML=msg;
})
}
</script>
</body>
</html>
Conclusion
To summarize, crafting navigation links with HTML5 is an effortless and uncomplicated undertaking. Semantic elements and attributes can be utilized to form a navigation menu that is both operational and available to all users. Mastery of the fundamentals of HTML5 is indispensable for every web developer and designer, since it lays the groundwork for building websites that are properly structured and user-friendly. This article is useful for developers of all levels of expertise, providing the requisite understanding and proficiencies to construct navigation links that fulfill your requirements and amplify the user experience of your website.
546 Views
