The Figure and Figcaption Elements
When you add an image to a web page, you often want to explain what it shows. Maybe it’s a photo, a chart, or a code screenshot. That’s where the HTML <figure> and <figcaption> elements shine.
In this article, you’ll learn what these elements are, why they’re useful, and how to use them step-by-step. You’ll see simple, practical examples you can copy, paste, and edit, even if you’re completely new to coding.
What Are <figure> and <figcaption>?
<figure> is a container used to group content that’s related to the main text, like:
- Images
- Diagrams
- Charts or graphs
- Code snippets
<figcaption> is used inside <figure> to add a caption — a short description or title for that figure.
You can think of it like this:
<figure>= the frame<figcaption>= the label on the frame
Both of these help your page be more organized and more accessible (easier to understand for all users, including those using screen readers).
Basic Setup: Your First Figure
Let’s start with a very simple example. We’ll show one image with a caption.
<!-- Example 1: A simple figure with an image and caption -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Simple Figure Example</title>
</head>
<body>
<figure>
<!-- The image we want to show -->
<img src="mountain.jpg" alt="Snowy mountain peak under a clear blue sky" />
<!-- The caption describing the figure -->
<figcaption>A peaceful snowy mountain at sunrise.</figcaption>
</figure>
</body>
</html>
What each part does
<!DOCTYPE html>and<html>...</html>: Standard HTML page structure.<img>: Displays the image.src="mountain.jpg"tells the browser where to find the image file.alt="..."is the alternative text read by screen readers or shown if the image can’t load.
<figure>...</figure>: Groups the image and its caption together.<figcaption>...</figcaption>: Provides a text caption for the figure.
What you’ll see in the browser
You’ll see the image, and just below it, the caption “A peaceful snowy mountain at sunrise.” It will look like they belong together — which is exactly what we want.
Try it yourself:
- Create a new file called
figure1.html. - Copy and paste the code above.
- Save an image as
mountain.jpgin the same folder as your HTML file (any photo is fine). - Open
figure1.htmlin your browser (double-click it). - Change the caption text and see how it updates.
Where Should <figcaption> Go?
You can place <figcaption> before or after the main content inside <figure>. Both are valid. The choice is mostly about style and how you want it to read visually.
Caption below the image (common)
<figure>
<img src="forest.jpg" alt="Green forest with sunlight filtering through trees" />
<figcaption>Sunlight shining through a quiet forest.</figcaption>
</figure>
Caption above the image
<figure>
<figcaption>Sunlight shining through a quiet forest.</figcaption>
<img src="forest.jpg" alt="Green forest with sunlight filtering through trees" />
</figure>
Tip: Try both ways and see which you prefer for different types of content.
Building On It: Figures With Multiple Elements
A figure doesn’t have to contain only an image. It can also include other related content.
For example, imagine you want to show a chart image and a short explanation below it.
<!-- Example 2: Figure with image and extra description -->
<figure>
<img src="sales-chart.png" alt="Line chart showing monthly sales increasing from January to June" />
<figcaption>Monthly sales growth from January to June.</figcaption>
<!-- Extra descriptive text, still part of the figure -->
<p>This chart shows a steady increase in sales, with the largest jump between April and May.</p>
</figure>
What’s happening here?
<figure>still wraps everything related to the chart.<figcaption>gives a short, clear title.- The
<p>paragraph adds more detail, but it stays inside the<figure>so it’s clearly connected.
Try it yourself
- Add this code to a file named
figure2.html. - Use any image file and name it
sales-chart.png(or change thesrcto match your real file). - Open the file in your browser.
- Edit the paragraph to describe your own “data,” even if you’re just making it up.
This practice helps you think about how to clearly describe visuals — an important skill for good web content.
Using <figure> for Code Snippets
<figure> isn’t just for pictures. You can also use it to group a code block with a caption. This is handy for tutorials, documentation, or blog posts.
Below is an example using <pre> and <code> to show some HTML, with a caption explaining what it is.
<!-- Example 3: Using figure with a code snippet -->
<figure>
<figcaption>Basic HTML page structure:</figcaption>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
</code></pre>
</figure>
What’s new here?
<pre>: Preserves spaces and line breaks. Great for code.<code>: Indicates that the content is computer code.<figcaption>: Briefly explains what the code snippet shows.
When you view this in your browser, you’ll see the caption and then the nicely formatted code block.
Try it yourself:
- Create a file
figure3.html. - Paste the code above inside a full HTML page structure (you can copy from Example 1 and replace the
<figure>part). - Change the caption to describe something else about the code.
- Try replacing the inner code with a small CSS or JavaScript snippet.
Making Your Figures Look Nice With Basic CSS
While this article focuses on HTML, a tiny bit of CSS (the language used to style web pages) can make your figures look clearer and more professional.
Here’s a simple example that adds a border and centers the text.
<!-- Example 4: Styling figures with simple CSS -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styled Figure</title>
<style>
figure {
border: 1px solid #ccc; /* Light gray border */
padding: 10px; /* Space inside the border */
max-width: 300px; /* Limit width of the figure */
margin: 20px auto; /* Center horizontally */
}
figcaption {
font-style: italic; /* Make caption text italic */
text-align: center; /* Center the caption text */
margin-top: 8px; /* Space above the caption */
}
img {
max-width: 100%; /* Make image fit the figure width */
height: auto; /* Keep image proportions */
display: block; /* Remove extra space below image */
margin: 0 auto; /* Center the image */
}
</style>
</head>
<body>
<figure>
<img src="city.jpg" alt="City skyline at night with bright lights" />
<figcaption>City skyline glowing at night.</figcaption>
</figure>
</body>
</html>
What you’ll notice
- The figure now has a border and some breathing room.
- The caption is centered and italic, making it stand out.
- The image resizes to fit the figure nicely on different screens.
Try it yourself:
- Change the
bordercolor (for example,#007accfor blue). - Increase the
max-widthto500px. - Make the caption bold by adding
font-weight: bold;tofigcaption.
Playing with these small changes builds your confidence with both HTML and CSS.
Why Use <figure> and <figcaption> Instead of Just <img>?
You might be wondering: Why bother with <figure> and <figcaption> at all? Can’t I just use <img> and a normal paragraph?
You can, but <figure> and <figcaption> give you important benefits:
- Better structure: They clearly show that the image and caption belong together.
- Improved accessibility: Screen readers can treat the figure and caption as one unit, helping users understand your content.
- Easier styling: You can target all figures with CSS (
figure { ... }) without touching other elements. - Semantic HTML: Your code describes meaning, not just appearance. This is a good habit as you grow as a developer.
Quick Recap and What’s Next
You’ve learned how to:
- Use
<figure>to group related content like images, charts, or code. - Add clear captions with
<figcaption>. - Place captions above or below your content.
- Combine figures with simple CSS to make them look better.
If you’ve followed along and tried the examples, you’ve already taken real steps into HTML coding. That’s a big win.
Next steps to keep learning:
- Experiment with multiple
<figure>elements on a single page. - Try using
<figure>with videos or audio clips. - Explore more HTML elements like
<header>,<nav>, and<section>to structure full pages.
Most importantly, keep experimenting. Even small practice projects — like adding captions to your favorite photos — will build your skills and confidence over time.
