HTML5的嵌套与HTML4的嵌套标准对比

内联元素不能嵌套块元素

<p>元素和<h1~6>元素不能嵌套块元素

如上图，元素的分类不再是块元素或内联元素这样来分类（其实从来就没有这样分），而是按照如下分类来分：Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。

Flow（流式元素）

在应用程序和文档的主体部分中使用的大部分元素都被分类为流式元素。

a， abbr， address， area（如果它是map元素的后 裔）， article， aside， audio， b， bdi， bdo， blockquote， br， button， canvas， cite， code， command， datalist， del， details， dfn， div， dl，em， embed， fieldset， figure， footer， form， h1， h2， h3， h4， h5， h6， header， hgroup， hr， i， iframe， img， input， ins， kbd， keygen， label， map， mark， math， menu， meter，nav， noscript， object， ol， output， p， pre， progress， q， ruby， s， samp， script， section， select， small， span， strong， style（如 果该元素设置了scoped属 性）， sub， sup， svg， table，textarea， time， u， ul， var， video， wbr， text

Heading（标题元素）

标题式元素定义一个区块/章节（section）（无论是明确的使用章节式内容的元素标记，或者标题式内容自身所隐含的）的标题。

h1， h2， h3， h4， h5， h6， hgroup

Sectioning（章节元素）

章节式元素是用于定义标题及页脚范围的元素。

article， aside， nav， section

Phrasing（段落元素）

段落式元素是文档中的文本、标记段落级文本的元素。

a（如果其只包含段落式元素）， abbr， area（如果它是map元素的后 裔）， audio， b， bdi， bdo， br， button， canvas， cite， code， command， datalist， del（如 果其只包含段落式元素）， dfn， em， embed， i，iframe， img， input， ins（如果其只包含段落式元 素）， kbd， keygen， label， map（如果其只包含段落式元 素）， mark， math， meter， noscript， object， output， progress， q， ruby， s， samp， script，select， small， span， strong， sub， sup， svg， textarea， time， u， var， video， wbr， text

Embedded（嵌入元素）

嵌入式元素是引用或插入到文档中其他资源的元素。

audio， canvas， embed， iframe， img， math， object， svg， video

Interactive（交互元素）

交互式元素是专门用于与用户交互的元素。

a， audio（如果设置了controls属 性）， button， details， embed， iframe， img（如果设置了usemap属性）， input（如果type属性不为 hidden状态）， keygen， label， menu（如果type属性为toolbar状态），object（如果设置了usemap属 性）， select， textarea， video（如果设置了controls属性）

那么对于h1~h6元素：

• 它们同时属于Flow content 、Heading content 和 Palpable content三个分类
• 它们的父元素可以是<hgroup>，同时那些子元素是流式元素的元素也可以作为h1-h6元素的父元素
• 它们允许的子元素是段落式元素

对于<div>元素：

• 同时属于Flow content 、 Palpable content分类
• 父元素必须是那些子元素为段落式元素的元素
• 允许的子元素是流式元素

<div>元素允许的子元素是流式元素，流式元素基本涵括了页面中的大部分元素，所以我们在用<div>时可以不用担心嵌套错误的问题。

但对于<h1>~<h6>元素，它们允许的子元素为段落式元素，而段落式元素并不包含诸 如<div>、<p>、<ul><ol>之类的元素，这就说明按照html5的规范，是不允许在标题元 素内部嵌入<div>、<p>、<ul><ol>之类的元素。

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

严格嵌套约束规则：

• a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)
• <p>里面不可以嵌 套<div>、<h1>~<h6>、<p>、<ul>/<ol> /<li>、<dl>/<dt>/<dd>、<form>等
• 暂时没有发现更多，有的欢迎告诉我