HTML5 tag nesting rules (mandatory)

HTML5 tag nesting rules (mandatory)

Directory [1] category [2] child elements [3] Summary

Previous
In html5, the sub-elements of <a> elements can be block-level elements, which were previously considered to be non-compliant with the rules. 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 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
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.

<Article>, <section>, <blockquote>, <li>, <dd>, <figcaption>, <div>, <main>, and <td>
[1.1] The child element is a stream element, excluding the <main> element.

<Aside>, <nav>
[1.2] The child element is a stream element, but does not include the <table> element.

<Caption>
[1.3] The child element is a stream element, but does not include the <form> element.

<Form>
[1.4] subelements are stream elements, but do not include

<Header>, <footer>, <main>
[1.5] subelements are stream elements, but they do not include

<Dt>, <th>
[1.6] subelements are stream elements, but they do not include

<Address>
[1.7] A child element is a <figcaption> element followed by a stream element.

<Figure>
[1.8] A child element is a <legend> element followed by a stream element.

<Filedset>
 

[2] child elements are statement elements.

<H1>, [2.1] subelements are statement-type elements, but do not include the same elements as themselves.

<Dfn>, <progress>, <meter>
[2.2] A subelement is a statement-type element, but does not include an interactive content element)

<Button>
 

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

<Ins>, <del>, <map>
[3.1] The child element is transparent (subject to the child element allowed by its parent element), but does not include interactive content)

<A>
[3.2] A child element can be a <param> element or a transparent element (subject to the child element allowed by its parent element)

<Object>
 

[4] No child element

<Hr>, <br>, <wbr>, , <embed>, <param>, <source>, <track>, <area>, <col>, <keygen>
[4.1] child elements can be <li> or <script> or <template> elements.

<Ol>, <ul>
[4.2] child elements can be <dt> and <dd> elements, or <script> and <template> elements.

<Dl>
[4.3] The child element can be none, either <option>, <optgroup>, or <script> or <template>.

<Select>
[4.4] The child element can be none, either <option> or <script> or <template>.

<Optgroup>
[4.5] child elements can be none or <option> Elements

<Datalist>
[4.6] The child element can be either a <track> or a <source> element.

<Audio>, <video>
[4.7] child elements can be <col> and <template> elements.

<Colgroup>
[4.8] The child element can be <tr>, <script>, or <template>.

<Tbody>, <thead>, <tfoot>
[4.9] the sub-element can be <tr>, <th>, or <script>, or <template>.

<Tr>
 

[5] sub-elements include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody>, or <script> and <template>.

<Table>
 

[6] child elements are text content

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

<Option>
 

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] subelements of

[2]

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

[4] <form> not nested <form>

[5] <button> A subelement is a statement-type element and cannot be nested with an interactive content element)

[6] <caption> nesting not allowed <table>

[7] <dt>, <th> cannot be nested

The above HTML5 tag nesting rules are all the content shared by the editor. I hope you can give us a reference and support for more.