最近看很多web前端校招的崗位要求都有一條對web語義化理解深刻，所以查了查資料。
1. 什么是web語義化？
維基百科說語義化是前端開發里面的一個專用術語，其優點在于標簽語義化有助于構架良好的html結構，有利于搜索引擎的建立索引、抓??；另外，亦有利于頁面在不同的設備上顯示盡可能相同；此外，亦有利于構建清晰的機構，有利于團隊的開發、維護。
HTML5出來之前，我們都是用div來布局頁面，而這些div沒有實際的意義（雖然我們用css樣式來形容這些div）。H5中新增了一些語義化的標簽：article、footer、header、nav、section：
2 為什么要web語義化
其實wiki的定義里面說得非常清晰了。語義化的好處有三點
- 有利于搜索
- 容易兼容不同設備
- 結構清晰，利于團隊的開發、維護
3 如何做到web語義化
h1~h6的規劃
一篇文章應該只有一個總標題即h1，我的每一篇博文都是這種結構的。然后根據文章的具體內容，會有若干個h2及嵌套的h3p
每一個段落都應該用p去表示，默認情況下p是有一定的縮進及行距，如果不想這樣排版，應該另外寫CSS去控制而不是用空格和</br>排版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>
效果圖：
- address
表示一種聯系方式，方便爬蟲立馬找到你的聯系方式，當然使用起來可能是辦公地址更加實際
<address>
Written by p2227<br />
contact me : kuangqiyi(At)gmail.com <br />
Address: searching the next bussiness address<br />
</address>
header
header 元素代表“網頁”或“section”的頁眉
通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。footer元素
footer元素代表“網頁”或“section”的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。如果footer元素包含了整個節，那么它們就代表附錄，索引，提拔，許可協議，標簽，類別等一些其他類似信息。hgroup元素
hgroup元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合
<header>
<hgroup>
<h1>網站標題</h1>
<h1>網站副標題</h1>
</hgroup>
</header>
nav元素
nav元素代表頁面的導航鏈接區域。用于定義頁面的主要導航部分aside元素
aside元素被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、標簽、名次解釋等。（特殊的section）
在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以是日志串連，其他組的導航，甚至廣告，這些內容相關的頁面。
<article>
<p>內容</p>
<aside>
<h1>作者簡介</h1>
<p>小北，前端一枚</p>
</aside>
</article>
- section元素
section元素代表文檔中的“節”或“段”，“段”可以是指一篇文章里按照主題的分段；“節”可以是指一個頁面里的分組。
一張頁面可以用section劃分為簡介、文章條目和聯系信息。不過在文章內頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利，可以用div。
表示文檔中的節或者段；
article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div
