A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.
What You Need to Know
The alt attribute is for meaning, not visual inventory. Describe an image when it informs the page; use an empty alt value for purely decorative images that repeat information already given in text.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<h1>School sports day</h1>
<img src="images/confetti.svg" alt="" width="24" height="24">
<img src="images/winners.jpg" alt="Three students holding trophies" width="640" height="420">
<p>Our team won first place.</p>Let’s Read the Code
- <h1>: A top-level heading explains what the page is about.
- <img>: The img displays a picture; its alt is the text alternative.
- src: Src identifies a resource path for images, frames, or media.
- width: Width gives a preferred or intrinsic media width, depending on the element.
What the example shows: The confetti is decoration with empty alt text; the winner photo has information that needs a useful description.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.
Your Turn
Swap the images and decide what each alt attribute should say.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- Do not put alt="image" or repeat a nearby caption word for word.
Key Takeaways
- The alt attribute is for meaning, not visual inventory.
- <h1>: A top-level heading explains what the page is about.
- Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.