HTML Tips: The HTML figure tag

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.


Often used along with the img tag is the figure tag.

figure is a semantic tag often used when you want to display an image with a caption. You use it like this:

<figure>
    <img src="dog.png"
         alt="A nice dog">
    <figcaption>A nice dog</figcaption>
</figure>

The figcaption tag wraps the caption text.

Lessons in this unit:

0: Introduction
1: Preserving white space and line breaks in a string in HTML
2: HTML, avoid displaying a broken image if the image is not found
3: ▶︎ The HTML figure tag
4: Change image source in dark mode
5: Accept only images in file input
6: HTML comments
7: Some useful tricks available in HTML5
8: How to make an hr invisible
9: Conditionally set an HTML attribute
10: An HTML element id is a global variable