HTML <figure> Tag

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<figure>

  <img src="images/sunset.jpg" alt="Sunset" width="300" height="226">

  <figcaption>Figure 1 - Painting of a sunset.</figcaption>

</figure>

Result

Editor