HTML Tutorial

Figure and Figure Caption

HTML5 introduced the <figure> element and the <figcaption> to further enhance the methodology of associating captions or descriptions with images, illustrations, and other media on a webpage. These elements make it possible to semantically group related content, provide structure and clarity for the user, as well as semantically clear for search engines.

figure Element

The figure element groups together media content, such as images, diagrams, videos, or code snippets, with their respective captions. It keeps all these things combined, hence they’re considered one single unit. That element comes in especially handy if you have several images or even more media items that share a common caption.

figCaption Element

The caption of the <figcaption> element is used inside the <figure> element to describe or caption the content associated with it. Further information of context is brought about to media by using it to enhance accessibility and understanding.

Example

Here’s a simple example of how to use the <figure> and <figcaption> elements:

				
					<figure>
    <img class="lazy" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="image.jpg" alt="A beautiful sunset over the mountains">
    <figcaption>A breathtaking view of the sunset over the mountain range.</figcaption>
</figure>

In this example, the image and its caption are grouped together inside the <figure> element, with the <figcaption> providing a description for the image.

Importance of Figure and Fig Caption

Benefits

Accessibility: By using these elements, screen readers and search engines can better understand the relationship between the image and its caption.
SEO-Friendly: Structured content helps search engines index the page effectively, which can improve SEO.
Browser Compatibility: While modern browsers fully support these HTML5 elements, older browsers that don’t recognize them will still display the content without issues.

The <figure> and <figcaption> elements are essential for creating structured, meaningful, and accessible content in HTML5, especially when dealing with media and visual information.

The Ultimate Travel Companion:...

HTML Tutorial

Figure and Figure Caption

figure Element

figCaption Element

Example

Importance of Figure and Fig Caption

Benefits

Try It Yourself

Share with friends