How should html tags be nested?

This time I will show you how to nest html tags. What are the precautions for nesting html tags? The following is a practical case, let’s take a look.

XHTML has many tags: p, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong... When we use these tags to build the page structure, They can be nested infinitely, but nesting also requires certain rules. You cannot allow your own personal habits to be nested randomly. So, what are the nesting rules for the

html tag?

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

1. Block-level elements

are generally used to build website structures

, layout, content... It includes the following tags:

address、blockquote、center、dir、p、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

2. Inline elements

Generally used in certain details or parts of website content to "Emphasis, distinguishing style, superscript, subscript,

anchor point" and so on. The following tags are all inline 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

2. Nesting rules of HTML tags

1. Block elements can contain

inline elements or certain block elements, but inline elements cannot contain block elements. It can only contain other inline elements. ：

　<p><h1></h1><p></p></p> —— 对</p>< p>　　<a href=”#”><span></span></a> —— 对</p>< p>　　<span><p></p></span> —— 错

2. Block-level elements cannot be placed inside

：

<p><ol><li></li></ol></p> —— 错</p>< p>　　<p><p></p></p> —— 错

3. There are several special block-level elements that can only contain inline elements and cannot Then include block-level elements, these special tags are:

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

4. li can contain p tags - this item does not need to be listed separately, but many people on the Internet have some concerns about this If you are confused, let me briefly explain it here:

The li and p tags are both containers for loading content. They have equal status and there is no distinction between levels (for example: strict hierarchies such as h1 and h2^_^). You know, the li tag can even accommodate its parent ul or ol. Why do some people think that li cannot accommodate a p? Don't think that li is so stingy. Although li looks quite thin, in fact li has a big heart...

5. Block-level elements are juxtaposed with block-level elements, and inline elements are with inline elements. Juxtaposition:

    　　<p><h2></h2><p></p></p> —— 对</p>< p>　　<p><a href=”#”></a><span></span></p> —— 对</p>< p>　　<p><h2></h2><span></span></p> —— 错

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use HTML and CSS to make clear text

How to write flexible, stable, high-quality HTML and css code

How to use title tags and paragraph tags in XHTML

The above is the detailed content of How should html tags be nested?. For more information, please follow other related articles on the PHP Chinese website!