淺談web語義化

web語義化是什麼

HTML5標準出來的時候，我曾經詫異為什麼要定義這麼多header footer nav article標準，DIV不挻好的嘛，方便開發人員記憶啊。但當頁面開發完，面對所有都是DIV標簽的網頁，就會混亂了，到底哪裡是頁頭，哪裡是正文。當然我們可以用瀏覽器打開，F12一下，就一目瞭然了，但如果是網路爬蟲，那就沒這麼容易識別到這個東西了。

引用wiki的定義，語義化是前端開發裡面的一個專用術語，其優點在於標簽語義化有助於構架良好的html結構，有利於搜索引擎的建立索引、抓取；另外，亦有利於頁面在不同的設備上顯示儘可能相同；此外，亦有利於構建清晰的機構，有利於團隊的開發、維護。

通俗而言，就是HTML的結構清晰，該是段落就用p標簽，該是頁腳就用footer標簽，而不要統一都用DIV。

為什麼要web語義化

其實wiki的定義裡面說得非常清晰了。語義化的好處有三點

1. 有利於搜索
2. 容易相容不同設備
3. 結構清晰，利於團隊的開發、維護

要怎麼做

一個較為經典的案例是，初學word的人經常會用空格來進行縮進，用回車來填充進行換頁，這種排版在頁面佈局發生變化時，就會亂掉。所以我們要用回word本身的縮進，換頁符功能，真真正正告訴電腦這個排版的真正意圖，才能使得排版適應性強。 HTML不是二進位文件，導致人們在編寫的時候隨意性更加大了。我們要經常關註一些語義化的標簽，常用並且熟記。

• h1~h6的規劃

一篇文章應該只有一個總標題即h1，我的每一篇博文都是這種結構的。然後根據文章的具體內容，會有若幹個h2及嵌套的h3，目前為止我的博文並沒有用到h4以下的標題

• p

每一個段落都應該用p去表示，預設情況下p是有一定的縮進及行距，如果不想這樣排版，應該另外寫CSS去控制

• ul,ol,li (Unordered list,Ordered list,List item)

li必須是在ul或者ol裡面，當我們只是列舉一些數據，但又達不到一個分論點這種語義時，或者在一些資訊的網站新聞列表中，都應該用此語義標簽，例如你當前在看的就是。

• dl,dt,dd (description list,description list term,description list description)

這表示一種帶描述的層級遞進的列表，其中dl帶描述的列表，dt列表的標題，dd列表的描述 例如

    <dl>
    <dt>中國城市</dt>
    <dd>北京 </dd>
    <dd>上海 </dd>
    <dd>廣州 </dd>
    <dt>美國城市</dt>
    <dd>華盛頓 </dd>
    <dd>芝加哥 </dd>
    <dd>紐約 </dd>
    </dl>

效果圖：

• em,strong

由於本人是用markdown語法來寫博的，這兩個標簽更加是被語法首推使用的 測試斜體em 測試加強strong

• header,nav,article,section,aside,footer

這對於明細內容頁的語義化十分重要，在此引用一圖說明各標簽的語義

• th,tbody

表格的表頭及重覆列表內容，正常的表格都應該區分表頭及表體內容。表頭預設是加粗並且居中的。

• address

表示一種聯繫方式，方便爬蟲立馬找到你的聯繫方式，當然使用起來可能是辦公地址更加實際

    <address>
    Written by p2227<br />
    contact me : kuangqiyi(At)gmail.com <br />
    Address: searching the next bussiness address<br />
    </address>

• dfn，code，samp，kbd，var，cite

這些元素和em 、strong都稱為短語元素，其語義如下

本人的列舉有限，詳細的要在實際使用中去慢慢記憶了。 具體的實施還要結合具體項目組制定一份標準，再嚴格執行，才能真實實施起來。