HTML Basics: Images

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


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 - it’s self-sustaining.

We can use a wide set 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 set the space that the element will take so that the browser can account for it and does not change the layout when it’s fully loaded. 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