HTML5 新元素

HTML 5 是一個新的網路標準,目標在於取代現有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 標準。它希望能夠減少瀏覽器對於需要插件的豐富性網路應用服務(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 與 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和屬性,反映典型的現代用法網站。其中有些是技術上類似 <div> 和 <span> 標籤,但有某種意義,例如 <nav>(網站導覽區塊)和 <footer>。這種標籤將有利於搜尋引擎的索引整理、小螢幕裝置和視障人士使用。同時為其他瀏覽要素提供了新的功能,透過一個標準接口,如 <audio> 和 <video> 標記。

下面我們來看看HTML 5提供的一些新的標籤用法以及和HTML的差異。

<article>標籤定義外部的內容。例如來自一個外部的新聞提供者的一篇新的文章,或是來自 blog 的文本,或是來自論壇的文本。亦或是來自其他外部來源內容。
HTML5:<article></article>
HTML4:<div></div>

<aside>標籤定義 article 以外的內容。 aside 的內容應該與 article 的內容相關。
HTML5:<aside>Aside 的內容是獨立的內容,但應與文件內容相關。 </aside>
HTML4:<div>Aside 的內容是獨立的內容,但應與文件內容相關。 </div>

<audio> 標籤定義聲音,例如音樂或其他音訊串流。
HTML5:<audio src="someaudio.wav">您的瀏覽器不支援 audio 標籤。 </audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>/object> ;

<canvas> 標籤定義圖形,例如圖表和其他圖像。這個 HTML 元素是為了客戶端向量圖形而設計的。它自己沒有行為,但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type=" image/svg+xml" width="200" height="200"></object>

<command> 標籤定義指令按鈕,例如單選按鈕、複選框或按鈕。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> 標籤定義可選資料的清單。與input 元素配合使用,就可以製作出輸入值的下拉清單。可進行查看,或透過點擊進行隱藏。 ;details></details>
HTML4: <dl style="display:hidden"></dl>

#<embed> 標籤定義嵌入的內容,例如外掛程式。 ##HTML5: <embed src="horse.wav" />

HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object>

<figcaption> 標籤定義figure 元素的標題。 ”figcaption” 元素應該被置於“figure” 元素的第一個或最後一個子元素的位置。 <figcaption>PRC</figcaption></figure>

HTML4: none

<figure> 標籤用於對元素進行組合。使用 <figcaption> 元素為元素組新增標題。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure> ;dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

<footer> 標籤定義定義section 或document 的頁尾。典型地,它會包含創作者的姓名、文件的創作日期以及/或聯絡資訊。

HTML5: <footer></footer>
HTML4: <div></div>

<header> 標籤定義 section 或 document 的頁首。

HTML5: <header></header>
HTML4: <div></div>

<hgroup> 標籤用於網頁或區段(section)的區段(section)的標題進行組合。

HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> 標籤定義產生金鑰。
HTML5: <keygen>
HTML4: none

<mark>主要用來在視覺上向使用者呈現那些需要突出的文字。 <mark>標籤的一個比較典型的應用程式就是在搜尋結果中向使用者高亮顯示搜尋關鍵字。
HTML5: <mark></mark>
HTML4: <span></span>

<meter> 標籤定義度量衡。僅用於已知最大值和最小值的度量。必須定義度量的範圍,既可以在元素的文字中,也可以在 min/max 屬性中定義。
HTML5: <meter></meter>
HTML4: none

<nav> 標籤定義導覽連結的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> 標籤定義不同類型的輸出,例如腳本的輸出。
HTML5: <output></output>
HTML4: <span></span>

#<progress> 標籤運作中的進程。可以使用 <progress> 標籤來顯示 JavaScript 中耗費時間的函數的進程。
HTML5: <progress></progress>
HTML4: none

<rp> 標籤在ruby 註解中使用,以定義不支援ruby 元素的瀏覽器所顯示的內容。
HTML5: <ruby>漢<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></#ruby>)</rp></rt></#ruby>)</rp></rt></#cgt; : none

<rt> 標籤定義字元(中文註音或字元)的解釋或發音。

HTML5: <ruby>漢<rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby>.或字元)。

HTML5: <ruby>漢<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></#ruby>)</rp></rt></#ruby>)</rp></rt></#cgt; : none

<section> 標籤定義文件中的節(section、區段)。例如章節、頁首、頁尾或文件中的其他部分。

HTML5: <section></section>

HTML4: <div></div>

<source> 標籤為媒介元素(如 <video> 和 <audio>)定義媒介資源。
HTML5: <source>
HTML4: <param>

<summary> 標籤包含details 元素的標題,”details” 元素用於描述有關文檔或文檔片段的詳細資訊。 ”summary” 元素應該是 “details” 元素的第一個子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4:

HTML4:

#HTHTML4:
HTHTML4:
HTHTML4 ;time> 標籤定義日期或時間,或兩者。

HTML5: <time></time>

HTML4: <span></span>

<video> 標籤定義視訊,例如電影片段或其他視訊串流。

HTML5: <video src="movie.ogg" controls="controls">您的瀏覽器不支援 video 標籤。 </video>

HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object> ;

已移除的元素

以下的HTML 4.01 元素在HTML5中已刪除:

<acronym>

#<applet>

<basefont>

<big>

<center>

<dir>

#<font>

<frame>

<frameset>

<noframes>

<strike>

<tt>

######
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5</title> </head> <body> <!-- 观察新标签与原来的标签的区别 --> <article> <header> <hgroup> <h1>这是一篇介绍HTML5新标签的文章</h1> <h2>HTML5的革新</h2> </hgroup> <time datetime="2016-03-20">2016.03.20</time> </header> <p>文章内容详情</p> </article> <nav> <ul> <li>咖啡</li> <li>绿茶</li> <li>饮料</li> </ul> </nav> </body> </html>