HTML <figure> Tag Tutorial - Usage, Syntax, Attributes, faq and Example

calender-iconPublished: 27 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

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.

Example: 

<figure>
 <img src="html_logo.png" alt="HTML logo.">
 <figcaption>HTML Logo</figcaption>
<figure>
Output:
HTML logo.
HTML Logo

Attributes

The <figure> element only includes global attributes


Tag Omission

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.