HTML Basics
Links
Master anchor elements (a) in HTML, covering href destinations, relative vs absolute paths, link states, security tags, and protocol schemas.
1. Learning Objectives
In this lesson, you will master the configuration of web links. By the end of this topic, you will be able to:
- Implement anchor tags (
<a>) with standardhrefdestinations. - Distinguish between relative paths (internal navigation) and absolute URLs (external domains).
- Use target attributes to control how pages open (e.g.
target="_blank"). - Apply security tags (
rel="noopener noreferrer") when linking to external resources. - Create email (
mailto:) and telephone (tel:) link protocols.
2. Overview
Links are constructed using the anchor element (<a>). The href (Hypertext Reference) attribute specifies the target address of the link. Anchors are inline elements that wrap text, images, or blocks, allowing users to jump to new pages, files, or specific headings on the same page.
3. Why This Topic Matters
Links connect documents on the Web. Proper configuration prevents critical issues:
- Security Vulnerabilities (Tabnabbing): Opening external links in a new tab without proper security attributes allows the new page to hijack the original tab using JavaScript.
- Accessibility Failures: Screen readers announce links sequentially. Using generic text like "click here" or "read more" provides no context to users who navigate by listing links.
4. Real-World Analogy
Think of anchors like **doors inside a large museum**:
- Internal Doors (Relative Links): Guide you to rooms inside the same building (e.g. going from the main lobby to the painting gallery next door).
- Teleportation Portals (Absolute Links): Instantly transport you out of the museum to a completely different location in another city (external website).
- Special Hotlines (Protocol Links): A phone sitting on the wall that instantly dials the emergency desk (
tel:) or drops a feedback note (mailto:).
5. Core Concepts
| Concept | Description | Syntax Example |
|---|---|---|
| Absolute URL | Points to a complete URL, including the protocol (http/https), on an external domain. | https://google.com |
| Relative URL | Points to a path relative to the current directory on the same site. | /about-us.html |
| Anchor Hash Link | Jumps to an element with a matching ID attribute on the same page. | #section-name |
6. Syntax & API Reference
Here are the primary attribute options for the anchor element:
Key Attributes:
target="_blank": Opens the target document in a new tab or window.target="_self": (Default) Opens the document in the same frame/tab where it was clicked.rel="noopener": Prevents the new page from accessing the opening window object viawindow.opener.download: Prompts the browser to download the linked file instead of displaying it.
7. Visual Diagram
This diagram displays how link paths are resolved relative to domain boundaries:
8. Live Example — Full Working Code
Here is a complete HTML menu mapping various anchor protocols:
9. Interactive Playground
Try It Yourself Challenges:
- Change the scroll anchor target to point to a custom heading ID you declare.
- Test what happens if you add the
downloadattribute to an image path link.
10. Common Mistakes
| Mistake | Why it happens | Wrong | Correct |
|---|---|---|---|
| Missing Protocol in Absolute Link | Forgetting https://, causing it to resolve as a relative local file. |
<a href="google.com"> |
<a href="https://google.com"> |
| Unsecured target="_blank" | Leaving off rel tags, risking client tab hijacked routes. | <a href="url" target="_blank"> |
<a href="url" target="_blank" rel="noopener noreferrer"> |
11. Best Practices
- Use Descriptive Text: Avoid generic link text like "click here". Use meaningful text (e.g. "Download the PDF Report").
- Always secure target="_blank": Add
rel="noopener noreferrer"when opening external links in a new tab to block script attacks and protect referral headers. - Include aria-labels for icon links: If a link wraps only an SVG icon without visible text, provide an
aria-labelattribute to explain its destination to screen readers.
12. Browser Compatibility
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Anchor tag base support | Supported | Supported | Supported | Supported |
| rel="noopener" security defaults | Supported (88+) | Supported (52+) | Supported (12.1+) | Supported (79+) |
13. Interview Questions
🟢 Q1: What is the security risk of using `target="_blank"` without `rel="noopener noreferrer"`?
Answer: The target page gains window reference access to the opening window via `window.opener`. The linked page could execute code to redirect the client tab to a phishing clone site (e.g. window.opener.location = "phish.com") while the user is viewing the new tab.
14. Debugging Exercise
Find and fix the protocol and syntax errors in these links:
Fixed code:
15. Practice Exercises
Exercise 1: Contact Menu List
Build a navigation footer menu mapping links for emailing, calling, downloading a PDF flyer, and jumping back to the top anchor of the document.
16. Scenario-Based Challenge
The Reverse Tabnabbing Security Mitigation Challenge:
An external security review alerts you that user-submitted links on your dashboard can execute scripts on client tabs. The user interface displays user-generated links using target="_blank". Write down the security attributes needed to neutralize this vulnerability.
17. Quick Quiz
Q1: Which attribute value opens a page in a new window or tab?
A) target="_self"
B) target="_blank"
C) target="_parent"
Answer: B — target="_blank" instructs browsers to load the target link page inside a new tab.
18. Summary & Key Takeaways
- • Anchor tags <a> require a target href location schema.
- • Secure target="_blank" tabs using rel="noopener noreferrer" attributes.
19. Cheat Sheet
| Schema / Attribute | Key Purpose |
|---|---|
rel="noopener noreferrer" |
Blocks window.opener security leaks on external target tabs. |