HTML <figure> and <figcaption>: Semantic Image and Media Captions in HTML5

The <figure> and <figcaption> tags are introduced in HTML5 to semantically represent self-contained content along with its caption. They are commonly used to group media elements like images, illustrations, diagrams, code snippets, etc., with their corresponding captions, enhancing the document's structure and accessibility.

Basic Example

Below is an example of how to use the <figure> and <figcaption> tags:

<figure>
    <img src="https://www.plus2net.com/images/top2.jpg" alt="Sample Image">
    
    <figcaption>Fig.1 - A sample placeholder image.</figcaption>
</figure>

Rendered Output

Sample Image — Fig.1 - A sample placeholder image.

Styling <figure> and <figcaption> with CSS

You can enhance the appearance of the <figure> and <figcaption> elements using CSS. Here's an example of how to style these elements:

figure {
  border: 1px solid #ccc;
  padding: 10px;
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}

figcaption {
  background-color: #f8f8f8;
  color: #555;
  font-style: italic;
  padding: 5px;
  margin-top: 10px;
}

img {
  max-width: 100%;
  height: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Figure and Figcaption Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        figure {
            border: 1px solid #ccc;
            padding: 10px;
            max-width: 300px;
            margin: auto;
            text-align: center;
        }
        figcaption {
            background-color: #f8f8f8;
            color: #555;
            font-style: italic;
            padding: 5px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <figure>
        <img src="https://www.plus2net.com/images/top2.jpg" alt="Sample Image">
        <figcaption>Fig.1 - A sample placeholder image.</figcaption>
    </figure>
</body>
</html>

Practical Use Cases

Images with Captions: Grouping an image with its descriptive caption.
Diagrams and Illustrations: Associating diagrams or illustrations with explanatory text.
Code Snippets: Displaying code examples with corresponding descriptions.

Advantages

Semantic Structuring: Provides a clear association between media elements and their captions, improving the document's semantic structure.
Enhanced Accessibility: Assists screen readers in conveying contextual information to users with visual impairments.
Improved SEO: Search engines can better understand and index the content, potentially improving search rankings.

SEO Considerations

Utilizing the <figure> and <figcaption> tags can positively impact SEO by providing search engines with explicit context about media content. This semantic clarity can lead to better indexing and visibility in search results.

Conclusion

The <figure> and <figcaption> tags are valuable additions in HTML5 for semantically organizing media content with captions. Their proper use enhances accessibility, SEO, and overall user experience by clearly associating visual or media elements with their descriptions.

HTML5 Tags Types of HTML tags

Understanding the <figure> and <figcaption> Tags in HTML5