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