The 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 tag is one of the new sectioning element in HTML 5.
The content of the 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 tag with the “src” attribute to add the image source in the document.
Tips : You can use the
Estimated reading time: 3 minutes
Syntax:
It contains both an opening tag and closing tag. The content is written between these two tags.
<figure> Image content </figure>
HTML Tag Characteristics:
th, td{ padding: 20px; }
| HTML tag | It defines self-contained content |
| Content categories | Flow content, sectioning root, palpable content. |
| Permitted content | A element followed by Flow content; or a Flow content followed by a 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 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:
Download Sample File:
HTML Tag VS Tag:
th, td{ padding: 20px; }
| HTML Tag | HTML Tag |
|---|---|
| It have |
This tag doesn’t have a built-in caption element |
| The 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 element. | The ** ** element should be used for content-related sidebar sections. |
Attributes:
The HTML figure tag supports both Global Attributes and Event Attributes.
Browser Support:
Related Articles:
- HTML Aside Tag
- HTML Caption Tag
- Basic HTML Definitions and Usages in the Real World
- HTML Data List Tag
- HTML Article Tag
The post HTML Figure Tag appeared first on Share Point Anchor.
Top comments (0)