這些天一直在忙於TGuide（騰訊互娛重構編碼規範）的編寫，部落格也因此停止更新了一段時間。當然在TGuide的編寫過程中也會遇到各種各樣的問題，就比如今天要講的“元素巢狀”，這個問題在WEB標準群裡得以和大家討論，同時受到10胸（@顧軼靈）的指點，此問題才得以清晰地被解決。今天與大家一起來分享。後續將會推出web標準系列的文章，今天以“元素巢狀”來拋磚引玉。

先來看這樣一段程式碼：

當然，我是不會告訴你這段程式碼來自於FACEBOOK的 ，各位認為以上元素的巢狀有沒有問題呢？我們會在後面討論這個。

HTML4/XHTML的巢狀規則

在我們的印象中會有這樣的巢狀規則：

內聯元素不能巢狀塊元素

<p>元素和<h1~6>元素不能巢狀塊元素

那麼到底什麼是塊元素，什麼是內聯元素？

以下是W3C CSS2.1規範中對塊元素和內聯元素的定義：

Block-level elements

 are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’  property make an element block-level: ‘block’, ‘list-item’, and ‘table’.

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 

‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

我們可以這樣理解：塊元素一般都從新行開始，內聯元素在一行內顯示，我們也可以通過CSS屬性display的’inline’ 或 ‘ block’ 來改變元素為內聯元素或塊元素，當然這是CSS中對元素的分類，顯然用 ‘display’ 的屬性值來對html元素進行分類是不嚴謹的。

如果按照上述規則來講，那麼FACEBOOK的做法就是一種錯誤的做法，因為他在內聯元素<a>元素中嵌套了塊元素元素<div>，但是細心的讀者應該會發現上述規則是基於HTML4/xHTML1的strict模式，而FACEBOOK現在已經統一使用了html5的doctype，那麼這個規則到底還是是否適用？

HTML5的元素巢狀規則

元素的巢狀規則和頁面頭部申明的DTD有著千絲萬縷的關係，DTD基礎請檢視我之前寫的文章《DTD詳解》，那麼在最新的HTML5規範中是否對元素巢狀有著新的規範呢？

讓我們先了解下W3C在最新的HTML5規範中對元素的分類方式：

如上圖，元素的分類不再是塊元素或內聯元素這樣來分類（其實從來就沒有這樣分），而是按照如下分類來分：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屬性）

Metadata（元資料元素）

元資料元素是可以被用於說明其他內容的表現或行為，或者在當前文件和其他文件之間建立聯絡的元素

base，command，link，meta，noscript，script，style，title

各分類會有交叉或重疊的現象，這說明在html5中，元素可能屬於上述所有分類中的一個或多個。

• Categories:
  • Flow content.
  • Heading content.
  • Palpable content.
• Contexts in which this element can be used:
  • As a child of an hgroup element.
  • Where flow content is expected.
• Content model:
  • Phrasing content.

其中的「Categories」說明該元素的類別，「Contexts in which this element can be used」說明該元素能在何種場景下被使用，也就是它的父元素是什麼，「Content model」說明該元素可以包含的內容是什麼，由於頁面中的元素是層層巢狀的，一個元素有可能既是父元素同時也是子元素的角色，所以下面我們以「Content model」也就是可包含的子元素做討論。

那麼對於h1~h6元素：

• 它們同時屬於Flow content 、Heading content 和 Palpable content三個分類
• 它們的父元素可以是<hgroup>，同時那些子元素是流式元素的元素也可以作為h1-h6元素的父元素
• 它們允許的子元素是段落式元素

舉個栗子2：<div>元素

• Categories:
  • Flow content.
  • Palpable content.
• Contexts in which this element can be used:
  • Where phrasing content is expected.
• Content model:
  • Flow content.

對於<div>元素：

• 同時屬於Flow content 、 Palpable content分類
• 父元素必須是那些子元素為段落式元素的元素
• 允許的子元素是流式元素

<div>元素允許的子元素是流式元素，流式元素基本涵括了頁面中的大部分元素，所以我們在用<div>時可以不用擔心巢狀錯誤的問題。

但對於<h1>~<h6>元素，它們允許的子元素為段落式元素，而段落式元素並不包含諸如<div>、<p>、<ul><ol>之類的元素，這就說明按照html5的規範，是不允許在標題元素內部嵌入<div>、<p>、<ul><ol>之類的元素。

舉個栗子3：<a>元素

• Categories:
  • Flow content.
  • Phrasing content.
  • Interactive content.
  • Palpable content.
• Contexts in which this element can be used:
  • Where phrasing content is expected.
• Content model:
  • Transparent, but there must be no interactive content descendant.

對於<a>元素：

• 同時屬於Flow content 、 Phrasing content、Interactive content、Palpable content分類
• 父元素必須是那些子元素為段落式元素的元素
• 允許的子元素是以它的父元素允許的子元素為準，但不能包含互動式元素

這樣看<a>元素還是挺有意思的，允許的子元素要看它的父元素所能包含的子元素。

再來看文章開頭中提到的程式碼