HTML <figure> Figure Tag
Tags: learnhtml, htmlf
Published: 2021-05-10 05:26:45

---
title: HTML <figure> Figure Tag
published: true
date: 2021-02-23 20:32:08 UTC
tags: LearnHTML,HTMLF
canonical_url: https://sharepointanchor.com/learn-html/html-figure-tag/
---

The **<figure>**  **Figure tag** is used to **mark up a photo in an HTML**  **document**. It contains self-contained content such as **diagrams** , **images** , **illustrations** , **code examples** , and so on. The **<figure>** tag is one of the **new sectioning element in HTML 5**.

The content of the **<figure>** tag is related to the main flow, but its **position is independent** of the main flow. It is a **block-level element**. This tag used to **<img>** tag with the **“src”** attribute to add the image source in the document.

![💡](https://s.w.org/images/core/emoji/13.0.1/72x72/1f4a1.png) **Tips** : You can use the **<figcaption>** tag to add a caption or explanation of the content of the **<figure>** tag.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 3 minutes

## Syntax:

It contains both an **opening <figure>**  **tag** and **closing <figure>**  **tag**. The content is written between these two tags.

```

<figure> Image content </figure>

```

### HTML <figure> Tag Characteristics:
<style> th, td{ padding: 20px; } </style>

| HTML <figure> tag | It defines self-contained content |
| Content categories | Flow content, sectioning root, palpable content. |
| Permitted content | A <figcaptione> element followed by Flow content; or a Flow content followed by a <figcaptione> element; or Flow content |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts flow content. |
| Implicit ARIA role | figure |
| Permitted ARIA roles | With no figcaption descendant; Any, otherwise no permitted roles. |
| DOM interface | HTML Element |

## Sample of the HTML <figure> Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
   <h3>Example of HTML <figure> Tag</h3>
    <p>Share Point Anchor Logo Image</p>
    <figure>
      <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png">
    </figure>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-32.png)<figcaption>Result</figcaption>

### Download Sample File:

[Figure-tag](https://sharepointanchor.com/wp-content/uploads/2021/02/Figure-tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/Figure-tag.html)

## HTML <figure> Tag VS <aside> Tag:
<style> th, td{ padding: 20px; } </style>

| **HTML <figure> Tag** | HTML <aside> Tag |
| --- | --- |
| It have **<figcaption>** element to add the caption. | This tag **doesn’t have a built-in caption** element |
| The <figure> tag is used for the content which is **_directly_** related to the main content. | It is used of **_indirectly_** related to the content. |
| A **pull-quote** , **infographics** , **charts** , and other content specific to a particular article of content should be placed in an <figure> element. | The <aside> ** ** element should be used for content-related **sidebar sections**. |

## Attributes:

The HTML figure tag supports both **Global Attributes** and **Event Attributes**.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_tPSuH3zqYe.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**
- **[HTML <caption> Caption Tag](https://sharepointanchor.com/learn-html/html-caption-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <datalist> Data List Tag](https://sharepointanchor.com/learn-html/html-datalist-data-list-tag/)**
- **[HTML <article> Article Tag](https://sharepointanchor.com/learn-html/html-article-tag/)**

The post [HTML <code><figure></code> Figure Tag](https://sharepointanchor.com/learn-html/html-figure-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).