HTML標籤巢狀規則

本文介紹一下HTML的巢狀規則，先看一段程式碼:

[HTML] 純文字檢視 複製程式碼
<ul>
  <li>
    <h4><a href=""><div></div></a></h4>
  </li>
</ul>

上面的程式碼來自於FACEBOOK，大家對於上面HTML標籤的相互巢狀關係是否感覺有所不妥。

下面先對HTML標籤的巢狀規則進行一下介紹，然後再對上面的程式碼進行一下分析。

一.HTML4/XHTML的巢狀規則:

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

規則如下:

（1）.內聯元素不能巢狀塊元素。

（2）.<p>元素和<h1~6>元素不能巢狀塊元素。

關於塊級元素和內聯元素:

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

如果按照上述規則來講，FACEBOOK做法就是一種錯誤的，因為它在內聯元素<a>元素中巢狀了塊元素元素<div>，但上述規則是基於HTML4/xHTML1的strict模式，而FACEBOOK現在已經統一使用了html5的doctype，那麼這個規則到底還是是否適用呢。

二.HTML5的元素巢狀規則:

W3C在最新的HTML5規範中對元素的分類方式:

元素的分類不再是塊元素或內聯元素這樣來分類（其實從來就沒有這樣分），而是按照如下分類來分：Flow（流式元素）、Heading（標題元素）、Sectioning（章節元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（互動元素）、Metadata（後設資料元素）。

Flow（流式元素）:

在應用程式和文件的主體部分中使用的大部分元素都被分類為流式元素。

[HTML] 純文字檢視 複製程式碼
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）（無論是明確的使用章節式內容的元素標記，或者標題式內容自身所隱含的）的標題。

[HTML] 純文字檢視 複製程式碼
h1， h2， h3， h4， h5， h6， hgroup

Sectioning（章節元素）:

章節式元素是用於定義標題及頁尾範圍的元素。

[HTML] 純文字檢視 複製程式碼
article， aside， nav， section

Phrasing（段落元素）:

段落式元素是文件中的文字、標記段落級文字的元素。

[HTML] 純文字檢視 複製程式碼
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（嵌入元素）:

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

[HTML] 純文字檢視 複製程式碼
audio， canvas， embed， iframe， img， math， object， svg， video

Interactive（互動元素）:

互動式元素是專門用於與使用者互動的元素。

[HTML] 純文字檢視 複製程式碼
a， audio（如果設定了controls屬性）， button， details， embed， iframe， img（如果設定了usemap屬性）， 
input（如果type屬性不為hidden狀態）， keygen， label， menu（如果type屬性為toolbar狀態），
object（如果設定了usemap屬性）， select， textarea， video（如果設定了controls屬性）

Metadata（後設資料元素）:

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

[HTML] 純文字檢視 複製程式碼
base，command，link，meta，noscript，script，style，title

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

程式碼例項一:

<h1>~<h6>元素:

所屬分類:

（1）.Flow content。

（2）.Heading content。

（3）.Palpable content.

特別說明:

元素還可以有其他分類型別，具體可以參閱https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories。不過巢狀規則，使用上面幾個分類足以闡述清楚；關於Palpable content是何種型別上面有介紹。

使用場景:

（1）.作為hgroup元素的子元素。

（2）.作為可以容納flow content型別元素的子元素。

可以包含的元素:

（1）.可以包含Phrasing content元素。

程式碼例項二:

<div>元素:

所屬分類:

（1）.Flow content型別元素。[

（2）.Palpable content型別元素。

使用場景:

（1）.父元素必須是那些子元素為段落式元素的元素。

可以包含的元素:

（1）.Flow content。

<div>元素允許的子元素是流式元素，流式元素基本涵括了頁面中的大部分元素，所以我們在用<div>時可以不用擔心巢狀錯誤的問題。但對於<h1>~<h6>元素，它們允許的子元素為段落式元素，而段落式元素並不包含諸如<div>、<p>、<ul><ol>之類的元素，這就說明按照html5的規範，是不允許在標題元素內部嵌入<div>、<p>、<ul><ol>之類的元素。

程式碼例項三:

<a>元素:

所屬分類:

（1）.Flow content型別元素。

（2）.Phrasing content型別元素。

（3）.Interactive content型別元素。

（4）.Palpable content型別元素。

使用場景:

（1）.父元素必須是那些子元素為段落式元素的元素。

可以包含的元素:

（1）.子元素是以它的父元素允許的子元素為準，但不能包含互動式元素。

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

[HTML] 純文字檢視 複製程式碼
<ul>
  <li>
    <h4><a href=""><div></div></a></h4>
  </li>
</ul>

這時<a>的父元素為<h4>，對於<h1>~<h6>的標題元素上面已經提過，允許的子元素是段落式元素，那麼此時對於<a>允許的子元素即為段落式元素，而段落式元素中是不包含<div>元素的，所以FCAEBOOK這樣的巢狀方法是錯誤的。

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<ul>
  <li><div><a href=""><div></div></a></div></li>
</ul>

這時<a>的父元素為<div>，而<div>元素允許的子元素是流式元素，流式元素中包含<div>元素，所以這樣的情形下在<a>裡面巢狀<div>就是正確的做法。

三.巢狀錯誤可能引起的問題:

開始與結束標籤巢狀錯誤:

[HTML] 純文字檢視 複製程式碼
<div><h2>內容</div></h2>