相信大家都知道html和css，知道html結構和css表現分離，知道html語意化，這些都是這幾年的熱門關鍵字。語義化的html在國內也是一兩年前才開始被追捧的，看看現在群組裡談論的html結構，關於html結構的面試題，語義化的html佔據了很大一部分。那為什麼要使用語意化的HTML？語意化的HTML到底有什麼好處呢？

HTML是提供網頁文件內容的上下文結構和意義；html本身是沒有表現的，我們看到例如

是粗體，字體大小2em，加粗；是加粗的，不要認為這是html的表現，這些其實html預設的css樣式在起作用，所以首先我們要知道html和頁面的表現是沒有關係的，這些是css的事情。 HTML在頁面中的作用是結構和意義，通俗點說就是分割內容，這裡放什麼，我們放的是什麼。

語意化的HTML結構首先要強調HTML結構

HTML結構是頁面的骨架，一個頁面就好像一幢房子，HTML結構就是鋼精鋼筋混泥土的牆，一幢房子如果沒有鋼精鋼筋混泥土的牆那就是一堆費磚頭，不能住人，不能辦公。 css是裝飾材料，是原木地板，是大理石，是油漆，是用來裝飾房子的，CSS的強大就不用多說了，css如果沒有html結構那就是一堆木板，一同油漆，沒有了實際使用價值。 CSS完全依賴引用它的(X)HTML文件。如果你想讓CSS的能力充分發揮到極致，提供一個用既乾淨又有結構的內容的html是非常必要的，「HTML是在互聯網上發布超文本的通用語……HTML使用標籤來對文本結構化」（ http://www.w3.org/MarkUp/ ）。

語意化的HTML結構怎麼寫？
HTML是一種對文字內容進行結構和意義（或說「語意」）進行補充的方法。它會告訴我們說：「這行是一個標題，這幾行組成了一個段落。這些文字是項目列表，這些文字是鏈接到互聯網上另一個文件的超鏈接。」值得注意的是，不應該讓HTML來告訴我們：「這些文字是藍色的，這些文字又是紅色的。這部分內容是最最靠右的一欄，這行內容是斜體字。」這些和表現相關的資訊是CSS的工作。在做前端開發的時候要記住：HTML告訴我們一塊內容是什麼（或其意義），而不是它長的樣子。當我們提到「語意標記」的時候，我們所說的HTML應該是完全脫離表現資訊的，其中的標籤應該都是語意化地定義了文件的結構。

語意化的HTML結構其實很簡單，先掌握html中各個標籤的語意，

是一個容器；是表示強調；

• 是一個無序列表等等…在看到內容的時候想想用什麼標籤能更好的描述它，是什麼就用什麼標籤。

  語意化的HTML結構到底有什麼好處？

  我們知道HTML5新增的標籤，例如

  和