<figure>

HTML <figure> Tag

The <figure> tag is used for indicating self-contained content. The tag can contain diagrams, images, illustrations, code examples and so on.

The <figure> tag is one of the HTML5 elements.

The content of the <figure> tag is related to the main flow content. However, it is perceived as an autonomous unit.

To add a caption or explanation to the content of the <figure> tag, we use the <figcaption> tag. The <figcaption> tag is included in the <figure> tag and is placed as the first or last child element. If <figcaption> is the first nested element, then the content will be displayed at the top of the image.

Syntax

Syntax (语法)

The <figure> tag comes in pairs. The content is written between the opening (<figure>) and closing (</figure>) tags.

Example of the HTML <figure> tag:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <p>A cute baby</p>
   <figure>
     <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
   </figure>
 </body>
</html>

Result

The difference between the <figure> and <aside> tags

The difference between the <figure> and <aside> tags

Both of these tags have similar behavior. However, there are some differences. Particularly, the <figure> element is for content that is directly related to the main content. The <aside> is used for “indirectly” related content. It provides infographics, pull quotes or charts for specific content.

Attributes

Attributes (属性)

The <figure> tag supports the Global Attributes and the Event Attributes.



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部