嵌套

所有元素必须正确嵌套

• 不允许交叉；

不允许：

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

应该：

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

• 不允许非法的子元素嵌套。

不允许：

<ul>
    <h3>xx列表</h3>
    <li>asdasdsdasd</li>
    <li>asdasdsdasd</li>
</ul>

应该：

<div>
    <h3>xx列表</h3>
    <ul>
        <li>asdasdsdasd</li>
        <li>asdasdsdasd</li>
    </ul>
</div>

• 不推荐inline元素包含block元素；

不推荐：

<span>
    <h1>这是一个块级h1元素</h1>
    <p>这是一个块级p元素</p>
</span>

推荐：

<div>
    <h1>这是一个块级h1元素</h1>
    <p>这是一个块级p元素</p>
</div>

规则可参考：

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

HTML5: 嵌套规则

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