html5 語義標籤理解 整理2 [

1.article :    在W3C中定義的內容爲： 
<article> 標籤定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容。 

註釋：<article> 標籤的內容獨立於文檔的其餘部分。 

  others： 



article元素用來在頁面中表示一套結構完整且獨立的內容部分。article可以用來呈現論壇的一個帖子，雜誌或報紙中的一篇文章，一篇博客，用戶提交的評論內容，可互動的頁面模塊掛件等。 

<article>是可以嵌套使用的，內層的內容在原則上需要與外層內容相關聯。例如，一篇博客文章與針對該文章的評論就可以使用嵌套<article>的方式；用來呈現評論的<article>元素被包含在文章內容的<article>裏面。 

2.section 
  W3C定義爲： 

<section> 標籤定義文檔中的節（section）。比如章節、頁眉、頁腳或文檔中的其他部分。 

  others: 

section元素標籤用來表現普通的文檔內容或應用區塊。一個section通常由內容及其標題組成...但section元素標籤並非一個普通的容器元素；當一個容器需要被直接定義樣式或通過腳本定義行爲時，推薦使用div元素而非section。 



通常不推薦爲那些沒有標題的內容使用<section>；我們可以使用HTML5輪廓工具來檢查我們的頁面中是否有不包含標題部分的<section>容器。 

我們可以看到，雖然文章有正式的h1與h2，但是在<section>中，仍然可以爲這個內容部分使用h1來作爲標題。 

下面是幾條關於使用<section>的禁忌： 

不要將<section>作爲用來設置樣式或行爲的“鉤子”容器，那是<div>的工作。 
如果<article>、<aside>或<nav>更符合狀況，不要使用<section>。 
不要爲沒有標題的內容區塊使用<section>。  
3.aside  
W3C定義爲： 

<aside> 標籤定義 article 以外的內容。aside 的內容應該與 article 的內容相關。 

註釋：<aside> 的內容可用作文檔的側欄。 

  others: 

aside元素標籤可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分。 

根據目前的規範，<aside>元素有兩種使用方法： 

被包含在<article>中作爲主要內容的附屬信息部分，其中的內容可 
以是與當前文章有關的引用、詞彙列表等。 
在<article>之外使用，作爲頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情鏈接、附屬導航或廣告單元等。 
需要注意的是,<aside>元素的呈現方式不僅是字面上相似的sidebar；<aside>是符合語義化的內容劃分方式，並不涉及該部分內容的顯示樣式定義。 

4.hgroup 
    W3C定義： 

使用 <hgroup> 標籤對網頁或區段（section）的標題進行組合： 

<hgroup>  
<h1>Welcome to my WWF</h1>  
<h2>For a living planet</h2>  
</hgroup> 
<p>The rest of the content...</p>  
5.header  
<header>元素標籤。我們一直以來都習慣於使用“<div id='header'>...</div>”這樣的代碼來寫整個頁面或某個區塊的頭部外層容器；在HTML5中，我們可以直接使用在語義上更加準確的<header>元素標籤。  什麼是<header>元素 根據W3C的定義規範： 
The header element represents a group of introductory or navigational aids.A header 

header元素是一種具有引導和導航作用的輔助元素。通常，header元素可以包含一個區塊的標題(如h1至h6，或者hgroup元素標籤)，但也可以包含其他內容，例如數據表格、搜索表單或相關的logo圖片。 

怎樣使用<header>元素 我們可以使用該元素來寫整個頁面的標題部分： 同一個頁面中，每一個內容區塊都可以有自己的<header>元素，例如：  <header>元素中必要的內容有哪些 <header>元素通常包含一個標題標籤(h1至h6)或是hgroup。另外，也可以包含其他內容，例如數據表格、搜索表單或相關的logo圖片；根據最新的W3C HTML5規範更新，<nav>元素標籤也可以在<header>中使用。 6.footer 
長久以來，我們習慣於使用<div id="footer">這樣的代碼作爲頁面的頁腳。在HTML5中，我們可以使用用途更廣、擴展性更強的<footer>元素了。根據W3C的定義規範： 

footer元素可以作爲其直接父級內容區塊或是一個根區塊的結尾。footer通常包括其相關區塊的附加信息，如作者、相關閱讀鏈接以及版權信息等。 

過去的方式 

過去(及目前)，我們通常使用類似下面這樣的代碼來寫頁面的頁腳： 

1 <div id="footer"> 

2   <ul> 

3      <li>copyright</li> 

4      <li>sitemap</li> 

5      <li>contact</li> 

6      <li>to top</li> 

7   </ul> 

8 <div> 

HTML5的方式 

在HTML5中，我們可以不使用div，而用更加語義化的footer來寫： 



1 <footer> 

2   <ul> 

3      <li>copyright</li> 

4      <li>sitemap</li> 

5      <li>contact</li> 

6      <li>to top</li> 

7   </ul> 

8 </footer> 

在同一個頁面中可以使用多個<footer>元素，即可以用作頁面整體的頁腳，也可以作爲一個內容區塊的結尾，例如，我們可以將<footer>直接寫在<section>或是<article>中： 

1 <section> 

2    Section content appears here. 

3    <footer> 

4       Footer information for section. 

5    </footer> 

6 </section> 

1 <article> 

2    Article content appears here. 

3    <footer> 

4       Footer information for article. 

5    </footer> 

6 </article> 


7.nav 

HTML5中的新元素標籤<nav>用來將具有導航性質的鏈接劃分在一起，使代碼結構在語義化方面更加準確，同時對於屏幕閱讀器等設備的支持也更好。 

一直以來，我們習慣於使用形如<div id="nav">或<ul id="nav">這樣的代碼來寫頁面的導航；在HTML5中，我們可以直接將導航鏈接列表放到<nav>標籤中 

根據W3C的定義規範： 

nav元素是一個可以用來作爲頁面導航的鏈接組；其中的導航元素鏈接到其他頁面或當前頁面的其他部分。並不是所有的鏈接組都要被放 
進<nav>元素；例如，在頁腳中通常會有一組鏈接，包括服務條款、首頁、版權聲明等；這時使用<footer>元素是最恰當 
的，而不需要<nav>元素。 

一個頁面中可以擁有多個<nav>元素，作爲頁面整體或不同部分的導航； 

<nav>不僅可以用來作爲頁面全局導航，也可以放在<article>標籤內，作爲單篇文章內容的相關導航鏈接到當前頁面的其他位置。 

8.time  
<time> 標籤定義日期或時間，或者兩者 
<time>9:00<time> 
<time datetime = "2011-2-2">什麼節</time> 
但是，好像除了能將content有點突出外，二邊有空格的感覺，沒有什麼效果。 
9.mark  

定義和用法 
<mark> 標籤定義帶有記號的文本。請在需要突出顯示文本時使用 <m> 標籤。 

實例 
突出顯示部分文本： 

<p>Do not forget to buy <mark>milk</mark> today.</p> 

在Opera 谷歌 firefox 中測試過，沒有效果。 

10.figure figcation  
<figure> 
      <img .> 
    <figcaption> 
               <h1>...</h1> 
</figcaption> 
</figure>//讓h1標籤img標籤組合