重學 html の 標籤語義化

摘要： HTML語義化是指僅僅從 HTML 元素上就能看出頁面的大致結構。我們比較習慣使用 div、span 來壘頁面，視覺上沒啥問題，文字既內容，html 標籤只被 css 樣式所用，單從 html 結構上很難看出意圖。語義標籤則是純文字的補充，比如標題，自然段、章節、列表等我們使用相應的 html...

HTML語義化是指僅僅從 HTML 元素上就能看出頁面的大致結構。我們比較習慣使用 div、span 來壘頁面，視覺上沒啥問題，文字既內容，html 標籤只被 css 樣式所用，單從 html 結構上很難看出意圖。語義標籤則是純文字的補充，比如標題，自然段、章節、列表等我們使用相應的 html 標籤會更好些。

語義化的好處

1. 對開發者友好---開發者可根據html標籤大概瞭解頁面結構
2. 對搜尋引擎友好---seo 排名更靠前
3. 對無障礙裝置友好---盲人軟體讀屏

標籤列舉

結構類

article、section、nav、aside、footer、header 、ul、li 等

該類標籤大家掌握理解的應該都不錯，按照字面理解即可。

表述類

abbr 縮寫

<abbr title="World Wide Web">WWW</abbr>

blockquote、q、cite

blockquote 表示整段話的引用、q 表示一行文字的引用、cite表示引述作品名

figure、figcaption

兩個標籤結合使用，來定義圖文。

<figure>
<figcaption>黃浦江上的的盧浦大橋</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

使用原則

用對比不用好，不用比用錯好。