Introduction to nested rules of html tags _ HTML/Xhtml _ webpage Creation

Source: Internet
Author: User
This article mainly introduces the nested rules of html tags. This article describes block-level elements, embedded elements, and nested rules of HTML tags, for more information about XHTML tags, see p, ul, li, dl, dt, dd, and h1 ~ H6, p, a, addressa, span, strong ...... When we use these tags to build the Page Structure, We Can infinitely nest them. However, nesting also requires certain rules and cannot let our individual habits be nested randomly, what are the nested rules of html tags?


I. HTML tags include block and inline elements)

1. Block-level elements

It is generally used to build the website architecture, layout, and carry content ...... It includes the following tags:

The Code is as follows:


Address, blockquote, center, dir, p, 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:

The Code is as follows:


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:

The Code is as follows:


  

-- Pair

-- Pair

  

-- Error


2. Block-level elements cannot be placed

Inside:

The Code is as follows:


  

-- Error

  

-- 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:

The Code is as follows:


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


4. li can contain the p tag-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 the li and p 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 that li cannot accommodate the next p? 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:

The Code is as follows:


  

-- Pair

  

-- Pair

  

-- Error
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.