简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

Parsing tag nesting rules in HTML5

零下一度
Release： 2017-05-25 13:50:01
Original
2676 people have browsed it

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
Copy after login

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
Copy after login

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
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

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

    elements

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

    ,
    ,
    elements

    ,
    ,

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

    ,
    , sectioning content, Heading content (heading content)

    ,

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