為什么要進(jìn)行HTML語(yǔ)義化？語(yǔ)義化有哪些注意事項(xiàng)？

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

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

為什么要語(yǔ)義化？

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

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

1）盡可能少的使用沒(méi)有語(yǔ)義的div和span元素。
2）在對(duì)語(yǔ)義要求不明顯時(shí)，技能使用div也能使用p,那就使用p，以為p默認(rèn)有上下邊距，可以兼容特殊終端。
3）不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
4）需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b，因?yàn)闆](méi)語(yǔ)義），em是斜體（不用i同b）。
5）使用表格時(shí)，標(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í)