Wonderful HTML nesting rules and wonderful HTML nesting rules

Wonderful HTML nesting rules and wonderful HTML nesting rules

1. Block-level elements

It is generally used to build the website architecture, layout, and carry content ...... 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

2. Embedded Elements

Generally, some details or parts of the website content are used to "emphasize, differentiate style, superscript, subscript, and anchor". The following labels 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

 

Ii. nesting rules of HTML tags

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>

<A href = "#"> <span> </a> --

<Span> <div> </span> -- Error

 

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

<P> <ol> <li> </ol> </p> -- Error

<P> <div> </p> -- Error

 

3. There are several special block-level elements that can only contain embedded elements, but cannot contain block-level elements. These special labels are:

H1, h2, h3, h4, h5, h6, p, dt

 

4. li can contain div labels-this one does not need to be listed separately, but many people on the Internet have some doubts about this, so I will add a description here:

Both li and div labels are content-loaded containers with equal status and no levels (for example, a strict hierarchical system like h1 and h2, the li tag can even accommodate its parent ul or ol. Why do people think li cannot accommodate the next div? Don't look at li so stingy. Don't look at li very thin. In fact, li's mind is very big ......

 

5. Parallel Block-level elements and block-level elements, parallel embedded elements and embedded elements:

<Div>

<Div> <a href = "#"> </a> <span> </div> --

<Div>

 

Figure: