HTML Tutorial

HTML Tag: <figure>

Purpose:

The <figure> tag groups related images, diagrams, graphs, audio, video, or code snippets to improve accessibility and styling.

Attributes:

  • caption: Provides a caption or description for the figure.

Usage:

  1. Define the figure: Open the tag <figure>.
  2. Include the content: Place the image or other media within the <figure> element.
  3. Add a caption (optional): Add a caption element <figcaption> inside the <figure>.
  4. Close the figure: End the tag with </figure>.

Example:

<!DOCTYPE html>
<html>
<body>

<figure>
  <img src="image.jpg" alt="Image of a cat">
  <figcaption>This is a photo of a cat.</figcaption>
</figure>

</body>
</html>

Additional Tips for Accessibility:

  • Use the alt attribute on images to provide text descriptions for screen readers.
  • Ensure the text in the caption is large enough to be easily readable.
  • Place the figure near the content it relates to.