本節書摘來自華章出版社《HTML 5與CSS 3 權威指南（第3版·上冊）》一 書中的第2章，第2.2節，作者：陸凌牛，更多章節內容可以訪問雲棲社群“華章計算機”公眾號檢視。

2.2　新增的元素和廢除的元素

本節將詳細介紹HTML 5中新增和廢除了哪些
元素。

2.2.1　新增的結構元素

在HTML 5中，新增以下與結構相關的元素。
（1）section元素
section元素表示頁面中的一個內容區塊，比如章節、頁首、頁尾或頁面中的其他部分。它可以與h1、h2、h3、h4、h5、h6等元素結合使用，標示文件結構。
HTML 5中的程式碼示例：

<section>…</section>```
HTML 4中的程式碼示例：

`
（2）article元素?
article元素表示頁面中的一塊與上下文不相關的獨立內容，譬如部落格中的一篇文章或報紙中的一篇文章。
HTML 5中的程式碼示例：

<article>…</article>```
HTML 4中的程式碼示例：

`
（3）aside元素
aside元素表示article元素的內容之外的、與article元素的內容相關的輔助資訊。
HTML 5中的程式碼示例：

<aside>…</aside>```
HTML 4中的程式碼示例：

`
（4）header元素?
header元素表示頁面中一個內容區塊或整個頁面的標題。
HTML 5中的程式碼示例：

<header>…</header>```
HTML 4中的程式碼示例：

`
（5）footer元素
footer元素表示整個頁面或頁面中一個內容區塊的腳註。一般來說，它會包含創作者的姓名、創作日期以及創作者聯絡資訊。
HTML 5中的程式碼示例：

<footer></footer>```
HTML 4中的程式碼示例：

`
（6）nav元素
nav元素表示頁面中導航連結的部分。
HTML 5中的程式碼示例：

<nav></nav>```
HTML 4中的程式碼示例：

`
（7）f?igure元素
f?igure元素表示一段獨立的流內容，一般表示文件主體流內容中的一個獨立單元。使用 f?igcaption元素為f?igure元素組新增標題。
HTML 5中的程式碼示例：

<f?igure>
<f?igcaption>PRC</f?igcaption>
<p>The People`s Republic of China was born in 1949...</p>
</f?igure>```
HTML 4中的程式碼示例：

PRC

The People`s Republic of China was born in 1949…

`
（8）main元素
main元素表示網頁中的主要內容。主內容區域意指與網頁標題或應用程式中本頁面主要功能直接相關或進行擴充套件的內容。
HTML 5中的程式碼示例：

<main>…</main>```
HTML 4中的程式碼示例：

`

2.2.2　新增的其他元素

除了結構元素外，在HTML 5中，還新增以下元素。
（1）video元素
video元素用於定義視訊，比如電影片段或其他視訊流。
HTML 5中的程式碼示例：

<video src="movie.ogg" controls="controls">video元素</video>```
HTML 4中的程式碼示例：

   <param name="src" value="movie.ogv">

`
（2）audio元素
audio元素用於定義音訊，比如音樂或其他音訊流。
HTML 5中的程式碼示例：

<audio src="someaudio.wav">audio元素</audio>```
HTML 4中的程式碼示例：

<param name="src" value="someaudio.wav">

`
（3）embed元素
embed元素用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等。
HTML 5中的程式碼示例：

<embed src="horse.wav" />```
HTML 4中的程式碼示例：

（4）mark元素
mark元素主要用來在視覺上向使用者呈現那些需要突出顯示或高亮顯示的文字。mark元素的一個比較典型的應用就是在搜尋結果中向使用者高亮顯示搜尋關鍵詞。
HTML 5中的程式碼示例：

`
HTML 4中的程式碼示例：

<span></span>```
（5）progress元素
progress元素表示執行中的程式，可以使用 progress元素來顯示 JavaScript 中耗費時間的函式的程式。
HTML 5中的程式碼示例：

`
這是HTML 5中的新增功能，故無法用HTML 4程式碼來實現。
（6）meter元素
meter元素表示度量衡，僅用於已知最大值和最小值的度量。必須定義度量的範圍，既可以在元素的文字中，也可以在 min/max 屬性中定義。
HTML 5中的程式碼示例：

<meter></meter>```
這是HTML 5中的新增功能，故無法用HTML 4程式碼來實現。
（7）time元素
time元素用於表示日期或時間，也可以同時表示兩者。
HTML 5中的程式碼示例：

`
HTML 4中的程式碼示例：

<span></span>```
（8）ruby元素
ruby元素表示 ruby 註釋（中文注音或字元）。
HTML 5中的程式碼示例：

漢 (ㄏㄢˋ)`
這也是HTML 5中的新增功能。
（9）rt元素
rt元素表示字元（中文注音或字元）的解釋或發音。
HTML 5中的程式碼示例：

<ruby>漢 <rt> ㄏㄢˋ </rt></ruby>```
這是HTML 5中的新增功能。
（10）rp元素
rp元素在 ruby 註釋中使用，以定義不支援 ruby 元素的瀏覽器所顯示的內容。
HTML 5中的程式碼示例：

漢 (ㄏㄢˋ)`
這是HTML 5中的新增功能。
（11）wbr元素
wbr元素表示軟換行。wbr元素與br元素的區別是：br元素是此處必須換行，而wbr元素意思就是瀏覽器視窗或父級元素的寬度足夠寬時（沒必要換行時），不進行換行，而當寬度不夠時，主動在此處進行換行。wbr元素好像對字元型的語言用處比較大，但是對於中文，貌似沒多大用處。
HTML 5中的程式碼示例：

