Beyond basic hyperlinks, HTML allows for advanced linking techniques that improve navigation, usability, and accessibility. These include linking to specific sections, adding download links, creating clickable images, and controlling link behaviors.
Linking to a Specific Section (Jump Links)
Jump links allow users to navigate within the same page.
Example:
<a href=”#contact”>Go to Contact Section</a>
<h2 id=”contact”>Contact Us</h2>
Explanation:
The href=”#contact” directs the user to the <h2 id=”contact”> section.
Creating a Download Link
You can allow users to download a file by adding the download attribute.
Example:
<a href=”document.pdf” download>Download PDF</a>
Making an Image Clickable
An image can be wrapped inside an <a> tag to create a clickable link.
Example:
<a href=”https://example.com”>
<img src=”button.png” alt=”Click me”>
</a>
Opening Links in a New Tab
Using target=”_blank” opens links in a new browser tab.
Example:
<a href=”https://example.com” target=”_blank”>Open in New Tab</a>
Preventing Search Engines from Following Links
The rel=”nofollow” attribute tells search engines not to follow the link.
Example:
<a href=”https://example.com” rel=”nofollow”>No Follow Link</a>
Creating a Mailto Link (Email Link)
Opens the default email client with a pre-filled recipient.
Example:
<a href=”mailto:someone@example.com”>Send Email</a>
Creating a Tel Link (Phone Call)
Allows users to call a number on mobile devices.
Example:
<a href=”tel:+1234567890″>Call Us</a>
