Illustration of browser windows connected by chain links with a photo, a play button and a music note

Module 3: Links and Media · Lesson 4 of 8

How to Add an Image in HTML: img, src and alt Text

Q: How do I add an image in HTML?

Use the <img> tag with two attributes: src for the file path and alt for a text description, for example <img src="images/cat.jpg" alt="Miso the cat asleep on a sofa"> . There is no closing tag. Adding width and height in pixels helps the page load smoothly.

Q: Why is my image not showing in HTML?

Almost always the src path is wrong. Check, letter by letter: the attribute name ( src , not scr ), the folder, the file name, the extension ( .jpg , .jpeg and .png are different) and upper and lower case. Keep in mind that the path starts from the folder of the HTML file, as explained in Relative and Absolute Paths . The browser's developer tools show a red error for every file that failed to load.

About 7 minFix the bugs

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

All lessons in Module 3

Module overview

Goal: Show an image with img, the right src and helpful alt text.

Learn

Images use the <img> element (see its definition in the HTML standard (opens in a new tab)). It is a void element: no content, no closing tag. Two attributes do most of the work:

src is the path to the image file, relative or absolute, like a link's href. One wrong letter and the browser shows a broken-image icon.
alt is the alt text: a short description for anyone who cannot see the image. Screen readers read it aloud, and browsers show it if the file fails to load. Describe what's important in the picture and skip "image of".

<img src="cat.svg" alt="Miso the cat">

You can also add width and height in pixels. The browser then reserves the right space before the image arrives, so the page does not jump around while loading.

The short version

<img> is a void element: it has attributes but no content and no closing tag.
src holds the path to the image file. One wrong letter or extension and the image breaks.
alt describes the image for people who cannot see it. Describe what's important and skip "image of".
width and height let the browser reserve space, so the page does not jump while loading.

Example

<p>Saturday breakfast:</p>
<img src="pancakes.svg" alt="A stack of pancakes" width="400" height="300">

Your task

The pet page is broken: neither picture shows, and screen readers cannot describe them. Find and fix the mistakes:

Both images must load. The files are called cat.svg and dog.svg.
Both images need alt text that describes them. A bare "image" or "picture" does not count.
img is a void element: remove any closing tag.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Common mistakes

Wrong

<img src="divider.svg" alt="Decorative wavy line image">

Right

<img src="divider.svg" alt="">

A purely decorative image should have an empty alt, so screen readers skip it instead of reading out noise.

Wrong

<img src="mountains.svg" alt="Snowy peaks at sunrise" width="400" height="400">

Right

<img src="mountains.svg" alt="Snowy peaks at sunrise" width="400" height="200">

This picture is 800 by 400 pixels. Width and height must keep that 2:1 ratio, or the image gets squashed.

Go deeper

Choosing the right file format keeps pages fast. JPEG suits photos, PNG suits screenshots and images with transparency, and SVG suits logos, icons and illustrations, because it stays sharp at any size. Newer formats, WebP and AVIF, usually produce much smaller files and work in all current browsers. Can I use (opens in a new tab) tracks the exact support for AVIF.

Images are often the heaviest part of a page. Never upload a 4000-pixel photo straight from a camera to show it 400 pixels wide. Resize and compress it first. For images further down a long page, add loading="lazy" so the browser only downloads them when the visitor scrolls near them. Leave it off the main image at the top, which should load straight away.

Search engines cannot see pictures the way people do. Google Images relies on the alt text, the file name and the surrounding text to understand an image, as its image SEO best practices (opens in a new tab) explain. A file called red-city-bike.jpg with good alt text beats IMG_4521.jpg with none.

Keep width and height even when CSS later resizes the image, for example with img{max-width:100%;height:auto}. The browser still uses them to reserve the right shape of space before the file arrives.

Frequently asked questions

How do I add an image in HTML?

Use the <img> tag with two attributes: src for the file path and alt for a text description, for example <img src="images/cat.jpg" alt="Miso the cat asleep on a sofa">. There is no closing tag. Adding width and height in pixels helps the page load smoothly.

Why is my image not showing in HTML?

Almost always the src path is wrong. Check, letter by letter: the attribute name (src, not scr), the folder, the file name, the extension (.jpg, .jpeg and .png are different) and upper and lower case. Keep in mind that the path starts from the folder of the HTML file, as explained in Relative and Absolute Paths. The browser's developer tools show a red error for every file that failed to load.

How do I write good alt text?

Imagine describing the image to someone on the phone, in the context of the page. Be specific and brief, usually one short sentence. Red city bike with a front basket beats bike. Skip "image of", because screen readers already announce an image. If the image contains text, include that text. Decorative images get an empty alt="". The lesson Good Alt Text practices this with real examples.