1.  元素分類

元資料元素（metadata element）：由此可見主要是<meta>元素中的事情了，向瀏覽器提供資訊和指示；

流元素（flow element）：聽名字怪異，但是其實是規定這些元素可以成為父元素；

短語元素（phrasing element）：和流元素呼應，規定這些元素可以成為子元素。

元資料還好理解，就是流元素和短語元素好奇怪，舉個例子，div既可以是流元素也可以是短語元素，因為它能包含其他的元素也能被其他的元素包含。但是像<b>這樣的就僅僅是短語元素了。

其實大家使用這些元素的時候注意一定的規範，時間長了，也不會亂用短語元素和流元素。真的是對初學者來說真的好辛苦，反而拘束了。

差點忘了，還有第四種類型：受限元素。這些元素要麼沒什麼特別的含義，要麼就只能用在一些非常有限的情況下。比如說，<li>元素只能有三種父元素<ul>、<ol>、<menu>。

2.  常用元素及其說明

下面列舉一些常見的元素標籤，及其型別，是否新增。

1.  文字元素

看個例子：

<label> a: </label><p>This links to <a href="http://www.baidu.com" target="_blank">baidu</a>. </p>
<br>
<label> abbr: </label><p>The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.</p>
<br>
<label> b: </label><p>這是普通文字 - <b>這是粗體文字</b>。</p>
<br>
<label> cite: </label><p><cite>《富春山居圖》</cite>由黃公望始畫於至正七年(1347)，於至正十年完成。</p>
<br>
<label> code: </label><p>
下面是程式碼，等寬文字顯示。
<code>
function helloworld(){
    alert("Hello World!");
}
</code>
</p>
<br>
<label> del: </label><p><del>我是被刪掉的話</del>，文字上會有條線。</p>
<br>
<label> dfn: </label><p><dfn>dfn是defining instance的縮寫</dfn>, 顯示上為斜體。</p>
<br>
<label> em: </label><p>em在顯示上為<em>斜體</em>。</p> 
<br>
<label> i: </label><p>漢語：你好。 俄語：<i> Привет </i>。現實上為斜體。</p>
<br>
<label> ins: </label><p>這件商品現在是 <del>100元</del> <ins>50元</ins> 一件。搭配del使用</p>
<br>
<label> kbd: </label><p>常用來顯示計算機輸出<kbd>Keyboard input</kbd>。現實上是等寬字型。</p>
<br>
<label> mark: </label><p>Do not forget to buy <mark>milk</mark> today.</p>
<br>
<label> q: </label><p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q> we hope they succeed. 顯示上有引號。</p>
<br>
<label> ruby: </label><p>在東亞使用，顯示的是東亞字元的發音。</p>
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
<br>
<label> samp: </label><p>常用來顯示計算機輸出<samp>Sample input</samp>。現實上是等寬字型。</p>
<br>
<label> small: </label><p><small>This text is small</small></p>
<br>
<label> sub: </label><p>This text contains
<sub>subscript</sub>. ex: H<sub>2</sub>O</p>
<br>
<label> sup: </label><p>This text contains
<sup>superscript</sup>. ex: 1230 = 1.23 * 10<sup>3</sup>.</p>
<br>
<label> time: </label><p>
我在 <time datetime="2008-02-14">情人節</time> 有個約會。
</p>
<br>
<label> var&pre: </label>
<p>pre 標籤很適合顯示計算機程式碼：</p>
<p>var 標籤斜體顯示變數：</p>
<pre>
function HelloWorld(){
    return "Hello World";
}
var <var style="color:red" >test</var> = HelloWorld();
alert(test);
</pre>
<br>
<label> wbr: </label><p>
如果想學習 AJAX，那麼您必須熟悉 XML<wbr>Http<wbr>Request 物件。
</p>
<p>當正常情況下英文寬度過小，不足以在行末書寫完一個詞時，就將行末整個詞放到下一行，實現換行，但是加入上面位置的<wbr>時，軟換行就能收主動拆分單詞.（IE系列除了9都不支援，其他都支援）。</p>
<br>

2.  對內容分組

3.  劃分內容

下列元素用於劃分內容，讓每個概念，觀點或主題彼此分開。

<label> blockquote:</label>
<p>
Here comes a long quotation:
 
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
 
請注意，瀏覽器在 blockquote 元素前後添加了換行，並增加了外邊距。
</p>
<br>
<label> figure:</label>
<p>上海盧浦大橋是當今世界第一鋼結構拱橋，是世界上跨度最大的拱形橋。它也是世界上首座完全採用焊接工藝連線的大型拱橋（除合攏介面採用栓接外），現場焊接焊縫總長度達4萬多米，接近上海市內環高架路的總長度。盧浦大橋像澳大利亞悉尼的海灣大橋一樣具有旅遊觀光的功能。</p>
 
<figure>
  <figcaption>黃浦江上的的盧浦大橋</figcaption>
  <img src="http://www.w3school.com.cn/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
<br>
<label> address:</label>
<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<br>
<label> artice:</label>
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（簡稱 IE9）於 2011 年 3 月 14 日釋出.....</p>
</article>
<br>
<label> aside:</label>
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
<br>
<label> details:</label>
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
<p>僅chrome&Safari支援</p>
<br>
<label> footer:</label>
<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>
</footer>
<br>

4.  製表

下列元素用於製作顯示資料的表格。表格在HTML5中的主要變化是不能呢過在用來控制頁面佈局。

5.  建立表單

下列元素用於建立HTML表單，以便獲取使用者輸入的資料。

6.  嵌入內容

下列元素用於在HTML文件中嵌入內容。

使用HTML5語義化的意義：

為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、程式碼結構:為了裸奔時好看；

使用者體驗：例如title、alt用於解釋名詞或解釋圖片資訊、label標籤的活用；

有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；

方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；

便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

在使用時我們應注意：

儘可能少的使用無語義的標籤div和span；

在語義不明顯時，既可以使用div或者p時，儘量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；

不要使用純樣式標籤，如：b、font、u等，改用css設定。

需要強調的文字，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong預設樣式是加粗（不要用b），em是斜體（不用i）；

使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；

表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；

每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。

從上面例子可以看出來，很多標籤的說明不一樣，但是他們的顯示和功能很相近，比如說div,article,section。他們在頁面中的顯示是一樣的，屬性也大致相同，但是div是無任何語義的容器，而article，和section則各自有自己的語義。所以每個標籤都有其存在的意義，與其他標籤的差異，這些差別需要我們在工作中去理解，應用。