Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of the nesting rules of tags in HTML5. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

classification

Before the emergence of html5, elements were often distinguished by block, inline, and inline-block. In html5, elements are no longer distinguished by display attributes, but by content model, which can be divided into metadata content, sectioning content, heading content, flow content, phrasing content, embedded content and interactive content. Elements do not belong to any category and are called penetrating; elements may belong to more than one category and are called mixed.

A metadata element (metadata content) is an element that can be used to describe the presentation or behavior of other content, or to establish a relationship between the current document and other documents

Base link meta noscript script style template title

Stream elements (flow content) are most of the elements used in the body of applications and documents

An abbr address area (if it is a child of the map element) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div dl em embed fieldset figure footer form h 2 h 3 h 4 h 5 h 6 h 7 header hr i iframe img input ins kbd keygen label main map mark math meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time u ul var video wbr text

Block elements (sectioning content) are elements that define the scope of the title and footer

Article aside nav section

Title element (heading content) defines the title of a block / chapter

H2 h3 h4 h5 h6 h7

A statement pattern element (phrasing content) is an element used to mark the unqualified text of a segment

An abbr area (if it is a child of the map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text

Embedded elements (embedded content) are elements that reference or insert into other resources in the document

Audio canvas embed iframe img math object svg video

Interactive elements (interactive content) are elements designed to interact with users

An audio (if controls property is set) button embed iframe img (if usemap property is set) input (if type property is not hidden) keygen label object (if usemap property is set) select textarea video (if controls property is set)

Child element

[1] the child element is a stream element

、

[1.1] Child elements are stream elements, excluding elements

、

[1.2] Child elements are stream elements, but do not include elements

[1.3] Child elements are stream elements, but do not include elements

[1.4] Child elements are stream elements, but do not include,

、 、

[1.5] Child elements are stream elements, but do not include, block elements (sectioning content), title elements (heading content)

、

[1.6] Child elements are stream elements, but do not include, block element (sectioning content), title element (heading content)

[1.7] A child element is an element, followed by a stream element

[1.8] A child element is an element, followed by a stream element

[2] Sub-elements are sentence pattern elements

、

、 、

[2.1] Sub-elements are sentence pattern elements, but do not include the same elements as themselves.

、 、

Child elements are statement type elements, but do not include interactive elements (interactive content)

[3] the child element is transparent (subject to the child elements allowed by its parent element)

、 、

[3.1] the child element is transparent (subject to the child elements allowed by its parent element), but does not include interactive elements (interactive content)

The child element can be none, it can be an element, or it can be transparent (subject to the child elements allowed by its parent element)

[4] No child elements

、

、 、

、

[4.1] Child elements can not be, can be elements, can be, elements

、

[4.2] Child elements can be none, can be and elements, can also be, elements

[4.3] Child elements can not be, can be, can be, element

[4.4] Child elements can not be, can be, can be, element

[4.5] Child elements may be absent or may be elements

[4.6] Child elements can be none, elements, or elements

、

[4.7] Child elements can not be, or they can be, elements.

[4.8] Child elements can not be, can be, can be, element

、 、

[4.9] Child elements can not be, can be, can be, element

[5] the child element is, or it can be, element

[6] Child elements are text content

[6.1] Child elements may not exist, or they can be text content

This is the end of this article on "sample analysis of tag nesting rules in HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.