Figure Tag In Html

This article discusses the HTML Figure Tag. It would satisfy the requirements for learning.

The <figure> tag in HTML is used to group and encapsulate media content, such as images, videos, audio, or other types of media. The <figure> element is typically used in conjunction with the <figcaption> element to provide a caption or description for the media content.

In a document, utilize the <figure> element for marking up a picture and the <figcaption> element to designate a caption:


<!DOCTYPE html> <html> <body> <figure> <img src="" alt="theoxbow" style="width:100%"> <figcaption>Fig.1 The Oxbow, Thomas Cole.</figcaption> </figure> </body> </html>

The following code can be applied to style the <figure> and <figcaption> using CSS:


<!DOCTYPE html> <html> <head> <style> figure { border: 2px #000 dotted; padding: 5px; margin: auto; } figcaption { background-color: grey; color: black; font-style:bold; padding: 2px; text-align: center; } </style> </head> <body> <figure> <img src="" alt="theoxbow" style="width:100%"> <figcaption>Fig.1 The Oxbow, Thomas Cole.</figcaption> </figure> </body> </html>

You can also use <figure> element to group together a video and its caption:


<!DOCTYPE html> <html> <body> <figure> <video src="" width="500px" height="300px" controls></video> <figcaption>A short film featuring bear and birds</figcaption> </figure> </body> </html>

HTML figure tag Usage

Html figure Tag <figure> contains specialized content such as illustrations, diagrams, images, lists of codes etc.

Although the <figure> element has a connection to the document’s major flow, its position is independent, and its removal should have no effect on it.

Advice: To add a caption to the <figure>, the <figcaption> element is applied.

Browser Compatibility

According to the table, the numbers indicate the first browser version to accommodate the element completely in HTML Figure Tag.




Tag figure <figure>is fully capable of accepting Global Attributes in HTML.


The Tag figure <figure> can handle Event Attributes in HTML.

CSS Default Settings

Browsers usually render the <figure> element with the corresponding default values:

figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;

HTML Figure Tag Benefits

The <figure> tag in HTML is used to group together an image, illustration, diagram, or any other type of media with its caption or description. Here are some benefits of using the <figure> tag:

  • By using the <figure> tag, you can provide a clear and descriptive caption for the media that is associated with it, which can help improve the accessibility of your web page for users with disabilities.
  • The <figure> tag provides a semantic meaning to your content, which can help search engines better understand your web page and its contents.
  • The <figure> tag allows you to apply styles to both the media and the caption together, which can help improve the overall look and feel of your web page.
  • By grouping together related media and their captions with the <figure> tag, you can better organize your content and make it easier for users to understand.
  • The <figure> tag is part of the HTML5 specification and is widely supported by modern web browsers, making it a safe and future-proof choice for structuring your content.
Leave your reaction below in order to appreciate our efforts or to suggest us some improvements for the betterment of this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *