HTML标签嵌套规则

开始与结束标签嵌套

1. 元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误。
2. 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误。
3. 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常。
4. 在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误。
5. 在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6\IE7的解析错误。

严格嵌套约束、语义嵌套约束

通过示例发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误，这其实是W3C规范的严格嵌套约束，严格嵌套约束要求必须去遵守，不然就会导致所有浏览器的解析错误。

严格嵌套约束规则

（1）a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)。
（2）<p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

语义嵌套约束规则

每个元素基本都有自己的嵌套规则（即父元素可以是什么，子元素可以是什么），除了严格嵌套约束之外的一些规则就是语义嵌套约束，对于语义嵌套约束，如果不遵守，页面可能正常，但也可能解析错误，尽量要遵守，不过也要遵循最佳实践，比如导航菜单经常就会有<ul>元素作为<li>的子元素。

<section>与<article>都是为更为精确语义化布局而生，两者相同之处。

自然也有不同点，否则创建两个标签就多此一举了，下面详细做一下介绍。

一、两者关系阐述
（1）article：翻译成汉语具有”文章”的意思。
（2）section：翻译成汉语局域”章”或者”节”的意思。

如果说<article>标签是一篇文章的话，那么<section>标签就是其中的一个段落或者一个小章节。
当然不能因此说，<article>与<section>两者是从属关系，它们两个是可以相互嵌套的。

两个标签的异同点简单总结：
（1）<article>是一种特殊的<section>，用<article>都可以用<section>。

（2）<article>强调整体性与独立性，语义更加明确。

（3）<section>强调的是对整体内容进行划分区域，独立性和语义明确性比<article>差。

两标签都是为页面布局语义化更强，在表现上并没有任何特殊之处，和一个普通div相同。

二、 代码实例
下面通过一段代码片段对两者的区别进行一下分析。

<article>
<header>
<h1>Html/CSS属性顺序和规则</h1>
<p>发布时间：<time datetime="2020-5-14">2020/05/14</time></p>
</header>
<p>管子曰：“仓禀实而知礼仪，衣食足而知荣辱。”</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>小王子</h3>
<p><time datetime="2020-5-14">一分钟前</time></p>
</header>
<p>百姓的粮仓充足，丰衣足食，才能顾及到礼仪，重视荣誉和耻辱。</p>
</article>
</section>
</article>

关于上述代码两个标签的应用：

总体上是一篇文章，很明显具有很好的独立性，所以最外层用<article>包裹比较恰当。
文章的评论属于文章的一个一部分或者一个功能分区，所以使用<section>包裹。
文章评论的单独一条可以看做一个独立的整体，所以使用<article>更为恰当。