Figures

image The <figure> Element

The HTML <figure> element represents self-contained content.

Used to group content with a caption using the <figcaption> element.

category Types of Figures

photo Images
Photos, illustrations, diagrams
format_quote Quotations
Famous quotes with attribution
code Code
Code snippets with descriptions
menu_book Poems
Poetry with titles or references

code Code Example

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Figure 1: Image caption</figcaption>
</figure>

lightbulb Best Practices

  • check_circle Use for self-contained content
  • check_circle Always include <figcaption> for context
  • check_circle Place caption inside the figure element
  • check_circle Improves accessibility and document structure

format_list_bulleted More Examples

<figure>
  <blockquote>
    <p>Quote text here</p>
  </blockquote>
  <figcaption>- Author Name, Source</figcaption>
</figure>

assignment Related Exercises

photo Images with Captions
menu_book Poems
code Block Code
format_quote Famous Quotes
HTML semantic structure example