🔗 Chapter Roadmap
1 The Anchor Tag (<a>)
Links (or Hyperlinks) are the magical portals of the internet. They allow users to click a word or an image and instantly jump to another webpage.
In HTML, we create links using the Anchor tag: <a>. However, the tag alone is useless without its superpower attribute: href (Hypertext Reference), which tells the browser where to go.
2 Opening in a New Tab
Normally, clicking a link replaces the current page you are reading. But what if you want the user to stay on your site, while opening the link in a Brand New Tab? We use the target attribute!
Add target="_blank" inside the opening <a> tag:
3 Absolute vs Relative URLs
The value you put inside the href="" is called a URL (Uniform Resource Locator). There are two ways to write them depending on where you are linking to.
Absolute URL
A full, complete web address. It must include https:// and the domain name (like .com). You use this when linking to a completely different, external website.
href="https://www.youtube.com"
Relative URL
A local shortcut link. It points to a file located within your own website folder. It does NOT include "https://" or the domain name.
href="about.html"
4 Email, Phone & Image Links
Links aren't just for webpages! You can use special keywords inside the href to trigger emails, phone calls, or even turn pictures into clickable buttons.
-
✉️ Email Links (mailto:)
Opens the user's default email app (like Outlook or Gmail) ready to send an email.
<a href="mailto:atif@example.com">Email Me</a> -
📞 Phone Links (tel:)
On mobile phones, this opens the dialer app to instantly call the number!
<a href="tel:+923001234567">Call Us Now</a> -
🖼️ Using an Image as a Link
Instead of putting text between the
<a>tags, simply place an Image tag inside!<a href="home.html"> <img src="logo.png"> </a>