AI Workshop: learn to build apps with AI →
HTML Basics: Images

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


Images can be displayed using the img tag.

This tag accepts a src attribute, which we use to set the image source:

<img src="image.png" />

Note that this is a self-closing tag (ends with />); it does not contain any content, so it’s self-contained.

We can use a wide range of image formats on the Web. The most common ones are PNG, JPEG, GIF, SVG, and, more recently, WebP.

The HTML standard requires an alt attribute to be present to describe the image. This is used by screen readers and also by search engine bots:

<img src="dog.png" alt="A picture of a dog" />

You can set the width and height attributes to reserve space so the browser can account for it and avoid layout shifts when the image fully loads. It takes a numeric value, expressed in pixels.

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

Lessons in this unit:

0: Introduction
1: Your first HTML page
2: Text tags
3: Attributes
4: Links
5: ▶︎ Images
6: Lists
7: Head tags
8: Container tags
9: Using CodePen
10: Using VS Code
11: What is the Doctype