1.用於繪畫的canvas元素
2.視頻播放元素：video，音頻播放元素：audio
3.新的特殊內容元素：article、header、footer、nav、section
4.新表單控件：calendar、date、time、emal、url、search、number、range、color
5.html5提供了兩種在客戶端存儲數據的新方法：（html5使用JavaScript來存儲和訪問數據）
localStorage--沒有時間限制的數據存儲
sessionStorage--針對一個session的數據存儲（當用戶關閉瀏覽器窗口後，數據會被刪除）
在此之前這些都是由cookie來完成的。由於cookie有一個弊端就是不適合大量數據的存儲，因爲他們由每個服務器的請求來傳遞，這使得cookie速度較慢且效率不高。而在html5中，數據不是由滅個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成爲可能。
html4與html5的頁面結構對比：
html4 html5
HTML5通過引進<figure>元素，當結合 <figcaption> 元素使用時，我們就可以將圖形標題與圖形配對起來。代碼如下：
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
很可能你仍然像下面的代碼一樣給你的鏈接和腳本標籤添加類型的屬性。
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
在HTML5中,不再需要腳本、鏈接類型代碼如下：
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
使用還是HTML5不必用引號將屬性包裹起來不使用引號，不過，要是你覺得用引號會讓你覺得更加舒服的話，當然也不會有任何問題。
<p class=myClass id=someId> Start the reactor.
使你的內容可編輯
HTML5其中一個非常強大的功能就是"contenteditable"，顧名思義它將允許用戶編輯元素（包括他的子元素）內包含的任何文本內容。它的用途非常廣，如，簡單的任務清單或是基於wiki的站點也非常實用，此外，它還有一個優勢就是利用了本地的存儲。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable=”true”>
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
IE理解新的HTML5元素需要費一定的神，爲了確保新的HTML5元素能夠以塊級元素正確顯示，有必要將它們用下面的代碼定義風格：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
就算如此，IE還是不知道這些元素究竟是什麼，因而會無視這些格式，還需要用到下面的代碼來解決這個問題：
document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“menu”);
IE理解新的HTML5元素需要費一定的神，爲了確保新的HTML5元素能夠以塊級元素正確顯示，有必要將它們用下面的代碼定義風格：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
就算如此，IE還是不知道這些元素究竟是什麼，因而會無視這些格式，還需要用到下面的代碼來解決這個問題：
document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“menu”);
羣組標題（hgroup）
假 設一個網站有名稱、副標題分別用<h1>、<h2>標籤來標記，在HTML4中還沒有一種能夠將兩者之間的關係用很好的語義關係 來描述的方法，此外，當使用h2在頁面中顯示其它標題時，在層級方面問題就更多。而使用羣組標題hgroup元素，我們可以將這些標題聚集在一起，而不影 響文檔的整個綱要。
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
必要（Required）屬性
表單允許新的必要屬性，規定是否某個特定的輸入是必要的。你可以依據自己寫代碼的偏好，用下面兩種不同方式來聲明這個屬性：
<input type=”text” name=”someInput” required>
或者，更嚴謹：
<input type=”text” name=”someInput” required=”required”>
上面兩行代碼都行得通。用了這行代碼之後，並且瀏覽器支持required屬性的話， 輸入空白的表單就不會被提交。下面是一個簡單的例子，同時我們也添加了佔位符屬性：
<form method=”post” action=”">
<label for=”someInput”> Your Name: </label>
<input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>
<button type=”submit”>Go</button>
</form>
如果輸入是空的，表單將無法提交，突出顯示文本框。
自動對焦（Autofocus）屬性
同樣地，有了HTML5就不再需要用JavaScript方案來解決自動對焦的問題。如果某個輸入應該被"選擇"或被聚焦，我們現在可以使用HTML的自動對焦autofocus屬性。
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
