XHTML nesting Rules

There are many XHTML tags: div, ul, Li, DL, DT, DD, H1~H6, p, a, Addressa, span, strong ... When we use these tags to build the page structure, it is possible to embed them infinitely, but, nested also need to have a certain rule, not allowed by their own personal habits random nesting--xhtml must be not XML.

in the XHTML language, we all know: The UL tag contains Li, DL tags contain the fixed tags such as dt and dd--the nesting rules are very clear. However, there are many tags that are independent, and they are not bundled together, such as H1, Div, p ... So what are the nesting rules for these tags? Talk about this topic today.

referring to the nesting rules for XHTML tags, let's first know that there are two types of XHTML tags:
A class called Block-level elements (blocks)
One class is called inline elements (inline, and many people call it: inline, inline, line level, etc.)

the partitioning criteria for 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 rendering effect of the browser:
Div1
Div2

The page rendered two Div occupies two lines of space, unless they float (float) or other settings, or else who is not next to each other, they are very overbearing occupy their own line of space--whenever you see a tag has this phenomenon, you can call it: block-level elements (blocks);

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 rendering effect of the browser:
span1 span2

this time, two spans are tied together in one line, and they are good-neighborly, friendly and harmonious ... Tag behavior like this, we can call them: inline elements (inline);

the difference between a block-level element and an inline element:

• Block-level elements are commonly used to build Web site architecture, layout, hosting content ... Like these big physical activities belong to block-level elements, it includes the following tags:

Address, blockquote, center, dir, Div, DL, DT, DD, fieldset, form, H1~h6, HR, Isindex, menu, Noframes, NoScript, OL, p, pre, Table, UL

· Embedded elements are generally used in the site content of some of the details or parts, to "emphasize, distinguish style, superscript, subscript, anchor" and so on, these tags are embedded elements:

A, ABBR, acronym, B, BDO, big, BR, cite, code, DFN, EM, font, I, IMG, input, KBD, label, Q, S, Samp, select, small, span, strike, Strong, Sub, SUP, textarea, TT, U, var

• Block elements and inline elements can be converted to each other, and the code for conversion is as follows:
Display:block;/* turn into block element * /
display:inline;/* turn into inline elements * /

• Block elements and inline elements are not the same for CSS calling rules (this article discusses tag nesting, so this knowledge point does not unfold).

after a simple understanding of block elements and inline elements, the following can be used to list the nested rules for XHTML tags:

1. Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements, which can contain only other inline elements:
<div>
<a href= "#" ><span></span></a>--to
<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 contain only inline elements and no longer contain block-level elements, which are the following special tags:
H1, H2, H3, H4, H5, H6, p, DT

4. Li can contain div tags-this one is not necessarily listed separately, but many people on the internet have some doubts about it, here slightly explain:

Li and div tags are loaded contents of the container, equal status, no level of points (for example: H1, H2 such a hierarchical system ^_^), you know, Li Tag even its parent UL or OL can be accommodated, why would someone think that Li will not fit a div? Do not see Li so stingy, don't look at Li is very thin, in fact, Li's mind is very big drop ...

5. Block-level elements are tied to block-level elements, inline elements and inline elements:
<div>
<div><a href= "#" ></a><span></span></div>--to
<div>