Navigation is an essential part of any website, as it helps users navigate through the different sections of a web page or to other pages on the website. In HTML, navigation can be created using the <nav> and <ul> tags, along with the <li> tag to create a list of links.
Creating a Navigation Menu#
To create a navigation menu, first, you need to define the navigation section using the <nav> tag. Inside the <nav> tag, you can create an unordered list using the <ul> tag. The list items are then created using the <li> tag, with each item containing an anchor tag <a> with the link to the corresponding page.
Here is an example of a navigation menu:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
In this example, the navigation menu consists of four links: Home, About, Services, and Contact. Each link is created using an <li> tag, with the link text inside an anchor tag <a> and the href attribute specifying the URL of the page that the link should lead to.
Placing the Navigation Menu#
The navigation menu can be placed anywhere on the page. However, it is common to place the navigation menu at the top of the page, as this is where users expect to find the navigation menu. Here is an example of how a more complete page would look like:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Welcome to my website!</h1>
<p>This is my website.</p>
</body>
</html>