HTML <figure> Tag
Description
The <figure> HTML tag is a structural element used to encapsulate and represent content such as images, illustrations, diagrams, charts, or videos within a document. It is typically employed in conjunction with the <figcaption> tag to provide a descriptive caption or labeling for the content it encloses. This semantic markup helps improve accessibility and allows web developers to create clear and organized presentations of media content on web pages, making it easier for both human readers and assistive technologies to understand the relationship between the content and its description.
Properties
- Permitted Parents
- Any element that accepts Flow content
- Content
- A <figcaption> element, followed by the Block, Inline, and text elements and vice versa
- Start/End Tags
- Start tag: required, End tag: required
Example
<figure>
<img src="images/sunset.jpg" alt="Sunset" width="300" height="226">
<figcaption>Figure 1 - Painting of a sunset.</figcaption>
</figure>Attributes
None
Global Attributes
The <figure> tag also supports the Global Attributes in HTML5
Event Attributes
The <figure> tag also supports the Event Attributes in HTML5
Browser Support
The following table will show you the current browser support for the HTML <figure> tag.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 8 | 14 | 11 | 5.1 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 11 | 5 | 1 | 4.4 |
Last updated by CSSPortal on: 30th September 2023