Parsing tag nesting rules in HTML5

The editor below will bring you a detailed explanation of HTML5 tag nesting rules [must read]. The editor thinks it’s pretty good, so I’d like to share it with you now and give it as a reference.

Previous words
In HTML5, the sub-elements of the element can be block-level elements. This was not the case in the past. is considered to be inconsistent with the rules. This article will introduce in detail the tag nesting rules of html5

Classification
Before the emergence of html5, elements were often distinguished according to block, inline, and inline-block. In HTML5, elements are no longer distinguished by displayattributes, but by contentmodel.

It is divided into metadata content, sectioning content, heading content, flow content, phrasing content, and embedded content. embedded content), interactive (interactive content). Elements that do not belong to any one category are said to be penetrating; elements that may belong to more than one category are said to be mixed.

Metadata elements (metadata content) are elements that can be used to describe the performance or behavior of other content, or to establish connections between the current document and other documents

base link meta noscript script style template title

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

a abbr address area(如果它是map元素的子元素) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div 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

The sectioning element (sectioning content) is the element used to define the range of titles and footers

article aside nav section
　Heading content defines the title of a section/section

##h1 h2 h3 h4 h5 h6

Phrasing content is used to mark paragraph-level text element of

a abbr area (if it is a child of 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 are inserted into other resources in the document

audio canvas embed iframe img math object svg video

Interactive elements (interactive content) are elements specifically 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 elements
[1]Child elements are flow elements

,

,

,

, ,

,

,

,

[1.1] Child elements are flow elements, excluding the

element

　【1.2】The child element is a flow element, but does not include the

element

[1.6] Child elements are flow elements, but do not include

,

,

[1.7] The child element is a

element, followed by the flow element

　【1.8】The child element is a

element, followed by the flow element

【 2] The child element is a statement element

,

,

,

,

,

,

,

, <em>, , <small>, <s>, <cite>, <q>, <abbr>, <data>, <time>, <code>, <var>, , <kbd>, <sub>, <sup>, <i>, <b>, <u>, <mark>, <bdi>, <bdo>, , <input>, <output>, <legend>, <label><br> [2.1] Child elements are statement elements, but do not include elements that are the same as themselves<p>&lt ;dfn>, <progress>, <meter><br> [2.2] Child elements are statement elements, but do not include interactive elements (interactive content)</meter></progress></p>
<p><button><br> </button></p>
<p>【3】The child element is transparent (subject to the child elements allowed by its parent element)</p>
<p><ins>, <del>, <map><br>　[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)</map></del></ins></p>
<p><a><br>　【3.2】Child elements can have no, It can be a <param> element, or it can be transparent (subject to the child elements allowed by its parent element) </a></p>
<p><object><br> </object></p>
<p>【4】No child elements </p>
<p></p>
<hr>, <br>, <wbr>, <img  alt="Parsing tag nesting rules in HTML5" >, <embed>, <param>, <source>, <track>, <area> , <col>, <keygen><br> [4.1] Child elements may not have any, may be <li> elements, or may be <script>, <template> elements<p>< ol>, <ul><br/> [4.2] Child elements may not have any, may be <dt> and <dd> elements, or may be <script>, <template> elements<p> <dl><br/>　【4.3】The child element does not need to be present, it can be <option>, <optgroup>, or it can be <script>, <template> element<p><select> <br/>　【4.4】Child elements do not need to be present, they can be <option>, or they can be <script>, <template> elements <p><optgroup><br/>　【4.5】Child elements can None, it can be an <option> element<p><datalist><br/> [4.6] The child element can be none, it can be a <track> element, it can also be a <source> element [ 4.8] There may be no child elements, and they may be <tr>, or they may be <script>, <template> elements<p><br/><tbody>, <thead>, <tfoot> [4.9] There may be no child elements, they may be <tr>, <th>, or they may be <script>, <template> elements<p><br/><tr> <p><br/>【5】The child elements are <caption>, <colgroup>, <thead>, <tfoot>, <tbody>, or they can be <script>, <template> elements<p><table><br/> <p>【6】The sub-element is text content<p><textarea><br/> 【6.1】The sub-element may not be present, or it may be text content<p><option><p><br/><p>Summary<br/><p> About the detailed nesting rules of each element, the above part has been introduced in detail. This part mainly summarizes the nesting rules of commonly used tags<strong><span   style="max-width:90%"> [Note] Move the mouse over the text with a dark gray background, and the title will display the tags contained in the element<br/>[1] The child elements of <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p> are statement elements[2] <header>, <footer> cannot be nested<header>, <footer><p>【3】The child elements of <a> are transparent (the child elements allowed by its parent element are accurate), but does not include interactive content<p>【4】<form> cannot be nested<form><p>【5】<button>The child element is a statement Type elements, interactive content cannot be nested<p>【6】<caption>Cannot be nested<table><p><p>【7】<dt>, <th> cannot nest <header>, <footer>, sectioning content, and heading content<p> [Related recommendations] <p>1. <a href="http://www.php.cn/course/list/13.html" target="_self">Free h5 online video tutorial<p>2. <a href="http://www.php.cn/course/34.html" target="_self">HTML5 full version manual<p>3. <a href="http://www.php.cn/html5-tutorial-349995.html" target="_self">HTML5 Video tag detailed explanation<p>4. <a href="http://www.php.cn/html5-tutorial-353329.html" target="_self">HTML5 does not support tags and detailed explanation of new tags</script>
</li></keygen></track></source></embed></wbr></label>
</legend></output></bdo></bdi></mark></u></b></i></sup></sub></kbd></var></code></time></data></abbr></q></cite></s></small></em>

The above is the detailed content of Parsing tag nesting rules in HTML5. For more information, please follow other related articles on the PHP Chinese website!