在HTML 5出來之前，我們用div來表示頁面章節(jié)，但是這些div都沒有實(shí)際意義。（即使我們用css樣式的id和class形容這塊內(nèi)容的意義）。這些標(biāo)簽只是我們提供給瀏覽器的指令，只是定義一個(gè)網(wǎng)頁的某些部分。但現(xiàn)在，那些之前沒“意義”的標(biāo)簽因?yàn)橐驗(yàn)閔tml5的出現(xiàn)消失了，這就是我們平時(shí)說的“語義”。
看下圖沒有用div標(biāo)簽來布局

html5-layout.jpg

嗯，如上圖那個(gè)頁面結(jié)構(gòu)沒有一個(gè)div，都是采用html5語義標(biāo)簽（用哪些標(biāo)簽，關(guān)鍵取決于你的設(shè)計(jì)目標(biāo)）。
但是也不要因?yàn)閔tml5新標(biāo)簽的出現(xiàn)，而隨意用之，錯(cuò)誤的使用肯定會(huì)事與愿違。所以有些地方還是要用div的，就是因?yàn)閐iv沒有任何意義的元素，他只是一個(gè)標(biāo)簽，僅僅是用來構(gòu)建外觀和結(jié)構(gòu)。因此是最適合做容器的標(biāo)簽。
W3C定義了這些語義標(biāo)簽，不可能完全符合我們有時(shí)的設(shè)計(jì)目標(biāo)，就像制定出來的法律不可能流傳100年都不改變，更何況它才制定沒多久，不可能這些語義標(biāo)簽對所以設(shè)計(jì)目標(biāo)的適應(yīng)。只是一定程度上的“通用”，我們的目標(biāo)是讓爬蟲讀懂重要的東西就夠了。
結(jié)論：不能因?yàn)橛辛薍TML 5標(biāo)簽就棄用了div，每個(gè)事物都有它的獨(dú)有作用的。
節(jié)點(diǎn)元素標(biāo)簽因使用的地方不同，我將他們分為：節(jié)元素標(biāo)簽、文本元素標(biāo)簽、分組元素標(biāo)簽分開來講解HTML5中新增加的語義化標(biāo)簽和使用總結(jié)。

header元素
header 元素代表“網(wǎng)頁”或“section”的頁眉。通常包含h1-h6元素或hgroup，作為整個(gè)頁面或者一個(gè)內(nèi)容塊的標(biāo)題。也可以包裹一節(jié)的目錄部分，一個(gè)搜索框，一個(gè)nav，或者任何相關(guān)logo。
整個(gè)頁面沒有限制header元素的個(gè)數(shù)，可以擁有多個(gè)，可以為每個(gè)內(nèi)容塊增加一個(gè)header元素

<header> 
  <hgroup> 
      <h1>網(wǎng)站標(biāo)題</h1>
      <h1>網(wǎng)站副標(biāo)題</h1> 
  </hgroup>
</header>
header的示例代碼

header使用注意：

• 可以是“網(wǎng)頁”或任意“section”的頭部部分；
• 沒有個(gè)數(shù)限制。
• 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

footer元素
footer元素代表“網(wǎng)頁”或“section”的頁腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。如果footer元素包含了整個(gè)節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標(biāo)簽，類別等一些其他類似信息。

<footer> 
   COPYRIGHT@小北</footer>
footer的示例代碼

footer使用注意：

• 可以是“網(wǎng)頁”或任意“section”的底部部分；
• 沒有個(gè)數(shù)限制，除了包裹的內(nèi)容不一樣，其他跟header類似。

hgroup元素
hgroup元素代表“網(wǎng)頁”或“section”的標(biāo)題，當(dāng)元素有多個(gè)層級時(shí)，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合

<hgroup> 
        <h1>這是一篇介紹HTML 5語義化標(biāo)簽和更簡潔的結(jié)構(gòu)</h1> 
        <h2>HTML 5</h2>
</hgroup>

hgroup示例代碼

hgroup使用注意：

• 如果只需要一個(gè)h1-h6標(biāo)簽就不用hgroup
• 如果有連續(xù)多個(gè)h1-h6標(biāo)簽就用hgroup
• 如果有連續(xù)多個(gè)標(biāo)題和其他文章數(shù)據(jù)，h1-h6標(biāo)簽就用hgroup包住，和其他文章元數(shù)據(jù)一起放入header標(biāo)簽

nav元素
nav元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。

<nav> 
      <ul> 
          <li>HTML 5</li> 
          <li>CSS3</li> 
          <li>JavaScript</li> 
      </ul>
</nav>

nav實(shí)例

  但是我在有些時(shí)候卻情不自禁的想用它，譬如：側(cè)邊欄上目錄，面包屑導(dǎo)航，搜索樣式，或者下一篇上一篇文章，但是事實(shí)上規(guī)范上說nav只能用在頁面主要導(dǎo)航部分上。頁腳區(qū)域中的鏈接列表，雖然指向不同網(wǎng)站的不同區(qū)域，譬如服務(wù)條款，版權(quán)頁等，這些footer元素就能夠用了。

nav使用注意：
用在整個(gè)頁面主要導(dǎo)航部分上，不合適就不要用nav元素；

aside元素
aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名次解釋等。（特殊的section）
在article元素之外使用作為頁面或站點(diǎn)全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以是日志串連，其他組的導(dǎo)航，甚至廣告，這些內(nèi)容相關(guān)的頁面。

<article> 
        <p>內(nèi)容</p> 
        <aside> 
                <h1>作者簡介</h1> 
                <p>小北，前端一枚</p> 
        </aside>
</article>

aside實(shí)例

aside使用總結(jié)：

