會說話的HTML：語義化雜談

 　　家裡有個熊孩子，經常會有一些意想不到的事情發生：回家的時候，他會笑呵呵沖過來，大聲喊著“臭爸爸”;你讓他把鞋穿上，他會提起鞋子往樓下扔…在小孩的世界裡，他雖然會說話，但不一定明白其中的意思，不能正確表達;同樣他也會做一些事情，但不一定按正常大人的邏輯，不能准確接收;符合預期的的交流和溝通成了奢望。因為在他的世界裡，一切都處於混沌之中，一切的邏輯、規范都沒有完善。

　　而在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)。