一、HTML語義化的背景

HTML結構語義化，是近幾年才提出來的，對比之前的 HTML 結構，大多是一堆沒有語義的標簽。用的最多的就是 DIV+CSS，為了改變這種現狀，開發者們和官方提出了 HTML結構語義化的概念，并且在 HTML5 添加了很多語義化標簽。

二、HTML語義化的概念

語義化是指根據內容的結構，選擇合適的標簽，便于開發者閱讀和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和機器很好的解析。

三、HTML語義化的必要

隨著互聯網的發展，WEB承載越來越多的信息(圖片，音頻，視頻等)，人們開始用機器來處理網絡信息，就此誕生了搜索引擎。如次龐大及復雜的信息如何讓搜索引擎處理和挖掘，所以讓機器能夠更好地讀懂WEB上內容就變得越來越重要。

傳統的Web由文檔組成，W3C希望通過一組技術支撐 “數據的Web”，即 Web of Data，將Web看作一個存儲和管理數據的大型分布式數據庫。語義Web是構造這樣的數據Web的重要一環，幫助人們創建數據并存儲在Web上，創建相關的詞匯表及數據的處理規則。

四、HTML語義化的作用

4.1 頁面結構清晰

去掉或 CSS 樣式丟失的時候,也能讓頁面呈現清晰的結構，增強頁面的可讀性。

4.2 支持更多設備

方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以有意義的方式來渲染網頁。

4.3 利于SEO優化

和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重。

4.4 便于團隊開發和維護

在團隊中大家都遵循W3C標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模塊化開發。

五、HTML語義化的方法

(1)根據文檔上下文結構合理的選用最適合表達當前語義的標簽；

(2)盡可少使用無語義的標簽

和 ；

(3)不要使用帶有樣式的標簽，比如： 、 、 等，使用 CSS 設置；

(4)標題標簽的使用應該根據重要性逐級遞減，沒有斷層，并且一個頁面只能有一個

；

(5)提高關鍵詞密度，如圖像的替代文本 alt，提示文本 title；

(6)正確使用內容容器，比如段落

，列表

• ,

,

, ,

;

(7)需要強調的文本，可以使用 或 標簽(瀏覽器默認樣式，能用 CSS 設置就不用)， 默認樣式是加粗(不用 )， 是斜體(不用 )；

(8)表格注意使用，標題

，表頭 ，表格主體(正文)，表注(頁腳)。 定義表格行， 定義表頭， 定義表格單元。

(9)表單域使用

標簽，并且 標簽為 定義標題；

(10)每個 標簽對應的說明文本都需要使用 標簽，通過為 設置 id 屬性，并且在 標簽中設置 for=id 使說明文本和對應的 關聯。

總結

以上是生活随笔為你收集整理的html语义化面试题,前端面试题-HTML结构语义化的全部內容，希望文章能夠幫你解決所遇到的問題。

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