html5語(yǔ)義化
1. 語(yǔ)義是什么？
語(yǔ)義是某些事物的含義，特別是語(yǔ)言的組成部分。語(yǔ)義化的html是關(guān)于描述內(nèi)容類型的html元素。它關(guān)注的是某一個(gè)HTML元素里包含內(nèi)容后的含義，以及和其他元素的比較。它也是關(guān)于為特定內(nèi)容使用合適的元素，也就是HTML標(biāo)準(zhǔn)的準(zhǔn)則。
WHATWG HTML標(biāo)準(zhǔn)： HTML的元素，屬性和屬性值都定義（在標(biāo)準(zhǔn)里）了某種含義（語(yǔ)義）。例如，ol元素代表有序列表，lang屬性代表內(nèi)容的語(yǔ)言。作者不能以它們本身合理的語(yǔ)義目的之外的方式來(lái)使用元素，屬性和屬性值。
開發(fā)的過(guò)程中，可能我們可以不會(huì)根據(jù)html語(yǔ)義來(lái)構(gòu)建文檔，但是與html標(biāo)準(zhǔn)來(lái)比較會(huì)有細(xì)微的差別，目的是為了是頁(yè)面具有邏輯性的結(jié)構(gòu)（頁(yè)面裸奔的時(shí)候），容易維護(hù)，并且對(duì)數(shù)據(jù)挖掘服務(wù)（比如搜索引擎）更加友好。
2. 用大綱思考
一個(gè)設(shè)計(jì)優(yōu)良的網(wǎng)罩要是信息可以被高效的傳達(dá)和獲取。設(shè)計(jì)的目標(biāo)是建立一套信息層級(jí)；頁(yè)面的一些部分應(yīng)該首先吸引用戶的注意力，然后再去設(shè)計(jì)后面的內(nèi)容等等。如果實(shí)現(xiàn)沒有將所有內(nèi)容組織為一套層級(jí)，那么在設(shè)計(jì)過(guò)程中，可能會(huì)不斷發(fā)現(xiàn)這條或那條信息的重要性，并且不斷的更改設(shè)計(jì)。
所以，當(dāng)我們?cè)O(shè)計(jì)頁(yè)面的時(shí)候，暫時(shí)離開設(shè)計(jì)，拿出紙筆，寫下網(wǎng)站的主要內(nèi)容，為每一條思考一個(gè)標(biāo)簽，以及它和頁(yè)面其他那內(nèi)容的關(guān)系?，F(xiàn)在我們先忘掉詳細(xì)的內(nèi)容，而是關(guān)注于主要內(nèi)容塊的相互聯(lián)系。
例如，可能我們會(huì)想到一個(gè)如下的圖：
把這個(gè)列表想象成網(wǎng)站內(nèi)容的目錄或者地點(diǎn)地圖，內(nèi)容的先后順序，以及還有哪些內(nèi)容從屬于更大的區(qū)塊。這里不是頁(yè)面設(shè)計(jì)，只是內(nèi)容的先后順序。
那么上面的例子中，網(wǎng)站的標(biāo)題（Site title）是高于所有其他內(nèi)容的信息。在往下面是其他頁(yè)面的主導(dǎo)航（main navigation），然后是主頁(yè)的主要內(nèi)容（featured content），其中包含推薦文章（an article) 和摘要（Article Synopsis）。最后主頁(yè)的其他內(nèi)容放在Other News區(qū)塊。
這樣的列表有助于組織以及可視化網(wǎng)站的信息層級(jí)，但是好像沒有什么方法可尋，下一節(jié)學(xué)習(xí)HTML5大綱算法。
3. HTML5 大綱算法
作為HTML5標(biāo)準(zhǔn)的一部分，HTML5大綱算法提供了將內(nèi)容拆解成嵌套區(qū)塊的規(guī)則，每一個(gè)區(qū)塊有一個(gè)標(biāo)題。通過(guò)標(biāo)準(zhǔn)的算法來(lái)就理解和解析網(wǎng)頁(yè)結(jié)構(gòu)，以為這每一個(gè)結(jié)構(gòu)完備的網(wǎng)頁(yè)自動(dòng)帶有一個(gè)目錄，這也是當(dāng)我們的頁(yè)面css裸奔的時(shí)候可以看到明確的頁(yè)面層級(jí)結(jié)構(gòu)。
大綱算法：
1. 將body元素作為根區(qū)塊，所有其他頁(yè)面區(qū)塊都組織在下面。
2. 把第一個(gè)標(biāo)題內(nèi)容元素作為body的標(biāo)題。
3. 對(duì)剩下的區(qū)塊內(nèi)容，定義并添加新的區(qū)塊和子塊區(qū)到大綱。
4. 將每一個(gè)子區(qū)塊的第一個(gè)標(biāo)題內(nèi)容元素作為那個(gè)區(qū)塊的標(biāo)題。
上面提到的兩個(gè)內(nèi)容模型：標(biāo)題內(nèi)容（h標(biāo)題元素以及hgroup元素）和區(qū)塊內(nèi)容（article，aside, nav, section）。注意這里沒有div元素。上面的規(guī)則在于形成之前我們說(shuō)的內(nèi)容結(jié)構(gòu)目錄。
4. 用區(qū)塊內(nèi)容創(chuàng)建大綱
4.1 用區(qū)塊內(nèi)容創(chuàng)建大綱
在四個(gè)區(qū)塊內(nèi)元素中，section元素是最通用的。他提供了一個(gè)和主題相關(guān)的內(nèi)容分組。在代碼增加區(qū)塊元素后，我們可以明顯的展示區(qū)塊出現(xiàn)的地方。對(duì)于之前上面的例子：
<h2>Featured Content</h2>
<h4>Article Synopsis</h4>
現(xiàn)在我們看一下沒有css樣式的情況下，頁(yè)面的顯示，相信大家從下面的頁(yè)面顯示應(yīng)該可以很清楚的看到頁(yè)面的內(nèi)容結(jié)構(gòu)。
說(shuō)明： 第一個(gè)h1不需要區(qū)塊，因?yàn)閎ody就是他的區(qū)塊。但是body不屬于區(qū)塊元素，而是屬于區(qū)塊根元素（sectioning roots）。在w3c標(biāo)準(zhǔn)中有這樣一句話：區(qū)塊根元素可以有自己的輪廓，但這些元素中的部分和標(biāo)題并不會(huì)影響祖先的輪廓。本節(jié)中提到的是區(qū)塊內(nèi)容創(chuàng)建大綱，那么區(qū)塊根元素有大綱嗎？
區(qū)塊根元素我認(rèn)為也是具有區(qū)塊元素的行為的，只是特殊點(diǎn)，就像上面提到的區(qū)塊根元素可以有自己的輪廓，但這些元素中的部分和標(biāo)題并不會(huì)影響祖先的輪廓。它們的內(nèi)部可能含有大綱，但是如果它們被包含在另一個(gè)大綱里，那么它們的大綱就會(huì)隱藏。就像我們說(shuō)到的body因?yàn)樗]有包含在另一個(gè)大綱里，所以body就是我們的第一個(gè)大綱規(guī)范，如果其他的區(qū)塊根元素（details, fieldset，figure, 和td元素）包含在body中，那么就會(huì)形成自己的大綱，如果包含在了section中，那么內(nèi)部的大綱就會(huì)隱藏。
這里其實(shí)有一個(gè)問題，因?yàn)樗械脑匕赽ody中，那豈不是說(shuō)其他的區(qū)塊根元素都是將自己的大綱隱藏了？ 我其實(shí)有一個(gè)疑惑，是不是如果其他的區(qū)塊根元素只是包含在body中，就還有自己的大綱，如果包含在section（顯示定義的大綱）中就不存在，我猜想應(yīng)該是這樣，因?yàn)闆]有找到具體的明確規(guī)定，所以這里說(shuō)明一下。
因?yàn)檫@里我們使用的區(qū)塊內(nèi)容創(chuàng)建大綱，所以標(biāo)題元素的排名就不需要了。為什么呢？因?yàn)槠鋵?shí)還有一種創(chuàng)建大綱的說(shuō)法叫做用標(biāo)題內(nèi)容隱形的創(chuàng)建大綱，那里用到的就是依靠標(biāo)題的排名來(lái)創(chuàng)建大綱的（針對(duì)老式編碼風(fēng)格的兼容方案）。但是我們現(xiàn)在是區(qū)塊內(nèi)容創(chuàng)建大綱，所以看中的就不是標(biāo)題元素的排名了。
那么對(duì)于標(biāo)題的使用我們應(yīng)該怎么處理呢？
標(biāo)準(zhǔn)： 強(qiáng)烈建議開發(fā)者只用h1元素，或者為區(qū)塊的器那套就別使用合適的排名標(biāo)題元素。
為什么這樣說(shuō)呢？從兩個(gè)方面說(shuō)：第一呢，如果頁(yè)面內(nèi)部的標(biāo)題元素具有一定自己的排名，那么如果頁(yè)面結(jié)果改變了，我們還需要更新標(biāo)題的排名情況。如果全是h1元素的話，那就不需要了。第二呢，目前搜索引擎優(yōu)化只考慮h1元素作為標(biāo)題。如果我們的頁(yè)面中有多個(gè)h1標(biāo)簽，豈不是提高了SEO。但是這個(gè)問題很復(fù)雜，因?yàn)閷?duì)于h1標(biāo)簽的使用，在某一個(gè)頁(yè)面中只應(yīng)該使用一個(gè)h1。如果使用多個(gè)h1標(biāo)簽可能會(huì)被搜索引擎認(rèn)為是作弊行為，所以對(duì)于h1的處理。需要對(duì)于我們的目標(biāo)引擎是否支持多個(gè)h1標(biāo)簽相當(dāng)重要。目前，可能我們還是要給標(biāo)題標(biāo)簽進(jìn)行排名。
假如說(shuō)我們的目標(biāo)搜索引擎允許多個(gè)h1標(biāo)簽的出現(xiàn)，那么針對(duì)于標(biāo)題嵌套的默認(rèn)大小相同也是問題。我們知道瀏覽器對(duì)于標(biāo)簽的頁(yè)面展示有著一定的默認(rèn)行為，本人測(cè)試過(guò)，在最新的chorme/firefox/IE中，如果存在h1標(biāo)簽的區(qū)塊層級(jí)嵌套，那么嵌套在其他區(qū)塊總的標(biāo)題元素的尺寸會(huì)減少。由于沒喲設(shè)備，對(duì)于safari和Opera沒有測(cè)試。假如我們需要支持的瀏覽器默認(rèn)的尺寸相同，那么我們應(yīng)該使用css去操作這些尺寸上的問題。
4.2 提高大綱的語(yǔ)義
上面的HTML代碼是全部使用section創(chuàng)建大綱的。其實(shí)區(qū)塊元素還有其他的元素，現(xiàn)在我們來(lái)學(xué)習(xí)一下。
nav元素
nav元素代表頁(yè)面的導(dǎo)航鏈接區(qū)域。用于定義頁(yè)面的主要導(dǎo)航部分。注意這里指的是主要導(dǎo)航部分，不是主要的不要使用。那么上面的Main Navigation就可以封裝進(jìn)來(lái)。
section元素
section元素代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個(gè)頁(yè)面里的分組。
section通常還帶標(biāo)題，雖然html5中section會(huì)自動(dòng)給標(biāo)題h1-h6降級(jí)（就是上面我們說(shuō)的嵌套標(biāo)題的尺寸問題），但是最好手動(dòng)給他們降級(jí)。
article元素
article元素最容易跟section和div容易混淆，其實(shí)article代表一個(gè)在文檔，頁(yè)面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨(dú)立開發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評(píng)論，一個(gè)互動(dòng)的widget小工具。（特殊的section）
aside元素
aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名次解釋等。（特殊的section）
在article元素之外使用作為頁(yè)面或站點(diǎn)全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以是日志串連，其他組的導(dǎo)航，甚至廣告，這些內(nèi)容相關(guān)的頁(yè)面。
通過(guò)上面的介紹我們可以看到article獨(dú)立的模塊，section是一個(gè)于上下文有關(guān)系的元素，所以上面的Featured Content是一個(gè)section，An article是一個(gè)article， Article Synopsis是一個(gè)aside。現(xiàn)在我們的html改寫成下面的樣子。
<h2>Featured Content</h2>
<h4>Article Synopsis</h4>
在上面的例子中aside是嵌套在article中的。如果aside是直接嵌套在body元素里，那么它將和整個(gè)頁(yè)面關(guān)聯(lián)，而不僅僅是一部分，對(duì)于頁(yè)面內(nèi)容很少的情況下，這種方式可行，但是對(duì)于一個(gè)信息量很大的頁(yè)面上，將aside和 它們相關(guān)的內(nèi)容分組是必要的。
最后附上一張圖：
5. 頭和尾
每一個(gè)區(qū)塊可以增加可選的頭和尾。
header元素
header 元素代表“網(wǎng)頁(yè)”或“section”的頁(yè)眉。
通常包含h1-h6元素或hgroup，作為整個(gè)頁(yè)面或者一個(gè)內(nèi)容塊的標(biāo)題。也可以包裹一節(jié)的目錄部分，一個(gè)搜索框，一個(gè)nav，或者任何相關(guān)logo。
整個(gè)頁(yè)面沒有限制header元素的個(gè)數(shù)，可以擁有多個(gè)，可以為每個(gè)內(nèi)容塊增加一個(gè)header元素
現(xiàn)在我們應(yīng)該給已有的代碼加上header嗎？當(dāng)然可以，但是不需要，因?yàn)閔eader元素是用來(lái)將引導(dǎo)內(nèi)容分組在一起。現(xiàn)在我們的每一個(gè)區(qū)塊都有 一個(gè)標(biāo)題元素。但是如果我們?cè)诂F(xiàn)有的標(biāo)題下面加上子標(biāo)題Site Slogan，那么我們就需要使用header了。
這樣寫完感覺這個(gè)P標(biāo)簽有點(diǎn)不合適，<p>Site Slogan</p>是一個(gè)段落元素。因?yàn)樗莻€(gè)子標(biāo)題，因?yàn)槎叩膶蛹?jí)關(guān)系沒了。那我們改成h2好像更合適點(diǎn)，這樣的話有了層級(jí)關(guān)系，但是Site Slogan不屬于引導(dǎo)內(nèi)容，因?yàn)槲覀兛吹竭@個(gè)使我們后來(lái)加的，因?yàn)橹皼]有子標(biāo)題的情況下，頁(yè)面已經(jīng)有了足夠的引導(dǎo)內(nèi)容。這個(gè)時(shí)候我們就需要使用另一個(gè)元素hgroup.
hgroup元素
hgroup元素代表“網(wǎng)頁(yè)”或“section”的標(biāo)題，當(dāng)元素有多個(gè)層級(jí)時(shí)，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合
hgroup元素可以將一組標(biāo)題元素放在一起，HTML5大綱算法只會(huì)處理其中排名更高的。那么我們這里我們又要更改頁(yè)面的內(nèi)容了。
現(xiàn)在似乎頁(yè)面已經(jīng)ok了，但是還有一點(diǎn)還有頁(yè)面的尾部，還有兩個(gè)元素footer和address
footer元素
footer元素代表“網(wǎng)頁(yè)”或“section”的頁(yè)腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。如果footer元素包含了整個(gè)節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標(biāo)簽，類別等一些其他類似信息。
address元素
address代表區(qū)塊容器，必須是作為聯(lián)系信息出現(xiàn)，郵編地址、郵件地址等等,一般出現(xiàn)在footer。
但是對(duì)于這兩個(gè)元素還有一個(gè)注意點(diǎn)：再除了article和body的元素外使用address元素，是不合適的。所以，一個(gè)section元素可能有一個(gè)footer元素，但是不能含有address元素。而且address元素不能是不能直接聯(lián)系到作者的信息（雖然這類信息也會(huì)出現(xiàn)在尾部），如果是在article的離，則是這篇文章的作者，如果是body，則是整個(gè)頁(yè)面的作者?，F(xiàn)在我們?cè)诩由衔膊啃畔ⅰ?br>
<h2>Featured Content</h2>
<h4>Article Synopsis</h4>
Contact: <a href="mailto:rodchen1@outlook.com">web master</a>
6. 查看HTML5 大綱
http://gsnedders.html5.org/outliner/ 可以使用這個(gè)網(wǎng)址輸入url，上床文件，或者直接輸入html代碼得到HTML5 大綱。
7. div 和 span過(guò)時(shí)了嗎
說(shuō)到現(xiàn)在，一直沒有提到過(guò)div，難道div過(guò)時(shí)了嗎？好吧，并沒有，div本身是沒喲語(yǔ)義的，在和語(yǔ)義無(wú)關(guān)，整個(gè)大綱不涉及到的地方。對(duì)于css匹配或者javacript獲取內(nèi)容的時(shí)候div還是很有效的。span和div的地位等同，只是一個(gè)用于文檔流，一個(gè)用于語(yǔ)句。
如果有些元素不能適配大綱中的任何元素，那么我們可以使用下面兩個(gè)規(guī)則：
*標(biāo)簽是不是只是用了css匹配和javascript獲取內(nèi)容。
*內(nèi)容是不是僅僅有一個(gè)class或者id來(lái)描述。
當(dāng)然二者的基本還是不涉及到語(yǔ)義，就好像整個(gè)大框架是HTML5大綱操控，但是每一個(gè)區(qū)塊內(nèi)部的東西還是用的到div和span的。
