Introduction
The HTML <nav> tag is an important element for creating navigation links on a website. In this lab, you will learn how to use the <nav> tag to create a navigation menu on your website.
Note: You can practice coding in
index.htmland learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.
Creating a basic HTML page
First, let's create a new HTML page named index.html and add the basic HTML structure.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
</head>
<body></body>
</html>
Adding Navigation links using
Now, let's create a navigation menu with the help of HTML <nav> tag. Create a <nav> element inside the <body> tag.
<body>
<nav></nav>
</body>
Adding Navigation links using tag
Next, add some navigation links inside the <nav> tag using the HTML <a> tag.
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
</nav>
</body>
Styling Navigation Menu
To make the navigation menu more visually appealing, let's add some CSS to it. Add the following styles to your HTML:
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
Final Page
Your final index.html page should look something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
</nav>
</body>
</html>
Summary
In this lab, you learned how to use the HTML <nav> tag to create a navigation menu on your website. Creating navigation menus using the <nav> tag and styling them with CSS can help users easily navigate through your website and make it more visually appealing.
