在HTML5之前采用HTML+CSS文檔結構寫法：
ID選擇器說明 id選擇器——用於標識頁面上特定元素(比如站點導航、頁眉、頁腳)而且必須唯一; 也可以用來標識持久結構性元素（如主導航、內容區域）
class選擇器說明 class類選擇器——可以應用於頁面任意多個元素，非常適合標識內容類型或其他相似的條目。
代碼：
<body>
<div id="header">...</div>
<div id="nav">...</div>
<div class="artical">
<div class="section"></div>
</div>
<div id="side-bar">...</div>
<div id="footer">...</div>
</body>
HTML5出現，解決上述問題，專門添加頁眉、頁腳、導航、文章內容等跟結構相關的結構元素標簽
HTML5結構代碼
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
我們將對HTML5解構代碼的標簽做詳細解釋：
< title>：簡短、描述性、唯一（提升搜索引擎排名）。
搜索引擎會將title作為判斷頁面主要內容的指標，有效的title應該包含幾個與頁面內容密切相關的關鍵字，建議將title核心內容放在前60個字符中。
<hn>：h1~h6分級標題，用於創建頁面信息的層級關系。
對於搜索引擎而言，如果標題與搜索詞匹配，這些標題就會被賦予很高的權重，尤其是h1。
<header>：具有引用或導航作用的解構元素，通常包括網站標志、主導航、全站鏈接以及搜索框。 也適合對頁面內部一組介紹性或導航性內容進行標記。
<nav>：元素代表頁面的導航鏈接區域。用於定義頁面的主要導航部分。譬如：側邊欄上目錄，面包屑導航，搜索樣式，或者下一篇上一篇文章。用在整個頁面主要導航部分上，不合適就不要用nav元素。
<article>：當前頁面或文章的附屬信息，可以包含於當前頁面或主要內容相關的引用、側邊欄、廣告、導航條。
article可以嵌套article，只要里面的article與外面的是部分與整體的關系。
<section>：具有相似主題的一組內容，比如網站的主頁可以分成介紹、新聞條目、聯系信息等條塊。元素代表文檔中的“節”或“段”，“段”可以是指一篇文章里按照主題的分段；“節”可以是指一個頁面里的分組。
如果只是為了添加樣式，請用div！
<aside>：指定附注欄，包括引述、側欄、指向文章的一組鏈接、廣告、友情鏈接、相關產品列表等。
<footer>： 作為其上層父級內容區塊或根區塊的腳注。通常包含腳注信息，如作者、相關鏈接或版權。
HTML5語義化標簽優點
- 去掉或樣式丟失的時候能讓頁面呈現清晰的結構
並不是樣式文件丟失后頁面的樣式會一直保存，而是瀏覽器都有有默認樣式，默認樣式的目的也是為了更好的表達html的語義，依舊可以清晰地呈現頁面。
- 屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。
例如,如果你使用的含語義的標記,屏幕閱讀器就會“逐個拼出”你的單詞,而不是試着去對它完整發音
- 搜索引擎的爬蟲依賴標簽確定上下文和權重問題。
搜索引擎優化的目的是為了幫助搜索引擎爬蟲更好地了解網頁的信息和將網頁更好地歸類。搜索引擎爬蟲不比視覺閱讀器強多少，它需要更多的指引去確定一個網頁的結構和主題。好的語義化的HTML能夠體現頁面的結構。比如
（1） 頁面的title；
（2） 標題hn（搜索引擎會給標題中的文字以更高的權重。您的網頁關鍵字優化應該至少一次出現在h1中，而且相關的關鍵字在其他標題（hx）中。包含關鍵字的標題有助於搜索引擎優化）；
（3） img標簽的alt屬性（用來描述圖片信息，該文本應該和圖片文本信息一致，否則會失去更多的引擎排名值）；
（4） table（表格，使用表標題th作為表格的表頭，使用thead、tbody和tfood適當划分表格，為表格提供一個caption，說明是什么信息在表格中。Caption和th最好放置關鍵字）；
（5） strong em b i 起到物理強調和邏輯強調的作用，搜索引擎會給這四個標簽更高的權重。但是過量使用會造成損失重點。
- 你的頁面是否對爬蟲容易理解非常重要，因為爬蟲很大程度上會忽略用於表現的標記，而只注重語義標記。因此，如果頁面文件的標題被標記，而不是關鍵字被標記，那么這個頁面在搜索結果的位置可能會比較靠后。除了提升易用性外，語義標記有利於正確使用CSS和JavaScript，因為其本身提供了許多“鈎鈎”來應用頁面的樣式與行為。SEO主要還是靠你網站的內容和外部鏈接的。
- 移動設備能夠更完美的展現網頁（對css支持較弱的設備）
語義化標簽為移動設備提供了渲染頁面所需的信息，設備可以以有意義的方式來渲染網頁。比如對於標題文字，手機可以加粗顯示，而Pad可以以較大字體顯示。無論哪種方式都可以突出標題的文本信息。
- 便於團隊開發和維護
在團隊中大家都遵循W3C標准，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模塊化開發。