Why is the div tag not included in the P tag in HTML? What block elements cannot be placed in the block elements?

Take a look at the following example and you can see the difference between the two:

<p> test the difference between the block element and the <span> inline element </span> </p>

<p> test the difference between <div> block element </div> and inline elements </p>

In the example above,,<div> will generate a new line itself, and <span> does not wrap, this is in the absence of CSS rendering, this is the case, we can also use CSS to define the div as an inline element, the span is defined as a block element, but, We can't convert them in HTML, the block elements can contain inline elements or some block elements (the example above is actually wrong to use---> I put <div> in <p>), but inline elements cannot contain block elements, It can only contain other inline elements, and then look at this:

Where

<a href= "#" >

In other cases, some block elements may not contain other block elements. For example, this:

<p> Test text

<ul>

<li> can not use this at this stage, until XHTML 2.0 is used. </li>

</ul>

Test text

</p>

And this is possible.

<ul>

<li><p> This is possible </p></li>

</ul>

Why is it? Because the DTD we use specifies that block-level elements cannot be placed in <p>, plus some browsers condone this:

<p> This is the beginning of a paragraph

<p> This is the beginning of another paragraph

When a <p> sign is not over, the next block element will end itself, but the browser handles it like this:

<p> This is the beginning of a paragraph </p>

<p> This is the beginning of another paragraph </p>

So that's how it goes:

<p> Test Text </p>

<ul>

<li> can not use this at this stage, until XHTML 2.0 is used. </li>

</ul>

Test text <p></p>

This is also the same as the first example of the <p> inside the <div> unreasonable is the same reason.

What elements do not fit in the block elements?

You can first divide all the block elements into a few levels again, we already know that

Why is the second-level element free to nest?

We can think of them as containers (or boxes) where the size of these containers can change freely, for example, we can embed <ul> in <div>, or we can embed <div> inside <li>.

In the HTML there are several elements that are more special:<ul>, <ol>, <dl>, <table>, and their sub-layer must be the specified element,<ul>, <ol> sub-level must be The sub-level of <li>;<dl> must be a sub-layer of <dt> or <dd>;<table> must be <caption> or <thead>, <tfoot >, <tbody> and so on, and then sub-layer must be <tr> (<tr> exist only in <thead>, <tfoot>, <tbody>), then the content of the < Td> or <th>.

A lot of people in the big-ticket verification can not pass the same reason-and the wrong element nesting, however, the wrong label to <div> or <span> to pass, but we can't so blindly check to verify the,<div> is not God ,<div> is not a substitute for semantic tagging.

Here is a diagram of the nested rules under (X) HTML Strict, which you can refer to:

In inline elements, you can still distinguish between several elements (, <input>, and so on) that are more specific and can define a wide height. Although in IE, all the elements can be defined wide, but this is IE's own standard, not all browsers are supported, they are called the replacement elements, they are in the case of the same block of inline, with some features, in the "Display: Inline-block application "In the Inline-block is actually to let other elements are also simulated as replaced elements, so that they can both display inline elements, but also set the properties of block-level elements.

Why is the div tag not included in the P tag in HTML? What block elements cannot be placed in the block elements?