HTML5 是定义 HTML 标准的最新的版本。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML，这就是HTML5。

语义

新增元素

HTML5新增了区块与段落元素：

元素名 含义
section 表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题
article 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构
nav 表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接
header 用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素
footer 表示最近一个章节内容(Sectioning content)或者根节点（Sectioning root）元素的页脚
aside 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响
main 呈现了文档的 <body> 或应用的主体部分
hgroup 代表文档章节所属的多级别的目录
template 表示一种用于保存客户端内容的机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript实例化
figure 代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元。
figcaption 是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据

新增了音频与视频元素：

元素名 含义
audio 元素用于在文档中嵌入音频内容
video 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放
source 为 <video> 或 <audio> 这类媒体元素指定媒体源
track 为 <video> 或 <audio> 这类媒体元素指定文本轨道（字幕）

图表&公式等嵌入内容：

元素名 含义
canvas 代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等
svg 定义一个嵌入式矢量图
math 定义一段数学公式
embed 代表一个嵌入的外部资源，如应用程序或交互内容

iframe上的改进

新增了一些属性：

属性 含义
sandbox 属性对呈现在 iframe 框架中的内容启用一些额外的限制条件
seamless 规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）
srcdoc 该属性是一段HTML代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 srcdoc 属性，则会渲染 src 属性表示的内容

支持 MathML

Mathematical Markup Language (MathML) 是一个用于描述数学公式、符号的一种 XML 标记语言。

其他对于HTML4.1的优化

doctype 声明

HTML5的 doctype 非常简单

1
<!DOCTYPE html>

字符集声明

1
<meta charset="UTF-8">

通信

支持 WebSockets

WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

支持 Server-sent events

允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。

支持 WebRTC

这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。WebRTC作为一项标准,使得所有浏览器无需安装插件或第三方软件，就可以点对点地分享应用数据和进行电话会议。

离线 & 存储

支持 onLine 和 offline 事件

navigator.onLine 是一个值为 true/false (true 表示在线， false 表示离线) 的属性。

你可以使用几种熟悉的方式来注册事件：

  • 在 window，document，或 document.body 上使用 addEventListener
  • 将 document 或 document.body 的 .ononline 或 .onoffline 属性设置为一个 JavaScript Function 对象。(注意：由于兼容性原因，不能使用 window.ononline 或 window.onoffline。)
  • 在 HTML 标记中的 <body> 标签上指定 ononline=”…” 或 onoffline=”…” 特性。

支持 Web Storage（sessionStorage & localStorage）

sessionStorage 和 localStorage 让 web 应用程序能够在客户端存储结构化数据。

支持 IndexedDB

IndexedDB 是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。

支持 FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的 FileList 对象,也可以来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。

支持使用Camera API

通过Camera API,你可以使用手机的摄像头拍照，然后把拍到的照片发送给当前网页.这些操作主要是通过一个input元素来实现的，其中该元素的type属性必须为”file”，accept属性要允许图片格式，这样才能知道这个文件选择框是用来选择图片的。

性能 & 集成

支持 Web Workers

能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。

XMLHttpRequest Level 2

允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax 背后的技术。

History API

允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
通过 window.history 可以获取浏览器历史记录相关信息。使用 back(), forward() 和 go() 方法来完成在用户历史记录中向后和向前的跳转。window.history.length 来确定的历史堆栈中页面的数量。

contentEditable 属性

在HTML中，任何元素都可以被编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换为完整且快速的富文本编辑器。

Drag & Drop API

HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。

Web-based protocol handlers

可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。

requestAnimationFrame

允许控制动画渲染以获得更优性能。

Fullscreen API

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。通过 element.requestFullscreen() 请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式。document.exitFullscreen() 用于请求从全屏模式切换到窗口模式。document.fullscreen 可以获取当前是否是全屏模式， document.fullscreenElement 可以获取到当前全屏的元素。

Pointer Lock API

允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

设备访问

支持触摸事件

对用户按下触控屏的事件做出反应的处理程序。即 ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件 和 TouchEvent 。

Geolocation API

让浏览器使用地理位置服务定位用户的位置。
地理位置 API 通过 navigator.geolocation 提供，可以通过 navigator.geolocation.getCurrentPosition(success, error, options) 来获取设备当前位置。

检测设备方向

让用户在运行浏览器的设备变更方向时能够得到信息。
主要是在 window 对象添加事件监听器来实现，其中 deviceorientation 接收设备方向变化信息，devicemotion 接收设备移动信息。