為什么要進行HTML語義化？語義化有哪些注意事項？

1）首先、語義化，故名思意，就是你寫的HTML結(jié)構(gòu)，是用相對應(yīng)的有一定語義的英文字母（標(biāo)簽）表示的，標(biāo)記的，因為HTML本身就是標(biāo)記語言。不僅對自己來說，容易閱讀，書寫。別人看你的代碼和結(jié)構(gòu)也容易理解，甚至對一些不是做網(wǎng)頁開發(fā)的人來說，也容易閱讀。那么，我們以后在開發(fā)的過程中，一定要注意了，盡量使用官方的有語義的標(biāo)簽，不要再使用一堆無意義的標(biāo)簽去堆你的結(jié)構(gòu)。怎么知道，自己的頁面結(jié)構(gòu)是否語義化，那就要看你的HTML結(jié)構(gòu)，在去掉CSS樣式表之后，是否，依然能很好的呈現(xiàn)內(nèi)容的結(jié)構(gòu)，代碼結(jié)構(gòu)。也就是說，脫掉css的外衣，依然頭是頭，腳是腳。赤裸裸的完整的一篇文檔。這也就是，語義化之后文檔的效果。

2）其次、其實語義化，也無非就是自己在使用標(biāo)簽的時候多使用有英文語義的標(biāo)簽，比如標(biāo)簽，以為head(頭)，在HTML中就是就是用來定義標(biāo)題，還有p標(biāo)簽，英文是pagrapph段落，table表格標(biāo)簽,等等。

為什么要語義化？

1）為了在沒有css代碼時，也能呈現(xiàn)很好的內(nèi)容結(jié)構(gòu)，代碼結(jié)構(gòu)，以至于達到?jīng)]有編程基礎(chǔ)的非技術(shù)人員，也能看懂一二。（其實，就是為了不穿CSS外衣，裸奔依然好看）。
2）提高用戶體驗，比如：title，alt用于解釋名詞和圖片信息。
3）利于SEO，語義化能和搜索引擎建立良好的聯(lián)系，有利于爬蟲抓取更多的有效信息。爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重。
4）方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以語義的方式來渲染網(wǎng)頁。
5）便于團隊開發(fā)和維護，語義化更具可讀性，如果遵循W3C標(biāo)準的團隊都遵循這個標(biāo)準，可以減少差異化，利于規(guī)范化。

基于此，在寫頁面結(jié)構(gòu)時，我們應(yīng)該注意什么呢？

1）盡可能少的使用沒有語義的div和span元素。
2）在對語義要求不明顯時，技能使用div也能使用p,那就使用p，以為p默認有上下邊距，可以兼容特殊終端。
3）不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
4）需要強調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b，因為沒語義），em是斜體（不用i同b）。
5）使用表格時，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭標(biāo)題用th，內(nèi)容單元格用td。

猜你喜歡：

HTML5結(jié)構(gòu)標(biāo)簽header的用法

HTML5新增form屬性有哪些功能?具體應(yīng)該怎樣操作？

HTML img標(biāo)簽的用法及相關(guān)屬性介紹    

黑馬程序員web前端視頻教程：HTML5+CSS3教程下載

黑馬程序員web前端學(xué)習(xí)