HTML tag Nesting rules

Tag: Just start frame tab ... Fixed Sub GPO POS

Summary:

Recently, when I was finishing the project, I found that some colleagues wrote too many page code nesting, and some nested wrong, such as <a><div> content </div></a>. Although the functionality is implemented, there is some impact on the performance of the browser rendering engine. Therefore, the general collation of the HTML tag nested rules, but also hope that the reader is wrong.

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 start on new lines, height, row height, and top and bottom margins are controllable, width default is 100% of its container, unless you set a width
   function: mainly used for building the website structure, page layout, hosting content
2. In-line 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, high, high and top and bottom margin can not be changed, the width is its text or the width of the picture, can not be changed
   Features: for enhanced content display, control details such as: bold, italic, etc.

As an example:

• Block-level elements
  

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

  The display results are as follows:

  One

  Both

• In-line elements
  

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

  The display results are as follows:

  Onetwo

Block-level elements and inline elements are not immutable, and we can change their features through CSS.

Display:inline; In-line elements

Display:block; Block-level elements

Although there are a lot of HTML tags and we can create the page with unlimited nesting, but nested also have rules, not arbitrarily nested. Some tags are fixed nesting rules, such as UL contains Li, OL contains Li, DL contains DT and DD, and so on. There are a lot of independent tags, how do we use it to write better pages, let's talk about

1. Block-level elements and block-level elements, inline elements and inline elements
   

   <div><span></span><p></p></div>//span is an inline element, p is a block-level element, so this is the wrong nesting

   <div><span></span><a></a></div>//Right

2. Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements, which can contain only other inline elements
   

   <div><span></span></div>

   <span><span></span></span>

3. There are several special block-level elements that can contain only inline elements and can no longer contain block-level elements

   H1, H2, H3, H4, H5, H6, p, DT

4. Block-level elements cannot be placed inside the label P
   
   
5. The Li tag can contain DIV tags because both the Li and div tags are containers for loading content

Summary:

? Although we can nest tags, but in order to improve the rendering efficiency of the browser, we should do less nested tags, flat

HTML tag Nesting rules