MEDIA
Images
Add useful images with responsive sizing and alternative text.
After this lessonUse src and alt correctly.
How it works
Images use src for the file location and alt for a text alternative. Good alt text communicates the purpose or information of the image when it cannot be seen.
Avoid putting essential text only inside images. Let CSS control responsive size so images do not overflow small screens.
REAL WORK
Add a process diagram or chart while keeping the page understandable for screen-reader users.
SYNTAX
The pattern
<img src="chart.png" alt="Weekly output chart">Example
<img src="/favicon.svg" alt="WorkTools logo" width="80">TRY IT
Edit and preview
Change the HTML on the left. The sandboxed preview updates on the right.
QUICK CHECK
What is the purpose of alt text?
Progress is stored only in this browser. No account required.