HTML <figure> tag
The <figure>
tag in HTML is used to encapsulate media content and its associated caption or description. It is a semantic element that provides a way to group content such as images, diagrams, charts, or illustrations with a <figcaption>
element for additional context or explanation.
Syntax:
<figure>
<img src="image.jpg" alt="Description of the image">
<figcaption>This is a caption describing the image.</figcaption>
</figure>
Key Characteristics:
Content Grouping: The
<figure>
tag groups together media content (such as images, videos, or illustrations) and its caption or description. This grouping helps maintain the relationship between the content and its explanatory text.Captioning: The
<figcaption>
tag, which is used inside the<figure>
element, provides a caption or description for the media content. The caption can describe the content, provide additional context, or give credit.Semantics: The
<figure>
tag provides semantic meaning to the content, indicating that it is a standalone piece of content with an optional caption. This improves the document’s structure and helps both users and search engines understand the purpose of the content.Positioning of
<figcaption>
: The<figcaption>
tag can be placed either before or after the media content within the<figure>
. However, it is most commonly placed after the content.Visual Styling: By default, the
<figure>
tag is displayed with no specific styling other than block-level behavior. CSS can be used to style<figure>
,<figcaption>
, and the media content to suit design needs.
Example Usage:
Basic Example:
<figure>
<img src="photo.jpg" alt="A photo of a sunset">
<figcaption>A stunning sunset over the ocean.</figcaption>
</figure>
In this example:
- The
<figure>
tag groups the image and its caption together. - The
<figcaption>
provides a description of the image.
Example with CSS Styling:
<style>
figure {
text-align: center;
margin: 20px;
}
figcaption {
font-style: italic;
color: #555;
margin-top: 10px;
}
</style>
<figure>
<img src="landscape.jpg" alt="Scenic view of mountains and river">
<figcaption>Scenic view of mountains and a river flowing through a valley.</figcaption>
</figure>
In this example:
- The
<figure>
is centered, and the<figcaption>
is styled with italic text and a specific color.
Accessibility and SEO:
- Accessibility: The
<figure>
and<figcaption>
tags improve accessibility by providing clear associations between media content and its description. Screen readers can announce the caption along with the content, helping users with visual impairments understand the context. - SEO: Including a
<figcaption>
with descriptive text can enhance SEO by giving search engines additional context about the media content. This can help with indexing and understanding the relevance of the content on the page.