首頁技術(shù)文章正文

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

更新時間:2021-04-22 來源:黑馬程序員 瀏覽量:

1577370495235_學IT就到黑馬程序員.gif


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

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

為什么要語義化?

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

基于此,在寫頁面結(jié)構(gòu)時,我們應該注意什么呢?

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

1619070673871_HTML語義化11.jpg




猜你喜歡:

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

HTML5新增form屬性有哪些功能?具體應該怎樣操作?

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

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

黑馬程序員web前端學習

分享到:
在線咨詢 我要報名
和我們在線交談!