This repository has been archived by the owner on Jan 15, 2021. It is now read-only.
/
Overview.whatwg.html
3277 lines (2653 loc) · 259 KB
/
Overview.whatwg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html><html lang="en-US"><head>
<meta charset="utf-8">
<title>HTML differences from HTML4</title>
<style>
.note { margin-left:2em; font-weight:bold; font-style:italic; color:green }
p.note::before { content:"Note: " }
dfn { font-style:normal; font-weight:bold }
code { color:orangered; font-size:14px }
h3 code { font-size:17px }
code :link, code :visited { color:inherit }
pre code { color:inherit }
pre strong { color:inherit; background:#ffa }
</style>
<link class="not-w3c" href="http://www.whatwg.org/style/specification" rel="stylesheet">
</head>
<body>
<!--
Editor's checklist for stuff to fix for publication:
* Previous Versions links
* Changelog headings
-->
<div class="head">
<p class="not-w3c"><a class="logo" href="//www.whatwg.org/"><img alt="WHATWG" height="100" src="http://resources.whatwg.org/logo.svg" width="100"></a></p>
<hgroup>
<h1>HTML differences from HTML4</h1>
<h2 class="no-num no-toc not-w3c">Living Document — Last Updated 2 May 2013</h2>
</hgroup>
<dl>
<dt>This Version:</dt>
<dd class="not-w3c"><a href="http://html-differences.whatwg.org/">http://html-differences.whatwg.org/</a>
<dt>Participate:</dt>
<dd><span class="not-w3c">Send feedback to
<a href="http://www.whatwg.org/mailing-list">whatwg@whatwg.org</a>
(<a href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/">archives</a>) or</span>
<a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG&component=HTML5%20differences%20from%20HTML4">file a bug</a>
(<a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=HTML%20WG&component=HTML5%20differences%20from%20HTML4&resolution=---">open bugs</a>)
<dd class="not-w3c"><a href="http://wiki.whatwg.org/wiki/IRC">IRC: #whatwg on Freenode</a>
<dt>Version History:
<dd><a href="https://github.com/whatwg/html-differences/commits">https://github.com/whatwg/html-differences/commits</a>
<dt>Editor:</dt>
<dd>Simon Pieters
(<a href="http://www.opera.com/">Opera Software ASA</a>)
<<a href="mailto:simonp@opera.com">simonp@opera.com</a>></dd>
<dt>Previous Editor:</dt>
<dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
<<a href="mailto:annevk@annevk.nl">annevk@annevk.nl</a>></dd>
</dl>
<script async="" class="not-tr" src="https://w3c-test.org/resources.whatwg.org/file-bug.js"></script>
<p class="copyright not-w3c"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="http://i.creativecommons.org/p/zero/1.0/80x15.png"></a>
To the extent possible under law, the editors have waived all copyright and
related or neighboring rights to this work. In addition, as of
2 May 2013, the editors have made this specification available
under the
<a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>,
which is available at
http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
</div>
<hr>
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
<p>HTML is the core language of the World Wide Web. The W3C publish HTML5 and HTML5.1.
The WHATWG publishes HTML, which is a rough superset of W3C HTML5.1.
"HTML differences from HTML4" describes the
differences of these documents from HTML4, and calls out cases where they differ from
each other. This document may not provide accurate information as
the specifications are still actively in development. When in doubt, always
check the specifications themselves. <a href="#refsHTML5">[HTML5]</a>
<a href="#refsHTML5NIGHTLY">[HTML5NIGHTLY]</a> <a href="#refsHTML">[HTML]</a></p>
<h2 class="no-num no-toc" id="toc">Table of Contents</h2>
<!--begin-toc-->
<ol class="toc">
<li><a href="#introduction"><span class="secno">1 </span>Introduction</a>
<ol class="toc">
<li><a href="#scope"><span class="secno">1.1 </span>Scope of this document</a></li>
<li><a href="#history"><span class="secno">1.2 </span>History of HTML</a></li>
<li><a href="#open-issues"><span class="secno">1.3 </span>Open Issues</a></li>
<li><a href="#backwards-compatible"><span class="secno">1.4 </span>Backwards Compatible</a></li>
<li><a href="#development-model"><span class="secno">1.5 </span>Development Model</a></ol></li>
<li><a href="#syntax"><span class="secno">2 </span>Syntax</a>
<ol class="toc">
<li><a href="#character-encoding"><span class="secno">2.1 </span>Character Encoding</a></li>
<li><a href="#doctype"><span class="secno">2.2 </span>The Doctype</a></li>
<li><a href="#mathml-svg"><span class="secno">2.3 </span>MathML and SVG</a></li>
<li><a href="#syntax-misc"><span class="secno">2.4 </span>Miscellaneous</a></ol></li>
<li><a href="#language"><span class="secno">3 </span>Language</a>
<ol class="toc">
<li><a href="#new-elements"><span class="secno">3.1 </span>New Elements</a></li>
<li><a href="#new-attributes"><span class="secno">3.2 </span>New Attributes</a></li>
<li><a href="#changed-elements"><span class="secno">3.3 </span>Changed Elements</a></li>
<li><a href="#changed-attributes"><span class="secno">3.4 </span>Changed Attributes</a></li>
<li><a href="#obsolete-elements"><span class="secno">3.5 </span>Obsolete Elements</a></li>
<li><a href="#obsolete-attributes"><span class="secno">3.6 </span>Obsolete Attributes</a></ol></li>
<li><a href="#content-model"><span class="secno">4 </span>Content Model</a></li>
<li><a href="#apis"><span class="secno">5 </span>APIs</a>
<ol class="toc">
<li><a href="#new-apis"><span class="secno">5.1 </span>New APIs</a></li>
<li><a href="#changed-apis"><span class="secno">5.2 </span>Changed APIs</a></li>
<li><a href="#document-extensions"><span class="secno">5.3 </span>Extensions to
<code>Document</code></a></li>
<li><a href="#htmlelement-extensions"><span class="secno">5.4 </span>Extensions to <code>HTMLElement</code></a></li>
<li><a href="#other-extensions"><span class="secno">5.5 </span>Extensions to Other Interfaces</a></li>
<li><a href="#obsolete-apis"><span class="secno">5.6 </span>Obsolete APIs</a></ol></li>
<li><a href="#changelog"><span class="secno">6 </span>HTML Changelogs</a>
<ol class="toc">
<li><a href="#changes-2012-09-14"><span class="secno">6.1 </span>Changes from 14 September 2012 to 30 April 2013</a></li>
<li><a href="#changes-2012-03-29"><span class="secno">6.2 </span>Changes from 29 March 2012 to 14 September 2012</a></li>
<li><a href="#changes-2011-05-25"><span class="secno">6.3 </span>Changes from 25 May 2011 to 29 March 2012</a></li>
<li><a href="#changes-2011-04-05"><span class="secno">6.4 </span>Changes from 5 April 2011 to 25 May 2011</a></li>
<li><a href="#changes-2011-01-13"><span class="secno">6.5 </span>Changes from 13 January 2011 to 5 April 2011</a></li>
<li><a href="#changes-2010-10-19"><span class="secno">6.6 </span>Changes from 19 October 2010 to 13 January 2011</a></li>
<li><a href="#changes-2010-06-24"><span class="secno">6.7 </span>Changes from 24 June 2010 to 19 October 2010</a></li>
<li><a href="#changes-2010-03-04"><span class="secno">6.8 </span>Changes from 4 March 2010 to 24 June 2010</a></li>
<li><a href="#changes-2009-08-25"><span class="secno">6.9 </span>Changes from 25 August 2009 to 4 March 2010</a></li>
<li><a href="#changes-2009-04-23"><span class="secno">6.10 </span>Changes from 23 April 2009 to 25 August 2009</a></li>
<li><a href="#changes-2009-02-12"><span class="secno">6.11 </span>Changes from 12 February 2009 to 23 April 2009</a></li>
<li><a href="#changes-2008-06-10"><span class="secno">6.12 </span>Changes from 10 June 2008 to 12 February 2009</a></li>
<li><a href="#changes-2008-01-22"><span class="secno">6.13 </span>Changes from 22 January 2008 to 10 June 2008</a></ol></li>
<li><a class="no-num" href="#acknowledgments">Acknowledgments</a></li>
<li><a class="no-num" href="#references">References</a></ol>
<!--end-toc-->
<h2 id="introduction"><span class="secno">1 </span>Introduction</h2>
<h3 id="scope"><span class="secno">1.1 </span>Scope of this document</h3>
<p>This document covers the W3C HTML5 specification, W3C HTML5.1 specification, and
the WHATWG HTML standard. These are referred to as if they were a single specification
as "the HTML specification" or simply "HTML" when something applies equally to all of
them, and otherwise they are called out explicitly.
<h3 id="history"><span class="secno">1.2 </span>History of HTML</h3>
<p>HTML has been in continuous evolution since it was introduced to the
Internet in the early 1990s. Some features were introduced in
specifications; others were introduced in software releases. In some
respects, implementations and Web developer practices have converged with each
other and with specifications and standards, but in other ways, they
have diverged.</p>
<p>HTML4 became a W3C Recommendation in 1997. While it continues
to serve as a rough guide to many of the core features of HTML, it does
not provide enough information to build implementations that
interoperate with each other and, more importantly, with a critical mass
of deployed content. The same goes for XHTML1, which defines an
XML serialization for HTML4, and DOM Level 2 HTML, which defines
JavaScript APIs for both HTML and XHTML. HTML replaces these documents. <a href="#refsDOM2HTML">[DOM2HTML]</a>
<a href="#refsHTML4">[HTML4]</a>
<a href="#refsXHTML1">[XHTML1]</a>
<p>The HTML specification reflects an effort, started in 2004, to study
contemporary HTML implementations and deployed content. The specification:</p>
<ol>
<li>Defines a single language called HTML which can be written
in HTML syntax and in XML syntax.</li>
<li>Defines detailed processing models to foster interoperable
implementations.</li>
<li>Improves markup for documents.</li>
<li>Introduces markup and APIs for emerging idioms, such as Web
applications.</li>
</ol>
<h3 id="open-issues"><span class="secno">1.3 </span>Open Issues</h3>
<p>The contents of HTML, as well as the contents of this document which depend on
HTML, are still being discussed on the HTML Working Group
and WHATWG mailing lists. The open issues are linked from the HTML specification.</p>
<h3 id="backwards-compatible"><span class="secno">1.4 </span>Backwards Compatible</h3>
<p>HTML is defined in a way that it is backwards compatible with
the way user agents handle deployed content. To keep the
language relatively simple for Web developers, several elements and attributes
are not included, as outlined in the other sections of this document,
such as presentational elements that are better dealt with using
CSS.</p>
<p>User agents, however, will always have to support these older
elements and attributes and this is why the HTML specification clearly
separates requirements for Web developers (referred to as "authors" in the
specification) and user agents. For instance, this
means that Web developers cannot use the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#isindex-0">isindex</a></code> or the
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#plaintext">plaintext</a></code> element, but user agents are required to support
them in a way that is compatible with how these elements need to behave
for compatibility with deployed content.</p>
<p>Since HTML has separate conformance requirements for Web developers
and user agents there is no longer a need for marking features
"deprecated".</p>
<h3 id="development-model"><span class="secno">1.5 </span>Development Model</h3>
<p>The HTML4 specification reached Recommendation status before it was completely
implemented in user agents. HTML4 still is not completely implemented, because it
contains various bugs that have been fixed in the current HTML specification, which
user agents are much closer to than HTML4.
<p>The WHATWG HTML standard is under continual development where bugs are fixed
and new features are introduced over time. Features can also be removed from the
specification if they lack implementor interest or are not being used by Web developers, or
for other reasons. The WHATWG does not publish frozen snapshots.
<p>The W3C HTML5 specification is trying to reach Recommendation status. New features
are generally not added unless they are implemented by at least two browsers and has
tests demonstrating interoperability. Minor bug fixes can be applied. This means that
it may contain bugs that have been fixed in WHATWG HTML or W3C HTML5.1, or both.
<p>The W3C HTML5.1 specification is similar to WHATWG HTML: it is under continual development where bugs are fixed and new features are introduced over time,
and features can be removed from the specification for the same reasons as with WHATWG HTML. It cherry-picks changes from the WHATWG HTML standard and also
gets direct changes. It is expected to eventually go through the same procedure as W3C HTML5, and then a new version will be minted.
<h2 id="syntax"><span class="secno">2 </span>Syntax</h2>
<p>HTML defines an HTML syntax that is
compatible with HTML4 and XHTML1 documents published on the
Web, but is not compatible with the more esoteric SGML features of
HTML4, such as
<a href="http://www.w3.org/TR/1999/REC-html401-19991224/appendix/notes.html#h-B.3.6">processing instructions</a>
and
<a href="http://www.w3.org/TR/1999/REC-html401-19991224/appendix/notes.html#h-B.3.7">shorthand markup</a>
as these are not supported by most user agents. Documents using the HTML
syntax are served with the <code>text/html</code> media
type.</p>
<p>HTML also defines detailed parsing rules (including "error
handling") for this syntax which are largely compatible with HTML4-era
implementations. User agents must use these rules for resources that
have the <code>text/html</code> media type. Here is an example document
that conforms to the HTML syntax:</p>
<pre><code><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html></code></pre>
<p>The other syntax that can be used for HTML is XML. This syntax
is compatible with XHTML1 documents and implementations. Documents
using this syntax need to be served with an XML media type and elements
need to be put in the <code>http://www.w3.org/1999/xhtml</code>
namespace following the rules set forth by the XML specifications.
<a href="#refsXML">[XML]</a>
<p>Below is an example document that conforms to the XML syntax of
HTML. Note that XML documents must be served with an XML media type
such as <code>application/xhtml+xml</code> or
<code>application/xml</code>.</p>
<pre><code><?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html></code></pre>
<h3 id="character-encoding"><span class="secno">2.1 </span>Character Encoding</h3>
<p>For the HTML syntax, Web developers are required to declare the
character encoding. There are three ways to do that:</p>
<ul>
<li>At the transport level. By using the HTTP <code>Content-Type</code>
header for instance.</li>
<li>Using a Unicode Byte Order Mark (BOM) character at the start of
the file. This character provides a signature for the encoding
used.</li>
<li>Using a <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-meta-element">meta</a></code> element with a <code class="external" title="attr-meta-charset"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-meta-charset">charset</a></code>
attribute that specifies the encoding within the first 1024 bytes of
the document. For instance, <code><meta charset="UTF-8"></code>
could be used to specify the UTF-8 encoding. This replaces the need
for
<code><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></code>
although that syntax is still allowed.</li>
</ul>
<p>For the XML syntax, Web developers have to use the rules as set forth in the
XML specifications to set the character encoding.</p>
<h3 id="doctype"><span class="secno">2.2 </span>The Doctype</h3>
<p>The HTML syntax requires a doctype to be specified to ensure
that the browser renders the page in standards mode. The doctype has no
other purpose. <a href="#refsDOCTYPE">[DOCTYPE]</a>
<p>The doctype declaration for the HTML syntax is <code><!DOCTYPE html></code> and is
case-insensitive. Doctypes from earlier versions of
HTML were longer because the HTML language was SGML-based and therefore
required a reference to a DTD. This is no longer the case and
the doctype is only needed to enable standards mode for documents
written using the HTML syntax. Browsers already do this for
<code><!DOCTYPE html></code>.</p>
<p>To support legacy markup generators that cannot generate the preferred
short doctype, the doctype <code><!DOCTYPE html SYSTEM
"about:legacy-compat"></code> is allowed in the HTML syntax.
<p>The strict doctypes for HTML 4.0, HTML 4.01, XHTML 1.0 as well as XHTML
1.1 are also allowed (but are discouraged) in the HTML syntax.
<p>In the XML syntax, any doctype declaration may be used, or it may be
omitted altogether. Documents with an XML media type are always handled in
standards mode.
<h3 id="mathml-svg"><span class="secno">2.3 </span>MathML and SVG</h3>
<p>The HTML syntax allows for MathML and SVG elements to
be used inside a document. An <code>math</code> or <code>svg</code> start
tag causes the HTML parser to switch to a special insertion mode which puts
elements and attributes in the appropriate namespaces, does case fixups for
elements and attributes that have mixed case, and supports the empty-element
syntax as in XML. The syntax is still case-insensitive and attributes allow
the same syntax as for HTML elements. Namespace declarations may be omitted.
CDATA sections are supported in this insertion mode.
<p>Some MathML and SVG elements cause the parser to switch back to "HTML
mode", e.g. <code>mtext</code> and <code>foreignObject</code>, so you can
use HTML elements or a new <code>math</code> or <code>svg</code> element.
<p>For instance, a very simple document using some of the
minimal syntax features could look like:</p>
<pre><code><!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<strong><svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg></strong>
</p></code></pre>
<h3 id="syntax-misc"><span class="secno">2.4 </span>Miscellaneous</h3>
<p>There are a few other changes in the HTML syntax worthy of mentioning:</p>
<ul>
<li><p>The <code>&lang;</code> and <code>&rang;</code> named character
references now expand to U+27E8 and U+27E9 instead of U+2329 and U+232A,
respectively.
<li><p>Many new named character references have been added, including all from
MathML.
<li><p>Void elements (known as "EMPTY" in HTML4) are allowed to have a
trailing slash.
<li><p>The ampersand (<code>&</code>) may be left unescaped in some more
cases compared to HTML4.
<li><p>Attributes have to be separated by at least one whitespace character.
<li><p>Attributes with an empty value may be written as just the attribute
name omitting the equals sign and the value, even if it's not a boolean
attribute. (HTML4 actually allowed using only the attribute
<em>value</em> and omitting the attribute name, for enumerated attributes,
but this was not supported in browsers.)
<li><p>Attributes omitting quotes for the value are allowed to use a larger
set of characters compared to HTML4.
<li><p>The <code>optgroup</code> end tag is now optional.
<li><p>The <code>colgroup</code> start tag is now optional and is inferred by
the HTML parser.
</ul>
<h2 id="language"><span class="secno">3 </span>Language</h2>
<p>This section is split up in several subsections to more clearly
illustrate the various differences there are from HTML4.</p>
<h3 id="new-elements"><span class="secno">3.1 </span>New Elements</h3>
<p>The following elements have been introduced for better structure:</p>
<ul>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element">section</a></code>
represents a generic document or application section. It can be
<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections" title="Headings and sections">used together</a>
with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1-element">h1</a></code>, <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h2-element">h2</a></code>, <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h3-element">h3</a></code>,
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h4-element">h4</a></code>, <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h5-element">h5</a></code>, and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h6-element">h6</a></code> elements to
indicate the document structure.</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element">article</a></code>
represents an independent piece of content of a document, such as a
blog entry or newspaper article.</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-main-element">main</a></code>
can be used as a container for the dominant contents of another element, such as
the main content of the page.</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element">aside</a></code>
represents a piece of content that is only slightly related to the
rest of the page.</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element">hgroup</a></code>
represents the header of a section.</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element">header</a></code>
represents a group of introductory or navigational aids.</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element">footer</a></code>
represents a footer for a section and can contain information about
the author, copyright information, etc.</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element">nav</a></code>
represents a section of the document intended for navigation.</li>
<li>
<p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figure-element">figure</a></code>
represents a piece of self-contained flow content, typically
referenced as a single unit from the main flow of the document.</p>
<pre><code><figure>
<video src="example.webm" controls></video>
<figcaption>Example</figcaption>
</figure></code></pre>
<p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figcaption-element">figcaption</a></code> can be used as caption (it is optional).</p>
</li>
</ul>
<p>Then there are several other new elements:</p>
<ul>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-video-element">video</a></code> and
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-audio-element">audio</a></code> for multimedia content. Both
provide an API so application Web developers can script their own user
interface, but there is also a way to trigger a user interface
provided by the user agent. <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-source-element">source</a></code>
elements are used together with these elements if there are multiple
streams available of different types.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-track-element">track</a></code> provides text tracks
for the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-video-element">video</a></code> element.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-embed-element">embed</a></code> is used for plugin
content.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element">mark</a></code> represents a run of
text in one document marked or highlighted for reference purposes, due
to its relevance in another context.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">progress</a></code> represents a
completion of a task, such as downloading or when performing a series
of expensive operations.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element">meter</a></code> represents a
measurement, such as disk usage.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element">time</a></code> represents a date
and/or time.
<li><p>WHATWG HTML and W3C HTML 5.1 has <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-data-element">data</a></code> which
allows content to be annotated with a machine-readable value.
<li><p>WHATWG HTML has <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element">dialog</a></code> for showing a dialog.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-ruby-element">ruby</a></code>,
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-rt-element">rt</a></code>, and
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-rp-element">rp</a></code> allow for marking up ruby
annotations.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-bdi-element">bdi</a></code> represents a span of
text that is to be isolated from its surroundings for the purposes of
bidirectional text formatting.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-wbr-element">wbr</a></code> represents a line break
opportunity.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">canvas</a></code> is used for rendering
dynamic bitmap graphics on the fly, such as graphs or games.
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-menuitem-element">menuitem</a></code>
represents a command the user can invoke from a popup menu.</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element">details</a></code>
represents additional information or controls which the user can
obtain on demand. The
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element">summary</a></code>
element provides its summary, legend, or caption.</li>
<li>
<p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element">datalist</a></code>
together with the a new <code class="external" title="attr-input-list"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-list">list</a></code> attribute for
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> can be used to make comboboxes:</p>
<pre><code><input <strong>list="browsers"</strong>>
<datalist <strong>id="browsers"</strong>>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist></code></pre>
</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-keygen-element">keygen</a></code>
represents control for key pair generation.</li>
<li><p><code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-output-element">output</a></code>
represents some type of output, such as from a calculation done
through scripting.</li>
</ul>
<p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> element's <code class="external" title="attr-input-type"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-type">type</a></code> attribute now has the
following new values:</p>
<ul>
<li><code class="external" title="attr-input-type-tel"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state-(type=tel)">tel</a></code>
<li><code class="external" title="attr-input-type-search"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-(type=text)-state-and-search-state-(type=search)">search</a></code>
<li><code class="external" title="attr-input-type-url"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#url-state-(type=url)">url</a></code>
<li><code class="external" title="attr-input-type-email"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-(type=email)">email</a></code>
<li><code class="external" title="attr-input-type-datetime"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-and-time-state-(type=datetime)">datetime</a></code>
<li><code class="external" title="attr-input-type-date"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-state-(type=date)">date</a></code>
<li><code class="external" title="attr-input-type-month"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#month-state-(type=month)">month</a></code>
<li><code class="external" title="attr-input-type-week"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#week-state-(type=week)">week</a></code>
<li><code class="external" title="attr-input-type-time"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#time-state-(type=time)">time</a></code>
<li><code class="external" title="attr-input-type-datetime-local"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#local-date-and-time-state-(type=datetime-local)">datetime-local</a></code>
<li><code class="external" title="attr-input-type-number"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#number-state-(type=number)">number</a></code>
<li><code class="external" title="attr-input-type-range"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#range-state-(type=range)">range</a></code>
<li><code class="external" title="attr-input-type-color"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#color-state-(type=color)">color</a></code>
</ul>
<p>The idea of these new types is that the user agent can provide the user
interface, such as a calendar date picker or integration with the user's
address book, and submit a defined format to the server. It gives the user a
better experience as his input is checked before sending it to the server
meaning there is less time to wait for feedback.</p>
<h3 id="new-attributes"><span class="secno">3.2 </span>New Attributes</h3>
<p>Several attributes have been introduced to various elements
that were already part of HTML4:</p>
<ul>
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element">a</a></code> and
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#the-area-element">area</a></code> elements have the new
<code class="external" title="attr-hyperlink-download"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download">download</a></code> attribute
in WHATWG HTML and W3C HTML5.1. WHATWG HTML also has the
<code class="external" title="attr-hyperlink-ping"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#ping">ping</a></code> attribute.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#the-area-element">area</a></code> element, for consistency with the
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element">a</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-link-element">link</a></code> elements, now also has the
<code class="external" title="attr-hyperlink-hreflang"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-hreflang">hreflang</a></code>, <code class="external" title="attr-hyperlink-type"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-type">type</a></code> and <code class="external" title="attr-hyperlink-rel"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-rel">rel</a></code> attributes.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-base-element">base</a></code> element can now have a <code class="external" title="attr-base-target"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-base-target">target</a></code>
attribute as well, mainly for consistency with the
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element">a</a></code> element. (This is already widely supported.)
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-meta-element">meta</a></code> element has a <code class="external" title="attr-meta-charset"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-meta-charset">charset</a></code>
attribute now as this was already widely supported and provides a nice
way to specify the
<a href="#character-encoding">character encoding</a> for the document.
<li><p>In WHATWG HTML and W3C HTML5.1, the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">table</a></code>
element now has a <code class="external" title="attr-table-sortable"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#attr-table-sortable">sortable</a></code> attribute and the
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element">th</a></code> element has a
<code class="external" title="attr-th-sorted"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#attr-th-sorted">sorted</a></code> attribute, which provide a means to sort
table columns.
<li><p>A new <code class="external" title="attr-fe-autofocus"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code> attribute can be specified on the
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> (except when the <code class="external" title="attr-input-type"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-type">type</a></code> attribute is
<code class="external" title="attr-input-type-hidden"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#hidden-state-(type=hidden)">hidden</a></code>), <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-select-element">select</a></code>, <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-textarea-element">textarea</a></code> and
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-button-element">button</a></code> elements. It provides a declarative way to focus a
form control during page load. Using this feature should enhance the
user experience compared to focusing the element with script as the user can turn it off if the user does not like
it, for instance.
<li>
<p>A new <code class="external" title="attr-input-placeholder"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code> attribute can be specified on
the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-textarea-element">textarea</a></code> elements. It
represents a hint intended to aid the user with data entry.</p>
<pre><code><input type=email <strong>placeholder="a@b.com"</strong>></code></pre>
</li>
<li>
<p>The new <code class="external" title="attr-fae-form"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute for <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code>,
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-output-element">output</a></code>, <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-select-element">select</a></code>, <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-textarea-element">textarea</a></code>,
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-button-element">button</a></code>, <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-label-element">label</a></code>, <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-object-element">object</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-fieldset-element">fieldset</a></code> elements allows for
controls to be associated with a form. These elements can now be
placed anywhere on a page, not just as descendants of the
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-form-element">form</a></code> element, and still be associated with a <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-form-element">form</a></code>.</p>
<pre><table>
<tr>
<th>Key
<th>Value
<th>Action
<tr>
<td><form <strong>id=1</strong>><input name=1-key></form>
<td><input <strong>form=1</strong> name=1-value>
<td><button <strong>form=1</strong> name=1-action value=save>✓</button>
<button <strong>form=1</strong> name=1-action value=delete>✗</button>
...
</table></pre>
</li>
<li><p>The new <code class="external" title="attr-input-required"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-required">required</a></code> attribute applies to
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> (except when the <code class="external" title="attr-input-type"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-type">type</a></code> attribute is
<code class="external" title="attr-input-type-hidden"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#hidden-state-(type=hidden)">hidden</a></code>, <code class="external" title="attr-input-type-image"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#image-button-state-(type=image)">image</a></code> or some button type such as
<code class="external" title="attr-input-type-submit"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#submit-button-state-(type=submit)">submit</a></code>), <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-select-element">select</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-textarea-element">textarea</a></code>. It indicates that the user
has to fill in a value in order to submit the form. For <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-select-element">select</a></code>, the first <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-option-element">option</a></code> element has to be a placeholder with an empty value.
<pre><code><label>Color: <select name=color <strong>required</strong>>
<option <strong>value=""</strong>>Choose one
<option>Red
<option>Green
<option>Blue
</select></label></code></pre>
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-fieldset-element">fieldset</a></code> element now allows the
<code class="external" title="attr-fieldset-disabled"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-fieldset-disabled">disabled</a></code> attribute which disables all descendant controls (excluding those that are descendants of the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-legend-element">legend</a></code> element)
when specified, and the <code class="external" title="attr-fe-name"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fe-name">name</a></code> attribute which can be used for script access.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> element has several new attributes to
specify constraints: <code class="external" title="attr-fe-autocomplete"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fe-autocomplete">autocomplete</a></code>, <code class="external" title="attr-input-min"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-min">min</a></code>,
<code class="external" title="attr-input-max"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-max">max</a></code>, <code class="external" title="attr-input-multiple"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-multiple">multiple</a></code>, <code class="external" title="attr-input-pattern"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern">pattern</a></code> and
<code class="external" title="attr-input-step"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-step">step</a></code>. As mentioned before it also has a new
<code class="external" title="attr-input-list"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-list">list</a></code> attribute which can be used together with the
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element">datalist</a></code> element. It also now has the <code class="external" title="attr-dim-width"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#attr-dim-width">width</a></code> and <code class="external" title="attr-dim-height"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#attr-dim-height">height</a></code> attributes to specify the dimensions of the image when using <code>type=image</code>.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-textarea-element">textarea</a></code> elements have
a new attribute named <code class="external" title="attr-fe-dirname"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fe-dirname">dirname</a></code> that causes the
directionality of the control as set by the user to be submitted as
well.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-textarea-element">textarea</a></code> element also has two new attributes,
<code class="external" title="attr-textarea-maxlength"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#attr-textarea-maxlength">maxlength</a></code> and <code class="external" title="attr-textarea-wrap"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#attr-textarea-wrap">wrap</a></code> which control max input
length and submitted line wrapping behavior, respectively.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-form-element">form</a></code> element has a <code class="external" title="attr-fs-novalidate"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-novalidate">novalidate</a></code>
attribute that can be used to disable form validation submission (i.e.
the form can always be submitted).
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-button-element">button</a></code> elements have
<code class="external" title="attr-fs-formaction"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>, <code class="external" title="attr-fs-formenctype"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code class="external" title="attr-fs-formmethod"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>, <code class="external" title="attr-fs-formnovalidate"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>, and
<code class="external" title="attr-fs-formtarget"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code> as new attributes. If present, they override
the <code class="external" title="attr-fs-action"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-action">action</a></code>, <code class="external" title="attr-fs-enctype"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-enctype">enctype</a></code>, <code class="external" title="attr-fs-method"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-method">method</a></code>,
<code class="external" title="attr-fs-novalidate"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-novalidate">novalidate</a></code>, and <code class="external" title="attr-fs-target"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-target">target</a></code> attributes on the
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-form-element">form</a></code> element.</p>
<li><p>In WHATWG HTML, the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-textarea-element">textarea</a></code> have an <code class="external" title="attr-fe-inputmode"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fe-inputmode">inputmode</a></code> attribute.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-menu-element">menu</a></code> element has two new attributes:
<code class="external" title="attr-menu-type"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#attr-menu-type">type</a></code> and <code class="external" title="attr-menu-label"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#attr-menu-label">label</a></code>. They
allow the element to transform into a menu as found in typical user
interfaces as well as providing for context menus in conjunction with the
global <code class="external" title="attr-contextmenu"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#attr-contextmenu">contextmenu</a></code> attribute.
<li><p>In WHATWG HTML and W3C HTML5.1, the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-button-element">button</a></code>
element has a new <code class="external" title="attr-button-menu"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#attr-button-menu">menu</a></code>
attribute, used together with popup menus.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element">style</a></code> element has a new <code class="external" title="attr-style-scoped"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-style-scoped">scoped</a></code>
attribute which can be used to enable scoped style sheets. Style rules
within such a <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element">style</a></code> element only apply to the local tree.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-script-element">script</a></code> element has a new attribute called
<code class="external" title="attr-script-async"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#attr-script-async">async</a></code> that influences script loading and execution.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-html-element">html</a></code> element has a new attribute called
<code class="external" title="attr-html-manifest"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-html-manifest">manifest</a></code> that points to an application cache manifest
used in conjunction with the API for offline Web applications.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-link-element">link</a></code> element has a new attribute called
<code class="external" title="attr-link-sizes"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-link-sizes">sizes</a></code>. It can be used in conjunction with the
<code class="external" title="rel-icon"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon">icon</a></code> relationship (set through the <code class="external" title="attr-link-rel"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-link-rel">rel</a></code>
attribute; can be used for e.g. favicons) to indicate the size of the
referenced icon. Thus allowing for icons of distinct dimensions.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ol-element">ol</a></code> element has a new attribute called
<code class="external" title="attr-ol-reversed"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#attr-ol-reversed">reversed</a></code>. When present, it indicates that the list order
is descending.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-iframe-element">iframe</a></code> element has three new attributes called
<code class="external" title="attr-iframe-sandbox"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-sandbox">sandbox</a></code>, <code class="external" title="attr-iframe-seamless"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-seamless">seamless</a></code>, and <code class="external" title="attr-iframe-srcdoc"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-srcdoc">srcdoc</a></code>
which allow for sandboxing content, e.g. blog comments.</li>
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-object-element">object</a></code> element has a new attribute called <code class="external" title="attr-object-typemustmatch"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-object-typemustmatch">typemustmatch</a></code> which allows safer embedding of external resources.
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#the-img-element">img</a></code> element has a new attribute called
<code class="external" title="attr-img-crossorigin"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-crossorigin">crossorigin</a></code> to use CORS in the fetch and if it is successful, allows the image data to be
read with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">canvas</a></code> API. In WHATWG HTML and W3C HTML 5.1, the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-script-element">script</a></code> element has a
<code class="external" title="attr-script-crossorigin"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#attr-script-crossorigin">crossorigin</a></code> attribute to allow script
<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#report-the-error" title="report the error">errors to be reported</a> to <code class="external" title="handler-onerror"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#handler-onerror">onerror</a></code>
with information about the error. WHATWG HTML and W3C HTML 5.1 also has the <code class="external" title="attr-link-crossorigin"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-link-crossorigin">crossorigin</a></code>
attribute on the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-link-element">link</a></code> element.
<li><p>In WHATWG HTML, the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#the-img-element">img</a></code> element has a new attribute called <code class="external" title="attr-img-srcset"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset">srcset</a></code> to support multiple images for different resolutions and different images for different viewport sizes.
</ul>
<p>Several attributes from HTML4 now apply to all elements. These
are called global attributes: <code class="external" title="attr-accesskey"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-accesskey-attribute">accesskey</a></code>, <code class="external" title="attr-class"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#classes">class</a></code>, <code class="external" title="attr-dir"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-dir-attribute">dir</a></code>,
<code class="external" title="attr-id"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-id-attribute">id</a></code>, <code class="external" title="attr-dir"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-dir-attribute">lang</a></code>, <code class="external" title="attr-style"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-style-attribute">style</a></code>,
<code class="external" title="attr-tabindex"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-tabindex">tabindex</a></code> and <code class="external" title="attr-title"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-title-attribute">title</a></code>. Additionally, XHTML 1.0
only allowed <code>xml:space</code> on some elements, which is now allowed
on all elements in XHTML documents.</p>
<p>There are also several new global attributes:</p>
<ul>
<li><p>The <code class="external" title="attr-contenteditable"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-contenteditable">contenteditable</a></code> attribute indicates that
the element is an editable area. The user can change the contents of the
element and manipulate the markup.
<li><p>The <code class="external" title="attr-contextmenu"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#attr-contextmenu">contextmenu</a></code> attribute can be used to point
to a context menu provided by the Web developer.
<li><p>The <code class="external" title="attr-data-*"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#attr-data-*">data-<var>*</var></a></code> collection of Web developer-defined
attributes. Web developers can define any attribute they want as long as they
prefix it with <code>data-</code> to avoid clashes with future versions of
HTML. These are intended to be used to store custom data to be consumed by
the Web page or application itself. They are <em>not</em> intended for
data to be consumed by other parties (e.g. user agents).
<li><p>The <code class="external" title="attr-draggable"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute">draggable</a></code> and <code class="external" title="attr-dropzone"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute">dropzone</a></code> attributes can be used together with
the new drag & drop API.
<li><p>The <code class="external" title="attr-hidden"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute">hidden</a></code>
attribute indicates that an element is not yet, or is no longer, relevant.
<li><p>WHATWG HTML has the <code class="external" title="attr-inert"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-inert-attribute">inert</a></code> attribute, intended to make <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element">dialog</a></code> elements modal.
<li><p>The <code class="external" title="wai-aria"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#wai-aria">role</a></code> and
<code class="external" title="wai-aria"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#wai-aria">aria-<var>*</var></a></code>
collection attributes which can be used to instruct assistive
technology.</li>
<li><p>The <code class="external" title="attr-spellcheck"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-spellcheck">spellcheck</a></code> attribute allows for hinting
whether content can be checked for spelling or not.
<li><p>The <code class="external" title="attr-translate"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#attr-translate">translate</a></code> attribute gives a hint to
translators whether the content should be translated.
</ul>
<p>HTML also makes all event handler attributes from HTML4, which take the
form <code>on<var>event</var></code>, global attributes and adds
several new event handler attributes for new events it defines. For
instance, the <code class="external" title="handler-onplay"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#handler-onplay">onplay</a></code>
event handler attribute for the <code class="external" title="event-media-play"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">play</a></code> event which is used by the API for the
media elements (<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-video-element">video</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-audio-element">audio</a></code>).</p>
<h3 id="changed-elements"><span class="secno">3.3 </span>Changed Elements</h3>
<p>These elements have slightly modified meanings in HTML to
better reflect how they are used on the Web or to make them more
useful:</p>
<ul>
<!--
<li><p>The <code data-anolis-spec=html>a</code> element without an
<code data-anolis-spec=html title=attr-hyperlink-href>href</code>
attribute now represents a placeholder for where a link otherwise
might have been placed.</p></li>
html4:
Each A element defines an anchor
1. The A element's content defines the position of the anchor.
2. The name attribute names the anchor so that it may be the destination
of zero or more links (see also anchors with id).
3. The href attribute makes this anchor the source anchor of exactly one
link.
Authors may also create an A element that specifies no anchors, i.e., that
doesn't specify href, name, or id. Values for these attributes may be set
at a later time through scripts.
html:
If the a element has an href attribute, then it represents a hyperlink (a
hypertext anchor).
If the a element has no href attribute, then the element represents a
placeholder for where a link might otherwise have been placed, if it had
been relevant.
Both basically say that <a> without href is a "placeholder", so this isn't
really a change.
-->
<!--
<li><p>The <code data-anolis-spec=html>abbr</code> element now represents
an abbreviation <em>or</em> an acronym.
html4:
Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).
html:
The abbr element represents an abbreviation or acronym, optionally with
its expansion.
Not a major change (technically acronym is a form of abbreviation anyway),
and this document says to use abbr instead of acronym already.
-->
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-address-element">address</a></code> element is now
scoped by the nearest ancestor <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element">article</a></code>
or <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-body-element">body</a></code> element.</li>
<!--
AREA
html4 doesn't really have a definition of area, but html does, but that's
hardly worth calling out here.
-->
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element">b</a></code> element now represents a
span of text to which attention is being drawn for utilitarian purposes
without conveying any extra importance and with no implication of an
alternate voice or mood, such as key words in a document abstract, product
names in a review, actionable words in interactive text-driven software,
or an article lede.</li>
<!--
BASE
html4:
The BASE element allows authors to specify a document's base URI
explicitly.
html:
The base element allows authors to specify the document base URL for the
purposes of resolving relative URLs, and the name of the default browsing
context for the purposes of following hyperlinks. The element does not
represent any content beyond this information.
-->
<!--
BDO
html4:
The BDO element allows authors to turn off the bidirectional algorithm for
selected fragments of text.
html:
The bdo element represents explicit text directionality formatting control
for its children. It allows authors to override the Unicode bidirectional
algorithm by explicitly specifying a direction override.
-->
<!--
<li><p>The <code data-anolis-spec=html>blockquote</code> element now
represents a section that is quoted <em>from another source</em> (and that
is not necessarily "long").
html4:
These two elements designate quoted text. BLOCKQUOTE is for long
quotations (block-level content)
html:
The blockquote element represents a section that is quoted from another
source.
-->
<!--
BODY
html4:
The body of a document contains the document's content.
html:
The body element represents the main content of the document.
-->
<!--
BR
html4:
The BR element forcibly breaks (ends) the current line of text.
html:
The br element represents a line break.
-->
<!--
BUTTON
html4:
Buttons created with the BUTTON element function just like buttons created
with the INPUT element
html:
The button element represents a button.
-->
<!--
CAPTION
html4:
When present, the CAPTION element's text should describe the nature of the
table.
html:
The caption element represents the title of the table that is its parent,
if it has a parent and that is a table element.
-->
<li><p>The <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-cite-element">cite</a></code> element now solely
represents the title of a work (e.g. a book, a paper, an essay, a poem, a
score, a song, a script, a film, a TV show, a game, a sculpture, a
painting, a theatre production, a play, an opera, a musical, an
exhibition, a legal case report, etc). Specifically the example in HTML4
where it is used to mark up the name of a person is no longer considered
conforming.</li>
<!--
CODE
html4:
Designates a fragment of computer code.
html:
The code element represents a fragment of computer code.
-->
<!--
COL
html4:
The COL element allows authors to group together attribute specifications
for table columns.
html:
If a col element has a parent and that is a colgroup element that itself
has a parent that is a table element, then the col element represents one
or more columns in the column group represented by that colgroup.
-->
<!--
COLGROUP
html4:
The COLGROUP element creates an explicit column group.
html:
The colgroup element represents a group of one or more columns in the
table that is its parent, if it has a parent and that is a table element.
-->
<!--
DD
covered by dl
-->
<!--
DEL
html4:
INS and DEL are used to markup sections of the document that have been
inserted or deleted with respect to a different version of a document
html:
The del element represents a removal from the document.
-->
<!--
DFN
html4:
Indicates that this is the defining instance of the enclosed term.
html:
The dfn element represents the defining instance of a term.
-->
<!--
DIV