Learning outcomes
- Explain how to use responsive images and meaningful alternatives.
- Complete the guided practice safely.
- Check that you can avoid broken or inaccessible imagery.
HTML Foundations
Images and Alt Text
Learn to use responsive images and meaningful alternatives and avoid broken or inaccessible imagery in this beginner-friendly website development lesson.
Before you begin
Work on a practice copy, keep filenames lowercase and hyphenated, and create a backup before changing a live website.
Step-by-step instructions
- Open the relevant project page, file or WordPress screen and confirm you are working on a safe practice copy.
- Add a practice image with dimensions and alt text.
- Inspect the result using browser tools or WordPress Preview; do not publish yet.
- Check keyboard use, mobile layout, content accuracy, links, images and privacy where applicable.
- Confirm that you can avoid broken or inaccessible imagery, then save a clearly named version or backup.
Ian's practical tip: Preview first, test at desktop and mobile sizes, and keep a recoverable copy before publishing.
Practical activity
Add a practice image with dimensions and alt text. The expected result is to avoid broken or inaccessible imagery.