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

,

,

,

, < dd>,

,

,

,

[1.1] Child elements are flow elements, excluding the

element

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

element

,
[4.1] Child elements may not have any, may be

elements, or may be

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7595

15

CakePHP Tutorial

1386

52

What is the format of the account name of steam

88

11

win11 activation key permanent

66

19

nyt connections hints and answers

28

123

Show More

Related knowledge

Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved

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

,

,

[1.7] The child element is a

element, followed by the flow element

　【1.8】The child element is a

element, followed by the flow element

【 2] The child element is a statement element

,

,

,

,

,

,

,

, , < strong>, , , , , , , , , , < samp>, , , , , , , , , , < span>, , 
, 
, 
 [2.1] Child elements are statement elements, but do not include elements that are the same as themselves

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

 

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

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