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 3499910bf9dac5ae3c52d5ede7383485 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

23c3de37f2f9ebcb477c4a90aac6fffd, 2f8332c8dcfd5c7dec030a070bf652c3, b8a712a75cab9a5aded02f74998372b4, 25edfb22a4f469ecb59f1190150159c6, 152436f649dfcc2350c70c7083a3231e, 614eb9dc63b3fb809437a716aa228d24, dc6dce4a544fdca2df29d5ac0ea9906b, 61b85035edf2b42260fdb5632dc5728a, b6c5a531a458a2e790c1fd6421739d1c

[1.1] Child elements are flow elements, excluding the 61b85035edf2b42260fdb5632dc5728a element

1a0f6534ed38fc92d8ad290996b1e44f

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

63bd76834ec05ac1f4c0ebbeaafb0994

　【1.3】The child element is a flow element, but does not Including ff9c23ada1bcecdd1a0fb5d5a0f18437 elements

ff9c23ada1bcecdd1a0fb5d5a0f18437

[1.4] Child elements are flow elements, but do not include 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, 61b85035edf2b42260fdb5632dc5728a elements

1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, 61b85035edf2b42260fdb5632dc5728a

[1.5] Child elements are flow elements, but do not include 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, sectioning content, Heading content (heading content)

73de882deff7a050a357292d0a1fca94, b4d429308760b6c2d20d6300079ed38e

[1.6] Child elements are flow elements, but do not include 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, 9b40d3634f7841ea77374f8b9fa0c8e9

[1.7] The child element is a 614eb9dc63b3fb809437a716aa228d24 element, followed by the flow element

24203f2f45e6606542ba09fd2181843a

　【1.8】The child element is a e911751791aa3ba95dc724e2fb905976 element, followed by the flow element

3a40a4e7c73d4afbf61ba6910bd6f73f

【 2] The child element is a statement element

4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da, 684271ed9684bde649abda8831d4d355, 3f7b3decd2dcafb07b84d2d3985d9f40, 39318b6f72ed39310530dfd69d0078e1, 4e9ee319e0fa4abc21ff286eeb145ecc, e388a4556c0f65e1904146cc1a846bee, e03b848252eb9375d56be284e690e873, 907fae80ddef53131f3292ee4f81644b, 6617fd2188b7c67cf3783468f5ec15ff, d015d241ae6d34c34210679b5204fe85, 2e44d2d3284d23d932e1fd85f3d4cf3a, f3a85e1241a187c5ac462d886e9a968b, 1244aa79a84dea840d8e55c52dc97869, 8a7974376be5f6c00c121222b727adb9, 1d029f6197b5a3eb8a3fdf0a088ddf55, 46dd80ba616c57a652514755c74c4211, ffbe95d20f3893062224282accb13e8f, b7f90f73cad438258bf67e62f79b2113, 0bf371feb11b3435a89b2a675f897085, 5e4e803d53d659f332070b5d4aa430db, b96cac025db4031319c29e1eb68f19d6, 2cdea26b4c3988e37d674b56660962a7, 5a8028ccc7a7e27417bff9f05adf5932, a4b561c25d9afb9ac8dc4d70affff419, 88f336217b3880082bb52d49b5de60a5, f920514e6447cf1d171079d1371f007f, af4e6c3c591431c4583becd75d1c3582, 71af07a0e88a1ac1ff73f855702ac153, 427924e0bc1c500e0479e017d951eadf, d5fd7aea971a85678ba271703566ebfd, be6d67dae90cc1ad6469079e163d0939, e911751791aa3ba95dc724e2fb905976, 2e1cf0710519d5598b1f0f14c36ba674
[2.1] Child elements are statement elements, but do not include elements that are the same as themselves

< ;dfn>, 6ecb87e5318a36c03c59e25d55f43372, 49c6123c49c6be380cb91db06cd3bfa9
[2.2] Child elements are statement elements, but do not include interactive elements (interactive content)

bb9345e55eb71822850ff156dfde57c8

【3】The child element is transparent (subject to the child elements allowed by its parent element)

426be984ffbbb815d7d88e3543a85d91, 823db3943044a0a9a620ada8d4b1d965, dab9f699790ab0922e596ecb9f6677d5
　[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)

3499910bf9dac5ae3c52d5ede7383485
　【3.2】Child elements can have no, It can be a 0c68fef83818661b6da588c77ca3985e element, or it can be transparent (subject to the child elements allowed by its parent element)

273238ce9338fbb04bee6997e5552b95

【4】No child elements

