Html語意化, 似乎是一個老生常談的問題. Google 一下,也有大把關於語義化的文章. 為什麼要語義化標籤? 我是這樣認為的:Html的每個標籤都有它特定的意義,而語義化,就是讓我們在適當的位置用適當的標籤, 以更好的讓人和機器(機器可理解為瀏覽器可理解為搜尋引擎)都一目了然. 如果我的解釋不夠明了, 請Google.
如何在適當的位置使用適當的標籤?
這是一個簡單的理解邏輯. 例如, h1~h6標籤是用於標題類的; ul是用於無序列表的; ol是用於有充列表的; dl是用於定義列表的; em,strong標籤是用來強調的…說白了, Html標籤的每個英文釋義決定了它的語義(本文後面, 我會放一份常用Html標籤的英文釋義對照表供參考).
什麼是讓人和機器都能一目了然?
檢查Html頁面是否語義化最好的方法, 便是去掉頁面的Css連結, 看網頁結構是否井然有序, 頁面是否仍然有很好的可讀性. 為什麼可以這麼說? 大家都知道瀏覽器都有預設的樣式(推薦使用Chrome的Web Developer Tools for Chrome 插件, 或Firefox的Web Developer 字號依序減少、上下邊距的預設樣式, ul、ol、dl都有預設的項目符號, strong預設有加粗的樣式…所以, 同樣的頁面, 語意化良好的Html可以在頁面Css去掉的情況下依然有良好的表現.
還有一點, 好的語義化編碼, 對搜尋引擎有更好的友好性. 搜尋蜘蛛是不認識你的Css的, 但它能識別Html標籤.
下面是一個簡單的例子:
透過上面的簡單的範例和沒有任何Css定義情況下的效果圖, 該明白了兩者的區別了吧. 如果你在學習Html5, 它的header、footer、sidebar、article等元素都是新增的語意化標籤.
Html編碼語意化是邁向高品質前端開發的一步. 即更好的遵循Web標準, 也能讓你頁面在去掉樣式後依然井然有序. 關於語意化更多更細緻的介紹, 可以自行Google或閱讀阿當的《Web前端開發修煉之道》 第三章.
附: 標籤語意中英文對照表
| 标签名 | 英文全拼 | 中文翻译 |
|---|---|---|
| a | anchor | 锚 |
| abbr | abbreviation | 缩写词 |
| acronym | acronym | 取首字母的缩写词 |
| address | address | 地址 |
| b | bold | 粗体 |
| big | big | 变大 |
| blockquote | block quotation | 区块引用于 |
| br | break | 换行 |
| caption | caption | 标题 |
| center | center | 居中 |
| dd | definition description | 定义描述 |
| del | delete | 删除 |
| div | division | 分隔 |
| dl | definition list | 定义列表 |
| dt | definition term | 定义术语 |
| em | emphasized | 加重 |
| fieldset | fieldset | 域集 |
| font | font | 字体 |
| h1~h6 | header1~header6 | 标题1~标题6 |
| hr | horizontal rule | 水平尺 |
| i | italic | 斜体 |
| ins | inserted | 插入 |
| legend | legend | 图标 |
| li | list item | 列表项目 |
| ol | ordered list | 排序列表 |
| p | paragraph | 段落 |
| pre | preformatted | 预定义格式 |
| s | strikethrough | 删除线 |
| small | small | 变小 |
| span | span | 范围 |
| strong | strong | 加重 |
| sub | subscripted | 下表 |
| sup | superscripted | 上标 |
| u | underlined | 下划线 |
| ul | unordered list | 不排序列表 |
| var | variable | 变量 |
