This document demonstrates how to create and manage links and navigation on your web pages using HTML. You will find explanations along with live code examples below.
Basic anchor tag (<a>)
The anchor tag (<a>) is used to create hyperlinks in HTML. You can link to external pages or other internal pages.
<a href="https://www.example.com">Click here to visit Example Website</a>
1. External Page Link:
<a href="https://www.google.com">Visit Google</a>
2. Internal Page Link:
<a href="AboutUs.html">About Us</a>
target="_blank" to Open in a New TabThe target="_blank" attribute is used to open a link in a new tab.
<a href="https://www.example.com" target="_blank">Visit Example Website in New Tab</a>
<nav> tag for Navigation Menus
The <nav> element is used to group navigation links together, which helps organize the menu on your website.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="AboutUs.html">About Us</a></li>
<li><a href="help.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
You can style navigation links into a horizontal bar using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Navigation Bar</title>
<style>
nav ul { list-style-type: none; padding: 0; }
nav ul li { display: inline-block; margin-right: 20px; }
nav ul li a { text-decoration: none; color: #333; font-size: 18px; }
nav ul li a:hover { color: #007BFF; }
</style>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="AboutUs.html">About</a></li>
<li><a href="help.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</body>
</html>
You can link to specific sections within the same page using id attributes and anchor links <a>.
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1: Introduction</h2>
<p>This is the introduction section.</p>