• aside在article內(nèi)表示主要內(nèi)容的附屬信息，
• 在article之外則可做側(cè)邊欄，沒有article與之對應(yīng)，最好不用。
• 如果是廣告，其他日志鏈接或者其他分類導(dǎo)航也可以用

section元素
section元素代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個(gè)頁面里的分組。section通常還帶標(biāo)題，雖然html5中section會(huì)自動(dòng)給標(biāo)題h1-h6降級，但是最好手動(dòng)給他們降級。如下：

<section> 
       <h1>section是啥？</h1> 
       <article> 
            <h2>關(guān)于section</h1> 
            <p>section的介紹</p> 
            <section> 
                  <h3>關(guān)于其他</h3> 
                  <p>關(guān)于其他section的介紹</p> 
            </section> 
       </article>
</section>

section示例代碼

section使用注意：
一張頁面可以用section劃分為簡介、文章條目和聯(lián)系信息。不過在文章內(nèi)頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利，可以用div。

• 表示文檔中的節(jié)或者段；
• article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實(shí)際意義的就用div

article元素
article元素最容易跟section和div容易混淆，其實(shí)article代表一個(gè)在文檔，頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨(dú)立開發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個(gè)互動(dòng)的widget小工具。（特殊的section）
除了它的內(nèi)容，article會(huì)有一個(gè)標(biāo)題（通常會(huì)在header里），會(huì)有一個(gè)footer頁腳。我們舉幾個(gè)例子介紹一下article，好更好區(qū)分article、section、div

<article>
         <h1>一篇文章</h1> 
         <p>文章內(nèi)容..</p> 
         <footer> 
                <p>
                    <small>版權(quán)：html5jscss網(wǎng)所屬，作者：小北</small>
                </p>
        </footer>
</article>

  一篇簡單文章的article示例代碼

上例是最好簡單的article標(biāo)簽使用情況，如果在article內(nèi)部再嵌套article，那就代表內(nèi)嵌的article是與它外部的內(nèi)容有關(guān)聯(lián)的，如博客文章下面的評論，如下：

<article> 
        <header> 
              <h1>一篇文章</h1> 
              <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>        
        </header> 
        <p>文章內(nèi)容..</p> 
        <article> 
              <h2>評論</h2> 
              <article> 
                    <header> 
                        <h3>評論者: XXX</h3> 
                        <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> 
                    </header> 
                    <p>哈哈哈</p> 
              </article> 
              <article> 
                    <header> 
                        <h3>評論者: XXX</h3> 
                        <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> 
                    </header> 
                    <p>哈？哈？哈？</p> 
              </article> 
          </article>
</article>

文章里的評論，一個(gè)article嵌套article來表示的實(shí)例

article內(nèi)部嵌套article，有可能是評論或其他跟文章有關(guān)聯(lián)的內(nèi)容。那article內(nèi)部嵌套section一般是什么情況呢。如下：

<article> 
        <h1>前端技術(shù)</h1> 
        <p>前端技術(shù)有那些</p> 
        <section> 
              <h2>CSS</h2> 
              <p>樣式..</p> 
        </section> 
        <section> 
              <h2>JS</h2> 
              <p>腳本</p> 
        </section>
</article>
  

文章里的章節(jié)，一個(gè)article里的section實(shí)例

因?yàn)槲恼聝?nèi)section部分雖然也是獨(dú)立的部分，但是它門只能算是組成整體的一部分，從屬關(guān)系，article是大主體，section是構(gòu)成這個(gè)大主體的一部分。本網(wǎng)站的全部文章都是article嵌套一個(gè)個(gè)section章節(jié)，這樣能讓瀏覽器更容易區(qū)分各個(gè)章節(jié)所包括的內(nèi)容。
那section內(nèi)部嵌套article又有哪些情況呢，如下

<section> 
       <h1>介紹: 網(wǎng)站制作成員配備</h1> 
       <article> 
               <h2>設(shè)計(jì)師</h2> 
               <p>設(shè)計(jì)網(wǎng)頁的...</p> 
       </article> 
       <article> 
               <h2>程序員</h2> 
               <p>后臺(tái)寫程序的..</p> 
        </article> 
        <article> 
               <h2>前端工程師</h2> 
               <p>給樓上兩位打雜的..</p> 
        </article>
</section>

一個(gè)section里的article實(shí)例
設(shè)計(jì)師、程序員、前端工程師都是一個(gè)獨(dú)立的整體，他們組成了網(wǎng)站制作基本配備，當(dāng)然還有其他成員~~。設(shè)計(jì)師、程序員、前端工程師就像article，是一個(gè)個(gè)獨(dú)立的整體，而section將這些自成一體的article包裹，就組成了一個(gè)團(tuán)體。
article和section和例子就例舉這么多了，具體情況具體分析，不易深究。漏了div
，其實(shí)div就是只是想用來把元素組合或者給它們加樣式時(shí)使用。
article使用注意：

• 自身獨(dú)立的情況下：用article
• 是相關(guān)內(nèi)容：用section
• 沒有語義的：用div

HTML5其他結(jié)構(gòu)元素標(biāo)簽
HTML5節(jié)元素標(biāo)簽包括 body article nav aside section header footer hgroup，還有h1-h6 address。

address
代表區(qū)塊容器，必須是作為聯(lián)系信息出現(xiàn)，郵編地址、郵件地址等等,一般出現(xiàn)在footer。
h1-h6
因?yàn)閔group，section和article的出現(xiàn)，h1-h6定義也發(fā)生了變化，允許一張頁面出現(xiàn)多個(gè)h1。

本文源鏈接：http://www.html5jscss.com/html5-semantics-section.html