Analysis of the Nesting Rules of XHTML Tags

In the XHTML language, we all know that the ul tag contains li, the dl tag contains dt and dd - the nesting rules of these fixed tags are very clear. However, there are still many tags that are independent and not bundled together, such as h1, div, p... So what are the nesting rules of these tags? Let’s talk about this topic today.

When it comes to the nesting rules of XHTML tags, we first need to know that there are two types of XHTML tags, one is called block -level elements (block ), and the other is called inline elements (inline, also known by many people as: inline, inline, line level, etc.).

The distinction between block-level elements and inline elements is 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>

The browser rendering effect:

The two divs on the page occupy two lines of space. Unless they are floated or set in other ways, they are not next to each other. They both occupy their own line of space very aggressively. Whenever you see a tag with this phenomenon, you can call it a block element .

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

The browser rendering effect:

span1 span2

This time, the two spans are in a row, and they are friendly and harmonious with each other... We can call such tag behaviors: inline elements ;

The difference between block-level elements and inline elements:

Block-level elements are generally used to build website structure, layout, and carry content. These heavy tasks are all block-level elements, which include the following tags:

div, ul, li, dl, dt, dd, h1~h6, p, address...

Embedded elements are generally used in some details or parts of the website content to "emphasize, distinguish styles, superscripts, subscripts, anchors", etc. The following tags are all embedded elements:

a, span, strong, sub, sup, img...

Block elements and inline elements can be converted to each other . The conversion code is as follows:

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

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

· The CSS calling rules for block elements and inline elements are different (this article discusses tag nesting, so this knowledge point will not be explained in detail).

After a brief introduction to block elements and inline elements, we can now list the nesting rules of XHTML tags :

1. Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements. They 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 inside <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 inline elements and cannot contain block-level elements. These special tags are:

h1, h2, h3, h4, h5, h6, p, dt.

4. li can contain div tags - This one doesn't really need to be listed separately, but many people on the Internet are confused about it, so I'll briefly explain it here:

Both li and div tags are containers for loading content. They have equal status and no hierarchy (for example, the strict hierarchy of h1 and h2^_^). You should know that the li tag can even accommodate its parent ul or ol. Why do some people think that li cannot accommodate a div? Don't think Li is so stingy. Although Li looks thin and small, she actually has a big heart...

5. Block-level elements are placed side by side with block-level elements, and inline elements are placed side by side with inline elements:

<div><h2></h2><p></p></div> —— Yes
<div><a href=”#”></a><span></span></div> —— Yes

<div><h2></h2><span></span></div> — Wrong