HTML5 tag nesting rules (required) _ html5 tutorial skills-

The following is a detailed description of HTML5 tag nesting rules ]. I think this is quite good. I will share it with you and give you a reference. HTML5 tag nesting rules (required) _ html5 tutorial skills

Previous
In html5, the child element of an element can be a block-level element, which was previously considered non-compliant with the rule. This article will introduce the tag nesting rules of html5 in detail.

Category
Before html5 appears, elements are often distinguished by block, inline, and inline-block. In html5, elements are not differentiated by the display attribute, but by the content model. They are divided into metadata type (metadata content), sectioning content type (sectioning content), and heading content type (heading content), flow content, phrasing content, embedded content, and interactive content ). An element does not belong to any category and is called penetrating. An element may belong to more than one category and is called a hybrid element.

Metadata content is an element that can be used to describe the performance or behavior of other content, or establish a connection between the current document and other documents.

Base link meta noscript script style template title
Flow content is a majority of elements used in the main parts of applications and documents.

A abbr address area (if it is a child element of the map element) article aside audio B bdi bdo blockquote br button canvas cite code data datalist del dfn p dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 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
A block element (sectioning content) is an element used to define the title and footer range.

Article aside nav section
Heading content defines the title of a block/chapter.

H1 h2 h3 h4 h5 h6
Phrasing content is an element used to mark paragraph-level text.

A 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 content is an element that is referenced or inserted into other resources in the document.

Audio canvas embed iframe img math object svg video
Interactive content is a special element used to interact with users.

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

Child Element
[1] The child element is a stream element.

,

,

,

,

, ,

, ,
[1.1] The child element is a stream element, not including Element

,

[1.2] The child element is a stream element, but does not include

,
[4.1] child elements can be none or

Element, or script, Element

,

[4.2] child elements can be none or
And
Element, or script, Element


[4.3] The child element can be none. It can be , Or script, Element

[4.4] The child element can be none. It can beOr script,Element[4.5] child elements can be none orElement[4.6] the sub-element can be none orElement, which can also beElement,[4.7] The child element can be none or,Element[4.8] The child element can be none. It can be

Or script, Element

, , [4.9] The child element can be none. It can be
,

[5] The child element is

, , , Or script, Element

Element

[1.3] The child element is a stream element, but does not include Element

[1.4] The child element is a stream element, but does not include

, , Element

, ,
[1.5] The child element is a stream element, but does not include , , Sectioning content, heading content)

,

,

[1.6] The child element is a stream element, but does not include , , Block-type Elements (sectioning content), header-type Elements (heading content) [1.7] The child element is Element, followed by the stream Element [1.8] The child element is Element, followed by the stream Element [2] child elements are statement elements. ,,,,,, , ,,,,,,,,,,,,,,,,,,,,,,,,,, [2.1] subelements are statement-type elements, but do not include the same elements as themselves. ,, [2.2] A subelement is a statement-type element, but does not include an interactive content element) [3] The child element is transparent (subject to the child element allowed by its parent element) ,, [3.1] The child element is transparent (subject to the child element allowed by its parent element), but does not include interactive content) [3.2] child elements can be none orIt can also be a transparent (subject to the child elements allowed by its parent element) [4] No child element , ,,,,,,,,
Or script, Element

[6] child elements are text content

[6.1] the sub-element can be absent or text content

Summary
The previous section describes detailed nesting rules for each element. This section summarizes the nested rules of common labels.

[Note] move the cursor over the text on a dark gray background, and the title displays the tags contained in this element.

[1 ],,,,,,

The child element of is a statement-type element.

[2]

, Not nested ,

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

[4]Not nested

[5]A child element is a statement element and cannot be nested with an interactive content element)

[6]

Not nested

[7]

,

Not nested , , Sectioning content, heading content) The above is a detailed description of HTML5 tag nesting rules [mandatory] _ html5 tutorial skills. For more information, see PHP Chinese website (www.php1.cn )!