HTML5与HTML4 的差异

⟨ 和 ⟩ 命名字符引用现在从 U+2329 和 U+232A(左/右点尖括号)分别扩大到 U+27E8 和 U+27E9(数学的左/右尖括号)

添加了许多新的命名字符引用，包括所有来自MathML的字符

允许Void元素(在HTML4中被称为"EMPTY")有结尾斜杠(trailing slash)

在更多的情况下，与符号 (&) 相比HTML4，会保持不转义

属性间必须被至少1个空白字符分隔

空值的属性可以只写属性名而省略等号和值，即使属性不是布尔属性。(人们普遍认为HTML4允许省略布尔属性的值，然而事实是，对于枚举属性，HTML4允许只用属性 value 并省略属性名，但这一点浏览器并不支持。)

允许对值省略引号的属性使用比HTML4更大的字符集

HTML解析器不做任何属性值空白的标准化；比如，id 属性中的开头和结尾空白不会被忽略(从而导致无效)，并且在 input 的 value 属性中可以不必使用字符引用，而使用换行符。

optgroup 结束标签现在是可选项

colgroup 开始标签现在是可选项并且由HTML解析器推断出来

section 代表一个通用的文件或应用部分。 它应该和 h1, h2, h3, h4, h5, 以及 h6 元素同时使用来表明文档的结构。

article 代表了一个文档内容的独立片段，比如博客条目或报纸文章。

main 代表了文档或应用的主体内容。

aside 代表了一段与页面的其余部分稍有关联的内容。

header 代表一组介绍或导航辅助。

footer 代表一个部分(section)的尾(footer)并可以容纳关于作者、版权等信息。

nav 代表了用于导航目的的文档的一部分。

figure 代表一个独立的流内容片段，通常作为一个文档主流的独立单元。

<figure>
 <video src="example.webm" controls></video>
 <figcaption>Example</figcaption>
</figure>

figcaption 被用作标题 (它是可选的)。

template 可被用于声明HTML片段，其会被脚本复制以及插入到文档中。

video 和 audio 用于多媒体内容。 两者都提供了一个API使得Web开发者可以编写他们自己的用户界面，但也有一种方法触发由用户代理提供的用户界面。如果有各种类型的可用流，source 被与这些元素放在一起使用。

track 提供了 video 元素的文本轨道。

embed 用于插件内容。

mark 代表一连串文档中用作参考的被备注和高亮的文本，由于其在另一个上下文相关。

progress 代表一个任务完成度，比如下载或者执行一系列耗时的操作。

meter 代表一个度量，比如磁盘使用情况。

time 表示日期和(或)时间。

ruby, rt, 以及 rp 用来标注ruby注释

bdi 代表从其周围独立出来的一段文本，目的是要使用双向文本格式

wbr 代表一个换行时机

canvas 用来渲染即时创建的动态位图，比如图表和游戏。

datalist 与 input 的新属性 list 一起使用可以创建组合框：

<input list="browsers">
<datalist id="browsers">
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>

keygen 代表了密钥对的生成控制。

output 代表了一些输出类型，比如表单里的通过脚本的计算结果。

为了和 a 和 link 元素的一致性，area 元素现在也有了hreflang, type 和 rel 属性。

主要为了和 a 元素的一致性，base 元素也有了 target 属性。(这已被广泛支持)

meta 元素现在有了 charset 属性，因为这已经被广泛支持并且提供了一个定义文档字符编码(character encoding)的好方法。

可以在 input (除了当 type 属性为 hidden 时), select, textarea 和 button 元素上定义一个新的 autofocus 属性。它提供了一种页面加载时聚焦表单控件的声明方式。相比使用脚本聚焦元素，使用这个特性可以提升用户体验，比如，如果用户不喜欢可以关闭它。

可以在 input 和 textarea 元素上定义一个新的 placeholder 属性。它代表了一个提示，旨在帮助用户数据录入。

<input type=search name=q placeholder="Enter search phrase..."> <button>Search</button>

<label>Email <input type=email name=email placeholder="john@example.com"></label>

placeholder 属性不该被用作 label 元素的替代。

<!-- Do not do this: -->
<input type=email name=email placeholder="Email">

input, output, select, textarea, button, label, object 和 fieldset 元素有了新的 form 属性，允许控件关联一个表单。现在这些元素可以放置在页面的任何地方，它们仍和 form 关联，而不是只能作为 form 元素的子元素。

