HTML5中的aside元素與article元素介紹

<aside>元素

HTML<aside>元素表示一個頁面的一部分， 它的內容跟這個頁面的其它內容的關聯性不強，或者是沒有關聯，單獨存在。<aside>元素通常顯示成側邊欄(sidebar)或一些插入補充內容。通常用來在側邊欄顯示一些定義，比如目錄、索引、術語表等；也可以用來顯示相關的廣告宣傳，作者的介紹，Web應用，相關連結，當前頁內容簡介等。

<aside>元素使用注意事項：

不要使用<aside>元素標記括弧中的文字，因為這種類型的文本被認為是主內容的一部分。

使用例子：

<article>   
 
      <p>   
 
        The Disney movie <em>The Little Mermaid</em> was    
 
        first released to theatres in 1989.    
 
      </p>   
 
      <aside>   
 
        The movie earned $87 million during its initial release.    
 
      </aside>   
 
      <p>   
 
        More info about the movie...    
 
      </p>   
 
    </article> 

<article>元素

Article元素(<article>)故名思議，可以表示論壇文章、雜誌或新聞文章、部落格、使用者提交的評論、互動式組件，或者其他獨立的內容項目。它的主要語義為表示自己是一個獨立的內容結構。每一個<article>元素內部結構都應該是相似的，比如都應該包含一個頭標題(h1-h6元素)等。

article元素代表文檔、頁面或應用程式中獨立的、完整的、可以獨自被外部參考的內容。它可以是一篇部落格或報刊中的文章、一篇論壇文章、一段使用者評論或獨立的外掛程式，或其他任何獨立的內容。除了內容部分，一個article元素通常有它自己的標題（一般放在一個header元素裡面），有時還有自己的腳註。

<article>元素用法：

當<article>元素嵌套使用時，則該元素代表與父元素有關的文章。例如，代表部落格評論的<article>元素可嵌套在代表部落格文章的<article>元素中。
<article>元素中文章作者的資訊可通過<address>元素表示，但是不適用於嵌套的<article>元素。

<article>元素中文章的發布日期和時間可通過<time>元素的pubdate屬性工作表示。

現在，讓我們以部落格為例來看一段關於article元素的程式碼範例，代碼如下：

<article>
      <header>
            <h1>article元素使用方法</h1>
            <p>發表日期：<time pubdate="pubdate">2010/10/10</time></p>
      </header>
      <p>article元素是什嗎？怎樣使用article元素？……</p>
      <footer>
            <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
      </footer>
</article>

這個樣本是一篇講述article元素使用方法，在header元素中嵌入了文章的標題部分，在標題下部的p元素中，嵌入了一大段該部落格文章的本文，在結尾處的footer元素中，嵌入了文章的著作權，作為腳註。整個樣本的內容相對比較獨立、完整，因此，對這部分內容使用了article元素。

article元素是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯。例如，一篇部落格文章中，針對該文章的評論就可以使用嵌套article元素的方式；用來呈現評論的article元素被包含在表示整體內容的article元素裡面。

接著，讓我們來看一個關於article元素嵌套的程式碼範例，代碼如下：

<article>
      <header>
            <h1>article元素使用方法</h1>
            <p>發表日期：<time pubdate="pubdate">2010/10/10</time></p>
      </header>
      <p>article元素是什嗎？怎樣使用article元素？……</p>
      <section>
            <h2>評論</h2>
            <article>
                  <header>
                        <h3>發表者：shenmiweiyi</h3>
                        <p><time pubdate datetime="2011-12-23T:21-26:00">1小時前</time></p>
                  </header>
                  <p>這篇文章很不錯啊，頂一下！</p>
            </article>
            <article>
                  <header>
                        <h3>發表者：神秘唯一</h3>
                        <p><time pubdate datetime="2011-12-23T:21-26:00">1小時前</time></p>
                  </header>
                  <p>這篇文章很不錯啊，對article解釋的很詳細</p>
            </article>
      </section>
</article>

這個樣本中的內容比上述代碼更加完整了，它添加了文章讀者的評論內容，樣本內容分為幾個部分，文章標題放在了header元素中，文章本文放在了 header元素後面的p元素中，然後section元素把本文與評論進行了區分（是一個分塊元素，用來把頁面中的內容進行區分），在section元素中嵌入了評論的內容，評論中每一個人的評論相對來說又是比較獨立的、完整的，因此對它們都使用一個article元素，在評論的article元素中，又可以分為標題與評論內容部分，分別放在header元素與p元素中。

另外，article元素也可以用來表示外掛程式，它的作用是使外掛程式看起來好像內嵌在頁面中一樣。代碼如下：
<article>
      <h1>一個外掛程式</h1>
      <object>
            <param name="allowFullScreen" vlaue="true">
            <embed src="#" width="600" height="395"></embed>
      </object>
</article>

代碼範例

<article class="film_review">   
 
      <header>   
 
        <h2>侏羅紀公園</h2>   
 
      </header>   
 
      <section class="main_review">   
 
        <p>Dinos were great!</p>   
 
      </section>   
 
      <section class="user_reviews">   
 
        <article class="user_review">   
 
          <p>Way too scary for me.</p>   
 
          <footer>   
 
            <p>   
 
              Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.    
 
            </p>   
 
          </footer>   
 
        </article>   
 
        <article class="user_review">   
 
          <p>I agree, dinos are my favorite.</p>   
 
          <footer>   
 
            <p>   
 
              Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.    
 
            </p>   
 
          </footer>   
 
        </article>   
 
      </section>   
 
      <footer>   
 
        <p>   
 
          Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.    
 
        </p>   
 
      </footer>   
 
    </article>