Wonderful HTML nesting rules and wonderful HTML nesting rules

Source: Internet
Author: User

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:

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.