<table>
 <tr>
  <th>Key
  <th>Value
  <th>Action
 <tr>
  <td><form id=1><input name=1-key></form>
  <td><input form=1 name=1-value>
  <td><button form=1 name=1-action value=save>?</button>
      <button form=1 name=1-action value=delete>?</button>
 ...
</table>

input (除了 type 属性值是 hidden , image 或一些按钮类型比如 submit 外), select 和 textarea 有了新的 required 属性，它提示用户为了能够提交表单而必须填入一个值。对于 select 来说，第一个 option 元素必须以一个空值占位。

<label>Color: <select name=color required>
 <option value="">Choose one
 <option>Red
 <option>Green
 <option>Blue
</select></label>

fieldset 元素现在允许用 disabled 属性来禁用所有子元素的控制(不包括那些 legend 元素的子元素)，并允许用 name 属性作脚本访问。

input 元素有几个新的属性来来指定约束： autocomplete, min, max, multiple, pattern 和 step。之前已经提到，它还有一个与 datalist 元素一起使用的新的 list 属性。当使用 type=image 时，它也有 width 和 height 属性来指定图像的尺寸。

input 和 textarea 元素有了一个新元素 dirname，用于用户所设置的提交的方向性的控制

textarea 元素也多了三个新属性，maxlength, minlength 和 wrap，分别用来控制最大输入长度和提交的换行行为。

form 元素有了 novalidate 属性，可以用来禁用表单验证提交(即表单总是可以被提交)。

input 和 button 元素有了新属性 formaction, formenctype, formmethod, formnovalidate, 和 formtarget。如果存在，它们覆盖 form 元素上的 action, enctype, method, novalidate, 和 target 属性。

input元素也有了一个新属性 minlength。

script 元素有了一个新属性 async，可以影响脚本的加载和执行。

html 元素有了一个新属性 manifest，指向一个用于结合离线Web应用API的应用程序缓存清单。

