Links and Navigation in HTML
Links and navigation are the backbone of any website. They allow users to move from one page to another, open files, jump to sections, or even connect via email and phone. In HTML, we use the <a> (anchor) tag to create links, and navigation menus are created using a group of links.
What are Links in HTML?
A link in HTML is a clickable element (text or image) that redirects the user to another webpage, file, or resource.
Links make a website interactive, user-friendly, and connected to other resources on the internet.
Basic Syntax:
<a href="URL">Clickable Text</a>Anchor Tag <a> in HTML
The <a> (anchor) tag is used to create links.
Basic Syntax:
<a href="url">Link Text</a>href→ Hyperlink Reference (destination URL).- Link Text → The clickable text visible to users.
Example:
<a href="https://www.example.com">Visit Example Website</a>Here are the main types of links:
a) Absolute URL (External Links)
A complete web address including https:// or http://.
Always points to the same resource, no matter where your website is hosted.
Example :
<a href="https://www.google.com">Go to Google</a>b) Relative URL (Internal Links)
A shorter path that points to files or pages inside your own website.
Depends on your website’s folder structure.
Example :
<a href="about.html">About Us</a>c) Email Links (mailto:)
Opens the default email client to send a mail.
Example :
<a href="mailto:[email protected]">Send Email</a>d) Phone Links (tel:)
Useful for mobile users to dial numbers directly.
Example :
<a href="tel:+919876543210">Call Us</a>e) Internal Page Navigation (Bookmarks)
Jump to a specific section on the same page.
They are useful when the page is long, so users don’t need to scroll manually.
Example :
<a href="#contact">Go to Contact Section</a>
<h2 id="contact">Contact Us</h2>
<p>Email: [email protected]</p>id="contact"→ creates the bookmark spot.href="#contact"→ jumps to that spot when clicked.
f) Download Links
Links can also be used to download files.
Example :
<a href="files/tutorial.pdf" download>Download PDF</a>g) Image Links
An image can also be clickable as a link.
Example :
<a href="https://example.com">
<img src="logo.png" alt="Company Logo">
</a>Opening Links in a New Tab
You can use target="_blank" to open links in a new browser tab.
Example :
<a href="https://www.wikipedia.org" target="_blank">Open Wikipedia</a>Why Links are Important?
-
They connect webpages together and form the structure of the web.
-
Improve user navigation and experience.
-
Help search engines crawl and index pages effectively.
-
Allow for interaction beyond the site (emails, downloads, external resources).