HTML5 Tag Nesting rules

xTable of Contents [1] Classification [2] sub-elements [3] summing up the previous words

The child elements of the,<a> element in HTML5 can be block-level elements, which were previously considered non-conforming. This article describes the tag nesting rules for HTML5 in detail

category

Before HTML5 appears, the elements are often distinguished by block, inline, Inline-block. In HTML5, elements are no longer differentiated by the display attribute, but are differentiated by the content model, divided into meta-data (metadata content), chunk (sectioning content), heading (heading content), document-flow (flow content), statement type (phrasing content), inline (embedded content), interactive (interactive content). An element does not belong to any category, which is called penetrating; the element may belong to more than one category, called a blend.

meta-Data elements (metadata content) is an element that can be used to describe the performance or behavior of other content, or to establish a connection between the current document and other documents

base link meta noscript script style template title

Flow Element (flow content) is the majority of the elements used in the main part of the application and document

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 element (sectioning content) is the element used to define the title and footer range

Article aside nav section

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

H1 H2 H3 h4 h5 h6

statement-type elements (phrasing content) is the 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 in s KBD keygen label map mark Math meter NOSCRIPT object output Progress Q Ruby s Samp script Select small span strong s UB SUP svg template textarea time u var video WBR text

embedded Elements (embedded content) is an element that references or inserts other resources into a document

Object SVG video

Interactive Elements (interactive content) is an element that is designed to interact with users

Label Object (if the Usemap property is set) Select TextArea Video ( if the Controls property is set)

Child elements

The "1" child element is a stream element

<article>, <section>, <blockquote>, <li>, <dd>, <figcaption>, <div>, < Main>, <td>

The "1.1" child element is a stream element, excluding the <main> element

<aside>, <nav>

The "1.2" child element is a stream element, but does not include the <table> element

<caption>

The "1.3" child element is a stream element, but does not include the <form> element

<form>

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

The "1.5" child element is a stream element, but does not include 
<dt>, <th>
The "1.6" child element is a stream element, but does not include 
<address>
The "1.7" child element is a <figcaption> element, followed by the flow element
<figure>
The "1.8" child element is a <legend> element, followed by the flow element
<filedset>
The "2" child element is a statement-type element
<code>, <var>, <samp>, <kbd>, <sub>, <sup>, <i>, <b>, <u>, <mark>, <bdi>, <bdo>, <span>, <input>, <output>, <legend>, <label>
The "2.1" child element is a statement element, but does not include elements of the same type as itself
<dfn>, <progress>, <meter>
The "2.2" child element is a statement-type element, but does not include interactive elements (interactive content)
<button>
The "3" child element is transparent (whichever child element is allowed by its parent element)
<ins>, <del>, <map>
The "3.1" child element is transparent (whichever child element is allowed by its parent element), but does not include interactive elements (interactive content)
<a>
The "3.2" child element may not, can be an <param> element, or it can be a transparent (whichever child element is allowed by its parent element)
<object>
"4" No child elements
The "4.1" child element may not, can be an <li> element, or it can be a <script>, <template> element
<ol>, <ul>
The "4.2" child elements can be either <dt> and <dd> elements, or <script>, <template> elements
<dl>
"4.3" child elements can be not, can be <option>, <optgroup>, or can be <script>, <template> elements
<select>
"4.4" child elements can be no, can be <option> or it can be <script>, <template> element
<optgroup>
"4.5" child elements can not, can be <option> elements
<datalist>
The "4.6" child element can be either a <track> element or an <source> element
<audio>, <video>
"4.7" child element can not, also can be <col>, <template> element
<colgroup>
"4.8" child elements can be no, can be <tr> or it can be <script>, <template> element
<tbody>, <thead>, <tfoot>
"4.9" child elements can be not, can be <tr>, <th>, or can be <script>, <template> elements
<tr>
The "5" sub-element is <caption>, <colgroup>, <thead>, <tfoot>, <tbody>, or it can be <script>, < Template> elements
<table>
The "6" child element is text content
<textarea>
"6.1" child elements may or may not be text content
<option>
Summarize
Detailed nesting rules for each element are described in detail in the previous section. This part mainly summarizes the nesting rules of common tags.
　　[note] Move the mouse over the text in the dark gray background, and the title will show the label that the element contains
The "1" statement-type elements
"2" 
The child element of "3" <a> is transparent (whichever child element is allowed by its parent element), but does not include interactive elements (interactive content)
"4" <form> non-nested <form>
"5" <button> child elements are statement-type elements , not nested interactive elements (interactive content)
"6" <caption> non-nested <table>
"7" <dt>, <th> non-nested chunk elements (sectioning content), heading elements ( Heading content)
 HTML5 Tag Nesting rules