Pages come alive with images and media. HTML makes adding them easy — but there is one attribute, alt, that beginners skip and professionals never do. Let us get it right from the start.
The image element
Images use the <code><img></code> element. It is self-closing — there is no <code></img></code>. The <code>src</code> attribute is the image file, and the <code>alt</code> attribute is a text description. Here is the anatomy.
<img src="cat.jpg" alt="A sleeping cat">- Element
<img> - Source
src="cat.jpg" - Alt text
alt="A sleeping cat"
Why alt text is essential
The alt attribute describes the image in words. It is read aloud by screen readers for blind users, shown if the image fails to load, and used by search engines to understand the image. Every meaningful image needs descriptive alt text. For purely decorative images, use an empty <code>alt=""</code> so screen readers skip them.
Width, height and why they matter
Setting <code>width</code> and <code>height</code> attributes lets the browser reserve the right space before the image loads. This prevents the page from "jumping" as images appear — a real annoyance and a measured part of page quality. Always include them.
Figures and captions
When an image needs a visible caption, wrap it in <code><figure></code> and add a <code><figcaption></code>. This semantically ties the caption to the image.
Audio and video
HTML can embed media directly with <code><audio></code> and <code><video></code>. Add the <code>controls</code> attribute to show play, pause and volume controls.
In the editable image example, change the alt text to describe a photo of your choice, and change the width and height. Then turn it into a figure with a caption.
1. Which attribute describes an image in words?
2. Why set width and height on images?
3. How should a purely decorative image set alt?
4. Which element pairs an image with a visible caption?
- Images use the self-closing <img> element with src and alt.
- Always write descriptive alt text (empty alt="" for decorative images).
- Set width and height to prevent the page jumping as images load.
- Use figure + figcaption for captions; audio/video embed media.