The Image Tag
Images are added with the <img> tag. Unlike most tags you've met so far, <img> is self-closing — there's no separate closing tag, because it doesn't wrap any content.
<img src="cat.jpg" alt="A tabby cat sleeping on a windowsill">
- ✓src ("source") points to the image file — a relative path, or a full URL.
- ✓alt ("alternative text") describes the image in words. It is not optional.
- ✓<img> is an inline element by default, so it flows alongside text unless you tell it otherwise.
Alt Text Isn't Optional
The alt attribute is read aloud by screen readers, shown if the image fails to load, and used by search engines to understand what an image contains. Skipping it isn't a shortcut — it's a genuine gap in your page.
Describe what the image shows, briefly and specifically — "A tabby cat sleeping on a windowsill," not "cat" and not "image123.jpg." If an image is purely decorative, use an empty alt="" so screen readers skip over it.
Controlling Size & Choosing a Format
You can set an image's dimensions right in the HTML using width and height attributes, measured in pixels. Setting both helps the browser reserve space for the image before it finishes loading, which prevents the page from jumping around.
<img src="cat.jpg" alt="A tabby cat sleeping on a windowsill" width="400" height="300">
You'll fine-tune image sizing with CSS from Module 03 onward — for now, width and height keep things predictable.
Photographs and images with lots of colors — small file size, some quality loss.
Graphics, logos, and anything needing a transparent background.
Icons and simple graphics that need to scale to any size without blurring.
A modern format offering smaller file sizes than jpg or png at similar quality.
Short, simple looping animations.
Figure & Figcaption
When an image needs a visible caption, wrap it in <figure> and add a <figcaption> — this keeps the image and its caption tied together as one meaningful unit.
<figure> <img src="cat.jpg" alt="A tabby cat sleeping on a windowsill"> <figcaption>Milo, napping in the afternoon sun.</figcaption> </figure>
You'll meet <figure> again in Module 02 when we cover semantic HTML5 elements in more depth.
Breaking Down What You Just Learned
<img>A self-closing tag with no separate closing tag or wrapped content.
srcPoints to the actual image file, using a relative path or a full URL.
altA required text description used by screen readers, search engines, and as a fallback if the image fails to load.
width / heightReserve space for the image before it loads, preventing the page layout from jumping.
<figure> / <figcaption>Groups an image with a visible caption as one connected unit.
Try It Yourself
Find any image on your computer, copy it into your course folder, and add it to day3.html using <img> with a proper src, meaningful alt text, and a width of 300.
Build a Mini Photo Gallery
Three images, properly captioned
Create a new file called day5.html inside your course folder and build a small gallery page.
- Start with the full DOCTYPE, html, head, and body structure.
- Add an <h1> titled "My Gallery."
- Add three images (from your computer, or any free image site), each wrapped in its own <figure> with a <figcaption>.
- Give every image meaningful, specific alt text — not the filename.
- Set a consistent width and height on all three images.
- Separate each figure with an <hr> from Day 2.
Recap
A self-closing tag that embeds an image using the required src attribute.
Required, not optional — describes the image for accessibility, fallback, and search engines.
Set in pixels to reserve space and prevent layout shifting while images load.
Groups an image with a visible caption as a single connected unit.
Key Takeaways
- <img> is self-closing and always needs a src attribute pointing to the file.
- alt text is required — it serves accessibility, broken-image fallback, and SEO all at once.
- width and height keep your layout stable while images load.
- Choose jpg for photos, png for transparency, svg for icons, and webp for smaller modern files.
- <figure> and <figcaption> pair an image with a visible caption.