Introduction to nesting rules of html tags_HTML/Xhtml_Web page production

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

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

1. Block-level elements

is generally used to build website architecture, layout, and carry 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

Generally used in certain details or parts of website content to "emphasize, distinguish styles, superscripts, subscripts, anchor points", etc. The following tags are all 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

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:

Copy code

The code is as follows:

　

—— for

　 —— Yes

　

—— Wrong

2. Block-level elements cannot be placed inside

:

Copy code

The code is as follows:

　

—— Wrong

　

—— Wrong

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

Copy the code

The code is as follows:

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

4. li can contain div tags - this one does not need to be listed separately. But many people on the Internet are a little confused about this, so here is a brief explanation:

li and div 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 must know that the li tag is connected to its parent ul or ol can be accommodated. Why do some people think that li cannot accommodate a div? Don’t think li is so stingy. Don’t think li is quite thin. In fact, li has a big heart...

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

Copy code

The code is as follows:

　

—— Yes

　

—— Yes

　

—— Wrong

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn