Introduction of nesting rules for HTML tags

Time:2019-10-9

XHTML has many tags: div, ul, li, dl, dt, dd, h1-h6, p, a, addressa, span, strong… When we use these tags to build page structure, we can nest them indefinitely. However, nesting also needs some rules. We can’t let our personal habits nest randomly. So, what are the nesting rules of HTML tags?

1. HTML tags include block-level elements and inline elements.

1. Block-level elements

Usually used to build website architecture, layout, carrying content… It includes the following tags:

Copy code

The code is as follows:

  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

Usually used in some details or parts of website content to “emphasize, distinguish styles, superscripts, subscripts, anchors” and so on, the following tags are embedded elements:

Copy code

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

Nested rules for HTML Tags

1. Block elements can contain inline elements or some block elements, but inline elements can not contain block elements, it can only contain other inline elements:

Copy code

The code is as follows:

< div > < H1 > < / H1 > < p > < / P > < / div > – Yes</p>

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

Copy code

The code is as follows:

<p> < ol > < li > < / Li > < / OL > < / P > Wrong</p>

3. There are several special block-level elements that can only contain embedded elements and can no longer contain block-level elements. These special tags are:

Copy code

The code is as follows:

  h1、h2、h3、h4、h5、h6、p、dt

4. Li can contain div Tags – this one doesn’t need to be listed separately, but many people on the Internet have some doubts about it. Here’s a brief explanation:

Li and div tags are containers for loading content, with equal status and no hierarchy (e.g. strict hierarchy such as H1 and h2). You should know that the Li tag can accommodate even its parent UL or ol. Why do some people think that Li can not accommodate a div? Don’t look at 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 juxtaposed with block-level elements, and embedded elements are juxtaposed with embedded elements:

Copy code

The code is as follows:

< div > < H2 > < / H2 > < p > < / P > < / div > – Yes</p>

Recommended Today

Detailed usage of HTML tags

HTML <span>tags <span>Used to combine inline elements in a document. <span>Tags do not have a fixed format representation. When you style it, it changes visually. If you don’t<span>Apply styles, so<span>The text in the element is not visually different from any other text. <span>Tags provide a way to separate part of the text or part of […]