This repository has been archived by the owner on Jan 15, 2021. It is now read-only.
/
Overview.src.html
2590 lines (2037 loc) · 120 KB
/
Overview.src.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>Differences from HTML4</title>
<link rel=icon href=//resources.whatwg.org/logo-differences.svg>
<style>
.bad { color: gray; }
</style>
<link rel="stylesheet" href="https://resources.whatwg.org/standard.css">
</head>
<body>
<div class="head">
<p><a class="logo" href="https://whatwg.org/"><img alt="WHATWG" height="100" src="https://resources.whatwg.org/logo-differences.svg" width="100"></a></p>
<hgroup>
<h1>Differences from HTML4</h1>
<h2 class="no-num no-toc">Living Document — Last Updated [DATE: 1 August 1986]</h2>
</hgroup>
<dl>
<dt>This Version:</dt>
<dd><a href="https://html-differences.whatwg.org/">https://html-differences.whatwg.org/</a>
<dt>Participate:</dt>
<dd>Send feedback to
<a href="https://whatwg.org/mailing-list">whatwg@whatwg.org</a>
(<a href=https://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/>archives</a>)
<dd><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=WHATWG&component=HTML%20Differences">File a bug</a>
(<a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=WHATWG&component=HTML%20Differences&resolution=---">open bugs</a>)
<dd><a href="https://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="https://annevankesteren.nl/">Anne van Kesteren</a>
<<a href="mailto:annevk@annevk.nl">annevk@annevk.nl</a>></dd>
</dl>
<script src=//resources.whatwg.org/file-bug.js async></script>
<p class="copyright"><a rel="license" href="https://creativecommons.org/publicdomain/zero/1.0/"><img src="https://i.creativecommons.org/p/zero/1.0/80x15.png" alt="CC0"></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
[DATE: 01 Jan 1901], the editors have made this specification available
under the
<a rel="license"
href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0">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>"Differences from HTML4" describes the differences of the HTML specification from those of HTML4.</p>
<h2 class="no-num no-toc" id="toc">Table of Contents</h2>
<!--toc-->
<h2 id="introduction">Introduction</h2>
<h3 id="scope">Scope of This Document</h3>
<p>This document covers the WHATWG HTML standard.
It does not cover the W3C HTML5 or W3C HTML5.1 specifications.
<span data-anolis-ref>HTML</span>
<span data-anolis-ref>HTML5</span>
<span data-anolis-ref>HTML5NIGHTLY</span></p>
<h3 id="history">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
Web 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. <span data-anolis-ref>DOM2HTML</span>
<span data-anolis-ref>HTML4</span>
<span data-anolis-ref>XHTML1</span>
<p>The HTML specification reflects an effort, started in 2004, to study
contemporary HTML implementations and Web content. The specification:</p>
<ol>
<li><p>Defines a single language called HTML which can be written
in HTML syntax and in XML syntax.</li>
<li><p>Defines detailed processing models to foster interoperable
implementations.</li>
<li><p>Improves markup for documents.</li>
<li><p>Introduces markup and APIs for emerging idioms, such as Web
applications.</li>
</ol>
<h3 id="open-issues">Open Issues</h3>
<p>See <a href="https://www.w3.org/Bugs/Public/buglist.cgi?bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=HTML&product=WHATWG">open issues in Bugzilla</a>. The specification also has annotation boxes in the margin which can link to bugs.
<h3 id="backward-compatibility">Backward Compatibility</h3>
<p>HTML is defined in a way that is backward compatible with
the way user agents handle content. To keep the
language relatively simple for Web developers, several older elements and attributes
are not included, as outlined in the other sections of this document,
such as presentational elements that are better handled using
CSS.</p>
<p>User agents, however, will always have to support these older
elements and attributes. 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 data-anolis-spec=html>isindex</code> or the
<code data-anolis-spec=html>plaintext</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 Web 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>
<div>
<h3 id="development-model">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 implementing than HTML4.
<p>The 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, are not being used by Web developers, or
for other reasons.
</div>
<h2 id="syntax">Syntax</h2>
<p>HTML defines a syntax, referred to as "the HTML syntax", that is
mostly 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 have to 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><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html></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 (such as
<code>application/xhtml+xml</code> or <code>application/xml</code>) 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.
<span data-anolis-ref>XML</span> <span data-anolis-ref>XMLNS</span>
<p>Below is an example document that conforms to the XML syntax of
HTML.</p>
<pre><?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></pre>
<h3 id="character-encoding">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><p>At the transport level; for instance, by using the HTTP <code>Content-Type</code>
header.</li>
<li><p>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><p>Using a <code data-anolis-spec=html>meta</code> element with a <code data-anolis-spec=html title=attr-meta-charset>charset</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 specification to set the character encoding.</p>
<h3 id="doctype">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. <span data-anolis-ref>DOCTYPE</span>
<p>In HTML4, it was possible to use doctypes that were syntactically correct
but still trigger quirks mode (e.g.
<code class=bad><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></code>, without the URL).
<p>If you were using no doctype or a quirky doctype and switch to a standards mode doctype,
you will most likely run into differences between the modes. For example, in quirks mode,
classes and IDs in Selectors are case-insensitive and CSS <length>s do not require a unit.
For more examples, please refer to
<a href="http://www.cs.tut.fi/~jkorpela/quirks-mode.html"><cite>What happens in Quirks Mode?</cite></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">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><!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></pre>
<h3 id="syntax-misc">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 (mathematical left/right angle
bracket) instead of U+2329 and U+232A (left/right-pointing angle bracket), respectively.
<li><p>Many new named character references have been added, including all named character references 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 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 the attribute is not a boolean
attribute. (It is commonly believed that HTML4 allowed the value to be omitted for boolean attributes. Instead, HTML4 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 HTML parser does not do any normalization of whitespace in attribute values; for instance, leading and trailing whitespace in the
<code data-anolis-spec=html title=attr-id>id</code> attribute is not ignored (and thus now invalid), and newline characters can be used in the
<code data-anolis-spec=html title=attr-input-value>value</code> attribute of the <code data-anolis-spec=html>input</code> element without using character
references.
<li><p>The <code data-anolis-spec=html>optgroup</code> end tag is now optional.
<li><p>The <code data-anolis-spec=html>colgroup</code> start tag is now optional and is inferred by
the HTML parser.
</ul>
<h2 id="language">Language</h2>
<p>This section is split up in several subsections to more clearly
illustrate the various differences from HTML4.</p>
<h3 id="new-elements">New Elements</h3>
<p>The following elements have been introduced for better structure:</p>
<ul>
<li><p><code data-anolis-spec=html>section</code>
represents a generic document or application section. It can be
<span data-anolis-spec=html title="Headings and sections">used together</span>
with the <code data-anolis-spec=html>h1</code>, <code data-anolis-spec=html>h2</code>, <code data-anolis-spec=html>h3</code>,
<code data-anolis-spec=html>h4</code>, <code data-anolis-spec=html>h5</code>, and <code data-anolis-spec=html>h6</code> elements to
indicate the document structure.</p></li>
<li><p><code data-anolis-spec=html>article</code>
represents an independent piece of content of a document, such as a
blog entry or newspaper article.</p></li>
<li><p><code data-anolis-spec=html>main</code>
can be used as a container for the dominant contents of another element, such as
the main content of the page.</p></li>
<li><p><code data-anolis-spec=html>aside</code>
represents a piece of content that is only slightly related to the
rest of the page.</p></li>
<li><p><code data-anolis-spec=html>hgroup</code>
represents the header of a section.</p></li>
<li><p><code data-anolis-spec=html>header</code>
represents a group of introductory or navigational aids.</p></li>
<li><p><code data-anolis-spec=html>footer</code>
represents a footer for a section and can contain information about
the author, copyright information, etc.</p></li>
<li><p><code data-anolis-spec=html>nav</code>
represents a section of the document intended for navigation.</p></li>
<li>
<p><code data-anolis-spec=html>figure</code>
represents a piece of self-contained flow content, typically
referenced as a single unit from the main flow of the document.</p>
<pre><figure>
<video src="example.webm" controls></video>
<figcaption>Example</figcaption>
</figure></pre>
<p><code data-anolis-spec=html>figcaption</code> can be used as caption (it is optional).</p>
</li>
<li><p><code data-anolis-spec=html>template</code>
can be used to declare fragments of HTML that can be cloned and inserted in the document by script.
</ul>
<p>Then there are several other new elements:</p>
<ul>
<li><p><code data-anolis-spec=html>video</code> and
<code data-anolis-spec=html>audio</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 data-anolis-spec=html>source</code>
elements are used together with these elements if there are multiple
streams available of different types.
<li><p><code data-anolis-spec=html>track</code> provides text tracks
for the <code data-anolis-spec=html>video</code> element.
<li><p><code data-anolis-spec=html>embed</code> is used for plugin
content.
<li><p><code data-anolis-spec=html>mark</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 data-anolis-spec=html>progress</code> represents a
completion of a task, such as downloading or when performing a series
of expensive operations.
<li><p><code data-anolis-spec=html>meter</code> represents a
measurement, such as disk usage.
<li><p><code data-anolis-spec=html>time</code> represents a date
and/or time.
<li><p><code data-anolis-spec=html>data</code>
allows content to be annotated with a machine-readable value.
<li><p><code data-anolis-spec=html>dialog</code> for showing a dialog.
<li><p><code data-anolis-spec=html>ruby</code>,
<code data-anolis-spec=html>rt</code>, and
<code data-anolis-spec=html>rp</code> allow for marking up ruby
annotations.
<li><p><code data-anolis-spec=html>bdi</code> represents a span of
text that is to be isolated from its surroundings for the purposes of
bidirectional text formatting.
<li><p><code data-anolis-spec=html>wbr</code> represents a line break
opportunity.
<li><p><code data-anolis-spec=html>canvas</code> is used for rendering
dynamic bitmap graphics on the fly, such as graphs or games.
<li><p><code data-anolis-spec=html>menuitem</code>
represents a command the user can invoke from a popup menu.</p></li>
<li><p><code data-anolis-spec=html>details</code>
represents additional information or controls which the user can
obtain on demand. The
<code data-anolis-spec=html>summary</code>
element provides its summary, legend, or caption.</p></li>
<li>
<p><code data-anolis-spec=html>datalist</code>
together with the a new <code data-anolis-spec=html title=attr-input-list>list</code> attribute for
<code data-anolis-spec=html>input</code> can be used to make comboboxes:</p>
<pre><input <strong>list="browsers"</strong>>
<datalist <strong>id="browsers"</strong>>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist></pre>
</li>
<li><p><code data-anolis-spec=html>keygen</code>
represents control for key pair generation.</p></li>
<li><p><code data-anolis-spec=html>output</code>
represents some type of output, such as from a calculation done
through scripting.</p></li>
</ul>
<p>The <code data-anolis-spec=html>input</code> element's <code data-anolis-spec=html title=attr-input-type>type</code> attribute now has the
following new values:</p>
<ul class=brief>
<li><code data-anolis-spec=html title=attr-input-type-tel>tel</code>
<li><code data-anolis-spec=html title=attr-input-type-search>search</code>
<li><code data-anolis-spec=html title=attr-input-type-url>url</code>
<li><code data-anolis-spec=html title=attr-input-type-email>email</code>
<li><code data-anolis-spec=html title=attr-input-type-datetime>datetime</code>
<li><code data-anolis-spec=html title=attr-input-type-date>date</code>
<li><code data-anolis-spec=html title=attr-input-type-month>month</code>
<li><code data-anolis-spec=html title=attr-input-type-week>week</code>
<li><code data-anolis-spec=html title=attr-input-type-time>time</code>
<li><code data-anolis-spec=html title=attr-input-type-datetime-local>datetime-local</code>
<li><code data-anolis-spec=html title=attr-input-type-number>number</code>
<li><code data-anolis-spec=html title=attr-input-type-range>range</code>
<li><code data-anolis-spec=html title=attr-input-type-color>color</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">New Attributes</h3>
<p>Several attributes have been introduced to various elements
that were already part of HTML4:</p>
<ul>
<li><p>The <code data-anolis-spec=html>a</code> and
<code data-anolis-spec=html>area</code> elements have the new
<code data-anolis-spec=html title=attr-hyperlink-download>download</code> and
<code data-anolis-spec=html title=attr-hyperlink-ping>ping</code> attributes.
<li><p>The <code data-anolis-spec=html>area</code> element, for consistency with the
<code data-anolis-spec=html>a</code> and <code data-anolis-spec=html>link</code> elements, now also has the
<code data-anolis-spec=html title=attr-hyperlink-hreflang>hreflang</code>, <code data-anolis-spec=html title=attr-hyperlink-type>type</code> and <code data-anolis-spec=html title=attr-hyperlink-rel>rel</code> attributes.
<li><p>The <code data-anolis-spec=html>base</code> element can now have a <code data-anolis-spec=html title=attr-base-target>target</code>
attribute as well, mainly for consistency with the
<code data-anolis-spec=html>a</code> element. (This is already widely supported.)
<li><p>The <code data-anolis-spec=html>meta</code> element has a <code data-anolis-spec=html title=attr-meta-charset>charset</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>The <code data-anolis-spec=html>table</code>
element now has a <code data-anolis-spec=html title=attr-table-sortable>sortable</code> attribute and the
<code data-anolis-spec=html>th</code> element has a
<code data-anolis-spec=html title=attr-th-sorted>sorted</code> attribute, which provide a means to sort
table columns.
<li><p>A new <code data-anolis-spec=html title=attr-fe-autofocus>autofocus</code> attribute can be specified on the
<code data-anolis-spec=html>input</code> (except when the <code data-anolis-spec=html title=attr-input-type>type</code> attribute is
<code data-anolis-spec=html title=attr-input-type-hidden>hidden</code>), <code data-anolis-spec=html>select</code>, <code data-anolis-spec=html>textarea</code> and
<code data-anolis-spec=html>button</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 data-anolis-spec=html title=attr-input-placeholder>placeholder</code> attribute can be specified on
the <code data-anolis-spec=html>input</code> and <code data-anolis-spec=html>textarea</code> elements. It
represents a hint intended to aid the user with data entry.</p>
<pre><input type=search name=q <strong>placeholder="Enter search phrase..."</strong>> <button>Search</button></pre>
<pre><label>Email <input type=email name=email <strong>placeholder="john@example.com"</strong>></label></pre>
<p>The <code data-anolis-spec=html title=attr-input-placeholder>placeholder</code> attribute should not be used as a replacement for the
<code data-anolis-spec=html>label</code> element.
<pre class=bad><!-- Do not do this: -->
<input type=email name=email placeholder="Email"></pre>
</li>
<li>
<p>The new <code data-anolis-spec=html title=attr-fae-form>form</code> attribute for <code data-anolis-spec=html>input</code>,
<code data-anolis-spec=html>output</code>, <code data-anolis-spec=html>select</code>, <code data-anolis-spec=html>textarea</code>,
<code data-anolis-spec=html>button</code>, <code data-anolis-spec=html>label</code>, <code data-anolis-spec=html>object</code> and <code data-anolis-spec=html>fieldset</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 data-anolis-spec=html>form</code> element, and still be associated with a <code data-anolis-spec=html>form</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 data-anolis-spec=html title=attr-input-required>required</code> attribute applies to
<code data-anolis-spec=html>input</code> (except when the <code data-anolis-spec=html title=attr-input-type>type</code> attribute is
<code data-anolis-spec=html title=attr-input-type-hidden>hidden</code>, <code data-anolis-spec=html title=attr-input-type-image>image</code> or some button type such as
<code data-anolis-spec=html title=attr-input-type-submit>submit</code>), <code data-anolis-spec=html>select</code> and <code data-anolis-spec=html>textarea</code>. It indicates that the user
has to fill in a value in order to submit the form. For <code data-anolis-spec=html>select</code>, the first <code data-anolis-spec=html>option</code> element has to be a placeholder with an empty value.
<pre><label>Color: <select name=color <strong>required</strong>>
<option <strong>value=""</strong>>Choose one
<option>Red
<option>Green
<option>Blue
</select></label></pre>
<li><p>The <code data-anolis-spec=html>fieldset</code> element now allows the
<code data-anolis-spec=html title=attr-fieldset-disabled>disabled</code> attribute which disables all descendant controls (excluding those that are descendants of the <code data-anolis-spec=html>legend</code> element)
when specified, and the <code data-anolis-spec=html title=attr-fe-name>name</code> attribute which can be used for script access.
<li><p>The <code data-anolis-spec=html>input</code> element has several new attributes to
specify constraints: <code data-anolis-spec=html title=attr-fe-autocomplete>autocomplete</code>, <code data-anolis-spec=html title=attr-input-min>min</code>,
<code data-anolis-spec=html title=attr-input-max>max</code>, <code data-anolis-spec=html title=attr-input-multiple>multiple</code>, <code data-anolis-spec=html title=attr-input-pattern>pattern</code> and
<code data-anolis-spec=html title=attr-input-step>step</code>. As mentioned before it also has a new
<code data-anolis-spec=html title=attr-input-list>list</code> attribute which can be used together with the
<code data-anolis-spec=html>datalist</code> element. It also now has the <code data-anolis-spec=html title=attr-dim-width>width</code> and <code data-anolis-spec=html title=attr-dim-height>height</code> attributes to specify the dimensions of the image when using <code>type=image</code>.
<li><p>The <code data-anolis-spec=html>input</code> and <code data-anolis-spec=html>textarea</code> elements have
a new attribute named <code data-anolis-spec=html title=attr-fe-dirname>dirname</code> that causes the
directionality of the control as set by the user to be submitted as
well.
<li><p>The <code data-anolis-spec=html>textarea</code> element also has three new attributes,
<code data-anolis-spec=html title=attr-textarea-maxlength>maxlength</code>,
<code data-anolis-spec=html title=attr-textarea-minlength>minlength</code> and
<code data-anolis-spec=html title=attr-textarea-wrap>wrap</code> which control max input
length and submitted line wrapping behavior, respectively.
<li><p>The <code data-anolis-spec=html>form</code> element has a <code data-anolis-spec=html title=attr-fs-novalidate>novalidate</code>
attribute that can be used to disable form validation submission (i.e.
the form can always be submitted).
<li><p>The <code data-anolis-spec=html>input</code> and <code data-anolis-spec=html>button</code> elements have
<code data-anolis-spec=html title=attr-fs-formaction>formaction</code>, <code data-anolis-spec=html title=attr-fs-formenctype>formenctype</code>,
<code data-anolis-spec=html title=attr-fs-formmethod>formmethod</code>, <code data-anolis-spec=html title=attr-fs-formnovalidate>formnovalidate</code>, and
<code data-anolis-spec=html title=attr-fs-formtarget>formtarget</code> as new attributes. If present, they override
the <code data-anolis-spec=html title=attr-fs-action>action</code>, <code data-anolis-spec=html title=attr-fs-enctype>enctype</code>, <code data-anolis-spec=html title=attr-fs-method>method</code>,
<code data-anolis-spec=html title=attr-fs-novalidate>novalidate</code>, and <code data-anolis-spec=html title=attr-fs-target>target</code> attributes on the
<code data-anolis-spec=html>form</code> element.</p>
<li><p>The <code data-anolis-spec=html>input</code> element also has the new
<code data-anolis-spec=html title=attr-input-minlength>minlength</code> attribute.
<li><p>The <code data-anolis-spec=html>input</code> and
<code data-anolis-spec=html>textarea</code> elements have an
<code data-anolis-spec=html title="attr-fe-inputmode">inputmode</code> attribute.
<li><p>The <code data-anolis-spec=html>menu</code> element has two new attributes:
<code data-anolis-spec=html title=attr-menu-type>type</code> and <code data-anolis-spec=html title=attr-menu-label>label</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 data-anolis-spec=html title=attr-contextmenu>contextmenu</code> attribute.
<li><p>The <code data-anolis-spec=html>button</code>
element has a new <code data-anolis-spec=html title=attr-button-menu>menu</code>
attribute, used together with popup menus.
<li><p>The <code data-anolis-spec=html>style</code> element has a new <code data-anolis-spec=html title=attr-style-scoped>scoped</code>
attribute which can be used to enable scoped style sheets. Style rules
within such a <code data-anolis-spec=html>style</code> element only apply to the local tree.
<li><p>The <code data-anolis-spec=html>script</code> element has a new attribute called
<code data-anolis-spec=html title=attr-script-async>async</code> that influences script loading and execution.
<li><p>The <code data-anolis-spec=html>html</code> element has a new attribute called
<code data-anolis-spec=html title=attr-html-manifest>manifest</code> that points to an application cache manifest
used in conjunction with the API for offline Web applications.
<li><p>The <code data-anolis-spec=html>link</code> element has a new attribute called
<code data-anolis-spec=html title=attr-link-sizes>sizes</code>. It can be used in conjunction with the
<code data-anolis-spec=html title=rel-icon>icon</code> relationship (set through the <code data-anolis-spec=html title=attr-link-rel>rel</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 data-anolis-spec=html>ol</code> element has a new attribute called
<code data-anolis-spec=html title=attr-ol-reversed>reversed</code>. When present, it indicates that the list order
is descending.
<li><p>The <code data-anolis-spec=html>iframe</code> element has new attributes called
<code data-anolis-spec=html title=attr-iframe-sandbox>sandbox</code>, <code data-anolis-spec=html title=attr-iframe-seamless>seamless</code>,
and <code data-anolis-spec=html title=attr-iframe-srcdoc>srcdoc</code>
which allow for sandboxing content, e.g. blog comments.</p></li>
<li><p>The <code data-anolis-spec=html>object</code> element has a new attribute called <code data-anolis-spec=html title=attr-object-typemustmatch>typemustmatch</code> which allows safer embedding of external resources.
<li><p>The <code data-anolis-spec=html>img</code> element has a new attribute called
<code data-anolis-spec=html title=attr-img-crossorigin>crossorigin</code> to use CORS in the fetch and if it is successful, allows the image data to be
read with the <code data-anolis-spec=html>canvas</code> API.
The <code data-anolis-spec=html>script</code> element has a
<code data-anolis-spec=html title=attr-script-crossorigin>crossorigin</code> attribute to allow script
<span data-anolis-spec=html title="report the error">errors to be reported</span> to
<code data-anolis-spec=html title=handler-onerror>onerror</code> with information about the error.
The <code data-anolis-spec=html>link</code> element also has a
<code data-anolis-spec=html title=attr-link-crossorigin>crossorigin</code> attribute.
<li><p>The <code data-anolis-spec=html>img</code> element has new attributes called
<code data-anolis-spec=html title=attr-img-srcset>srcset</code>
and <code data-anolis-spec=html title=attr-img-sizes>sizes</code>,
along with the new elements <code data-anolis-spec=html>picture</code> and
<code data-anolis-spec=html title=picture-source>source</code>
to allow Web developers to declaratively control or give hints to the user agent
about which image resource to use, based on the screen pixel density,
viewport size, image format, and other factors.
</ul>
<p>Several attributes from HTML4 now apply to all elements. These
are called global attributes: <code data-anolis-spec=html title=attr-accesskey>accesskey</code>, <code data-anolis-spec=html title=attr-class>class</code>, <code data-anolis-spec=html title=attr-dir>dir</code>,
<code data-anolis-spec=html title=attr-id>id</code>, <code data-anolis-spec=html title=attr-dir>lang</code>, <code data-anolis-spec=html title=attr-style>style</code>,
<code data-anolis-spec=html title=attr-tabindex>tabindex</code> and <code data-anolis-spec=html title=attr-title>title</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 data-anolis-spec=html
title=attr-contenteditable>contenteditable</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 data-anolis-spec=html
title=attr-contextmenu>contextmenu</code> attribute can be used to point
to a context menu provided by the Web developer.
<li><p>The <code data-anolis-spec=html
title="attr-data-*">data-<var>*</var></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 data-anolis-spec=html
title=attr-draggable>draggable</code> and <code data-anolis-spec=html
title=attr-dropzone>dropzone</code> attributes can be used together with
the new drag & drop API.
<li><p>The <code data-anolis-spec=html title=attr-hidden>hidden</code>
attribute indicates that an element is not yet, or is no longer, relevant.
<li><p>The <code data-anolis-spec=html title=wai-aria>role</code> and
<code data-anolis-spec=html title=wai-aria>aria-<var>*</var></code>
collection attributes which can be used to instruct assistive
technology.
<li><p>The <code data-anolis-spec=html
title=attr-spellcheck>spellcheck</code> attribute allows for hinting
whether content can be checked for spelling or not.
<li><p>The <code data-anolis-spec=html
title=attr-translate>translate</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 data-anolis-spec=html title=handler-onplay>onplay</code>
event handler attribute for the <code data-anolis-spec=html
title=event-media-play>play</code> event which is used by the API for the
media elements (<code data-anolis-spec=html>video</code> and <code
data-anolis-spec=html>audio</code>).
The specification has an <a href="https://html.spec.whatwg.org/multipage/indices.html#events-2">index of all events</a>.</p>
<h3 id="changed-elements">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 data-anolis-spec=html>address</code> element is now
scoped by the nearest ancestor <code data-anolis-spec=html>article</code>
or <code data-anolis-spec=html>body</code> element.</p></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 data-anolis-spec=html>b</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.</p></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 data-anolis-spec=html>cite</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.</p></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
html4:
The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to documents.
These elements define content to be inline (SPAN) or block-level (DIV) but
impose no other presentational idioms on the content. Thus, authors may
use these elements in conjunction with style sheets, the lang attribute,
etc., to tailor HTML to their own needs and tastes.
html:
The div element has no special meaning at all. It represents its children.
It can be used with the class, lang, and title attributes to mark up
semantics common to a group of consecutive elements.
-->
<li><p>The <code data-anolis-spec=html>dl</code> element now represents an
association list of name-value groups, and is no longer said to be
appropriate for dialogue.</p></li>
<!--
DT
covered by dl
-->
<!--
EM
html4:
Indicates emphasis.
html:
The em element represents stress emphasis of its contents.
-->