Nested rule analysis of XHTML Tags

Time:2021-8-7

In the XHTML language, we all know that the UL tag contains Li and DL, and the tag contains DT and DD — the nesting rules of these fixed tags are very clear. However, there are many tags that are independent and not tied together, such as H1, div, P… What are the nesting rules of these tags? Let’s talk about this topic today.

Referring to the nesting rules of XHTML tags, we must first know that there are two kinds of XHTML tags, one is calledBlock level element(block), a class calledembedded content (inline is also called by many people: inline, inline, line level, etc.).

Block level elements and embedded elementsDivision criteriaVery simple. Please put the following two lines of code into the body tag:

<div style=”border: 1px solid red;”>div1</div>
<div style=”border: 1px solid red;”>div2</div>

Browser rendering:

div1
div2

 

The two divs presented on the page occupy two lines of space. Unless they are floated or otherwise set, no one is next to each other. They are domineering and occupy their own line of space – whenever you see this phenomenon on a label, you can call it:Block level element (block)

Put the following two lines of code into the body tag:

<span style=”border: 1px solid red;”>span1</span>
<span style=”border: 1px solid red;”>span2</span>

Browser rendering:

 span1 span2

This time, the two spans are in a row side by side. They are good neighbors, friendly and harmonious… Such labeling behaviors can be called:Inline element;

 

Differences between block level elements and embedded elements:

·Block level elementIt is generally used to build website architecture, layout and load content… These large manual tasks belong to block level elements, including the following tags:

div、ul、li、dl、dt、dd、h1~h6、p、address……

·Embedded elementIt is generally used in some details or parts of website content to “emphasize, distinguish styles, superscript, subscript, anchor”, etc. the following tags are embedded elements:

a、span、strong、subsup、img……

·Block elements and embedded elementsYesMutual conversion, the converted code is as follows:

display: block; /* Convert to block element*/

display: inline; /* Convert to inline element*/

·Block elements and embedded elementsFor CSSCall ruleIs different (this article discusses tag nesting, so this knowledge point is not explained).

 

After a brief understanding of block elements and embedded elements, you can list them belowNesting rules for XHTML TagsThe following:

1. A block element can contain inline elements or some block elements, but an inline element cannot contain block elements. It can only contain other inline elements

< div > < H1 > < / H1 > < p > < / P > < / div > — yes
< a href = “#” > < span > < / span > < / a > — yes
<span>< div > < / div > < / span > — wrong

2. Block level elements cannot be placed in < p >

<p>< ol > < li > < / Li > < / OL > < / P > — wrong

<p>< div > < / div > < / P > — wrong

3. There are several special block level elements that can only contain embedded elements and can no longer contain block level elements. These special labels are:

h1、h2、h3、h4、h5、h6、p、dt。

4. Div tags can be included in Li——   In fact, this article does not need to be listed separately, but many people on the Internet have some doubts about it, so they will explain it here:

Both Li and div tags are containers for content, with equal status and no hierarchy (for example, H1 and H2), You know, the Li tag can accommodate even its parent UL or ol. Why does anyone think that Li can’t accommodate the next div? Don’t look at Li so stingy. Although Li looks very thin, in fact, Li has a big mind

5. Block level elements are juxtaposed with block level elements, and embedded elements are juxtaposed with embedded elements:

< div > < H2 > < / H2 > < p > < / P > < / div > — yes
< div > < a href = “#” > < / a > < span > < / span > < / div > — yes

< div > < H2 > < / H2 > < span > < / span > < / div > — wrong