The <figure> element is used to
group media content, along with their captions.
The figure, its caption, and its contents are considered as a single unit.
The media is not limited to image and can include
illustrations,
diagrams, code snippets, HTML text elements(<pre>, <blockquote>, <p> etc)
and others.
The caption is specified using the <figcaption> element and is defined inside the
<figure> element. The <figcaption> element provides
describtion for the contents of its parent <figure> element.
The HTML <figure> element must have both start
tag
and
end tag.
Frequently Asked Questions(FAQ)
What is the use of the <figure> tag in
HTML5?
The <figure> tag in HTML5 is used to group self-contained content, such as
images,
diagrams, illustrations, code snippets, or other media, along with their
associated captions.
It provides a meaningful way to associate media with a caption.
How does the <figure> element differ from the <img> tag?
The <figure> tag provides better semantic meaning by grouping media
with its caption, which can improve accessibility and SEO.
The <img> element does not provide semantic grouping or
additional metadata beyond attributes
like alt, width, and height.
Is it necessary to include a <figcaption>
within
the <figure> element?
No, it is not necessary to include a <figcaption> within a <figure>
element,
What kind of content can I put in the figure element?
The <figure> element in HTML5 is not limited to images—it can contain various
types
of content like Videos, Audio, Code Snippets, SVG, Canvas, Tables.
What is the difference between using a <div> and a <figure> for using
images?
<figure>: Provides semantic meaning, indicating that the content inside (e.g.,
an
image) is a self-contained unit (like a diagram, illustration, or code snippet)
and may include a <figcaption>.
<div>: Is a generic container with no semantic meaning—it’s purely for
layout and styling.
Are there any SEO benefits to using the <figure> and
<figcaption>> elements?
Yes, using the <figure> and <figcaption> elements can provide some SEO
benefits,
although they are not direct ranking factors.
The <figure> element provides a clear, semantic way to associate an image
(or other media) with its caption.
A <figcaption> gives additional context, which can be useful for search
engines in understanding the relevance of an image.
It can reinforce keywords and context, potentially
improving the image’s ranking in Google Images.