Links
📌 Covered in this chapter:
Anchor Element <a> · href Attribute · Absolute vs Relative URLs · Email (mailto:) & Phone (tel:) Links · Download Attribute · target="_blank" & rel="noopener" Security · Fragment Anchors
Welcome to Phase 3 (Chapter 7): Links! Hyperlinks are the defining feature of the World Wide Web. In this chapter, we master the anchor element (
<a>), internal vs external links, relative vs absolute URLs, protocol links (mailto:, tel:), download links, secure tab opening with target="_blank" and rel="noopener", and fragment section jumping.
1Anchor Tag & URL Types (Absolute vs Relative)
Absolute URLs: Full URL including domain protocol (e.g. https://www.example.com/about.html). Used for external sites.
Relative URLs: Path relative to the current file (e.g. /about.html or ../images/logo.png). Used for internal page navigation.
HTML — Absolute & Relative Links
▶ Run in HTML Editor
<!-- Internal Relative Links -->
<a href="/about.html">About Us</a>
<a href="../contact.html">Contact Support</a>
<!-- External Absolute Link in New Tab (Secure) -->
<a href="https://example.com" target="_blank" rel="noopener">Visit External Website</a>2Special Protocol Links (Email, Phone & File Downloads)
HTML — Email, Phone & Download Links
▶ Run in HTML Editor
<!-- Email Link (Launches default mail client) -->
<a href="mailto:support@ourcompiler.com?subject=Inquiry">Email Support</a>
<!-- Telephone Link (Launches mobile phone dialer) -->
<a href="tel:+18005550199">Call Toll-Free +1 (800) 555-0199</a>
<!-- Force File Download -->
<a href="/files/html5-guide.pdf" download="HTML5-Complete-Guide.pdf">Download PDF Guide</a>3Fragment Anchors (Internal Page Jumping)
To link to a specific section on the same page, assign an id attribute to the target section and use href="#target-id":
HTML — Fragment Jump Syntax
▶ Run in HTML Editor
<!-- Jump Links -->
<a href="#section2">Jump to Section 2</a>
<!-- Target Section -->
<h2 id="section2" style="margin-top:500px;">Section 2 Content</h2>❓ Frequently Asked Questions (FAQ)
Q1: Why is rel="noopener" mandatory when target="_blank"?
Without rel="noopener", the target opened tab can access your original page's window.opener object via JavaScript, exposing users to tabnabbing phishing exploits.