How should html tags be nested?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How should html tags be nested?

php中世界最好的语言

Jan 25, 2018 am 11:22 AM

html Nested how

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

Copy after login

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

Copy after login

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> —— 错

Copy after login

2. Block-level elements cannot be placed inside

：

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

Copy after login

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

Copy after login

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> —— 错

Copy after login

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!