html5里面新增加了一些標簽，這些標簽使得html更語義化，本文主要提到的標簽有：section、article、header、nav、footer、hgroup、aside。將這些標簽運用在青島網站制作和設計中，將更加有利于網站的優(yōu)化，和瀏覽體驗。

section標簽
<section>標簽，定義文檔中的節(jié)。比如章節(jié)、頁眉、頁腳或文檔中的其它部分。它用來表現普通的文檔內容或應用區(qū)塊，通常由內容及其標題組成。但section元素標簽并非一個普通的容器元素，它表示一段專題性的內容，一般會帶有標題。

當我們描述一件具體的事物的時候，通常鼓勵使用article來代替section；當我們使用section時，仍然可以使用h1來作為標題，而不用擔心它所處的位置，以及其它地方是否用到；當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div元素而非section。

article標簽
<article>是一個特殊的section標簽，它比section具有更明確的語義，它代表一個獨立的、完整的相關內容塊，可獨立于頁面其它內容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等等。一般來說，article會有標題部分（通常包含在header內），有時也會包含footer。article可以嵌套，內層的article對外層的article標簽有隸屬關系。例如，一篇博客的文章，可以用article顯示，然后一些評論可以以article的形式嵌入其中。

nav標簽
nav標簽代表頁面的一個部分，是一個可以作為頁面導航的鏈接組，其中的導航元素鏈接到其它頁面或者當前頁面的其它部分，使html代碼在語義化方面更加精確，同時對于屏幕閱讀器等設備的支持也更好。

<nav>
 <ul>
 <li><a href="http://www.ihaomai.cn">首頁</a></li>
 <li><a href="#">html+css</a></li>
 <li><a href="#">jQuery</a></li>
 <li><a href="#">SEO優(yōu)化</a></li>
 <li><a href="#">wordpress教程</a></li>
 </ul>
</nav>
但并不是頁面上的所有鏈接團體都需要放在nav標簽內，它主要是由頁面的主要導航塊組成。例如，我們通常在網站的頁腳里放一組鏈接，包括服務條款、網站介紹、版權聲明等，這時，我們通常使用footer，而不是nav。

一個頁面可可以包含多個nav標簽，作為頁面整體或者不同部分的導航。在下面的例子中，有兩個nav標簽，一個是網站的主體導航，另外一個是當前頁面本身的輔助鏈接導航。

<h1>litush</h1>
<nav>
    <ul>
        <li><a href="/">首頁</a></li>
 <li><a href="#">html+css</a></li>
 ...more...
    </ul>
</nav>
<article>
    <header>
 <h1>html5語義化標簽之結構標簽</h1>
 <p><span>發(fā)表于</span>2011-12-22</p>
    </header>
    <nav>
 <ul>
     <li><a href="#">子導航</a></li>
     <li><a href="#">子導航</a></li>
     ...more...
 </ul>
    </nav>
    <div>
  <section id="public">
     <h1>section里面仍然可以再用h1標簽</h1>
     <p>...more...</p>
  </section>
  <section id="destroy">
     <h1>section里面仍然可以再用h1標簽</h1>
     <p>...more...</p>
  </section>
 ...more... </div>
    <footer>
 <p><a href="#">關于我們</a> |
 <a href="#">友情鏈接</a> |
 <a href="#">雜七雜八</a></p>
    </footer>
</article>
<footer>
    <p><small>© copyright 2011 </small></p>
</footer>
nav標簽本身并不要求包含一個列表，它還可以包含其它內容形式。

<nav>
    <h1>Navigation</h1>
    <p>You are on my home page. To the north lies <a href="/blog">
my blog</a>, from whence the sounds of battle can be heard. To the
east you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mou
 you can spy a little figure who appears to be me, despe
 scribbling a <a href="/school/thesis">thesis</a>.</p>
    <p>To the west are several exits. One fun-looking exit is la
<a href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
    <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one
 point you see a rat run quickly out of the page.</p>
</nav>
aside標簽
aside標簽用來裝載非正文的內容，被視為頁面里面一個單獨的部分。它包含的內容與頁面的主要內容是分開的，可以被刪除，而不會影響到網頁的內容、章節(jié)或是頁面所要傳達的信息。例如廣告，成組的鏈接，側邊欄等等。

header標簽
<header>標簽定義文檔的頁眉，通常是一些引導和導航信息。它不局限于寫在網頁頭部，也可以寫在網頁內容里面。

通常<header>標簽至少包含（但不局限于）一個標題標記（<h1>-<h6>），還可以包括<hgroup>標簽，還可以包括表格內容、標識、搜索表單、<nav>導航等。

<header>
 <h1>力圖數字科技</h1>
 <p>專注于web前端開發(fā)</p>
</header>
<article>
 <header>
  <h1>html5語義化標簽之結構標簽</h1>
  <p>article、section、hgroup、aside、nav...</p>
 </header>
 <p>...這里面包含很多東西...</p>
</article>
footer標簽
footer標簽定義section或document的頁腳，包含了與頁面、文章或是部分內容有關的信息，比如說文章的作者或者日期。作為頁面的頁腳時，一般包含了版權、相關文件和鏈接。它和<header>標簽使用基本一樣，可以在一個頁面中多次使用，如果在一個區(qū)段的后面加入footer，那么它就相當于該區(qū)段的頁腳了。

hgroup標簽
hgroup標簽是對網頁或區(qū)段section的標題元素（h1-h6）進行組合。例如，在一區(qū)段中你有連續(xù)的h系列的標簽元素，則可以用hgroup將他們括起來。

 <hgroup>
  <h1>力圖數字科技</h1>
 <h2>專注于web前端開發(fā)</h2>
 </hgroup>