(anchor) tag. They allow users to navigate between pages, websites, or trigger actions like sending emails or making phone calls.
1. Anchor Tag (<a>)
The basic structure of a link:
<a href="https://example.com">Visit Example</a>
✅ The href attribute defines the link’s destination.
✅ Text between <a> and </a> is clickable.
2. href Attribute: Absolute vs Relative URLs
✅ Absolute URL
A full web address (usually includes https://):
<a href="https://www.google.com">Google</a>
✅ Relative URL
Links to a page within your own website (relative to the current file):
<a href="about.html">About Us</a>
<a href="/contact/index.html">Contact Page</a>
3. target Attribute
Defines how the link opens. Common values:
target Value - What It Does
_self
Opens link in the same tab (default)
_blank
Opens link in a new tab
_parent
Opens in the parent frame
_top
Opens in full body of window
Example:
<a href="https://news.com" target="_blank">Read News</a>
4. Mailto Links (Send Email)
Creates a link that opens the user’s email app with a pre-filled address.
<a href="mailto:hello@example.com">Send Email</a>
You can also add a subject and body:
<a href="mailto:info@example.com?subject=Feedback&body=Hello there!">
Email Us Feedback
</a>
5. Telephone Links
Lets mobile users tap to call directly.
<a href="tel:+1234567890">Call Us</a>
📱 Great for mobile-friendly websites.
✅ Summary of Key Attributes
Attribute -Description
href Link - destination (URL or file path)
target - Where to open the link (_self, _blank)
mailto: - Opens email client
tel: - Initiates a phone call
🔗 Complete Example:
<a href="https://example.com" target="_blank">Visit Example Website</a><br>
<a href="about.html">About Us</a><br>
<a href="mailto:hello@example.com">Contact via Email</a><br>
<a href="tel:+2348123456789">Call Customer Care</a>
.jpg)