Add images

Use the img element to add an image:

<img src="bicycle.jpg" alt="A red bicycle parked beside a canal">

src tells the browser where to find the image. It accepts the same kinds of URLs you used in links.

img is a void element. It cannot contain content, so it has no closing tag.

The browser makes a separate request for the image after it parses the HTML. If the file is missing or the path is wrong, the image cannot appear.

Common image formats include JPEG, PNG, WebP, AVIF, GIF, and SVG. The right format depends on the image and how you produce it. That choice affects file size and quality, but it does not change the basic HTML.

The alt attribute is not optional decoration. It provides a text alternative when the image cannot be seen. We will focus on writing it well in the next lesson.

Try it

Put an image in the same folder as your HTML file. Add it with a relative URL, save, and refresh. Then deliberately change one letter in src and observe the broken result.