Annotating Images with Figures and Captions

image
<figure> Element
Self-contained container for images and captions
<figure> <img src="photo.jpg" alt="Mountain landscape"> <figcaption>Beautiful mountain view</figcaption> </figure>
short_text
<figcaption> Element
Provides caption or description for the figure
stars Benefits
  • Semantic meaning - groups image with its caption
  • Accessibility - better for screen readers
  • Styling - easier to style as a unit
  • SEO - improves content structure
HTML figure and figcaption example
<figure> <img src="sunset.jpg" alt="Sunset over the ocean"> <figcaption> Spectacular sunset at the beach </figcaption> </figure>