Why is the div tag not included in the P tag in HTML?

Cause: When doing the project found that the original in the DW error code in the MyEclipse6.0 inside but prompted n many errors, is very surprised. So the reason, found that block-level element p is not nested div.

Bottom-up: Let's first recognize In-line inline elements and Block-line block elements because almost all of the elements in the HTML are part of an inline element or a block element.

There are many interpretations of the word in-line: inline, inline, inline, line level, and so on, but they all mean the same thing, and here we choose the term of the habit-inline.

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>

Effects such as:

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? I know you have this question, and you know that I just make a list and you don't remember them very well. We 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 fact, in the inline element, or can be distinguished, there are several elements (, <input>, etc.) are more special, they can define the width of the high. Although in the Internet Explorer, all the elements can be defined wide, but this is IE's own standard, not all browsers are supported, they are called replaced elements, I also can not find a suitable translation of words, they belong to In-line also have some characteristics of block-line , in the "Desplay:inline-block application" in the Inline-block is actually to let other elements also simulate replaced elements, you do not need to know too much, wait until later to learn it.

This article originates from: http://blog.csdn.net/w6611415/article/details/7560200

Why is the div tag not included in the P tag in HTML?