在HTML5以前，我們只能通過div元素作爲結構元素，而HTML5則提供了article、section、nav、aside、header、footer、main等文檔結構元素。
1.article與section元素
article：用於頁面上獨立、完善的一篇文章，該元素表示的內容是一個帖子、一篇Blog文字、一篇短文、一條完整的回覆。總而言之，只要是一篇獨立的文檔內容，就應該使用article元素來表示，規則如下。
- article元素內部可使用header定義文章標題部分。
- article元素內部可使用footer定義腳註部分。
- article元素內部可使用section把文章內容分成幾個段落。
- article元素內部可嵌套多個article作爲它的附屬文章，比如一篇Blog文章後面可以有多篇回覆文章。
section：用於對頁面的內容進行分塊。通常可以由標題內容組成，關於規則如下。
- 通常我們建議section包含一個標題，也就是h1到h5元素來定義標題。
- section元素可以包含多個article元素，表示該分塊內部包含多篇文章。
- section元素可以嵌套section元素，用於表示該分塊包含多個多個子分塊。
除了section元素可以指定cite屬性之外，article元素只支持id、class、style、contentEditable、hidden等通用屬性。
提示：article和section這兩個元素很容易混淆，因爲它們都可以包含多個元素，而且可以相互嵌套，但article和section側重點不一樣，article元素側重於表達一篇獨立的、完整的文章，而section側重對文章的內容進行分塊，下面模擬一個論壇帖子。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 論壇帖子 </title>
</head>
<body>
<h1>瀏覽帖子內容</h1>
<article>
<h2>學習Android，必須先學習Java嗎</h2>
<p>Android上的應用程序只能用Java編寫嗎？可以用C++嗎？</p>
<!-- 帖子的“回覆”部分，用section元素表示 -->
<section>
<h2>回覆內容</h2>
<!-- 每個article代表一個回覆 -->
<article>
<!-- 回覆的標題 -->
<h3>還是得學習Java</h3>
<div>作者：kongyeeku</div>
<p>雖然Android不一定要使用Java開發，還可以選擇JavaScript、<br>
或NDK開發，但Java畢竟是Android主要的開發語言，<br>
因此建議學習Android之前還是先學習Java</p>
</article>
<!-- 每個article代表一個回覆 -->
<article>
<!-- 回覆的標題 -->
<h3>Java是基礎</h3>
<div>作者：kuan008</div>
<p>Java是基礎，學好Java再去學習Android事半功倍。</p>
</article>
</section>
<!-- 帖子的“評價”部分，用section元素表示 -->
<section>
<h2>評價內容</h2>
<!-- 每個article代表一個評價 -->
<article>
<!-- 評價的標題 -->
<h3>討論很好</h3>
<p>大家討論的很深入，對我幫助很大</p>
</article>
<!-- 每個article代表一個評價 -->
<article>
<!-- 評價的標題 -->
<h3>贊</h3>
<p>不錯，贊</p>
</article>
</section>
</article>
</body>
</html>
2.header和footer元素
| header元素 | 通常代表標題。從功能上類似於h1到h6元素，不過header還可以包含普通元素，比如p、span、nav元素等。 |
| footer元素 | 用於父級元素定義腳註的部分，包括作者的版權信息、授權信息等 |
當網頁內容、acticle、section包含了更多複雜內容的標題時，此時建議使用header元素來組織，根據前面的例子修改了一下。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 論壇帖子 </title>
</head>
<body>
<!-- 網頁標題 -->
<header>
<img src="images/fklogo.gif" alt="瘋狂軟件"/>
<a href="#">返回首頁</a>
<h1>瀏覽帖子內容</h1>
</header>
<article>
<h2>學習Android，必須先學習Java嗎</h2>
<p>Android上的應用程序只能用Java編寫嗎？可以用C++嗎？</p>
<!-- 帖子的“回覆”部分，用section元素表示 -->
<section>
<h2>回覆內容</h2>
<!-- 每個article代表一個回覆 -->
<article>
<!-- 回覆的標題 -->
<header>
<h2>還是得學習Java</h2>
<div>作者：kongyeeku</div>
</header>
<p>雖然Android不一定要使用Java開發，還可以選擇JavaScript、<br>
或NDK開發，但Java畢竟是Android主要的開發語言，<br>
因此建議學習Android之前還是先學習Java</p>
</article>
<!-- 每個article代表一個回覆 -->
<article>
<!-- 回覆的頭部 -->
<header>
<h2>Java是基礎</h2>
<div>作者：kuan008</div>
</header>
<p>Java是基礎，學好Java再去學習Android事半功倍。</p>
</article>
</section>
<!-- 帖子的“評價”部分，用section元素表示 -->
<section>
<h2>評價內容</h2>
<!-- 每個article代表一個評價 -->
<article>
<!-- 評價的標題 -->
<h3>討論很好</h3>
<p>大家討論的很深入，對我幫助很大</p>
</article>
<!-- 每個article代表一個評價 -->
<article>
<!-- 評價的標題 -->
<h3>贊</h3>
<p>不錯，贊</p>
</article>
</section>
<!-- 帖子的“腳註” -->
<footer>
以上帖子和回覆只代表其個人觀點，不代表我們的觀點或立場
</footer>
</article>
<footer>
<a href="#">站點信息</a>
<a href="#">聯繫我們</a>
</footer>
</body>
</html>
3.nav與aside元素
| nav元素 | 定義頁面上的導航條，包括頁面上的主導航條、側邊、內部、頁面下方的導航 |
| aside元素 | 定義當前頁面的附屬信息，通常使用css渲染成側邊框 |
Html5提供nav和aside元素只是文檔元素，並不負責對內容進行處理，建議我們用CSS來控制，例子如下。
article {
font-size:11pt;
}
header {
background-color:#ddd;
}
footer {
border-top: 1px solid black;
font-size: 12px;
text-align: center;
}
aside {
position:absolute;
background-color:#dda;
border:1px solid black;
width: 200px;
left:75%;
}
article>aside{
top:40%;
}
body>aside{
top:5%;
}
- aside元素放在body內部，表明爲整個頁面添加邊欄。
- aside元素放在其他父元素內部，表明爲父元素添加邊欄。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 論壇帖子 </title>
<link rel="stylesheet" type="text/css" href="css.css"/><!-- 上面的css -->
</head>
<body>
<!-- 網頁標題 -->
<header>
<img src="fklogo.gif" alt="Java學習"/>返回首頁
<h1>瀏覽帖子內容</h1>
</header>
<article>
<h2>學習Android，必須先學習Java嗎</h2>
<p>Android上的應用程序只能用Java編寫嗎？可以用C++嗎？</p>
<!-- 帖子的“回覆”部分，用section元素表示 -->
<section>
<h2>回覆內容</h2>
<!-- 每個article代表一個回覆 -->
<article>
<!-- 回覆的標題 -->
<header>
<h2>還是得學習Java</h2>
<div>作者：kongyeeku</div>
</header>
<p>雖然Android不一定要使用Java開發，還可以選擇JavaScript、<br>
或NDK開發，但Java畢竟是Android主要的開發語言，<br>
因此建議學習Android之前還是先學習Java</p>
</article>
<!-- 每個article代表一個回覆 -->
<article>
<!-- 回覆的頭部 -->
<header>
<h2>Java是基礎</h2>
<div>作者：kuan008</div>
</header>
<p>Java是基礎，學好Java再去學習Android事半功倍。</p>
</article>
</section>
<!-- 帖子的“評價”部分，用section元素表示 -->
<section>
<h2>評價內容</h2>
<!-- 每個article代表一個評價 -->
<article>
<!-- 評價的標題 -->
<h3>討論很好</h3>
<p>大家討論的很深入，對我幫助很大</p>
</article>
<!-- 每個article代表一個評價 -->
<article>
<!-- 評價的標題 -->
<h3>贊</h3>
<p>不錯，贊</p>
</article>
</section>
<!-- 帖子的“腳註” -->
<footer>
以上帖子和回覆只代表其個人觀點，不代表瘋狂Java聯盟的觀點或立場
</footer>
<!-- 該aside放在article內部，將作爲該文章的“邊欄”信息 -->
<aside>
<section>
<h4>關於樓主</h4>
<div>用戶組: 編程摸索者</div>
<div>註冊日期: 2009-7-27</div>
<div>上次訪問: 2012-1-3 20:02</div>
<div>最後發表: 2012-1-1 17:38</div>
<div>發帖數級別: 小試牛刀</div>
<div>閱讀權限: 30</div>
</section>
</aside>
</article>
<footer>
<a href="#">站點信息</a>
<a href="#">聯繫我們</a>
</footer>
<!-- 該aside放在body內部，將作爲整個HTML文檔的“邊欄”信息 -->
<aside>
<h3>頁面導航</h3>
<nav>
<ul>
<li><a href="#">查看相關內容</a></li>
<li><a href="#">返回首頁</a></li>
<li><a href="#">返回本版</a></li>
</ul>
</nav>
</aside>
</body>
</html>
4.main元素
一個html頁面只能包含一個main元素，用於包含除導航條、Logo、版權信息等之外的主要內容，換句話來說，我們使用main元素，頁面中的article、section和div元素都應該放在main元素內，main元素不應該放在允許重複出現的內容中，demo如下。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 回覆 </title>
</head>
<body>
<!-- 網頁標題 -->
<header>
<h1>瀏覽回覆內容</h1>
</header>
<main>
<h2>還是得學習Java</h2>
<div>作者：kongyeeku</div>
<p>雖然Android不一定要使用Java開發，還可以選擇JavaScript、<br>
或NDK開發，但Java畢竟是Android主要的開發語言，<br>
因此建議學習Android之前還是先學習Java</p>
</main>
</body>
</html>
5.figure和figcaption元素
html爲圖像語義額外添加了figure和figcaption這兩個元素，下面我們來看看這兩個元素的功能。
| figure元素 | 表示一塊獨立的圖片區域，可以包含一個以上img元素，還可以包含一個figcaption元素，定義圖片區域的標題 |
| figcaption元素 | 通常放在figure內部，定義圖片區域的標題 |
下面使用figure元素定義了一塊圖片區域，包含了三張圖片，並且通過figcaption添加了標題。此外，還使用了css添加了邊框。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 圖片區域 </title>
</head>
<body>
<figure style="border:2px solid black;padding:5px;width:510px">
<figcaption><b>Java體系</b></figcaption>
<img src="images/java.png" alt="Java" style="width:165px;height:230px"/>
<img src="images/android.png" alt="Android" style="width:165px;height:230px"/>
<img src="images/javaee.png" alt="Java EE" style="width:165px;height:230px"/>
</figure>
</body>
</html>
figure定義的圖片區域代表了網頁上的獨立區域，每個figure元素內部只能包含一個figcaption元素。
--------------如果大家喜歡我的博客，可以點擊左上角的關注哦。