HTML5語義元素

  語義元素

article,aside,nav,section,header,footer

上面這些語義元素不會給頁面內容形成任何視覺上的改變，它們只是提供html文檔的結構，供計算機和開發者讀取和閱讀！

article元素

article元素對應一段獨立的內容，能夠將不一樣的article分節聚合在一塊兒，並構成頁面。article能夠是如下內容。

1,一篇雜誌或新聞稿件

2，一篇博客

3，一個論壇主題

4，一篇博客評論

article元素中能夠放header,footer,section元素，section中 也能夠放article元素。

鑑別內容是否合適article的最簡單的辦法是判斷該內容可否在聚合後獨立存在。

<article>
   <h1>標題</h1>
   <p>我喜歡動物，我未來確定有一隻小寵物！！</p>
</article>

 

aside元素

aside元素定義的是與主要 內容無關或者關係不大的內容。它也能夠做爲web頁面的側邊欄出現，提供與整個網站而不是頁面相關的信息。

aside的類型取決於aside所在的位置。如aside在article標籤中，，則做用是定義與article相關的內容，例如，相關的article的詞彙表或列表。若是aside位於article元素以外，則他的做用是定義整個網站相關的內容，如博客連接或廣告這類側邊欄元素。

<article>
   <h1>標題</h1>
   <p>我喜歡動物，我未來確定有一隻小寵物！！</p>
   <aside>
      <h1>標題</h1>
      <p>側邊欄內容，其實能夠是連接</p>
   </aside>
</article>

 <aside>
      <h1>標題</h1>
      <ul>
         <li>序列1</li>
         <li>序列2</li>
      </ul>
   </aside>

 

nav元素

    

　　<nav> 標籤訂義導航連接的部分。

      nav元素是一段連接到其餘頁面或網站的連接。無須將全部的頁面連接列表都囊括在nav當中。該元素僅對應也面的主要導航。

      nav元素最好用於主導航，也是大部分用戶惟一關心的導航。不過，主導航的內容始終是網站以及開發者決定的。一些網站主導航只有一個，其餘做爲內容連接存在。有的網站主導航則是有3~4個主導航。

      在基本主導航以外還能夠用到nav元素的地方包括一下：

     1，內容表格

     2，上一頁和下一頁連接

     3，麪包屑導航

<nav>
   <h1>標題</h1>
   <ul id='nav'>
       <li>序列1</li>
       <li>序列2</li>
       <li>序列3</li>
    </ul>
</nav>

 

section元素

  <section> 標籤訂義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。

  根據‘w3c’的定義，‘section’不單單是一個普通的容器元素。當一個元素只是爲了樣式化或者方便腳本使用時，，應該使用div元素。

 下面是幫助開發人員肯定是否使用section元素的一些依據。

1，該分解是否有本身的標題？若是沒有就不該該使用section元素。

2，該分節是否爲頁面大綱中的一部分？若是不是就不該該使用section元素

3，進行這個分節除了樣式化是否還有別的目的？若是將一個section標籤用做樣式化的鉤子，就應該用div元素代替。

能夠在博客的aside中放入section元素。大部分博客都帶有友情連接，最新博文，目錄之類的aside,上面每一項均可加入section.

<section>
  <h1>標題</h1>
  <ul>
     <li>序列1</li>
      <li>序列2</li>
     <li>序列3</li>
  </ul>
</section>

header,footer元素

<header>元素描述了文檔的頭部區域

<header>元素注意用於定義內容的介紹展現區域.

在頁面中你可使用多個<header> 元素.

<footer> 元素描述了文檔的底部區域.

<footer> 元素應該包含它的包含元素

一個頁腳一般包含文檔的做者，著做權信息，連接的使用條款，聯繫信息等

文檔中你可使用多個 <footer>元素.

另外，header元素能夠包含一個分節標題和關於這個分節的介紹信息，例如，內容表格，日期和相關圖標。儘管大部分狀況下header出如今文檔的開頭，但也能夠出如今任意分節元素的開端，如：article,aside,nav.

footer元素和header元素相似，它能夠出如今任意分節元素的結尾，提供相關的信息，例如：做者，版權信息，和相關連接。

 

ps:此內容大部分來自《html5移動應用開發》