Is figure a new tag in html5?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

Is figure a new tag in html5?

青灯夜游

May 18, 2022 pm 04:21 PM

html html5

figure is a new tag. Figure is a new semantic tag in HTML5, which is used to specify independent flow content, such as images, charts, photos, etc.; the content in figure is usually related to the main content, and the position of the element is independent from the main content. Yes, if you delete it, it will not affect other content in the web page.

Is figure a new tag in html5?

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

is a new tag in HTML 5, a new semantic tag added to html5.

is used to specify independent stream content (images, charts, photos, code, etc.).

The content in the figure is usually related to the main content, and the position of the elements is independent from the main content. If it is deleted, it should not affect the document flow; that is, if the figure is deleted, it will not affect other content in the web page.

Note:

The outline of the element content is excluded from the main outline of the document.
The
element can be used with the
element.

The
element is used to define the title for the
element.

Insert a
into the
element to associate a title with it (as its first or last child element)

Benefits of using figure and figcaption tags

When search engines search for figure, they will know that pictures, charts, photos, codes and other media are stored here. I don’t think that what is stored here is articles or other things. 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.

Is figure a new tag in html5?

Example:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>figure和 figcaption元素的使用</title>
	</head>
	<body>
		<p>被称作“第四代体育馆”的“鸟巢”国家体育场是 2008年北京奥运会的标志性建筑，它位于北京北四环边，包含在奥林匹克国家森林公园之中。占地面积 20.4万平方米，总建筑面积 25.8万平方米，拥有
			9.1万个固定座位，内设餐厅、运动员休息室、更衣室等。2008年奥运会期间，承担开幕式、闭幕式、田径比赛、男子足球决赛等赛事活动。</p>
		<figure>
			　 <figcaption>北京鸟巢</figcaption>
			　 <p>拍摄者：XXXX，拍摄时间：2020 年 09 月</p>
			　 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/618/758/942/1652861905236705.png"  class="lazy"   alt="">
			　</figure>
	</body>

</html>

Copy after login

Is figure a new tag in html5?

(Learning video sharing: html video tutorial 、web front end）

The above is the detailed content of Is figure a new tag in html5?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7376

Java Tutorial

1628

CakePHP Tutorial

1355

Laravel Tutorial

1267

PHP Tutorial

1216

Related knowledge

Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

See all articles