HTML5
Explain the Use of the Figure Tag in HTML5
The <figure> tag is a semantic HTML5 element used to group self-contained content — such as an image, illustration, diagram, chart, or code snippet — that is referenced from the main flow. It is usually paired with <figcaption> to provide a caption.
What Is the <figure> Tag?
A <figure> represents content that is self-contained and could be moved elsewhere (for example, to an appendix) without affecting the meaning of the main text. Common uses include photos, diagrams, code listings, and quotations.
Using <figure> with <figcaption>
The <figcaption> element provides a caption or legend for the figure. It must be the first or last child of the <figure>. This creates a clear, accessible association between the media and its description.
<figure>
<img src="taj-mahal.jpg" alt="The Taj Mahal at sunrise">
<figcaption>Figure 1: The Taj Mahal in Agra, India.</figcaption>
</figure>Other Content in a Figure
A figure is not limited to images. It can wrap a code block, a chart, or a diagram — anything referenced as a self-contained unit.
<figure>
<pre><code>console.log("Hello, world!");</code></pre>
<figcaption>Listing 1: A simple JavaScript log statement.</figcaption>
</figure>Use <figure> for content referenced from the main text as a unit. Use a plain <img> when the image is purely decorative or part of the flowing content.