——–引子—————
家裡有個熊孩子，經常會有一些意想不到的事情發生：回家的時候，他會笑呵呵衝過來，大聲喊著“臭爸爸”；你讓他把鞋穿上，他會提起鞋子往樓下扔…在小孩的世界裡，他雖然會說話，但不一定明白其中的意思，不能正確表達；同樣他也會做一些事情，但不一定按正常大人的邏輯，不能準確接收；符合預期的的交流和溝通成了奢望。因為在他的世界裡，一切都處於混沌之中，一切的邏輯、規範都沒有完善。
而在HTML的世界裡，經歷多年的成長，規範已基本成型，不同的 HTML標籤、屬性、屬性值都會自己說話、懂得如何去表達，HTML處理器（指令碼、瀏覽器、搜尋引擎）也知道如何來接收HTML傳遞的資訊。而如何讓這些 會說話的HTML精靈施展魔法，去向HTML處理器表達各種意思，帶我們進入奇妙之旅，就掌握在我們重構工程師的手中，也就是接下來要說的語義化。
語義化沒有一個客觀的標準，很多的東西都是個人的主觀理解，千人千面（這裡是廣告）。
——-我理解的語義化————–
HTML中的語義化，即HTML中的每一個標籤、屬性、屬性值，都有其特定含義，所有這些HTML原子組合起來，與開發者、HTML處理器(瀏覽器、搜尋引擎…)進行對話、傳遞特定的意思（也就是說語義化不是單相思，是2個人的事情，我說的明白不行，還得你聽得懂）。
比如，最開始導致網際網路興起是的a標籤，她對瀏覽器說我是一個連結，可以通向另一個頁面；瀏覽器聽到了，為她加上對應樣式和事件，使用者點選時，就可以到另一個頁面了；搜尋引擎聽到了，會去看一下那個頁面都有什麼東西，同時分析一下你們的關係；於是大家快樂的生活在一起了。
——-HTML5新增標籤、屬性——–
HTML中的標籤、屬性、屬性值太多了，HTML5出來之後就更多了，下面拿幾個出來簡單說說，主要關注以下兩點：
1、HTML標籤、屬性、屬性值和HTML處理器(瀏覽器、搜尋引擎…)的對話
2、HTML標籤、屬性、屬性值與開發者們的對話
一、互動標籤–對瀏覽器說
HTML5新增了一些互動標籤(details+summary,datalist,input[date/range/tel/color]…) 遇到互動類標籤，比如details，系統(瀏覽器)會自動繫結對應的UI介面和事件(Shadow DOM)，不需要要任何程式碼，程式碼和瀏覽器直接溝通。
details+summary實現以前我們用js才能實現的顯示更多的功能。
input+datalist實現輸入框既可輸入有課下拉選擇。
二、資源預載入–對瀏覽器說
HTML5中雖然有prefetch相關的說明，但是各個瀏覽器的實現並不一樣，下面簡單說說Chrome的prerender。
在不影響當前頁面的前提下，瀏覽器會自己預載入指定頁面(包括頁面上的資源)，到一個隱藏的tab中，開啟指定頁面的時候，隱藏tab顯示出來。在chrome的工作管理員中可以看到，前面有“預渲染”標識，會消耗記憶體(正式渲染的50%-)。
三、Microdata–對搜尋引擎說
Microdata不屬於HTML5，但依賴於HTML5，屬於HTML5的擴充套件，用於儲存機器能夠識別的資料。
為 了幫助搜尋引擎更好的提取網頁資料，一些約定的HTML屬性和屬性值被應用到HTML中，搜尋引擎(google)會根據不同屬性[值]來提取需要的數 據，Microdata就是其中之一(還有Microformats、RDFa等，Microdata有後來居上的趨勢)。
itemscope告訴搜尋引擎這是一個可用的資料單元
itemtype=”http://schema.org/Event”宣告這是一個活動，不同資料單元的itemtype不同
itemprop用來描述這個活動的不同屬性，不同型別的資料單元，有不同的屬性，頁面上不需要顯示的可用meta標籤和content組合實現，具體參看http://schema.org/。
四、data-*屬性 — 開發者相關
Microdata用於儲存機器能夠識別的資料，開發者有時候也需要HTML提供資料，用於頁面功能實現、網站外掛(應用)，而這些資料有不能顯示 在頁面上，於是data-*屬性出現在HTML5中。同時這也解決了上面說到的，語義化不提倡使用非規範定義的屬性的問題。高階瀏覽器提供了對應的API 支援–dataset，或者直接通過getAttribute獲取。
時下流行的很多視差滾動的外掛(庫)，都採用data-*屬性來設定各種動畫引數(data-ratio、data-vertical-offset…)，避免了繁雜的初始化配置，有實現了動畫引數和指令碼的分離，方便調整和維護，做到WEB標準中的分離思想。
以上種種，只需要在頁面上加上簡單的HTML標籤或屬性[值]即可，簡單，但需要考慮相容性（can i use / ppk）。
五、語義化促進開發者之間的交流
體現在程式碼的維護、團隊協作：專案中使用語義化的標籤、屬性、屬性值，可以被團隊的協作者、或者一段時間之後的自己，更好的理解和維護。這一點比較主觀，因人而異，每個人都有自己的獨到見解。
但是，使用ol來展示一個有序列表，和使用br或者p加上數字，前者顯然更容易被人理解，也方便後期維護；data-video- id=”i0122nckvt0″比vid=”i0122nckvt0″更能體現這個屬性的含義，而且在後期獲取屬性資料的時候，也會更加方 便；class=”news_list”比class=”list_01″更容易被解讀，而且這個class也不會被用到其他外觀類似的模組，減少後期維 護帶來的各種混亂。(好吧，說了這麼些不就是個class的命名問題嗎，microformats都出來了7年了)。
總結
語義化並不是HTML單方面的事情，需要有懂她的物件；
互動標籤可以代替指令碼做一些事情；
prefetch讓瀏覽器自己去優化頁面效能；
data-*為指令碼(外掛)提取HTML資料提供了新的途徑；
良好的語義化讓開發者事半功倍。
PS：語義化同時需要跳過一些坑，W3C在HTML5草案提到：標籤、屬性、屬性值有他們特定的含義，不能用錯了地方(比如暴露年齡的表格佈局)，這樣做會影響HTML處理器正確處理頁面；也不能隨便用規範中沒有定義的標籤、屬性（可用data-*）、屬性值，這樣做將影響HTML將來的擴充套件(比如上面提到的Microdata)。
——–參考————————-
W3C HTML5 3.2.1 Semantics
W3C HTML5 3.2.4.1.7 Interactive content
HTML Microdata
Embedding custom non-visible data with the data-* attributes