Detailed rules for HTML tag nesting

This time I will bring you the detailed rules of HTML tag nesting, what are the precautions for nesting HTML tags, the following is a practical case, let’s take a look.

Recently I am re-learning the knowledge of HTML, 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. I hope it will be helpful to everyone.

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, They can be nested infinitely, but nesting also needs to have certain rules, and you cannot allow your own personal habits to be nested randomly - XHTML is not XML after all.

In the language of XHTML, we all know: ul tag contains li, dl tag contains dt and dd - the nesting rules of these fixed tags are very clear. However, there are many independent tags that are 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 must first know that there are two types of XHTML tags:
One type is called block-level elements (block)
The other type is called inline elements (inline, Many people also call it: inline, inline, line level, etc.)

The standard for dividing block-level elements and inline elements is very simple. Please put the following two lines of code into the body tag:

The code is as follows:

<div style=”border: 1px solid red;”>div1</div> 
<div style=”border: 1px solid red;”>div2</div>

The rendering effect of the browser:
div1
div2
The two divs presented on the page occupy two rows of space, unless they are floating (float) or other settings, otherwise no one will be next to each other, and they will occupy their own line of space arrogantly - whenever you see this phenomenon in a label, you can call it: block Level element (block);
Put the following two lines of code into the body tag:

The code is as follows:

<span style=”border: 1px solid red;”>span1</span> 
<span style=”border: 1px solid red;”>span2</span>

The rendering effect of the browser:
span1 span2
This time, the two spans are juxtaposed in a row. They are friendly, friendly and harmonious... With tags like this behavior, we can call them: inline elements (inline);
The difference between block-level elements and inline elements:
·Block-level elements are generally used to build website architecture, layout, and carry content... These major physical tasks all belong to 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

· Inline elements are generally used in certain details or parts of website content to "emphasize, distinguish styles, superscripts, subscripts, anchors", etc. The following tags are Belongs to 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

· Block elements and inline elements can be converted to each other. The conversion code is as follows:

display: block; /* 转成块元素 */ 
display: inline; /* 转成内嵌元素 */

· Block elements and inline elements The calling rules for CSS are different (this article discusses tag nesting, so this knowledge point will not be explained).
After briefly understanding block elements and inline elements, the following can list the nesting rules of XHTML 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:

<div><h1></h1><p></p></div> —— 对 
<a href=”#”><span></span></a> —— 对 
<span><div></div></span> —— 错

2. Block-level elements cannot be placed inside e388a4556c0f65e1904146cc1a846bee:

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

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. Within 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:
li and div tags are both containers for loading content, with equal status and no hierarchy. (for example: strict hierarchies such as h1 and h2^_^), you must 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 that li is so stingy, even though 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 juxtaposed with inline elements:

<div><h2></h2><p></p></div> —— 对 
<div><a href=”#”></a><span></span></div> —— 对 
<div><h2></h2><span></span></div> —— 错

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!

Related reading:

How to use the head structure in HTML

How to operate the input box style of type="file"

In the HTML list, what are the differences between dl(dt,dd), ul(li), and ol(li)

The above is the detailed content of Detailed rules for HTML tag nesting. For more information, please follow other related articles on the PHP Chinese website!