Nesting rules for html tags

HTML has many 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 use them infinitely. Nested, however, 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

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

address, blockquote, center, dir, div, 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 "emphasize, distinguish styles, superscripts, subscripts, anchor points", etc. The following tags are all embedded 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

　　II. 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 element:

　

—— Right

　< ;span> —— True

　;p>Inside:

　

—— Wrong

　div > h3, h4, h5, h6, p, dt

　　4. li can contain div tags - This item does not need to be listed separately, but many people on the Internet are confused about it, so I will briefly explain it here:

The 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 can even be its parent ul or ol. It can be accommodated. Why do some people think that li cannot accommodate a div? Don't think that li is so stingy. Don't think that 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:

—— Yes

　; —— Right

　

—— Wrong