Html技巧語義化你的代碼

2020-03-24 17:38:25

字體：大中小

來源：轉載

供稿：網友

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

如何在合適的位置使用合適的標簽?
這是一個簡單的理解邏輯. 比如, h1~h6標簽是用于標題類的; ul是用于html' target='_blank'>無序列表的; 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 Mr.Think的博客 /div
div 專注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前端開發修煉之道》第三章.
附: 標簽語義中英文對照表html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html中關于meta標簽的作用詳解

下一篇：瀏覽器加載和渲染html的順序