# Part 3: Links, Images, and Media
## Introduction
Links are what make HTML "hyper" — the ability to connect documents together is the foundation of the entire web. Images and media are often half the information on a page. These elements look simple on the surface, but getting them right — accessible alt text, correct URL strategies, responsive images, lazy loading — makes a material difference in usability and performance.
This part covers everything I know from writing links and embedding media in real pages.
***
## The Anchor Element (``)
The `` tag creates a hyperlink. It can link to other pages, external sites, sections of the same page, email addresses, phone numbers, or trigger file downloads.
### Basic Link
```html
View on GitHub
```
The `href` attribute (Hypertext REFerence) contains the destination URL. The link text should describe where the link goes — not "click here" or "read more".
***
## Absolute vs. Relative URLs
### Absolute URLs
Include the full protocol, domain, and path. Required for external links.
```html
View on crates.io
```
### Relative URLs
Relative to the current document's location.
```html
Part 2Back to IndexPart 2
```
| Pattern | Best use |
| ----------------- | -------------------------------------------------------- |
| `https://...` | External links always |
| `./page.html` | Same directory (explicit) |
| `../page.html` | Parent directory |
| `/path/page.html` | Root-relative, consistent regardless of current location |
For internal links within a project or site, root-relative paths (`/path/to/page`) are the most reliable. They do not break when files are moved between directories.
***
## Linking to Page Sections (Fragment Identifiers)
Any element with an `id` attribute can be linked to directly:
```html
Installation
Jump to InstallationInstallation instructions
```
This is how table-of-contents links in documentation work.
***
## Opening Links in a New Tab
```html
GitHub
```
`target="_blank"` opens the link in a new tab or window.
`rel="noopener noreferrer"` is required for security. Without `noopener`, the opened page can access and manipulate the original page via `window.opener`. `noreferrer` additionally suppresses the `Referer` HTTP header.
**When to use new tabs:** External links where users are expected to reference while staying on the current page. Do not use it for internal navigation — it is disorienting and breaks the back button.
***
## Email and Phone Links
```html
Send an emailCall us
```
`mailto:` opens the user's default email client. `tel:` triggers the phone dialler on mobile.
***
## Download Links
```html
Download scan results (PDF)Download with custom name
```
The `download` attribute tells the browser to download the file rather than navigate to it. Optionally provide a suggested filename.
***
## The Image Element (``)
```html
```
`` is a void element. The two essential attributes are:
* `src` — the path to the image file
* `alt` — alternative text
### Writing Good Alt Text
Alt text is read by screen readers and displayed when the image fails to load. Writing it well is not optional.
**Informative images** — describe what the image shows and why it matters:
```html
```
**Decorative images** — provide an empty alt attribute so screen readers skip them:
```html
```
**Never**: leave alt text out entirely (inaccessible), use "image of..." (the screen reader already announces it is an image), or just write the filename.
***
## Image Width and Height
Always specify `width` and `height`:
```html
```
This reserves the correct space in the layout before the image loads, preventing **layout shift** — the page jumping around as images load. This directly affects Core Web Vitals scores (CLS — Cumulative Layout Shift).
***
## Responsive Images
For images that should adapt to different screen sizes, use `srcset` and `sizes`:
```html
```
* `srcset` lists available image files with their intrinsic widths
* `sizes` tells the browser which size to expect at different viewport widths
* The browser picks the most appropriate file, saving bandwidth on smaller screens
***
## Lazy Loading
Defer loading off-screen images until the user scrolls to them:
```html
```
Do **not** lazy-load images that are visible in the initial viewport (above the fold) — that delays the most visible content.
***
## The `` Element
`` allows serving different image formats or completely different images based on conditions:
```html
```
The browser uses the first `` it can handle and ignores the rest. The `` is the fallback and carries the `alt` text.
***
## Figures with Captions
```html
WAF scanner detecting Cloudflare on a target URL
```
`
` wraps self-contained content (images, diagrams, code examples) and `` provides a visible caption. The caption and alt text serve different purposes: alt is for when the image cannot be seen; caption is supplementary information for everyone.
***
## Tables
Tables are for tabular data — information that has a natural row/column structure. Do not use tables for layout.
```html
WAF Detection Results
Target
WAF Detected
Bypasses Tested
Bypasses Succeeded
example.com
Cloudflare
7
2
test.org
AWS WAF
7
0
Total
14
2
```
Key elements:
* `
` — visible table title, announced by screen readers
* `
` / `` / `` — semantic grouping of rows
* `
` — header cells with `scope` for accessibility
* `
```
`
```
**Decorative images** — provide an empty alt attribute so screen readers skip them:
```html
```
**Never**: leave alt text out entirely (inaccessible), use "image of..." (the screen reader already announces it is an image), or just write the filename.
***
## Image Width and Height
Always specify `width` and `height`:
```html
```
This reserves the correct space in the layout before the image loads, preventing **layout shift** — the page jumping around as images load. This directly affects Core Web Vitals scores (CLS — Cumulative Layout Shift).
***
## Responsive Images
For images that should adapt to different screen sizes, use `srcset` and `sizes`:
```html
```
* `srcset` lists available image files with their intrinsic widths
* `sizes` tells the browser which size to expect at different viewport widths
* The browser picks the most appropriate file, saving bandwidth on smaller screens
***
## Lazy Loading
Defer loading off-screen images until the user scrolls to them:
```html
```
Do **not** lazy-load images that are visible in the initial viewport (above the fold) — that delays the most visible content.
***
## The `