<p> To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>
Request Object. </p>```
這是HTML 5中的新增功能。
（12）canvas元素
canvas元素表示圖形，比如圖表和其他影像。這個元素本身沒有行為，僅提供一塊畫布，但把一個繪圖API展現給客戶端JavaScript，以使指令碼能夠把想繪製的東西繪製到這塊畫布上。
HTML 5中的程式碼示例：

`
HTML 4中的程式碼示例：

<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200">
</object>```
（13）command元素
command元素表示命令按鈕，比如單選按鈕、核取方塊或按鈕。
HTML 5中的程式碼示例：

`
這是HTML 5中的新增功能。
（14）details元素
details元素表示使用者要求得到並且可以得到的細節資訊。它可以與summary元素配合使用。summary元素提供標題或圖例。標題是可見的，使用者點選標題時，會顯示細節資訊。summary元素應該是details元素的第一個子元素。
HTML 5中的程式碼示例：

<details>
   <summary>HTML5</summary>
   This document teaches you everything you have to learn about HTML5.
</details>```
這是HTML 5中的新增功能。
（15）datalist元素
datalist元素表示可選資料的列表，與input元素配合使用，可以製作出輸入值的下拉
列表。
HTML 5中的程式碼示例：

`
這是HTML 5中的新增功能。
（16）datagrid元素
datagrid元素表示可選資料的列表，它以樹形列表的形式顯示。
HTML 5中的程式碼示例：

<datagrid></datagrid>```
這是HTML 5中的新增功能。
（17）keygen元素
keygen元素表示生成金鑰。
HTML 5中的程式碼示例：

`
這是HTML 5中的新增功能。
（18）output元素
output元素表示不同型別的輸出，比如指令碼的輸出。
HTML 5中的程式碼示例：

<output></output>```
HTML 4中的程式碼示例：

`
（19）source元素
source元素為媒介元素（比如

<source>```
HTML 4中的程式碼示例：

`
（20）menu元素
menu元素表示選單列表。當希望列出表單控制元件時使用該標籤。
HTML 5中的程式碼示例：

<menu>
  <li><input type="checkbox" />Red</li>
  <li><input type="checkbox" />blue</li>
</menu>```
在HTML 4中，menu元素不被推薦使用。
（21）dialog元素
dialog元素表示對話方塊。
HTML 5中的程式碼示例：

`

2.2.3　新增的input元素的型別

HTML 5中新增很多input元素的型別，現列舉如下：
email：email型別表示必須輸入e-mail地址的文字輸入框。
url：url型別表示必須輸入URL地址的文字輸入框。
number：number型別表示必須輸入數值的文字輸入框。
range：range型別表示必須輸入一定範圍內數字值的文字輸入框。
Date Pickers：HTML 5擁有多個可供選取日期和時間的新型輸入文字框。
date：選取日、月、年。
month：選取月、年。
week：選取周和年。
time：選取時間（小時和分鐘）。
datetime：選取時間、日、月、年（UTC時間）。
datetime-local：選取時間、日、月、年（本地時間）。

2.2.4　廢除的元素

由於各種原因，在HTML 5中廢除了很多元素，簡單介紹如下。
1.?能使用CSS替代的元素
對於basefont、big、center、font、s、strike、tt、u等元素，由於它們的功能都是純粹為畫面展示服務的，而HTML 5中提倡把畫面展示性功能統一放在CSS樣式表中統一編輯，所以將這些元素廢除，使用編輯CSS、新增CSS樣式表的方式進行替代。其中font元素允許由“所見即所得”的編輯器進行插入，s元素、strike元素可以由del元素進行替代，tt元素可以由CSS的font-family屬性進行替代。
2.?不再使用frame框架
對於frameset元素、frame元素與noframes元素，由於frame框架對網頁可用性存在負面影響，在HTML 5中已不支援frame框架，只支援iframe框架，或者由伺服器方建立的由多個頁面組成的複合頁面的形式，同時將這三個元素廢除。
3.?只有部分瀏覽器支援的元素
對於applet、bgsound、blink、marquee等元素，由於只有部分瀏覽器支援這些元素，特別是bgsound元素以及marquee元素，只被Internet Explorer所支援，所以在HTML 5中被廢除。其中applet元素可由embed元素或object元素進行替代，bgsound元素可由audio元素進行替代，marquee可以由JavaScript程式設計的方式所替代。
4.?其他被廢除的元素
其他被廢除元素還有：
廢除rb元素，使用ruby元素替代。
廢除acronym元素，使用abbr元素替代。
廢除dir元素，使用ul元素替代。
廢除isindex元素，使用form元素與input元素相結合的方式替代。
廢除listing元素，使用pre元素替代。
廢除xmp元素，使用code元素替代。
廢除nextid元素，使用GUIDS替代。
廢除plaintext元素，使用”text/plian”?MIME型別替代。