在HTML5出現之前，我們一般采用DIV+CSS布局我們的頁面。但是這樣的布局方式不僅使我們的文檔結構不夠清晰，而且不利于搜索引擎爬蟲對我們頁面的爬取。為了解決上述缺點，HTML5新增了很多新的語義化標簽。
引入語義化標簽的好處主要有下列三點：
比<div>標簽有更加豐富的含義，方便開發與維護搜索引擎能更方便的識別頁面的每個部分方便其他設備解析（如移動設備、盲人閱讀器等）所謂語義化標簽就是一種我們僅通過標簽名就能判斷出該標簽內容的語義的標簽。下面將介紹<article> <section> <nav> <aside>、<header> <footer>等HTML5新增的語義化區塊標簽。
通常被放置在頁面或者頁面中某個區塊元素的頂部，包含整個頁面或者區塊的標題、簡介等信息，起到引導與導航的作用。
我們不但可以放置頁面或者頁面中某個區塊的標題，還可以放置搜索表單、logo圖片等元素，按照最新的W3C標準，我們還可以放置<nav>導航欄。
下面是一個使用該標簽的網站頭部實例：
<header> <img src="images/logo.png" alt="**科技" /> <h1>**信息科技有限公司</h1></header>需要注意的是，一個文檔中可以包含一對或者一對以上的<header>標簽。標簽的位置是次要的，不一定非要顯示在頁面的上方，我們可以為任何需要的區塊標簽添加<header>元素，例如下面將要講解的<article> <section>等標簽。
表示頁面的導航，可以通過導航連接到網站的其他頁面，或者當前頁面的其它部分。
<nav>不但可以作為頁面獨立的導航區域存在，我們還可以在<header>標簽中使用。此外，<nav>標簽還可以顯示在側邊欄中。由此可見，一個頁面之中可以有多個<nav>標簽。
根據HTML5標準，<nav>標簽只用于頁面的主要導航部分。因為搜索引擎或者屏幕閱讀器會根據<nav>標簽來確定網站的主體內容，所以并不是任意一組超鏈接都適合放置在<nav>標簽中,我們只要將主要的，基本的鏈接組放進<nav>即可,對于有輔助性的頁腳鏈接則不推薦使用<nav>標簽。
示例如下：
<header> <img src="images/logo.png" alt="**科技" /> <h1>**信息科技有限公司</h1> <nav> <li><a href="#">首頁</a></li> <li><a href="example.html">客戶案例</a></li> <li><a href="service_one.html">技術服務</a></li> <li><a href="aboutus_one.html">關于我們</a></li> <li><a href="connection.html">聯系我們</a></li> </nav></header>值得我們注意的是,HTML5規范不允許將<nav>標簽嵌套在<address>標簽中使用。
所包含的內容不是頁面的主要內容、具有獨立性，是對頁面的補充。
<aside>標簽一般使用在頁面、文章的側邊欄、廣告、友情鏈接等區域。
示例如下：
<article> <h1>HTML5學習之語義化標簽</h1> <p>....正文.....</p> <aside> <h2>什么是語義化標簽</h2> <p>語義化標簽就是......</p> </aside></article>一般被放置在頁面或者頁面中某個區塊的底部，包含版權信息、聯系方式等信息。
跟<header>標簽一樣，<footer>標簽的使用個數沒有限制，可以在任意需要的區塊底部使用。
示例如下：
<footer> <small> 版權所有 ? 2016-2017 **信息科技有限公司 </small></footer>表示包含于一個文檔、頁面、應用程序或網站中的一段獨立的內容，可以被獨立的發布或者重新使用文章標記標簽。
<article>標簽應該使用在相對比較獨立、完整的的內容區塊，所以我們可以在一篇博客、一個論壇帖子、一篇新聞報道或者一個用戶評論中使用它。通常情況下，一個<article>元素包括標題、正文和腳注。和<nav>標簽一樣，該標簽同樣不能用在<address>標簽中；
示例如下：
<article> <h1>HTML5學習之語義化標簽</h1> <p>....正文.....</p> <footer>版權所有*偽版必究</footer></article><article>標簽還可以嵌套使用，但是它們必須是部分與整體的關系。例如在一篇發表的博客中，我們可以對讀者評論使用該標簽。
示例如下：
<article> <h1>HTML5學習之語義化標簽</h1> <p>....正文.....</p> <article> <header> <h2>讀者評論</h2> </header> <article> <header> <h3>評論人：張三</h3> <p>評論時間：<time datetime="2017-02-15">2017-02-15 11:45:23</time></p> </header> <p>張三到此一游</p> </article> <article> <header> <h3>評論人：李四</h3> <p>評論時間：<time datetime="2017-02-09">2017-02-09 14:20:15</time></p> </header> <p>李四到此一游</p> </article> </article> </article>是一個主題性的內容分組，通常用于對頁面進行分塊或者對文章等進行分段
<section>標簽所包裹的是有一組相似的主題的內容，可以用這個標簽來實現文章的章節、標簽式對話框中的各種標簽頁等類似的功能。
<section>通常包含一個頭部<header>、可能還會包含一個尾部<footer>。
示例如下：
<article> <h1>javaScript框架</h1> <p>Javascript框架是指以Javascript語言為基礎搭建的編程框架。</p> <section> <h2>angular.Js<h2> <p>angular.Js是一款優秀的前端JS框架</p> </section> <section> <h2>Vue.js<h2> <p>Vue.js是用于構建交互式的Web界面的庫</p> </section> <section> <h2>jQuery<h2> <p>jQuery是一個快速、簡潔的JavaScript框架。</p> </section></article>在這篇關于JS框架的文章中,所列舉的三個框架都是文章主題構成的一部分，所以我們使用<section>標簽對其進行分段。
我們不但可以在<article>標簽中使用<section>標簽，還可以在<section>標簽中使用<article>標簽。
示例如下：
<section> <h1>HTML5技術棧</h1> <p>廣義而言的HTML5包含HTML、CSS和JavaScript三個部分</p> <article> <h2>HTML<h2> <p>內容</p> </article> <article> <h2>CSS<h2> <p>樣式</p> </article> <article> <h2>JavaScript<h2> <p>行為</p> </article></section>在這個例子中，<section>標簽代表一段內容，在這段內容中，HTML、CSS、Javascript是三個完全獨立的部分，因而我們為這三個不同的部分分別使用<article>標簽。
<div> <section> <article>三者的比較：
<div>：應用廣泛，只要我們想為一個區域定義一個樣式或者為其添加JS行為，就可以使用div標簽<section>：包含的內容是一個明確的主題，通常有標題區域<article>:如果我們的頁面中需要一個單獨的模塊來實現一個單獨的功能，就用<article>，其他的時候都用<section>。新聞熱點
疑難解答
