Learn how to add images to your web pages using the img tag, write meaningful alt text for accessibility, and use figure and figcaption for image descriptions.
Images are added to HTML pages using the <img> tag. Unlike most HTML elements, the <img> tag is self-closing — it does not have a closing tag because it does not wrap around any content.
The <img> tag requires at least one attribute to be useful: the src attribute, which specifies the path or URL of the image file.
<img src="photo.jpg">The src value can be a relative path (pointing to a file in your project) or an absolute URL (pointing to an image hosted on the web). For example:
src="images/cat.jpg"src="https://example.com/images/cat.jpg"The alt attribute provides alternative text that describes the image. This is one of the most important attributes in all of HTML, and you should include it on every image.
Alt text serves three critical purposes:
Good alt text is descriptive and concise. Describe what the image shows, not that it is an image (screen readers already announce it as an image).
alt="Golden retriever playing fetch in a park"alt="image" or alt="dog.jpg" or leaving it empty without reason<!-- Basic image with alt text -->
<img src="sunset.jpg" alt="Orange sunset over the ocean">
<!-- Image with width and height attributes -->
<img src="logo.png" alt="Company logo" width="200" height="80">
<!-- Setting width and height helps the browser reserve
the correct amount of space before the image loads,
preventing layout shifts on the page. -->Sometimes you want to display an image with a visible caption underneath it. HTML provides two semantic elements for this: <figure> and <figcaption>.
The <figure> element represents self-contained content that is referenced from the main text — most commonly an image, but it can also wrap diagrams, code snippets, or illustrations.
The <figcaption> element provides a caption or description for the figure. It should be placed as the first or last child inside the <figure> element.
<figure>
<img src="chart.png" alt="Sales data for Q3 2024">
<figcaption>Figure 1: Quarterly sales exceeded projections by 15%.</figcaption>
</figure>Using <figure> and <figcaption> instead of a plain <div> and <p> gives your markup semantic meaning. Screen readers and search engines can understand the relationship between the image and its caption.
Why should you always include an alt attribute on images?