HTML <figure> Tag
The HTML <figure> tag represents self-contained content, often an image, illustration, diagram, code snippet, or similar, that is referenced from the main flow of the document but can be moved without affecting the document's understanding. It is typically used in conjunction with the <figcaption> tag to provide a caption for the content. The use of <figure> and <figcaption> enhances the semantic structure of a web page, making content more accessible and understandable to both users and search engines.
Syntax
<figure>
<!-- Self-contained content (e.g., <img>, <svg>, <pre>) -->
<figcaption>Caption for the content</figcaption>
</figure>
Attributes
The <figure> tag supports the Global Attributes in HTML.
| Attribute | Value | Description |
|---|---|---|
| class | classname | Specifies one or more class names for an element (refers to a class in a style sheet) |
| id | id | Specifies a unique id for an element |
| style | CSS properties | Specifies an inline CSS style for an element |
| title | text | Specifies extra information about an element |
| tabindex | number | Specifies the tabbing order of an element |
| hidden | hidden | Specifies that an element is not yet, or is no longer, relevant |
| lang | _languagecode | Specifies the language of the element's content |
| dir | ltr/rtl | Specifies the text direction for the content of the element |
| data-* | _anyvalue | Used to store custom data private to the page or application |
Example
<figure>
<img src="image.jpg" alt="A beautiful landscape">
<figcaption>A scenic view of the mountains.</figcaption>
</figure>
More Examples
Example 1: Using with a code snippet
<figure>
<pre>
<code>
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
</code>
</pre>
<figcaption>JavaScript function to greet the world.</figcaption>
</figure>
Example 2: Using with an SVG
<figure>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<figcaption>A yellow circle with a green border.</figcaption>
</figure>
Example 3: Using multiple content elements within a figure
<figure>
<img src="chart.png" alt="A Sample Chart" width="400" height="300">
<p>This chart shows the distribution of users...</p>
<figcaption>Chart showcasing User Distribution.</figcaption>
</figure>
Example 4: Styling the <figure> and <figcaption> elements
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
}
</style>
</head>
<body>
<figure>
<img src="flower.jpg" alt="Beautiful flower" width="300" height="200">
<figcaption>A vibrant flower in full bloom</figcaption>
</figure>
</body>
</html>
Browser Support
The <figure> tag is supported in all modern browsers:
| Browser | Version |
|---|---|
| Chrome | All |
| Edge | All |
| Firefox | All |
| Safari | All |
| Opera | All |
Notes and Tips
- The
<figcaption>tag should be the first or the last child element of the<figure>tag. - While it's common to use images inside
<figure>, you can use other self-contained content types like code snippets, diagrams, charts, etc. - The content inside the
<figure>tag is considered to be related to the main flow of the document but can be moved elsewhere without breaking the continuity of the text. - Using
<figure>and<figcaption>improves SEO, making your content easier to understand for search engines. - Avoid using the
figuretag for purely decorative images or elements. It is meant for meaningful, self-contained content. - The
figcaptionacts as the caption to the figure, providing context or an explanation of the content contained within the figure. - The
figuretag does not necessarily require a figcaption; use it when you need a caption associated with a standalone content unit. - It's good practice to use
altattributes with your images inside<figure>for accessibility reasons. - You can use CSS to style the
figureandfigcaptionfor optimal presentation.
