figure Tag in HTML
FREE
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:
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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:
Code snippets
This will be rendered as:
This will be rendered as:
Don't write better error messages, write code that doesn't need them.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ morePoems
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.
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:
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:
Turn Learning into Career Growth
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:
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.
Related tags
- <mark> tag in html
- <span> tag in html
- <canvas> tag in html
- <aside> tag in html