Home  >  Article  >  Web Front-end  >  What is the figure tag? When to use it?

What is the figure tag? When to use it?

藏色散人
藏色散人Original
2018-11-01 17:26:3513629browse

This article mainly introduces to you the definition and usage of the new tag figure tag in html5.

HTML5 is the latest revised version of HTML, using richer tags to give web pages better meaning and structure. So some newcomers may ask, what is this figure tag? When should the figure tag be used?

Recommended related tutorials: HTML5 tutorial

Then the official definition of the figure tag stipulates independent stream content (Images, diagrams, photos, code, etc.).

Below we will introduce the specific method of the figure tag in HTML5 with a simple code example.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>figure标签使用示例</title>
<head>
</head>
<body>
<p>
    HTML5是HTML最新的修订版本,由万维网联盟(W3C)于2014年10月完成标准制定。,<br>
    目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网上标准达到匹配当代的网上需求。<br>
    广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。<br>
    它希望能够减少网页浏览器对于需要插件的丰富性网上应用服务(Plug-in-Based Rich Internet Application,RIA),<br>
    例如:Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强网上应用的标准集。
</p>
<figure>
    <p>图片主题名称</p>
    <p>图片制作时间:11.1</p>
    <img  src="img/2.png" alt="What is the figure tag? When to use it?" >
</figure>
</body>
</html>

The above code introduces you to an example of using the figure tag. The effect of accessing through the front desk is as follows:

What is the figure tag? When to use it?As mentioned before, figure specifies independent streaming content photos and images. etc. In other words, the figure tag can be used to represent an independent piece of content on the website production page. Removing it from the web page will not affect other content on the web page. The content represented by figure can be a picture, statistical chart or code example.

As shown in the picture above, the pictures and titles in the figure tag are displayed independently.

Note:

The content of the figure element should be related to the main content, but if removed, it should have no impact on the document flow.

You can use the

element to add a caption to a figure.

This article is an introduction to how to use the new tag figure in HTML5. It should be very simple and easy to understand. I hope it will be helpful to friends in need!

If you want to know more about front-end knowledge, you can follow PHP Chinese website HTML5 tutorial and other related front-end video tutorials!

The above is the detailed content of What is the figure tag? When to use it?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn