Reference: Nested rules for HTML tags-html tag nesting rules-Blog Park Web Standard series-html element nesting
block elements:Address, blockquote, center, dir, Div, DL, DT, DD, fieldset, form, H1~h6, HR, Isindex, menu, Noframes, NoScript, OL, p, pre, Table, UL, etc.
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, Nesting rules for strong, sub, SUP, textarea, TT, U, VAR, etc.:
- Block can contain blocks and inline, inline can only contain inline
- Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements, which can contain only other inline elements
- Headings and paragraphs cannot contain blocks
- There are several special block-level elements that can contain only inline elements and no longer contain block-level elements, which are special tags
- H1, H2, H3, H4, H5, H6, p, DT
- Block and inline cannot be tied
- Block-level elements are tied to block-level elements, inline elements and inline elements
Note:Li is a block-level element that can nest block-level elements (including UL). Some tags are fixed nesting rules, such as UL contains Li, OL contains Li, DL contains DT and DD, and so on. <textarea> can not nest itself and refer to the tag's example on the W3school tutorial itself. This explains that although you can use display to set block and inline, it is clearly not prudent to define nested relationships. (Do not know whether the search engine will crawl CSS content?) ）
Advanced KnowledgeWeb Standard series-html element nesting because now you can't touch HTML5, keep
problems that may arise from nested errors
- element start and end tag nesting error, the page can be parsed correctly in most browsers, IE9 will appear parsing error
- Embedding <div> elements within the <p> element causes parsing errors for all browsers
- Embed <div> elements within
- Embedding <a> elements within the <a> element results in parsing errors for all browsers (a also not nested button,input and other interactive elements)
- Inserting non-list sibling elements in list elements <li><dt><dd> etc. causes IE6\IE7 parsing errors
In fact, it is said that the parsing error is not very reasonable, it should be said that the browser parsing results and we expect the results inconsistent, but
any nested errors do not cause a significant error in page rendering.
At last:
Although we can nest tags, but in order to improve the rendering efficiency of the browser, we should do less nesting tags, flat. And also
<ul> <li><h4><ahref=""><div></div></a></h4></li> </ul>The above code comes from Facebook and instantly feels good! Ha ha.
HTML Nesting rules
