從a標籤爲何不能包含div標籤-瞭解HTML5元素分類與內容模型

咱們知道按新的 HTML 規範，已經不按 inline 和 block 來區分元素類型了。因此咱們在a標籤裏面使用div標籤時候會發現a標籤並不能經過改變css盒子模型的方式將div元素包含。

元素分類

HTML5中，元素主要分爲7類：

Metadata

Flow

Sectioning

Heading

Phrasing

Embedded

Interactive

這些分類集合互相之間也存在必定的交集(一個元素能夠同時屬於多個分類)，其交集關係呈現爲：

須要注意的是，HTML5中的這種元素分類與inline、block沒有任何關係，任何元素均可以在CSS中被定義爲display:inline或者display:block。另外，除了這7大分類，還存在一些較小的分類，如Script-Supporting元素等。

Metadata（元數據元素）

顧名思義，Metadata元素意指那些定義文檔元數據信息的元素 — 其做用包括：影響文檔中其它節點的展示與行爲、定義文檔與其它外部資源之間的關係等。如下元素屬於Metadata：

base, link, meta, noscript, script, style, template, title

Flow（流式元素）

全部能夠放在body標籤內，構成文檔內容的元素均屬於Flow元素。所以，除了base, link, meta, style, title等只能放在head標籤內的元素外，剩下的全部元素均屬於Flow元素。

a， abbr， address， area， 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

Sectioning（章節元素）

Sectioning意指定義頁面結構的元素，具體包含如下四個：

article, aside, nav, section

Heading（標題元素）

全部標題元素屬於Heading，也即如下6個元素：

h1, h2, h3, h4, h5, h6

Phrasing（段落元素）

全部能夠放在p標籤內，構成段落內容的元素均屬於Phrasing元素。所以，全部Phrasing元素均屬於Flow元素。

對於這必定義，我的認爲不該當使用「text」這一容易引發誤解的詞，事實上，一個元素即便不是文本，只要能包含在p標籤中成爲段落內容的一部分，就能夠稱之爲Phrasing元素。

a（若是其只包含段落式元素）， abbr， area， 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

一個不太精確的類比是：HTML5中的Phrasing元素大體就是HTML4中所定義的inline元素。

Phrasing元素內部通常只能包含別的Phrasing元素。

Embedded（嵌入元素）

全部用於在網頁中嵌入外部資源的元素均屬於Embedded元素，具體包含如下9個：

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

Interactive（交互元素）

全部與用戶交互有關的元素均屬於Interactive元素。

a， audio（若是設置了controls屬性）， button， details， embed， iframe， img（若是設置了usemap屬性）， input（若是type屬性不爲hidden狀態）， keygen， label， menu（若是type屬性爲toolbar狀態），object（若是設置了usemap屬性）， select， textarea， video（若是設置了controls屬性）

Palpable

全部應當擁有子元素的元素稱之爲Palpable元素。好比，br元素因不須要子元素，所以也就不屬於Palpable。

Script-supporting

自身不作任何頁面展示，但與頁面腳本相關的元素，具體包括2個：

script, template

內容模型(Content Model)

根據以上元素分類，HTML5標準文檔定義了任何元素的內容模型 — 對於該元素而言，何種子元素纔是合法的。

好比，對於p元素而言，其內容模型爲Phrasing, 這意味着p元素只接受Phrasing元素爲子元素，而對於像div這樣的非Phrasing元素則並不接受。相似的，li元素的內容模型爲Flow，所以任何能夠放置在body中的元素均可以做爲li元素的子元素。

值得注意的是，HTML5標準文檔在定義元素的內容模型時，會使用一類特殊的分類：透明內容模型(transparent) — 對於內容模型爲透明(transparent)的元素而言，其子元素的合法性由其父元素所決定；若是其父元素的內容模型仍爲透明，則查看其祖父元素的狀況，並依此類推；若是向上推演至body標籤仍未找到任何內容模型非透明的父級元素，則該透明元素內部可包含任何Flow元素。

正確嵌套標籤

元素的嵌套規則和頁面頭部申明的DTD有着千絲萬縷的關係，經過了解HTML5的元素分類與內容模型，咱們能更清楚的指導咱們元素的嵌套關係。雖然大部分瀏覽器都有容錯機制，寫出來的代碼在瀏覽器下表現沒有什麼異樣，但做爲一個專業開發人員，咱們必須對待本身的代碼應該一絲不苟，即便HTML5的胸襟很寬廣，但咱們更應該去聽從W3C，由於只有標準健壯的代碼，纔會有更好的擴展與兼容。

總結

所以a標籤內是否合能夠包含div標籤要看其父元素的 content model 和其內容的 categories。好比咱們要看 p > ins > a > div 是否合法，過程是這樣的：p 元素的 content model 是 phrasing content，ins 自己屬於 phrasing content 故能夠嵌套；ins 元素的 content model 是 transparent，故在此時裏面是否能有 a 需檢查 p > a 的合法性；a 元素也屬於 phrasing content，故 p > ins > a 合法；a 元素的 content model 也是 transparent，故此時裏面包含 div 的合法性向上傳遞，檢查 ins > div 又向上傳遞，變成檢查 p > div；div 不屬於 phrasing content，因此這個嵌套是不合法的。