HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <figure> Tag


The <figure> tag in HTML is used to encapsulate media such as an image, diagram, photo, code snippet, or any other content that is referenced from the main content. It often works in conjunction with the <figcaption> element to provide a caption for the content. The <figure> tag helps in grouping content and can be positioned as a single unit on the page.


Example 1: Displaying an Image with Caption

Sponsored by Google

Here’s an example of how you can use the <figure> tag to display an image along with a caption:

  <img src="landscape.jpg" alt="Beautiful Landscape">
  <figcaption>A breathtaking view of the mountains at sunset.</figcaption>

Example 2: Displaying a Code Snippet with Caption

You can also use the <figure> tag to display a code snippet along with a caption:

  <pre><code>function greet() { alert('Hello, World!'); }</code></pre>
  <figcaption>JavaScript function to display a greeting message.</figcaption>

Try it out below:



Global Attributes

The <figure> tag supports all the global attributes in HTML.

Event Attributes

The <figure> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes

Default CSS Settings

Most browsers will display the <figure> element with the following default CSS settings:

figure {
  display: block;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 40px;
  margin-end: 40px;


The <figure> tag offers a semantic way to group content and its associated caption. It’s particularly useful for content creators, web designers, and developers who want to present media content in a structured and meaningful way.

By using the <figure> tag, you can ensure that the content is rendered consistently across different browsers and devices, enhancing the user experience.