HTML Tag nesting rules and html Tag nesting

HTML Tag nesting rules and html Tag nesting
Abstract:

Recently, I found that some colleagues wrote too many page code nesting, and some of them were not nested, such as <a> <div> content </div> </a>. Although the function is implemented, it still has some impact on the performance of the browser rendering engine. Therefore, the nesting rules of HTML tags are basically sorted out, and readers are expected to make mistakes.

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

For example:

• Block-level elements
  

  <Div> one </div> <div> two </div>

  The display effect is as follows:

  One

  Two

• Line Element
  

  <Span> one </span> <span> two </span>

  The display effect is as follows:

  Onetwo

Block-level elements and intra-row elements are not static. We can use CSS to change their features.

Display: inline; // Line Element
Display: block; // block-level element

Although there are many HTML tags that can be nested infinitely when we create pages, there are also rules for nesting. Some labels are fixed nested rules, such as ul containing li, ol containing li, dl containing dt and dd. There are many independent labels. Let's talk about how to use them to write better pages.

Summary:

Although we can nest labels, We Should flat as few nested labels as possible to improve the rendering efficiency of browsers.