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 img is a self-closing tag (ends with />) - it does not contain any content.
We can use a wide set of image formats on the Web. The most common ones are PNG, JPEG, GIF, SVG, and WebP.
The alt Attribute
The HTML standard requires an alt attribute to be present, to describe the image. This is used by screen readers for accessibility and also by search engine bots:
<img src="dog.png" alt="A picture of a dog" />If an image fails to load, the browser will display the alt text instead.
Setting Dimensions
You can set the width and height attributes to set the space that the element will take. This allows the browser to account for the image size before it loads, preventing layout shifts:
<img src="dog.png" alt="A picture of a dog" width="300" height="200" />The values are numeric and expressed in pixels.
The figure Element
The figure element is a semantic tag often used when you want to display an image with a caption:
<figure>
<img src="dog.png" alt="A nice dog">
<figcaption>A nice dog</figcaption>
</figure>The figcaption tag wraps the caption text. This structure provides semantic meaning to the relationship between the image and its caption, which is helpful for accessibility and SEO.