Links, images, lists and tables
The elements that make a page more than plain text: connections to other pages, pictures with text alternatives, and structured lists and data.
About 5 hours of study
Learning objectives
- Create links of every kind
- Add images that everybody can understand
- Choose the right list or table structure
Lessons
- 1
Links and how pages connect
The link is what makes the web a web. Write absolute, relative and same-page links, open new tabs safely, and write link text that makes sense.
- 2
Images and why alt text matters
Add images with img, write alt text that replaces the picture, stop pages jumping with width and height, and pick the right file format.
- 3
Lists for steps, items and definitions
Group things with unordered, ordered and description lists, nest them correctly, and see why navigation menus are usually lists underneath.
- 4
Tables for data that has rows and columns
Build real data tables with headers, captions and merged cells, mark them up so a screen reader can follow them, and learn when not to use a table.
Module practice
- Make your first linksEasy
- A table of contentsMedium
- Audit a page of bad linksHard
- Add a picture properlyEasy
- A photo with a captionMedium
- Decide what each image needsHard
- A shopping listEasy
- Steps that continue from earlierMedium
- A menu with a submenuHard
- A small price tableEasy
- Make a table readable by everyoneMedium
- A timetable with merged cellsHard