Chapter 4 of 10
Links and images are what made the web revolutionary. Links connect pages across the entire internet. Images bring visual context. Both are simple to write, but have important details to get right.
The anchor element <a> creates a hyperlink. The href attribute specifies the destination. The content between the tags is what users click.
<!-- External link (full URL) -->
<a href="https://www.google.com">Go to Google</a>
<!-- Link to another page on the same site -->
<a href="/about.html">About Us</a>
<a href="contact.html">Contact</a>
<!-- Link to a section on the same page -->
<a href="#pricing">Jump to Pricing</a>
<section id="pricing">...</section>
<!-- Open in a new tab -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
GitHub
</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Send an email</a>TIP
Always use rel="noopener noreferrer" with target="_blank". When you open a link in a new tab, the new page can access your page via JavaScript. rel="noopener noreferrer" prevents this security risk and also stops the referring page information from being sent.
| Path type | Example | When to use |
|---|---|---|
| Absolute | https://example.com/page | Linking to external sites |
| Root-relative | /about.html | Linking within your site, from the root |
| Relative | about.html or ../about.html | Linking to nearby files in same folder |
| Fragment | #section-id | Jumping to a section on the same page |
<!-- Basic image -->
<img src="photo.jpg" alt="A sunset over Nairobi" />
<!-- The alt attribute is required — it describes the image
for screen readers and appears if the image fails to load -->
<!-- Image with dimensions (good practice) -->
<img
src="logo.png"
alt="NelsonLabs logo"
width="200"
height="60"
/>
<!-- Image inside a link (clicking the image navigates) -->
<a href="/home">
<img src="logo.png" alt="Go to homepage" />
</a>WARNING
Always write meaningful alt text. The alt attribute is not optional — it's required for accessibility. Write what the image shows: 'A developer typing at a laptop' is good. 'image' or 'photo' is not. If an image is purely decorative, use alt="" (empty string) so screen readers skip it.