嵌套

所有元素必须正确嵌套

  • 不允许交叉;

不允许:

  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 元素。