HTML <figure> Tag
Concept
The <figure> tag in HTML is used to encapsulate media such as an image, diagram, photo, code snippet, or any other content that is referenced from the main content. It often works in conjunction with the <figcaption> element to provide a caption for the content. The <figure> tag helps in grouping content and can be positioned as a single unit on the page.
Implementation
Example 1: Displaying an Image with Caption
Here’s an example of how you can use the <figure> tag to display an image along with a caption:
<figure>
<img src="landscape.jpg" alt="Beautiful Landscape">
<figcaption>A breathtaking view of the mountains at sunset.</figcaption>
</figure>
Example 2: Displaying a Code Snippet with Caption
You can also use the <figure> tag to display a code snippet along with a caption:
<figure>
<pre><code>function greet() { alert('Hello, World!'); }</code></pre>
<figcaption>JavaScript function to display a greeting message.</figcaption>
</figure>
Try it out below:
Attributes
Global Attributes
The <figure> tag supports all the global attributes in HTML.
Event Attributes
The <figure> tag also supports all the event attributes in HTML.
Browser Support
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| IE | No |
Default CSS Settings
Most browsers will display the <figure> element with the following default CSS settings:
figure {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 40px;
margin-end: 40px;
}
Conclusion
The <figure> tag offers a semantic way to group content and its associated caption. It’s particularly useful for content creators, web designers, and developers who want to present media content in a structured and meaningful way.
By using the <figure> tag, you can ensure that the content is rendered consistently across different browsers and devices, enhancing the user experience.