Adding Image Captions in HTML

To add a caption to an image, you use the <figure> and <figcaption> elements. This provides semantic meaning and groups the image with its caption.

Basic Structure

<figure>
  <img src="image.jpg" alt="A descriptive image">
  <figcaption>This is the image caption.</figcaption>
</figure>

Example with Styling

<figure style="text-align: center; border: 1px solid #ddd; padding: 10px; max-width: 300px;">
  <img src="nature.jpg" alt="Beautiful Nature" style="width: 100%;">
  <figcaption style="font-style: italic; margin-top: 8px;">A view of the mountains.</figcaption>
</figure>

Why Use <figure> and <figcaption>

• Semantically links an image with its caption
• Improves accessibility for screen readers
• Enhances SEO by providing context for images
• Makes the layout more organized and maintainable
• Provides better document structure
• Allows for consistent styling of image-caption pairs

Best Practices

• Always include meaningful alt text for images
• Keep captions concise but descriptive
• Use CSS for styling rather than inline styles in production
• Consider responsive design for image-caption pairs
• Maintain proper contrast between text and background
• Use the figure element for other media like charts and diagrams too

Advanced Example with Multiple Images

<figure class="gallery">
  <img src="photo1.jpg" alt="First photo in series">
  <img src="photo2.jpg" alt="Second photo in series">
  <img src="photo3.jpg" alt="Third photo in series">
  <figcaption>Three images from our nature series.</figcaption>
</figure>