Understand in depth what are the rules for element nesting in HTML?

This article will give you an in-depth understanding of the rules for HTML element nesting. The following editor will describe it for you

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

2. Nesting rules of HTML tags

1. Block elements can contain inline elements or certain block elements, but inline Elements cannot contain block elements, they can only contain other inline elements:

—— Right

　 —— Right

　2. Block-level elements cannot be placed inside

:

　3. There are several special block-level elements that can only contain inline elements and cannot contain block-level elements. These special tags are:

h1, h2, 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 this, 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 is connected to its parent ul or ol All can be accommodated.

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