DIV CSS 佈局教程網

Html語義化, 似乎是一個老生常談的問題. Google 一下,也有大把關於語義化的文章. 為什麼要語義化標簽? 我是這樣認為的:Html的每個標簽都有它特定的意義,而語義化,就是讓我們在適當的位置用適當的標簽, 以更好的讓人和機器(機器可理解為浏覽器可理解為搜索引擎)都一目了然. 如果我的解釋不夠明了, 請Google.

如何在合適的位置使用合適的標簽? 
這是一個簡單的理解邏輯. 比如, h1~h6標簽是用於標題類的; ul是用於無序列表的; ol是用於有充列表的; dl是用於定義列表的; em,strong標簽是用來強調的…說白了, Html標簽的每個英文釋義決定了它的語義(本文後面, 我會放一份常用Html標簽的英文釋義對照表供參考).
什麼是讓人和機器都能一目了然? 
檢查Html頁面是否語義化最好的方法, 便是去掉頁面的Css鏈接, 看網頁結構是否井然有序, 頁面是否仍然有很好的可讀性. 為什麼可以這麼說? 大家都知道浏覽器都有默認的樣式(推薦使用Chrome的Web Developer Tools for Chrome 插件, 或者Firefox的Web Developer 插件), 比如h1~h6, 會有加粗/字號依次減小、上下邊距的默認樣式, ul、ol、dl都有默認的項目符號, strong默認有加粗的樣式…所以, 同樣的頁面, 語義化良好的Html可以在頁面Css去掉的情況下依然有良好的表現.
還有一點, 好的語義化編碼, 對搜索引擎有更好的友好性. 搜索蜘蛛是不認識你的Css的, 但它能識別Html標簽.
下面是一個簡單的例子:


復制代碼代碼如下:
<!--未語義化-->
<div id="header">
<div class="h1">Mr.Think的博客</div>
<div class="h2">專注Web前端技術,熱愛Php,崇尚簡單生活的凡夫俗子.</div>
</div>
<!--語義化之後-->
<div id="header">
<h1>Mr.Think的博客</h1>
<h2>專注Web前端技術,熱愛Php,崇尚簡單生活的凡夫俗子.</h2>
</div>

通過上面的簡單的示例和沒有任何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 變量