A detailed summary of HTML tag nesting rules suitable for beginners

I have been relearning HTML recently, which can be regarded as a new understanding of HTML! Don't underestimate this thing, all web pages are based on it! Let’s summarize the nesting rules of HTML tags in detail below. I hope it will be helpful to everyone.

XHTML 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 nest them infinitely. However, nesting also requires certain rules, and we cannot allow our personal habits to nest them randomly - after all, XHTML is not XML.

In the XHTML language, we all know that the ul tag contains li, the dl tag contains dt and dd - the nesting rules of these fixed tags are very clear. However, there are still many tags that are independent and not bundled together, such as h1, div, p... So what are the nesting rules of these tags? Let’s talk about this topic today.

When it comes to the nesting rules of XHTML tags, we first need to know that there are two types of XHTML tags:
One is called block-level elements
One type is called inline elements (inline, also called by many people: inline, inline, line level, etc.)

The distinction between block-level elements and inline elements is simple. Please put the following two lines of code into the body tag:

Copy code

The code is as follows:

The browser rendering effect:
div1
div2

The two divs on the page occupy two lines of space. Unless they are floated or set in other ways, they are not next to each other. They both occupy their own line of space very aggressively. Whenever you see a tag with this phenomenon, you can call it a block element.

Then put the following two lines of code into the body tag:

Copy code

The code is as follows:

The browser rendering effect:
span1 span2

This time, the two spans are in a row, and they are friendly and harmonious with each other... We can call such tag behaviors: inline elements;

The difference between block-level elements and inline elements:

Block-level elements are generally used to build website architecture, layout, and carry content. These heavy tasks are all block-level elements, which include 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

Embedded elements are generally used in some details or parts of the website content to "emphasize, distinguish styles, superscripts, subscripts, anchors", 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

Block elements and inline elements can be converted to each other. The conversion code is as follows:
display: block; /* Convert to block element*/
display: inline; /* Convert to inline element*/

· The CSS calling rules for block elements and inline elements are different (this article discusses tag nesting, so this knowledge point will not be explained in detail).

After a brief introduction to block elements and inline elements, we can now list the nesting rules of XHTML tags:

1. Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements. They can only contain other inline elements:
<div><h1></h1><p></p></div> —— Yes
<a href=”#”><span></span></a> —— Yes
<span><div></div></span> — Wrong

2. Block-level elements cannot be placed inside <p>:
<p><ol><li></li></ol></p> —— Wrong
<p><div></div></p> — Wrong

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 one doesn't really need to be listed separately, but many people on the Internet are confused about it, so I'll briefly explain it here:

Both li and div tags are containers for loading content. They have equal status and no hierarchy (for example, the strict hierarchy of h1 and h2^_^). You should know that the li tag can even accommodate its parent ul or ol. Why do some people think that li cannot accommodate a div? Don't think Li is so stingy. Although Li looks thin and small, she actually has a big heart...

5. Block-level elements are placed side by side with block-level elements, and inline elements are placed side by side with inline elements:
<div><h2></h2><p></p></div> —— Yes
<div><a href=”#”></a><span></span></div> —— Yes
<div><h2></h2><span></span></div> — Wrong

<<: Detailed explanation of commonly used CSS styles (layout)

>>: Vue basics MVVM, template syntax and data binding