link 元素有了一个新的属性 sizes 。可以结合 icon 的关系(通过设置 rel 属性，可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。

ol 元素有了一个新属性 reversed 。当其存在时，代表列表中的顺序为降序。

iframe 元素有了新属性分别是 sandbox 和 srcdoc，用以允许沙箱内容，例如，博客评论。

object 元素有一个新的属性叫做 typemustmatch， 其允许更安全的嵌入外部资源。

img 元素有了一个新属性叫做 crossorigin 用来在获取过程中使用CORS并且如果成功的话，允许图像数据被 canvas API 读取。

contenteditable 属性表明元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。

Web开发者定义的 data-* 集合。Web开发者可以定义他们想要的任何属性只要他们在其之前加上 data- 前缀来避免与将来版本的HTML的冲突。这些属性是用作存储Web页面或应用自身消耗的自定义数据的。而不是用来给其他各方(比如用户代理)消耗的。

hidden 属性表示一个元素尚未，或不再有所关联

role 和 aria-* 集合属性用来指导辅助技术。

spellcheck 属性允许暗示是否内容可以被拼写检查。

translate 属性给了翻译器内容是否应该被翻译的提示。

address 元素现在被最近的祖先 article 或 body 元素限定了作用范围。

b 元素现在代表一段文本，这段文本仅仅出于功利的目的被提请注意，这种目的里没有传达任何额外的重要性，也没有交替的语言和心情的意味，比如文档摘要的关键字，审查中的产品名，文本驱动的交互软件的可操作词，或文章的导引。

blockquote元素仍旧代表从引自其他来源的内容，但现在也允许包含在 footer 或 cite元素中的引文，以及行间的变化比如注解和缩写。

dl 元素现在代表一组名称-值的关联列表，并且不再适用于对话。

hr 元素现在代表一个段级专题间断(paragraph-level thematic break)。

i 元素现在代表一段有着交替的语言和心情意味的文本，或者，以表明一种不同的文本质量的方式偏离平常的散文，比如分类命名，技术术语，其它语言的惯用短语，一个念头，或西文的船名。

对于 label 元素，浏览器不应该再将焦点从标签移动到控件上，除非这种行为对于底层平台的用户界面是标准的。

当用户代理不支持之前文档里中的 script 元素所调用的脚本语言时，noscript 不再被渲染。

s 元素现在代表内容不再准确或不再有关联。

script 元素现在可以被用作脚本或者自定义数据块。

small 元素现在代表侧边注释的小字。

strong 元素现在代表重要性而不是强烈的强调。

u 元素现在代表一段文本，带着虽然明白地被呈现却不怎么准确的非文本的注解。比如专名号，或者拼错的标签文本。

img 元素的 alt 属性有了更多描述性要求，并且在一些情况下可以被忽略。详情参阅规范。

input 的 accept 属性现在允许值 audio/*, video/* 和 image/*。

全局属性 accesskey 现在允许指定多字符，而用户代理能从其中选择。

form 的 action 属性不再允许有空URL。

table 的 border 属性只允许值为"1"以及空字符。

td 和 th 的 colspan 属性现在必须大于零。

当元素为圆的状态时，area 的 coords 属性不再允许半径的百分比值。

object 的 data 属性不再相对于 codebase 属性。

script 的 defer 属性现在明确地使脚本在页面完成解析时执行。

全局属性 dir 现在允许值 auto。

form 的 enctype 属性现在支持值 text/plain。

不再允许 img, iframe 和 object 的 width 和 height 属性包含百分比。也不允许使用它们将图片从固有的高宽比拉伸到另一个不同的高宽比。

link 的 href 属性不再允许有空URL。

base 的 href 属性现在允许相对URL。

如果文档的编码是UTF-8或UTF-16，所有采用URL的属性，比如，a 元素的 href 属性，现在支持IRI。

meta 的 http-equiv 属性不再表示被HTTP服务器用来在HTTP响应中创建HTTP头，而是，表示被用户代理所使用的指令。

全局属性 id 现在允许任意值，只要是唯一的，不为空的字符串，并且不包含空格字符。

全局属性 lang 除了接受有效的语言标识符以外，还能接受空字符串，就如同XML中的 xml:lang 一样。

link 的 media 属性现在接受一个媒体查询列表并且默认为"all"。

事件处理器属性(比如，onclick)现在总使用JavaScript作为脚本语言。

li 元素的 value 属性不再被废弃，因为它不是样式性的属性。ol 元素的 start 和 type 属性也是一样的情况。

全局属性 style 现在总使用CSS作为样式语言。

全局属性 tabindex 现在允许负值，其表示元素可以接受聚焦但是不能由tab切换到。

a 和 area 元素的 target 属性不再被废弃，因为它在Web应用中很有用，比如，在配合 iframe 时。

如果脚本语言和样式语言分别是JavaScript和CSS，那么 script 和 style 的 type 属性不再是必须的。

img 的 usemap 属性不再接受URL，而是接受一个 map 元素的有效哈希名引用(valid hash-name reference)。

不包含 acronym 因为它造成了大量的混淆，Web开发者可以用 abbr 表示缩写。

applet 已经被废弃，object 是更好的选择。

isindex 可以被表单控制代替。

dir 已经被废弃，更赞同使用 ul。

link 和 a 的 rev 和 charset 属性。

a 的 shape 和 coords 属性。

iframe 的 longdesc 属性。

link 的 target 属性。

area 的 nohref 属性。

head 的 profile 属性。

html 的 version 属性。

img 的 name 属性 (使用 id 替代)。

meta 的 scheme 属性。

object 的 archive, classid, codebase, codetype, declare 和 standby 属性。

param 的 valuetype 和 type 属性。

td 和 th 的 axis 属性。

td 的 abbr 和 scope 属性。

table 的 summary 属性。

form 的 accept 属性。

input 的 usemap 属性。

caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead 和 tr 的 align 属性。

body 的 alink, link, text 和 vlink 属性。

body 的 background 属性。

table, tr, td, th 和 body 的 bgcolor 属性。

object 的 border 属性。

table 的 cellpadding 和 cellspacing 属性。

col, colgroup, tbody, td, tfoot, th, thead 和 tr 的 char 和 charoff 属性。

br 的 clear 属性。

dl, ol 和 ul 的 compact 属性。

table 的 frame 属性。

iframe 的 frameborder 属性。

td 和 th 的 height 属性。

img 和 object 的 hspace 和 vspace 属性。

iframe 的 marginheight 和 marginwidth 属性。

hr 的 noshade 属性。

td 和 th 的 nowrap 属性。

table 的 rules 属性。

iframe 的 scrolling 属性。

hr 的 size 属性。

li, 和 ul 的 type 属性。

col, colgroup, tbody, td, tfoot, th, thead 和 tr 的 valign 属性。

hr, table, td, th, col, colgroup 和 pre 的 width 属性。

img 的 border 属性。如果存在其值必须是"0"。Web开发者可以使用CSS代替。

script 的 language 属性。如果存在其值必须是"JavaScript"(不区分大小写)，并且不能与 type 属性冲突。作者可以简单地忽略它，因为它没什么作用。

a 的 name 属性。Web开发者可以使用 id 属性代替。

元数据内容(Metadata content)，例如 link, script。

流内容(Flow content)，例如 span, div, 文本。其大致像是HTML4的"块级"和"行内"一起。

分片内容(Sectioning content)，例如 aside, section。

标题内容(Heading content)，例如 h1。

短语内容(Phrasing content)，例如 span, img, 文本。其大致像是HTML4的"行内"。是短语内容的元素也是流元素。

嵌入内容(Embedded content)，例如 img, iframe, svg。

交互内容(Interactive content)，例如 a, button, label。 交互内容不允许嵌套。

address 元素现在允许流内容，但是不含标题内容后代，不含分片内容后代，不含header, footer, 或 address 元素后代。

HTML4允许 head 中的 object。HTML不允许。

noscript 元素在HTML4中是"块级"元素，但在HTML中它是短语内容。

在HTML中 table, thead, tbody, tfoot, tr, ol, ul 和 dl 元素允许为空。

表元素必须符合 表模型(table model) (例如 两个单元格不允许重叠)。

table 元素现在不允许 col 元素作为直接子元素。不过，HTML解析器暗示存在 colgroup 元素，所以这个变更不会影响 text/html 内容。

table 元素现在允许 tfoot 元素成为最后的子元素。

caption 元素现在允许流内容，但不含后代 table 元素。

th 元素现在允许流内容，但不含 header, footer, 分片内容, 或标题内容后代。

a 元素现在有了一种透明(transparent)内容模型(除了它不能允许交互内容后代外)，意味着它拥护和它父元素相同的内容模型。这意味着 a 元素可以包含例如 div 元素，只要它的父元素允许流内容。

ins 和 del 元素也有透明内容模型。HTML4有类似的规则在那些无法在DTD中表达的文字里。

object 元素也有透明内容模型，在其 param 子元素之后。

map 元素也有透明内容模型。如果有一个 map 元素祖先，area 元素被认为是短语内容，这意味着它们不必作为 map 的直接子元素。

fieldset 元素不再必须有 legend 子元素。

媒体元素(video 和 audio)有了控制回放，同步多媒体元素，和定时文本轨道的 API。(比如，字幕)。

约束验证的 API(例如，setCustomValidity() 方法)。

启用离线Web应用的 API，包括 应用缓存(application cache).

允许Web应用来为某种协议或媒体类型注册自身的 API，使用 registerProtocolHandler() 和 registerContentHandler()。

结合新的全局 contenteditable 属性使用的编辑 API。

暴露文档URL组件并允许脚本导航，重定向和重新载入的 API (Location 接口)。

暴露会话历史并允许脚本不用实际导航来更新文档URL，使得应用不必滥用 fragment 组件作"Ajax风格"导航的 API (History 接口)。

base64转换的 API (atob() 和 btoa() 方法)。

安排基于时间的定时器的回调的 API (setTimeout() 和 setInterval())。

提示用户的 API (alert(), confirm(), prompt())。

打印文档的 API (print())。

处理搜索提供方的 API (AddSearchProvider() 和 IsSearchProviderInstalled())。

定义了 Window, Navigator 和 External 接口。

现在 document.title 在获取时会折叠空白。

使得 document.domain 可设置，其能改变文档的有效脚本域。

document.open() 现在清除文档(如果调用时有两个或者三个参数)，或者行为就如同 window.open() (如果调用时有三个或四个参数)。前一种情况下，在XML中抛出一个异常。

document.close(), document.write() 和 document.writeln() 在XML中抛出一个异常。后两个现在支持可变参数；它们能在文档的输入流还在被解析时就在其中加入文本，暗示调用 document.open()，或者在某些情况下被完全忽略。

document.getElementsByName() 现在返回所有带有与参数匹配的 name 属性的HTML元素。

HTMLFormElement 的 elements 现在返回一个 button, fieldset, input, keygen, object, output, select 和 textarea 元素的 HTMLFormControlsCollectionlength 返回 elements 中的节点数。

HTMLSelectElement 的 add() 现在也接受一个整数作为其第二个参数

如果参数超出范围，HTMLSelectElement 的 remove() 现在移除集合里的第一个元素。

a 和 area 元素现在字符串它们的 href 属性。

click(), focus() 和 blur() 方法现在在所有HTML元素上可用。

location, lastModified 和 readyState 用来帮助资源元数据管理。

dir, head, embeds, plugins, scripts, 以及通用的名称 getter，用来访问DOM树的各个部分。

activeElement 和 hasFocus 风别用来确定哪个元素是当前的焦点以及 Document 是否有焦点。

编辑 API 的 designMode, execCommand(), queryCommandEnabled(), queryCommandIndeterm(), queryCommandState(), queryCommandSupported(), queryCommandValue()。

所有的事件处理IDL属性。同样的，onreadystatechange 是一个特殊的事件处理IDL属性，它只在 Document 上可用。

translate, hidden, tabIndex, accessKey, contentEditable, spellcheck 和 style 反映内容属性。

dataset 是一个处理 data-* 属性的方便的特性，其作为驼峰式大小写属性暴露。比如，elm.dataset.fooBar = 'test' 设置了 elm 的 data-foo-bar 内容属性。

click(), focus() 和 blur() 允许脚本来模拟点击和移动焦点。

accessKeyLabel 给出了用户代理已经分配给元素的快捷键，Web开发者可以用 accesskey 属性来影响它。

isContentEditable 返回 true。

所有的事件处理IDL属性。

id 反映 id 内容属性。

className 反映 class 内容属性。

classList 是一个方便的 className 访问器。其返回的对象暴露了用于控制元素类名的方法(contains(), add(), remove(), and toggle())

getElementsByClassName() 返回一个带有特定类名的元素的列表。

HTMLOptionsCollection 现在有了遗留调用(legacy caller)，setter 创建器，以及成员 add(), remove() 和 selectedIndex。

HTMLLinkElement 和 HTMLStyleElement 现在实现来自CSSOM的 LinkStyle 接口。[CSSOM]

HTMLFormElement 和 checkValidity() 方法 现在有了命名的 getter 和索引的 getter。

HTMLSelectElement 现在有了 getter, item() 和 namedItem() 方法，setter 创建器, selectedOptions 和 labels IDL属性， 以及表单约束验证API的成员：willValidate。 validity, validationMessage, checkValidity(), reportValidity() 和 setCustomValidity()。

HTMLOptionElement 现在有了一个构造器 Option。

HTMLInputElement 现在有了成员 files, height, indeterminate, list, valueAsDate, valueAsNumber, width, stepUp(), stepDown()， 表单约束验证API成员，labels，以及文本域选择API的成员：selectionStart, selectionEnd, selectionDirection, setSelectionRange() 和 setRangeText()。

HTMLTextAreaElement 现在有了成员 textLength，表单约束验证API成员，labels 以及文本域选择API的成员。

HTMLButtonElement 现在有了表单约束验证API成员以及 labels。

HTMLLabelElement 现在有了成员 control。

HTMLFieldSetElement 现在有了成员 type, elements 以及表单约束验证API成员。

HTMLAnchorElement 现在有了成员 relList, text，并实现了 URLUtils 接口，其中有成员 href, origin, protocol, username, password, host, hostname, port, pathname, search, searchParams 和 hash。 HTMLLinkElement 和 HTMLAreaElement 也有了 relList IDL属性。 HTMLAreaElement 也实现了 URLUtils 接口。

HTMLImageElement 现在有了一个构造器 Image，以及成员naturalWidth, naturalHeight 和 complete。

HTMLObjectElement 现在有了成员 contentWindow，表单约束验证API成员和遗留调用(legacy caller)。

HTMLMapElement 现在有了成员 images。

HTMLTableElement 现在有了成员 createTBody()。

HTMLIFrameElement 现在有了成员 contentWindow。

感谢 ATA 的 Neil Yao，给了我第一份工作。

感谢我曾经所在团队：阿里巴巴 AliExpress UED 的每一位。

感谢 Ctrip International Website Department 收留我。