HTML nesting rules, html nesting

HTML nesting rules, html nesting
Reference: nesting rules of html tags-mooc html Tag nesting rules-blog garden WEB Standard Series-HTML element nesting

Block element:Address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h1 ~ H6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, etc. Inline element:A, abbr, acronym, B, bdo, big, br, cite, code, dfn, em, font, I, img, input, kbd, label, q, s, samp, nested rules such as select, small, span, strike, strong, sub, sup, textarea, tt, u, and var:

• A block can contain blocks and inline. inline can only contain inline
  • A block element can contain inline elements or some block elements, but an inline element cannot contain block elements. It can only contain other inline elements.
• The title and paragraph cannot contain blocks.
  • There are several special block-level elements that can only contain embedded elements, but cannot contain block-level elements. These special labels are
  • H1, h2, h3, h4, h5, h6, p, dt
• The block and inline cannot be tied together
  • Parallel Block-level elements and block-level elements, parallel embedded elements and embedded Elements

Note:Li is a block-level element that can be nested with block-level elements (including ul ). Some labels are fixed nested rules, such as ul containing li, ol containing li, dl containing dt and dd. <Textarea> you cannot nest yourself. You can refer to the instance of this label in the w3School tutorial. Although display can be used to set block and inline, it is obviously not rigorous to define nested relationships. (I wonder if the search engine will capture CSS content ?) Advanced knowledgeStandard WEB series-HTML element Nesting is retained first because HTML 5 cannot be accessed by myself. Nested errors may cause problems

• Element start and end label nesting error. The page can be parsed normally in most browsers, and IE9 will encounter a parsing error.
• Embedding <div> and other elements in <p> elements leads to parsing errors for all browsers.
• In
• Embedding the <a> element in the <a> element will cause parsing errors in all browsers (a cannot be nested with buttons, input, and other interactive elements)
• Inserting a non-list sibling element such as <li> <dt> <dd> In the list element may result in an incorrect parsing of IE6 \ IE7.

In fact, the parsing error is not very reasonable here. It should be said that the result parsed by the browser is inconsistent with the expected result, Any nested error will not cause a huge error in page rendering.   Finally: Although we can nest labels, We Should flat as few nested labels as possible to improve the rendering efficiency of browsers.And < ul >     < li >< h4 >< a href = "" >< div ></ div ></ a ></ h4 ></ li >   </ ul >The above Code comes from Facebook and instantly feels awesome! Haha.