We know that the new HTML specification no longer distinguishes between inline and block element types. So when we use a div tag inside an A tag, we find that the A tag cannot contain the div element by changing the CSS box model.

Element classification

In HTML5, elements fall into seven main categories:

Metadata

Flow

Sectioning

Heading

Phrasing

Embedded

Interactive

These classification sets also have certain intersection with each other (an element can belong to multiple classifications at the same time), and the intersection relationship is shown as follows:

Note that this type of element classification in HTML5 has nothing to do with inline or block. Any element can be defined as display:inline or display:block in CSS. In addition, in addition to these seven categories, there are also some smaller categories, such as script-supporting element, etc.

Metadata (Metadata element)

As the name suggests, Metadata elements are the elements that define the Metadata information in a document – influencing the presentation and behavior of other nodes in the document, defining the relationship between the document and other external resources, and so on. The following elements belong to Metadata:

base, link, meta, noscript, script, style, template, title

Flow (Flow element)

All elements that can be placed inside the body tag and make up the content of the document are Flow elements. Therefore, all elements are Flow elements except base, link, Meta, style, title, etc., which can only be placed inside the head tag.

A, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, Datalist, del, Details, DFN, div, DL, em, Embed, fieldset, figure, footer, form, H1, H2, H3, H4, H5, H6, Header, hGroup, Hr, I, IFrame, IMG, input, INS, KBD, keygen, Label, map, mark, math, Menu, meter, nav, Noscript, object, OL, Output, P, Pre, Progress, Q, Ruby, S, SAMp, script, section, Select, Small, SPAN, strong, style (if the element is set to scoped), sub, sup, SVG, Table, textarea, time, u, ul, var, video, WBR, text

Sectioning (chapter elements)

Sectioning means the elements defining the page structure, specifically including the following four:

article, aside, nav, section

Heading (Heading element)

All Heading elements belong to Heading, which consists of the following six elements:

h1, h2, h3, h4, h5, h6

Phrasing

All the elements that can be placed in the P tag and constitute the content of the paragraph are Phrasing elements. Therefore, all Phrasing elements are Flow elements.

For this definition, I personally think that the word “text”, which is easy to cause misunderstanding, should not be used. In fact, even if an element is not text, as long as it can be included in the P tag and become part of the paragraph content, it can be called Phrasing element.

A (if it contains only paragraph elements), abbr, area, audio, B, bdi, bdo, br, Button, canvas, cite, code, Command, datalist, del (if it contains only paragraph elements), DFN, EM, Embed, I, IFrame, IMG, INPUT, INS (if it contains only paragraph elements), KBD, KeyGen, Label, Map (if it contains only paragraph elements), Mark, Math, meter, Noscript, object, Output, Progress, Q, Ruby, S, SAMp, script, Select, small, span, strong, sub, sup, SVG, textarea, Time, u, var, video, WBR, text

A less precise analogy is that the Phrasing element in HTML5 is roughly the inline element defined in HTML4.

Phrasing elements generally contain only other Phrasing elements.

Embedded elements

All elements used to embed external resources in web pages are Embedded elements, including the following 9:

audio, video, img, canvas, svg, iframe, embed, object, math

Interactive elements

All elements related to user interaction are Interactive elements.

A, Audio (if controls is set), Button, Details, Embed, IFrame, img (if USEMAP is set), INPUT (if Type is not hidden), keyGen, label, Menu (if Type property is toolbar state), Object (if USEMAP property is set), Select, Textarea, Video (if Controls property is set)

Palpable

All elements that should have child elements are called Palpable elements. For example, br elements are not Palpable because they do not need child elements.

Script-supporting

Does not do any page display itself, but related to the page script elements, specifically including two:

script, template

Content Model

Based on the above classification of elements, the HTML5 standard document defines the content model for any element — what subelements are legal for that element.

For example, for p elements, the content model is Phrasing, which means that p elements only accept Phrasing elements as child elements, but not for non-phrasing elements like divs. Similarly, the content model of the Li element is Flow, so any element that can be placed in the body can be a child of the Li element.

It’s worth noting that the HTML5 standard document uses a special category when defining the content model of an element: Transparent — For elements whose content model is transparent, the legitimacy of their child is determined by their parent; If the parent element’s content model is still transparent, look at its parent element, and so on; If extrapolating up to the body tag does not find any non-transparent parent element of the content model, the transparent element can contain any Flow element inside it.

Properly nest labels

The rules for element nesting are closely related to the DTD for page header declarations. By understanding HTML5’s element classification and content model, we can guide our element nesting more clearly. Although most browsers are somewhere to fault mechanism, write the code in browsers show no difference, but as a professional developer, we must treat our code should be conscientious and meticulous, even if the front of it is very wide, but we should to comply with the W3C, because only the standard robust code, just can have better extension and compatibility.

conclusion

Therefore, whether a tag can contain a div tag depends on the content Model of its parent element and the categories of its content. For example, if p > INS > A > div is legal, the process is like this: the content model of P element is phrasing content, and INS itself is phrasing content, so it can be nested; The content Model of INS element is transparent, so whether there can be a in it needs to check the legitimacy of P > A; A element is also phrasing content, so P > INS > A is legal; The content model of a element is also transparent, so the validity of div is passed up, and the check of INS > div is passed up again. Div is not a phrasing content, so this nesting is illegal.