What does the HTML5 figure tag mean? Detailed explanation of how to use HTML5 figure tag

HTML5 What does the figure tag mean? Do you want to know how to use the HTML5 figure tag? Next, I will introduce today’s article, which mainly talks about the definition and usage of HTML5 figure tag (with examples)

The definition and usage of HTML524203f2f45e6606542ba09fd2181843a tag:

## The #24203f2f45e6606542ba09fd2181843a tag is used to group elements.

24203f2f45e6606542ba09fd2181843a tag specifies independent stream content (images, charts, photos, code, etc.).

24203f2f45e6606542ba09fd2181843a The content of the element should be related to the main content, and the position of the element should be independent from the main content. If removed, it should have no impact on document flow.

Example of HTML524203f2f45e6606542ba09fd2181843a tag:

A subsection in the document describing the PRC:

<figure>
  <h1>PRC</h1>
  <p>The People&#39;s Republic of China was born in 1949...</p>
</figure>

Tip: Please use 614eb9dc63b3fb809437a716aa228d24 Element adds a title to the group of elements.

The figure element is a combination of elements, optionally with a title. The figure tag is used to represent an independent piece of content on the website production page. Removing it from the webpage will not affect other content on the webpage. The content represented by figure can be a picture, statistical chart or code example.

Note: Only one figcaption element is allowed to be placed in a figure element, and other elements can be placed unlimitedly.

The role of the HTML5 figure tag:

I saw a very interesting wheel before: the Hover effect, which is implemented without using JavaScript code. It is all HTML CSS. I used the reviewer tool to look at the source code and found that the basic structure of HTML is as follows:

<figure class="effect-julia">
  <img src="img/21.jpg" alt="img21"/>
  <figcaption>
    <h2>Passionate <span>Julia</span></h2>
    <div>
      <p>Julia dances in the deep dark</p>
      <p>She loves the smell of the ocean</p>
      <p>And dives into the morning light</p>
    </div>
    <a href="#">View more</a>
  </figcaption>         
</figure>

And the code of the HTML part of the source code I implemented, the example comparison:

<div class="hover-area area-Julia">
  <img src="imgs/21.jpg" height="360" width="480">
  <h3>PASSIONATE<strong>JULIA</strong></h3>
  <ul>
    <li>Julia dances in the deep dark.</li>
    <li>She loves the smell of the ocean</li>
    <li>And dives into the morning light</li>
  </ul>
</div>

is very The obvious difference is that the original code uses the new HTML5 tag 24203f2f45e6606542ba09fd2181843a to implement the basic construction of the page. Let’s briefly talk about this new HTML5 tag 24203f2f45e6606542ba09fd2181843a.

It is worth mentioning that it is mentioned in the official document that it is independent from the mainstream of the document. It is also mentioned that the content contained in this tag should be independent, portable, and not affect the mainstream. content. Then the description mentioned above is the content of the optional subtag 614eb9dc63b3fb809437a716aa228d24 as 24203f2f45e6606542ba09fd2181843a.

Now I go back to the wheel that I was going to reinvent, and I found that if all the description content of the picture is wrapped in the 614eb9dc63b3fb809437a716aa228d24 tag, it will be clearer both in terms of semantics and code structure.

Differences between HTML 4.01 and HTML 5

The24203f2f45e6606542ba09fd2181843a tag is a new tag in HTML 5.

【Related recommendations】

What does the HTML56ecb87e5318a36c03c59e25d55f43372 tag mean? Detailed explanation of the basic usage of HTML56ecb87e5318a36c03c59e25d55f43372 tag

What does the header tag in HTML5 mean? Do you know how to use the header tag in HTML5?

The above is the detailed content of What does the HTML5 figure tag mean? Detailed explanation of how to use HTML5 figure tag. For more information, please follow other related articles on the PHP Chinese website!