Day 3: Links and Navigation

What You'll Learn Today

How hyperlinks work and the <a> element
Absolute vs. relative paths
In-page links and anchors
Building navigation

What Are Hyperlinks?

The "Web" in World Wide Web means "spider web." Hyperlinks are the connections that tie pages together like threads in a web. The "HT" in HTML (HyperText) refers to exactly this linking capability.

flowchart TB
    subgraph Web["🌐 Web Link Structure"]
        A["Page A"]
        B["Page B"]
        C["Page C"]
        D["External Site"]
    end
    A -->|"Link"| B
    A -->|"Link"| C
    B -->|"Link"| D
    C -->|"Link"| A
    style A fill:#3b82f6,color:#fff
    style B fill:#8b5cf6,color:#fff
    style C fill:#22c55e,color:#fff
    style D fill:#f59e0b,color:#fff

The `<a>` Element

Links are created with the <a> (anchor) element.

<a href="https://developer.mozilla.org">MDN Web Docs</a>

Key Attributes

Attribute	Description	Example
`href`	Link destination URL	`"https://example.com"`
`target`	How to open the link	`"_blank"` (new tab)
`rel`	Relationship to target	`"noopener noreferrer"`
`title`	Tooltip text	`"View details"`
`download`	Download the file	`"file.pdf"`

The target Attribute

<!-- Open in same tab (default) -->
<a href="page.html">Same tab</a>

<!-- Open in new tab -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Open in new tab
</a>

Security: When using target="_blank", always add rel="noopener noreferrer" to prevent the linked page from accessing your page's window.opener object.

Absolute vs. Relative Paths

Absolute Path

Specifies the complete URL. Used for external site links.

<a href="https://www.google.com">Google</a>

Relative Path

Specifies location relative to the current file. Used for internal links.

project/
├── index.html          ← current file
├── about.html
├── blog/
│   ├── index.html
│   └── post1.html
└── images/
    └── logo.png

<!-- From index.html -->
<a href="about.html">About</a>
<a href="blog/index.html">Blog</a>

<!-- From blog/post1.html -->
<a href="../index.html">Home</a>
<a href="../about.html">About</a>

Path Type	Example	Use Case
Absolute	`https://example.com/page.html`	External sites
Relative	`../about.html`	Within your site
Root-relative	`/about.html`	Within your site (from root)

In-Page Links (Anchors)

Use the id attribute to jump to specific sections within a page.

<!-- Link source -->
<nav>
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#top">Back to top</a>
</nav>

<!-- Link targets -->
<h2 id="section1">Section 1</h2>
<p>Section 1 content...</p>

<h2 id="section2">Section 2</h2>
<p>Section 2 content...</p>

Linking to a Section on Another Page

<a href="about.html#team">Go to Team section</a>

Email and Phone Links

<a href="mailto:info@example.com">Send an email</a>
<a href="mailto:info@example.com?subject=Inquiry&body=Hello">Contact us</a>
<a href="tel:+1-555-123-4567">555-123-4567</a>

Scheme	Purpose	Example
`https://`	Web page	`https://example.com`
`mailto:`	Email	`mailto:info@example.com`
`tel:`	Phone call	`tel:+1-555-123-4567`
`#`	In-page	`#section1`

Building Navigation

<nav>
    <a href="index.html">Home</a> |
    <a href="about.html">About</a> |
    <a href="blog/index.html">Blog</a> |
    <a href="contact.html">Contact</a>
</nav>

Link Accessibility

<!-- ✅ Good: Descriptive link text -->
<a href="guide.html">Read the HTML guide</a>

<!-- ❌ Bad: Unclear destination -->
Click <a href="guide.html">here</a>

Principle	Good Example	Bad Example
Descriptive	`Read the HTML guide`	`Click here`
Concise	`Download`	`Click here to download the file`

Practice: Simple Multi-Page Website

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site - Home</title>
</head>
<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="about.html">About</a> |
        <a href="links.html">Links</a>
    </nav>

    <h1>Welcome to My Site</h1>
    <p>This site was created to practice HTML.</p>

    <h2>Content</h2>
    <ul>
        <li><a href="about.html">About me</a></li>
        <li><a href="links.html">Useful links</a></li>
    </ul>
</body>
</html>

Summary

Concept	Description
`<a href="">`	Creates a hyperlink
Absolute path	Full URL (for external sites)
Relative path	Path from current file (for internal links)
`#id`	In-page link
`mailto:` / `tel:`	Email and phone links
`target="_blank"`	Opens in a new tab

Key Takeaways

Links are the core feature of the Web
Use absolute paths for external links, relative paths for internal
Always add rel="noopener noreferrer" with target="_blank"
Make link text descriptive (for accessibility)

Exercises

Exercise 1: Basic

Create a 3-page website with links between all pages.

Exercise 2: Intermediate

Create a long page (5+ sections) with a table of contents using in-page links.

Challenge

Create a "Send Feedback" email link with a pre-filled subject and body.

References

Next up: In Day 4, you'll learn about "Images and Media"—embedding images, audio, and video.