What does the HTML5 figure label mean? How to use HTML5 figure tags

What does the HTML5 figure label mean? HTML5 How to use a figure tag you want to know? Next, we present this article, mainly on the definition and usage of HTML5 figure tags (with examples)

Definition and usage of html5<figure> tags:

<figure> tags are used to group elements.

The <figure> tag provides separate streaming content (images, charts, photos, code, and so on).

The content of the <figure> element should be related to the main content, while the element's position is independent from the main content. If it is deleted, it should not affect the flow of the document.

Examples of html5<figure> Tags:

A section of the document that describes PRC:

<figure>  
Tip: Use the <figcaption> element to add a caption to an element group.

A figure element is a combination of elements that can have a caption (optional). The figure tag is used to represent a separate piece of content on the site authoring page, and removing it from the page does not affect other content on the page. A figure can represent a picture, a chart, or a code sample.

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

HTML5 the role of the tag:

Before I saw a very interesting wheel: the hover effect, not using JavaScript code, all HTML + CSS is implemented, with the reviewer tool to see the source code, found that the basic structure of HTML is as follows:

<figure class= "Effect-julia" >    <figcaption>    < H2>passionate <span>Julia</span>
And I realized the source code of the HTML part of the codes, example comparison:

<div class= "Hover-area area-julia" >    
The obvious difference is that the original code in the use of HTML5 new tags <figure> Implementation of the basic construction of the page, the following simple chat about this HTML5 new tab <figure>.

It is worth mentioning that, in particular, it is mentioned in the official document, which is independent of the main document, and that the content contained in this label should be separate, portable, and not affect mainstream content. And then the description described here is as an optional sub-tag <figcaption> in <figure>.

Now go back to the wheel I was going to build again, and find that if the description of the picture is all wrapped up in the <figcaption> tag, it's both semantically and structurally clearer.

Differences between HTML 4.01 and HTML 5

The <figure> tag is a new label in HTML 5.

"Recommended"

What does the html5<progress> label mean? The basic usage of the html5<progress> tag is detailed

What does the header label in the 
 HTML5 mean? How to use header tags in HTML5 do you know?