我理解的HTML語義化

經過查看別人博文中的一些描述，我將HTML的語義化總結為： 用最恰當的標簽來標記內容。

該如何理解呢？比如需要加入一個標題，這個標題的字體比正文的要大寫，還要加粗。能夠實現這種效果的方法有很多，比如用CSS樣式進行渲染。這樣的效果看起來像是一個標題，但是他對瀏覽器來說，只是一個被渲染過的文本，無法知道他是一個標題。若要讓瀏覽器知道他是一個標題，應該用hx標簽來進行標記。從這個例子可以總結出： 語義化的HTML文檔，不關心內容的顯示效果。 說的通俗一點： 標題脫了CSS這層外衣，它還是一個標題。
HTML語義化的原因

??? 即使在沒有CSS樣式的條件下，也能很好地呈現出內容結構、代碼結構；
??? 語義化HTML會使HTML結構變的清晰，有利于維護代碼和添加樣式；
??? 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
??? 提升搜索引擎優化(SEO)的效果。和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
??? 便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
??? 通常語義化HTML會使代碼變的更少，使頁面加載更快。

在寫HTML代碼時應該注意

??? 盡可能少的使用無語義的標簽div和span；
??? 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
??? 不要使用純樣式標簽，如：b、font、u等，改用css設置。
??? 需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
??? 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
??? 表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
??? 每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

總結

以上是生活随笔為你收集整理的前端学习（10）：HTML语义化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。