<figure>

The <figure> element represents self-contained content like images or videos, often with a <figcaption> for descriptive text, enhancing semantics.

`<figure>` Tag

The <figure> element in HTML represents self-contained content, such as images, diagrams, illustrations, or videos. It is often accompanied by a <figcaption>, which provides a descriptive caption to enhance accessibility and document structure.

Syntax

index.html

<figure>
  <!-- Media content goes here -->
  <figcaption>Caption or description for the figure.</figcaption>
</figure>

Attributes

class : Assigns a class to the <figure> for styling purposes.
id : Provides a unique identifier for linking or scripting.

The <figure> tag semantically associates media content with its caption, improving accessibility and document structure.

Examples

The <figure> element is commonly used to wrap images, videos, or quotes while keeping their descriptions structured and meaningful.

Images

index.html

<!-- Image without a caption -->
<figure>
  <img src="/placeholder.jpeg" alt="Social media." />
</figure>
<!-- Image with a caption -->
<figure>
  <img src="/placeholder.jpeg" alt="Social media." />
  <figcaption>Social media.</figcaption>
</figure>

Code Snippets

index.html

<!-- Image without a caption -->
<figure>
  <img src="/placeholder.jpeg" alt="Social media." />
</figure>
<!-- Image with a caption -->
<figure>
  <img src="/placeholder.jpeg" alt="Social media." />
  <figcaption>Social media.</figcaption>
</figure>

Quotations

Edsger Dijkstra:

If debugging is the process of removing software bugs...

index.html

<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs...
  </blockquote>
</figure>

Poems

Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green

Venus and Adonis, by William Shakespeare

index.html

<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear,  
    Or like a fairy trip upon the green  
  </p>
  <figcaption>
    <cite>Venus and Adonis</cite>, by William Shakespeare
  </figcaption>
</figure>

Conclusion

The <figure> tag is a powerful HTML element that helps organize and structure media content with its associated caption. It enhances accessibility, improves document structure, and provides semantic meaning by linking media to its description.

The <picture> element provides responsive images by defining multiple sources with media queries, optimizing display for various devices and resolutions.

The <figcaption> element provides a caption for a <figure>, adding context or details about its content, such as images or diagrams.