The figure tag and figcaption tag are new semantic tags in HTML5.
figure tag, html5 semantic tag.Used to specify individual stream content (images, charts, photos, code, etc.).
figcaption tag, html5 semantic tag.Used in conjunction with figure, the label is used to define the title of the figure element.
Advantages of using figure and figcaption tagsWhen search engines search for figure, they will know that pictures, charts, photos, codes and other media are stored here, and they will not think that articles and other things are stored here. Search engines make searching faster and more convenient.
On the other hand, when programmers see this label, they will know that what exists here are pictures and other media for easy reading.
The following diagram briefly describes how to use these two tags.
Case 1:Figure element without title:
<figure> <img style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma , arial, Microsoft YaHei;"><figure> <img <figcaption>VeVb Wulin.com, VeVb Wulin.com is a domestic professional website construction resource and script programming learning website, providing asp, php, asp.net, javascript, jquery, vbscript, dos batch processing, and web page production , network programming, website construction and other programming materials</figcaption></figure>Case 3:
Multiple pictures, figure element with the same title:
<figure> <img <img <img <figcaption>VeVb Wulin.com, VeVb Wulin.com is a domestic professional website construction resource and script programming learning website, providing asp, php, asp.net, javascript, jquery, vbscript, dos batch Processing, web page production, network programming, website construction and other programming materials</figcaption></figure>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.