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 HTML5

tag:

## The #

tag is used to group elements.

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

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 HTML5

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

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

to implement the basic construction of the page. Let’s briefly talk about this new HTML5 tag

.

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

as

.

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

tag, it will be clearer both in terms of semantics and code structure.

Differences between HTML 4.01 and HTML 5

The

tag is a new tag in HTML 5.

【Related recommendations】

What does the HTML5 tag mean? Detailed explanation of the basic usage of HTML5 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!