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 img is a self-closing tag (ends with />); it does not contain any content.
We can use a wide range 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 reserve space for the element. 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.