HTML tag nesting rules_html/css_WEB-ITnose

Summary:

When I was sorting out the project recently, I found that the page codes written by some colleagues were nested too much, and some of them were nested incorrectly, such as

content

. Although the function is implemented, it still has some impact on the performance of the browser rendering engine. Therefore, I have generally sorted out the nesting rules of HTML tags, and I hope readers will point out any mistakes.

As we all know, there are two types of HTML tags:

1. Block-level elements
   div, h1~h6, address, blockquote, center, dir, dl, dt, dd, fieldset , form, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul...
   Features: always starts on a new line, height, line height and top and bottom margin can be controlled, the width defaults to 100% of its container, unless a width is set
   Function: is mainly used to build website architecture, page layout, and carry content
2. Inline elements
   span, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, strike, strong, sub, sup, textarea, tt, u, var...
   Features: and other elements are on one line, height, line height and top and bottom edges The spacing cannot be changed, and the width is the width of its text or picture, which cannot be changed
   Function: is used to enhance content display and control details, such as bolding, italics, etc.

For example:

Block-level element

one

two

The display effect is as follows:

one

two

Inline element

onetwo

The display effect is as follows:

onetwo

Block-level elements and inline elements are not static, we can change its characteristics through CSS

display: inline; //Inline elements

display: block; //Block-level elements

Although there are many HTML tags and we can nest them infinitely when making pages, nesting Nests also have rules and cannot be nested arbitrarily. Some tags have fixed nesting rules, such as ul contains li, ol contains li, dl contains dt and dd, etc. There are many independent tags. How can we use them to write better pages? Let’s talk about

1. Block-level elements are level with block-level elements, and inline elements are level with inline elements. Level
   
   //span is an inline element and p is a block-level element, so this is Wrong nesting
   //Correct

2. Block elements can contain inline elements or certain block elements, but inline elements cannot contain block elements, they can only contain other inline elements
   

3. There are several special block-level elements that can only be contained within Embedded elements can no longer contain block-level elements h1, h2, h3, h4, h5, h6, p, dt
4. Block-level elements cannot be placed inside the tag p
   
   
5. li tags can contain div tags, because li and div tags are both containers for loading content

Summary:

?Although we can nest tags, in order to improve the rendering efficiency of the browser, we should try our best Fewer nested tags, flattened