嵌套

所有元素必须正确嵌套

  • 不允许交叉；

不允许：

  1. <span><dfn>交叉嵌套</span></dfn>

应该：

  1. <span><dfn>交叉嵌套</dfn></span>
  • 不允许非法的子元素嵌套。

不允许：

  1. <ul>
  2.     <h3>xx列表</h3>
  3.     <li>asdasdsdasd</li>
  4.     <li>asdasdsdasd</li>
  5. </ul>

应该：

  1. <div>
  2.     <h3>xx列表</h3>
  3.     <ul>
  4.         <li>asdasdsdasd</li>
  5.         <li>asdasdsdasd</li>
  6.     </ul>
  7. </div>
  • 不推荐inline元素包含block元素；

不推荐：

  1. <span>
  2.     <h1>这是一个块级h1元素</h1>
  3.     <p>这是一个块级p元素</p>
  4. </span>

推荐：

  1. <div>
  2.     <h1>这是一个块级h1元素</h1>
  3.     <p>这是一个块级p元素</p>
  4. </div>

规则可参考：

HTML4/XHTML1.0 Strict: 嵌套规则。

HTML5: 嵌套规则

举个例子，在HTML5中，a元素同时属于 Flow content, Phrasing content, Interactive content, Palpable content 4个分类，那些子元素是 phrasing 元素的元素可以是 a 的父元素，a 允许的子元素是以它的父元素允许的子元素为准，但不能包含 interactive 元素。