Lesson 3 of 12
Structured learning draftWrite links, lists, images and media
Content markup should preserve meaning when visual styling, pointing input or images are unavailable. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Write links whose purpose is clear out of context.
- Choose useful alternative text based on the image's role.
- Use lists and figures for the relationships they represent.
Write links, lists, images and media
Write links, lists, images and media: link purpose to alternative text to list semantics.
Write links whose purpose is clear out of context.
Choose useful alternative text based on the image's role.
Use lists and figures for the relationships they represent.
<article>
<h2>Market dashboard</h2>
<figure>
<img src="dashboard.webp" width="960" height="640"
alt="Sales dashboard showing a 14% increase after the campaign">
<figcaption>Fictional data used for the prototype.</figcaption>
</figure>
<p><a href="case-study.html">Read the market dashboard case study</a></p>
</article>Alternative text replaces the image's purpose, not every visible detail. Decorative images use an empty alt attribute. Link text should describe its destination or action; repeated “click here” links are ambiguous in a link list. Width and height reserve image space and reduce layout shift.
| Meaning | Element |
|---|---|
| Order matters | ol |
| Grouped items, no sequence | ul |
| Term and description | dl |
| Self-contained media with caption | figure and figcaption |
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Using filenames as alt text.
- Repeating adjacent caption text in alt.
- Opening every link in a new tab without warning.
Practice activity
Apply the lesson
Add one project card containing an informative image, caption, skill list and descriptive case-study link. Test with images disabled. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
What is the best alt value for a purely decorative divider image?
Lesson summary
- Markup the relationship, not the desired appearance.
- Alternative text depends on context.
- Descriptive links support scanning and assistive navigation.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note