Detailed introduction to HTML5 tag nesting rules

The following will bring you a detailed introduction to the HTML5 tag nesting rules. The summary is very good and it is worth taking a look at it together.

[1] Category [2] Sub-element [3] Summary

Previous words
In HTML5, the sub-elements of the element can be block-level elements. This is It was previously considered against 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, which are divided into metadata content (metadata content), area Block type (sectioning content), heading type (heading content), document flow type (flow content), statement type (phrasing content), embedded type (embedded content), and interactive type (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 content is an element that can be used to describe the performance 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
Flow elements (flow content) are most elements used in the main body of applications and documents

a abbr address area (if it is child element of 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
　Block type The element (sectioning content) is used to define the title and footer range

article aside nav section
The heading element (heading content) defines the title of a section/section

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 a 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 type Elements (embedded content) are references or elements inserted into other resources in the document

audio canvas embed iframe img math object svg video
Interactive elements (interactive content) are specially used Elements for interacting with the user

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 flow element

,

, < ;blockquote>,

,

,

,

,

,
[1.1] Child elements are flow elements, excluding

,

[1.2] Child elements are flow elements, but do not include the element

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

,

, sectioning content, heading content

【1.7】The child element is a < ;figcaption> element, followed by the flow element

[1.8] The child element is a

element, followed by the flow element

【2】The sub-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="Detailed introduction to HTML5 tag nesting rules" >, <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/>Summary About the detailed nesting rules of each element, the previous part has been introduced in detail. This part mainly summarizes the nesting rules of commonly used tags<p><br/> [Note] Move the mouse over the text with a dark gray background, and the title will display the tags contained in the element<p> [1] The child elements of <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p> are statement elements<br/> [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> I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website! <p>Related reading: <p><a href="http://www.php.cn/js-tutorial-381968.html" target="_blank"> Implementation steps of using JS to operate HTTP Cookies<br/><p><a href="http://www.php.cn/div-tutorial-381952.html" target="_blank">When laying out a web page, should I write HTML first? Write CSS first<br/><p><a href="http://www.php.cn/css-tutorial-381941.html" target="_blank">An example tutorial of margin-top in web page production<br/></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 Detailed introduction to HTML5 tag nesting rules. For more information, please follow other related articles on the PHP Chinese website!