f32b48428a809b51f04d3228cdf461fa, 0c6dc11e160d3b678d68754cc175188a, 37fcc81822f151c26d66e5caf9953670, a1f02c36ba31691bcfe87b2722de723b, d8e2720730be5ddc9c2a3782839e8eb6, 0c68fef83818661b6da588c77ca3985e, e02da388656c3265154666b7c71a8ddc, 9bf7cbf2c39baa37076a22499de2f6ed, 03fc64e1e502d5ba947b3a9af06d2d2a , 581cdb59a307ca5d1e365becba940e05, aa983b9eb8086376f1f6481364a02e5a
[4.1] Child elements may not have any, may be 25edfb22a4f469ecb59f1190150159c6 elements, or may be 3f1c4e4b6b16bbbd69b2ee476dc4f83a, d477f9ce7bf77f53fbcf36bec1b69b7a elements

09471ad0eb7abf3904b81228b087d334, ff6d136ddc5fdfeffaf53ff6ee95f185
[4.2] Child elements may not have any, may be 73de882deff7a050a357292d0a1fca94 and 67bc4f89d416b0b8236eaa5f43dee742 elements, or may be 3f1c4e4b6b16bbbd69b2ee476dc4f83a, d477f9ce7bf77f53fbcf36bec1b69b7a elements

5c69336ffbc20d23018e48b396cdd57a
　【4.3】The child element does not need to be present, it can be 5a07473c87748fb1bf73f23d45547ab8, 5b7a15bed8615d1b843806256bebea72, or it can be 3f1c4e4b6b16bbbd69b2ee476dc4f83a, d477f9ce7bf77f53fbcf36bec1b69b7a element

221f08282418e2996498697df914ce4e
　【4.4】Child elements do not need to be present, they can be 5a07473c87748fb1bf73f23d45547ab8, or they can be 3f1c4e4b6b16bbbd69b2ee476dc4f83a, d477f9ce7bf77f53fbcf36bec1b69b7a elements

5b7a15bed8615d1b843806256bebea72
　【4.5】Child elements can None, it can be an 5a07473c87748fb1bf73f23d45547ab8 element

fc86e7b705049fc9d4fccc89a2e80ee3
[4.6] The child element can be none, it can be a 9bf7cbf2c39baa37076a22499de2f6ed element, it can also be a e02da388656c3265154666b7c71a8ddc element

[ 4.8] There may be no child elements, and they may be a34de1251f0d9fe1e645927f19a896e8, or they may be 3f1c4e4b6b16bbbd69b2ee476dc4f83a, d477f9ce7bf77f53fbcf36bec1b69b7a elements

92cee25da80fac49f6fb6eec5fd2c22a, ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845

[4.9] There may be no child elements, they may be a34de1251f0d9fe1e645927f19a896e8, b4d429308760b6c2d20d6300079ed38e, or they may be 3f1c4e4b6b16bbbd69b2ee476dc4f83a, d477f9ce7bf77f53fbcf36bec1b69b7a elements

a34de1251f0d9fe1e645927f19a896e8

【5】The child elements are 63bd76834ec05ac1f4c0ebbeaafb0994, 879b49175114808d868f5fe5e24c4e0b, ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845, 92cee25da80fac49f6fb6eec5fd2c22a, or they can be 3f1c4e4b6b16bbbd69b2ee476dc4f83a, d477f9ce7bf77f53fbcf36bec1b69b7a elements

f5d188ed2c074f8b944552db028f98a1

【6】The sub-element is text content

4750256ae76b6b9d804861d8f69e79d3
【6.1】The sub-element may not be present, or it may be text content

5a07473c87748fb1bf73f23d45547ab8

Summary

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 [Note] Move the mouse over the text with a dark gray background, and the title will display the tags contained in the element
[1] The child elements of 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da, 684271ed9684bde649abda8831d4d355, 3f7b3decd2dcafb07b84d2d3985d9f40, 39318b6f72ed39310530dfd69d0078e1, 4e9ee319e0fa4abc21ff286eeb145ecc, e388a4556c0f65e1904146cc1a846bee are statement elements

[2] 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d cannot be nested1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d

【3】The child elements of 3499910bf9dac5ae3c52d5ede7383485 are transparent (the child elements allowed by its parent element are accurate), but does not include interactive content

【4】ff9c23ada1bcecdd1a0fb5d5a0f18437 cannot be nestedff9c23ada1bcecdd1a0fb5d5a0f18437

【5】bb9345e55eb71822850ff156dfde57c8The child element is a statement Type elements, interactive content cannot be nested

【6】63bd76834ec05ac1f4c0ebbeaafb0994Cannot be nestedf5d188ed2c074f8b944552db028f98a1

【7】73de882deff7a050a357292d0a1fca94, b4d429308760b6c2d20d6300079ed38e cannot nest 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, sectioning content, and heading content

[Related recommendations]

1. Free h5 online video tutorial

2. HTML5 full version manual

3. HTML5 Video tag detailed explanation

4. HTML5 does not support tags and detailed explanation of new tags

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!