Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
figure Tag in HTML

figure Tag in HTML

By Shirshak Maurya
3 mins read
Last updated: 4 May 2023
156 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

The <figure> tag in html is self-contained content, it is used to block HTML elements, basically, it is used to contain text, images, code, and other elements. These elements are referenced in the main flow without affecting the main web flow of the html document.

Optionally, <figcaption> tag can be used with the <figure> tag to specify a caption for the figure element in the html.

Syntax of <figure> Tag

The figure tag has a opening (<figure>) and closing (</figure>) tag, and the content is written between these tags.

Example:

In this example, we are using figure tag to display an image with its width="250" and height="200".

Now, this will be rendered as: example of figure tag

Attributes (global+event)

There are no specific attributes applied to the figure tag in html, Only global attributes are applied to the figure tag in Html.

What is the<figure>tag used for?

The figure tag in html, <figure> is a self-contained content and is used to block html elements, blocking here means to separate user content space on the html web page and it neither affects the main flow nor is affected by the other html elements.

Generally, a <figure> tag contains an image, code, illustrations, text, etc.

These elements are referenced in the main flow of html document and can be moved from one place to another without affecting the main web flow of the html document.

The figure tag in html is related to the main flow of html document. However, it is referenced as an independent unit.

To add a caption to the figure element we can use the <figcaption> tag inside the <figure> tag.

If there are multiple <figcaption> tag within the <figure> tag, the first <figcaption> element will be used to show the figure caption.

Examples

Images

This will be rendered as: example of figure tag 2

Code snippets

This will be rendered as:

This will be rendered as:

Jason C. McDonald:
Don't write better error messages, write code that doesn't need them.

Poems

This will be rendered as:

Twinkle, twinkle, little star, How I wonder what you are! Up above the world so high, Like a diamond in the sky.

Twinkle, Twinkle, Little Star, by JANE TAYLOR

Used in the HTML body with some fixed-width length

To define a fixed-width length in the figure tag in html, we can use the width attribute with style element.

Example:

This will be rendered as: Poems attribute od figure tag

Use with the additional alert menu

We can add additional alert to our web page, this alert can be used to display text message, run javascript or add other additional feature depending on the business need.

This will be rendered as:

additional alert menu

Accessibility concerns

There are some accessibility concerns related to the figure tag in html that we should keep in mind while using the figure tag in html.

<figure> tag specifies self-contained content, it can contain text, image, code, etc.

However, we can use <div> element with role="figure" and aria-labelledby="caption" to define a figure and its caption using the <div> tag. We can write it as:

This will be rendered as:

Accessibility concerns of figure tag

Browser Support

The list of browsers that support the figure tag in html is listed below:

  • Chrome
  • Edge
  • Firefox
  • IE
  • Safari
  • Opera
  • Webview android

Conclusion

  • The figure tag in HTML is used to self-contain a content.
  • The content contained inside the figure tag does not affect the main flow of the HTML document
  • To add a caption to the figure element we can use the <figcaption> tag.
  • <mark> tag in html
  • <span> tag in html
  • <canvas> tag in html
  • <aside> tag in html