淺談HTML5中分節元素
1、什麼是分節元素
HTML5中的分節元素用於幫助Web開發者組織內容，此類元素從邏輯將文件劃分為章節，每一個元素通常以heading元素作為開端，以footer元素作為結束。
HTML5中的4個分節元素如下:
1、<article>元素對應一段獨立的分節內容，可以將不同的article分節聚合在一起，並由它們構造成頁面。article可以是以下內容：
a、一篇雜誌或者新聞稿件
b、一篇部落格
c、一篇論壇主題
d、一篇部落格評論
e、其他獨立內容
可以在<article>中放入一個<header>和一個<footer>.大部分article還擁有某種型別的標題。還可以在article中放入<section>
<article>
<h1>My Pets</h1>
<p>I have always loved animals，I have always loved animals</p>
</article>
2、<aside>用於定義與文件主要內容無關或者關係不大的內容，也可以作為Web頁面的側邊欄出現，提供於整體網站而不是頁面主要內容相關的資訊。
<aside>的型別取決於<aside>所在的位置，如<aside>位於<article>
<aside>位於<article>標籤之外，則它的作用必然是定義與網站整體相關的內容，並非位於頁面article相關的內容，例如部落格連結或廣告(與頁面內容相關)這類側邊欄元素
<article> <h1>My Pets</h1> <p>I have always loved animals，I have always loved animals</p> <aside> <h1>Photos of my Pets</h1> <ul> <li><a href="#">A</a> </li> <li><a href="#">B</a> </li> </ul> </aside> </article>
如上程式碼所示，<aside>位於<article>標籤裡，因此它與頁面主要內容相關
<body>
<article>
<h1>My Pets</h1>
<p>I have always loved animals，I have always loved animals</p>
</article>
<aside>
<h1>Photos of my Pets</h1>
<ul>
<li><a href="#">A</a> </li>
<li><a href="#">B</a> </li>
</ul>
</aside>
</body>
上面程式碼所示，<aside>位於<article>外部，因此它與網站的整體相關，而不是與特定內容相關。
3、<nav>：將一段內容定義為到其他頁面或網站其他區域的連線，無需將頁面所有連結列表都囊括在<nav>元素中，該元素僅對應頁面的主要導航
大部分Web設計者其實已經變相的在使用<nav>元素——為<div>或<ul>賦予"nav"或"navigation"的ID
<ul id="nav">
<li><a href="#">A</a> </li>
<li><a href="#">B</a> </li>
</ul>
其實若web頁面擁有類似分節，應將其放入<nav>元素中
<nav>
<h1>Navigation</h1>
<ul id="nav">
<li><a href="#">A</a> </li>
<li><a href="#">B</a> </li>
</ul>
</nav>
4、<section>:不僅僅是一個普通的容器元素。當一個元素只是為了樣式化或者方便指令碼使用時，應該使用div元素，
下面是幾個確定是否使用<section>元素的一些依據
a、該分節是否有自己標題？如果沒有，則不應該使用<section>元素
b、該分節是否為頁面大綱中的一個部分？如果不是，就不應該使用<section>
c、進行這個分節除了樣式化是否還有別的目的？如果僅將一個<section>標籤用作樣式化的鉤子，就應當用<div>元素來代替它
d、該分節內容是否符合<article>、<aside>或<nav>的標準？如果可以合併該內容，應當使用<article>；如果該內容與網站或者文章相關，則應該使用<aside>；如果該內容為導航，則應該使用<nav>。
可以在部落格的<aside>中放入<section>元素。大部分部落格都有一個帶友情連結、最新博文、目錄之類的<aside>，而上面的每一項都可以成為一個<section>
<aside>
<section>
<h1>Blogroll</h1>
<ul>
<li><a href="#">友情連結1</a> </li>
<li><a href="#">友情連結2</a> </li>
</ul>
</section>
<section>
<h1>Catefories</h1>
<ul>
<li><a href="#">友情連結3</a> </li>
<li><a href="#">友情連結4</a> </li>
</ul>
</section>
</aside>
另外還有兩個新元素，雖然並沒有明確說明其為分節元素，但它們卻是分節的根元素
5、<details>:用於隱藏或者顯示與內容相關的附加資訊。與它相關的新元素為<summary>，<summary>是<details>元素的備選元素，它為<details>元素提供說明或總結
<input id="phone-number" type="phone">
<details>
<summary>Format</summary>
<p>1234dfdsf</p>
</details>
6、<figure>:用來定義內容中自成體系的單元，常見的figure為圖形，但也可以是任意型別的獨立內容，相關元素<figcaption>為figure提供圖例或說明。
常見的figure包括以下內容：
a、圖片或圖片組
b、程式碼段
c、詩歌或引用
d、圖形或圖表
在確定是否要把內容放進<figure>時，需要先判斷該內容是否為頁面主體不可缺少的，如果是，並且內容的確切位置並不重要，則應使用<figure>元素。
<figure>
<img src="icon.png" alt="Shasta">
<figcaption>
<p>A photo of my dog Shasta</p>
</figcaption>
</figure>
另外還有幾個可以被認為是分節元素的新元素，這些新元素與分節元素和分節根一起使用
7、<header>：可以包含一個分節標題和關於這個分節的介紹資訊，例如內容表格、日期和相關圖示。需要強調的是，儘管大部分情況下<header>元素都出現在文件開頭，但它也可以出現在任意分節元素的開端，例如<article>、<aside>、<nav>
8、<footer>：提供與該分節相關的資訊，例如作者、版權資訊和相關連結，可以在任意分節元素中加入<footer>，它並不會形成一個新的分節