summaryrefslogtreecommitdiffstats
path: root/WebCore/benchmarks/parser/resources/html5.html
blob: ccb95bc576efef321e9162f061c4296555160eb6 (plain) 
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
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735
1736
1737
1738
1739
1740
1741
1742
1743
1744
1745
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
1863
1864
1865
1866
1867
1868
1869
1870
1871
1872
1873
1874
1875
1876
1877
1878
1879
1880
1881
1882
1883
1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
2075
2076
2077
2078
2079
2080
2081
2082
2083
2084
2085
2086
2087
2088
2089
2090
2091
2092
2093
2094
2095
2096
2097
2098
2099
2100
2101
2102
2103
2104
2105
2106
2107
2108
2109
2110
2111
2112
2113
2114
2115
2116
2117
2118
2119
2120
2121
2122
2123
2124
2125
2126
2127
2128
2129
2130
2131
2132
2133
2134
2135
2136
2137
2138
2139
2140
2141
2142
2143
2144
2145
2146
2147
2148
2149
2150
2151
2152
2153
2154
2155
2156
2157
2158
2159
2160
2161
2162
2163
2164
2165
2166
2167
2168
2169
2170
2171
2172
2173
2174
2175
2176
2177
2178
2179
2180
2181
2182
2183
2184
2185
2186
2187
2188
2189
2190
2191
2192
2193
2194
2195
2196
2197
2198
2199
2200
2201
2202
2203
2204
2205
2206
2207
2208
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218
2219
2220
2221
2222
2223
2224
2225
2226
2227
2228
2229
2230
2231
2232
2233
2234
2235
2236
2237
2238
2239
2240
2241
2242
2243
2244
2245
2246
2247
2248
2249
2250
2251
2252
2253
2254
2255
2256
2257
2258
2259
2260
2261
2262
2263
2264
2265
2266
2267
2268
2269
2270
2271
2272
2273
2274
2275
2276
2277
2278
2279
2280
2281
2282
2283
2284
2285
2286
2287
2288
2289
2290
2291
2292
2293
2294
2295
2296
2297
2298
2299
2300
2301
2302
2303
2304
2305
2306
2307
2308
2309
2310
2311
2312
2313
2314
2315
2316
2317
2318
2319
2320
2321
2322
2323
2324
2325
2326
2327
2328
2329
2330
2331
2332
2333
2334
2335
2336
2337
2338
2339
2340
2341
2342
2343
2344
2345
2346
2347
2348
2349
2350
2351
2352
2353
2354
2355
2356
2357
2358
2359
2360
2361
2362
2363
2364
2365
2366
2367
2368
2369
2370
2371
2372
2373
2374
2375
2376
2377
2378
2379
2380
2381
2382
2383
2384
2385
2386
2387
2388
2389
2390
2391
2392
2393
2394
2395
2396
2397
2398
2399
2400
2401
2402
2403
2404
2405
2406
2407
2408
2409
2410
2411
2412
2413
2414
2415
2416
2417
2418
2419
2420
2421
2422
2423
2424
2425
2426
2427
2428
2429
2430
2431
2432
2433
2434
2435
2436
2437
2438
2439
2440
2441
2442
2443
2444
2445
2446
2447
2448
2449
2450
2451
2452
2453
2454
2455
2456
2457
2458
2459
2460
2461
2462
2463
2464
2465
2466
2467
2468
2469
2470
2471
2472
2473
2474
2475
2476
2477
2478
2479
2480
2481
2482
2483
2484
2485
2486
2487
2488
2489
2490
2491
2492
2493
2494
2495
2496
2497
2498
2499
2500
2501
2502
2503
2504
2505
2506
2507
2508
2509
2510
2511
2512
2513
2514
2515
2516
2517
2518
2519
2520
2521
2522
2523
2524
2525
2526
2527
2528
2529
2530
2531
2532
2533
2534
2535
2536
2537
2538
2539
2540
2541
2542
2543
2544
2545
2546
2547
2548
2549
2550
2551
2552
2553
2554
2555
2556
2557
2558
2559
2560
2561
2562
2563
2564
2565
2566
2567
2568
2569
2570
2571
2572
2573
2574
2575
2576
2577
2578
2579
2580
2581
2582
2583
2584
2585
2586
2587
2588
2589
2590
2591
2592
2593
2594
2595
2596
2597
2598
2599
2600
2601
2602
2603
2604
2605
2606
2607
2608
2609
2610
2611
2612
2613
2614
2615
2616
2617
2618
2619
2620
2621
2622
2623
2624
2625
2626
2627
2628
2629
2630
2631
2632
2633
2634
2635
2636
2637
2638
2639
2640
2641
2642
2643
2644
2645
2646
2647
2648
2649
2650
2651
2652
2653
2654
2655
2656
2657
2658
2659
2660
2661
2662
2663
2664
2665
2666
2667
2668
2669
2670
2671
2672
2673
2674
2675
2676
2677
2678
2679
2680
2681
2682
2683
2684
2685
2686
2687
2688
2689
2690
2691
2692
2693
2694
2695
2696
2697
2698
2699
2700
2701
2702
2703
2704
2705
2706
2707
2708
2709
2710
2711
2712
2713
2714
2715
2716
2717
2718
2719
2720
2721
2722
2723
2724
2725
2726
2727
2728
2729
2730
2731
2732
2733
2734
2735
2736
2737
2738
2739
2740
2741
2742
2743
2744
2745
2746
2747
2748
2749
2750
2751
2752
2753
2754
2755
2756
2757
2758
2759
2760
2761
2762
2763
2764
2765
2766
2767
2768
2769
2770
2771
2772
2773
2774
2775
2776
2777
2778
2779
2780
2781
2782
2783
2784
2785
2786
2787
2788
2789
2790
2791
2792
2793
2794
2795
2796
2797
2798
2799
2800
2801
2802
2803
2804
2805
2806
2807
2808
2809
2810
2811
2812
2813
2814
2815
2816
2817
2818
2819
2820
2821
2822
2823
2824
2825
2826
2827
2828
2829
2830
2831
2832
2833
2834
2835
2836
2837
2838
2839
2840
2841
2842
2843
2844
2845
2846
2847
2848
2849
2850
2851
2852
2853
2854
2855
2856
2857
2858
2859
2860
2861
2862
2863
2864
2865
2866
2867
2868
2869
2870
2871
2872
2873
2874
2875
2876
2877
2878
2879
2880
2881
2882
2883
2884
2885
2886
2887
2888
2889
2890
2891
2892
2893
2894
2895
2896
2897
2898
2899
2900
2901
2902
2903
2904
2905
2906
2907
2908
2909
2910
2911
2912
2913
2914
2915
2916
2917
2918
2919
2920
2921
2922
2923
2924
2925
2926
2927
2928
2929
2930
2931
2932
2933
2934
2935
2936
2937
2938
2939
2940
2941
2942
2943
2944
2945
2946
2947
2948
2949
2950
2951
2952
2953
2954
2955
2956
2957
2958
2959
2960
2961
2962
2963
2964
2965
2966
2967
2968
2969
2970
2971
2972
2973
2974
2975
2976
2977
2978
2979
2980
2981
2982
2983
2984
2985
2986
2987
2988
2989
2990
2991
2992
2993
2994
2995
2996
2997
2998
2999
3000
3001
3002
3003
3004
3005
3006
3007
3008
3009
3010
3011
3012
3013
3014
3015
3016
3017
3018
3019
3020
3021
3022
3023
3024
3025
3026
3027
3028
3029
3030
3031
3032
3033
3034
3035
3036
3037
3038
3039
3040
3041
3042
3043
3044
3045
3046
3047
3048
3049
3050
3051
3052
3053
3054
3055
3056
3057
3058
3059
3060
3061
3062
3063
3064
3065
3066
3067
3068
3069
3070
3071
3072
3073
3074
3075
3076
3077
3078
3079
3080
3081
3082
3083
3084
3085
3086
3087
3088
3089
3090
3091
3092
3093
3094
3095
3096
3097
3098
3099
3100
3101
3102
3103
3104
3105
3106
3107
3108
3109
3110
3111
3112
3113
3114
3115
3116
3117
3118
3119
3120
3121
3122
3123
3124
3125
3126
3127
3128
3129
3130
3131
3132
3133
3134
3135
3136
3137
3138
3139
3140
3141
3142
3143
3144
3145
3146
3147
3148
3149
3150
3151
3152
3153
3154
3155
3156
3157
3158
3159
3160
3161
3162
3163
3164
3165
3166
3167
3168
3169
3170
3171
3172
3173
3174
3175
3176
3177
3178
3179
3180
3181
3182
3183
3184
3185
3186
3187
3188
3189
3190
3191
3192
3193
3194
3195
3196
3197
3198
3199
3200
3201
3202
3203
3204
3205
3206
3207
3208
3209
3210
3211
3212
3213
3214
3215
3216
3217
3218
3219
3220
3221
3222
3223
3224
3225
3226
3227
3228
3229
3230
3231
3232
3233
3234
3235
3236
3237
3238
3239
3240
3241
3242
3243
3244
3245
3246
3247
3248
3249
3250
3251
3252
3253
3254
3255
3256
3257
3258
3259
3260
3261
3262
3263
3264
3265
3266
3267
3268
3269
3270
3271
3272
3273
3274
3275
3276
3277
3278
3279
3280
3281
3282
3283
3284
3285
3286
3287
3288
3289
3290
3291
3292
3293
3294
3295
3296
3297
3298
3299
3300
3301
3302
3303
3304
3305
3306
3307
3308
3309
3310
3311
3312
3313
3314
3315
3316
3317
3318
3319
3320
3321
3322
3323
3324
3325
3326
3327
3328
3329
3330
3331
3332
3333
3334
3335
3336
3337
3338
3339
3340
3341
3342
3343
3344
3345
3346
3347
3348
3349
3350
3351
3352
3353
3354
3355
3356
3357
3358
3359
3360
3361
3362
3363
3364
3365
3366
3367
3368
3369
3370
3371
3372
3373
3374
3375
3376
3377
3378
3379
3380
3381
3382
3383
3384
3385
3386
3387
3388
3389
3390
3391
3392
3393
3394
3395
3396
3397
3398
3399
3400
3401
3402
3403
3404
3405
3406
3407
3408
3409
3410
3411
3412
3413
3414
3415
3416
3417
3418
3419
3420
3421
3422
3423
3424
3425
3426
3427
3428
3429
3430
3431
3432
3433
3434
3435
3436
3437
3438
3439
3440
3441
3442
3443
3444
3445
3446
3447
3448
3449
3450
3451
3452
3453
3454
3455
3456
3457
3458
3459
3460
3461
3462
3463
3464
3465
3466
3467
3468
3469
3470
3471
3472
3473
3474
3475
3476
3477
3478
3479
3480
3481
3482
3483
3484
3485
3486
3487
3488
3489
3490
3491
3492
3493
3494
3495
3496
3497
3498
3499
3500
3501
3502
3503
3504
3505
3506
3507
3508
3509
3510
3511
3512
3513
3514
3515
3516
3517
3518
3519
3520
3521
3522
3523
3524
3525
3526
3527
3528
3529
3530
3531
3532
3533
3534
3535
3536
3537
3538
3539
3540
3541
3542
3543
3544
3545
3546
3547
3548
3549
3550
3551
3552
3553
3554
3555
3556
3557
3558
3559
3560
3561
3562
3563
3564
3565
3566
3567
3568
3569
3570
3571
3572
3573
3574
3575
3576
3577
3578
3579
3580
3581
3582
3583
3584
3585
3586
3587
3588
3589
3590
3591
3592
3593
3594
3595
3596
3597
3598
3599
3600
3601
3602
3603
3604
3605
3606
3607
3608
3609
3610
3611
3612
3613
3614
3615
3616
3617
3618
3619
3620
3621
3622
3623
3624
3625
3626
3627
3628
3629
3630
3631
3632
3633
3634
3635
3636
3637
3638
3639
3640
3641
3642
3643
3644
3645
3646
3647
3648
3649
3650
3651
3652
3653
3654
3655
3656
3657
3658
3659
3660
3661
3662
3663
3664
3665
3666
3667
3668
3669
3670
3671
3672
3673
3674
3675
3676
3677
3678
3679
3680
3681
3682
3683
3684
3685
3686
3687
3688
3689
3690
3691
3692
3693
3694
3695
3696
3697
3698
3699
3700
3701
3702
3703
3704
3705
3706
3707
3708
3709
3710
3711
3712
3713
3714
3715
3716
3717
3718
3719
3720
3721
3722
3723
3724
3725
3726
3727
3728
3729
3730
3731
3732
3733
3734
3735
3736
3737
3738
3739
3740
3741
3742
3743
3744
3745
3746
3747
3748
3749
3750
3751
3752
3753
3754
3755
3756
3757
3758
3759
3760
3761
3762
3763
3764
3765
3766
3767
3768
3769
3770
3771
3772
3773
3774
3775
3776
3777
3778
3779
3780
3781
3782
3783
3784
3785
3786
3787
3788
3789
3790
3791
3792
3793
3794
3795
3796
3797
3798
3799
3800
3801
3802
3803
3804
3805
3806
3807
3808
3809
3810
3811
3812
3813
3814
3815
3816
3817
3818
3819
3820
3821
3822
3823
3824
3825
3826
3827
3828
3829
3830
3831
3832
3833
3834
3835
3836
3837
3838
3839
3840
3841
3842
3843
3844
3845
3846
3847
3848
3849
3850
3851
3852
3853
3854
3855
3856
3857
3858
3859
3860
3861
3862
3863
3864
3865
3866
3867
3868
3869
3870
3871
3872
3873
3874
3875
3876
3877
3878
3879
3880
3881
3882
3883
3884
3885
3886
3887
3888
3889
3890
3891
3892
3893
3894
3895
3896
3897
3898
3899
3900
3901
3902
3903
3904
3905
3906
3907
3908
3909
3910
3911
3912
3913
3914
3915
3916
3917
3918
3919
3920
3921
3922
3923
3924
3925
3926
3927
3928
3929
3930
3931
3932
3933
3934
3935
3936
3937
3938
3939
3940
3941
3942
3943
3944
3945
3946
3947
3948
3949
3950
3951
3952
3953
3954
3955
3956
3957
3958
3959
3960
3961
3962
3963
3964
3965
3966
3967
3968
3969
3970
3971
3972
3973
3974
3975
3976
3977
3978
3979
3980
3981
3982
3983
3984
3985
3986
3987
3988
3989
3990
3991
3992
3993
3994
3995
3996
3997
3998
3999
4000
4001
4002
4003
4004
4005
4006
4007
4008
4009
4010
4011
4012
4013
4014
4015
4016
4017
4018
4019
4020
4021
4022
4023
4024
4025
4026
4027
4028
4029
4030
4031
4032
4033
4034
4035
4036
4037
4038
4039
4040
4041
4042
4043
4044
4045
4046
4047
4048
4049
4050
4051
4052
4053
4054
4055
4056
4057
4058
4059
4060
4061
4062
4063
4064
4065
4066
4067
4068
4069
4070
4071
4072
4073
4074
4075
4076
4077
4078
4079
4080
4081
4082
4083
4084
4085
4086
4087
4088
4089
4090
4091
4092
4093
4094
4095
4096
4097
4098
4099
4100
4101
4102
4103
4104
4105
4106
4107
4108
4109
4110
4111
4112
4113
4114
4115
4116
4117
4118
4119
4120
4121
4122
4123
4124
4125
4126
4127
4128
4129
4130
4131
4132
4133
4134
4135
4136
4137
4138
4139
4140
4141
4142
4143
4144
4145
4146
4147
4148
4149
4150
4151
4152
4153
4154
4155
4156
4157
4158
4159
4160
4161
4162
4163
4164
4165
4166
4167
4168
4169
4170
4171
4172
4173
4174
4175
4176
4177
4178
4179
4180
4181
4182
4183
4184
4185
4186
4187
4188
4189
4190
4191
4192
4193
4194
4195
4196
4197
4198
4199
4200
4201
4202
4203
4204
4205
4206
4207
4208
4209
4210
4211
4212
4213
4214
4215
4216
4217
4218
4219
4220
4221
4222
4223
4224
4225
4226
4227
4228
4229
4230
4231
4232
4233
4234
4235
4236
4237
4238
4239
4240
4241
4242
4243
4244
4245
4246
4247
4248
4249
4250
4251
4252
4253
4254
4255
4256
4257
4258
4259
4260
4261
4262
4263
4264
4265
4266
4267
4268
4269
4270
4271
4272
4273
4274
4275
4276
4277
4278
4279
4280
4281
4282
4283
4284
4285
4286
4287
4288
4289
4290
4291
4292
4293
4294
4295
4296
4297
4298
4299
4300
4301
4302
4303
4304
4305
4306
4307
4308
4309
4310
4311
4312
4313
4314
4315
4316
4317
4318
4319
4320
4321
4322
4323
4324
4325
4326
4327
4328
4329
4330
4331
4332
4333
4334
4335
4336
4337
4338
4339
4340
4341
4342
4343
4344
4345
4346
4347
4348
4349
4350
4351
4352
4353
4354
4355
4356
4357
4358
4359
4360
4361
4362
4363
4364
4365
4366
4367
4368
4369
4370
4371
4372
4373
4374
4375
4376
4377
4378
4379
4380
4381
4382
4383
4384
4385
4386
4387
4388
4389
4390
4391
4392
4393
4394
4395
4396
4397
4398
4399
4400
4401
4402
4403
4404
4405
4406
4407
4408
4409
4410
4411
4412
4413
4414
4415
4416
4417
4418
4419
4420
4421
4422
4423
4424
4425
4426
4427
4428
4429
4430
4431
4432
4433
4434
4435
4436
4437
4438
4439
4440
4441
4442
4443
4444
4445
4446
4447
4448
4449
4450
4451
4452
4453
4454
4455
4456
4457
4458
4459
4460
4461
4462
4463
4464
4465
4466
4467
4468
4469
4470
4471
4472
4473
4474
4475
4476
4477
4478
4479
4480
4481
4482
4483
4484
4485
4486
4487
4488
4489
4490
4491
4492
4493
4494
4495
4496
4497
4498
4499
4500
4501
4502
4503
4504
4505
4506
4507
4508
4509
4510
4511
4512
4513
4514
4515
4516
4517
4518
4519
4520
4521
4522
4523
4524
4525
4526
4527
4528
4529
4530
4531
4532
4533
4534
4535
4536
4537
4538
4539
4540
4541
4542
4543
4544
4545
4546
4547
4548
4549
4550
4551
4552
4553
4554
4555
4556
4557
4558
4559
4560
4561
4562
4563
4564
4565
4566
4567
4568
4569
4570
4571
4572
4573
4574
4575
4576
4577
4578
4579
4580
4581
4582
4583
4584
4585
4586
4587
4588
4589
4590
4591
4592
4593
4594
4595
4596
4597
4598
4599
4600
4601
4602
4603
4604
4605
4606
4607
4608
4609
4610
4611
4612
4613
4614
4615
4616
4617
4618
4619
4620
4621
4622
4623
4624
4625
4626
4627
4628
4629
4630
4631
4632
4633
4634
4635
4636
4637
4638
4639
4640
4641
4642
4643
4644
4645
4646
4647
4648
4649
4650
4651
4652
4653
4654
4655
4656
4657
4658
4659
4660
4661
4662
4663
4664
4665
4666
4667
4668
4669
4670
4671
4672
4673
4674
4675
4676
4677
4678
4679
4680
4681
4682
4683
4684
4685
4686
4687
4688
4689
4690
4691
4692
4693
4694
4695
4696
4697
4698
4699
4700
4701
4702
4703
4704
4705
4706
4707
4708
4709
4710
4711
4712
4713
4714
4715
4716
4717
4718
4719
4720
4721
4722
4723
4724
4725
4726
4727
4728
4729
4730
4731
4732
4733
4734
4735
4736
4737
4738
4739
4740
4741
4742
4743
4744
4745
4746
4747
4748
4749
4750
4751
4752
4753
4754
4755
4756
4757
4758
4759
4760
4761
4762
4763
4764
4765
4766
4767
4768
4769
4770
4771
4772
4773
4774
4775
4776
4777
4778
4779
4780
4781
4782
4783
4784
4785
4786
4787
4788
4789
4790
4791
4792
4793
4794
4795
4796
4797
4798
4799
4800
4801
4802
4803
4804
4805
4806
4807
4808
4809
4810
4811
4812
4813
4814
4815
4816
4817
4818
4819
4820
4821
4822
4823
4824
4825
4826
4827
4828
4829
4830
4831
4832
4833
4834
4835
4836
4837
4838
4839
4840
4841
4842
4843
4844
4845
4846
4847
4848
4849
4850
4851
4852
4853
4854
4855
4856
4857
4858
4859
4860
4861
4862
4863
4864
4865
4866
4867
4868
4869
4870
4871
4872
4873
4874
4875
4876
4877
4878
4879
4880
4881
4882
4883
4884
4885
4886
4887
4888
4889
4890
4891
4892
4893
4894
4895
4896
4897
4898
4899
4900
4901
4902
4903
4904
4905
4906
4907
4908
4909
4910
4911
4912
4913
4914
4915
4916
4917
4918
4919
4920
4921
4922
4923
4924
4925
4926
4927
4928
4929
4930
4931
4932
4933
4934
4935
4936
4937
4938
4939
4940
4941
4942
4943
4944
4945
4946
4947
4948
4949
4950
4951
4952
4953
4954
4955
4956
4957
4958
4959
4960
4961
4962
4963
4964
4965
4966
4967
4968
4969
4970
4971
4972
4973
4974
4975
4976
4977
4978
4979
4980
4981
4982
4983
4984
4985
4986
4987
4988
4989
4990
4991
4992
4993
4994
4995
4996
4997
4998
4999
5000
5001
5002
5003
5004
5005
5006
5007
5008
5009
5010
5011
5012
5013
5014
5015
5016
5017
5018
5019
5020
5021
5022
5023
5024
5025
5026
5027
5028
5029
5030
5031
5032
5033
5034
5035
5036
5037
5038
5039
5040
5041
5042
5043
5044
5045
5046
5047
5048
5049
5050
5051
5052
5053
5054
5055
5056
5057
5058
5059
5060
5061
5062
5063
5064
5065
5066
5067
5068
5069
5070
5071
5072
5073
5074
5075
5076
5077
5078
5079
5080
5081
5082
5083
5084
5085
5086
5087
5088
5089
5090
5091
5092
5093
5094
5095
5096
5097
5098
5099
5100
5101
5102
5103
5104
5105
5106
5107
5108
5109
5110
5111
5112
5113
5114
5115
5116
5117
5118
5119
5120
5121
5122
5123
5124
5125
5126
5127
5128
5129
5130
5131
5132
5133
5134
5135
5136
5137
5138
5139
5140
5141
5142
5143
5144
5145
5146
5147
5148
5149
5150
5151
5152
5153
5154
5155
5156
5157
5158
5159
5160
5161
5162
5163
5164
5165
5166
5167
5168
5169
5170
5171
5172
5173
5174
5175
5176
5177
5178
5179
5180
5181
5182
5183
5184
5185
5186
5187
5188
5189
5190
5191
5192
5193
5194
5195
5196
5197
5198
5199
5200
5201
5202
5203
5204
5205
5206
5207
5208
5209
5210
5211
5212
5213
5214
5215
5216
5217
5218
5219
5220
5221
5222
5223
5224
5225
5226
5227
5228
5229
5230
5231
5232
5233
5234
5235
5236
5237
5238
5239
5240
5241
5242
5243
5244
5245
5246
5247
5248
5249
5250
5251
5252
5253
5254
5255
5256
5257
5258
5259
5260
5261
5262
5263
5264
5265
5266
5267
5268
5269
5270
5271
5272
5273
5274
5275
5276
5277
5278
5279
5280
5281
5282
5283
5284
5285
5286
5287
5288
5289
5290
5291
5292
5293
5294
5295
5296
5297
5298
5299
5300
5301
5302
5303
5304
5305
5306
5307
5308
5309
5310
5311
5312
5313
5314
5315
5316
5317
5318
5319
5320
5321
5322
5323
5324
5325
5326
5327
5328
5329
5330
5331
5332
5333
5334
5335
5336
5337
5338
5339
5340
5341
5342
5343
5344
5345
5346
5347
5348
5349
5350
5351
5352
5353
5354
5355
5356
5357
5358
5359
5360
5361
5362
5363
5364
5365
5366
5367
5368
5369
5370
5371
5372
5373
5374
5375
5376
5377
5378
5379
5380
5381
5382
5383
5384
5385
5386
5387
5388
5389
5390
5391
5392
5393
5394
5395
5396
5397
5398
5399
5400
5401
5402
5403
5404
5405
5406
5407
5408
5409
5410
5411
5412
5413
5414
5415
5416
5417
5418
5419
5420
5421
5422
5423
5424
5425
5426
5427
5428
5429
5430
5431
5432
5433
5434
5435
5436
5437
5438
5439
5440
5441
5442
5443
5444
5445
5446
5447
5448
5449
5450
5451
5452
5453
5454
5455
5456
5457
5458
5459
5460
5461
5462
5463
5464
5465
5466
5467
5468
5469
5470
5471
5472
5473
5474
5475
5476
5477
5478
5479
5480
5481
5482
5483
5484
5485
5486
5487
5488
5489
5490
5491
5492
5493
5494
5495
5496
5497
5498
5499
5500
5501
5502
5503
5504
5505
5506
5507
5508
5509
5510
5511
5512
5513
5514
5515
5516
5517
5518
5519
5520
5521
5522
5523
5524
5525
5526
5527
5528
5529
5530
5531
5532
5533
5534
5535
5536
5537
5538
5539
5540
5541
5542
5543
5544
5545
5546
5547
5548
5549
5550
5551
5552
5553
5554
5555
5556
5557
5558
5559
5560
5561
5562
5563
5564
5565
5566
5567
5568
5569
5570
5571
5572
5573
5574
5575
5576
5577
5578
5579
5580
5581
5582
5583
5584
5585
5586
5587
5588
5589
5590
5591
5592
5593
5594
5595
5596
5597
5598
5599
5600
5601
5602
5603
5604
5605
5606
5607
5608
5609
5610
5611
5612
5613
5614
5615
5616
5617
5618
5619
5620
5621
5622
5623
5624
5625
5626
5627
5628
5629
5630
5631
5632
5633
5634
5635
5636
5637
5638
5639
5640
5641
5642
5643
5644
5645
5646
5647
5648
5649
5650
5651
5652
5653
5654
5655
5656
5657
5658
5659
5660
5661
5662
5663
5664
5665
5666
5667
5668
5669
5670
5671
5672
5673
5674
5675
5676
5677
5678
5679
5680
5681
5682
5683
5684
5685
5686
5687
5688
5689
5690
5691
5692
5693
5694
5695
5696
5697
5698
5699
5700
5701
5702
5703
5704
5705
5706
5707
5708
5709
5710
5711
5712
5713
5714
5715
5716
5717
5718
5719
5720
5721
5722
5723
5724
5725
5726
5727
5728
5729
5730
5731
5732
5733
5734
5735
5736
5737
5738
5739
5740
5741
5742
5743
5744
5745
5746
5747
5748
5749
5750
5751
5752
5753
5754
5755
5756
5757
5758
5759
5760
5761
5762
5763
5764
5765
5766
5767
5768
5769
5770
5771
5772
5773
5774
5775
5776
5777
5778
5779
5780
5781
5782
5783
5784
5785
5786
5787
5788
5789
5790
5791
5792
5793
5794
5795
5796
5797
5798
5799
5800
5801
5802
5803
5804
5805
5806
5807
5808
5809
5810
5811
5812
5813
5814
5815
5816
5817
5818
5819
5820
5821
5822
5823
5824
5825
5826
5827
5828
5829
5830
5831
5832
5833
5834
5835
5836
5837
5838
5839
5840
5841
5842
5843
5844
5845
5846
5847
5848
5849
5850
5851
5852
5853
5854
5855
5856
5857
5858
5859
5860
5861
5862
5863
5864
5865
5866
5867
5868
5869
5870
5871
5872
5873
5874
5875
5876
5877
5878
5879
5880
5881
5882
5883
5884
5885
5886
5887
5888
5889
5890
5891
5892
5893
5894
5895
5896
5897
5898
5899
5900
5901
5902
5903
5904
5905
5906
5907
5908
5909
5910
5911
5912
5913
5914
5915
5916
5917
5918
5919
5920
5921
5922
5923
5924
5925
5926
5927
5928
5929
5930
5931
5932
5933
5934
5935
5936
5937
5938
5939
5940
5941
5942
5943
5944
5945
5946
5947
5948
5949
5950
5951
5952
5953
5954
5955
5956
5957
5958
5959
5960
5961
5962
5963
5964
5965
5966
5967
5968
5969
5970
5971
5972
5973
5974
5975
5976
5977
5978
5979
5980
5981
5982
5983
5984
5985
5986
5987
5988
5989
5990
5991
5992
5993
5994
5995
5996
5997
5998
5999
6000
6001
6002
6003
6004
6005
6006
6007
6008
6009
6010
6011
6012
6013
6014
6015
6016
6017
6018
6019
6020
6021
6022
6023
6024
6025
6026
6027
6028
6029
6030
6031
6032
6033
6034
6035
6036
6037
6038
6039
6040
6041
6042
6043
6044
6045
6046
6047
6048
6049
6050
6051
6052
6053
6054
6055
6056
6057
6058
6059
6060
6061
6062
6063
6064
6065
6066
6067
6068
6069
6070
6071
6072
6073
6074
6075
6076
6077
6078
6079
6080
6081
6082
6083
6084
6085
6086
6087
6088
6089
6090
6091
6092
6093
6094
6095
6096
6097
6098
6099
6100
6101
6102
6103
6104
6105
6106
6107
6108
6109
6110
6111
6112
6113
6114
6115
6116
6117
6118
6119
6120
6121
6122
6123
6124
6125
6126
6127
6128
6129
6130
6131
6132
6133
6134
6135
6136
6137
6138
6139
6140
6141
6142
6143
6144
6145
6146
6147
6148
6149
6150
6151
6152
6153
6154
6155
6156
6157
6158
6159
6160
6161
6162
6163
6164
6165
6166
6167
6168
6169
6170
6171
6172
6173
6174
6175
6176
6177
6178
6179
6180
6181
6182
6183
6184
6185
6186
6187
6188
6189
6190
6191
6192
6193
6194
6195
6196
6197
6198
6199
6200
6201
6202
6203
6204
6205
6206
6207
6208
6209
6210
6211
6212
6213
6214
6215
6216
6217
6218
6219
6220
6221
6222
6223
6224
6225
6226
6227
6228
6229
6230
6231
6232
6233
6234
6235
6236
6237
6238
6239
6240
6241
6242
6243
6244
6245
6246
6247
6248
6249
6250
6251
6252
6253
6254
6255
6256
6257
6258
6259
6260
6261
6262
6263
6264
6265
6266
6267
6268
6269
6270
6271
6272
6273
6274
6275
6276
6277
6278
6279
6280
6281
6282
6283
6284
6285
6286
6287
6288
6289
6290
6291
6292
6293
6294
6295
6296
6297
6298
6299
6300
6301
6302
6303
6304
6305
6306
6307
6308
6309
6310
6311
6312
6313
6314
6315
6316
6317
6318
6319
6320
6321
6322
6323
6324
6325
6326
6327
6328
6329
6330
6331
6332
6333
6334
6335
6336
6337
6338
6339
6340
6341
6342
6343
6344
6345
6346
6347
6348
6349
6350
6351
6352
6353
6354
6355
6356
6357
6358
6359
6360
6361
6362
6363
6364
6365
6366
6367
6368
6369
6370
6371
6372
6373
6374
6375
6376
6377
6378
6379
6380
6381
6382
6383
6384
6385
6386
6387
6388
6389
6390
6391
6392
6393
6394
6395
6396
6397
6398
6399
6400
6401
6402
6403
6404
6405
6406
6407
6408
6409
6410
6411
6412
6413
6414
6415
6416
6417
6418
6419
6420
6421
6422
6423
6424
6425
6426
6427
6428
6429
6430
6431
6432
6433
6434
6435
6436
6437
6438
6439
6440
6441
6442
6443
6444
6445
6446
6447
6448
6449
6450
6451
6452
6453
6454
6455
6456
6457
6458
6459
6460
6461
6462
6463
6464
6465
6466
6467
6468
6469
6470
6471
6472
6473
6474
6475
6476
6477
6478
6479
6480
6481
6482
6483
6484
6485
6486
6487
6488
6489
6490
6491
6492
6493
6494
6495
6496
6497
6498
6499
6500
6501
6502
6503
6504
6505
6506
6507
6508
6509
6510
6511
6512
6513
6514
6515
6516
6517
6518
6519
6520
6521
6522
6523
6524
6525
6526
6527
6528
6529
6530
6531
6532
6533
6534
6535
6536
6537
6538
6539
6540
6541
6542
6543
6544
6545
6546
6547
6548
6549
6550
6551
6552
6553
6554
6555
6556
6557
6558
6559
6560
6561
6562
6563
6564
6565
6566
6567
6568
6569
6570
6571
6572
6573
6574
6575
6576
6577
6578
6579
6580
6581
6582
6583
6584
6585
6586
6587
6588
6589
6590
6591
6592
6593
6594
6595
6596
6597
6598
6599
6600
6601
6602
6603
6604
6605
6606
6607
6608
6609
6610
6611
6612
6613
6614
6615
6616
6617
6618
6619
6620
6621
6622
6623
6624
6625
6626
6627
6628
6629
6630
6631
6632
6633
6634
6635
6636
6637
6638
6639
6640
6641
6642
6643
6644
6645
6646
6647
6648
6649
6650
6651
6652
6653
6654
6655
6656
6657
6658
6659
6660
6661
6662
6663
6664
6665
6666
6667
6668
6669
6670
6671
6672
6673
6674
6675
6676
6677
6678
6679
6680
6681
6682
6683
6684
6685
6686
6687
6688
6689
6690
6691
6692
6693
6694
6695
6696
6697
6698
6699
6700
6701
6702
6703
6704
6705
6706
6707
6708
6709
6710
6711
6712
6713
6714
6715
6716
6717
6718
6719
6720
6721
6722
6723
6724
6725
6726
6727
6728
6729
6730
6731
6732
6733
6734
6735
6736
6737
6738
6739
6740
6741
6742
6743
6744
6745
6746
6747
6748
6749
6750
6751
6752
6753
6754
6755
6756
6757
6758
6759
6760
6761
6762
6763
6764
6765
6766
6767
6768
6769
6770
6771
6772
6773
6774
6775
6776
6777
6778
6779
6780
6781
6782
6783
6784
6785
6786
6787
6788
6789
6790
6791
6792
6793
6794
6795
6796
6797
6798
6799
6800
6801
6802
6803
6804
6805
6806
6807
6808
6809
6810
6811
6812
6813
6814
6815
6816
6817
6818
6819
6820
6821
6822
6823
6824
6825
6826
6827
6828
6829
6830
6831
6832
6833
6834
6835
6836
6837
6838
6839
6840
6841
6842
6843
6844
6845
6846
6847
6848
6849
6850
6851
6852
6853
6854
6855
6856
6857
6858
6859
6860
6861
6862
6863
6864
6865
6866
6867
6868
6869
6870
6871
6872
6873
6874
6875
6876
6877
6878
6879
6880
6881
6882
6883
6884
6885
6886
6887
6888
6889
6890
6891
6892
6893
6894
6895
6896
6897
6898
6899
6900
6901
6902
6903
6904
6905
6906
6907
6908
6909
6910
6911
6912
6913
6914
6915
6916
6917
6918
6919
6920
6921
6922
6923
6924
6925
6926
6927
6928
6929
6930
6931
6932
6933
6934
6935
6936
6937
6938
6939
6940
6941
6942
6943
6944
6945
6946
6947
6948
6949
6950
6951
6952
6953
6954
6955
6956
6957
6958
6959
6960
6961
6962
6963
6964
6965
6966
6967
6968
6969
6970
6971
6972
6973
6974
6975
6976
6977
6978
6979
6980
6981
6982
6983
6984
6985
6986
6987
6988
6989
6990
6991
6992
6993
6994
6995
6996
6997
6998
6999
7000
7001
7002
7003
7004
7005
7006
7007
7008
7009
7010
7011
7012
7013
7014
7015
7016
7017
7018
7019
7020
7021
7022
7023
7024
7025
7026
7027
7028
7029
7030
7031
7032
7033
7034
7035
7036
7037
7038
7039
7040
7041
7042
7043
7044
7045
7046
7047
7048
7049
7050
7051
7052
7053
7054
7055
7056
7057
7058
7059
7060
7061
7062
7063
7064
7065
7066
7067
7068
7069
7070
7071
7072
7073
7074
7075
7076
7077
7078
7079
7080
7081
7082
7083
7084
7085
7086
7087
7088
7089
7090
7091
7092
7093
7094
7095
7096
7097
7098
7099
7100
7101
7102
7103
7104
7105
7106
7107
7108
7109
7110
7111
7112
7113
7114
7115
7116
7117
7118
7119
7120
7121
7122
7123
7124
7125
7126
7127
7128
7129
7130
7131
7132
7133
7134
7135
7136
7137
7138
7139
7140
7141
7142
7143
7144
7145
7146
7147
7148
7149
7150
7151
7152
7153
7154
7155
7156
7157
7158
7159
7160
7161
7162
7163
7164
7165
7166
7167
7168
7169
7170
7171
7172
7173
7174
7175
7176
7177
7178
7179
7180
7181
7182
7183
7184
7185
7186
7187
7188
7189
7190
7191
7192
7193
7194
7195
7196
7197
7198
7199
7200
7201
7202
7203
7204
7205
7206
7207
7208
7209
7210
7211
7212
7213
7214
7215
7216
7217
7218
7219
7220
7221
7222
7223
7224
7225
7226
7227
7228
7229
7230
7231
7232
7233
7234
7235
7236
7237
7238
7239
7240
7241
7242
7243
7244
7245
7246
7247
7248
7249
7250
7251
7252
7253
7254
7255
7256
7257
7258
7259
7260
7261
7262
7263
7264
7265
7266
7267
7268
7269
7270
7271
7272
7273
7274
7275
7276
7277
7278
7279
7280
7281
7282
7283
7284
7285
7286
7287
7288
7289
7290
7291
7292
7293
7294
7295
7296
7297
7298
7299
7300
7301
7302
7303
7304
7305
7306
7307
7308
7309
7310
7311
7312
7313
7314
7315
7316
7317
7318
7319
7320
7321
7322
7323
7324
7325
7326
7327
7328
7329
7330
7331
7332
7333
7334
7335
7336
7337
7338
7339
7340
7341
7342
7343
7344
7345
7346
7347
7348
7349
7350
7351
7352
7353
7354
7355
7356
7357
7358
7359
7360
7361
7362
7363
7364
7365
7366
7367
7368
7369
7370
7371
7372
7373
7374
7375
7376
7377
7378
7379
7380
7381
7382
7383
7384
7385
7386
7387
7388
7389
7390
7391
7392
7393
7394
7395
7396
7397
7398
7399
7400
7401
7402
7403
7404
7405
7406
7407
7408
7409
7410
7411
7412
7413
7414
7415
7416
7417
7418
7419
7420
7421
7422
7423
7424
7425
7426
7427
7428
7429
7430
7431
7432
7433
7434
7435
7436
7437
7438
7439
7440
7441
7442
7443
7444
7445
7446
7447
7448
7449
7450
7451
7452
7453
7454
7455
7456
7457
7458
7459
7460
7461
7462
7463
7464
7465
7466
7467
7468
7469
7470
7471
7472
7473
7474
7475
7476
7477
7478
7479
7480
7481
7482
7483
7484
7485
7486
7487
7488
7489
7490
7491
7492
7493
7494
7495
7496
7497
7498
7499
7500
7501
7502
7503
7504
7505
7506
7507
7508
7509
7510
7511
7512
7513
7514
7515
7516
7517
7518
7519
7520
7521
7522
7523
7524
7525
7526
7527
7528
7529
7530
7531
7532
7533
7534
7535
7536
7537
7538
7539
7540
7541
7542
7543
7544
7545
7546
7547
7548
7549
7550
7551
7552
7553
7554
7555
7556
7557
7558
7559
7560
7561
7562
7563
7564
7565
7566
7567
7568
7569
7570
7571
7572
7573
7574
7575
7576
7577
7578
7579
7580
7581
7582
7583
7584
7585
7586
7587
7588
7589
7590
7591
7592
7593
7594
7595
7596
7597
7598
7599
7600
7601
7602
7603
7604
7605
7606
7607
7608
7609
7610
7611
7612
7613
7614
7615
7616
7617
7618
7619
7620
7621
7622
7623
7624
7625
7626
7627
7628
7629
7630
7631
7632
7633
7634
7635
7636
7637
7638
7639
7640
7641
7642
7643
7644
7645
7646
7647
7648
7649
7650
7651
7652
7653
7654
7655
7656
7657
7658
7659
7660
7661
7662
7663
7664
7665
7666
7667
7668
7669
7670
7671
7672
7673
7674
7675
7676
7677
7678
7679
7680
7681
7682
7683
7684
7685
7686
7687
7688
7689
7690
7691
7692
7693
7694
7695
7696
7697
7698
7699
7700
7701
7702
7703
7704
7705
7706
7707
7708
7709
7710
7711
7712
7713
7714
7715
7716
7717
7718
7719
7720
7721
7722
7723
7724
7725
7726
7727
7728
7729
7730
7731
7732
7733
7734
7735
7736
7737
7738
7739
7740
7741
7742
7743
7744
7745
7746
7747
7748
7749
7750
7751
7752
7753
7754
7755
7756
7757
7758
7759
7760
7761
7762
7763
7764
7765
7766
7767
7768
7769
7770
7771
7772
7773
7774
7775
7776
7777
7778
7779
7780
7781
7782
7783
7784
7785
7786
7787
7788
7789
7790
7791
7792
7793
7794
7795
7796
7797
7798
7799
7800
7801
7802
7803
7804
7805
7806
7807
7808
7809
7810
7811
7812
7813
7814
7815
7816
7817
7818
7819
7820
7821
7822
7823
7824
7825
7826
7827
7828
7829
7830
7831
7832
7833
7834
7835
7836
7837
7838
7839
7840
7841
7842
7843
7844
7845
7846
7847
7848
7849
7850
7851
7852
7853
7854
7855
7856
7857
7858
7859
7860
7861
7862
7863
7864
7865
7866
7867
7868
7869
7870
7871
7872
7873
7874
7875
7876
7877
7878
7879
7880
7881
7882
7883
7884
7885
7886
7887
7888
7889
7890
7891
7892
7893
7894
7895
7896
7897
7898
7899
7900
7901
7902
7903
7904
7905
7906
7907
7908
7909
7910
7911
7912
7913
7914
7915
7916
7917
7918
7919
7920
7921
7922
7923
7924
7925
7926
7927
7928
7929
7930
7931
7932
7933
7934
7935
7936
7937
7938
7939
7940
7941
7942
7943
7944
7945
7946
7947
7948
7949
7950
7951
7952
7953
7954
7955
7956
7957
7958
7959
7960
7961
7962
7963
7964
7965
7966
7967
7968
7969
7970
7971
7972
7973
7974
7975
7976
7977
7978
7979
7980
7981
7982
7983
7984
7985
7986
7987
7988
7989
7990
7991
7992
7993
7994
7995
7996
7997
7998
7999
8000
8001
8002
8003
8004
8005
8006
8007
8008
8009
8010
8011
8012
8013
8014
8015
8016
8017
8018
8019
8020
8021
8022
8023
8024
8025
8026
8027
8028
8029
8030
8031
8032
8033
8034
8035
8036
8037
8038
8039
8040
8041
8042
8043
8044
8045
8046
8047
8048
8049
8050
8051
8052
8053
8054
8055
8056
8057
8058
8059
8060
8061
8062
8063
8064
8065
8066
8067
8068
8069
8070
8071
8072
8073
8074
8075
8076
8077
8078
8079
8080
8081
8082
8083
8084
8085
8086
8087
8088
8089
8090
8091
8092
8093
8094
8095
8096
8097
8098
8099
8100
8101
8102
8103
8104
8105
8106
8107
8108
8109
8110
8111
8112
8113
8114
8115
8116
8117
8118
8119
8120
8121
8122
8123
8124
8125
8126
8127
8128
8129
8130
8131
8132
8133
8134
8135
8136
8137
8138
8139
8140
8141
8142
8143
8144
8145
8146
8147
8148
8149
8150
8151
8152
8153
8154
8155
8156
8157
8158
8159
8160
8161
8162
8163
8164
8165
8166
8167
8168
8169
8170
8171
8172
8173
8174
8175
8176
8177
8178
8179
8180
8181
8182
8183
8184
8185
8186
8187
8188
8189
8190
8191
8192
8193
8194
8195
8196
8197
8198
8199
8200
8201
8202
8203
8204
8205
8206
8207
8208
8209
8210
8211
8212
8213
8214
8215
8216
8217
8218
8219
8220
8221
8222
8223
8224
8225
8226
8227
8228
8229
8230
8231
8232
8233
8234
8235
8236
8237
8238
8239
8240
8241
8242
8243
8244
8245
8246
8247
8248
8249
8250
8251
8252
8253
8254
8255
8256
8257
8258
8259
8260
8261
8262
8263
8264
8265
8266
8267
8268
8269
8270
8271
8272
8273
8274
8275
8276
8277
8278
8279
8280
8281
8282
8283
8284
8285
8286
8287
8288
8289
8290
8291
8292
8293
8294
8295
8296
8297
8298
8299
8300
8301
8302
8303
8304
8305
8306
8307
8308
8309
8310
8311
8312
8313
8314
8315
8316
8317
8318
8319
8320
8321
8322
8323
8324
8325
8326
8327
8328
8329
8330
8331
8332
8333
8334
8335
8336
8337
8338
8339
8340
8341
8342
8343
8344
8345
8346
8347
8348
8349
8350
8351
8352
8353
8354
8355
8356
8357
8358
8359
8360
8361
8362
8363
8364
8365
8366
8367
8368
8369
8370
8371
8372
8373
8374
8375
8376
8377
8378
8379
8380
8381
8382
8383
8384
8385
8386
8387
8388
8389
8390
8391
8392
8393
8394
8395
8396
8397
8398
8399
8400
8401
8402
8403
8404
8405
8406
8407
8408
8409
8410
8411
8412
8413
8414
8415
8416
8417
8418
8419
8420
8421
8422
8423
8424
8425
8426
8427
8428
8429
8430
8431
8432
8433
8434
8435
8436
8437
8438
8439
8440
8441
8442
8443
8444
8445
8446
8447
8448
8449
8450
8451
8452
8453
8454
8455
8456
8457
8458
8459
8460
8461
8462
8463
8464
8465
8466
8467
8468
8469
8470
8471
8472
8473
8474
8475
8476
8477
8478
8479
8480
8481
8482
8483
8484
8485
8486
8487
8488
8489
8490
8491
8492
8493
8494
8495
8496
8497
8498
8499
8500
8501
8502
8503
8504
8505
8506
8507
8508
8509
8510
8511
8512
8513
8514
8515
8516
8517
8518
8519
8520
8521
8522
8523
8524
8525
8526
8527
8528
8529
8530
8531
8532
8533
8534
8535
8536
8537
8538
8539
8540
8541
8542
8543
8544
8545
8546
8547
8548
8549
8550
8551
8552
8553
8554
8555
8556
8557
8558
8559
8560
8561
8562
8563
8564
8565
8566
8567
8568
8569
8570
8571
8572
8573
8574
8575
8576
8577
8578
8579
8580
8581
8582
8583
8584
8585
8586
8587
8588
8589
8590
8591
8592
8593
8594
8595
8596
8597
8598
8599
8600
8601
8602
8603
8604
8605
8606
8607
8608
8609
8610
8611
8612
8613
8614
8615
8616
8617
8618
8619
8620
8621
8622
8623
8624
8625
8626
8627
8628
8629
8630
8631
8632
8633
8634
8635
8636
8637
8638
8639
8640
8641
8642
8643
8644
8645
8646
8647
8648
8649
8650
8651
8652
8653
8654
8655
8656
8657
8658
8659
8660
8661
8662
8663
8664
8665
8666
8667
8668
8669
8670
8671
8672
8673
8674
8675
8676
8677
8678
8679
8680
8681
8682
8683
8684
8685
8686
8687
8688
8689
8690
8691
8692
8693
8694
8695
8696
8697
8698
8699
8700
8701
8702
8703
8704
8705
8706
8707
8708
8709
8710
8711
8712
8713
8714
8715
8716
8717
8718
8719
8720
8721
8722
8723
8724
8725
8726
8727
8728
8729
8730
8731
8732
8733
8734
8735
8736
8737
8738
8739
8740
8741
8742
8743
8744
8745
8746
8747
8748
8749
8750
8751
8752
8753
8754
8755
8756
8757
8758
8759
8760
8761
8762
8763
8764
8765
8766
8767
8768
8769
8770
8771
8772
8773
8774
8775
8776
8777
8778
8779
8780
8781
8782
8783
8784
8785
8786
8787
8788
8789
8790
8791
8792
8793
8794
8795
8796
8797
8798
8799
8800
8801
8802
8803
8804
8805
8806
8807
8808
8809
8810
8811
8812
8813
8814
8815
8816
8817
8818
8819
8820
8821
8822
8823
8824
8825
8826
8827
8828
8829
8830
8831
8832
8833
8834
8835
8836
8837
8838
8839
8840
8841
8842
8843
8844
8845
8846
8847
8848
8849
8850
8851
8852
8853
8854
8855
8856
8857
8858
8859
8860
8861
8862
8863
8864
8865
8866
8867
8868
8869
8870
8871
8872
8873
8874
8875
8876
8877
8878
8879
8880
8881
8882
8883
8884
8885
8886
8887
8888
8889
8890
8891
8892
8893
8894
8895
8896
8897
8898
8899
8900
8901
8902
8903
8904
8905
8906
8907
8908
8909
8910
8911
8912
8913
8914
8915
8916
8917
8918
8919
8920
8921
8922
8923
8924
8925
8926
8927
8928
8929
8930
8931
8932
8933
8934
8935
8936
8937
8938
8939
8940
8941
8942
8943
8944
8945
8946
8947
8948
8949
8950
8951
8952
8953
8954
8955
8956
8957
8958
8959
8960
8961
8962
8963
8964
8965
8966
8967
8968
8969
8970
8971
8972
8973
8974
8975
8976
8977
8978
8979
8980
8981
8982
8983
8984
8985
8986
8987
8988
8989
8990
8991
8992
8993
8994
8995
8996
8997
8998
8999
9000
9001
9002
9003
9004
9005
9006
9007
9008
9009
9010
9011
9012
9013
9014
9015
9016
9017
9018
9019
9020
9021
9022
9023
9024
9025
9026
9027
9028
9029
9030
9031
9032
9033
9034
9035
9036
9037
9038
9039
9040
9041
9042
9043
9044
9045
9046
9047
9048
9049
9050
9051
9052
9053
9054
9055
9056
9057
9058
9059
9060
9061
9062
9063
9064
9065
9066
9067
9068
9069
9070
9071
9072
9073
9074
9075
9076
9077
9078
9079
9080
9081
9082
9083
9084
9085
9086
9087
9088
9089
9090
9091
9092
9093
9094
9095
9096
9097
9098
9099
9100
9101
9102
9103
9104
9105
9106
9107
9108
9109
9110
9111
9112
9113
9114
9115
9116
9117
9118
9119
9120
9121
9122
9123
9124
9125
9126
9127
9128
9129
9130
9131
9132
9133
9134
9135
9136
9137
9138
9139
9140
9141
9142
9143
9144
9145
9146
9147
9148
9149
9150
9151
9152
9153
9154
9155
9156
9157
9158
9159
9160
9161
9162
9163
9164
9165
9166
9167
9168
9169
9170
9171
9172
9173
9174
9175
9176
9177
9178
9179
9180
9181
9182
9183
9184
9185
9186
9187
9188
9189
9190
9191
9192
9193
9194
9195
9196
9197
9198
9199
9200
9201
9202
9203
9204
9205
9206
9207
9208
9209
9210
9211
9212
9213
9214
9215
9216
9217
9218
9219
9220
9221
9222
9223
9224
9225
9226
9227
9228
9229
9230
9231
9232
9233
9234
9235
9236
9237
9238
9239
9240
9241
9242
9243
9244
9245
9246
9247
9248
9249
9250
9251
9252
9253
9254
9255
9256
9257
9258
9259
9260
9261
9262
9263
9264
9265
9266
9267
9268
9269
9270
9271
9272
9273
9274
9275
9276
9277
9278
9279
9280
9281
9282
9283
9284
9285
9286
9287
9288
9289
9290
9291
9292
9293
9294
9295
9296
9297
9298
9299
9300
9301
9302
9303
9304
9305
9306
9307
9308
9309
9310
9311
9312
9313
9314
9315
9316
9317
9318
9319
9320
9321
9322
9323
9324
9325
9326
9327
9328
9329
9330
9331
9332
9333
9334
9335
9336
9337
9338
9339
9340
9341
9342
9343
9344
9345
9346
9347
9348
9349
9350
9351
9352
9353
9354
9355
9356
9357
9358
9359
9360
9361
9362
9363
9364
9365
9366
9367
9368
9369
9370
9371
9372
9373
9374
9375
9376
9377
9378
9379
9380
9381
9382
9383
9384
9385
9386
9387
9388
9389
9390
9391
9392
9393
9394
9395
9396
9397
9398
9399
9400
9401
9402
9403
9404
9405
9406
9407
9408
9409
9410
9411
9412
9413
9414
9415
9416
9417
9418
9419
9420
9421
9422
9423
9424
9425
9426
9427
9428
9429
9430
9431
9432
9433
9434
9435
9436
9437
9438
9439
9440
9441
9442
9443
9444
9445
9446
9447
9448
9449
9450
9451
9452
9453
9454
9455
9456
9457
9458
9459
9460
9461
9462
9463
9464
9465
9466
9467
9468
9469
9470
9471
9472
9473
9474
9475
9476
9477
9478
9479
9480
9481
9482
9483
9484
9485
9486
9487
9488
9489
9490
9491
9492
9493
9494
9495
9496
9497
9498
9499
9500
9501
9502
9503
9504
9505
9506
9507
9508
9509
9510
9511
9512
9513
9514
9515
9516
9517
9518
9519
9520
9521
9522
9523
9524
9525
9526
9527
9528
9529
9530
9531
9532
9533
9534
9535
9536
9537
9538
9539
9540
9541
9542
9543
9544
9545
9546
9547
9548
9549
9550
9551
9552
9553
9554
9555
9556
9557
9558
9559
9560
9561
9562
9563
9564
9565
9566
9567
9568
9569
9570
9571
9572
9573
9574
9575
9576
9577
9578
9579
9580
9581
9582
9583
9584
9585
9586
9587
9588
9589
9590
9591
9592
9593
9594
9595
9596
9597
9598
9599
9600
9601
9602
9603
9604
9605
9606
9607
9608
9609
9610
9611
9612
9613
9614
9615
9616
9617
9618
9619
9620
9621
9622
9623
9624
9625
9626
9627
9628
9629
9630
9631
9632
9633
9634
9635
9636
9637
9638
9639
9640
9641
9642
9643
9644
9645
9646
9647
9648
9649
9650
9651
9652
9653
9654
9655
9656
9657
9658
9659
9660
9661
9662
9663
9664
9665
9666
9667
9668
9669
9670
9671
9672
9673
9674
9675
9676
9677
9678
9679
9680
9681
9682
9683
9684
9685
9686
9687
9688
9689
9690
9691
9692
9693
9694
9695
9696
9697
9698
9699
9700
9701
9702
9703
9704
9705
9706
9707
9708
9709
9710
9711
9712
9713
9714
9715
9716
9717
9718
9719
9720
9721
9722
9723
9724
9725
9726
9727
9728
9729
9730
9731
9732
9733
9734
9735
9736
9737
9738
9739
9740
9741
9742
9743
9744
9745
9746
9747
9748
9749
9750
9751
9752
9753
9754
9755
9756
9757
9758
9759
9760
9761
9762
9763
9764
9765
9766
9767
9768
9769
9770
9771
9772
9773
9774
9775
9776
9777
9778
9779
9780
9781
9782
9783
9784
9785
9786
9787
9788
9789
9790
9791
9792
9793
9794
9795
9796
9797
9798
9799
9800
9801
9802
9803
9804
9805
9806
9807
9808
9809
9810
9811
9812
9813
9814
9815
9816
9817
9818
9819
9820
9821
9822
9823
9824
9825
9826
9827
9828
9829
9830
9831
9832
9833
9834
9835
9836
9837
9838
9839
9840
9841
9842
9843
9844
9845
9846
9847
9848
9849
9850
9851
9852
9853
9854
9855
9856
9857
9858
9859
9860
9861
9862
9863
9864
9865
9866
9867
9868
9869
9870
9871
9872
9873
9874
9875
9876
9877
9878
9879
9880
9881
9882
9883
9884
9885
9886
9887
9888
9889
9890
9891
9892
9893
9894
9895
9896
9897
9898
9899
9900
9901
9902
9903
9904
9905
9906
9907
9908
9909
9910
9911
9912
9913
9914
9915
9916
9917
9918
9919
9920
9921
9922
9923
9924
9925
9926
9927
9928
9929
9930
9931
9932
9933
9934
9935
9936
9937
9938
9939
9940
9941
9942
9943
9944
9945
9946
9947
9948
9949
9950
9951
9952
9953
9954
9955
9956
9957
9958
9959
9960
9961
9962
9963
9964
9965
9966
9967
9968
9969
9970
9971
9972
9973
9974
9975
9976
9977
9978
9979
9980
9981
9982
9983
9984
9985
9986
9987
9988
9989
9990
9991
9992
9993
9994
9995
9996
9997
9998
9999
10000
10001
10002
10003
10004
10005
10006
10007
10008
10009
10010
10011
10012
10013
10014
10015
10016
10017
10018
10019
10020
10021
10022
10023
10024
10025
10026
10027
10028
10029
10030
10031
10032
10033
10034
10035
10036
10037
10038
10039
10040
10041
10042
10043
10044
10045
10046
10047
10048
10049
10050
10051
10052
10053
10054
10055
10056
10057
10058
10059
10060
10061
10062
10063
10064
10065
10066
10067
10068
10069
10070
10071
10072
10073
10074
10075
10076
10077
10078
10079
10080
10081
10082
10083
10084
10085
10086
10087
10088
10089
10090
10091
10092
10093
10094
10095
10096
10097
10098
10099
10100
10101
10102
10103
10104
10105
10106
10107
10108
10109
10110
10111
10112
10113
10114
10115
10116
10117
10118
10119
10120
10121
10122
10123
10124
10125
10126
10127
10128
10129
10130
10131
10132
10133
10134
10135
10136
10137
10138
10139
10140
10141
10142
10143
10144
10145
10146
10147
10148
10149
10150
10151
10152
10153
10154
10155
10156
10157
10158
10159
10160
10161
10162
10163
10164
10165
10166
10167
10168
10169
10170
10171
10172
10173
10174
10175
10176
10177
10178
10179
10180
10181
10182
10183
10184
10185
10186
10187
10188
10189
10190
10191
10192
10193
10194
10195
10196
10197
10198
10199
10200
10201
10202
10203
10204
10205
10206
10207
10208
10209
10210
10211
10212
10213
10214
10215
10216
10217
10218
10219
10220
10221
10222
10223
10224
10225
10226
10227
10228
10229
10230
10231
10232
10233
10234
10235
10236
10237
10238
10239
10240
10241
10242
10243
10244
10245
10246
10247
10248
10249
10250
10251
10252
10253
10254
10255
10256
10257
10258
10259
10260
10261
10262
10263
10264
10265
10266
10267
10268
10269
10270
10271
10272
10273
10274
10275
10276
10277
10278
10279
10280
10281
10282
10283
10284
10285
10286
10287
10288
10289
10290
10291
10292
10293
10294
10295
10296
10297
10298
10299
10300
10301
10302
10303
10304
10305
10306
10307
10308
10309
10310
10311
10312
10313
10314
10315
10316
10317
10318
10319
10320
10321
10322
10323
10324
10325
10326
10327
10328
10329
10330
10331
10332
10333
10334
10335
10336
10337
10338
10339
10340
10341
10342
10343
10344
10345
10346
10347
10348
10349
10350
10351
10352
10353
10354
10355
10356
10357
10358
10359
10360
10361
10362
10363
10364
10365
10366
10367
10368
10369
10370
10371
10372
10373
10374
10375
10376
10377
10378
10379
10380
10381
10382
10383
10384
10385
10386
10387
10388
10389
10390
10391
10392
10393
10394
10395
10396
10397
10398
10399
10400
10401
10402
10403
10404
10405
10406
10407
10408
10409
10410
10411
10412
10413
10414
10415
10416
10417
10418
10419
10420
10421
10422
10423
10424
10425
10426
10427
10428
10429
10430
10431
10432
10433
10434
10435
10436
10437
10438
10439
10440
10441
10442
10443
10444
10445
10446
10447
10448
10449
10450
10451
10452
10453
10454
10455
10456
10457
10458
10459
10460
10461
10462
10463
10464
10465
10466
10467
10468
10469
10470
10471
10472
10473
10474
10475
10476
10477
10478
10479
10480
10481
10482
10483
10484
10485
10486
10487
10488
10489
10490
10491
10492
10493
10494
10495
10496
10497
10498
10499
10500
10501
10502
10503
10504
10505
10506
10507
10508
10509
10510
10511
10512
10513
10514
10515
10516
10517
10518
10519
10520
10521
10522
10523
10524
10525
10526
10527
10528
10529
10530
10531
10532
10533
10534
10535
10536
10537
10538
10539
10540
10541
10542
10543
10544
10545
10546
10547
10548
10549
10550
10551
10552
10553
10554
10555
10556
10557
10558
10559
10560
10561
10562
10563
10564
10565
10566
10567
10568
10569
10570
10571
10572
10573
10574
10575
10576
10577
10578
10579
10580
10581
10582
10583
10584
10585
10586
10587
10588
10589
10590
10591
10592
10593
10594
10595
10596
10597
10598
10599
10600
10601
10602
10603
10604
10605
10606
10607
10608
10609
10610
10611
10612
10613
10614
10615
10616
10617
10618
10619
10620
10621
10622
10623
10624
10625
10626
10627
10628
10629
10630
10631
10632
10633
10634
10635
10636
10637
10638
10639
10640
10641
10642
10643
10644
10645
10646
10647
10648
10649
10650
10651
10652
10653
10654
10655
10656
10657
10658
10659
10660
10661
10662
10663
10664
10665
10666
10667
10668
10669
10670
10671
10672
10673
10674
10675
10676
10677
10678
10679
10680
10681
10682
10683
10684
10685
10686
10687
10688
10689
10690
10691
10692
10693
10694
10695
10696
10697
10698
10699
10700
10701
10702
10703
10704
10705
10706
10707
10708
10709
10710
10711
10712
10713
10714
10715
10716
10717
10718
10719
10720
10721
10722
10723
10724
10725
10726
10727
10728
10729
10730
10731
10732
10733
10734
10735
10736
10737
10738
10739
10740
10741
10742
10743
10744
10745
10746
10747
10748
10749
10750
10751
10752
10753
10754
10755
10756
10757
10758
10759
10760
10761
10762
10763
10764
10765
10766
10767
10768
10769
10770
10771
10772
10773
10774
10775
10776
10777
10778
10779
10780
10781
10782
10783
10784
10785
10786
10787
10788
10789
10790
10791
10792
10793
10794
10795
10796
10797
10798
10799
10800
10801
10802
10803
10804
10805
10806
10807
10808
10809
10810
10811
10812
10813
10814
10815
10816
10817
10818
10819
10820
10821
10822
10823
10824
10825
10826
10827
10828
10829
10830
10831
10832
10833
10834
10835
10836
10837
10838
10839
10840
10841
10842
10843
10844
10845
10846
10847
10848
10849
10850
10851
10852
10853
10854
10855
10856
10857
10858
10859
10860
10861
10862
10863
10864
10865
10866
10867
10868
10869
10870
10871
10872
10873
10874
10875
10876
10877
10878
10879
10880
10881
10882
10883
10884
10885
10886
10887
10888
10889
10890
10891
10892
10893
10894
10895
10896
10897
10898
10899
10900
10901
10902
10903
10904
10905
10906
10907
10908
10909
10910
10911
10912
10913
10914
10915
10916
10917
10918
10919
10920
10921
10922
10923
10924
10925
10926
10927
10928
10929
10930
10931
10932
10933
10934
10935
10936
10937
10938
10939
10940
10941
10942
10943
10944
10945
10946
10947
10948
10949
10950
10951
10952
10953
10954
10955
10956
10957
10958
10959
10960
10961
10962
10963
10964
10965
10966
10967
10968
10969
10970
10971
10972
10973
10974
10975
10976
10977
10978
10979
10980
10981
10982
10983
10984
10985
10986
10987
10988
10989
10990
10991
10992
10993
10994
10995
10996
10997
10998
10999
11000
11001
11002
11003
11004
11005
11006
11007
11008
11009
11010
11011
11012
11013
11014
11015
11016
11017
11018
11019
11020
11021
11022
11023
11024
11025
11026
11027
11028
11029
11030
11031
11032
11033
11034
11035
11036
11037
11038
11039
11040
11041
11042
11043
11044
11045
11046
11047
11048
11049
11050
11051
11052
11053
11054
11055
11056
11057
11058
11059
11060
11061
11062
11063
11064
11065
11066
11067
11068
11069
11070
11071
11072
11073
11074
11075
11076
11077
11078
11079
11080
11081
11082
11083
11084
11085
11086
11087
11088
11089
11090
11091
11092
11093
11094
11095
11096
11097
11098
11099
11100
11101
11102
11103
11104
11105
11106
11107
11108
11109
11110
11111
11112
11113
11114
11115
11116
11117
11118
11119
11120
11121
11122
11123
11124
11125
11126
11127
11128
11129
11130
11131
11132
11133
11134
11135
11136
11137
11138
11139
11140
11141
11142
11143
11144
11145
11146
11147
11148
11149
11150
11151
11152
11153
11154
11155
11156
11157
11158
11159
11160
11161
11162
11163
11164
11165
11166
11167
11168
11169
11170
11171
11172
11173
11174
11175
11176
11177
11178
11179
11180
11181
11182
11183
11184
11185
11186
11187
11188
11189
11190
11191
11192
11193
11194
11195
11196
11197
11198
11199
11200
11201
11202
11203
11204
11205
11206
11207
11208
11209
11210
11211
11212
11213
11214
11215
11216
11217
11218
11219
11220
11221
11222
11223
11224
11225
11226
11227
11228
11229
11230
11231
11232
11233
11234
11235
11236
11237
11238
11239
11240
11241
11242
11243
11244
11245
11246
11247
11248
11249
11250
11251
11252
11253
11254
11255
11256
11257
11258
11259
11260
11261
11262
11263
11264
11265
11266
11267
11268
11269
11270
11271
11272
11273
11274
11275
11276
11277
11278
11279
11280
11281
11282
11283
11284
11285
11286
11287
11288
11289
11290
11291
11292
11293
11294
11295
11296
11297
11298
11299
11300
11301
11302
11303
11304
11305
11306
11307
11308
11309
11310
11311
11312
11313
11314
11315
11316
11317
11318
11319
11320
11321
11322
11323
11324
11325
11326
11327
11328
11329
11330
11331
11332
11333
11334
11335
11336
11337
11338
11339
11340
11341
11342
11343
11344
11345
11346
11347
11348
11349
11350
11351
11352
11353
11354
11355
11356
11357
11358
11359
11360
11361
11362
11363
11364
11365
11366
11367
11368
11369
11370
11371
11372
11373
11374
11375
11376
11377
11378
11379
11380
11381
11382
11383
11384
11385
11386
11387
11388
11389
11390
11391
11392
11393
11394
11395
11396
11397
11398
11399
11400
11401
11402
11403
11404
11405
11406
11407
11408
11409
11410
11411
11412
11413
11414
11415
11416
11417
11418
11419
11420
11421
11422
11423
11424
11425
11426
11427
11428
11429
11430
11431
11432
11433
11434
11435
11436
11437
11438
11439
11440
11441
11442
11443
11444
11445
11446
11447
11448
11449
11450
11451
11452
11453
11454
11455
11456
11457
11458
11459
11460
11461
11462
11463
11464
11465
11466
11467
11468
11469
11470
11471
11472
11473
11474
11475
11476
11477
11478
11479
11480
11481
11482
11483
11484
11485
11486
11487
11488
11489
11490
11491
11492
11493
11494
11495
11496
11497
11498
11499
11500
11501
11502
11503
11504
11505
11506
11507
11508
11509
11510
11511
11512
11513
11514
11515
11516
11517
11518
11519
11520
11521
11522
11523
11524
11525
11526
11527
11528
11529
11530
11531
11532
11533
11534
11535
11536
11537
11538
11539
11540
11541
11542
11543
11544
11545
11546
11547
11548
11549
11550
11551
11552
11553
11554
11555
11556
11557
11558
11559
11560
11561
11562
11563
11564
11565
11566
11567
11568
11569
11570
11571
11572
11573
11574
11575
11576
11577
11578
11579
11580
11581
11582
11583
11584
11585
11586
11587
11588
11589
11590
11591
11592
11593
11594
11595
11596
11597
11598
11599
11600
11601
11602
11603
11604
11605
11606
11607
11608
11609
11610
11611
11612
11613
11614
11615
11616
11617
11618
11619
11620
11621
11622
11623
11624
11625
11626
11627
11628
11629
11630
11631
11632
11633
11634
11635
11636
11637
11638
11639
11640
11641
11642
11643
11644
11645
11646
11647
11648
11649
11650
11651
11652
11653
11654
11655
11656
11657
11658
11659
11660
11661
11662
11663
11664
11665
11666
11667
11668
11669
11670
11671
11672
11673
11674
11675
11676
11677
11678
11679
11680
11681
11682
11683
11684
11685
11686
11687
11688
11689
11690
11691
11692
11693
11694
11695
11696
11697
11698
11699
11700
11701
11702
11703
11704
11705
11706
11707
11708
11709
11710
11711
11712
11713
11714
11715
11716
11717
11718
11719
11720
11721
11722
11723
11724
11725
11726
11727
11728
11729
11730
11731
11732
11733
11734
11735
11736
11737
11738
11739
11740
11741
11742
11743
11744
11745
11746
11747
11748
11749
11750
11751
11752
11753
11754
11755
11756
11757
11758
11759
11760
11761
11762
11763
11764
11765
11766
11767
11768
11769
11770
11771
11772
11773
11774
11775
11776
11777
11778
11779
11780
11781
11782
11783
11784
11785
11786
11787
11788
11789
11790
11791
11792
11793
11794
11795
11796
11797
11798
11799
11800
11801
11802
11803
11804
11805
11806
11807
11808
11809
11810
11811
11812
11813
11814
11815
11816
11817
11818
11819
11820
11821
11822
11823
11824
11825
11826
11827
11828
11829
11830
11831
11832
11833
11834
11835
11836
11837
11838
11839
11840
11841
11842
11843
11844
11845
11846
11847
11848
11849
11850
11851
11852
11853
11854
11855
11856
11857
11858
11859
11860
11861
11862
11863
11864
11865
11866
11867
11868
11869
11870
11871
11872
11873
11874
11875
11876
11877
11878
11879
11880
11881
11882
11883
11884
11885
11886
11887
11888
11889
11890
11891
11892
11893
11894
11895
11896
11897
11898
11899
11900
11901
11902
11903
11904
11905
11906
11907
11908
11909
11910
11911
11912
11913
11914
11915
11916
11917
11918
11919
11920
11921
11922
11923
11924
11925
11926
11927
11928
11929
11930
11931
11932
11933
11934
11935
11936
11937
11938
11939
11940
11941
11942
11943
11944
11945
11946
11947
11948
11949
11950
11951
11952
11953
11954
11955
11956
11957
11958
11959
11960
11961
11962
11963
11964
11965
11966
11967
11968
11969
11970
11971
11972
11973
11974
11975
11976
11977
11978
11979
11980
11981
11982
11983
11984
11985
11986
11987
11988
11989
11990
11991
11992
11993
11994
11995
11996
11997
11998
11999
12000
12001
12002
12003
12004
12005
12006
12007
12008
12009
12010
12011
12012
12013
12014
12015
12016
12017
12018
12019
12020
12021
12022
12023
12024
12025
12026
12027
12028
12029
12030
12031
12032
12033
12034
12035
12036
12037
12038
12039
12040
12041
12042
12043
12044
12045
12046
12047
12048
12049
12050
12051
12052
12053
12054
12055
12056
12057
12058
12059
12060
12061
12062
12063
12064
12065
12066
12067
12068
12069
12070
12071
12072
12073
12074
12075
12076
12077
12078
12079
12080
12081
12082
12083
12084
12085
12086
12087
12088
12089
12090
12091
12092
12093
12094
12095
12096
12097
12098
12099
12100
12101
12102
12103
12104
12105
12106
12107
12108
12109
12110
12111
12112
12113
12114
12115
12116
12117
12118
12119
12120
12121
12122
12123
12124
12125
12126
12127
12128
12129
12130
12131
12132
12133
12134
12135
12136
12137
12138
12139
12140
12141
12142
12143
12144
12145
12146
12147
12148
12149
12150
12151
12152
12153
12154
12155
12156
12157
12158
12159
12160
12161
12162
12163
12164
12165
12166
12167
12168
12169
12170
12171
12172
12173
12174
12175
12176
12177
12178
12179
12180
12181
12182
12183
12184
12185
12186
12187
12188
12189
12190
12191
12192
12193
12194
12195
12196
12197
12198
12199
12200
12201
12202
12203
12204
12205
12206
12207
12208
12209
12210
12211
12212
12213
12214
12215
12216
12217
12218
12219
12220
12221
12222
12223
12224
12225
12226
12227
12228
12229
12230
12231
12232
12233
12234
12235
12236
12237
12238
12239
12240
12241
12242
12243
12244
12245
12246
12247
12248
12249
12250
12251
12252
12253
12254
12255
12256
12257
12258
12259
12260
12261
12262
12263
12264
12265
12266
12267
12268
12269
12270
12271
12272
12273
12274
12275
12276
12277
12278
12279
12280
12281
12282
12283
12284
12285
12286
12287
12288
12289
12290
12291
12292
12293
12294
12295
12296
12297
12298
12299
12300
12301
12302
12303
12304
12305
12306
12307
12308
12309
12310
12311
12312
12313
12314
12315
12316
12317
12318
12319
12320
12321
12322
12323
12324
12325
12326
12327
12328
12329
12330
12331
12332
12333
12334
12335
12336
12337
12338
12339
12340
12341
12342
12343
12344
12345
12346
12347
12348
12349
12350
12351
12352
12353
12354
12355
12356
12357
12358
12359
12360
12361
12362
12363
12364
12365
12366
12367
12368
12369
12370
12371
12372
12373
12374
12375
12376
12377
12378
12379
12380
12381
12382
12383
12384
12385
12386
12387
12388
12389
12390
12391
12392
12393
12394
12395
12396
12397
12398
12399
12400
12401
12402
12403
12404
12405
12406
12407
12408
12409
12410
12411
12412
12413
12414
12415
12416
12417
12418
12419
12420
12421
12422
12423
12424
12425
12426
12427
12428
12429
12430
12431
12432
12433
12434
12435
12436
12437
12438
12439
12440
12441
12442
12443
12444
12445
12446
12447
12448
12449
12450
12451
12452
12453
12454
12455
12456
12457
12458
12459
12460
12461
12462
12463
12464
12465
12466
12467
12468
12469
12470
12471
12472
12473
12474
12475
12476
12477
12478
12479
12480
12481
12482
12483
12484
12485
12486
12487
12488
12489
12490
12491
12492
12493
12494
12495
12496
12497
12498
12499
12500
12501
12502
12503
12504
12505
12506
12507
12508
12509
12510
12511
12512
12513
12514
12515
12516
12517
12518
12519
12520
12521
12522
12523
12524
12525
12526
12527
12528
12529
12530
12531
12532
12533
12534
12535
12536
12537
12538
12539
12540
12541
12542
12543
12544
12545
12546
12547
12548
12549
12550
12551
12552
12553
12554
12555
12556
12557
12558
12559
12560
12561
12562
12563
12564
12565
12566
12567
12568
12569
12570
12571
12572
12573
12574
12575
12576
12577
12578
12579
12580
12581
12582
12583
12584
12585
12586
12587
12588
12589
12590
12591
12592
12593
12594
12595
12596
12597
12598
12599
12600
12601
12602
12603
12604
12605
12606
12607
12608
12609
12610
12611
12612
12613
12614
12615
12616
12617
12618
12619
12620
12621
12622
12623
12624
12625
12626
12627
12628
12629
12630
12631
12632
12633
12634
12635
12636
12637
12638
12639
12640
12641
12642
12643
12644
12645
12646
12647
12648
12649
12650
12651
12652
12653
12654
12655
12656
12657
12658
12659
12660
12661
12662
12663
12664
12665
12666
12667
12668
12669
12670
12671
12672
12673
12674
12675
12676
12677
12678
12679
12680
12681
12682
12683
12684
12685
12686
12687
12688
12689
12690
12691
12692
12693
12694
12695
12696
12697
12698
12699
12700
12701
12702
12703
12704
12705
12706
12707
12708
12709
12710
12711
12712
12713
12714
12715
12716
12717
12718
12719
12720
12721
12722
12723
12724
12725
12726
12727
12728
12729
12730
12731
12732
12733
12734
12735
12736
12737
12738
12739
12740
12741
12742
12743
12744
12745
12746
12747
12748
12749
12750
12751
12752
12753
12754
12755
12756
12757
12758
12759
12760
12761
12762
12763
12764
12765
12766
12767
12768
12769
12770
12771
12772
12773
12774
12775
12776
12777
12778
12779
12780
12781
12782
12783
12784
12785
12786
12787
12788
12789
12790
12791
12792
12793
12794
12795
12796
12797
12798
12799
12800
12801
12802
12803
12804
12805
12806
12807
12808
12809
12810
12811
12812
12813
12814
12815
12816
12817
12818
12819
12820
12821
12822
12823
12824
12825
12826
12827
12828
12829
12830
12831
12832
12833
12834
12835
12836
12837
12838
12839
12840
12841
12842
12843
12844
12845
12846
12847
12848
12849
12850
12851
12852
12853
12854
12855
12856
12857
12858
12859
12860
12861
12862
12863
12864
12865
12866
12867
12868
12869
12870
12871
12872
12873
12874
12875
12876
12877
12878
12879
12880
12881
12882
12883
12884
12885
12886
12887
12888
12889
12890
12891
12892
12893
12894
12895
12896
12897
12898
12899
12900
12901
12902
12903
12904
12905
12906
12907
12908
12909
12910
12911
12912
12913
12914
12915
12916
12917
12918
12919
12920
12921
12922
12923
12924
12925
12926
12927
12928
12929
12930
12931
12932
12933
12934
12935
12936
12937
12938
12939
12940
12941
12942
12943
12944
12945
12946
12947
12948
12949
12950
12951
12952
12953
12954
12955
12956
12957
12958
12959
12960
12961
12962
12963
12964
12965
12966
12967
12968
12969
12970
12971
12972
12973
12974
12975
12976
12977
12978
12979
12980
12981
12982
12983
12984
12985
12986
12987
12988
12989
12990
12991
12992
12993
12994
12995
12996
12997
12998
12999
13000
13001
13002
13003
13004
13005
13006
13007
13008
13009
13010
13011
13012
13013
13014
13015
13016
13017
13018
13019
13020
13021
13022
13023
13024
13025
13026
13027
13028
13029
13030
13031
13032
13033
13034
13035
13036
13037
13038
13039
13040
13041
13042
13043
13044
13045
13046
13047
13048
13049
13050
13051
13052
13053
13054
13055
13056
13057
13058
13059
13060
13061
13062
13063
13064
13065
13066
13067
13068
13069
13070
13071
13072
13073
13074
13075
13076
13077
13078
13079
13080
13081
13082
13083
13084
13085
13086
13087
13088
13089
13090
13091
13092
13093
13094
13095
13096
13097
13098
13099
13100
13101
13102
13103
13104
13105
13106
13107
13108
13109
13110
13111
13112
13113
13114
13115
13116
13117
13118
13119
13120
13121
13122
13123
13124
13125
13126
13127
13128
13129
13130
13131
13132
13133
13134
13135
13136
13137
13138
13139
13140
13141
13142
13143
13144
13145
13146
13147
13148
13149
13150
13151
13152
13153
13154
13155
13156
13157
13158
13159
13160
13161
13162
13163
13164
13165
13166
13167
13168
13169
13170
13171
13172
13173
13174
13175
13176
13177
13178
13179
13180
13181
13182
13183
13184
13185
13186
13187
13188
13189
13190
13191
13192
13193
13194
13195
13196
13197
13198
13199
13200
13201
13202
13203
13204
13205
13206
13207
13208
13209
13210
13211
13212
13213
13214
13215
13216
13217
13218
13219
13220
13221
13222
13223
13224
13225
13226
13227
13228
13229
13230
13231
13232
13233
13234
13235
13236
13237
13238
13239
13240
13241
13242
13243
13244
13245
13246
13247
13248
13249
13250
13251
13252
13253
13254
13255
13256
13257
13258
13259
13260
13261
13262
13263
13264
13265
13266
13267
13268
13269
13270
13271
13272
13273
13274
13275
13276
13277
13278
13279
13280
13281
13282
13283
13284
13285
13286
13287
13288
13289
13290
13291
13292
13293
13294
13295
13296
13297
13298
13299
13300
13301
13302
13303
13304
13305
13306
13307
13308
13309
13310
13311
13312
13313
13314
13315
13316
13317
13318
13319
13320
13321
13322
13323
13324
13325
13326
13327
13328
13329
13330
13331
13332
13333
13334
13335
13336
13337
13338
13339
13340
13341
13342
13343
13344
13345
13346
13347
13348
13349
13350
13351
13352
13353
13354
13355
13356
13357
13358
13359
13360
13361
13362
13363
13364
13365
13366
13367
13368
13369
13370
13371
13372
13373
13374
13375
13376
13377
13378
13379
13380
13381
13382
13383
13384
13385
13386
13387
13388
13389
13390
13391
13392
13393
13394
13395
13396
13397
13398
13399
13400
13401
13402
13403
13404
13405
13406
13407
13408
13409
13410
13411
13412
13413
13414
13415
13416
13417
13418
13419
13420
13421
13422
13423
13424
13425
13426
13427
13428
13429
13430
13431
13432
13433
13434
13435
13436
13437
13438
13439
13440
13441
13442
13443
13444
13445
13446
13447
13448
13449
13450
13451
13452
13453
13454
13455
13456
13457
13458
13459
13460
13461
13462
13463
13464
13465
13466
13467
13468
13469
13470
13471
13472
13473
13474
13475
13476
13477
13478
13479
13480
13481
13482
13483
13484
13485
13486
13487
13488
13489
13490
13491
13492
13493
13494
13495
13496
13497
13498
13499
13500
13501
13502
13503
13504
13505
13506
13507
13508
13509
13510
13511
13512
13513
13514
13515
13516
13517
13518
13519
13520
13521
13522
13523
13524
13525
13526
13527
13528
13529
13530
13531
13532
13533
13534
13535
13536
13537
13538
13539
13540
13541
13542
13543
13544
13545
13546
13547
13548
13549
13550
13551
13552
13553
13554
13555
13556
13557
13558
13559
13560
13561
13562
13563
13564
13565
13566
13567
13568
13569
13570
13571
13572
13573
13574
13575
13576
13577
13578
13579
13580
13581
13582
13583
13584
13585
13586
13587
13588
13589
13590
13591
13592
13593
13594
13595
13596
13597
13598
13599
13600
13601
13602
13603
13604
13605
13606
13607
13608
13609
13610
13611
13612
13613
13614
13615
13616
13617
13618
13619
13620
13621
13622
13623
13624
13625
13626
13627
13628
13629
13630
13631
13632
13633
13634
13635
13636
13637
13638
13639
13640
13641
13642
13643
13644
13645
13646
13647
13648
13649
13650
13651
13652
13653
13654
13655
13656
13657
13658
13659
13660
13661
13662
13663
13664
13665
13666
13667
13668
13669
13670
13671
13672
13673
13674
13675
13676
13677
13678
13679
13680
13681
13682
13683
13684
13685
13686
13687
13688
13689
13690
13691
13692
13693
13694
13695
13696
13697
13698
13699
13700
13701
13702
13703
13704
13705
13706
13707
13708
13709
13710
13711
13712
13713
13714
13715
13716
13717
13718
13719
13720
13721
13722
13723
13724
13725
13726
13727
13728
13729
13730
13731
13732
13733
13734
13735
13736
13737
13738
13739
13740
13741
13742
13743
13744
13745
13746
13747
13748
13749
13750
13751
13752
13753
13754
13755
13756
13757
13758
13759
13760
13761
13762
13763
13764
13765
13766
13767
13768
13769
13770
13771
13772
13773
13774
13775
13776
13777
13778
13779
13780
13781
13782
13783
13784
13785
13786
13787
13788
13789
13790
13791
13792
13793
13794
13795
13796
13797
13798
13799
13800
13801
13802
13803
13804
13805
13806
13807
13808
13809
13810
13811
13812
13813
13814
13815
13816
13817
13818
13819
13820
13821
13822
13823
13824
13825
13826
13827
13828
13829
13830
13831
13832
13833
13834
13835
13836
13837
13838
13839
13840
13841
13842
13843
13844
13845
13846
13847
13848
13849
13850
13851
13852
13853
13854
13855
13856
13857
13858
13859
13860
13861
13862
13863
13864
13865
13866
13867
13868
13869
13870
13871
13872
13873
13874
13875
13876
13877
13878
13879
13880
13881
13882
13883
13884
13885
13886
13887
13888
13889
13890
13891
13892
13893
13894
13895
13896
13897
13898
13899
13900
13901
13902
13903
13904
13905
13906
13907
13908
13909
13910
13911
13912
13913
13914
13915
13916
13917
13918
13919
13920
13921
13922
13923
13924
13925
13926
13927
13928
13929
13930
13931
13932
13933
13934
13935
13936
13937
13938
13939
13940
13941
13942
13943
13944
13945
13946
13947
13948
13949
13950
13951
13952
13953
13954
13955
13956
13957
13958
13959
13960
13961
13962
13963
13964
13965
13966
13967
13968
13969
13970
13971
13972
13973
13974
13975
13976
13977
13978
13979
13980
13981
13982
13983
13984
13985
13986
13987
13988
13989
13990
13991
13992
13993
13994
13995
13996
13997
13998
13999
14000
14001
14002
14003
14004
14005
14006
14007
14008
14009
14010
14011
14012
14013
14014
14015
14016
14017
14018
14019
14020
14021
14022
14023
14024
14025
14026
14027
14028
14029
14030
14031
14032
14033
14034
14035
14036
14037
14038
14039
14040
14041
14042
14043
14044
14045
14046
14047
14048
14049
14050
14051
14052
14053
14054
14055
14056
14057
14058
14059
14060
14061
14062
14063
14064
14065
14066
14067
14068
14069
14070
14071
14072
14073
14074
14075
14076
14077
14078
14079
14080
14081
14082
14083
14084
14085
14086
14087
14088
14089
14090
14091
14092
14093
14094
14095
14096
14097
14098
14099
14100
14101
14102
14103
14104
14105
14106
14107
14108
14109
14110
14111
14112
14113
14114
14115
14116
14117
14118
14119
14120
14121
14122
14123
14124
14125
14126
14127
14128
14129
14130
14131
14132
14133
14134
14135
14136
14137
14138
14139
14140
14141
14142
14143
14144
14145
14146
14147
14148
14149
14150
14151
14152
14153
14154
14155
14156
14157
14158
14159
14160
14161
14162
14163
14164
14165
14166
14167
14168
14169
14170
14171
14172
14173
14174
14175
14176
14177
14178
14179
14180
14181
14182
14183
14184
14185
14186
14187
14188
14189
14190
14191
14192
14193
14194
14195
14196
14197
14198
14199
14200
14201
14202
14203
14204
14205
14206
14207
14208
14209
14210
14211
14212
14213
14214
14215
14216
14217
14218
14219
14220
14221
14222
14223
14224
14225
14226
14227
14228
14229
14230
14231
14232
14233
14234
14235
14236
14237
14238
14239
14240
14241
14242
14243
14244
14245
14246
14247
14248
14249
14250
14251
14252
14253
14254
14255
14256
14257
14258
14259
14260
14261
14262
14263
14264
14265
14266
14267
14268
14269
14270
14271
14272
14273
14274
14275
14276
14277
14278
14279
14280
14281
14282
14283
14284
14285
14286
14287
14288
14289
14290
14291
14292
14293
14294
14295
14296
14297
14298
14299
14300
14301
14302
14303
14304
14305
14306
14307
14308
14309
14310
14311
14312
14313
14314
14315
14316
14317
14318
14319
14320
14321
14322
14323
14324
14325
14326
14327
14328
14329
14330
14331
14332
14333
14334
14335
14336
14337
14338
14339
14340
14341
14342
14343
14344
14345
14346
14347
14348
14349
14350
14351
14352
14353
14354
14355
14356
14357
14358
14359
14360
14361
14362
14363
14364
14365
14366
14367
14368
14369
14370
14371
14372
14373
14374
14375
14376
14377
14378
14379
14380
14381
14382
14383
14384
14385
14386
14387
14388
14389
14390
14391
14392
14393
14394
14395
14396
14397
14398
14399
14400
14401
14402
14403
14404
14405
14406
14407
14408
14409
14410
14411
14412
14413
14414
14415
14416
14417
14418
14419
14420
14421
14422
14423
14424
14425
14426
14427
14428
14429
14430
14431
14432
14433
14434
14435
14436
14437
14438
14439
14440
14441
14442
14443
14444
14445
14446
14447
14448
14449
14450
14451
14452
14453
14454
14455
14456
14457
14458
14459
14460
14461
14462
14463
14464
14465
14466
14467
14468
14469
14470
14471
14472
14473
14474
14475
14476
14477
14478
14479
14480
14481
14482
14483
14484
14485
14486
14487
14488
14489
14490
14491
14492
14493
14494
14495
14496
14497
14498
14499
14500
14501
14502
14503
14504
14505
14506
14507
14508
14509
14510
14511
14512
14513
14514
14515
14516
14517
14518
14519
14520
14521
14522
14523
14524
14525
14526
14527
14528
14529
14530
14531
14532
14533
14534
14535
14536
14537
14538
14539
14540
14541
14542
14543
14544
14545
14546
14547
14548
14549
14550
14551
14552
14553
14554
14555
14556
14557
14558
14559
14560
14561
14562
14563
14564
14565
14566
14567
14568
14569
14570
14571
14572
14573
14574
14575
14576
14577
14578
14579
14580
14581
14582
14583
14584
14585
14586
14587
14588
14589
14590
14591
14592
14593
14594
14595
14596
14597
14598
14599
14600
14601
14602
14603
14604
14605
14606
14607
14608
14609
14610
14611
14612
14613
14614
14615
14616
14617
14618
14619
14620
14621
14622
14623
14624
14625
14626
14627
14628
14629
14630
14631
14632
14633
14634
14635
14636
14637
14638
14639
14640
14641
14642
14643
14644
14645
14646
14647
14648
14649
14650
14651
14652
14653
14654
14655
14656
14657
14658
14659
14660
14661
14662
14663
14664
14665
14666
14667
14668
14669
14670
14671
14672
14673
14674
14675
14676
14677
14678
14679
14680
14681
14682
14683
14684
14685
14686
14687
14688
14689
14690
14691
14692
14693
14694
14695
14696
14697
14698
14699
14700
14701
14702
14703
14704
14705
14706
14707
14708
14709
14710
14711
14712
14713
14714
14715
14716
14717
14718
14719
14720
14721
14722
14723
14724
14725
14726
14727
14728
14729
14730
14731
14732
14733
14734
14735
14736
14737
14738
14739
14740
14741
14742
14743
14744
14745
14746
14747
14748
14749
14750
14751
14752
14753
14754
14755
14756
14757
14758
14759
14760
14761
14762
14763
14764
14765
14766
14767
14768
14769
14770
14771
14772
14773
14774
14775
14776
14777
14778
14779
14780
14781
14782
14783
14784
14785
14786
14787
14788
14789
14790
14791
14792
14793
14794
14795
14796
14797
14798
14799
14800
14801
14802
14803
14804
14805
14806
14807
14808
14809
14810
14811
14812
14813
14814
14815
14816
14817
14818
14819
14820
14821
14822
14823
14824
14825
14826
14827
14828
14829
14830
14831
14832
14833
14834
14835
14836
14837
14838
14839
14840
14841
14842
14843
14844
14845
14846
14847
14848
14849
14850
14851
14852
14853
14854
14855
14856
14857
14858
14859
14860
14861
14862
14863
14864
14865
14866
14867
14868
14869
14870
14871
14872
14873
14874
14875
14876
14877
14878
14879
14880
14881
14882
14883
14884
14885
14886
14887
14888
14889
14890
14891
14892
14893
14894
14895
14896
14897
14898
14899
14900
14901
14902
14903
14904
14905
14906
14907
14908
14909
14910
14911
14912
14913
14914
14915
14916
14917
14918
14919
14920
14921
14922
14923
14924
14925
14926
14927
14928
14929
14930
14931
14932
14933
14934
14935
14936
14937
14938
14939
14940
14941
14942
14943
14944
14945
14946
14947
14948
14949
14950
14951
14952
14953
14954
14955
14956
14957
14958
14959
14960
14961
14962
14963
14964
14965
14966
14967
14968
14969
14970
14971
14972
14973
14974
14975
14976
14977
14978
14979
14980
14981
14982
14983
14984
14985
14986
14987
14988
14989
14990
14991
14992
14993
14994
14995
14996
14997
14998
14999
15000
15001
15002
15003
15004
15005
15006
15007
15008
15009
15010
15011
15012
15013
15014
15015
15016
15017
15018
15019
15020
15021
15022
15023
15024
15025
15026
15027
15028
15029
15030
15031
15032
15033
15034
15035
15036
15037
15038
15039
15040
15041
15042
15043
15044
15045
15046
15047
15048
15049
15050
15051
15052
15053
15054
15055
15056
15057
15058
15059
15060
15061
15062
15063
15064
15065
15066
15067
15068
15069
15070
15071
15072
15073
15074
15075
15076
15077
15078
15079
15080
15081
15082
15083
15084
15085
15086
15087
15088
15089
15090
15091
15092
15093
15094
15095
15096
15097
15098
15099
15100
15101
15102
15103
15104
15105
15106
15107
15108
15109
15110
15111
15112
15113
15114
15115
15116
15117
15118
15119
15120
15121
15122
15123
15124
15125
15126
15127
15128
15129
15130
15131
15132
15133
15134
15135
15136
15137
15138
15139
15140
15141
15142
15143
15144
15145
15146
15147
15148
15149
15150
15151
15152
15153
15154
15155
15156
15157
15158
15159
15160
15161
15162
15163
15164
15165
15166
15167
15168
15169
15170
15171
15172
15173
15174
15175
15176
15177
15178
15179
15180
15181
15182
15183
15184
15185
15186
15187
15188
15189
15190
15191
15192
15193
15194
15195
15196
15197
15198
15199
15200
15201
15202
15203
15204
15205
15206
15207
15208
15209
15210
15211
15212
15213
15214
15215
15216
15217
15218
15219
15220
15221
15222
15223
15224
15225
15226
15227
15228
15229
15230
15231
15232
15233
15234
15235
15236
15237
15238
15239
15240
15241
15242
15243
15244
15245
15246
15247
15248
15249
15250
15251
15252
15253
15254
15255
15256
15257
15258
15259
15260
15261
15262
15263
15264
15265
15266
15267
15268
15269
15270
15271
15272
15273
15274
15275
15276
15277
15278
15279
15280
15281
15282
15283
15284
15285
15286
15287
15288
15289
15290
15291
15292
15293
15294
15295
15296
15297
15298
15299
15300
15301
15302
15303
15304
15305
15306
15307
15308
15309
15310
15311
15312
15313
15314
15315
15316
15317
15318
15319
15320
15321
15322
15323
15324
15325
15326
15327
15328
15329
15330
15331
15332
15333
15334
15335
15336
15337
15338
15339
15340
15341
15342
15343
15344
15345
15346
15347
15348
15349
15350
15351
15352
15353
15354
15355
15356
15357
15358
15359
15360
15361
15362
15363
15364
15365
15366
15367
15368
15369
15370
15371
15372
15373
15374
15375
15376
15377
15378
15379
15380
15381
15382
15383
15384
15385
15386
15387
15388
15389
15390
15391
15392
15393
15394
15395
15396
15397
15398
15399
15400
15401
15402
15403
15404
15405
15406
15407
15408
15409
15410
15411
15412
15413
15414
15415
15416
15417
15418
15419
15420
15421
15422
15423
15424
15425
15426
15427
15428
15429
15430
15431
15432
15433
15434
15435
15436
15437
15438
15439
15440
15441
15442
15443
15444
15445
15446
15447
15448
15449
15450
15451
15452
15453
15454
15455
15456
15457
15458
15459
15460
15461
15462
15463
15464
15465
15466
15467
15468
15469
15470
15471
15472
15473
15474
15475
15476
15477
15478
15479
15480
15481
15482
15483
15484
15485
15486
15487
15488
15489
15490
15491
15492
15493
15494
15495
15496
15497
15498
15499
15500
15501
15502
15503
15504
15505
15506
15507
15508
15509
15510
15511
15512
15513
15514
15515
15516
15517
15518
15519
15520
15521
15522
15523
15524
15525
15526
15527
15528
15529
15530
15531
15532
15533
15534
15535
15536
15537
15538
15539
15540
15541
15542
15543
15544
15545
15546
15547
15548
15549
15550
15551
15552
15553
15554
15555
15556
15557
15558
15559
15560
15561
15562
15563
15564
15565
15566
15567
15568
15569
15570
15571
15572
15573
15574
15575
15576
15577
15578
15579
15580
15581
15582
15583
15584
15585
15586
15587
15588
15589
15590
15591
15592
15593
15594
15595
15596
15597
15598
15599
15600
15601
15602
15603
15604
15605
15606
15607
15608
15609
15610
15611
15612
15613
15614
15615
15616
15617
15618
15619
15620
15621
15622
15623
15624
15625
15626
15627
15628
15629
15630
15631
15632
15633
15634
15635
15636
15637
15638
15639
15640
15641
15642
15643
15644
15645
15646
15647
15648
15649
15650
15651
15652
15653
15654
15655
15656
15657
15658
15659
15660
15661
15662
15663
15664
15665
15666
15667
15668
15669
15670
15671
15672
15673
15674
15675
15676
15677
15678
15679
15680
15681
15682
15683
15684
15685
15686
15687
15688
15689
15690
15691
15692
15693
15694
15695
15696
15697
15698
15699
15700
15701
15702
15703
15704
15705
15706
15707
15708
15709
15710
15711
15712
15713
15714
15715
15716
15717
15718
15719
15720
15721
15722
15723
15724
15725
15726
15727
15728
15729
15730
15731
15732
15733
15734
15735
15736
15737
15738
15739
15740
15741
15742
15743
15744
15745
15746
15747
15748
15749
15750
15751
15752
15753
15754
15755
15756
15757
15758
15759
15760
15761
15762
15763
15764
15765
15766
15767
15768
15769
15770
15771
15772
15773
15774
15775
15776
15777
15778
15779
15780
15781
15782
15783
15784
15785
15786
15787
15788
15789
15790
15791
15792
15793
15794
15795
15796
15797
15798
15799
15800
15801
15802
15803
15804
15805
15806
15807
15808
15809
15810
15811
15812
15813
15814
15815
15816
15817
15818
15819
15820
15821
15822
15823
15824
15825
15826
15827
15828
15829
15830
15831
15832
15833
15834
15835
15836
15837
15838
15839
15840
15841
15842
15843
15844
15845
15846
15847
15848
15849
15850
15851
15852
15853
15854
15855
15856
15857
15858
15859
15860
15861
15862
15863
15864
15865
15866
15867
15868
15869
15870
15871
15872
15873
15874
15875
15876
15877
15878
15879
15880
15881
15882
15883
15884
15885
15886
15887
15888
15889
15890
15891
15892
15893
15894
15895
15896
15897
15898
15899
15900
15901
15902
15903
15904
15905
15906
15907
15908
15909
15910
15911
15912
15913
15914
15915
15916
15917
15918
15919
15920
15921
15922
15923
15924
15925
15926
15927
15928
15929
15930
15931
15932
15933
15934
15935
15936
15937
15938
15939
15940
15941
15942
15943
15944
15945
15946
15947
15948
15949
15950
15951
15952
15953
15954
15955
15956
15957
15958
15959
15960
15961
15962
15963
15964
15965
15966
15967
15968
15969
15970
15971
15972
15973
15974
15975
15976
15977
15978
15979
15980
15981
15982
15983
15984
15985
15986
15987
15988
15989
15990
15991
15992
15993
15994
15995
15996
15997
15998
15999
16000
16001
16002
16003
16004
16005
16006
16007
16008
16009
16010
16011
16012
16013
16014
16015
16016
16017
16018
16019
16020
16021
16022
16023
16024
16025
16026
16027
16028
16029
16030
16031
16032
16033
16034
16035
16036
16037
16038
16039
16040
16041
16042
16043
16044
16045
16046
16047
16048
16049
16050
16051
16052
16053
16054
16055
16056
16057
16058
16059
16060
16061
16062
16063
16064
16065
16066
16067
16068
16069
16070
16071
16072
16073
16074
16075
16076
16077
16078
16079
16080
16081
16082
16083
16084
16085
16086
16087
16088
16089
16090
16091
16092
16093
16094
16095
16096
16097
16098
16099
16100
16101
16102
16103
16104
16105
16106
16107
16108
16109
16110
16111
16112
16113
16114
16115
16116
16117
16118
16119
16120
16121
16122
16123
16124
16125
16126
16127
16128
16129
16130
16131
16132
16133
16134
16135
16136
16137
16138
16139
16140
16141
16142
16143
16144
16145
16146
16147
16148
16149
16150
16151
16152
16153
16154
16155
16156
16157
16158
16159
16160
16161
16162
16163
16164
16165
16166
16167
16168
16169
16170
16171
16172
16173
16174
16175
16176
16177
16178
16179
16180
16181
16182
16183
16184
16185
16186
16187
16188
16189
16190
16191
16192
16193
16194
16195
16196
16197
16198
16199
16200
16201
16202
16203
16204
16205
16206
16207
16208
16209
16210
16211
16212
16213
16214
16215
16216
16217
16218
16219
16220
16221
16222
16223
16224
16225
16226
16227
16228
16229
16230
16231
16232
16233
16234
16235
16236
16237
16238
16239
16240
16241
16242
16243
16244
16245
16246
16247
16248
16249
16250
16251
16252
16253
16254
16255
16256
16257
16258
16259
16260
16261
16262
16263
16264
16265
16266
16267
16268
16269
16270
16271
16272
16273
16274
16275
16276
16277
16278
16279
16280
16281
16282
16283
16284
16285
16286
16287
16288
16289
16290
16291
16292
16293
16294
16295
16296
16297
16298
16299
16300
16301
16302
16303
16304
16305
16306
16307
16308
16309
16310
16311
16312
16313
16314
16315
16316
16317
16318
16319
16320
16321
16322
16323
16324
16325
16326
16327
16328
16329
16330
16331
16332
16333
16334
16335
16336
16337
16338
16339
16340
16341
16342
16343
16344
16345
16346
16347
16348
16349
16350
16351
16352
16353
16354
16355
16356
16357
16358
16359
16360
16361
16362
16363
16364
16365
16366
16367
16368
16369
16370
16371
16372
16373
16374
16375
16376
16377
16378
16379
16380
16381
16382
16383
16384
16385
16386
16387
16388
16389
16390
16391
16392
16393
16394
16395
16396
16397
16398
16399
16400
16401
16402
16403
16404
16405
16406
16407
16408
16409
16410
16411
16412
16413
16414
16415
16416
16417
16418
16419
16420
16421
16422
16423
16424
16425
16426
16427
16428
16429
16430
16431
16432
16433
16434
16435
16436
16437
16438
16439
16440
16441
16442
16443
16444
16445
16446
16447
16448
16449
16450
16451
16452
16453
16454
16455
16456
16457
16458
16459
16460
16461
16462
16463
16464
16465
16466
16467
16468
16469
16470
16471
16472
16473
16474
16475
16476
16477
16478
16479
16480
16481
16482
16483
16484
16485
16486
16487
16488
16489
16490
16491
16492
16493
16494
16495
16496
16497
16498
16499
16500
16501
16502
16503
16504
16505
16506
16507
16508
16509
16510
16511
16512
16513
16514
16515
16516
16517
16518
16519
16520
16521
16522
16523
16524
16525
16526
16527
16528
16529
16530
16531
16532
16533
16534
16535
16536
16537
16538
16539
16540
16541
16542
16543
16544
16545
16546
16547
16548
16549
16550
16551
16552
16553
16554
16555
16556
16557
16558
16559
16560
16561
16562
16563
16564
16565
16566
16567
16568
16569
16570
16571
16572
16573
16574
16575
16576
16577
16578
16579
16580
16581
16582
16583
16584
16585
16586
16587
16588
16589
16590
16591
16592
16593
16594
16595
16596
16597
16598
16599
16600
16601
16602
16603
16604
16605
16606
16607
16608
16609
16610
16611
16612
16613
16614
16615
16616
16617
16618
16619
16620
16621
16622
16623
16624
16625
16626
16627
16628
16629
16630
16631
16632
16633
16634
16635
16636
16637
16638
16639
16640
16641
16642
16643
16644
16645
16646
16647
16648
16649
16650
16651
16652
16653
16654
16655
16656
16657
16658
16659
16660
16661
16662
16663
16664
16665
16666
16667
16668
16669
16670
16671
16672
16673
16674
16675
16676
16677
16678
16679
16680
16681
16682
16683
16684
16685
16686
16687
16688
16689
16690
16691
16692
16693
16694
16695
16696
16697
16698
16699
16700
16701
16702
16703
16704
16705
16706
16707
16708
16709
16710
16711
16712
16713
16714
16715
16716
16717
16718
16719
16720
16721
16722
16723
16724
16725
16726
16727
16728
16729
16730
16731
16732
16733
16734
16735
16736
16737
16738
16739
16740
16741
16742
16743
16744
16745
16746
16747
16748
16749
16750
16751
16752
16753
16754
16755
16756
16757
16758
16759
16760
16761
16762
16763
16764
16765
16766
16767
16768
16769
16770
16771
16772
16773
16774
16775
16776
16777
16778
16779
16780
16781
16782
16783
16784
16785
16786
16787
16788
16789
16790
16791
16792
16793
16794
16795
16796
16797
16798
16799
16800
16801
16802
16803
16804
16805
16806
16807
16808
16809
16810
16811
16812
16813
16814
16815
16816
16817
16818
16819
16820
16821
16822
16823
16824
16825
16826
16827
16828
16829
16830
16831
16832
16833
16834
16835
16836
16837
16838
16839
16840
16841
16842
16843
16844
16845
16846
16847
16848
16849
16850
16851
16852
16853
16854
16855
16856
16857
16858
16859
16860
16861
16862
16863
16864
16865
16866
16867
16868
16869
16870
16871
16872
16873
16874
16875
16876
16877
16878
16879
16880
16881
16882
16883
16884
16885
16886
16887
16888
16889
16890
16891
16892
16893
16894
16895
16896
16897
16898
16899
16900
16901
16902
16903
16904
16905
16906
16907
16908
16909
16910
16911
16912
16913
16914
16915
16916
16917
16918
16919
16920
16921
16922
16923
16924
16925
16926
16927
16928
16929
16930
16931
16932
16933
16934
16935
16936
16937
16938
16939
16940
16941
16942
16943
16944
16945
16946
16947
16948
16949
16950
16951
16952
16953
16954
16955
16956
16957
16958
16959
16960
16961
16962
16963
16964
16965
16966
16967
16968
16969
16970
16971
16972
16973
16974
16975
16976
16977
16978
16979
16980
16981
16982
16983
16984
16985
16986
16987
16988
16989
16990
16991
16992
16993
16994
16995
16996
16997
16998
16999
17000
17001
17002
17003
17004
17005
17006
17007
17008
17009
17010
17011
17012
17013
17014
17015
17016
17017
17018
17019
17020
17021
17022
17023
17024
17025
17026
17027
17028
17029
17030
17031
17032
17033
17034
17035
17036
17037
17038
17039
17040
17041
17042
17043
17044
17045
17046
17047
17048
17049
17050
17051
17052
17053
17054
17055
17056
17057
17058
17059
17060
17061
17062
17063
17064
17065
17066
17067
17068
17069
17070
17071
17072
17073
17074
17075
17076
17077
17078
17079
17080
17081
17082
17083
17084
17085
17086
17087
17088
17089
17090
17091
17092
17093
17094
17095
17096
17097
17098
17099
17100
17101
17102
17103
17104
17105
17106
17107
17108
17109
17110
17111
17112
17113
17114
17115
17116
17117
17118
17119
17120
17121
17122
17123
17124
17125
17126
17127
17128
17129
17130
17131
17132
17133
17134
17135
17136
17137
17138
17139
17140
17141
17142
17143
17144
17145
17146
17147
17148
17149
17150
17151
17152
17153
17154
17155
17156
17157
17158
17159
17160
17161
17162
17163
17164
17165
17166
17167
17168
17169
17170
17171
17172
17173
17174
17175
17176
17177
17178
17179
17180
17181
17182
17183
17184
17185
17186
17187
17188
17189
17190
17191
17192
17193
17194
17195
17196
17197
17198
17199
17200
17201
17202
17203
17204
17205
17206
17207
17208
17209
17210
17211
17212
17213
17214
17215
17216
17217
17218
17219
17220
17221
17222
17223
17224
17225
17226
17227
17228
17229
17230
17231
17232
17233
17234
17235
17236
17237
17238
17239
17240
17241
17242
17243
17244
17245
17246
17247
17248
17249
17250
17251
17252
17253
17254
17255
17256
17257
17258
17259
17260
17261
17262
17263
17264
17265
17266
17267
17268
17269
17270
17271
17272
17273
17274
17275
17276
17277
17278
17279
17280
17281
17282
17283
17284
17285
17286
17287
17288
17289
17290
17291
17292
17293
17294
17295
17296
17297
17298
17299
17300
17301
17302
17303
17304
17305
17306
17307
17308
17309
17310
17311
17312
17313
17314
17315
17316
17317
17318
17319
17320
17321
17322
17323
17324
17325
17326
17327
17328
17329
17330
17331
17332
17333
17334
17335
17336
17337
17338
17339
17340
17341
17342
17343
17344
17345
17346
17347
17348
17349
17350
17351
17352
17353
17354
17355
17356
17357
17358
17359
17360
17361
17362
17363
17364
17365
17366
17367
17368
17369
17370
17371
17372
17373
17374
17375
17376
17377
17378
17379
17380
17381
17382
17383
17384
17385
17386
17387
17388
17389
17390
17391
17392
17393
17394
17395
17396
17397
17398
17399
17400
17401
17402
17403
17404
17405
17406
17407
17408
17409
17410
17411
17412
17413
17414
17415
17416
17417
17418
17419
17420
17421
17422
17423
17424
17425
17426
17427
17428
17429
17430
17431
17432
17433
17434
17435
17436
17437
17438
17439
17440
17441
17442
17443
17444
17445
17446
17447
17448
17449
17450
17451
17452
17453
17454
17455
17456
17457
17458
17459
17460
17461
17462
17463
17464
17465
17466
17467
17468
17469
17470
17471
17472
17473
17474
17475
17476
17477
17478
17479
17480
17481
17482
17483
17484
17485
17486
17487
17488
17489
17490
17491
17492
17493
17494
17495
17496
17497
17498
17499
17500
17501
17502
17503
17504
17505
17506
17507
17508
17509
17510
17511
17512
17513
17514
17515
17516
17517
17518
17519
17520
17521
17522
17523
17524
17525
17526
17527
17528
17529
17530
17531
17532
17533
17534
17535
17536
17537
17538
17539
17540
17541
17542
17543
17544
17545
17546
17547
17548
17549
17550
17551
17552
17553
17554
17555
17556
17557
17558
17559
17560
17561
17562
17563
17564
17565
17566
17567
17568
17569
17570
17571
17572
17573
17574
17575
17576
17577
17578
17579
17580
17581
17582
17583
17584
17585
17586
17587
17588
17589
17590
17591
17592
17593
17594
17595
17596
17597
17598
17599
17600
17601
17602
17603
17604
17605
17606
17607
17608
17609
17610
17611
17612
17613
17614
17615
17616
17617
17618
17619
17620
17621
17622
17623
17624
17625
17626
17627
17628
17629
17630
17631
17632
17633
17634
17635
17636
17637
17638
17639
17640
17641
17642
17643
17644
17645
17646
17647
17648
17649
17650
17651
17652
17653
17654
17655
17656
17657
17658
17659
17660
17661
17662
17663
17664
17665
17666
17667
17668
17669
17670
17671
17672
17673
17674
17675
17676
17677
17678
17679
17680
17681
17682
17683
17684
17685
17686
17687
17688
17689
17690
17691
17692
17693
17694
17695
17696
17697
17698
17699
17700
17701
17702
17703
17704
17705
17706
17707
17708
17709
17710
17711
17712
17713
17714
17715
17716
17717
17718
17719
17720
17721
17722
17723
17724
17725
17726
17727
17728
17729
17730
17731
17732
17733
17734
17735
17736
17737
17738
17739
17740
17741
17742
17743
17744
17745
17746
17747
17748
17749
17750
17751
17752
17753
17754
17755
17756
17757
17758
17759
17760
17761
17762
17763
17764
17765
17766
17767
17768
17769
17770
17771
17772
17773
17774
17775
17776
17777
17778
17779
17780
17781
17782
17783
17784
17785
17786
17787
17788
17789
17790
17791
17792
17793
17794
17795
17796
17797
17798
17799
17800
17801
17802
17803
17804
17805
17806
17807
17808
17809
17810
17811
17812
17813
17814
17815
17816
17817
17818
17819
17820
17821
17822
17823
17824
17825
17826
17827
17828
17829
17830
17831
17832
17833
17834
17835
17836
17837
17838
17839
17840
17841
17842
17843
17844
17845
17846
17847
17848
17849
17850
17851
17852
17853
17854
17855
17856
17857
17858
17859
17860
17861
17862
17863
17864
17865
17866
17867
17868
17869
17870
17871
17872
17873
17874
17875
17876
17877
17878
17879
17880
17881
17882
17883
17884
17885
17886
17887
17888
17889
17890
17891
17892
17893
17894
17895
17896
17897
17898
17899
17900
17901
17902
17903
17904
17905
17906
17907
17908
17909
17910
17911
17912
17913
17914
17915
17916
17917
17918
17919
17920
17921
17922
17923
17924
17925
17926
17927
17928
17929
17930
17931
17932
17933
17934
17935
17936
17937
17938
17939
17940
17941
17942
17943
17944
17945
17946
17947
17948
17949
17950
17951
17952
17953
17954
17955
17956
17957
17958
17959
17960
17961
17962
17963
17964
17965
17966
17967
17968
17969
17970
17971
17972
17973
17974
17975
17976
17977
17978
17979
17980
17981
17982
17983
17984
17985
17986
17987
17988
17989
17990
17991
17992
17993
17994
17995
17996
17997
17998
17999
18000
18001
18002
18003
18004
18005
18006
18007
18008
18009
18010
18011
18012
18013
18014
18015
18016
18017
18018
18019
18020
18021
18022
18023
18024
18025
18026
18027
18028
18029
18030
18031
18032
18033
18034
18035
18036
18037
18038
18039
18040
18041
18042
18043
18044
18045
18046
18047
18048
18049
18050
18051
18052
18053
18054
18055
18056
18057
18058
18059
18060
18061
18062
18063
18064
18065
18066
18067
18068
18069
18070
18071
18072
18073
18074
18075
18076
18077
18078
18079
18080
18081
18082
18083
18084
18085
18086
18087
18088
18089
18090
18091
18092
18093
18094
18095
18096
18097
18098
18099
18100
18101
18102
18103
18104
18105
18106
18107
18108
18109
18110
18111
18112
18113
18114
18115
18116
18117
18118
18119
18120
18121
18122
18123
18124
18125
18126
18127
18128
18129
18130
18131
18132
18133
18134
18135
18136
18137
18138
18139
18140
18141
18142
18143
18144
18145
18146
18147
18148
18149
18150
18151
18152
18153
18154
18155
18156
18157
18158
18159
18160
18161
18162
18163
18164
18165
18166
18167
18168
18169
18170
18171
18172
18173
18174
18175
18176
18177
18178
18179
18180
18181
18182
18183
18184
18185
18186
18187
18188
18189
18190
18191
18192
18193
18194
18195
18196
18197
18198
18199
18200
18201
18202
18203
18204
18205
18206
18207
18208
18209
18210
18211
18212
18213
18214
18215
18216
18217
18218
18219
18220
18221
18222
18223
18224
18225
18226
18227
18228
18229
18230
18231
18232
18233
18234
18235
18236
18237
18238
18239
18240
18241
18242
18243
18244
18245
18246
18247
18248
18249
18250
18251
18252
18253
18254
18255
18256
18257
18258
18259
18260
18261
18262
18263
18264
18265
18266
18267
18268
18269
18270
18271
18272
18273
18274
18275
18276
18277
18278
18279
18280
18281
18282
18283
18284
18285
18286
18287
18288
18289
18290
18291
18292
18293
18294
18295
18296
18297
18298
18299
18300
18301
18302
18303
18304
18305
18306
18307
18308
18309
18310
18311
18312
18313
18314
18315
18316
18317
18318
18319
18320
18321
18322
18323
18324
18325
18326
18327
18328
18329
18330
18331
18332
18333
18334
18335
18336
18337
18338
18339
18340
18341
18342
18343
18344
18345
18346
18347
18348
18349
18350
18351
18352
18353
18354
18355
18356
18357
18358
18359
18360
18361
18362
18363
18364
18365
18366
18367
18368
18369
18370
18371
18372
18373
18374
18375
18376
18377
18378
18379
18380
18381
18382
18383
18384
18385
18386
18387
18388
18389
18390
18391
18392
18393
18394
18395
18396
18397
18398
18399
18400
18401
18402
18403
18404
18405
18406
18407
18408
18409
18410
18411
18412
18413
18414
18415
18416
18417
18418
18419
18420
18421
18422
18423
18424
18425
18426
18427
18428
18429
18430
18431
18432
18433
18434
18435
18436
18437
18438
18439
18440
18441
18442
18443
18444
18445
18446
18447
18448
18449
18450
18451
18452
18453
18454
18455
18456
18457
18458
18459
18460
18461
18462
18463
18464
18465
18466
18467
18468
18469
18470
18471
18472
18473
18474
18475
18476
18477
18478
18479
18480
18481
18482
18483
18484
18485
18486
18487
18488
18489
18490
18491
18492
18493
18494
18495
18496
18497
18498
18499
18500
18501
18502
18503
18504
18505
18506
18507
18508
18509
18510
18511
18512
18513
18514
18515
18516
18517
18518
18519
18520
18521
18522
18523
18524
18525
18526
18527
18528
18529
18530
18531
18532
18533
18534
18535
18536
18537
18538
18539
18540
18541
18542
18543
18544
18545
18546
18547
18548
18549
18550
18551
18552
18553
18554
18555
18556
18557
18558
18559
18560
18561
18562
18563
18564
18565
18566
18567
18568
18569
18570
18571
18572
18573
18574
18575
18576
18577
18578
18579
18580
18581
18582
18583
18584
18585
18586
18587
18588
18589
18590
18591
18592
18593
18594
18595
18596
18597
18598
18599
18600
18601
18602
18603
18604
18605
18606
18607
18608
18609
18610
18611
18612
18613
18614
18615
18616
18617
18618
18619
18620
18621
18622
18623
18624
18625
18626
18627
18628
18629
18630
18631
18632
18633
18634
18635
18636
18637
18638
18639
18640
18641
18642
18643
18644
18645
18646
18647
18648
18649
18650
18651
18652
18653
18654
18655
18656
18657
18658
18659
18660
18661
18662
18663
18664
18665
18666
18667
18668
18669
18670
18671
18672
18673
18674
18675
18676
18677
18678
18679
18680
18681
18682
18683
18684
18685
18686
18687
18688
18689
18690
18691
18692
18693
18694
18695
18696
18697
18698
18699
18700
18701
18702
18703
18704
18705
18706
18707
18708
18709
18710
18711
18712
18713
18714
18715
18716
18717
18718
18719
18720
18721
18722
18723
18724
18725
18726
18727
18728
18729
18730
18731
18732
18733
18734
18735
18736
18737
18738
18739
18740
18741
18742
18743
18744
18745
18746
18747
18748
18749
18750
18751
18752
18753
18754
18755
18756
18757
18758
18759
18760
18761
18762
18763
18764
18765
18766
18767
18768
18769
18770
18771
18772
18773
18774
18775
18776
18777
18778
18779
18780
18781
18782
18783
18784
18785
18786
18787
18788
18789
18790
18791
18792
18793
18794
18795
18796
18797
18798
18799
18800
18801
18802
18803
18804
18805
18806
18807
18808
18809
18810
18811
18812
18813
18814
18815
18816
18817
18818
18819
18820
18821
18822
18823
18824
18825
18826
18827
18828
18829
18830
18831
18832
18833
18834
18835
18836
18837
18838
18839
18840
18841
18842
18843
18844
18845
18846
18847
18848
18849
18850
18851
18852
18853
18854
18855
18856
18857
18858
18859
18860
18861
18862
18863
18864
18865
18866
18867
18868
18869
18870
18871
18872
18873
18874
18875
18876
18877
18878
18879
18880
18881
18882
18883
18884
18885
18886
18887
18888
18889
18890
18891
18892
18893
18894
18895
18896
18897
18898
18899
18900
18901
18902
18903
18904
18905
18906
18907
18908
18909
18910
18911
18912
18913
18914
18915
18916
18917
18918
18919
18920
18921
18922
18923
18924
18925
18926
18927
18928
18929
18930
18931
18932
18933
18934
18935
18936
18937
18938
18939
18940
18941
18942
18943
18944
18945
18946
18947
18948
18949
18950
18951
18952
18953
18954
18955
18956
18957
18958
18959
18960
18961
18962
18963
18964
18965
18966
18967
18968
18969
18970
18971
18972
18973
18974
18975
18976
18977
18978
18979
18980
18981
18982
18983
18984
18985
18986
18987
18988
18989
18990
18991
18992
18993
18994
18995
18996
18997
18998
18999
19000
19001
19002
19003
19004
19005
19006
19007
19008
19009
19010
19011
19012
19013
19014
19015
19016
19017
19018
19019
19020
19021
19022
19023
19024
19025
19026
19027
19028
19029
19030
19031
19032
19033
19034
19035
19036
19037
19038
19039
19040
19041
19042
19043
19044
19045
19046
19047
19048
19049
19050
19051
19052
19053
19054
19055
19056
19057
19058
19059
19060
19061
19062
19063
19064
19065
19066
19067
19068
19069
19070
19071
19072
19073
19074
19075
19076
19077
19078
19079
19080
19081
19082
19083
19084
19085
19086
19087
19088
19089
19090
19091
19092
19093
19094
19095
19096
19097
19098
19099
19100
19101
19102
19103
19104
19105
19106
19107
19108
19109
19110
19111
19112
19113
19114
19115
19116
19117
19118
19119
19120
19121
19122
19123
19124
19125
19126
19127
19128
19129
19130
19131
19132
19133
19134
19135
19136
19137
19138
19139
19140
19141
19142
19143
19144
19145
19146
19147
19148
19149
19150
19151
19152
19153
19154
19155
19156
19157
19158
19159
19160
19161
19162
19163
19164
19165
19166
19167
19168
19169
19170
19171
19172
19173
19174
19175
19176
19177
19178
19179
19180
19181
19182
19183
19184
19185
19186
19187
19188
19189
19190
19191
19192
19193
19194
19195
19196
19197
19198
19199
19200
19201
19202
19203
19204
19205
19206
19207
19208
19209
19210
19211
19212
19213
19214
19215
19216
19217
19218
19219
19220
19221
19222
19223
19224
19225
19226
19227
19228
19229
19230
19231
19232
19233
19234
19235
19236
19237
19238
19239
19240
19241
19242
19243
19244
19245
19246
19247
19248
19249
19250
19251
19252
19253
19254
19255
19256
19257
19258
19259
19260
19261
19262
19263
19264
19265
19266
19267
19268
19269
19270
19271
19272
19273
19274
19275
19276
19277
19278
19279
19280
19281
19282
19283
19284
19285
19286
19287
19288
19289
19290
19291
19292
19293
19294
19295
19296
19297
19298
19299
19300
19301
19302
19303
19304
19305
19306
19307
19308
19309
19310
19311
19312
19313
19314
19315
19316
19317
19318
19319
19320
19321
19322
19323
19324
19325
19326
19327
19328
19329
19330
19331
19332
19333
19334
19335
19336
19337
19338
19339
19340
19341
19342
19343
19344
19345
19346
19347
19348
19349
19350
19351
19352
19353
19354
19355
19356
19357
19358
19359
19360
19361
19362
19363
19364
19365
19366
19367
19368
19369
19370
19371
19372
19373
19374
19375
19376
19377
19378
19379
19380
19381
19382
19383
19384
19385
19386
19387
19388
19389
19390
19391
19392
19393
19394
19395
19396
19397
19398
19399
19400
19401
19402
19403
19404
19405
19406
19407
19408
19409
19410
19411
19412
19413
19414
19415
19416
19417
19418
19419
19420
19421
19422
19423
19424
19425
19426
19427
19428
19429
19430
19431
19432
19433
19434
19435
19436
19437
19438
19439
19440
19441
19442
19443
19444
19445
19446
19447
19448
19449
19450
19451
19452
19453
19454
19455
19456
19457
19458
19459
19460
19461
19462
19463
19464
19465
19466
19467
19468
19469
19470
19471
19472
19473
19474
19475
19476
19477
19478
19479
19480
19481
19482
19483
19484
19485
19486
19487
19488
19489
19490
19491
19492
19493
19494
19495
19496
19497
19498
19499
19500
19501
19502
19503
19504
19505
19506
19507
19508
19509
19510
19511
19512
19513
19514
19515
19516
19517
19518
19519
19520
19521
19522
19523
19524
19525
19526
19527
19528
19529
19530
19531
19532
19533
19534
19535
19536
19537
19538
19539
19540
19541
19542
19543
19544
19545
19546
19547
19548
19549
19550
19551
19552
19553
19554
19555
19556
19557
19558
19559
19560
19561
19562
19563
19564
19565
19566
19567
19568
19569
19570
19571
19572
19573
19574
19575
19576
19577
19578
19579
19580
19581
19582
19583
19584
19585
19586
19587
19588
19589
19590
19591
19592
19593
19594
19595
19596
19597
19598
19599
19600
19601
19602
19603
19604
19605
19606
19607
19608
19609
19610
19611
19612
19613
19614
19615
19616
19617
19618
19619
19620
19621
19622
19623
19624
19625
19626
19627
19628
19629
19630
19631
19632
19633
19634
19635
19636
19637
19638
19639
19640
19641
19642
19643
19644
19645
19646
19647
19648
19649
19650
19651
19652
19653
19654
19655
19656
19657
19658
19659
19660
19661
19662
19663
19664
19665
19666
19667
19668
19669
19670
19671
19672
19673
19674
19675
19676
19677
19678
19679
19680
19681
19682
19683
19684
19685
19686
19687
19688
19689
19690
19691
19692
19693
19694
19695
19696
19697
19698
19699
19700
19701
19702
19703
19704
19705
19706
19707
19708
19709
19710
19711
19712
19713
19714
19715
19716
19717
19718
19719
19720
19721
19722
19723
19724
19725
19726
19727
19728
19729
19730
19731
19732
19733
19734
19735
19736
19737
19738
19739
19740
19741
19742
19743
19744
19745
19746
19747
19748
19749
19750
19751
19752
19753
19754
19755
19756
19757
19758
19759
19760
19761
19762
19763
19764
19765
19766
19767
19768
19769
19770
19771
19772
19773
19774
19775
19776
19777
19778
19779
19780
19781
19782
19783
19784
19785
19786
19787
19788
19789
19790
19791
19792
19793
19794
19795
19796
19797
19798
19799
19800
19801
19802
19803
19804
19805
19806
19807
19808
19809
19810
19811
19812
19813
19814
19815
19816
19817
19818
19819
19820
19821
19822
19823
19824
19825
19826
19827
19828
19829
19830
19831
19832
19833
19834
19835
19836
19837
19838
19839
19840
19841
19842
19843
19844
19845
19846
19847
19848
19849
19850
19851
19852
19853
19854
19855
19856
19857
19858
19859
19860
19861
19862
19863
19864
19865
19866
19867
19868
19869
19870
19871
19872
19873
19874
19875
19876
19877
19878
19879
19880
19881
19882
19883
19884
19885
19886
19887
19888
19889
19890
19891
19892
19893
19894
19895
19896
19897
19898
19899
19900
19901
19902
19903
19904
19905
19906
19907
19908
19909
19910
19911
19912
19913
19914
19915
19916
19917
19918
19919
19920
19921
19922
19923
19924
19925
19926
19927
19928
19929
19930
19931
19932
19933
19934
19935
19936
19937
19938
19939
19940
19941
19942
19943
19944
19945
19946
19947
19948
19949
19950
19951
19952
19953
19954
19955
19956
19957
19958
19959
19960
19961
19962
19963
19964
19965
19966
19967
19968
19969
19970
19971
19972
19973
19974
19975
19976
19977
19978
19979
19980
19981
19982
19983
19984
19985
19986
19987
19988
19989
19990
19991
19992
19993
19994
19995
19996
19997
19998
19999
20000
20001
20002
20003
20004
20005
20006
20007
20008
20009
20010
20011
20012
20013
20014
20015
20016
20017
20018
20019
20020
20021
20022
20023
20024
20025
20026
20027
20028
20029
20030
20031
20032
20033
20034
20035
20036
20037
20038
20039
20040
20041
20042
20043
20044
20045
20046
20047
20048
20049
20050
20051
20052
20053
20054
20055
20056
20057
20058
20059
20060
20061
20062
20063
20064
20065
20066
20067
20068
20069
20070
20071
20072
20073
20074
20075
20076
20077
20078
20079
20080
20081
20082
20083
20084
20085
20086
20087
20088
20089
20090
20091
20092
20093
20094
20095
20096
20097
20098
20099
20100
20101
20102
20103
20104
20105
20106
20107
20108
20109
20110
20111
20112
20113
20114
20115
20116
20117
20118
20119
20120
20121
20122
20123
20124
20125
20126
20127
20128
20129
20130
20131
20132
20133
20134
20135
20136
20137
20138
20139
20140
20141
20142
20143
20144
20145
20146
20147
20148
20149
20150
20151
20152
20153
20154
20155
20156
20157
20158
20159
20160
20161
20162
20163
20164
20165
20166
20167
20168
20169
20170
20171
20172
20173
20174
20175
20176
20177
20178
20179
20180
20181
20182
20183
20184
20185
20186
20187
20188
20189
20190
20191
20192
20193
20194
20195
20196
20197
20198
20199
20200
20201
20202
20203
20204
20205
20206
20207
20208
20209
20210
20211
20212
20213
20214
20215
20216
20217
20218
20219
20220
20221
20222
20223
20224
20225
20226
20227
20228
20229
20230
20231
20232
20233
20234
20235
20236
20237
20238
20239
20240
20241
20242
20243
20244
20245
20246
20247
20248
20249
20250
20251
20252
20253
20254
20255
20256
20257
20258
20259
20260
20261
20262
20263
20264
20265
20266
20267
20268
20269
20270
20271
20272
20273
20274
20275
20276
20277
20278
20279
20280
20281
20282
20283
20284
20285
20286
20287
20288
20289
20290
20291
20292
20293
20294
20295
20296
20297
20298
20299
20300
20301
20302
20303
20304
20305
20306
20307
20308
20309
20310
20311
20312
20313
20314
20315
20316
20317
20318
20319
20320
20321
20322
20323
20324
20325
20326
20327
20328
20329
20330
20331
20332
20333
20334
20335
20336
20337
20338
20339
20340
20341
20342
20343
20344
20345
20346
20347
20348
20349
20350
20351
20352
20353
20354
20355
20356
20357
20358
20359
20360
20361
20362
20363
20364
20365
20366
20367
20368
20369
20370
20371
20372
20373
20374
20375
20376
20377
20378
20379
20380
20381
20382
20383
20384
20385
20386
20387
20388
20389
20390
20391
20392
20393
20394
20395
20396
20397
20398
20399
20400
20401
20402
20403
20404
20405
20406
20407
20408
20409
20410
20411
20412
20413
20414
20415
20416
20417
20418
20419
20420
20421
20422
20423
20424
20425
20426
20427
20428
20429
20430
20431
20432
20433
20434
20435
20436
20437
20438
20439
20440
20441
20442
20443
20444
20445
20446
20447
20448
20449
20450
20451
20452
20453
20454
20455
20456
20457
20458
20459
20460
20461
20462
20463
20464
20465
20466
20467
20468
20469
20470
20471
20472
20473
20474
20475
20476
20477
20478
20479
20480
20481
20482
20483
20484
20485
20486
20487
20488
20489
20490
20491
20492
20493
20494
20495
20496
20497
20498
20499
20500
20501
20502
20503
20504
20505
20506
20507
20508
20509
20510
20511
20512
20513
20514
20515
20516
20517
20518
20519
20520
20521
20522
20523
20524
20525
20526
20527
20528
20529
20530
20531
20532
20533
20534
20535
20536
20537
20538
20539
20540
20541
20542
20543
20544
20545
20546
20547
20548
20549
20550
20551
20552
20553
20554
20555
20556
20557
20558
20559
20560
20561
20562
20563
20564
20565
20566
20567
20568
20569
20570
20571
20572
20573
20574
20575
20576
20577
20578
20579
20580
20581
20582
20583
20584
20585
20586
20587
20588
20589
20590
20591
20592
20593
20594
20595
20596
20597
20598
20599
20600
20601
20602
20603
20604
20605
20606
20607
20608
20609
20610
20611
20612
20613
20614
20615
20616
20617
20618
20619
20620
20621
20622
20623
20624
20625
20626
20627
20628
20629
20630
20631
20632
20633
20634
20635
20636
20637
20638
20639
20640
20641
20642
20643
20644
20645
20646
20647
20648
20649
20650
20651
20652
20653
20654
20655
20656
20657
20658
20659
20660
20661
20662
20663
20664
20665
20666
20667
20668
20669
20670
20671
20672
20673
20674
20675
20676
20677
20678
20679
20680
20681
20682
20683
20684
20685
20686
20687
20688
20689
20690
20691
20692
20693
20694
20695
20696
20697
20698
20699
20700
20701
20702
20703
20704
20705
20706
20707
20708
20709
20710
20711
20712
20713
20714
20715
20716
20717
20718
20719
20720
20721
20722
20723
20724
20725
20726
20727
20728
20729
20730
20731
20732
20733
20734
20735
20736
20737
20738
20739
20740
20741
20742
20743
20744
20745
20746
20747
20748
20749
20750
20751
20752
20753
20754
20755
20756
20757
20758
20759
20760
20761
20762
20763
20764
20765
20766
20767
20768
20769
20770
20771
20772
20773
20774
20775
20776
20777
20778
20779
20780
20781
20782
20783
20784
20785
20786
20787
20788
20789
20790
20791
20792
20793
20794
20795
20796
20797
20798
20799
20800
20801
20802
20803
20804
20805
20806
20807
20808
20809
20810
20811
20812
20813
20814
20815
20816
20817
20818
20819
20820
20821
20822
20823
20824
20825
20826
20827
20828
20829
20830
20831
20832
20833
20834
20835
20836
20837
20838
20839
20840
20841
20842
20843
20844
20845
20846
20847
20848
20849
20850
20851
20852
20853
20854
20855
20856
20857
20858
20859
20860
20861
20862
20863
20864
20865
20866
20867
20868
20869
20870
20871
20872
20873
20874
20875
20876
20877
20878
20879
20880
20881
20882
20883
20884
20885
20886
20887
20888
20889
20890
20891
20892
20893
20894
20895
20896
20897
20898
20899
20900
20901
20902
20903
20904
20905
20906
20907
20908
20909
20910
20911
20912
20913
20914
20915
20916
20917
20918
20919
20920
20921
20922
20923
20924
20925
20926
20927
20928
20929
20930
20931
20932
20933
20934
20935
20936
20937
20938
20939
20940
20941
20942
20943
20944
20945
20946
20947
20948
20949
20950
20951
20952
20953
20954
20955
20956
20957
20958
20959
20960
20961
20962
20963
20964
20965
20966
20967
20968
20969
20970
20971
20972
20973
20974
20975
20976
20977
20978
20979
20980
20981
20982
20983
20984
20985
20986
20987
20988
20989
20990
20991
20992
20993
20994
20995
20996
20997
20998
20999
21000
21001
21002
21003
21004
21005
21006
21007
21008
21009
21010
21011
21012
21013
21014
21015
21016
21017
21018
21019
21020
21021
21022
21023
21024
21025
21026
21027
21028
21029
21030
21031
21032
21033
21034
21035
21036
21037
21038
21039
21040
21041
21042
21043
21044
21045
21046
21047
21048
21049
21050
21051
21052
21053
21054
21055
21056
21057
21058
21059
21060
21061
21062
21063
21064
21065
21066
21067
21068
21069
21070
21071
21072
21073
21074
21075
21076
21077
21078
21079
21080
21081
21082
21083
21084
21085
21086
21087
21088
21089
21090
21091
21092
21093
21094
21095
21096
21097
21098
21099
21100
21101
21102
21103
21104
21105
21106
21107
21108
21109
21110
21111
21112
21113
21114
21115
21116
21117
21118
21119
21120
21121
21122
21123
21124
21125
21126
21127
21128
21129
21130
21131
21132
21133
21134
21135
21136
21137
21138
21139
21140
21141
21142
21143
21144
21145
21146
21147
21148
21149
21150
21151
21152
21153
21154
21155
21156
21157
21158
21159
21160
21161
21162
21163
21164
21165
21166
21167
21168
21169
21170
21171
21172
21173
21174
21175
21176
21177
21178
21179
21180
21181
21182
21183
21184
21185
21186
21187
21188
21189
21190
21191
21192
21193
21194
21195
21196
21197
21198
21199
21200
21201
21202
21203
21204
21205
21206
21207
21208
21209
21210
21211
21212
21213
21214
21215
21216
21217
21218
21219
21220
21221
21222
21223
21224
21225
21226
21227
21228
21229
21230
21231
21232
21233
21234
21235
21236
21237
21238
21239
21240
21241
21242
21243
21244
21245
21246
21247
21248
21249
21250
21251
21252
21253
21254
21255
21256
21257
21258
21259
21260
21261
21262
21263
21264
21265
21266
21267
21268
21269
21270
21271
21272
21273
21274
21275
21276
21277
21278
21279
21280
21281
21282
21283
21284
21285
21286
21287
21288
21289
21290
21291
21292
21293
21294
21295
21296
21297
21298
21299
21300
21301
21302
21303
21304
21305
21306
21307
21308
21309
21310
21311
21312
21313
21314
21315
21316
21317
21318
21319
21320
21321
21322
21323
21324
21325
21326
21327
21328
21329
21330
21331
21332
21333
21334
21335
21336
21337
21338
21339
21340
21341
21342
21343
21344
21345
21346
21347
21348
21349
21350
21351
21352
21353
21354
21355
21356
21357
21358
21359
21360
21361
21362
21363
21364
21365
21366
21367
21368
21369
21370
21371
21372
21373
21374
21375
21376
21377
21378
21379
21380
21381
21382
21383
21384
21385
21386
21387
21388
21389
21390
21391
21392
21393
21394
21395
21396
21397
21398
21399
21400
21401
21402
21403
21404
21405
21406
21407
21408
21409
21410
21411
21412
21413
21414
21415
21416
21417
21418
21419
21420
21421
21422
21423
21424
21425
21426
21427
21428
21429
21430
21431
21432
21433
21434
21435
21436
21437
21438
21439
21440
21441
21442
21443
21444
21445
21446
21447
21448
21449
21450
21451
21452
21453
21454
21455
21456
21457
21458
21459
21460
21461
21462
21463
21464
21465
21466
21467
21468
21469
21470
21471
21472
21473
21474
21475
21476
21477
21478
21479
21480
21481
21482
21483
21484
21485
21486
21487
21488
21489
21490
21491
21492
21493
21494
21495
21496
21497
21498
21499
21500
21501
21502
21503
21504
21505
21506
21507
21508
21509
21510
21511
21512
21513
21514
21515
21516
21517
21518
21519
21520
21521
21522
21523
21524
21525
21526
21527
21528
21529
21530
21531
21532
21533
21534
21535
21536
21537
21538
21539
21540
21541
21542
21543
21544
21545
21546
21547
21548
21549
21550
21551
21552
21553
21554
21555
21556
21557
21558
21559
21560
21561
21562
21563
21564
21565
21566
21567
21568
21569
21570
21571
21572
21573
21574
21575
21576
21577
21578
21579
21580
21581
21582
21583
21584
21585
21586
21587
21588
21589
21590
21591
21592
21593
21594
21595
21596
21597
21598
21599
21600
21601
21602
21603
21604
21605
21606
21607
21608
21609
21610
21611
21612
21613
21614
21615
21616
21617
21618
21619
21620
21621
21622
21623
21624
21625
21626
21627
21628
21629
21630
21631
21632
21633
21634
21635
21636
21637
21638
21639
21640
21641
21642
21643
21644
21645
21646
21647
21648
21649
21650
21651
21652
21653
21654
21655
21656
21657
21658
21659
21660
21661
21662
21663
21664
21665
21666
21667
21668
21669
21670
21671
21672
21673
21674
21675
21676
21677
21678
21679
21680
21681
21682
21683
21684
21685
21686
21687
21688
21689
21690
21691
21692
21693
21694
21695
21696
21697
21698
21699
21700
21701
21702
21703
21704
21705
21706
21707
21708
21709
21710
21711
21712
21713
21714
21715
21716
21717
21718
21719
21720
21721
21722
21723
21724
21725
21726
21727
21728
21729
21730
21731
21732
21733
21734
21735
21736
21737
21738
21739
21740
21741
21742
21743
21744
21745
21746
21747
21748
21749
21750
21751
21752
21753
21754
21755
21756
21757
21758
21759
21760
21761
21762
21763
21764
21765
21766
21767
21768
21769
21770
21771
21772
21773
21774
21775
21776
21777
21778
21779
21780
21781
21782
21783
21784
21785
21786
21787
21788
21789
21790
21791
21792
21793
21794
21795
21796
21797
21798
21799
21800
21801
21802
21803
21804
21805
21806
21807
21808
21809
21810
21811
21812
21813
21814
21815
21816
21817
21818
21819
21820
21821
21822
21823
21824
21825
21826
21827
21828
21829
21830
21831
21832
21833
21834
21835
21836
21837
21838
21839
21840
21841
21842
21843
21844
21845
21846
21847
21848
21849
21850
21851
21852
21853
21854
21855
21856
21857
21858
21859
21860
21861
21862
21863
21864
21865
21866
21867
21868
21869
21870
21871
21872
21873
21874
21875
21876
21877
21878
21879
21880
21881
21882
21883
21884
21885
21886
21887
21888
21889
21890
21891
21892
21893
21894
21895
21896
21897
21898
21899
21900
21901
21902
21903
21904
21905
21906
21907
21908
21909
21910
21911
21912
21913
21914
21915
21916
21917
21918
21919
21920
21921
21922
21923
21924
21925
21926
21927
21928
21929
21930
21931
21932
21933
21934
21935
21936
21937
21938
21939
21940
21941
21942
21943
21944
21945
21946
21947
21948
21949
21950
21951
21952
21953
21954
21955
21956
21957
21958
21959
21960
21961
21962
21963
21964
21965
21966
21967
21968
21969
21970
21971
21972
21973
21974
21975
21976
21977
21978
21979
21980
21981
21982
21983
21984
21985
21986
21987
21988
21989
21990
21991
21992
21993
21994
21995
21996
21997
21998
21999
22000
22001
22002
22003
22004
22005
22006
22007
22008
22009
22010
22011
22012
22013
22014
22015
22016
22017
22018
22019
22020
22021
22022
22023
22024
22025
22026
22027
22028
22029
22030
22031
22032
22033
22034
22035
22036
22037
22038
22039
22040
22041
22042
22043
22044
22045
22046
22047
22048
22049
22050
22051
22052
22053
22054
22055
22056
22057
22058
22059
22060
22061
22062
22063
22064
22065
22066
22067
22068
22069
22070
22071
22072
22073
22074
22075
22076
22077
22078
22079
22080
22081
22082
22083
22084
22085
22086
22087
22088
22089
22090
22091
22092
22093
22094
22095
22096
22097
22098
22099
22100
22101
22102
22103
22104
22105
22106
22107
22108
22109
22110
22111
22112
22113
22114
22115
22116
22117
22118
22119
22120
22121
22122
22123
22124
22125
22126
22127
22128
22129
22130
22131
22132
22133
22134
22135
22136
22137
22138
22139
22140
22141
22142
22143
22144
22145
22146
22147
22148
22149
22150
22151
22152
22153
22154
22155
22156
22157
22158
22159
22160
22161
22162
22163
22164
22165
22166
22167
22168
22169
22170
22171
22172
22173
22174
22175
22176
22177
22178
22179
22180
22181
22182
22183
22184
22185
22186
22187
22188
22189
22190
22191
22192
22193
22194
22195
22196
22197
22198
22199
22200
22201
22202
22203
22204
22205
22206
22207
22208
22209
22210
22211
22212
22213
22214
22215
22216
22217
22218
22219
22220
22221
22222
22223
22224
22225
22226
22227
22228
22229
22230
22231
22232
22233
22234
22235
22236
22237
22238
22239
22240
22241
22242
22243
22244
22245
22246
22247
22248
22249
22250
22251
22252
22253
22254
22255
22256
22257
22258
22259
22260
22261
22262
22263
22264
22265
22266
22267
22268
22269
22270
22271
22272
22273
22274
22275
22276
22277
22278
22279
22280
22281
22282
22283
22284
22285
22286
22287
22288
22289
22290
22291
22292
22293
22294
22295
22296
22297
22298
22299
22300
22301
22302
22303
22304
22305
22306
22307
22308
22309
22310
22311
22312
22313
22314
22315
22316
22317
22318
22319
22320
22321
22322
22323
22324
22325
22326
22327
22328
22329
22330
22331
22332
22333
22334
22335
22336
22337
22338
22339
22340
22341
22342
22343
22344
22345
22346
22347
22348
22349
22350
22351
22352
22353
22354
22355
22356
22357
22358
22359
22360
22361
22362
22363
22364
22365
22366
22367
22368
22369
22370
22371
22372
22373
22374
22375
22376
22377
22378
22379
22380
22381
22382
22383
22384
22385
22386
22387
22388
22389
22390
22391
22392
22393
22394
22395
22396
22397
22398
22399
22400
22401
22402
22403
22404
22405
22406
22407
22408
22409
22410
22411
22412
22413
22414
22415
22416
22417
22418
22419
22420
22421
22422
22423
22424
22425
22426
22427
22428
22429
22430
22431
22432
22433
22434
22435
22436
22437
22438
22439
22440
22441
22442
22443
22444
22445
22446
22447
22448
22449
22450
22451
22452
22453
22454
22455
22456
22457
22458
22459
22460
22461
22462
22463
22464
22465
22466
22467
22468
22469
22470
22471
22472
22473
22474
22475
22476
22477
22478
22479
22480
22481
22482
22483
22484
22485
22486
22487
22488
22489
22490
22491
22492
22493
22494
22495
22496
22497
22498
22499
22500
22501
22502
22503
22504
22505
22506
22507
22508
22509
22510
22511
22512
22513
22514
22515
22516
22517
22518
22519
22520
22521
22522
22523
22524
22525
22526
22527
22528
22529
22530
22531
22532
22533
22534
22535
22536
22537
22538
22539
22540
22541
22542
22543
22544
22545
22546
22547
22548
22549
22550
22551
22552
22553
22554
22555
22556
22557
22558
22559
22560
22561
22562
22563
22564
22565
22566
22567
22568
22569
22570
22571
22572
22573
22574
22575
22576
22577
22578
22579
22580
22581
22582
22583
22584
22585
22586
22587
22588
22589
22590
22591
22592
22593
22594
22595
22596
22597
22598
22599
22600
22601
22602
22603
22604
22605
22606
22607
22608
22609
22610
22611
22612
22613
22614
22615
22616
22617
22618
22619
22620
22621
22622
22623
22624
22625
22626
22627
22628
22629
22630
22631
22632
22633
22634
22635
22636
22637
22638
22639
22640
22641
22642
22643
22644
22645
22646
22647
22648
22649
22650
22651
22652
22653
22654
22655
22656
22657
22658
22659
22660
22661
22662
22663
22664
22665
22666
22667
22668
22669
22670
22671
22672
22673
22674
22675
22676
22677
22678
22679
22680
22681
22682
22683
22684
22685
22686
22687
22688
22689
22690
22691
22692
22693
22694
22695
22696
22697
22698
22699
22700
22701
22702
22703
22704
22705
22706
22707
22708
22709
22710
22711
22712
22713
22714
22715
22716
22717
22718
22719
22720
22721
22722
22723
22724
22725
22726
22727
22728
22729
22730
22731
22732
22733
22734
22735
22736
22737
22738
22739
22740
22741
22742
22743
22744
22745
22746
22747
22748
22749
22750
22751
22752
22753
22754
22755
22756
22757
22758
22759
22760
22761
22762
22763
22764
22765
22766
22767
22768
22769
22770
22771
22772
22773
22774
22775
22776
22777
22778
22779
22780
22781
22782
22783
22784
22785
22786
22787
22788
22789
22790
22791
22792
22793
22794
22795
22796
22797
22798
22799
22800
22801
22802
22803
22804
22805
22806
22807
22808
22809
22810
22811
22812
22813
22814
22815
22816
22817
22818
22819
22820
22821
22822
22823
22824
22825
22826
22827
22828
22829
22830
22831
22832
22833
22834
22835
22836
22837
22838
22839
22840
22841
22842
22843
22844
22845
22846
22847
22848
22849
22850
22851
22852
22853
22854
22855
22856
22857
22858
22859
22860
22861
22862
22863
22864
22865
22866
22867
22868
22869
22870
22871
22872
22873
22874
22875
22876
22877
22878
22879
22880
22881
22882
22883
22884
22885
22886
22887
22888
22889
22890
22891
22892
22893
22894
22895
22896
22897
22898
22899
22900
22901
22902
22903
22904
22905
22906
22907
22908
22909
22910
22911
22912
22913
22914
22915
22916
22917
22918
22919
22920
22921
22922
22923
22924
22925
22926
22927
22928
22929
22930
22931
22932
22933
22934
22935
22936
22937
22938
22939
22940
22941
22942
22943
22944
22945
22946
22947
22948
22949
22950
22951
22952
22953
22954
22955
22956
22957
22958
22959
22960
22961
22962
22963
22964
22965
22966
22967
22968
22969
22970
22971
22972
22973
22974
22975
22976
22977
22978
22979
22980
22981
22982
22983
22984
22985
22986
22987
22988
22989
22990
22991
22992
22993
22994
22995
22996
22997
22998
22999
23000
23001
23002
23003
23004
23005
23006
23007
23008
23009
23010
23011
23012
23013
23014
23015
23016
23017
23018
23019
23020
23021
23022
23023
23024
23025
23026
23027
23028
23029
23030
23031
23032
23033
23034
23035
23036
23037
23038
23039
23040
23041
23042
23043
23044
23045
23046
23047
23048
23049
23050
23051
23052
23053
23054
23055
23056
23057
23058
23059
23060
23061
23062
23063
23064
23065
23066
23067
23068
23069
23070
23071
23072
23073
23074
23075
23076
23077
23078
23079
23080
23081
23082
23083
23084
23085
23086
23087
23088
23089
23090
23091
23092
23093
23094
23095
23096
23097
23098
23099
23100
23101
23102
23103
23104
23105
23106
23107
23108
23109
23110
23111
23112
23113
23114
23115
23116
23117
23118
23119
23120
23121
23122
23123
23124
23125
23126
23127
23128
23129
23130
23131
23132
23133
23134
23135
23136
23137
23138
23139
23140
23141
23142
23143
23144
23145
23146
23147
23148
23149
23150
23151
23152
23153
23154
23155
23156
23157
23158
23159
23160
23161
23162
23163
23164
23165
23166
23167
23168
23169
23170
23171
23172
23173
23174
23175
23176
23177
23178
23179
23180
23181
23182
23183
23184
23185
23186
23187
23188
23189
23190
23191
23192
23193
23194
23195
23196
23197
23198
23199
23200
23201
23202
23203
23204
23205
23206
23207
23208
23209
23210
23211
23212
23213
23214
23215
23216
23217
23218
23219
23220
23221
23222
23223
23224
23225
23226
23227
23228
23229
23230
23231
23232
23233
23234
23235
23236
23237
23238
23239
23240
23241
23242
23243
23244
23245
23246
23247
23248
23249
23250
23251
23252
23253
23254
23255
23256
23257
23258
23259
23260
23261
23262
23263
23264
23265
23266
23267
23268
23269
23270
23271
23272
23273
23274
23275
23276
23277
23278
23279
23280
23281
23282
23283
23284
23285
23286
23287
23288
23289
23290
23291
23292
23293
23294
23295
23296
23297
23298
23299
23300
23301
23302
23303
23304
23305
23306
23307
23308
23309
23310
23311
23312
23313
23314
23315
23316
23317
23318
23319
23320
23321
23322
23323
23324
23325
23326
23327
23328
23329
23330
23331
23332
23333
23334
23335
23336
23337
23338
23339
23340
23341
23342
23343
23344
23345
23346
23347
23348
23349
23350
23351
23352
23353
23354
23355
23356
23357
23358
23359
23360
23361
23362
23363
23364
23365
23366
23367
23368
23369
23370
23371
23372
23373
23374
23375
23376
23377
23378
23379
23380
23381
23382
23383
23384
23385
23386
23387
23388
23389
23390
23391
23392
23393
23394
23395
23396
23397
23398
23399
23400
23401
23402
23403
23404
23405
23406
23407
23408
23409
23410
23411
23412
23413
23414
23415
23416
23417
23418
23419
23420
23421
23422
23423
23424
23425
23426
23427
23428
23429
23430
23431
23432
23433
23434
23435
23436
23437
23438
23439
23440
23441
23442
23443
23444
23445
23446
23447
23448
23449
23450
23451
23452
23453
23454
23455
23456
23457
23458
23459
23460
23461
23462
23463
23464
23465
23466
23467
23468
23469
23470
23471
23472
23473
23474
23475
23476
23477
23478
23479
23480
23481
23482
23483
23484
23485
23486
23487
23488
23489
23490
23491
23492
23493
23494
23495
23496
23497
23498
23499
23500
23501
23502
23503
23504
23505
23506
23507
23508
23509
23510
23511
23512
23513
23514
23515
23516
23517
23518
23519
23520
23521
23522
23523
23524
23525
23526
23527
23528
23529
23530
23531
23532
23533
23534
23535
23536
23537
23538
23539
23540
23541
23542
23543
23544
23545
23546
23547
23548
23549
23550
23551
23552
23553
23554
23555
23556
23557
23558
23559
23560
23561
23562
23563
23564
23565
23566
23567
23568
23569
23570
23571
23572
23573
23574
23575
23576
23577
23578
23579
23580
23581
23582
23583
23584
23585
23586
23587
23588
23589
23590
23591
23592
23593
23594
23595
23596
23597
23598
23599
23600
23601
23602
23603
23604
23605
23606
23607
23608
23609
23610
23611
23612
23613
23614
23615
23616
23617
23618
23619
23620
23621
23622
23623
23624
23625
23626
23627
23628
23629
23630
23631
23632
23633
23634
23635
23636
23637
23638
23639
23640
23641
23642
23643
23644
23645
23646
23647
23648
23649
23650
23651
23652
23653
23654
23655
23656
23657
23658
23659
23660
23661
23662
23663
23664
23665
23666
23667
23668
23669
23670
23671
23672
23673
23674
23675
23676
23677
23678
23679
23680
23681
23682
23683
23684
23685
23686
23687
23688
23689
23690
23691
23692
23693
23694
23695
23696
23697
23698
23699
23700
23701
23702
23703
23704
23705
23706
23707
23708
23709
23710
23711
23712
23713
23714
23715
23716
23717
23718
23719
23720
23721
23722
23723
23724
23725
23726
23727
23728
23729
23730
23731
23732
23733
23734
23735
23736
23737
23738
23739
23740
23741
23742
23743
23744
23745
23746
23747
23748
23749
23750
23751
23752
23753
23754
23755
23756
23757
23758
23759
23760
23761
23762
23763
23764
23765
23766
23767
23768
23769
23770
23771
23772
23773
23774
23775
23776
23777
23778
23779
23780
23781
23782
23783
23784
23785
23786
23787
23788
23789
23790
23791
23792
23793
23794
23795
23796
23797
23798
23799
23800
23801
23802
23803
23804
23805
23806
23807
23808
23809
23810
23811
23812
23813
23814
23815
23816
23817
23818
23819
23820
23821
23822
23823
23824
23825
23826
23827
23828
23829
23830
23831
23832
23833
23834
23835
23836
23837
23838
23839
23840
23841
23842
23843
23844
23845
23846
23847
23848
23849
23850
23851
23852
23853
23854
23855
23856
23857
23858
23859
23860
23861
23862
23863
23864
23865
23866
23867
23868
23869
23870
23871
23872
23873
23874
23875
23876
23877
23878
23879
23880
23881
23882
23883
23884
23885
23886
23887
23888
23889
23890
23891
23892
23893
23894
23895
23896
23897
23898
23899
23900
23901
23902
23903
23904
23905
23906
23907
23908
23909
23910
23911
23912
23913
23914
23915
23916
23917
23918
23919
23920
23921
23922
23923
23924
23925
23926
23927
23928
23929
23930
23931
23932
23933
23934
23935
23936
23937
23938
23939
23940
23941
23942
23943
23944
23945
23946
23947
23948
23949
23950
23951
23952
23953
23954
23955
23956
23957
23958
23959
23960
23961
23962
23963
23964
23965
23966
23967
23968
23969
23970
23971
23972
23973
23974
23975
23976
23977
23978
23979
23980
23981
23982
23983
23984
23985
23986
23987
23988
23989
23990
23991
23992
23993
23994
23995
23996
23997
23998
23999
24000
24001
24002
24003
24004
24005
24006
24007
24008
24009
24010
24011
24012
24013
24014
24015
24016
24017
24018
24019
24020
24021
24022
24023
24024
24025
24026
24027
24028
24029
24030
24031
24032
24033
24034
24035
24036
24037
24038
24039
24040
24041
24042
24043
24044
24045
24046
24047
24048
24049
24050
24051
24052
24053
24054
24055
24056
24057
24058
24059
24060
24061
24062
24063
24064
24065
24066
24067
24068
24069
24070
24071
24072
24073
24074
24075
24076
24077
24078
24079
24080
24081
24082
24083
24084
24085
24086
24087
24088
24089
24090
24091
24092
24093
24094
24095
24096
24097
24098
24099
24100
24101
24102
24103
24104
24105
24106
24107
24108
24109
24110
24111
24112
24113
24114
24115
24116
24117
24118
24119
24120
24121
24122
24123
24124
24125
24126
24127
24128
24129
24130
24131
24132
24133
24134
24135
24136
24137
24138
24139
24140
24141
24142
24143
24144
24145
24146
24147
24148
24149
24150
24151
24152
24153
24154
24155
24156
24157
24158
24159
24160
24161
24162
24163
24164
24165
24166
24167
24168
24169
24170
24171
24172
24173
24174
24175
24176
24177
24178
24179
24180
24181
24182
24183
24184
24185
24186
24187
24188
24189
24190
24191
24192
24193
24194
24195
24196
24197
24198
24199
24200
24201
24202
24203
24204
24205
24206
24207
24208
24209
24210
24211
24212
24213
24214
24215
24216
24217
24218
24219
24220
24221
24222
24223
24224
24225
24226
24227
24228
24229
24230
24231
24232
24233
24234
24235
24236
24237
24238
24239
24240
24241
24242
24243
24244
24245
24246
24247
24248
24249
24250
24251
24252
24253
24254
24255
24256
24257
24258
24259
24260
24261
24262
24263
24264
24265
24266
24267
24268
24269
24270
24271
24272
24273
24274
24275
24276
24277
24278
24279
24280
24281
24282
24283
24284
24285
24286
24287
24288
24289
24290
24291
24292
24293
24294
24295
24296
24297
24298
24299
24300
24301
24302
24303
24304
24305
24306
24307
24308
24309
24310
24311
24312
24313
24314
24315
24316
24317
24318
24319
24320
24321
24322
24323
24324
24325
24326
24327
24328
24329
24330
24331
24332
24333
24334
24335
24336
24337
24338
24339
24340
24341
24342
24343
24344
24345
24346
24347
24348
24349
24350
24351
24352
24353
24354
24355
24356
24357
24358
24359
24360
24361
24362
24363
24364
24365
24366
24367
24368
24369
24370
24371
24372
24373
24374
24375
24376
24377
24378
24379
24380
24381
24382
24383
24384
24385
24386
24387
24388
24389
24390
24391
24392
24393
24394
24395
24396
24397
24398
24399
24400
24401
24402
24403
24404
24405
24406
24407
24408
24409
24410
24411
24412
24413
24414
24415
24416
24417
24418
24419
24420
24421
24422
24423
24424
24425
24426
24427
24428
24429
24430
24431
24432
24433
24434
24435
24436
24437
24438
24439
24440
24441
24442
24443
24444
24445
24446
24447
24448
24449
24450
24451
24452
24453
24454
24455
24456
24457
24458
24459
24460
24461
24462
24463
24464
24465
24466
24467
24468
24469
24470
24471
24472
24473
24474
24475
24476
24477
24478
24479
24480
24481
24482
24483
24484
24485
24486
24487
24488
24489
24490
24491
24492
24493
24494
24495
24496
24497
24498
24499
24500
24501
24502
24503
24504
24505
24506
24507
24508
24509
24510
24511
24512
24513
24514
24515
24516
24517
24518
24519
24520
24521
24522
24523
24524
24525
24526
24527
24528
24529
24530
24531
24532
24533
24534
24535
24536
24537
24538
24539
24540
24541
24542
24543
24544
24545
24546
24547
24548
24549
24550
24551
24552
24553
24554
24555
24556
24557
24558
24559
24560
24561
24562
24563
24564
24565
24566
24567
24568
24569
24570
24571
24572
24573
24574
24575
24576
24577
24578
24579
24580
24581
24582
24583
24584
24585
24586
24587
24588
24589
24590
24591
24592
24593
24594
24595
24596
24597
24598
24599
24600
24601
24602
24603
24604
24605
24606
24607
24608
24609
24610
24611
24612
24613
24614
24615
24616
24617
24618
24619
24620
24621
24622
24623
24624
24625
24626
24627
24628
24629
24630
24631
24632
24633
24634
24635
24636
24637
24638
24639
24640
24641
24642
24643
24644
24645
24646
24647
24648
24649
24650
24651
24652
24653
24654
24655
24656
24657
24658
24659
24660
24661
24662
24663
24664
24665
24666
24667
24668
24669
24670
24671
24672
24673
24674
24675
24676
24677
24678
24679
24680
24681
24682
24683
24684
24685
24686
24687
24688
24689
24690
24691
24692
24693
24694
24695
24696
24697
24698
24699
24700
24701
24702
24703
24704
24705
24706
24707
24708
24709
24710
24711
24712
24713
24714
24715
24716
24717
24718
24719
24720
24721
24722
24723
24724
24725
24726
24727
24728
24729
24730
24731
24732
24733
24734
24735
24736
24737
24738
24739
24740
24741
24742
24743
24744
24745
24746
24747
24748
24749
24750
24751
24752
24753
24754
24755
24756
24757
24758
24759
24760
24761
24762
24763
24764
24765
24766
24767
24768
24769
24770
24771
24772
24773
24774
24775
24776
24777
24778
24779
24780
24781
24782
24783
24784
24785
24786
24787
24788
24789
24790
24791
24792
24793
24794
24795
24796
24797
24798
24799
24800
24801
24802
24803
24804
24805
24806
24807
24808
24809
24810
24811
24812
24813
24814
24815
24816
24817
24818
24819
24820
24821
24822
24823
24824
24825
24826
24827
24828
24829
24830
24831
24832
24833
24834
24835
24836
24837
24838
24839
24840
24841
24842
24843
24844
24845
24846
24847
24848
24849
24850
24851
24852
24853
24854
24855
24856
24857
24858
24859
24860
24861
24862
24863
24864
24865
24866
24867
24868
24869
24870
24871
24872
24873
24874
24875
24876
24877
24878
24879
24880
24881
24882
24883
24884
24885
24886
24887
24888
24889
24890
24891
24892
24893
24894
24895
24896
24897
24898
24899
24900
24901
24902
24903
24904
24905
24906
24907
24908
24909
24910
24911
24912
24913
24914
24915
24916
24917
24918
24919
24920
24921
24922
24923
24924
24925
24926
24927
24928
24929
24930
24931
24932
24933
24934
24935
24936
24937
24938
24939
24940
24941
24942
24943
24944
24945
24946
24947
24948
24949
24950
24951
24952
24953
24954
24955
24956
24957
24958
24959
24960
24961
24962
24963
24964
24965
24966
24967
24968
24969
24970
24971
24972
24973
24974
24975
24976
24977
24978
24979
24980
24981
24982
24983
24984
24985
24986
24987
24988
24989
24990
24991
24992
24993
24994
24995
24996
24997
24998
24999
25000
25001
25002
25003
25004
25005
25006
25007
25008
25009
25010
25011
25012
25013
25014
25015
25016
25017
25018
25019
25020
25021
25022
25023
25024
25025
25026
25027
25028
25029
25030
25031
25032
25033
25034
25035
25036
25037
25038
25039
25040
25041
25042
25043
25044
25045
25046
25047
25048
25049
25050
25051
25052
25053
25054
25055
25056
25057
25058
25059
25060
25061
25062
25063
25064
25065
25066
25067
25068
25069
25070
25071
25072
25073
25074
25075
25076
25077
25078
25079
25080
25081
25082
25083
25084
25085
25086
25087
25088
25089
25090
25091
25092
25093
25094
25095
25096
25097
25098
25099
25100
25101
25102
25103
25104
25105
25106
25107
25108
25109
25110
25111
25112
25113
25114
25115
25116
25117
25118
25119
25120
25121
25122
25123
25124
25125
25126
25127
25128
25129
25130
25131
25132
25133
25134
25135
25136
25137
25138
25139
25140
25141
25142
25143
25144
25145
25146
25147
25148
25149
25150
25151
25152
25153
25154
25155
25156
25157
25158
25159
25160
25161
25162
25163
25164
25165
25166
25167
25168
25169
25170
25171
25172
25173
25174
25175
25176
25177
25178
25179
25180
25181
25182
25183
25184
25185
25186
25187
25188
25189
25190
25191
25192
25193
25194
25195
25196
25197
25198
25199
25200
25201
25202
25203
25204
25205
25206
25207
25208
25209
25210
25211
25212
25213
25214
25215
25216
25217
25218
25219
25220
25221
25222
25223
25224
25225
25226
25227
25228
25229
25230
25231
25232
25233
25234
25235
25236
25237
25238
25239
25240
25241
25242
25243
25244
25245
25246
25247
25248
25249
25250
25251
25252
25253
25254
25255
25256
25257
25258
25259
25260
25261
25262
25263
25264
25265
25266
25267
25268
25269
25270
25271
25272
25273
25274
25275
25276
25277
25278
25279
25280
25281
25282
25283
25284
25285
25286
25287
25288
25289
25290
25291
25292
25293
25294
25295
25296
25297
25298
25299
25300
25301
25302
25303
25304
25305
25306
25307
25308
25309
25310
25311
25312
25313
25314
25315
25316
25317
25318
25319
25320
25321
25322
25323
25324
25325
25326
25327
25328
25329
25330
25331
25332
25333
25334
25335
25336
25337
25338
25339
25340
25341
25342
25343
25344
25345
25346
25347
25348
25349
25350
25351
25352
25353
25354
25355
25356
25357
25358
25359
25360
25361
25362
25363
25364
25365
25366
25367
25368
25369
25370
25371
25372
25373
25374
25375
25376
25377
25378
25379
25380
25381
25382
25383
25384
25385
25386
25387
25388
25389
25390
25391
25392
25393
25394
25395
25396
25397
25398
25399
25400
25401
25402
25403
25404
25405
25406
25407
25408
25409
25410
25411
25412
25413
25414
25415
25416
25417
25418
25419
25420
25421
25422
25423
25424
25425
25426
25427
25428
25429
25430
25431
25432
25433
25434
25435
25436
25437
25438
25439
25440
25441
25442
25443
25444
25445
25446
25447
25448
25449
25450
25451
25452
25453
25454
25455
25456
25457
25458
25459
25460
25461
25462
25463
25464
25465
25466
25467
25468
25469
25470
25471
25472
25473
25474
25475
25476
25477
25478
25479
25480
25481
25482
25483
25484
25485
25486
25487
25488
25489
25490
25491
25492
25493
25494
25495
25496
25497
25498
25499
25500
25501
25502
25503
25504
25505
25506
25507
25508
25509
25510
25511
25512
25513
25514
25515
25516
25517
25518
25519
25520
25521
25522
25523
25524
25525
25526
25527
25528
25529
25530
25531
25532
25533
25534
25535
25536
25537
25538
25539
25540
25541
25542
25543
25544
25545
25546
25547
25548
25549
25550
25551
25552
25553
25554
25555
25556
25557
25558
25559
25560
25561
25562
25563
25564
25565
25566
25567
25568
25569
25570
25571
25572
25573
25574
25575
25576
25577
25578
25579
25580
25581
25582
25583
25584
25585
25586
25587
25588
25589
25590
25591
25592
25593
25594
25595
25596
25597
25598
25599
25600
25601
25602
25603
25604
25605
25606
25607
25608
25609
25610
25611
25612
25613
25614
25615
25616
25617
25618
25619
25620
25621
25622
25623
25624
25625
25626
25627
25628
25629
25630
25631
25632
25633
25634
25635
25636
25637
25638
25639
25640
25641
25642
25643
25644
25645
25646
25647
25648
25649
25650
25651
25652
25653
25654
25655
25656
25657
25658
25659
25660
25661
25662
25663
25664
25665
25666
25667
25668
25669
25670
25671
25672
25673
25674
25675
25676
25677
25678
25679
25680
25681
25682
25683
25684
25685
25686
25687
25688
25689
25690
25691
25692
25693
25694
25695
25696
25697
25698
25699
25700
25701
25702
25703
25704
25705
25706
25707
25708
25709
25710
25711
25712
25713
25714
25715
25716
25717
25718
25719
25720
25721
25722
25723
25724
25725
25726
25727
25728
25729
25730
25731
25732
25733
25734
25735
25736
25737
25738
25739
25740
25741
25742
25743
25744
25745
25746
25747
25748
25749
25750
25751
25752
25753
25754
25755
25756
25757
25758
25759
25760
25761
25762
25763
25764
25765
25766
25767
25768
25769
25770
25771
25772
25773
25774
25775
25776
25777
25778
25779
25780
25781
25782
25783
25784
25785
25786
25787
25788
25789
25790
25791
25792
25793
25794
25795
25796
25797
25798
25799
25800
25801
25802
25803
25804
25805
25806
25807
25808
25809
25810
25811
25812
25813
25814
25815
25816
25817
25818
25819
25820
25821
25822
25823
25824
25825
25826
25827
25828
25829
25830
25831
25832
25833
25834
25835
25836
25837
25838
25839
25840
25841
25842
25843
25844
25845
25846
25847
25848
25849
25850
25851
25852
25853
25854
25855
25856
25857
25858
25859
25860
25861
25862
25863
25864
25865
25866
25867
25868
25869
25870
25871
25872
25873
25874
25875
25876
25877
25878
25879
25880
25881
25882
25883
25884
25885
25886
25887
25888
25889
25890
25891
25892
25893
25894
25895
25896
25897
25898
25899
25900
25901
25902
25903
25904
25905
25906
25907
25908
25909
25910
25911
25912
25913
25914
25915
25916
25917
25918
25919
25920
25921
25922
25923
25924
25925
25926
25927
25928
25929
25930
25931
25932
25933
25934
25935
25936
25937
25938
25939
25940
25941
25942
25943
25944
25945
25946
25947
25948
25949
25950
25951
25952
25953
25954
25955
25956
25957
25958
25959
25960
25961
25962
25963
25964
25965
25966
25967
25968
25969
25970
25971
25972
25973
25974
25975
25976
25977
25978
25979
25980
25981
25982
25983
25984
25985
25986
25987
25988
25989
25990
25991
25992
25993
25994
25995
25996
25997
25998
25999
26000
26001
26002
26003
26004
26005
26006
26007
26008
26009
26010
26011
26012
26013
26014
26015
26016
26017
26018
26019
26020
26021
26022
26023
26024
26025
26026
26027
26028
26029
26030
26031
26032
26033
26034
26035
26036
26037
26038
26039
26040
26041
26042
26043
26044
26045
26046
26047
26048
26049
26050
26051
26052
26053
26054
26055
26056
26057
26058
26059
26060
26061
26062
26063
26064
26065
26066
26067
26068
26069
26070
26071
26072
26073
26074
26075
26076
26077
26078
26079
26080
26081
26082
26083
26084
26085
26086
26087
26088
26089
26090
26091
26092
26093
26094
26095
26096
26097
26098
26099
26100
26101
26102
26103
26104
26105
26106
26107
26108
26109
26110
26111
26112
26113
26114
26115
26116
26117
26118
26119
26120
26121
26122
26123
26124
26125
26126
26127
26128
26129
26130
26131
26132
26133
26134
26135
26136
26137
26138
26139
26140
26141
26142
26143
26144
26145
26146
26147
26148
26149
26150
26151
26152
26153
26154
26155
26156
26157
26158
26159
26160
26161
26162
26163
26164
26165
26166
26167
26168
26169
26170
26171
26172
26173
26174
26175
26176
26177
26178
26179
26180
26181
26182
26183
26184
26185
26186
26187
26188
26189
26190
26191
26192
26193
26194
26195
26196
26197
26198
26199
26200
26201
26202
26203
26204
26205
26206
26207
26208
26209
26210
26211
26212
26213
26214
26215
26216
26217
26218
26219
26220
26221
26222
26223
26224
26225
26226
26227
26228
26229
26230
26231
26232
26233
26234
26235
26236
26237
26238
26239
26240
26241
26242
26243
26244
26245
26246
26247
26248
26249
26250
26251
26252
26253
26254
26255
26256
26257
26258
26259
26260
26261
26262
26263
26264
26265
26266
26267
26268
26269
26270
26271
26272
26273
26274
26275
26276
26277
26278
26279
26280
26281
26282
26283
26284
26285
26286
26287
26288
26289
26290
26291
26292
26293
26294
26295
26296
26297
26298
26299
26300
26301
26302
26303
26304
26305
26306
26307
26308
26309
26310
26311
26312
26313
26314
26315
26316
26317
26318
26319
26320
26321
26322
26323
26324
26325
26326
26327
26328
26329
26330
26331
26332
26333
26334
26335
26336
26337
26338
26339
26340
26341
26342
26343
26344
26345
26346
26347
26348
26349
26350
26351
26352
26353
26354
26355
26356
26357
26358
26359
26360
26361
26362
26363
26364
26365
26366
26367
26368
26369
26370
26371
26372
26373
26374
26375
26376
26377
26378
26379
26380
26381
26382
26383
26384
26385
26386
26387
26388
26389
26390
26391
26392
26393
26394
26395
26396
26397
26398
26399
26400
26401
26402
26403
26404
26405
26406
26407
26408
26409
26410
26411
26412
26413
26414
26415
26416
26417
26418
26419
26420
26421
26422
26423
26424
26425
26426
26427
26428
26429
26430
26431
26432
26433
26434
26435
26436
26437
26438
26439
26440
26441
26442
26443
26444
26445
26446
26447
26448
26449
26450
26451
26452
26453
26454
26455
26456
26457
26458
26459
26460
26461
26462
26463
26464
26465
26466
26467
26468
26469
26470
26471
26472
26473
26474
26475
26476
26477
26478
26479
26480
26481
26482
26483
26484
26485
26486
26487
26488
26489
26490
26491
26492
26493
26494
26495
26496
26497
26498
26499
26500
26501
26502
26503
26504
26505
26506
26507
26508
26509
26510
26511
26512
26513
26514
26515
26516
26517
26518
26519
26520
26521
26522
26523
26524
26525
26526
26527
26528
26529
26530
26531
26532
26533
26534
26535
26536
26537
26538
26539
26540
26541
26542
26543
26544
26545
26546
26547
26548
26549
26550
26551
26552
26553
26554
26555
26556
26557
26558
26559
26560
26561
26562
26563
26564
26565
26566
26567
26568
26569
26570
26571
26572
26573
26574
26575
26576
26577
26578
26579
26580
26581
26582
26583
26584
26585
26586
26587
26588
26589
26590
26591
26592
26593
26594
26595
26596
26597
26598
26599
26600
26601
26602
26603
26604
26605
26606
26607
26608
26609
26610
26611
26612
26613
26614
26615
26616
26617
26618
26619
26620
26621
26622
26623
26624
26625
26626
26627
26628
26629
26630
26631
26632
26633
26634
26635
26636
26637
26638
26639
26640
26641
26642
26643
26644
26645
26646
26647
26648
26649
26650
26651
26652
26653
26654
26655
26656
26657
26658
26659
26660
26661
26662
26663
26664
26665
26666
26667
26668
26669
26670
26671
26672
26673
26674
26675
26676
26677
26678
26679
26680
26681
26682
26683
26684
26685
26686
26687
26688
26689
26690
26691
26692
26693
26694
26695
26696
26697
26698
26699
26700
26701
26702
26703
26704
26705
26706
26707
26708
26709
26710
26711
26712
26713
26714
26715
26716
26717
26718
26719
26720
26721
26722
26723
26724
26725
26726
26727
26728
26729
26730
26731
26732
26733
26734
26735
26736
26737
26738
26739
26740
26741
26742
26743
26744
26745
26746
26747
26748
26749
26750
26751
26752
26753
26754
26755
26756
26757
26758
26759
26760
26761
26762
26763
26764
26765
26766
26767
26768
26769
26770
26771
26772
26773
26774
26775
26776
26777
26778
26779
26780
26781
26782
26783
26784
26785
26786
26787
26788
26789
26790
26791
26792
26793
26794
26795
26796
26797
26798
26799
26800
26801
26802
26803
26804
26805
26806
26807
26808
26809
26810
26811
26812
26813
26814
26815
26816
26817
26818
26819
26820
26821
26822
26823
26824
26825
26826
26827
26828
26829
26830
26831
26832
26833
26834
26835
26836
26837
26838
26839
26840
26841
26842
26843
26844
26845
26846
26847
26848
26849
26850
26851
26852
26853
26854
26855
26856
26857
26858
26859
26860
26861
26862
26863
26864
26865
26866
26867
26868
26869
26870
26871
26872
26873
26874
26875
26876
26877
26878
26879
26880
26881
26882
26883
26884
26885
26886
26887
26888
26889
26890
26891
26892
26893
26894
26895
26896
26897
26898
26899
26900
26901
26902
26903
26904
26905
26906
26907
26908
26909
26910
26911
26912
26913
26914
26915
26916
26917
26918
26919
26920
26921
26922
26923
26924
26925
26926
26927
26928
26929
26930
26931
26932
26933
26934
26935
26936
26937
26938
26939
26940
26941
26942
26943
26944
26945
26946
26947
26948
26949
26950
26951
26952
26953
26954
26955
26956
26957
26958
26959
26960
26961
26962
26963
26964
26965
26966
26967
26968
26969
26970
26971
26972
26973
26974
26975
26976
26977
26978
26979
26980
26981
26982
26983
26984
26985
26986
26987
26988
26989
26990
26991
26992
26993
26994
26995
26996
26997
26998
26999
27000
27001
27002
27003
27004
27005
27006
27007
27008
27009
27010
27011
27012
27013
27014
27015
27016
27017
27018
27019
27020
27021
27022
27023
27024
27025
27026
27027
27028
27029
27030
27031
27032
27033
27034
27035
27036
27037
27038
27039
27040
27041
27042
27043
27044
27045
27046
27047
27048
27049
27050
27051
27052
27053
27054
27055
27056
27057
27058
27059
27060
27061
27062
27063
27064
27065
27066
27067
27068
27069
27070
27071
27072
27073
27074
27075
27076
27077
27078
27079
27080
27081
27082
27083
27084
27085
27086
27087
27088
27089
27090
27091
27092
27093
27094
27095
27096
27097
27098
27099
27100
27101
27102
27103
27104
27105
27106
27107
27108
27109
27110
27111
27112
27113
27114
27115
27116
27117
27118
27119
27120
27121
27122
27123
27124
27125
27126
27127
27128
27129
27130
27131
27132
27133
27134
27135
27136
27137
27138
27139
27140
27141
27142
27143
27144
27145
27146
27147
27148
27149
27150
27151
27152
27153
27154
27155
27156
27157
27158
27159
27160
27161
27162
27163
27164
27165
27166
27167
27168
27169
27170
27171
27172
27173
27174
27175
27176
27177
27178
27179
27180
27181
27182
27183
27184
27185
27186
27187
27188
27189
27190
27191
27192
27193
27194
27195
27196
27197
27198
27199
27200
27201
27202
27203
27204
27205
27206
27207
27208
27209
27210
27211
27212
27213
27214
27215
27216
27217
27218
27219
27220
27221
27222
27223
27224
27225
27226
27227
27228
27229
27230
27231
27232
27233
27234
27235
27236
27237
27238
27239
27240
27241
27242
27243
27244
27245
27246
27247
27248
27249
27250
27251
27252
27253
27254
27255
27256
27257
27258
27259
27260
27261
27262
27263
27264
27265
27266
27267
27268
27269
27270
27271
27272
27273
27274
27275
27276
27277
27278
27279
27280
27281
27282
27283
27284
27285
27286
27287
27288
27289
27290
27291
27292
27293
27294
27295
27296
27297
27298
27299
27300
27301
27302
27303
27304
27305
27306
27307
27308
27309
27310
27311
27312
27313
27314
27315
27316
27317
27318
27319
27320
27321
27322
27323
27324
27325
27326
27327
27328
27329
27330
27331
27332
27333
27334
27335
27336
27337
27338
27339
27340
27341
27342
27343
27344
27345
27346
27347
27348
27349
27350
27351
27352
27353
27354
27355
27356
27357
27358
27359
27360
27361
27362
27363
27364
27365
27366
27367
27368
27369
27370
27371
27372
27373
27374
27375
27376
27377
27378
27379
27380
27381
27382
27383
27384
27385
27386
27387
27388
27389
27390
27391
27392
27393
27394
27395
27396
27397
27398
27399
27400
27401
27402
27403
27404
27405
27406
27407
27408
27409
27410
27411
27412
27413
27414
27415
27416
27417
27418
27419
27420
27421
27422
27423
27424
27425
27426
27427
27428
27429
27430
27431
27432
27433
27434
27435
27436
27437
27438
27439
27440
27441
27442
27443
27444
27445
27446
27447
27448
27449
27450
27451
27452
27453
27454
27455
27456
27457
27458
27459
27460
27461
27462
27463
27464
27465
27466
27467
27468
27469
27470
27471
27472
27473
27474
27475
27476
27477
27478
27479
27480
27481
27482
27483
27484
27485
27486
27487
27488
27489
27490
27491
27492
27493
27494
27495
27496
27497
27498
27499
27500
27501
27502
27503
27504
27505
27506
27507
27508
27509
27510
27511
27512
27513
27514
27515
27516
27517
27518
27519
27520
27521
27522
27523
27524
27525
27526
27527
27528
27529
27530
27531
27532
27533
27534
27535
27536
27537
27538
27539
27540
27541
27542
27543
27544
27545
27546
27547
27548
27549
27550
27551
27552
27553
27554
27555
27556
27557
27558
27559
27560
27561
27562
27563
27564
27565
27566
27567
27568
27569
27570
27571
27572
27573
27574
27575
27576
27577
27578
27579
27580
27581
27582
27583
27584
27585
27586
27587
27588
27589
27590
27591
27592
27593
27594
27595
27596
27597
27598
27599
27600
27601
27602
27603
27604
27605
27606
27607
27608
27609
27610
27611
27612
27613
27614
27615
27616
27617
27618
27619
27620
27621
27622
27623
27624
27625
27626
27627
27628
27629
27630
27631
27632
27633
27634
27635
27636
27637
27638
27639
27640
27641
27642
27643
27644
27645
27646
27647
27648
27649
27650
27651
27652
27653
27654
27655
27656
27657
27658
27659
27660
27661
27662
27663
27664
27665
27666
27667
27668
27669
27670
27671
27672
27673
27674
27675
27676
27677
27678
27679
27680
27681
27682
27683
27684
27685
27686
27687
27688
27689
27690
27691
27692
27693
27694
27695
27696
27697
27698
27699
27700
27701
27702
27703
27704
27705
27706
27707
27708
27709
27710
27711
27712
27713
27714
27715
27716
27717
27718
27719
27720
27721
27722
27723
27724
27725
27726
27727
27728
27729
27730
27731
27732
27733
27734
27735
27736
27737
27738
27739
27740
27741
27742
27743
27744
27745
27746
27747
27748
27749
27750
27751
27752
27753
27754
27755
27756
27757
27758
27759
27760
27761
27762
27763
27764
27765
27766
27767
27768
27769
27770
27771
27772
27773
27774
27775
27776
27777
27778
27779
27780
27781
27782
27783
27784
27785
27786
27787
27788
27789
27790
27791
27792
27793
27794
27795
27796
27797
27798
27799
27800
27801
27802
27803
27804
27805
27806
27807
27808
27809
27810
27811
27812
27813
27814
27815
27816
27817
27818
27819
27820
27821
27822
27823
27824
27825
27826
27827
27828
27829
27830
27831
27832
27833
27834
27835
27836
27837
27838
27839
27840
27841
27842
27843
27844
27845
27846
27847
27848
27849
27850
27851
27852
27853
27854
27855
27856
27857
27858
27859
27860
27861
27862
27863
27864
27865
27866
27867
27868
27869
27870
27871
27872
27873
27874
27875
27876
27877
27878
27879
27880
27881
27882
27883
27884
27885
27886
27887
27888
27889
27890
27891
27892
27893
27894
27895
27896
27897
27898
27899
27900
27901
27902
27903
27904
27905
27906
27907
27908
27909
27910
27911
27912
27913
27914
27915
27916
27917
27918
27919
27920
27921
27922
27923
27924
27925
27926
27927
27928
27929
27930
27931
27932
27933
27934
27935
27936
27937
27938
27939
27940
27941
27942
27943
27944
27945
27946
27947
27948
27949
27950
27951
27952
27953
27954
27955
27956
27957
27958
27959
27960
27961
27962
27963
27964
27965
27966
27967
27968
27969
27970
27971
27972
27973
27974
27975
27976
27977
27978
27979
27980
27981
27982
27983
27984
27985
27986
27987
27988
27989
27990
27991
27992
27993
27994
27995
27996
27997
27998
27999
28000
28001
28002
28003
28004
28005
28006
28007
28008
28009
28010
28011
28012
28013
28014
28015
28016
28017
28018
28019
28020
28021
28022
28023
28024
28025
28026
28027
28028
28029
28030
28031
28032
28033
28034
28035
28036
28037
28038
28039
28040
28041
28042
28043
28044
28045
28046
28047
28048
28049
28050
28051
28052
28053
28054
28055
28056
28057
28058
28059
28060
28061
28062
28063
28064
28065
28066
28067
28068
28069
28070
28071
28072
28073
28074
28075
28076
28077
28078
28079
28080
28081
28082
28083
28084
28085
28086
28087
28088
28089
28090
28091
28092
28093
28094
28095
28096
28097
28098
28099
28100
28101
28102
28103
28104
28105
28106
28107
28108
28109
28110
28111
28112
28113
28114
28115
28116
28117
28118
28119
28120
28121
28122
28123
28124
28125
28126
28127
28128
28129
28130
28131
28132
28133
28134
28135
28136
28137
28138
28139
28140
28141
28142
28143
28144
28145
28146
28147
28148
28149
28150
28151
28152
28153
28154
28155
28156
28157
28158
28159
28160
28161
28162
28163
28164
28165
28166
28167
28168
28169
28170
28171
28172
28173
28174
28175
28176
28177
28178
28179
28180
28181
28182
28183
28184
28185
28186
28187
28188
28189
28190
28191
28192
28193
28194
28195
28196
28197
28198
28199
28200
28201
28202
28203
28204
28205
28206
28207
28208
28209
28210
28211
28212
28213
28214
28215
28216
28217
28218
28219
28220
28221
28222
28223
28224
28225
28226
28227
28228
28229
28230
28231
28232
28233
28234
28235
28236
28237
28238
28239
28240
28241
28242
28243
28244
28245
28246
28247
28248
28249
28250
28251
28252
28253
28254
28255
28256
28257
28258
28259
28260
28261
28262
28263
28264
28265
28266
28267
28268
28269
28270
28271
28272
28273
28274
28275
28276
28277
28278
28279
28280
28281
28282
28283
28284
28285
28286
28287
28288
28289
28290
28291
28292
28293
28294
28295
28296
28297
28298
28299
28300
28301
28302
28303
28304
28305
28306
28307
28308
28309
28310
28311
28312
28313
28314
28315
28316
28317
28318
28319
28320
28321
28322
28323
28324
28325
28326
28327
28328
28329
28330
28331
28332
28333
28334
28335
28336
28337
28338
28339
28340
28341
28342
28343
28344
28345
28346
28347
28348
28349
28350
28351
28352
28353
28354
28355
28356
28357
28358
28359
28360
28361
28362
28363
28364
28365
28366
28367
28368
28369
28370
28371
28372
28373
28374
28375
28376
28377
28378
28379
28380
28381
28382
28383
28384
28385
28386
28387
28388
28389
28390
28391
28392
28393
28394
28395
28396
28397
28398
28399
28400
28401
28402
28403
28404
28405
28406
28407
28408
28409
28410
28411
28412
28413
28414
28415
28416
28417
28418
28419
28420
28421
28422
28423
28424
28425
28426
28427
28428
28429
28430
28431
28432
28433
28434
28435
28436
28437
28438
28439
28440
28441
28442
28443
28444
28445
28446
28447
28448
28449
28450
28451
28452
28453
28454
28455
28456
28457
28458
28459
28460
28461
28462
28463
28464
28465
28466
28467
28468
28469
28470
28471
28472
28473
28474
28475
28476
28477
28478
28479
28480
28481
28482
28483
28484
28485
28486
28487
28488
28489
28490
28491
28492
28493
28494
28495
28496
28497
28498
28499
28500
28501
28502
28503
28504
28505
28506
28507
28508
28509
28510
28511
28512
28513
28514
28515
28516
28517
28518
28519
28520
28521
28522
28523
28524
28525
28526
28527
28528
28529
28530
28531
28532
28533
28534
28535
28536
28537
28538
28539
28540
28541
28542
28543
28544
28545
28546
28547
28548
28549
28550
28551
28552
28553
28554
28555
28556
28557
28558
28559
28560
28561
28562
28563
28564
28565
28566
28567
28568
28569
28570
28571
28572
28573
28574
28575
28576
28577
28578
28579
28580
28581
28582
28583
28584
28585
28586
28587
28588
28589
28590
28591
28592
28593
28594
28595
28596
28597
28598
28599
28600
28601
28602
28603
28604
28605
28606
28607
28608
28609
28610
28611
28612
28613
28614
28615
28616
28617
28618
28619
28620
28621
28622
28623
28624
28625
28626
28627
28628
28629
28630
28631
28632
28633
28634
28635
28636
28637
28638
28639
28640
28641
28642
28643
28644
28645
28646
28647
28648
28649
28650
28651
28652
28653
28654
28655
28656
28657
28658
28659
28660
28661
28662
28663
28664
28665
28666
28667
28668
28669
28670
28671
28672
28673
28674
28675
28676
28677
28678
28679
28680
28681
28682
28683
28684
28685
28686
28687
28688
28689
28690
28691
28692
28693
28694
28695
28696
28697
28698
28699
28700
28701
28702
28703
28704
28705
28706
28707
28708
28709
28710
28711
28712
28713
28714
28715
28716
28717
28718
28719
28720
28721
28722
28723
28724
28725
28726
28727
28728
28729
28730
28731
28732
28733
28734
28735
28736
28737
28738
28739
28740
28741
28742
28743
28744
28745
28746
28747
28748
28749
28750
28751
28752
28753
28754
28755
28756
28757
28758
28759
28760
28761
28762
28763
28764
28765
28766
28767
28768
28769
28770
28771
28772
28773
28774
28775
28776
28777
28778
28779
28780
28781
28782
28783
28784
28785
28786
28787
28788
28789
28790
28791
28792
28793
28794
28795
28796
28797
28798
28799
28800
28801
28802
28803
28804
28805
28806
28807
28808
28809
28810
28811
28812
28813
28814
28815
28816
28817
28818
28819
28820
28821
28822
28823
28824
28825
28826
28827
28828
28829
28830
28831
28832
28833
28834
28835
28836
28837
28838
28839
28840
28841
28842
28843
28844
28845
28846
28847
28848
28849
28850
28851
28852
28853
28854
28855
28856
28857
28858
28859
28860
28861
28862
28863
28864
28865
28866
28867
28868
28869
28870
28871
28872
28873
28874
28875
28876
28877
28878
28879
28880
28881
28882
28883
28884
28885
28886
28887
28888
28889
28890
28891
28892
28893
28894
28895
28896
28897
28898
28899
28900
28901
28902
28903
28904
28905
28906
28907
28908
28909
28910
28911
28912
28913
28914
28915
28916
28917
28918
28919
28920
28921
28922
28923
28924
28925
28926
28927
28928
28929
28930
28931
28932
28933
28934
28935
28936
28937
28938
28939
28940
28941
28942
28943
28944
28945
28946
28947
28948
28949
28950
28951
28952
28953
28954
28955
28956
28957
28958
28959
28960
28961
28962
28963
28964
28965
28966
28967
28968
28969
28970
28971
28972
28973
28974
28975
28976
28977
28978
28979
28980
28981
28982
28983
28984
28985
28986
28987
28988
28989
28990
28991
28992
28993
28994
28995
28996
28997
28998
28999
29000
29001
29002
29003
29004
29005
29006
29007
29008
29009
29010
29011
29012
29013
29014
29015
29016
29017
29018
29019
29020
29021
29022
29023
29024
29025
29026
29027
29028
29029
29030
29031
29032
29033
29034
29035
29036
29037
29038
29039
29040
29041
29042
29043
29044
29045
29046
29047
29048
29049
29050
29051
29052
29053
29054
29055
29056
29057
29058
29059
29060
29061
29062
29063
29064
29065
29066
29067
29068
29069
29070
29071
29072
29073
29074
29075
29076
29077
29078
29079
29080
29081
29082
29083
29084
29085
29086
29087
29088
29089
29090
29091
29092
29093
29094
29095
29096
29097
29098
29099
29100
29101
29102
29103
29104
29105
29106
29107
29108
29109
29110
29111
29112
29113
29114
29115
29116
29117
29118
29119
29120
29121
29122
29123
29124
29125
29126
29127
29128
29129
29130
29131
29132
29133
29134
29135
29136
29137
29138
29139
29140
29141
29142
29143
29144
29145
29146
29147
29148
29149
29150
29151
29152
29153
29154
29155
29156
29157
29158
29159
29160
29161
29162
29163
29164
29165
29166
29167
29168
29169
29170
29171
29172
29173
29174
29175
29176
29177
29178
29179
29180
29181
29182
29183
29184
29185
29186
29187
29188
29189
29190
29191
29192
29193
29194
29195
29196
29197
29198
29199
29200
29201
29202
29203
29204
29205
29206
29207
29208
29209
29210
29211
29212
29213
29214
29215
29216
29217
29218
29219
29220
29221
29222
29223
29224
29225
29226
29227
29228
29229
29230
29231
29232
29233
29234
29235
29236
29237
29238
29239
29240
29241
29242
29243
29244
29245
29246
29247
29248
29249
29250
29251
29252
29253
29254
29255
29256
29257
29258
29259
29260
29261
29262
29263
29264
29265
29266
29267
29268
29269
29270
29271
29272
29273
29274
29275
29276
29277
29278
29279
29280
29281
29282
29283
29284
29285
29286
29287
29288
29289
29290
29291
29292
29293
29294
29295
29296
29297
29298
29299
29300
29301
29302
29303
29304
29305
29306
29307
29308
29309
29310
29311
29312
29313
29314
29315
29316
29317
29318
29319
29320
29321
29322
29323
29324
29325
29326
29327
29328
29329
29330
29331
29332
29333
29334
29335
29336
29337
29338
29339
29340
29341
29342
29343
29344
29345
29346
29347
29348
29349
29350
29351
29352
29353
29354
29355
29356
29357
29358
29359
29360
29361
29362
29363
29364
29365
29366
29367
29368
29369
29370
29371
29372
29373
29374
29375
29376
29377
29378
29379
29380
29381
29382
29383
29384
29385
29386
29387
29388
29389
29390
29391
29392
29393
29394
29395
29396
29397
29398
29399
29400
29401
29402
29403
29404
29405
29406
29407
29408
29409
29410
29411
29412
29413
29414
29415
29416
29417
29418
29419
29420
29421
29422
29423
29424
29425
29426
29427
29428
29429
29430
29431
29432
29433
29434
29435
29436
29437
29438
29439
29440
29441
29442
29443
29444
29445
29446
29447
29448
29449
29450
29451
29452
29453
29454
29455
29456
29457
29458
29459
29460
29461
29462
29463
29464
29465
29466
29467
29468
29469
29470
29471
29472
29473
29474
29475
29476
29477
29478
29479
29480
29481
29482
29483
29484
29485
29486
29487
29488
29489
29490
29491
29492
29493
29494
29495
29496
29497
29498
29499
29500
29501
29502
29503
29504
29505
29506
29507
29508
29509
29510
29511
29512
29513
29514
29515
29516
29517
29518
29519
29520
29521
29522
29523
29524
29525
29526
29527
29528
29529
29530
29531
29532
29533
29534
29535
29536
29537
29538
29539
29540
29541
29542
29543
29544
29545
29546
29547
29548
29549
29550
29551
29552
29553
29554
29555
29556
29557
29558
29559
29560
29561
29562
29563
29564
29565
29566
29567
29568
29569
29570
29571
29572
29573
29574
29575
29576
29577
29578
29579
29580
29581
29582
29583
29584
29585
29586
29587
29588
29589
29590
29591
29592
29593
29594
29595
29596
29597
29598
29599
29600
29601
29602
29603
29604
29605
29606
29607
29608
29609
29610
29611
29612
29613
29614
29615
29616
29617
29618
29619
29620
29621
29622
29623
29624
29625
29626
29627
29628
29629
29630
29631
29632
29633
29634
29635
29636
29637
29638
29639
29640
29641
29642
29643
29644
29645
29646
29647
29648
29649
29650
29651
29652
29653
29654
29655
29656
29657
29658
29659
29660
29661
29662
29663
29664
29665
29666
29667
29668
29669
29670
29671
29672
29673
29674
29675
29676
29677
29678
29679
29680
29681
29682
29683
29684
29685
29686
29687
29688
29689
29690
29691
29692
29693
29694
29695
29696
29697
29698
29699
29700
29701
29702
29703
29704
29705
29706
29707
29708
29709
29710
29711
29712
29713
29714
29715
29716
29717
29718
29719
29720
29721
29722
29723
29724
29725
29726
29727
29728
29729
29730
29731
29732
29733
29734
29735
29736
29737
29738
29739
29740
29741
29742
29743
29744
29745
29746
29747
29748
29749
29750
29751
29752
29753
29754
29755
29756
29757
29758
29759
29760
29761
29762
29763
29764
29765
29766
29767
29768
29769
29770
29771
29772
29773
29774
29775
29776
29777
29778
29779
29780
29781
29782
29783
29784
29785
29786
29787
29788
29789
29790
29791
29792
29793
29794
29795
29796
29797
29798
29799
29800
29801
29802
29803
29804
29805
29806
29807
29808
29809
29810
29811
29812
29813
29814
29815
29816
29817
29818
29819
29820
29821
29822
29823
29824
29825
29826
29827
29828
29829
29830
29831
29832
29833
29834
29835
29836
29837
29838
29839
29840
29841
29842
29843
29844
29845
29846
29847
29848
29849
29850
29851
29852
29853
29854
29855
29856
29857
29858
29859
29860
29861
29862
29863
29864
29865
29866
29867
29868
29869
29870
29871
29872
29873
29874
29875
29876
29877
29878
29879
29880
29881
29882
29883
29884
29885
29886
29887
29888
29889
29890
29891
29892
29893
29894
29895
29896
29897
29898
29899
29900
29901
29902
29903
29904
29905
29906
29907
29908
29909
29910
29911
29912
29913
29914
29915
29916
29917
29918
29919
29920
29921
29922
29923
29924
29925
29926
29927
29928
29929
29930
29931
29932
29933
29934
29935
29936
29937
29938
29939
29940
29941
29942
29943
29944
29945
29946
29947
29948
29949
29950
29951
29952
29953
29954
29955
29956
29957
29958
29959
29960
29961
29962
29963
29964
29965
29966
29967
29968
29969
29970
29971
29972
29973
29974
29975
29976
29977
29978
29979
29980
29981
29982
29983
29984
29985
29986
29987
29988
29989
29990
29991
29992
29993
29994
29995
29996
29997
29998
29999
30000
30001
30002
30003
30004
30005
30006
30007
30008
30009
30010
30011
30012
30013
30014
30015
30016
30017
30018
30019
30020
30021
30022
30023
30024
30025
30026
30027
30028
30029
30030
30031
30032
30033
30034
30035
30036
30037
30038
30039
30040
30041
30042
30043
30044
30045
30046
30047
30048
30049
30050
30051
30052
30053
30054
30055
30056
30057
30058
30059
30060
30061
30062
30063
30064
30065
30066
30067
30068
30069
30070
30071
30072
30073
30074
30075
30076
30077
30078
30079
30080
30081
30082
30083
30084
30085
30086
30087
30088
30089
30090
30091
30092
30093
30094
30095
30096
30097
30098
30099
30100
30101
30102
30103
30104
30105
30106
30107
30108
30109
30110
30111
30112
30113
30114
30115
30116
30117
30118
30119
30120
30121
30122
30123
30124
30125
30126
30127
30128
30129
30130
30131
30132
30133
30134
30135
30136
30137
30138
30139
30140
30141
30142
30143
30144
30145
30146
30147
30148
30149
30150
30151
30152
30153
30154
30155
30156
30157
30158
30159
30160
30161
30162
30163
30164
30165
30166
30167
30168
30169
30170
30171
30172
30173
30174
30175
30176
30177
30178
30179
30180
30181
30182
30183
30184
30185
30186
30187
30188
30189
30190
30191
30192
30193
30194
30195
30196
30197
30198
30199
30200
30201
30202
30203
30204
30205
30206
30207
30208
30209
30210
30211
30212
30213
30214
30215
30216
30217
30218
30219
30220
30221
30222
30223
30224
30225
30226
30227
30228
30229
30230
30231
30232
30233
30234
30235
30236
30237
30238
30239
30240
30241
30242
30243
30244
30245
30246
30247
30248
30249
30250
30251
30252
30253
30254
30255
30256
30257
30258
30259
30260
30261
30262
30263
30264
30265
30266
30267
30268
30269
30270
30271
30272
30273
30274
30275
30276
30277
30278
30279
30280
30281
30282
30283
30284
30285
30286
30287
30288
30289
30290
30291
30292
30293
30294
30295
30296
30297
30298
30299
30300
30301
30302
30303
30304
30305
30306
30307
30308
30309
30310
30311
30312
30313
30314
30315
30316
30317
30318
30319
30320
30321
30322
30323
30324
30325
30326
30327
30328
30329
30330
30331
30332
30333
30334
30335
30336
30337
30338
30339
30340
30341
30342
30343
30344
30345
30346
30347
30348
30349
30350
30351
30352
30353
30354
30355
30356
30357
30358
30359
30360
30361
30362
30363
30364
30365
30366
30367
30368
30369
30370
30371
30372
30373
30374
30375
30376
30377
30378
30379
30380
30381
30382
30383
30384
30385
30386
30387
30388
30389
30390
30391
30392
30393
30394
30395
30396
30397
30398
30399
30400
30401
30402
30403
30404
30405
30406
30407
30408
30409
30410
30411
30412
30413
30414
30415
30416
30417
30418
30419
30420
30421
30422
30423
30424
30425
30426
30427
30428
30429
30430
30431
30432
30433
30434
30435
30436
30437
30438
30439
30440
30441
30442
30443
30444
30445
30446
30447
30448
30449
30450
30451
30452
30453
30454
30455
30456
30457
30458
30459
30460
30461
30462
30463
30464
30465
30466
30467
30468
30469
30470
30471
30472
30473
30474
30475
30476
30477
30478
30479
30480
30481
30482
30483
30484
30485
30486
30487
30488
30489
30490
30491
30492
30493
30494
30495
30496
30497
30498
30499
30500
30501
30502
30503
30504
30505
30506
30507
30508
30509
30510
30511
30512
30513
30514
30515
30516
30517
30518
30519
30520
30521
30522
30523
30524
30525
30526
30527
30528
30529
30530
30531
30532
30533
30534
30535
30536
30537
30538
30539
30540
30541
30542
30543
30544
30545
30546
30547
30548
30549
30550
30551
30552
30553
30554
30555
30556
30557
30558
30559
30560
30561
30562
30563
30564
30565
30566
30567
30568
30569
30570
30571
30572
30573
30574
30575
30576
30577
30578
30579
30580
30581
30582
30583
30584
30585
30586
30587
30588
30589
30590
30591
30592
30593
30594
30595
30596
30597
30598
30599
30600
30601
30602
30603
30604
30605
30606
30607
30608
30609
30610
30611
30612
30613
30614
30615
30616
30617
30618
30619
30620
30621
30622
30623
30624
30625
30626
30627
30628
30629
30630
30631
30632
30633
30634
30635
30636
30637
30638
30639
30640
30641
30642
30643
30644
30645
30646
30647
30648
30649
30650
30651
30652
30653
30654
30655
30656
30657
30658
30659
30660
30661
30662
30663
30664
30665
30666
30667
30668
30669
30670
30671
30672
30673
30674
30675
30676
30677
30678
30679
30680
30681
30682
30683
30684
30685
30686
30687
30688
30689
30690
30691
30692
30693
30694
30695
30696
30697
30698
30699
30700
30701
30702
30703
30704
30705
30706
30707
30708
30709
30710
30711
30712
30713
30714
30715
30716
30717
30718
30719
30720
30721
30722
30723
30724
30725
30726
30727
30728
30729
30730
30731
30732
30733
30734
30735
30736
30737
30738
30739
30740
30741
30742
30743
30744
30745
30746
30747
30748
30749
30750
30751
30752
30753
30754
30755
30756
30757
30758
30759
30760
30761
30762
30763
30764
30765
30766
30767
30768
30769
30770
30771
30772
30773
30774
30775
30776
30777
30778
30779
30780
30781
30782
30783
30784
30785
30786
30787
30788
30789
30790
30791
30792
30793
30794
30795
30796
30797
30798
30799
30800
30801
30802
30803
30804
30805
30806
30807
30808
30809
30810
30811
30812
30813
30814
30815
30816
30817
30818
30819
30820
30821
30822
30823
30824
30825
30826
30827
30828
30829
30830
30831
30832
30833
30834
30835
30836
30837
30838
30839
30840
30841
30842
30843
30844
30845
30846
30847
30848
30849
30850
30851
30852
30853
30854
30855
30856
30857
30858
30859
30860
30861
30862
30863
30864
30865
30866
30867
30868
30869
30870
30871
30872
30873
30874
30875
30876
30877
30878
30879
30880
30881
30882
30883
30884
30885
30886
30887
30888
30889
30890
30891
30892
30893
30894
30895
30896
30897
30898
30899
30900
30901
30902
30903
30904
30905
30906
30907
30908
30909
30910
30911
30912
30913
30914
30915
30916
30917
30918
30919
30920
30921
30922
30923
30924
30925
30926
30927
30928
30929
30930
30931
30932
30933
30934
30935
30936
30937
30938
30939
30940
30941
30942
30943
30944
30945
30946
30947
30948
30949
30950
30951
30952
30953
30954
30955
30956
30957
30958
30959
30960
30961
30962
30963
30964
30965
30966
30967
30968
30969
30970
30971
30972
30973
30974
30975
30976
30977
30978
30979
30980
30981
30982
30983
30984
30985
30986
30987
30988
30989
30990
30991
30992
30993
30994
30995
30996
30997
30998
30999
31000
31001
31002
31003
31004
31005
31006
31007
31008
31009
31010
31011
31012
31013
31014
31015
31016
31017
31018
31019
31020
31021
31022
31023
31024
31025
31026
31027
31028
31029
31030
31031
31032
31033
31034
31035
31036
31037
31038
31039
31040
31041
31042
31043
31044
31045
31046
31047
31048
31049
31050
31051
31052
31053
31054
31055
31056
31057
31058
31059
31060
31061
31062
31063
31064
31065
31066
31067
31068
31069
31070
31071
31072
31073
31074
31075
31076
31077
31078
31079
31080
31081
31082
31083
31084
31085
31086
31087
31088
31089
31090
31091
31092
31093
31094
31095
31096
31097
31098
31099
31100
31101
31102
31103
31104
31105
31106
31107
31108
31109
31110
31111
31112
31113
31114
31115
31116
31117
31118
31119
31120
31121
31122
31123
31124
31125
31126
31127
31128
31129
31130
31131
31132
31133
31134
31135
31136
31137
31138
31139
31140
31141
31142
31143
31144
31145
31146
31147
31148
31149
31150
31151
31152
31153
31154
31155
31156
31157
31158
31159
31160
31161
31162
31163
31164
31165
31166
31167
31168
31169
31170
31171
31172
31173
31174
31175
31176
31177
31178
31179
31180
31181
31182
31183
31184
31185
31186
31187
31188
31189
31190
31191
31192
31193
31194
31195
31196
31197
31198
31199
31200
31201
31202
31203
31204
31205
31206
31207
31208
31209
31210
31211
31212
31213
31214
31215
31216
31217
31218
31219
31220
31221
31222
31223
31224
31225
31226
31227
31228
31229
31230
31231
31232
31233
31234
31235
31236
31237
31238
31239
31240
31241
31242
31243
31244
31245
31246
31247
31248
31249
31250
31251
31252
31253
31254
31255
31256
31257
31258
31259
31260
31261
31262
31263
31264
31265
31266
31267
31268
31269
31270
31271
31272
31273
31274
31275
31276
31277
31278
31279
31280
31281
31282
31283
31284
31285
31286
31287
31288
31289
31290
31291
31292
31293
31294
31295
31296
31297
31298
31299
31300
31301
31302
31303
31304
31305
31306
31307
31308
31309
31310
31311
31312
31313
31314
31315
31316
31317
31318
31319
31320
31321
31322
31323
31324
31325
31326
31327
31328
31329
31330
31331
31332
31333
31334
31335
31336
31337
31338
31339
31340
31341
31342
31343
31344
31345
31346
31347
31348
31349
31350
31351
31352
31353
31354
31355
31356
31357
31358
31359
31360
31361
31362
31363
31364
31365
31366
31367
31368
31369
31370
31371
31372
31373
31374
31375
31376
31377
31378
31379
31380
31381
31382
31383
31384
31385
31386
31387
31388
31389
31390
31391
31392
31393
31394
31395
31396
31397
31398
31399
31400
31401
31402
31403
31404
31405
31406
31407
31408
31409
31410
31411
31412
31413
31414
31415
31416
31417
31418
31419
31420
31421
31422
31423
31424
31425
31426
31427
31428
31429
31430
31431
31432
31433
31434
31435
31436
31437
31438
31439
31440
31441
31442
31443
31444
31445
31446
31447
31448
31449
31450
31451
31452
31453
31454
31455
31456
31457
31458
31459
31460
31461
31462
31463
31464
31465
31466
31467
31468
31469
31470
31471
31472
31473
31474
31475
31476
31477
31478
31479
31480
31481
31482
31483
31484
31485
31486
31487
31488
31489
31490
31491
31492
31493
31494
31495
31496
31497
31498
31499
31500
31501
31502
31503
31504
31505
31506
31507
31508
31509
31510
31511
31512
31513
31514
31515
31516
31517
31518
31519
31520
31521
31522
31523
31524
31525
31526
31527
31528
31529
31530
31531
31532
31533
31534
31535
31536
31537
31538
31539
31540
31541
31542
31543
31544
31545
31546
31547
31548
31549
31550
31551
31552
31553
31554
31555
31556
31557
31558
31559
31560
31561
31562
31563
31564
31565
31566
31567
31568
31569
31570
31571
31572
31573
31574
31575
31576
31577
31578
31579
31580
31581
31582
31583
31584
31585
31586
31587
31588
31589
31590
31591
31592
31593
31594
31595
31596
31597
31598
31599
31600
31601
31602
31603
31604
31605
31606
31607
31608
31609
31610
31611
31612
31613
31614
31615
31616
31617
31618
31619
31620
31621
31622
31623
31624
31625
31626
31627
31628
31629
31630
31631
31632
31633
31634
31635
31636
31637
31638
31639
31640
31641
31642
31643
31644
31645
31646
31647
31648
31649
31650
31651
31652
31653
31654
31655
31656
31657
31658
31659
31660
31661
31662
31663
31664
31665
31666
31667
31668
31669
31670
31671
31672
31673
31674
31675
31676
31677
31678
31679
31680
31681
31682
31683
31684
31685
31686
31687
31688
31689
31690
31691
31692
31693
31694
31695
31696
31697
31698
31699
31700
31701
31702
31703
31704
31705
31706
31707
31708
31709
31710
31711
31712
31713
31714
31715
31716
31717
31718
31719
31720
31721
31722
31723
31724
31725
31726
31727
31728
31729
31730
31731
31732
31733
31734
31735
31736
31737
31738
31739
31740
31741
31742
31743
31744
31745
31746
31747
31748
31749
31750
31751
31752
31753
31754
31755
31756
31757
31758
31759
31760
31761
31762
31763
31764
31765
31766
31767
31768
31769
31770
31771
31772
31773
31774
31775
31776
31777
31778
31779
31780
31781
31782
31783
31784
31785
31786
31787
31788
31789
31790
31791
31792
31793
31794
31795
31796
31797
31798
31799
31800
31801
31802
31803
31804
31805
31806
31807
31808
31809
31810
31811
31812
31813
31814
31815
31816
31817
31818
31819
31820
31821
31822
31823
31824
31825
31826
31827
31828
31829
31830
31831
31832
31833
31834
31835
31836
31837
31838
31839
31840
31841
31842
31843
31844
31845
31846
31847
31848
31849
31850
31851
31852
31853
31854
31855
31856
31857
31858
31859
31860
31861
31862
31863
31864
31865
31866
31867
31868
31869
31870
31871
31872
31873
31874
31875
31876
31877
31878
31879
31880
31881
31882
31883
31884
31885
31886
31887
31888
31889
31890
31891
31892
31893
31894
31895
31896
31897
31898
31899
31900
31901
31902
31903
31904
31905
31906
31907
31908
31909
31910
31911
31912
31913
31914
31915
31916
31917
31918
31919
31920
31921
31922
31923
31924
31925
31926
31927
31928
31929
31930
31931
31932
31933
31934
31935
31936
31937
31938
31939
31940
31941
31942
31943
31944
31945
31946
31947
31948
31949
31950
31951
31952
31953
31954
31955
31956
31957
31958
31959
31960
31961
31962
31963
31964
31965
31966
31967
31968
31969
31970
31971
31972
31973
31974
31975
31976
31977
31978
31979
31980
31981
31982
31983
31984
31985
31986
31987
31988
31989
31990
31991
31992
31993
31994
31995
31996
31997
31998
31999
32000
32001
32002
32003
32004
32005
32006
32007
32008
32009
32010
32011
32012
32013
32014
32015
32016
32017
32018
32019
32020
32021
32022
32023
32024
32025
32026
32027
32028
32029
32030
32031
32032
32033
32034
32035
32036
32037
32038
32039
32040
32041
32042
32043
32044
32045
32046
32047
32048
32049
32050
32051
32052
32053
32054
32055
32056
32057
32058
32059
32060
32061
32062
32063
32064
32065
32066
32067
32068
32069
32070
32071
32072
32073
32074
32075
32076
32077
32078
32079
32080
32081
32082
32083
32084
32085
32086
32087
32088
32089
32090
32091
32092
32093
32094
32095
32096
32097
32098
32099
32100
32101
32102
32103
32104
32105
32106
32107
32108
32109
32110
32111
32112
32113
32114
32115
32116
32117
32118
32119
32120
32121
32122
32123
32124
32125
32126
32127
32128
32129
32130
32131
32132
32133
32134
32135
32136
32137
32138
32139
32140
32141
32142
32143
32144
32145
32146
32147
32148
32149
32150
32151
32152
32153
32154
32155
32156
32157
32158
32159
32160
32161
32162
32163
32164
32165
32166
32167
32168
32169
32170
32171
32172
32173
32174
32175
32176
32177
32178
32179
32180
32181
32182
32183
32184
32185
32186
32187
32188
32189
32190
32191
32192
32193
32194
32195
32196
32197
32198
32199
32200
32201
32202
32203
32204
32205
32206
32207
32208
32209
32210
32211
32212
32213
32214
32215
32216
32217
32218
32219
32220
32221
32222
32223
32224
32225
32226
32227
32228
32229
32230
32231
32232
32233
32234
32235
32236
32237
32238
32239
32240
32241
32242
32243
32244
32245
32246
32247
32248
32249
32250
32251
32252
32253
32254
32255
32256
32257
32258
32259
32260
32261
32262
32263
32264
32265
32266
32267
32268
32269
32270
32271
32272
32273
32274
32275
32276
32277
32278
32279
32280
32281
32282
32283
32284
32285
32286
32287
32288
32289
32290
32291
32292
32293
32294
32295
32296
32297
32298
32299
32300
32301
32302
32303
32304
32305
32306
32307
32308
32309
32310
32311
32312
32313
32314
32315
32316
32317
32318
32319
32320
32321
32322
32323
32324
32325
32326
32327
32328
32329
32330
32331
32332
32333
32334
32335
32336
32337
32338
32339
32340
32341
32342
32343
32344
32345
32346
32347
32348
32349
32350
32351
32352
32353
32354
32355
32356
32357
32358
32359
32360
32361
32362
32363
32364
32365
32366
32367
32368
32369
32370
32371
32372
32373
32374
32375
32376
32377
32378
32379
32380
32381
32382
32383
32384
32385
32386
32387
32388
32389
32390
32391
32392
32393
32394
32395
32396
32397
32398
32399
32400
32401
32402
32403
32404
32405
32406
32407
32408
32409
32410
32411
32412
32413
32414
32415
32416
32417
32418
32419
32420
32421
32422
32423
32424
32425
32426
32427
32428
32429
32430
32431
32432
32433
32434
32435
32436
32437
32438
32439
32440
32441
32442
32443
32444
32445
32446
32447
32448
32449
32450
32451
32452
32453
32454
32455
32456
32457
32458
32459
32460
32461
32462
32463
32464
32465
32466
32467
32468
32469
32470
32471
32472
32473
32474
32475
32476
32477
32478
32479
32480
32481
32482
32483
32484
32485
32486
32487
32488
32489
32490
32491
32492
32493
32494
32495
32496
32497
32498
32499
32500
32501
32502
32503
32504
32505
32506
32507
32508
32509
32510
32511
32512
32513
32514
32515
32516
32517
32518
32519
32520
32521
32522
32523
32524
32525
32526
32527
32528
32529
32530
32531
32532
32533
32534
32535
32536
32537
32538
32539
32540
32541
32542
32543
32544
32545
32546
32547
32548
32549
32550
32551
32552
32553
32554
32555
32556
32557
32558
32559
32560
32561
32562
32563
32564
32565
32566
32567
32568
32569
32570
32571
32572
32573
32574
32575
32576
32577
32578
32579
32580
32581
32582
32583
32584
32585
32586
32587
32588
32589
32590
32591
32592
32593
32594
32595
32596
32597
32598
32599
32600
32601
32602
32603
32604
32605
32606
32607
32608
32609
32610
32611
32612
32613
32614
32615
32616
32617
32618
32619
32620
32621
32622
32623
32624
32625
32626
32627
32628
32629
32630
32631
32632
32633
32634
32635
32636
32637
32638
32639
32640
32641
32642
32643
32644
32645
32646
32647
32648
32649
32650
32651
32652
32653
32654
32655
32656
32657
32658
32659
32660
32661
32662
32663
32664
32665
32666
32667
32668
32669
32670
32671
32672
32673
32674
32675
32676
32677
32678
32679
32680
32681
32682
32683
32684
32685
32686
32687
32688
32689
32690
32691
32692
32693
32694
32695
32696
32697
32698
32699
32700
32701
32702
32703
32704
32705
32706
32707
32708
32709
32710
32711
32712
32713
32714
32715
32716
32717
32718
32719
32720
32721
32722
32723
32724
32725
32726
32727
32728
32729
32730
32731
32732
32733
32734
32735
32736
32737
32738
32739
32740
32741
32742
32743
32744
32745
32746
32747
32748
32749
32750
32751
32752
32753
32754
32755
32756
32757
32758
32759
32760
32761
32762
32763
32764
32765
32766
32767
32768
32769
32770
32771
32772
32773
32774
32775
32776
32777
32778
32779
32780
32781
32782
32783
32784
32785
32786
32787
32788
32789
32790
32791
32792
32793
32794
32795
32796
32797
32798
32799
32800
32801
32802
32803
32804
32805
32806
32807
32808
32809
32810
32811
32812
32813
32814
32815
32816
32817
32818
32819
32820
32821
32822
32823
32824
32825
32826
32827
32828
32829
32830
32831
32832
32833
32834
32835
32836
32837
32838
32839
32840
32841
32842
32843
32844
32845
32846
32847
32848
32849
32850
32851
32852
32853
32854
32855
32856
32857
32858
32859
32860
32861
32862
32863
32864
32865
32866
32867
32868
32869
32870
32871
32872
32873
32874
32875
32876
32877
32878
32879
32880
32881
32882
32883
32884
32885
32886
32887
32888
32889
32890
32891
32892
32893
32894
32895
32896
32897
32898
32899
32900
32901
32902
32903
32904
32905
32906
32907
32908
32909
32910
32911
32912
32913
32914
32915
32916
32917
32918
32919
32920
32921
32922
32923
32924
32925
32926
32927
32928
32929
32930
32931
32932
32933
32934
32935
32936
32937
32938
32939
32940
32941
32942
32943
32944
32945
32946
32947
32948
32949
32950
32951
32952
32953
32954
32955
32956
32957
32958
32959
32960
32961
32962
32963
32964
32965
32966
32967
32968
32969
32970
32971
32972
32973
32974
32975
32976
32977
32978
32979
32980
32981
32982
32983
32984
32985
32986
32987
32988
32989
32990
32991
32992
32993
32994
32995
32996
32997
32998
32999
33000
33001
33002
33003
33004
33005
33006
33007
33008
33009
33010
33011
33012
33013
33014
33015
33016
33017
33018
33019
33020
33021
33022
33023
33024
33025
33026
33027
33028
33029
33030
33031
33032
33033
33034
33035
33036
33037
33038
33039
33040
33041
33042
33043
33044
33045
33046
33047
33048
33049
33050
33051
33052
33053
33054
33055
33056
33057
33058
33059
33060
33061
33062
33063
33064
33065
33066
33067
33068
33069
33070
33071
33072
33073
33074
33075
33076
33077
33078
33079
33080
33081
33082
33083
33084
33085
33086
33087
33088
33089
33090
33091
33092
33093
33094
33095
33096
33097
33098
33099
33100
33101
33102
33103
33104
33105
33106
33107
33108
33109
33110
33111
33112
33113
33114
33115
33116
33117
33118
33119
33120
33121
33122
33123
33124
33125
33126
33127
33128
33129
33130
33131
33132
33133
33134
33135
33136
33137
33138
33139
33140
33141
33142
33143
33144
33145
33146
33147
33148
33149
33150
33151
33152
33153
33154
33155
33156
33157
33158
33159
33160
33161
33162
33163
33164
33165
33166
33167
33168
33169
33170
33171
33172
33173
33174
33175
33176
33177
33178
33179
33180
33181
33182
33183
33184
33185
33186
33187
33188
33189
33190
33191
33192
33193
33194
33195
33196
33197
33198
33199
33200
33201
33202
33203
33204
33205
33206
33207
33208
33209
33210
33211
33212
33213
33214
33215
33216
33217
33218
33219
33220
33221
33222
33223
33224
33225
33226
33227
33228
33229
33230
33231
33232
33233
33234
33235
33236
33237
33238
33239
33240
33241
33242
33243
33244
33245
33246
33247
33248
33249
33250
33251
33252
33253
33254
33255
33256
33257
33258
33259
33260
33261
33262
33263
33264
33265
33266
33267
33268
33269
33270
33271
33272
33273
33274
33275
33276
33277
33278
33279
33280
33281
33282
33283
33284
33285
33286
33287
33288
33289
33290
33291
33292
33293
33294
33295
33296
33297
33298
33299
33300
33301
33302
33303
33304
33305
33306
33307
33308
33309
33310
33311
33312
33313
33314
33315
33316
33317
33318
33319
33320
33321
33322
33323
33324
33325
33326
33327
33328
33329
33330
33331
33332
33333
33334
33335
33336
33337
33338
33339
33340
33341
33342
33343
33344
33345
33346
33347
33348
33349
33350
33351
33352
33353
33354
33355
33356
33357
33358
33359
33360
33361
33362
33363
33364
33365
33366
33367
33368
33369
33370
33371
33372
33373
33374
33375
33376
33377
33378
33379
33380
33381
33382
33383
33384
33385
33386
33387
33388
33389
33390
33391
33392
33393
33394
33395
33396
33397
33398
33399
33400
33401
33402
33403
33404
33405
33406
33407
33408
33409
33410
33411
33412
33413
33414
33415
33416
33417
33418
33419
33420
33421
33422
33423
33424
33425
33426
33427
33428
33429
33430
33431
33432
33433
33434
33435
33436
33437
33438
33439
33440
33441
33442
33443
33444
33445
33446
33447
33448
33449
33450
33451
33452
33453
33454
33455
33456
33457
33458
33459
33460
33461
33462
33463
33464
33465
33466
33467
33468
33469
33470
33471
33472
33473
33474
33475
33476
33477
33478
33479
33480
33481
33482
33483
33484
33485
33486
33487
33488
33489
33490
33491
33492
33493
33494
33495
33496
33497
33498
33499
33500
33501
33502
33503
33504
33505
33506
33507
33508
33509
33510
33511
33512
33513
33514
33515
33516
33517
33518
33519
33520
33521
33522
33523
33524
33525
33526
33527
33528
33529
33530
33531
33532
33533
33534
33535
33536
33537
33538
33539
33540
33541
33542
33543
33544
33545
33546
33547
33548
33549
33550
33551
33552
33553
33554
33555
33556
33557
33558
33559
33560
33561
33562
33563
33564
33565
33566
33567
33568
33569
33570
33571
33572
33573
33574
33575
33576
33577
33578
33579
33580
33581
33582
33583
33584
33585
33586
33587
33588
33589
33590
33591
33592
33593
33594
33595
33596
33597
33598
33599
33600
33601
33602
33603
33604
33605
33606
33607
33608
33609
33610
33611
33612
33613
33614
33615
33616
33617
33618
33619
33620
33621
33622
33623
33624
33625
33626
33627
33628
33629
33630
33631
33632
33633
33634
33635
33636
33637
33638
33639
33640
33641
33642
33643
33644
33645
33646
33647
33648
33649
33650
33651
33652
33653
33654
33655
33656
33657
33658
33659
33660
33661
33662
33663
33664
33665
33666
33667
33668
33669
33670
33671
33672
33673
33674
33675
33676
33677
33678
33679
33680
33681
33682
33683
33684
33685
33686
33687
33688
33689
33690
33691
33692
33693
33694
33695
33696
33697
33698
33699
33700
33701
33702
33703
33704
33705
33706
33707
33708
33709
33710
33711
33712
33713
33714
33715
33716
33717
33718
33719
33720
33721
33722
33723
33724
33725
33726
33727
33728
33729
33730
33731
33732
33733
33734
33735
33736
33737
33738
33739
33740
33741
33742
33743
33744
33745
33746
33747
33748
33749
33750
33751
33752
33753
33754
33755
33756
33757
33758
33759
33760
33761
33762
33763
33764
33765
33766
33767
33768
33769
33770
33771
33772
33773
33774
33775
33776
33777
33778
33779
33780
33781
33782
33783
33784
33785
33786
33787
33788
33789
33790
33791
33792
33793
33794
33795
33796
33797
33798
33799
33800
33801
33802
33803
33804
33805
33806
33807
33808
33809
33810
33811
33812
33813
33814
33815
33816
33817
33818
33819
33820
33821
33822
33823
33824
33825
33826
33827
33828
33829
33830
33831
33832
33833
33834
33835
33836
33837
33838
33839
33840
33841
33842
33843
33844
33845
33846
33847
33848
33849
33850
33851
33852
33853
33854
33855
33856
33857
33858
33859
33860
33861
33862
33863
33864
33865
33866
33867
33868
33869
33870
33871
33872
33873
33874
33875
33876
33877
33878
33879
33880
33881
33882
33883
33884
33885
33886
33887
33888
33889
33890
33891
33892
33893
33894
33895
33896
33897
33898
33899
33900
33901
33902
33903
33904
33905
33906
33907
33908
33909
33910
33911
33912
33913
33914
33915
33916
33917
33918
33919
33920
33921
33922
33923
33924
33925
33926
33927
33928
33929
33930
33931
33932
33933
33934
33935
33936
33937
33938
33939
33940
33941
33942
33943
33944
33945
33946
33947
33948
33949
33950
33951
33952
33953
33954
33955
33956
33957
33958
33959
33960
33961
33962
33963
33964
33965
33966
33967
33968
33969
33970
33971
33972
33973
33974
33975
33976
33977
33978
33979
33980
33981
33982
33983
33984
33985
33986
33987
33988
33989
33990
33991
33992
33993
33994
33995
33996
33997
33998
33999
34000
34001
34002
34003
34004
34005
34006
34007
34008
34009
34010
34011
34012
34013
34014
34015
34016
34017
34018
34019
34020
34021
34022
34023
34024
34025
34026
34027
34028
34029
34030
34031
34032
34033
34034
34035
34036
34037
34038
34039
34040
34041
34042
34043
34044
34045
34046
34047
34048
34049
34050
34051
34052
34053
34054
34055
34056
34057
34058
34059
34060
34061
34062
34063
34064
34065
34066
34067
34068
34069
34070
34071
34072
34073
34074
34075
34076
34077
34078
34079
34080
34081
34082
34083
34084
34085
34086
34087
34088
34089
34090
34091
34092
34093
34094
34095
34096
34097
34098
34099
34100
34101
34102
34103
34104
34105
34106
34107
34108
34109
34110
34111
34112
34113
34114
34115
34116
34117
34118
34119
34120
34121
34122
34123
34124
34125
34126
34127
34128
34129
34130
34131
34132
34133
34134
34135
34136
34137
34138
34139
34140
34141
34142
34143
34144
34145
34146
34147
34148
34149
34150
34151
34152
34153
34154
34155
34156
34157
34158
34159
34160
34161
34162
34163
34164
34165
34166
34167
34168
34169
34170
34171
34172
34173
34174
34175
34176
34177
34178
34179
34180
34181
34182
34183
34184
34185
34186
34187
34188
34189
34190
34191
34192
34193
34194
34195
34196
34197
34198
34199
34200
34201
34202
34203
34204
34205
34206
34207
34208
34209
34210
34211
34212
34213
34214
34215
34216
34217
34218
34219
34220
34221
34222
34223
34224
34225
34226
34227
34228
34229
34230
34231
34232
34233
34234
34235
34236
34237
34238
34239
34240
34241
34242
34243
34244
34245
34246
34247
34248
34249
34250
34251
34252
34253
34254
34255
34256
34257
34258
34259
34260
34261
34262
34263
34264
34265
34266
34267
34268
34269
34270
34271
34272
34273
34274
34275
34276
34277
34278
34279
34280
34281
34282
34283
34284
34285
34286
34287
34288
34289
34290
34291
34292
34293
34294
34295
34296
34297
34298
34299
34300
34301
34302
34303
34304
34305
34306
34307
34308
34309
34310
34311
34312
34313
34314
34315
34316
34317
34318
34319
34320
34321
34322
34323
34324
34325
34326
34327
34328
34329
34330
34331
34332
34333
34334
34335
34336
34337
34338
34339
34340
34341
34342
34343
34344
34345
34346
34347
34348
34349
34350
34351
34352
34353
34354
34355
34356
34357
34358
34359
34360
34361
34362
34363
34364
34365
34366
34367
34368
34369
34370
34371
34372
34373
34374
34375
34376
34377
34378
34379
34380
34381
34382
34383
34384
34385
34386
34387
34388
34389
34390
34391
34392
34393
34394
34395
34396
34397
34398
34399
34400
34401
34402
34403
34404
34405
34406
34407
34408
34409
34410
34411
34412
34413
34414
34415
34416
34417
34418
34419
34420
34421
34422
34423
34424
34425
34426
34427
34428
34429
34430
34431
34432
34433
34434
34435
34436
34437
34438
34439
34440
34441
34442
34443
34444
34445
34446
34447
34448
34449
34450
34451
34452
34453
34454
34455
34456
34457
34458
34459
34460
34461
34462
34463
34464
34465
34466
34467
34468
34469
34470
34471
34472
34473
34474
34475
34476
34477
34478
34479
34480
34481
34482
34483
34484
34485
34486
34487
34488
34489
34490
34491
34492
34493
34494
34495
34496
34497
34498
34499
34500
34501
34502
34503
34504
34505
34506
34507
34508
34509
34510
34511
34512
34513
34514
34515
34516
34517
34518
34519
34520
34521
34522
34523
34524
34525
34526
34527
34528
34529
34530
34531
34532
34533
34534
34535
34536
34537
34538
34539
34540
34541
34542
34543
34544
34545
34546
34547
34548
34549
34550
34551
34552
34553
34554
34555
34556
34557
34558
34559
34560
34561
34562
34563
34564
34565
34566
34567
34568
34569
34570
34571
34572
34573
34574
34575
34576
34577
34578
34579
34580
34581
34582
34583
34584
34585
34586
34587
34588
34589
34590
34591
34592
34593
34594
34595
34596
34597
34598
34599
34600
34601
34602
34603
34604
34605
34606
34607
34608
34609
34610
34611
34612
34613
34614
34615
34616
34617
34618
34619
34620
34621
34622
34623
34624
34625
34626
34627
34628
34629
34630
34631
34632
34633
34634
34635
34636
34637
34638
34639
34640
34641
34642
34643
34644
34645
34646
34647
34648
34649
34650
34651
34652
34653
34654
34655
34656
34657
34658
34659
34660
34661
34662
34663
34664
34665
34666
34667
34668
34669
34670
34671
34672
34673
34674
34675
34676
34677
34678
34679
34680
34681
34682
34683
34684
34685
34686
34687
34688
34689
34690
34691
34692
34693
34694
34695
34696
34697
34698
34699
34700
34701
34702
34703
34704
34705
34706
34707
34708
34709
34710
34711
34712
34713
34714
34715
34716
34717
34718
34719
34720
34721
34722
34723
34724
34725
34726
34727
34728
34729
34730
34731
34732
34733
34734
34735
34736
34737
34738
34739
34740
34741
34742
34743
34744
34745
34746
34747
34748
34749
34750
34751
34752
34753
34754
34755
34756
34757
34758
34759
34760
34761
34762
34763
34764
34765
34766
34767
34768
34769
34770
34771
34772
34773
34774
34775
34776
34777
34778
34779
34780
34781
34782
34783
34784
34785
34786
34787
34788
34789
34790
34791
34792
34793
34794
34795
34796
34797
34798
34799
34800
34801
34802
34803
34804
34805
34806
34807
34808
34809
34810
34811
34812
34813
34814
34815
34816
34817
34818
34819
34820
34821
34822
34823
34824
34825
34826
34827
34828
34829
34830
34831
34832
34833
34834
34835
34836
34837
34838
34839
34840
34841
34842
34843
34844
34845
34846
34847
34848
34849
34850
34851
34852
34853
34854
34855
34856
34857
34858
34859
34860
34861
34862
34863
34864
34865
34866
34867
34868
34869
34870
34871
34872
34873
34874
34875
34876
34877
34878
34879
34880
34881
34882
34883
34884
34885
34886
34887
34888
34889
34890
34891
34892
34893
34894
34895
34896
34897
34898
34899
34900
34901
34902
34903
34904
34905
34906
34907
34908
34909
34910
34911
34912
34913
34914
34915
34916
34917
34918
34919
34920
34921
34922
34923
34924
34925
34926
34927
34928
34929
34930
34931
34932
34933
34934
34935
34936
34937
34938
34939
34940
34941
34942
34943
34944
34945
34946
34947
34948
34949
34950
34951
34952
34953
34954
34955
34956
34957
34958
34959
34960
34961
34962
34963
34964
34965
34966
34967
34968
34969
34970
34971
34972
34973
34974
34975
34976
34977
34978
34979
34980
34981
34982
34983
34984
34985
34986
34987
34988
34989
34990
34991
34992
34993
34994
34995
34996
34997
34998
34999
35000
35001
35002
35003
35004
35005
35006
35007
35008
35009
35010
35011
35012
35013
35014
35015
35016
35017
35018
35019
35020
35021
35022
35023
35024
35025
35026
35027
35028
35029
35030
35031
35032
35033
35034
35035
35036
35037
35038
35039
35040
35041
35042
35043
35044
35045
35046
35047
35048
35049
35050
35051
35052
35053
35054
35055
35056
35057
35058
35059
35060
35061
35062
35063
35064
35065
35066
35067
35068
35069
35070
35071
35072
35073
35074
35075
35076
35077
35078
35079
35080
35081
35082
35083
35084
35085
35086
35087
35088
35089
35090
35091
35092
35093
35094
35095
35096
35097
35098
35099
35100
35101
35102
35103
35104
35105
35106
35107
35108
35109
35110
35111
35112
35113
35114
35115
35116
35117
35118
35119
35120
35121
35122
35123
35124
35125
35126
35127
35128
35129
35130
35131
35132
35133
35134
35135
35136
35137
35138
35139
35140
35141
35142
35143
35144
35145
35146
35147
35148
35149
35150
35151
35152
35153
35154
35155
35156
35157
35158
35159
35160
35161
35162
35163
35164
35165
35166
35167
35168
35169
35170
35171
35172
35173
35174
35175
35176
35177
35178
35179
35180
35181
35182
35183
35184
35185
35186
35187
35188
35189
35190
35191
35192
35193
35194
35195
35196
35197
35198
35199
35200
35201
35202
35203
35204
35205
35206
35207
35208
35209
35210
35211
35212
35213
35214
35215
35216
35217
35218
35219
35220
35221
35222
35223
35224
35225
35226
35227
35228
35229
35230
35231
35232
35233
35234
35235
35236
35237
35238
35239
35240
35241
35242
35243
35244
35245
35246
35247
35248
35249
35250
35251
35252
35253
35254
35255
35256
35257
35258
35259
35260
35261
35262
35263
35264
35265
35266
35267
35268
35269
35270
35271
35272
35273
35274
35275
35276
35277
35278
35279
35280
35281
35282
35283
35284
35285
35286
35287
35288
35289
35290
35291
35292
35293
35294
35295
35296
35297
35298
35299
35300
35301
35302
35303
35304
35305
35306
35307
35308
35309
35310
35311
35312
35313
35314
35315
35316
35317
35318
35319
35320
35321
35322
35323
35324
35325
35326
35327
35328
35329
35330
35331
35332
35333
35334
35335
35336
35337
35338
35339
35340
35341
35342
35343
35344
35345
35346
35347
35348
35349
35350
35351
35352
35353
35354
35355
35356
35357
35358
35359
35360
35361
35362
35363
35364
35365
35366
35367
35368
35369
35370
35371
35372
35373
35374
35375
35376
35377
35378
35379
35380
35381
35382
35383
35384
35385
35386
35387
35388
35389
35390
35391
35392
35393
35394
35395
35396
35397
35398
35399
35400
35401
35402
35403
35404
35405
35406
35407
35408
35409
35410
35411
35412
35413
35414
35415
35416
35417
35418
35419
35420
35421
35422
35423
35424
35425
35426
35427
35428
35429
35430
35431
35432
35433
35434
35435
35436
35437
35438
35439
35440
35441
35442
35443
35444
35445
35446
35447
35448
35449
35450
35451
35452
35453
35454
35455
35456
35457
35458
35459
35460
35461
35462
35463
35464
35465
35466
35467
35468
35469
35470
35471
35472
35473
35474
35475
35476
35477
35478
35479
35480
35481
35482
35483
35484
35485
35486
35487
35488
35489
35490
35491
35492
35493
35494
35495
35496
35497
35498
35499
35500
35501
35502
35503
35504
35505
35506
35507
35508
35509
35510
35511
35512
35513
35514
35515
35516
35517
35518
35519
35520
35521
35522
35523
35524
35525
35526
35527
35528
35529
35530
35531
35532
35533
35534
35535
35536
35537
35538
35539
35540
35541
35542
35543
35544
35545
35546
35547
35548
35549
35550
35551
35552
35553
35554
35555
35556
35557
35558
35559
35560
35561
35562
35563
35564
35565
35566
35567
35568
35569
35570
35571
35572
35573
35574
35575
35576
35577
35578
35579
35580
35581
35582
35583
35584
35585
35586
35587
35588
35589
35590
35591
35592
35593
35594
35595
35596
35597
35598
35599
35600
35601
35602
35603
35604
35605
35606
35607
35608
35609
35610
35611
35612
35613
35614
35615
35616
35617
35618
35619
35620
35621
35622
35623
35624
35625
35626
35627
35628
35629
35630
35631
35632
35633
35634
35635
35636
35637
35638
35639
35640
35641
35642
35643
35644
35645
35646
35647
35648
35649
35650
35651
35652
35653
35654
35655
35656
35657
35658
35659
35660
35661
35662
35663
35664
35665
35666
35667
35668
35669
35670
35671
35672
35673
35674
35675
35676
35677
35678
35679
35680
35681
35682
35683
35684
35685
35686
35687
35688
35689
35690
35691
35692
35693
35694
35695
35696
35697
35698
35699
35700
35701
35702
35703
35704
35705
35706
35707
35708
35709
35710
35711
35712
35713
35714
35715
35716
35717
35718
35719
35720
35721
35722
35723
35724
35725
35726
35727
35728
35729
35730
35731
35732
35733
35734
35735
35736
35737
35738
35739
35740
35741
35742
35743
35744
35745
35746
35747
35748
35749
35750
35751
35752
35753
35754
35755
35756
35757
35758
35759
35760
35761
35762
35763
35764
35765
35766
35767
35768
35769
35770
35771
35772
35773
35774
35775
35776
35777
35778
35779
35780
35781
35782
35783
35784
35785
35786
35787
35788
35789
35790
35791
35792
35793
35794
35795
35796
35797
35798
35799
35800
35801
35802
35803
35804
35805
35806
35807
35808
35809
35810
35811
35812
35813
35814
35815
35816
35817
35818
35819
35820
35821
35822
35823
35824
35825
35826
35827
35828
35829
35830
35831
35832
35833
35834
35835
35836
35837
35838
35839
35840
35841
35842
35843
35844
35845
35846
35847
35848
35849
35850
35851
35852
35853
35854
35855
35856
35857
35858
35859
35860
35861
35862
35863
35864
35865
35866
35867
35868
35869
35870
35871
35872
35873
35874
35875
35876
35877
35878
35879
35880
35881
35882
35883
35884
35885
35886
35887
35888
35889
35890
35891
35892
35893
35894
35895
35896
35897
35898
35899
35900
35901
35902
35903
35904
35905
35906
35907
35908
35909
35910
35911
35912
35913
35914
35915
35916
35917
35918
35919
35920
35921
35922
35923
35924
35925
35926
35927
35928
35929
35930
35931
35932
35933
35934
35935
35936
35937
35938
35939
35940
35941
35942
35943
35944
35945
35946
35947
35948
35949
35950
35951
35952
35953
35954
35955
35956
35957
35958
35959
35960
35961
35962
35963
35964
35965
35966
35967
35968
35969
35970
35971
35972
35973
35974
35975
35976
35977
35978
35979
35980
35981
35982
35983
35984
35985
35986
35987
35988
35989
35990
35991
35992
35993
35994
35995
35996
35997
35998
35999
36000
36001
36002
36003
36004
36005
36006
36007
36008
36009
36010
36011
36012
36013
36014
36015
36016
36017
36018
36019
36020
36021
36022
36023
36024
36025
36026
36027
36028
36029
36030
36031
36032
36033
36034
36035
36036
36037
36038
36039
36040
36041
36042
36043
36044
36045
36046
36047
36048
36049
36050
36051
36052
36053
36054
36055
36056
36057
36058
36059
36060
36061
36062
36063
36064
36065
36066
36067
36068
36069
36070
36071
36072
36073
36074
36075
36076
36077
36078
36079
36080
36081
36082
36083
36084
36085
36086
36087
36088
36089
36090
36091
36092
36093
36094
36095
36096
36097
36098
36099
36100
36101
36102
36103
36104
36105
36106
36107
36108
36109
36110
36111
36112
36113
36114
36115
36116
36117
36118
36119
36120
36121
36122
36123
36124
36125
36126
36127
36128
36129
36130
36131
36132
36133
36134
36135
36136
36137
36138
36139
36140
36141
36142
36143
36144
36145
36146
36147
36148
36149
36150
36151
36152
36153
36154
36155
36156
36157
36158
36159
36160
36161
36162
36163
36164
36165
36166
36167
36168
36169
36170
36171
36172
36173
36174
36175
36176
36177
36178
36179
36180
36181
36182
36183
36184
36185
36186
36187
36188
36189
36190
36191
36192
36193
36194
36195
36196
36197
36198
36199
36200
36201
36202
36203
36204
36205
36206
36207
36208
36209
36210
36211
36212
36213
36214
36215
36216
36217
36218
36219
36220
36221
36222
36223
36224
36225
36226
36227
36228
36229
36230
36231
36232
36233
36234
36235
36236
36237
36238
36239
36240
36241
36242
36243
36244
36245
36246
36247
36248
36249
36250
36251
36252
36253
36254
36255
36256
36257
36258
36259
36260
36261
36262
36263
36264
36265
36266
36267
36268
36269
36270
36271
36272
36273
36274
36275
36276
36277
36278
36279
36280
36281
36282
36283
36284
36285
36286
36287
36288
36289
36290
36291
36292
36293
36294
36295
36296
36297
36298
36299
36300
36301
36302
36303
36304
36305
36306
36307
36308
36309
36310
36311
36312
36313
36314
36315
36316
36317
36318
36319
36320
36321
36322
36323
36324
36325
36326
36327
36328
36329
36330
36331
36332
36333
36334
36335
36336
36337
36338
36339
36340
36341
36342
36343
36344
36345
36346
36347
36348
36349
36350
36351
36352
36353
36354
36355
36356
36357
36358
36359
36360
36361
36362
36363
36364
36365
36366
36367
36368
36369
36370
36371
36372
36373
36374
36375
36376
36377
36378
36379
36380
36381
36382
36383
36384
36385
36386
36387
36388
36389
36390
36391
36392
36393
36394
36395
36396
36397
36398
36399
36400
36401
36402
36403
36404
36405
36406
36407
36408
36409
36410
36411
36412
36413
36414
36415
36416
36417
36418
36419
36420
36421
36422
36423
36424
36425
36426
36427
36428
36429
36430
36431
36432
36433
36434
36435
36436
36437
36438
36439
36440
36441
36442
36443
36444
36445
36446
36447
36448
36449
36450
36451
36452
36453
36454
36455
36456
36457
36458
36459
36460
36461
36462
36463
36464
36465
36466
36467
36468
36469
36470
36471
36472
36473
36474
36475
36476
36477
36478
36479
36480
36481
36482
36483
36484
36485
36486
36487
36488
36489
36490
36491
36492
36493
36494
36495
36496
36497
36498
36499
36500
36501
36502
36503
36504
36505
36506
36507
36508
36509
36510
36511
36512
36513
36514
36515
36516
36517
36518
36519
36520
36521
36522
36523
36524
36525
36526
36527
36528
36529
36530
36531
36532
36533
36534
36535
36536
36537
36538
36539
36540
36541
36542
36543
36544
36545
36546
36547
36548
36549
36550
36551
36552
36553
36554
36555
36556
36557
36558
36559
36560
36561
36562
36563
36564
36565
36566
36567
36568
36569
36570
36571
36572
36573
36574
36575
36576
36577
36578
36579
36580
36581
36582
36583
36584
36585
36586
36587
36588
36589
36590
36591
36592
36593
36594
36595
36596
36597
36598
36599
36600
36601
36602
36603
36604
36605
36606
36607
36608
36609
36610
36611
36612
36613
36614
36615
36616
36617
36618
36619
36620
36621
36622
36623
36624
36625
36626
36627
36628
36629
36630
36631
36632
36633
36634
36635
36636
36637
36638
36639
36640
36641
36642
36643
36644
36645
36646
36647
36648
36649
36650
36651
36652
36653
36654
36655
36656
36657
36658
36659
36660
36661
36662
36663
36664
36665
36666
36667
36668
36669
36670
36671
36672
36673
36674
36675
36676
36677
36678
36679
36680
36681
36682
36683
36684
36685
36686
36687
36688
36689
36690
36691
36692
36693
36694
36695
36696
36697
36698
36699
36700
36701
36702
36703
36704
36705
36706
36707
36708
36709
36710
36711
36712
36713
36714
36715
36716
36717
36718
36719
36720
36721
36722
36723
36724
36725
36726
36727
36728
36729
36730
36731
36732
36733
36734
36735
36736
36737
36738
36739
36740
36741
36742
36743
36744
36745
36746
36747
36748
36749
36750
36751
36752
36753
36754
36755
36756
36757
36758
36759
36760
36761
36762
36763
36764
36765
36766
36767
36768
36769
36770
36771
36772
36773
36774
36775
36776
36777
36778
36779
36780
36781
36782
36783
36784
36785
36786
36787
36788
36789
36790
36791
36792
36793
36794
36795
36796
36797
36798
36799
36800
36801
36802
36803
36804
36805
36806
36807
36808
36809
36810
36811
36812
36813
36814
36815
36816
36817
36818
36819
36820
36821
36822
36823
36824
36825
36826
36827
36828
36829
36830
36831
36832
36833
36834
36835
36836
36837
36838
36839
36840
36841
36842
36843
36844
36845
36846
36847
36848
36849
36850
36851
36852
36853
36854
36855
36856
36857
36858
36859
36860
36861
36862
36863
36864
36865
36866
36867
36868
36869
36870
36871
36872
36873
36874
36875
36876
36877
36878
36879
36880
36881
36882
36883
36884
36885
36886
36887
36888
36889
36890
36891
36892
36893
36894
36895
36896
36897
36898
36899
36900
36901
36902
36903
36904
36905
36906
36907
36908
36909
36910
36911
36912
36913
36914
36915
36916
36917
36918
36919
36920
36921
36922
36923
36924
36925
36926
36927
36928
36929
36930
36931
36932
36933
36934
36935
36936
36937
36938
36939
36940
36941
36942
36943
36944
36945
36946
36947
36948
36949
36950
36951
36952
36953
36954
36955
36956
36957
36958
36959
36960
36961
36962
36963
36964
36965
36966
36967
36968
36969
36970
36971
36972
36973
36974
36975
36976
36977
36978
36979
36980
36981
36982
36983
36984
36985
36986
36987
36988
36989
36990
36991
36992
36993
36994
36995
36996
36997
36998
36999
37000
37001
37002
37003
37004
37005
37006
37007
37008
37009
37010
37011
37012
37013
37014
37015
37016
37017
37018
37019
37020
37021
37022
37023
37024
37025
37026
37027
37028
37029
37030
37031
37032
37033
37034
37035
37036
37037
37038
37039
37040
37041
37042
37043
37044
37045
37046
37047
37048
37049
37050
37051
37052
37053
37054
37055
37056
37057
37058
37059
37060
37061
37062
37063
37064
37065
37066
37067
37068
37069
37070
37071
37072
37073
37074
37075
37076
37077
37078
37079
37080
37081
37082
37083
37084
37085
37086
37087
37088
37089
37090
37091
37092
37093
37094
37095
37096
37097
37098
37099
37100
37101
37102
37103
37104
37105
37106
37107
37108
37109
37110
37111
37112
37113
37114
37115
37116
37117
37118
37119
37120
37121
37122
37123
37124
37125
37126
37127
37128
37129
37130
37131
37132
37133
37134
37135
37136
37137
37138
37139
37140
37141
37142
37143
37144
37145
37146
37147
37148
37149
37150
37151
37152
37153
37154
37155
37156
37157
37158
37159
37160
37161
37162
37163
37164
37165
37166
37167
37168
37169
37170
37171
37172
37173
37174
37175
37176
37177
37178
37179
37180
37181
37182
37183
37184
37185
37186
37187
37188
37189
37190
37191
37192
37193
37194
37195
37196
37197
37198
37199
37200
37201
37202
37203
37204
37205
37206
37207
37208
37209
37210
37211
37212
37213
37214
37215
37216
37217
37218
37219
37220
37221
37222
37223
37224
37225
37226
37227
37228
37229
37230
37231
37232
37233
37234
37235
37236
37237
37238
37239
37240
37241
37242
37243
37244
37245
37246
37247
37248
37249
37250
37251
37252
37253
37254
37255
37256
37257
37258
37259
37260
37261
37262
37263
37264
37265
37266
37267
37268
37269
37270
37271
37272
37273
37274
37275
37276
37277
37278
37279
37280
37281
37282
37283
37284
37285
37286
37287
37288
37289
37290
37291
37292
37293
37294
37295
37296
37297
37298
37299
37300
37301
37302
37303
37304
37305
37306
37307
37308
37309
37310
37311
37312
37313
37314
37315
37316
37317
37318
37319
37320
37321
37322
37323
37324
37325
37326
37327
37328
37329
37330
37331
37332
37333
37334
37335
37336
37337
37338
37339
37340
37341
37342
37343
37344
37345
37346
37347
37348
37349
37350
37351
37352
37353
37354
37355
37356
37357
37358
37359
37360
37361
37362
37363
37364
37365
37366
37367
37368
37369
37370
37371
37372
37373
37374
37375
37376
37377
37378
37379
37380
37381
37382
37383
37384
37385
37386
37387
37388
37389
37390
37391
37392
37393
37394
37395
37396
37397
37398
37399
37400
37401
37402
37403
37404
37405
37406
37407
37408
37409
37410
37411
37412
37413
37414
37415
37416
37417
37418
37419
37420
37421
37422
37423
37424
37425
37426
37427
37428
37429
37430
37431
37432
37433
37434
37435
37436
37437
37438
37439
37440
37441
37442
37443
37444
37445
37446
37447
37448
37449
37450
37451
37452
37453
37454
37455
37456
37457
37458
37459
37460
37461
37462
37463
37464
37465
37466
37467
37468
37469
37470
37471
37472
37473
37474
37475
37476
37477
37478
37479
37480
37481
37482
37483
37484
37485
37486
37487
37488
37489
37490
37491
37492
37493
37494
37495
37496
37497
37498
37499
37500
37501
37502
37503
37504
37505
37506
37507
37508
37509
37510
37511
37512
37513
37514
37515
37516
37517
37518
37519
37520
37521
37522
37523
37524
37525
37526
37527
37528
37529
37530
37531
37532
37533
37534
37535
37536
37537
37538
37539
37540
37541
37542
37543
37544
37545
37546
37547
37548
37549
37550
37551
37552
37553
37554
37555
37556
37557
37558
37559
37560
37561
37562
37563
37564
37565
37566
37567
37568
37569
37570
37571
37572
37573
37574
37575
37576
37577
37578
37579
37580
37581
37582
37583
37584
37585
37586
37587
37588
37589
37590
37591
37592
37593
37594
37595
37596
37597
37598
37599
37600
37601
37602
37603
37604
37605
37606
37607
37608
37609
37610
37611
37612
37613
37614
37615
37616
37617
37618
37619
37620
37621
37622
37623
37624
37625
37626
37627
37628
37629
37630
37631
37632
37633
37634
37635
37636
37637
37638
37639
37640
37641
37642
37643
37644
37645
37646
37647
37648
37649
37650
37651
37652
37653
37654
37655
37656
37657
37658
37659
37660
37661
37662
37663
37664
37665
37666
37667
37668
37669
37670
37671
37672
37673
37674
37675
37676
37677
37678
37679
37680
37681
37682
37683
37684
37685
37686
37687
37688
37689
37690
37691
37692
37693
37694
37695
37696
37697
37698
37699
37700
37701
37702
37703
37704
37705
37706
37707
37708
37709
37710
37711
37712
37713
37714
37715
37716
37717
37718
37719
37720
37721
37722
37723
37724
37725
37726
37727
37728
37729
37730
37731
37732
37733
37734
37735
37736
37737
37738
37739
37740
37741
37742
37743
37744
37745
37746
37747
37748
37749
37750
37751
37752
37753
37754
37755
37756
37757
37758
37759
37760
37761
37762
37763
37764
37765
37766
37767
37768
37769
37770
37771
37772
37773
37774
37775
37776
37777
37778
37779
37780
37781
37782
37783
37784
37785
37786
37787
37788
37789
37790
37791
37792
37793
37794
37795
37796
37797
37798
37799
37800
37801
37802
37803
37804
37805
37806
37807
37808
37809
37810
37811
37812
37813
37814
37815
37816
37817
37818
37819
37820
37821
37822
37823
37824
37825
37826
37827
37828
37829
37830
37831
37832
37833
37834
37835
37836
37837
37838
37839
37840
37841
37842
37843
37844
37845
37846
37847
37848
37849
37850
37851
37852
37853
37854
37855
37856
37857
37858
37859
37860
37861
37862
37863
37864
37865
37866
37867
37868
37869
37870
37871
37872
37873
37874
37875
37876
37877
37878
37879
37880
37881
37882
37883
37884
37885
37886
37887
37888
37889
37890
37891
37892
37893
37894
37895
37896
37897
37898
37899
37900
37901
37902
37903
37904
37905
37906
37907
37908
37909
37910
37911
37912
37913
37914
37915
37916
37917
37918
37919
37920
37921
37922
37923
37924
37925
37926
37927
37928
37929
37930
37931
37932
37933
37934
37935
37936
37937
37938
37939
37940
37941
37942
37943
37944
37945
37946
37947
37948
37949
37950
37951
37952
37953
37954
37955
37956
37957
37958
37959
37960
37961
37962
37963
37964
37965
37966
37967
37968
37969
37970
37971
37972
37973
37974
37975
37976
37977
37978
37979
37980
37981
37982
37983
37984
37985
37986
37987
37988
37989
37990
37991
37992
37993
37994
37995
37996
37997
37998
37999
38000
38001
38002
38003
38004
38005
38006
38007
38008
38009
38010
38011
38012
38013
38014
38015
38016
38017
38018
38019
38020
38021
38022
38023
38024
38025
38026
38027
38028
38029
38030
38031
38032
38033
38034
38035
38036
38037
38038
38039
38040
38041
38042
38043
38044
38045
38046
38047
38048
38049
38050
38051
38052
38053
38054
38055
38056
38057
38058
38059
38060
38061
38062
38063
38064
38065
38066
38067
38068
38069
38070
38071
38072
38073
38074
38075
38076
38077
38078
38079
38080
38081
38082
38083
38084
38085
38086
38087
38088
38089
38090
38091
38092
38093
38094
38095
38096
38097
38098
38099
38100
38101
38102
38103
38104
38105
38106
38107
38108
38109
38110
38111
38112
38113
38114
38115
38116
38117
38118
38119
38120
38121
38122
38123
38124
38125
38126
38127
38128
38129
38130
38131
38132
38133
38134
38135
38136
38137
38138
38139
38140
38141
38142
38143
38144
38145
38146
38147
38148
38149
38150
38151
38152
38153
38154
38155
38156
38157
38158
38159
38160
38161
38162
38163
38164
38165
38166
38167
38168
38169
38170
38171
38172
38173
38174
38175
38176
38177
38178
38179
38180
38181
38182
38183
38184
38185
38186
38187
38188
38189
38190
38191
38192
38193
38194
38195
38196
38197
38198
38199
38200
38201
38202
38203
38204
38205
38206
38207
38208
38209
38210
38211
38212
38213
38214
38215
38216
38217
38218
38219
38220
38221
38222
38223
38224
38225
38226
38227
38228
38229
38230
38231
38232
38233
38234
38235
38236
38237
38238
38239
38240
38241
38242
38243
38244
38245
38246
38247
38248
38249
38250
38251
38252
38253
38254
38255
38256
38257
38258
38259
38260
38261
38262
38263
38264
38265
38266
38267
38268
38269
38270
38271
38272
38273
38274
38275
38276
38277
38278
38279
38280
38281
38282
38283
38284
38285
38286
38287
38288
38289
38290
38291
38292
38293
38294
38295
38296
38297
38298
38299
38300
38301
38302
38303
38304
38305
38306
38307
38308
38309
38310
38311
38312
38313
38314
38315
38316
38317
38318
38319
38320
38321
38322
38323
38324
38325
38326
38327
38328
38329
38330
38331
38332
38333
38334
38335
38336
38337
38338
38339
38340
38341
38342
38343
38344
38345
38346
38347
38348
38349
38350
38351
38352
38353
38354
38355
38356
38357
38358
38359
38360
38361
38362
38363
38364
38365
38366
38367
38368
38369
38370
38371
38372
38373
38374
38375
38376
38377
38378
38379
38380
38381
38382
38383
38384
38385
38386
38387
38388
38389
38390
38391
38392
38393
38394
38395
38396
38397
38398
38399
38400
38401
38402
38403
38404
38405
38406
38407
38408
38409
38410
38411
38412
38413
38414
38415
38416
38417
38418
38419
38420
38421
38422
38423
38424
38425
38426
38427
38428
38429
38430
38431
38432
38433
38434
38435
38436
38437
38438
38439
38440
38441
38442
38443
38444
38445
38446
38447
38448
38449
38450
38451
38452
38453
38454
38455
38456
38457
38458
38459
38460
38461
38462
38463
38464
38465
38466
38467
38468
38469
38470
38471
38472
38473
38474
38475
38476
38477
38478
38479
38480
38481
38482
38483
38484
38485
38486
38487
38488
38489
38490
38491
38492
38493
38494
38495
38496
38497
38498
38499
38500
38501
38502
38503
38504
38505
38506
38507
38508
38509
38510
38511
38512
38513
38514
38515
38516
38517
38518
38519
38520
38521
38522
38523
38524
38525
38526
38527
38528
38529
38530
38531
38532
38533
38534
38535
38536
38537
38538
38539
38540
38541
38542
38543
38544
38545
38546
38547
38548
38549
38550
38551
38552
38553
38554
38555
38556
38557
38558
38559
38560
38561
38562
38563
38564
38565
38566
38567
38568
38569
38570
38571
38572
38573
38574
38575
38576
38577
38578
38579
38580
38581
38582
38583
38584
38585
38586
38587
38588
38589
38590
38591
38592
38593
38594
38595
38596
38597
38598
38599
38600
38601
38602
38603
38604
38605
38606
38607
38608
38609
38610
38611
38612
38613
38614
38615
38616
38617
38618
38619
38620
38621
38622
38623
38624
38625
38626
38627
38628
38629
38630
38631
38632
38633
38634
38635
38636
38637
38638
38639
38640
38641
38642
38643
38644
38645
38646
38647
38648
38649
38650
38651
38652
38653
38654
38655
38656
38657
38658
38659
38660
38661
38662
38663
38664
38665
38666
38667
38668
38669
38670
38671
38672
38673
38674
38675
38676
38677
38678
38679
38680
38681
38682
38683
38684
38685
38686
38687
38688
38689
38690
38691
38692
38693
38694
38695
38696
38697
38698
38699
38700
38701
38702
38703
38704
38705
38706
38707
38708
38709
38710
38711
38712
38713
38714
38715
38716
38717
38718
38719
38720
38721
38722
38723
38724
38725
38726
38727
38728
38729
38730
38731
38732
38733
38734
38735
38736
38737
38738
38739
38740
38741
38742
38743
38744
38745
38746
38747
38748
38749
38750
38751
38752
38753
38754
38755
38756
38757
38758
38759
38760
38761
38762
38763
38764
38765
38766
38767
38768
38769
38770
38771
38772
38773
38774
38775
38776
38777
38778
38779
38780
38781
38782
38783
38784
38785
38786
38787
38788
38789
38790
38791
38792
38793
38794
38795
38796
38797
38798
38799
38800
38801
38802
38803
38804
38805
38806
38807
38808
38809
38810
38811
38812
38813
38814
38815
38816
38817
38818
38819
38820
38821
38822
38823
38824
38825
38826
38827
38828
38829
38830
38831
38832
38833
38834
38835
38836
38837
38838
38839
38840
38841
38842
38843
38844
38845
38846
38847
38848
38849
38850
38851
38852
38853
38854
38855
38856
38857
38858
38859
38860
38861
38862
38863
38864
38865
38866
38867
38868
38869
38870
38871
38872
38873
38874
38875
38876
38877
38878
38879
38880
38881
38882
38883
38884
38885
38886
38887
38888
38889
38890
38891
38892
38893
38894
38895
38896
38897
38898
38899
38900
38901
38902
38903
38904
38905
38906
38907
38908
38909
38910
38911
38912
38913
38914
38915
38916
38917
38918
38919
38920
38921
38922
38923
38924
38925
38926
38927
38928
38929
38930
38931
38932
38933
38934
38935
38936
38937
38938
38939
38940
38941
38942
38943
38944
38945
38946
38947
38948
38949
38950
38951
38952
38953
38954
38955
38956
38957
38958
38959
38960
38961
38962
38963
38964
38965
38966
38967
38968
38969
38970
38971
38972
38973
38974
38975
38976
38977
38978
38979
38980
38981
38982
38983
38984
38985
38986
38987
38988
38989
38990
38991
38992
38993
38994
38995
38996
38997
38998
38999
39000
39001
39002
39003
39004
39005
39006
39007
39008
39009
39010
39011
39012
39013
39014
39015
39016
39017
39018
39019
39020
39021
39022
39023
39024
39025
39026
39027
39028
39029
39030
39031
39032
39033
39034
39035
39036
39037
39038
39039
39040
39041
39042
39043
39044
39045
39046
39047
39048
39049
39050
39051
39052
39053
39054
39055
39056
39057
39058
39059
39060
39061
39062
39063
39064
39065
39066
39067
39068
39069
39070
39071
39072
39073
39074
39075
39076
39077
39078
39079
39080
39081
39082
39083
39084
39085
39086
39087
39088
39089
39090
39091
39092
39093
39094
39095
39096
39097
39098
39099
39100
39101
39102
39103
39104
39105
39106
39107
39108
39109
39110
39111
39112
39113
39114
39115
39116
39117
39118
39119
39120
39121
39122
39123
39124
39125
39126
39127
39128
39129
39130
39131
39132
39133
39134
39135
39136
39137
39138
39139
39140
39141
39142
39143
39144
39145
39146
39147
39148
39149
39150
39151
39152
39153
39154
39155
39156
39157
39158
39159
39160
39161
39162
39163
39164
39165
39166
39167
39168
39169
39170
39171
39172
39173
39174
39175
39176
39177
39178
39179
39180
39181
39182
39183
39184
39185
39186
39187
39188
39189
39190
39191
39192
39193
39194
39195
39196
39197
39198
39199
39200
39201
39202
39203
39204
39205
39206
39207
39208
39209
39210
39211
39212
39213
39214
39215
39216
39217
39218
39219
39220
39221
39222
39223
39224
39225
39226
39227
39228
39229
39230
39231
39232
39233
39234
39235
39236
39237
39238
39239
39240
39241
39242
39243
39244
39245
39246
39247
39248
39249
39250
39251
39252
39253
39254
39255
39256
39257
39258
39259
39260
39261
39262
39263
39264
39265
39266
39267
39268
39269
39270
39271
39272
39273
39274
39275
39276
39277
39278
39279
39280
39281
39282
39283
39284
39285
39286
39287
39288
39289
39290
39291
39292
39293
39294
39295
39296
39297
39298
39299
39300
39301
39302
39303
39304
39305
39306
39307
39308
39309
39310
39311
39312
39313
39314
39315
39316
39317
39318
39319
39320
39321
39322
39323
39324
39325
39326
39327
39328
39329
39330
39331
39332
39333
39334
39335
39336
39337
39338
39339
39340
39341
39342
39343
39344
39345
39346
39347
39348
39349
39350
39351
39352
39353
39354
39355
39356
39357
39358
39359
39360
39361
39362
39363
39364
39365
39366
39367
39368
39369
39370
39371
39372
39373
39374
39375
39376
39377
39378
39379
39380
39381
39382
39383
39384
39385
39386
39387
39388
39389
39390
39391
39392
39393
39394
39395
39396
39397
39398
39399
39400
39401
39402
39403
39404
39405
39406
39407
39408
39409
39410
39411
39412
39413
39414
39415
39416
39417
39418
39419
39420
39421
39422
39423
39424
39425
39426
39427
39428
39429
39430
39431
39432
39433
39434
39435
39436
39437
39438
39439
39440
39441
39442
39443
39444
39445
39446
39447
39448
39449
39450
39451
39452
39453
39454
39455
39456
39457
39458
39459
39460
39461
39462
39463
39464
39465
39466
39467
39468
39469
39470
39471
39472
39473
39474
39475
39476
39477
39478
39479
39480
39481
39482
39483
39484
39485
39486
39487
39488
39489
39490
39491
39492
39493
39494
39495
39496
39497
39498
39499
39500
39501
39502
39503
39504
39505
39506
39507
39508
39509
39510
39511
39512
39513
39514
39515
39516
39517
39518
39519
39520
39521
39522
39523
39524
39525
39526
39527
39528
39529
39530
39531
39532
39533
39534
39535
39536
39537
39538
39539
39540
39541
39542
39543
39544
39545
39546
39547
39548
39549
39550
39551
39552
39553
39554
39555
39556
39557
39558
39559
39560
39561
39562
39563
39564
39565
39566
39567
39568
39569
39570
39571
39572
39573
39574
39575
39576
39577
39578
39579
39580
39581
39582
39583
39584
39585
39586
39587
39588
39589
39590
39591
39592
39593
39594
39595
39596
39597
39598
39599
39600
39601
39602
39603
39604
39605
39606
39607
39608
39609
39610
39611
39612
39613
39614
39615
39616
39617
39618
39619
39620
39621
39622
39623
39624
39625
39626
39627
39628
39629
39630
39631
39632
39633
39634
39635
39636
39637
39638
39639
39640
39641
39642
39643
39644
39645
39646
39647
39648
39649
39650
39651
39652
39653
39654
39655
39656
39657
39658
39659
39660
39661
39662
39663
39664
39665
39666
39667
39668
39669
39670
39671
39672
39673
39674
39675
39676
39677
39678
39679
39680
39681
39682
39683
39684
39685
39686
39687
39688
39689
39690
39691
39692
39693
39694
39695
39696
39697
39698
39699
39700
39701
39702
39703
39704
39705
39706
39707
39708
39709
39710
39711
39712
39713
39714
39715
39716
39717
39718
39719
39720
39721
39722
39723
39724
39725
39726
39727
39728
39729
39730
39731
39732
39733
39734
39735
39736
39737
39738
39739
39740
39741
39742
39743
39744
39745
39746
39747
39748
39749
39750
39751
39752
39753
39754
39755
39756
39757
39758
39759
39760
39761
39762
39763
39764
39765
39766
39767
39768
39769
39770
39771
39772
39773
39774
39775
39776
39777
39778
39779
39780
39781
39782
39783
39784
39785
39786
39787
39788
39789
39790
39791
39792
39793
39794
39795
39796
39797
39798
39799
39800
39801
39802
39803
39804
39805
39806
39807
39808
39809
39810
39811
39812
39813
39814
39815
39816
39817
39818
39819
39820
39821
39822
39823
39824
39825
39826
39827
39828
39829
39830
39831
39832
39833
39834
39835
39836
39837
39838
39839
39840
39841
39842
39843
39844
39845
39846
39847
39848
39849
39850
39851
39852
39853
39854
39855
39856
39857
39858
39859
39860
39861
39862
39863
39864
39865
39866
39867
39868
39869
39870
39871
39872
39873
39874
39875
39876
39877
39878
39879
39880
39881
39882
39883
39884
39885
39886
39887
39888
39889
39890
39891
39892
39893
39894
39895
39896
39897
39898
39899
39900
39901
39902
39903
39904
39905
39906
39907
39908
39909
39910
39911
39912
39913
39914
39915
39916
39917
39918
39919
39920
39921
39922
39923
39924
39925
39926
39927
39928
39929
39930
39931
39932
39933
39934
39935
39936
39937
39938
39939
39940
39941
39942
39943
39944
39945
39946
39947
39948
39949
39950
39951
39952
39953
39954
39955
39956
39957
39958
39959
39960
39961
39962
39963
39964
39965
39966
39967
39968
39969
39970
39971
39972
39973
39974
39975
39976
39977
39978
39979
39980
39981
39982
39983
39984
39985
39986
39987
39988
39989
39990
39991
39992
39993
39994
39995
39996
39997
39998
39999
40000
40001
40002
40003
40004
40005
40006
40007
40008
40009
40010
40011
40012
40013
40014
40015
40016
40017
40018
40019
40020
40021
40022
40023
40024
40025
40026
40027
40028
40029
40030
40031
40032
40033
40034
40035
40036
40037
40038
40039
40040
40041
40042
40043
40044
40045
40046
40047
40048
40049
40050
40051
40052
40053
40054
40055
40056
40057
40058
40059
40060
40061
40062
40063
40064
40065
40066
40067
40068
40069
40070
40071
40072
40073
40074
40075
40076
40077
40078
40079
40080
40081
40082
40083
40084
40085
40086
40087
40088
40089
40090
40091
40092
40093
40094
40095
40096
40097
40098
40099
40100
40101
40102
40103
40104
40105
40106
40107
40108
40109
40110
40111
40112
40113
40114
40115
40116
40117
40118
40119
40120
40121
40122
40123
40124
40125
40126
40127
40128
40129
40130
40131
40132
40133
40134
40135
40136
40137
40138
40139
40140
40141
40142
40143
40144
40145
40146
40147
40148
40149
40150
40151
40152
40153
40154
40155
40156
40157
40158
40159
40160
40161
40162
40163
40164
40165
40166
40167
40168
40169
40170
40171
40172
40173
40174
40175
40176
40177
40178
40179
40180
40181
40182
40183
40184
40185
40186
40187
40188
40189
40190
40191
40192
40193
40194
40195
40196
40197
40198
40199
40200
40201
40202
40203
40204
40205
40206
40207
40208
40209
40210
40211
40212
40213
40214
40215
40216
40217
40218
40219
40220
40221
40222
40223
40224
40225
40226
40227
40228
40229
40230
40231
40232
40233
40234
40235
40236
40237
40238
40239
40240
40241
40242
40243
40244
40245
40246
40247
40248
40249
40250
40251
40252
40253
40254
40255
40256
40257
40258
40259
40260
40261
40262
40263
40264
40265
40266
40267
40268
40269
40270
40271
40272
40273
40274
40275
40276
40277
40278
40279
40280
40281
40282
40283
40284
40285
40286
40287
40288
40289
40290
40291
40292
40293
40294
40295
40296
40297
40298
40299
40300
40301
40302
40303
40304
40305
40306
40307
40308
40309
40310
40311
40312
40313
40314
40315
40316
40317
40318
40319
40320
40321
40322
40323
40324
40325
40326
40327
40328
40329
40330
40331
40332
40333
40334
40335
40336
40337
40338
40339
40340
40341
40342
40343
40344
40345
40346
40347
40348
40349
40350
40351
40352
40353
40354
40355
40356
40357
40358
40359
40360
40361
40362
40363
40364
40365
40366
40367
40368
40369
40370
40371
40372
40373
40374
40375
40376
40377
40378
40379
40380
40381
40382
40383
40384
40385
40386
40387
40388
40389
40390
40391
40392
40393
40394
40395
40396
40397
40398
40399
40400
40401
40402
40403
40404
40405
40406
40407
40408
40409
40410
40411
40412
40413
40414
40415
40416
40417
40418
40419
40420
40421
40422
40423
40424
40425
40426
40427
40428
40429
40430
40431
40432
40433
40434
40435
40436
40437
40438
40439
40440
40441
40442
40443
40444
40445
40446
40447
40448
40449
40450
40451
40452
40453
40454
40455
40456
40457
40458
40459
40460
40461
40462
40463
40464
40465
40466
40467
40468
40469
40470
40471
40472
40473
40474
40475
40476
40477
40478
40479
40480
40481
40482
40483
40484
40485
40486
40487
40488
40489
40490
40491
40492
40493
40494
40495
40496
40497
40498
40499
40500
40501
40502
40503
40504
40505
40506
40507
40508
40509
40510
40511
40512
40513
40514
40515
40516
40517
40518
40519
40520
40521
40522
40523
40524
40525
40526
40527
40528
40529
40530
40531
40532
40533
40534
40535
40536
40537
40538
40539
40540
40541
40542
40543
40544
40545
40546
40547
40548
40549
40550
40551
40552
40553
40554
40555
40556
40557
40558
40559
40560
40561
40562
40563
40564
40565
40566
40567
40568
40569
40570
40571
40572
40573
40574
40575
40576
40577
40578
40579
40580
40581
40582
40583
40584
40585
40586
40587
40588
40589
40590
40591
40592
40593
40594
40595
40596
40597
40598
40599
40600
40601
40602
40603
40604
40605
40606
40607
40608
40609
40610
40611
40612
40613
40614
40615
40616
40617
40618
40619
40620
40621
40622
40623
40624
40625
40626
40627
40628
40629
40630
40631
40632
40633
40634
40635
40636
40637
40638
40639
40640
40641
40642
40643
40644
40645
40646
40647
40648
40649
40650
40651
40652
40653
40654
40655
40656
40657
40658
40659
40660
40661
40662
40663
40664
40665
40666
40667
40668
40669
40670
40671
40672
40673
40674
40675
40676
40677
40678
40679
40680
40681
40682
40683
40684
40685
40686
40687
40688
40689
40690
40691
40692
40693
40694
40695
40696
40697
40698
40699
40700
40701
40702
40703
40704
40705
40706
40707
40708
40709
40710
40711
40712
40713
40714
40715
40716
40717
40718
40719
40720
40721
40722
40723
40724
40725
40726
40727
40728
40729
40730
40731
40732
40733
40734
40735
40736
40737
40738
40739
40740
40741
40742
40743
40744
40745
40746
40747
40748
40749
40750
40751
40752
40753
40754
40755
40756
40757
40758
40759
40760
40761
40762
40763
40764
40765
40766
40767
40768
40769
40770
40771
40772
40773
40774
40775
40776
40777
40778
40779
40780
40781
40782
40783
40784
40785
40786
40787
40788
40789
40790
40791
40792
40793
40794
40795
40796
40797
40798
40799
40800
40801
40802
40803
40804
40805
40806
40807
40808
40809
40810
40811
40812
40813
40814
40815
40816
40817
40818
40819
40820
40821
40822
40823
40824
40825
40826
40827
40828
40829
40830
40831
40832
40833
40834
40835
40836
40837
40838
40839
40840
40841
40842
40843
40844
40845
40846
40847
40848
40849
40850
40851
40852
40853
40854
40855
40856
40857
40858
40859
40860
40861
40862
40863
40864
40865
40866
40867
40868
40869
40870
40871
40872
40873
40874
40875
40876
40877
40878
40879
40880
40881
40882
40883
40884
40885
40886
40887
40888
40889
40890
40891
40892
40893
40894
40895
40896
40897
40898
40899
40900
40901
40902
40903
40904
40905
40906
40907
40908
40909
40910
40911
40912
40913
40914
40915
40916
40917
40918
40919
40920
40921
40922
40923
40924
40925
40926
40927
40928
40929
40930
40931
40932
40933
40934
40935
40936
40937
40938
40939
40940
40941
40942
40943
40944
40945
40946
40947
40948
40949
40950
40951
40952
40953
40954
40955
40956
40957
40958
40959
40960
40961
40962
40963
40964
40965
40966
40967
40968
40969
40970
40971
40972
40973
40974
40975
40976
40977
40978
40979
40980
40981
40982
40983
40984
40985
40986
40987
40988
40989
40990
40991
40992
40993
40994
40995
40996
40997
40998
40999
41000
41001
41002
41003
41004
41005
41006
41007
41008
41009
41010
41011
41012
41013
41014
41015
41016
41017
41018
41019
41020
41021
41022
41023
41024
41025
41026
41027
41028
41029
41030
41031
41032
41033
41034
41035
41036
41037
41038
41039
41040
41041
41042
41043
41044
41045
41046
41047
41048
41049
41050
41051
41052
41053
41054
41055
41056
41057
41058
41059
41060
41061
41062
41063
41064
41065
41066
41067
41068
41069
41070
41071
41072
41073
41074
41075
41076
41077
41078
41079
41080
41081
41082
41083
41084
41085
41086
41087
41088
41089
41090
41091
41092
41093
41094
41095
41096
41097
41098
41099
41100
41101
41102
41103
41104
41105
41106
41107
41108
41109
41110
41111
41112
41113
41114
41115
41116
41117
41118
41119
41120
41121
41122
41123
41124
41125
41126
41127
41128
41129
41130
41131
41132
41133
41134
41135
41136
41137
41138
41139
41140
41141
41142
41143
41144
41145
41146
41147
41148
41149
41150
41151
41152
41153
41154
41155
41156
41157
41158
41159
41160
41161
41162
41163
41164
41165
41166
41167
41168
41169
41170
41171
41172
41173
41174
41175
41176
41177
41178
41179
41180
41181
41182
41183
41184
41185
41186
41187
41188
41189
41190
41191
41192
41193
41194
41195
41196
41197
41198
41199
41200
41201
41202
41203
41204
41205
41206
41207
41208
41209
41210
41211
41212
41213
41214
41215
41216
41217
41218
41219
41220
41221
41222
41223
41224
41225
41226
41227
41228
41229
41230
41231
41232
41233
41234
41235
41236
41237
41238
41239
41240
41241
41242
41243
41244
41245
41246
41247
41248
41249
41250
41251
41252
41253
41254
41255
41256
41257
41258
41259
41260
41261
41262
41263
41264
41265
41266
41267
41268
41269
41270
41271
41272
41273
41274
41275
41276
41277
41278
41279
41280
41281
41282
41283
41284
41285
41286
41287
41288
41289
41290
41291
41292
41293
41294
41295
41296
41297
41298
41299
41300
41301
41302
41303
41304
41305
41306
41307
41308
41309
41310
41311
41312
41313
41314
41315
41316
41317
41318
41319
41320
41321
41322
41323
41324
41325
41326
41327
41328
41329
41330
41331
41332
41333
41334
41335
41336
41337
41338
41339
41340
41341
41342
41343
41344
41345
41346
41347
41348
41349
41350
41351
41352
41353
41354
41355
41356
41357
41358
41359
41360
41361
41362
41363
41364
41365
41366
41367
41368
41369
41370
41371
41372
41373
41374
41375
41376
41377
41378
41379
41380
41381
41382
41383
41384
41385
41386
41387
41388
41389
41390
41391
41392
41393
41394
41395
41396
41397
41398
41399
41400
41401
41402
41403
41404
41405
41406
41407
41408
41409
41410
41411
41412
41413
41414
41415
41416
41417
41418
41419
41420
41421
41422
41423
41424
41425
41426
41427
41428
41429
41430
41431
41432
41433
41434
41435
41436
41437
41438
41439
41440
41441
41442
41443
41444
41445
41446
41447
41448
41449
41450
41451
41452
41453
41454
41455
41456
41457
41458
41459
41460
41461
41462
41463
41464
41465
41466
41467
41468
41469
41470
41471
41472
41473
41474
41475
41476
41477
41478
41479
41480
41481
41482
41483
41484
41485
41486
41487
41488
41489
41490
41491
41492
41493
41494
41495
41496
41497
41498
41499
41500
41501
41502
41503
41504
41505
41506
41507
41508
41509
41510
41511
41512
41513
41514
41515
41516
41517
41518
41519
41520
41521
41522
41523
41524
41525
41526
41527
41528
41529
41530
41531
41532
41533
41534
41535
41536
41537
41538
41539
41540
41541
41542
41543
41544
41545
41546
41547
41548
41549
41550
41551
41552
41553
41554
41555
41556
41557
41558
41559
41560
41561
41562
41563
41564
41565
41566
41567
41568
41569
41570
41571
41572
41573
41574
41575
41576
41577
41578
41579
41580
41581
41582
41583
41584
41585
41586
41587
41588
41589
41590
41591
41592
41593
41594
41595
41596
41597
41598
41599
41600
41601
41602
41603
41604
41605
41606
41607
41608
41609
41610
41611
41612
41613
41614
41615
41616
41617
41618
41619
41620
41621
41622
41623
41624
41625
41626
41627
41628
41629
41630
41631
41632
41633
41634
41635
41636
41637
41638
41639
41640
41641
41642
41643
41644
41645
41646
41647
41648
41649
41650
41651
41652
41653
41654
41655
41656
41657
41658
41659
41660
41661
41662
41663
41664
41665
41666
41667
41668
41669
41670
41671
41672
41673
41674
41675
41676
41677
41678
41679
41680
41681
41682
41683
41684
41685
41686
41687
41688
41689
41690
41691
41692
41693
41694
41695
41696
41697
41698
41699
41700
41701
41702
41703
41704
41705
41706
41707
41708
41709
41710
41711
41712
41713
41714
41715
41716
41717
41718
41719
41720
41721
41722
41723
41724
41725
41726
41727
41728
41729
41730
41731
41732
41733
41734
41735
41736
41737
41738
41739
41740
41741
41742
41743
41744
41745
41746
41747
41748
41749
41750
41751
41752
41753
41754
41755
41756
41757
41758
41759
41760
41761
41762
41763
41764
41765
41766
41767
41768
41769
41770
41771
41772
41773
41774
41775
41776
41777
41778
41779
41780
41781
41782
41783
41784
41785
41786
41787
41788
41789
41790
41791
41792
41793
41794
41795
41796
41797
41798
41799
41800
41801
41802
41803
41804
41805
41806
41807
41808
41809
41810
41811
41812
41813
41814
41815
41816
41817
41818
41819
41820
41821
41822
41823
41824
41825
41826
41827
41828
41829
41830
41831
41832
41833
41834
41835
41836
41837
41838
41839
41840
41841
41842
41843
41844
41845
41846
41847
41848
41849
41850
41851
41852
41853
41854
41855
41856
41857
41858
41859
41860
41861
41862
41863
41864
41865
41866
41867
41868
41869
41870
41871
41872
41873
41874
41875
41876
41877
41878
41879
41880
41881
41882
41883
41884
41885
41886
41887
41888
41889
41890
41891
41892
41893
41894
41895
41896
41897
41898
41899
41900
41901
41902
41903
41904
41905
41906
41907
41908
41909
41910
41911
41912
41913
41914
41915
41916
41917
41918
41919
41920
41921
41922
41923
41924
41925
41926
41927
41928
41929
41930
41931
41932
41933
41934
41935
41936
41937
41938
41939
41940
41941
41942
41943
41944
41945
41946
41947
41948
41949
41950
41951
41952
41953
41954
41955
41956
41957
41958
41959
41960
41961
41962
41963
41964
41965
41966
41967
41968
41969
41970
41971
41972
41973
41974
41975
41976
41977
41978
41979
41980
41981
41982
41983
41984
41985
41986
41987
41988
41989
41990
41991
41992
41993
41994
41995
41996
41997
41998
41999
42000
42001
42002
42003
42004
42005
42006
42007
42008
42009
42010
42011
42012
42013
42014
42015
42016
42017
42018
42019
42020
42021
42022
42023
42024
42025
42026
42027
42028
42029
42030
42031
42032
42033
42034
42035
42036
42037
42038
42039
42040
42041
42042
42043
42044
42045
42046
42047
42048
42049
42050
42051
42052
42053
42054
42055
42056
42057
42058
42059
42060
42061
42062
42063
42064
42065
42066
42067
42068
42069
42070
42071
42072
42073
42074
42075
42076
42077
42078
42079
42080
42081
42082
42083
42084
42085
42086
42087
42088
42089
42090
42091
42092
42093
42094
42095
42096
42097
42098
42099
42100
42101
42102
42103
42104
42105
42106
42107
42108
42109
42110
42111
42112
42113
42114
42115
42116
42117
42118
42119
42120
42121
42122
42123
42124
42125
42126
42127
42128
42129
42130
42131
42132
42133
42134
42135
42136
42137
42138
42139
42140
42141
42142
42143
42144
42145
42146
42147
42148
42149
42150
42151
42152
42153
42154
42155
42156
42157
42158
42159
42160
42161
42162
42163
42164
42165
42166
42167
42168
42169
42170
42171
42172
42173
42174
42175
42176
42177
42178
42179
42180
42181
42182
42183
42184
42185
42186
42187
42188
42189
42190
42191
42192
42193
42194
42195
42196
42197
42198
42199
42200
42201
42202
42203
42204
42205
42206
42207
42208
42209
42210
42211
42212
42213
42214
42215
42216
42217
42218
42219
42220
42221
42222
42223
42224
42225
42226
42227
42228
42229
42230
42231
42232
42233
42234
42235
42236
42237
42238
42239
42240
42241
42242
42243
42244
42245
42246
42247
42248
42249
42250
42251
42252
42253
42254
42255
42256
42257
42258
42259
42260
42261
42262
42263
42264
42265
42266
42267
42268
42269
42270
42271
42272
42273
42274
42275
42276
42277
42278
42279
42280
42281
42282
42283
42284
42285
42286
42287
42288
42289
42290
42291
42292
42293
42294
42295
42296
42297
42298
42299
42300
42301
42302
42303
42304
42305
42306
42307
42308
42309
42310
42311
42312
42313
42314
42315
42316
42317
42318
42319
42320
42321
42322
42323
42324
42325
42326
42327
42328
42329
42330
42331
42332
42333
42334
42335
42336
42337
42338
42339
42340
42341
42342
42343
42344
42345
42346
42347
42348
42349
42350
42351
42352
42353
42354
42355
42356
42357
42358
42359
42360
42361
42362
42363
42364
42365
42366
42367
42368
42369
42370
42371
42372
42373
42374
42375
42376
42377
42378
42379
42380
42381
42382
42383
42384
42385
42386
42387
42388
42389
42390
42391
42392
42393
42394
42395
42396
42397
42398
42399
42400
42401
42402
42403
42404
42405
42406
42407
42408
42409
42410
42411
42412
42413
42414
42415
42416
42417
42418
42419
42420
42421
42422
42423
42424
42425
42426
42427
42428
42429
42430
42431
42432
42433
42434
42435
42436
42437
42438
42439
42440
42441
42442
42443
42444
42445
42446
42447
42448
42449
42450
42451
42452
42453
42454
42455
42456
42457
42458
42459
42460
42461
42462
42463
42464
42465
42466
42467
42468
42469
42470
42471
42472
42473
42474
42475
42476
42477
42478
42479
42480
42481
42482
42483
42484
42485
42486
42487
42488
42489
42490
42491
42492
42493
42494
42495
42496
42497
42498
42499
42500
42501
42502
42503
42504
42505
42506
42507
42508
42509
42510
42511
42512
42513
42514
42515
42516
42517
42518
42519
42520
42521
42522
42523
42524
42525
42526
42527
42528
42529
42530
42531
42532
42533
42534
42535
42536
42537
42538
42539
42540
42541
42542
42543
42544
42545
42546
42547
42548
42549
42550
42551
42552
42553
42554
42555
42556
42557
42558
42559
42560
42561
42562
42563
42564
42565
42566
42567
42568
42569
42570
42571
42572
42573
42574
42575
42576
42577
42578
42579
42580
42581
42582
42583
42584
42585
42586
42587
42588
42589
42590
42591
42592
42593
42594
42595
42596
42597
42598
42599
42600
42601
42602
42603
42604
42605
42606
42607
42608
42609
42610
42611
42612
42613
42614
42615
42616
42617
42618
42619
42620
42621
42622
42623
42624
42625
42626
42627
42628
42629
42630
42631
42632
42633
42634
42635
42636
42637
42638
42639
42640
42641
42642
42643
42644
42645
42646
42647
42648
42649
42650
42651
42652
42653
42654
42655
42656
42657
42658
42659
42660
42661
42662
42663
42664
42665
42666
42667
42668
42669
42670
42671
42672
42673
42674
42675
42676
42677
42678
42679
42680
42681
42682
42683
42684
42685
42686
42687
42688
42689
42690
42691
42692
42693
42694
42695
42696
42697
42698
42699
42700
42701
42702
42703
42704
42705
42706
42707
42708
42709
42710
42711
42712
42713
42714
42715
42716
42717
42718
42719
42720
42721
42722
42723
42724
42725
42726
42727
42728
42729
42730
42731
42732
42733
42734
42735
42736
42737
42738
42739
42740
42741
42742
42743
42744
42745
42746
42747
42748
42749
42750
42751
42752
42753
42754
42755
42756
42757
42758
42759
42760
42761
42762
42763
42764
42765
42766
42767
42768
42769
42770
42771
42772
42773
42774
42775
42776
42777
42778
42779
42780
42781
42782
42783
42784
42785
42786
42787
42788
42789
42790
42791
42792
42793
42794
42795
42796
42797
42798
42799
42800
42801
42802
42803
42804
42805
42806
42807
42808
42809
42810
42811
42812
42813
42814
42815
42816
42817
42818
42819
42820
42821
42822
42823
42824
42825
42826
42827
42828
42829
42830
42831
42832
42833
42834
42835
42836
42837
42838
42839
42840
42841
42842
42843
42844
42845
42846
42847
42848
42849
42850
42851
42852
42853
42854
42855
42856
42857
42858
42859
42860
42861
42862
42863
42864
42865
42866
42867
42868
42869
42870
42871
42872
42873
42874
42875
42876
42877
42878
42879
42880
42881
42882
42883
42884
42885
42886
42887
42888
42889
42890
42891
42892
42893
42894
42895
42896
42897
42898
42899
42900
42901
42902
42903
42904
42905
42906
42907
42908
42909
42910
42911
42912
42913
42914
42915
42916
42917
42918
42919
42920
42921
42922
42923
42924
42925
42926
42927
42928
42929
42930
42931
42932
42933
42934
42935
42936
42937
42938
42939
42940
42941
42942
42943
42944
42945
42946
42947
42948
42949
42950
42951
42952
42953
42954
42955
42956
42957
42958
42959
42960
42961
42962
42963
42964
42965
42966
42967
42968
42969
42970
42971
42972
42973
42974
42975
42976
42977
42978
42979
42980
42981
42982
42983
42984
42985
42986
42987
42988
42989
42990
42991
42992
42993
42994
42995
42996
42997
42998
42999
43000
43001
43002
43003
43004
43005
43006
43007
43008
43009
43010
43011
43012
43013
43014
43015
43016
43017
43018
43019
43020
43021
43022
43023
43024
43025
43026
43027
43028
43029
43030
43031
43032
43033
43034
43035
43036
43037
43038
43039
43040
43041
43042
43043
43044
43045
43046
43047
43048
43049
43050
43051
43052
43053
43054
43055
43056
43057
43058
43059
43060
43061
43062
43063
43064
43065
43066
43067
43068
43069
43070
43071
43072
43073
43074
43075
43076
43077
43078
43079
43080
43081
43082
43083
43084
43085
43086
43087
43088
43089
43090
43091
43092
43093
43094
43095
43096
43097
43098
43099
43100
43101
43102
43103
43104
43105
43106
43107
43108
43109
43110
43111
43112
43113
43114
43115
43116
43117
43118
43119
43120
43121
43122
43123
43124
43125
43126
43127
43128
43129
43130
43131
43132
43133
43134
43135
43136
43137
43138
43139
43140
43141
43142
43143
43144
43145
43146
43147
43148
43149
43150
43151
43152
43153
43154
43155
43156
43157
43158
43159
43160
43161
43162
43163
43164
43165
43166
43167
43168
43169
43170
43171
43172
43173
43174
43175
43176
43177
43178
43179
43180
43181
43182
43183
43184
43185
43186
43187
43188
43189
43190
43191
43192
43193
43194
43195
43196
43197
43198
43199
43200
43201
43202
43203
43204
43205
43206
43207
43208
43209
43210
43211
43212
43213
43214
43215
43216
43217
43218
43219
43220
43221
43222
43223
43224
43225
43226
43227
43228
43229
43230
43231
43232
43233
43234
43235
43236
43237
43238
43239
43240
43241
43242
43243
43244
43245
43246
43247
43248
43249
43250
43251
43252
43253
43254
43255
43256
43257
43258
43259
43260
43261
43262
43263
43264
43265
43266
43267
43268
43269
43270
43271
43272
43273
43274
43275
43276
43277
43278
43279
43280
43281
43282
43283
43284
43285
43286
43287
43288
43289
43290
43291
43292
43293
43294
43295
43296
43297
43298
43299
43300
43301
43302
43303
43304
43305
43306
43307
43308
43309
43310
43311
43312
43313
43314
43315
43316
43317
43318
43319
43320
43321
43322
43323
43324
43325
43326
43327
43328
43329
43330
43331
43332
43333
43334
43335
43336
43337
43338
43339
43340
43341
43342
43343
43344
43345
43346
43347
43348
43349
43350
43351
43352
43353
43354
43355
43356
43357
43358
43359
43360
43361
43362
43363
43364
43365
43366
43367
43368
43369
43370
43371
43372
43373
43374
43375
43376
43377
43378
43379
43380
43381
43382
43383
43384
43385
43386
43387
43388
43389
43390
43391
43392
43393
43394
43395
43396
43397
43398
43399
43400
43401
43402
43403
43404
43405
43406
43407
43408
43409
43410
43411
43412
43413
43414
43415
43416
43417
43418
43419
43420
43421
43422
43423
43424
43425
43426
43427
43428
43429
43430
43431
43432
43433
43434
43435
43436
43437
43438
43439
43440
43441
43442
43443
43444
43445
43446
43447
43448
43449
43450
43451
43452
43453
43454
43455
43456
43457
43458
43459
43460
43461
43462
43463
43464
43465
43466
43467
43468
43469
43470
43471
43472
43473
43474
43475
43476
43477
43478
43479
43480
43481
43482
43483
43484
43485
43486
43487
43488
43489
43490
43491
43492
43493
43494
43495
43496
43497
43498
43499
43500
43501
43502
43503
43504
43505
43506
43507
43508
43509
43510
43511
43512
43513
43514
43515
43516
43517
43518
43519
43520
43521
43522
43523
43524
43525
43526
43527
43528
43529
43530
43531
43532
43533
43534
43535
43536
43537
43538
43539
43540
43541
43542
43543
43544
43545
43546
43547
43548
43549
43550
43551
43552
43553
43554
43555
43556
43557
43558
43559
43560
43561
43562
43563
43564
43565
43566
43567
43568
43569
43570
43571
43572
43573
43574
43575
43576
43577
43578
43579
43580
43581
43582
43583
43584
43585
43586
43587
43588
43589
43590
43591
43592
43593
43594
43595
43596
43597
43598
43599
43600
43601
43602
43603
43604
43605
43606
43607
43608
43609
43610
43611
43612
43613
43614
43615
43616
43617
43618
43619
43620
43621
43622
43623
43624
43625
43626
43627
43628
43629
43630
43631
43632
43633
43634
43635
43636
43637
43638
43639
43640
43641
43642
43643
43644
43645
43646
43647
43648
43649
43650
43651
43652
43653
43654
43655
43656
43657
43658
43659
43660
43661
43662
43663
43664
43665
43666
43667
43668
43669
43670
43671
43672
43673
43674
43675
43676
43677
43678
43679
43680
43681
43682
43683
43684
43685
43686
43687
43688
43689
43690
43691
43692
43693
43694
43695
43696
43697
43698
43699
43700
43701
43702
43703
43704
43705
43706
43707
43708
43709
43710
43711
43712
43713
43714
43715
43716
43717
43718
43719
43720
43721
43722
43723
43724
43725
43726
43727
43728
43729
43730
43731
43732
43733
43734
43735
43736
43737
43738
43739
43740
43741
43742
43743
43744
43745
43746
43747
43748
43749
43750
43751
43752
43753
43754
43755
43756
43757
43758
43759
43760
43761
43762
43763
43764
43765
43766
43767
43768
43769
43770
43771
43772
43773
43774
43775
43776
43777
43778
43779
43780
43781
43782
43783
43784
43785
43786
43787
43788
43789
43790
43791
43792
43793
43794
43795
43796
43797
43798
43799
43800
43801
43802
43803
43804
43805
43806
43807
43808
43809
43810
43811
43812
43813
43814
43815
43816
43817
43818
43819
43820
43821
43822
43823
43824
43825
43826
43827
43828
43829
43830
43831
43832
43833
43834
43835
43836
43837
43838
43839
43840
43841
43842
43843
43844
43845
43846
43847
43848
43849
43850
43851
43852
43853
43854
43855
43856
43857
43858
43859
43860
43861
43862
43863
43864
43865
43866
43867
43868
43869
43870
43871
43872
43873
43874
43875
43876
43877
43878
43879
43880
43881
43882
43883
43884
43885
43886
43887
43888
43889
43890
43891
43892
43893
43894
43895
43896
43897
43898
43899
43900
43901
43902
43903
43904
43905
43906
43907
43908
43909
43910
43911
43912
43913
43914
43915
43916
43917
43918
43919
43920
43921
43922
43923
43924
43925
43926
43927
43928
43929
43930
43931
43932
43933
43934
43935
43936
43937
43938
43939
43940
43941
43942
43943
43944
43945
43946
43947
43948
43949
43950
43951
43952
43953
43954
43955
43956
43957
43958
43959
43960
43961
43962
43963
43964
43965
43966
43967
43968
43969
43970
43971
43972
43973
43974
43975
43976
43977
43978
43979
43980
43981
43982
43983
43984
43985
43986
43987
43988
43989
43990
43991
43992
43993
43994
43995
43996
43997
43998
43999
44000
44001
44002
44003
44004
44005
44006
44007
44008
44009
44010
44011
44012
44013
44014
44015
44016
44017
44018
44019
44020
44021
44022
44023
44024
44025
44026
44027
44028
44029
44030
44031
44032
44033
44034
44035
44036
44037
44038
44039
44040
44041
44042
44043
44044
44045
44046
44047
44048
44049
44050
44051
44052
44053
44054
44055
44056
44057
44058
44059
44060
44061
44062
44063
44064
44065
44066
44067
44068
44069
44070
44071
44072
44073
44074
44075
44076
44077
44078
44079
44080
44081
44082
44083
44084
44085
44086
44087
44088
44089
44090
44091
44092
44093
44094
44095
44096
44097
44098
44099
44100
44101
44102
44103
44104
44105
44106
44107
44108
44109
44110
44111
44112
44113
44114
44115
44116
44117
44118
44119
44120
44121
44122
44123
44124
44125
44126
44127
44128
44129
44130
44131
44132
44133
44134
44135
44136
44137
44138
44139
44140
44141
44142
44143
44144
44145
44146
44147
44148
44149
44150
44151
44152
44153
44154
44155
44156
44157
44158
44159
44160
44161
44162
44163
44164
44165
44166
44167
44168
44169
44170
44171
44172
44173
44174
44175
44176
44177
44178
44179
44180
44181
44182
44183
44184
44185
44186
44187
44188
44189
44190
44191
44192
44193
44194
44195
44196
44197
44198
44199
44200
44201
44202
44203
44204
44205
44206
44207
44208
44209
44210
44211
44212
44213
44214
44215
44216
44217
44218
44219
44220
44221
44222
44223
44224
44225
44226
44227
44228
44229
44230
44231
44232
44233
44234
44235
44236
44237
44238
44239
44240
44241
44242
44243
44244
44245
44246
44247
44248
44249
44250
44251
44252
44253
44254
44255
44256
44257
44258
44259
44260
44261
44262
44263
44264
44265
44266
44267
44268
44269
44270
44271
44272
44273
44274
44275
44276
44277
44278
44279
44280
44281
44282
44283
44284
44285
44286
44287
44288
44289
44290
44291
44292
44293
44294
44295
44296
44297
44298
44299
44300
44301
44302
44303
44304
44305
44306
44307
44308
44309
44310
44311
44312
44313
44314
44315
44316
44317
44318
44319
44320
44321
44322
44323
44324
44325
44326
44327
44328
44329
44330
44331
44332
44333
44334
44335
44336
44337
44338
44339
44340
44341
44342
44343
44344
44345
44346
44347
44348
44349
44350
44351
44352
44353
44354
44355
44356
44357
44358
44359
44360
44361
44362
44363
44364
44365
44366
44367
44368
44369
44370
44371
44372
44373
44374
44375
44376
44377
44378
44379
44380
44381
44382
44383
44384
44385
44386
44387
44388
44389
44390
44391
44392
44393
44394
44395
44396
44397
44398
44399
44400
44401
44402
44403
44404
44405
44406
44407
44408
44409
44410
44411
44412
44413
44414
44415
44416
44417
44418
44419
44420
44421
44422
44423
44424
44425
44426
44427
44428
44429
44430
44431
44432
44433
44434
44435
44436
44437
44438
44439
44440
44441
44442
44443
44444
44445
44446
44447
44448
44449
44450
44451
44452
44453
44454
44455
44456
44457
44458
44459
44460
44461
44462
44463
44464
44465
44466
44467
44468
44469
44470
44471
44472
44473
44474
44475
44476
44477
44478
44479
44480
44481
44482
44483
44484
44485
44486
44487
44488
44489
44490
44491
44492
44493
44494
44495
44496
44497
44498
44499
44500
44501
44502
44503
44504
44505
44506
44507
44508
44509
44510
44511
44512
44513
44514
44515
44516
44517
44518
44519
44520
44521
44522
44523
44524
44525
44526
44527
44528
44529
44530
44531
44532
44533
44534
44535
44536
44537
44538
44539
44540
44541
44542
44543
44544
44545
44546
44547
44548
44549
44550
44551
44552
44553
44554
44555
44556
44557
44558
44559
44560
44561
44562
44563
44564
44565
44566
44567
44568
44569
44570
44571
44572
44573
44574
44575
44576
44577
44578
44579
44580
44581
44582
44583
44584
44585
44586
44587
44588
44589
44590
44591
44592
44593
44594
44595
44596
44597
44598
44599
44600
44601
44602
44603
44604
44605
44606
44607
44608
44609
44610
44611
44612
44613
44614
44615
44616
44617
44618
44619
44620
44621
44622
44623
44624
44625
44626
44627
44628
44629
44630
44631
44632
44633
44634
44635
44636
44637
44638
44639
44640
44641
44642
44643
44644
44645
44646
44647
44648
44649
44650
44651
44652
44653
44654
44655
44656
44657
44658
44659
44660
44661
44662
44663
44664
44665
44666
44667
44668
44669
44670
44671
44672
44673
44674
44675
44676
44677
44678
44679
44680
44681
44682
44683
44684
44685
44686
44687
44688
44689
44690
44691
44692
44693
44694
44695
44696
44697
44698
44699
44700
44701
44702
44703
44704
44705
44706
44707
44708
44709
44710
44711
44712
44713
44714
44715
44716
44717
44718
44719
44720
44721
44722
44723
44724
44725
44726
44727
44728
44729
44730
44731
44732
44733
44734
44735
44736
44737
44738
44739
44740
44741
44742
44743
44744
44745
44746
44747
44748
44749
44750
44751
44752
44753
44754
44755
44756
44757
44758
44759
44760
44761
44762
44763
44764
44765
44766
44767
44768
44769
44770
44771
44772
44773
44774
44775
44776
44777
44778
44779
44780
44781
44782
44783
44784
44785
44786
44787
44788
44789
44790
44791
44792
44793
44794
44795
44796
44797
44798
44799
44800
44801
44802
44803
44804
44805
44806
44807
44808
44809
44810
44811
44812
44813
44814
44815
44816
44817
44818
44819
44820
44821
44822
44823
44824
44825
44826
44827
44828
44829
44830
44831
44832
44833
44834
44835
44836
44837
44838
44839
44840
44841
44842
44843
44844
44845
44846
44847
44848
44849
44850
44851
44852
44853
44854
44855
44856
44857
44858
44859
44860
44861
44862
44863
44864
44865
44866
44867
44868
44869
44870
44871
44872
44873
44874
44875
44876
44877
44878
44879
44880
44881
44882
44883
44884
44885
44886
44887
44888
44889
44890
44891
44892
44893
44894
44895
44896
44897
44898
44899
44900
44901
44902
44903
44904
44905
44906
44907
44908
44909
44910
44911
44912
44913
44914
44915
44916
44917
44918
44919
44920
44921
44922
44923
44924
44925
44926
44927
44928
44929
44930
44931
44932
44933
44934
44935
44936
44937
44938
44939
44940
44941
44942
44943
44944
44945
44946
44947
44948
44949
44950
44951
44952
44953
44954
44955
44956
44957
44958
44959
44960
44961
44962
44963
44964
44965
44966
44967
44968
44969
44970
44971
44972
44973
44974
44975
44976
44977
44978
44979
44980
44981
44982
44983
44984
44985
44986
44987
44988
44989
44990
44991
44992
44993
44994
44995
44996
44997
44998
44999
45000
45001
45002
45003
45004
45005
45006
45007
45008
45009
45010
45011
45012
45013
45014
45015
45016
45017
45018
45019
45020
45021
45022
45023
45024
45025
45026
45027
45028
45029
45030
45031
45032
45033
45034
45035
45036
45037
45038
45039
45040
45041
45042
45043
45044
45045
45046
45047
45048
45049
45050
45051
45052
45053
45054
45055
45056
45057
45058
45059
45060
45061
45062
45063
45064
45065
45066
45067
45068
45069
45070
45071
45072
45073
45074
45075
45076
45077
45078
45079
45080
45081
45082
45083
45084
45085
45086
45087
45088
45089
45090
45091
45092
45093
45094
45095
45096
45097
45098
45099
45100
45101
45102
45103
45104
45105
45106
45107
45108
45109
45110
45111
45112
45113
45114
45115
45116
45117
45118
45119
45120
45121
45122
45123
45124
45125
45126
45127
45128
45129
45130
45131
45132
45133
45134
45135
45136
45137
45138
45139
45140
45141
45142
45143
45144
45145
45146
45147
45148
45149
45150
45151
45152
45153
45154
45155
45156
45157
45158
45159
45160
45161
45162
45163
45164
45165
45166
45167
45168
45169
45170
45171
45172
45173
45174
45175
45176
45177
45178
45179
45180
45181
45182
45183
45184
45185
45186
45187
45188
45189
45190
45191
45192
45193
45194
45195
45196
45197
45198
45199
45200
45201
45202
45203
45204
45205
45206
45207
45208
45209
45210
45211
45212
45213
45214
45215
45216
45217
45218
45219
45220
45221
45222
45223
45224
45225
45226
45227
45228
45229
45230
45231
45232
45233
45234
45235
45236
45237
45238
45239
45240
45241
45242
45243
45244
45245
45246
45247
45248
45249
45250
45251
45252
45253
45254
45255
45256
45257
45258
45259
45260
45261
45262
45263
45264
45265
45266
45267
45268
45269
45270
45271
45272
45273
45274
45275
45276
45277
45278
45279
45280
45281
45282
45283
45284
45285
45286
45287
45288
45289
45290
45291
45292
45293
45294
45295
45296
45297
45298
45299
45300
45301
45302
45303
45304
45305
45306
45307
45308
45309
45310
45311
45312
45313
45314
45315
45316
45317
45318
45319
45320
45321
45322
45323
45324
45325
45326
45327
45328
45329
45330
45331
45332
45333
45334
45335
45336
45337
45338
45339
45340
45341
45342
45343
45344
45345
45346
45347
45348
45349
45350
45351
45352
45353
45354
45355
45356
45357
45358
45359
45360
45361
45362
45363
45364
45365
45366
45367
45368
45369
45370
45371
45372
45373
45374
45375
45376
45377
45378
45379
45380
45381
45382
45383
45384
45385
45386
45387
45388
45389
45390
45391
45392
45393
45394
45395
45396
45397
45398
45399
45400
45401
45402
45403
45404
45405
45406
45407
45408
45409
45410
45411
45412
45413
45414
45415
45416
45417
45418
45419
45420
45421
45422
45423
45424
45425
45426
45427
45428
45429
45430
45431
45432
45433
45434
45435
45436
45437
45438
45439
45440
45441
45442
45443
45444
45445
45446
45447
45448
45449
45450
45451
45452
45453
45454
45455
45456
45457
45458
45459
45460
45461
45462
45463
45464
45465
45466
45467
45468
45469
45470
45471
45472
45473
45474
45475
45476
45477
45478
45479
45480
45481
45482
45483
45484
45485
45486
45487
45488
45489
45490
45491
45492
45493
45494
45495
45496
45497
45498
45499
45500
45501
45502
45503
45504
45505
45506
45507
45508
45509
45510
45511
45512
45513
45514
45515
45516
45517
45518
45519
45520
45521
45522
45523
45524
45525
45526
45527
45528
45529
45530
45531
45532
45533
45534
45535
45536
45537
45538
45539
45540
45541
45542
45543
45544
45545
45546
45547
45548
45549
45550
45551
45552
45553
45554
45555
45556
45557
45558
45559
45560
45561
45562
45563
45564
45565
45566
45567
45568
45569
45570
45571
45572
45573
45574
45575
45576
45577
45578
45579
45580
45581
45582
45583
45584
45585
45586
45587
45588
45589
45590
45591
45592
45593
45594
45595
45596
45597
45598
45599
45600
45601
45602
45603
45604
45605
45606
45607
45608
45609
45610
45611
45612
45613
45614
45615
45616
45617
45618
45619
45620
45621
45622
45623
45624
45625
45626
45627
45628
45629
45630
45631
45632
45633
45634
45635
45636
45637
45638
45639
45640
45641
45642
45643
45644
45645
45646
45647
45648
45649
45650
45651
45652
45653
45654
45655
45656
45657
45658
45659
45660
45661
45662
45663
45664
45665
45666
45667
45668
45669
45670
45671
45672
45673
45674
45675
45676
45677
45678
45679
45680
45681
45682
45683
45684
45685
45686
45687
45688
45689
45690
45691
45692
45693
45694
45695
45696
45697
45698
45699
45700
45701
45702
45703
45704
45705
45706
45707
45708
45709
45710
45711
45712
45713
45714
45715
45716
45717
45718
45719
45720
45721
45722
45723
45724
45725
45726
45727
45728
45729
45730
45731
45732
45733
45734
45735
45736
45737
45738
45739
45740
45741
45742
45743
45744
45745
45746
45747
45748
45749
45750
45751
45752
45753
45754
45755
45756
45757
45758
45759
45760
45761
45762
45763
45764
45765
45766
45767
45768
45769
45770
45771
45772
45773
45774
45775
45776
45777
45778
45779
45780
45781
45782
45783
45784
45785
45786
45787
45788
45789
45790
45791
45792
45793
45794
45795
45796
45797
45798
45799
45800
45801
45802
45803
45804
45805
45806
45807
45808
45809
45810
45811
45812
45813
45814
45815
45816
45817
45818
45819
45820
45821
45822
45823
45824
45825
45826
45827
45828
45829
45830
45831
45832
45833
45834
45835
45836
45837
45838
45839
45840
45841
45842
45843
45844
45845
45846
45847
45848
45849
45850
45851
45852
45853
45854
45855
45856
45857
45858
45859
45860
45861
45862
45863
45864
45865
45866
45867
45868
45869
45870
45871
45872
45873
45874
45875
45876
45877
45878
45879
45880
45881
45882
45883
45884
45885
45886
45887
45888
45889
45890
45891
45892
45893
45894
45895
45896
45897
45898
45899
45900
45901
45902
45903
45904
45905
45906
45907
45908
45909
45910
45911
45912
45913
45914
45915
45916
45917
45918
45919
45920
45921
45922
45923
45924
45925
45926
45927
45928
45929
45930
45931
45932
45933
45934
45935
45936
45937
45938
45939
45940
45941
45942
45943
45944
45945
45946
45947
45948
45949
45950
45951
45952
45953
45954
45955
45956
45957
45958
45959
45960
45961
45962
45963
45964
45965
45966
45967
45968
45969
45970
45971
45972
45973
45974
45975
45976
45977
45978
45979
45980
45981
45982
45983
45984
45985
45986
45987
45988
45989
45990
45991
45992
45993
45994
45995
45996
45997
45998
45999
46000
46001
46002
46003
46004
46005
46006
46007
46008
46009
46010
46011
46012
46013
46014
46015
46016
46017
46018
46019
46020
46021
46022
46023
46024
46025
46026
46027
46028
46029
46030
46031
46032
46033
46034
46035
46036
46037
46038
46039
46040
46041
46042
46043
46044
46045
46046
46047
46048
46049
46050
46051
46052
46053
46054
46055
46056
46057
46058
46059
46060
46061
46062
46063
46064
46065
46066
46067
46068
46069
46070
46071
46072
46073
46074
46075
46076
46077
46078
46079
46080
46081
46082
46083
46084
46085
46086
46087
46088
46089
46090
46091
46092
46093
46094
46095
46096
46097
46098
46099
46100
46101
46102
46103
46104
46105
46106
46107
46108
46109
46110
46111
46112
46113
46114
46115
46116
46117
46118
46119
46120
46121
46122
46123
46124
46125
46126
46127
46128
46129
46130
46131
46132
46133
46134
46135
46136
46137
46138
46139
46140
46141
46142
46143
46144
46145
46146
46147
46148
46149
46150
46151
46152
46153
46154
46155
46156
46157
46158
46159
46160
46161
46162
46163
46164
46165
46166
46167
46168
46169
46170
46171
46172
46173
46174
46175
46176
46177
46178
46179
46180
46181
46182
46183
46184
46185
46186
46187
46188
46189
46190
46191
46192
46193
46194
46195
46196
46197
46198
46199
46200
46201
46202
46203
46204
46205
46206
46207
46208
46209
46210
46211
46212
46213
46214
46215
46216
46217
46218
46219
46220
46221
46222
46223
46224
46225
46226
46227
46228
46229
46230
46231
46232
46233
46234
46235
46236
46237
46238
46239
46240
46241
46242
46243
46244
46245
46246
46247
46248
46249
46250
46251
46252
46253
46254
46255
46256
46257
46258
46259
46260
46261
46262
46263
46264
46265
46266
46267
46268
46269
46270
46271
46272
46273
46274
46275
46276
46277
46278
46279
46280
46281
46282
46283
46284
46285
46286
46287
46288
46289
46290
46291
46292
46293
46294
46295
46296
46297
46298
46299
46300
46301
46302
46303
46304
46305
46306
46307
46308
46309
46310
46311
46312
46313
46314
46315
46316
46317
46318
46319
46320
46321
46322
46323
46324
46325
46326
46327
46328
46329
46330
46331
46332
46333
46334
46335
46336
46337
46338
46339
46340
46341
46342
46343
46344
46345
46346
46347
46348
46349
46350
46351
46352
46353
46354
46355
46356
46357
46358
46359
46360
46361
46362
46363
46364
46365
46366
46367
46368
46369
46370
46371
46372
46373
46374
46375
46376
46377
46378
46379
46380
46381
46382
46383
46384
46385
46386
46387
46388
46389
46390
46391
46392
46393
46394
46395
46396
46397
46398
46399
46400
46401
46402
46403
46404
46405
46406
46407
46408
46409
46410
46411
46412
46413
46414
46415
46416
46417
46418
46419
46420
46421
46422
46423
46424
46425
46426
46427
46428
46429
46430
46431
46432
46433
46434
46435
46436
46437
46438
46439
46440
46441
46442
46443
46444
46445
46446
46447
46448
46449
46450
46451
46452
46453
46454
46455
46456
46457
46458
46459
46460
46461
46462
46463
46464
46465
46466
46467
46468
46469
46470
46471
46472
46473
46474
46475
46476
46477
46478
46479
46480
46481
46482
46483
46484
46485
46486
46487
46488
46489
46490
46491
46492
46493
46494
46495
46496
46497
46498
46499
46500
46501
46502
46503
46504
46505
46506
46507
46508
46509
46510
46511
46512
46513
46514
46515
46516
46517
46518
46519
46520
46521
46522
46523
46524
46525
46526
46527
46528
46529
46530
46531
46532
46533
46534
46535
46536
46537
46538
46539
46540
46541
46542
46543
46544
46545
46546
46547
46548
46549
46550
46551
46552
46553
46554
46555
46556
46557
46558
46559
46560
46561
46562
46563
46564
46565
46566
46567
46568
46569
46570
46571
46572
46573
46574
46575
46576
46577
46578
46579
46580
46581
46582
46583
46584
46585
46586
46587
46588
46589
46590
46591
46592
46593
46594
46595
46596
46597
46598
46599
46600
46601
46602
46603
46604
46605
46606
46607
46608
46609
46610
46611
46612
46613
46614
46615
46616
46617
46618
46619
46620
46621
46622
46623
46624
46625
46626
46627
46628
46629
46630
46631
46632
46633
46634
46635
46636
46637
46638
46639
46640
46641
46642
46643
46644
46645
46646
46647
46648
46649
46650
46651
46652
46653
46654
46655
46656
46657
46658
46659
46660
46661
46662
46663
46664
46665
46666
46667
46668
46669
46670
46671
46672
46673
46674
46675
46676
46677
46678
46679
46680
46681
46682
46683
46684
46685
46686
46687
46688
46689
46690
46691
46692
46693
46694
46695
46696
46697
46698
46699
46700
46701
46702
46703
46704
46705
46706
46707
46708
46709
46710
46711
46712
46713
46714
46715
46716
46717
46718
46719
46720
46721
46722
46723
46724
46725
46726
46727
46728
46729
46730
46731
46732
46733
46734
46735
46736
46737
46738
46739
46740
46741
46742
46743
46744
46745
46746
46747
46748
46749
46750
46751
46752
46753
46754
46755
46756
46757
46758
46759
46760
46761
46762
46763
46764
46765
46766
46767
46768
46769
46770
46771
46772
46773
46774
46775
46776
46777
46778
46779
46780
46781
46782
46783
46784
46785
46786
46787
46788
46789
46790
46791
46792
46793
46794
46795
46796
46797
46798
46799
46800
46801
46802
46803
46804
46805
46806
46807
46808
46809
46810
46811
46812
46813
46814
46815
46816
46817
46818
46819
46820
46821
46822
46823
46824
46825
46826
46827
46828
46829
46830
46831
46832
46833
46834
46835
46836
46837
46838
46839
46840
46841
46842
46843
46844
46845
46846
46847
46848
46849
46850
46851
46852
46853
46854
46855
46856
46857
46858
46859
46860
46861
46862
46863
46864
46865
46866
46867
46868
46869
46870
46871
46872
46873
46874
46875
46876
46877
46878
46879
46880
46881
46882
46883
46884
46885
46886
46887
46888
46889
46890
46891
46892
46893
46894
46895
46896
46897
46898
46899
46900
46901
46902
46903
46904
46905
46906
46907
46908
46909
46910
46911
46912
46913
46914
46915
46916
46917
46918
46919
46920
46921
46922
46923
46924
46925
46926
46927
46928
46929
46930
46931
46932
46933
46934
46935
46936
46937
46938
46939
46940
46941
46942
46943
46944
46945
46946
46947
46948
46949
46950
46951
46952
46953
46954
46955
46956
46957
46958
46959
46960
46961
46962
46963
46964
46965
46966
46967
46968
46969
46970
46971
46972
46973
46974
46975
46976
46977
46978
46979
46980
46981
46982
46983
46984
46985
46986
46987
46988
46989
46990
46991
46992
46993
46994
46995
46996
46997
46998
46999
47000
47001
47002
47003
47004
47005
47006
47007
47008
47009
47010
47011
47012
47013
47014
47015
47016
47017
47018
47019
47020
47021
47022
47023
47024
47025
47026
47027
47028
47029
47030
47031
47032
47033
47034
47035
47036
47037
47038
47039
47040
47041
47042
47043
47044
47045
47046
47047
47048
47049
47050
47051
47052
47053
47054
47055
47056
47057
47058
47059
47060
47061
47062
47063
47064
47065
47066
47067
47068
47069
47070
47071
47072
47073
47074
47075
47076
47077
47078
47079
47080
47081
47082
47083
47084
47085
47086
47087
47088
47089
47090
47091
47092
47093
47094
47095
47096
47097
47098
47099
47100
47101
47102
47103
47104
47105
47106
47107
47108
47109
47110
47111
47112
47113
47114
47115
47116
47117
47118
47119
47120
47121
47122
47123
47124
47125
47126
47127
47128
47129
47130
47131
47132
47133
47134
47135
47136
47137
47138
47139
47140
47141
47142
47143
47144
47145
47146
47147
47148
47149
47150
47151
47152
47153
47154
47155
47156
47157
47158
47159
47160
47161
47162
47163
47164
47165
47166
47167
47168
47169
47170
47171
47172
47173
47174
47175
47176
47177
47178
47179
47180
47181
47182
47183
47184
47185
47186
47187
47188
47189
47190
47191
47192
47193
47194
47195
47196
47197
47198
47199
47200
47201
47202
47203
47204
47205
47206
47207
47208
47209
47210
47211
47212
47213
47214
47215
47216
47217
47218
47219
47220
47221
47222
47223
47224
47225
47226
47227
47228
47229
47230
47231
47232
47233
47234
47235
47236
47237
47238
47239
47240
47241
47242
47243
47244
47245
47246
47247
47248
47249
47250
47251
47252
47253
47254
47255
47256
47257
47258
47259
47260
47261
47262
47263
47264
47265
47266
47267
47268
47269
47270
47271
47272
47273
47274
47275
47276
47277
47278
47279
47280
47281
47282
47283
47284
47285
47286
47287
47288
47289
47290
47291
47292
47293
47294
47295
47296
47297
47298
47299
47300
47301
47302
47303
47304
47305
47306
47307
47308
47309
47310
47311
47312
47313
47314
47315
47316
47317
47318
47319
47320
47321
47322
47323
47324
47325
47326
47327
47328
47329
47330
47331
47332
47333
47334
47335
47336
47337
47338
47339
47340
47341
47342
47343
47344
47345
47346
47347
47348
47349
47350
47351
47352
47353
47354
47355
47356
47357
47358
47359
47360
47361
47362
47363
47364
47365
47366
47367
47368
47369
47370
47371
47372
47373
47374
47375
47376
47377
47378
47379
47380
47381
47382
47383
47384
47385
47386
47387
47388
47389
47390
47391
47392
47393
47394
47395
47396
47397
47398
47399
47400
47401
47402
47403
47404
47405
47406
47407
47408
47409
47410
47411
47412
47413
47414
47415
47416
47417
47418
47419
47420
47421
47422
47423
47424
47425
47426
47427
47428
47429
47430
47431
47432
47433
47434
47435
47436
47437
47438
47439
47440
47441
47442
47443
47444
47445
47446
47447
47448
47449
47450
47451
47452
47453
47454
47455
47456
47457
47458
47459
47460
47461
47462
47463
47464
47465
47466
47467
47468
47469
47470
47471
47472
47473
47474
47475
47476
47477
47478
47479
47480
47481
47482
47483
47484
47485
47486
47487
47488
47489
47490
47491
47492
47493
47494
47495
47496
47497
47498
47499
47500
47501
47502
47503
47504
47505
47506
47507
47508
47509
47510
47511
47512
47513
47514
47515
47516
47517
47518
47519
47520
47521
47522
47523
47524
47525
47526
47527
47528
47529
47530
47531
47532
47533
47534
47535
47536
47537
47538
47539
47540
47541
47542
47543
47544
47545
47546
47547
47548
47549
47550
47551
47552
47553
47554
47555
47556
47557
47558
47559
47560
47561
47562
47563
47564
47565
47566
47567
47568
47569
47570
47571
47572
47573
47574
47575
47576
47577
47578
47579
47580
47581
47582
47583
47584
47585
47586
47587
47588
47589
47590
47591
47592
47593
47594
47595
47596
47597
47598
47599
47600
47601
47602
47603
47604
47605
47606
47607
47608
47609
47610
47611
47612
47613
47614
47615
47616
47617
47618
47619
47620
47621
47622
47623
47624
47625
47626
47627
47628
47629
47630
47631
47632
47633
47634
47635
47636
47637
47638
47639
47640
47641
47642
47643
47644
47645
47646
47647
47648
47649
47650
47651
47652
47653
47654
47655
47656
47657
47658
47659
47660
47661
47662
47663
47664
47665
47666
47667
47668
47669
47670
47671
47672
47673
47674
47675
47676
47677
47678
47679
47680
47681
47682
47683
47684
47685
47686
47687
47688
47689
47690
47691
47692
47693
47694
47695
47696
47697
47698
47699
47700
47701
47702
47703
47704
47705
47706
47707
47708
47709
47710
47711
47712
47713
47714
47715
47716
47717
47718
47719
47720
47721
47722
47723
47724
47725
47726
47727
47728
47729
47730
47731
47732
47733
47734
47735
47736
47737
47738
47739
47740
47741
47742
47743
47744
47745
47746
47747
47748
47749
47750
47751
47752
47753
47754
47755
47756
47757
47758
47759
47760
47761
47762
47763
47764
47765
47766
47767
47768
47769
47770
47771
47772
47773
47774
47775
47776
47777
47778
47779
47780
47781
47782
47783
47784
47785
47786
47787
47788
47789
47790
47791
47792
47793
47794
47795
47796
47797
47798
47799
47800
47801
47802
47803
47804
47805
47806
47807
47808
47809
47810
47811
47812
47813
47814
47815
47816
47817
47818
47819
47820
47821
47822
47823
47824
47825
47826
47827
47828
47829
47830
47831
47832
47833
47834
47835
47836
47837
47838
47839
47840
47841
47842
47843
47844
47845
47846
47847
47848
47849
47850
47851
47852
47853
47854
47855
47856
47857
47858
47859
47860
47861
47862
47863
47864
47865
47866
47867
47868
47869
47870
47871
47872
47873
47874
47875
47876
47877
47878
47879
47880
47881
47882
47883
47884
47885
47886
47887
47888
47889
47890
47891
47892
47893
47894
47895
47896
47897
47898
47899
47900
47901
47902
47903
47904
47905
47906
47907
47908
47909
47910
47911
47912
47913
47914
47915
47916
47917
47918
47919
47920
47921
47922
47923
47924
47925
47926
47927
47928
47929
47930
47931
47932
47933
47934
47935
47936
47937
47938
47939
47940
47941
47942
47943
47944
47945
47946
47947
47948
47949
47950
47951
47952
47953
47954
47955
47956
47957
47958
47959
47960
47961
47962
47963
47964
47965
47966
47967
47968
47969
47970
47971
47972
47973
47974
47975
47976
47977
47978
47979
47980
47981
47982
47983
47984
47985
47986
47987
47988
47989
47990
47991
47992
47993
47994
47995
47996
47997
47998
47999
48000
48001
48002
48003
48004
48005
48006
48007
48008
48009
48010
48011
48012
48013
48014
48015
48016
48017
48018
48019
48020
48021
48022
48023
48024
48025
48026
48027
48028
48029
48030
48031
48032
48033
48034
48035
48036
48037
48038
48039
48040
48041
48042
48043
48044
48045
48046
48047
48048
48049
48050
48051
48052
48053
48054
48055
48056
48057
48058
48059
48060
48061
48062
48063
48064
48065
48066
48067
48068
48069
48070
48071
48072
48073
48074
48075
48076
48077
48078
48079
48080
48081
48082
48083
48084
48085
48086
48087
48088
48089
48090
48091
48092
48093
48094
48095
48096
48097
48098
48099
48100
48101
48102
48103
48104
48105
48106
48107
48108
48109
48110
48111
48112
48113
48114
48115
48116
48117
48118
48119
48120
48121
48122
48123
48124
48125
48126
48127
48128
48129
48130
48131
48132
48133
48134
48135
48136
48137
48138
48139
48140
48141
48142
48143
48144
48145
48146
48147
48148
48149
48150
48151
48152
48153
48154
48155
48156
48157
48158
48159
48160
48161
48162
48163
48164
48165
48166
48167
48168
48169
48170
48171
48172
48173
48174
48175
48176
48177
48178
48179
48180
48181
48182
48183
48184
48185
48186
48187
48188
48189
48190
48191
48192
48193
48194
48195
48196
48197
48198
48199
48200
48201
48202
48203
48204
48205
48206
48207
48208
48209
48210
48211
48212
48213
48214
48215
48216
48217
48218
48219
48220
48221
48222
48223
48224
48225
48226
48227
48228
48229
48230
48231
48232
48233
48234
48235
48236
48237
48238
48239
48240
48241
48242
48243
48244
48245
48246
48247
48248
48249
48250
48251
48252
48253
48254
48255
48256
48257
48258
48259
48260
48261
48262
48263
48264
48265
48266
48267
48268
48269
48270
48271
48272
48273
48274
48275
48276
48277
48278
48279
48280
48281
48282
48283
48284
48285
48286
48287
48288
48289
48290
48291
48292
48293
48294
48295
48296
48297
48298
48299
48300
48301
48302
48303
48304
48305
48306
48307
48308
48309
48310
48311
48312
48313
48314
48315
48316
48317
48318
48319
48320
48321
48322
48323
48324
48325
48326
48327
48328
48329
48330
48331
48332
48333
48334
48335
48336
48337
48338
48339
48340
48341
48342
48343
48344
48345
48346
48347
48348
48349
48350
48351
48352
48353
48354
48355
48356
48357
48358
48359
48360
48361
48362
48363
48364
48365
48366
48367
48368
48369
48370
48371
48372
48373
48374
48375
48376
48377
48378
48379
48380
48381
48382
48383
48384
48385
48386
48387
48388
48389
48390
48391
48392
48393
48394
48395
48396
48397
48398
48399
48400
48401
48402
48403
48404
48405
48406
48407
48408
48409
48410
48411
48412
48413
48414
48415
48416
48417
48418
48419
48420
48421
48422
48423
48424
48425
48426
48427
48428
48429
48430
48431
48432
48433
48434
48435
48436
48437
48438
48439
48440
48441
48442
48443
48444
48445
48446
48447
48448
48449
48450
48451
48452
48453
48454
48455
48456
48457
48458
48459
48460
48461
48462
48463
48464
48465
48466
48467
48468
48469
48470
48471
48472
48473
48474
48475
48476
48477
48478
48479
48480
48481
48482
48483
48484
48485
48486
48487
48488
48489
48490
48491
48492
48493
48494
48495
48496
48497
48498
48499
48500
48501
48502
48503
48504
48505
48506
48507
48508
48509
48510
48511
48512
48513
48514
48515
48516
48517
48518
48519
48520
48521
48522
48523
48524
48525
48526
48527
48528
48529
48530
48531
48532
48533
48534
48535
48536
48537
48538
48539
48540
48541
48542
48543
48544
48545
48546
48547
48548
48549
48550
48551
48552
48553
48554
48555
48556
48557
48558
48559
48560
48561
48562
48563
48564
48565
48566
48567
48568
48569
48570
48571
48572
48573
48574
48575
48576
48577
48578
48579
48580
48581
48582
48583
48584
48585
48586
48587
48588
48589
48590
48591
48592
48593
48594
48595
48596
48597
48598
48599
48600
48601
48602
48603
48604
48605
48606
48607
48608
48609
48610
48611
48612
48613
48614
48615
48616
48617
48618
48619
48620
48621
48622
48623
48624
48625
48626
48627
48628
48629
48630
48631
48632
48633
48634
48635
48636
48637
48638
48639
48640
48641
48642
48643
48644
48645
48646
48647
48648
48649
48650
48651
48652
48653
48654
48655
48656
48657
48658
48659
48660
48661
48662
48663
48664
48665
48666
48667
48668
48669
48670
48671
48672
48673
48674
48675
48676
48677
48678
48679
48680
48681
48682
48683
48684
48685
48686
48687
48688
48689
48690
48691
48692
48693
48694
48695
48696
48697
48698
48699
48700
48701
48702
48703
48704
48705
48706
48707
48708
48709
48710
48711
48712
48713
48714
48715
48716
48717
48718
48719
48720
48721
48722
48723
48724
48725
48726
48727
48728
48729
48730
48731
48732
48733
48734
48735
48736
48737
48738
48739
48740
48741
48742
48743
48744
48745
48746
48747
48748
48749
48750
48751
48752
48753
48754
48755
48756
48757
48758
48759
48760
48761
48762
48763
48764
48765
48766
48767
48768
48769
48770
48771
48772
48773
48774
48775
48776
48777
48778
48779
48780
48781
48782
48783
48784
48785
48786
48787
48788
48789
48790
48791
48792
48793
48794
48795
48796
48797
48798
48799
48800
48801
48802
48803
48804
48805
48806
48807
48808
48809
48810
48811
48812
48813
48814
48815
48816
48817
48818
48819
48820
48821
48822
48823
48824
48825
48826
48827
48828
48829
48830
48831
48832
48833
48834
48835
48836
48837
48838
48839
48840
48841
48842
48843
48844
48845
48846
48847
48848
48849
48850
48851
48852
48853
48854
48855
48856
48857
48858
48859
48860
48861
48862
48863
48864
48865
48866
48867
48868
48869
48870
48871
48872
48873
48874
48875
48876
48877
48878
48879
48880
48881
48882
48883
48884
48885
48886
48887
48888
48889
48890
48891
48892
48893
48894
48895
48896
48897
48898
48899
48900
48901
48902
48903
48904
48905
48906
48907
48908
48909
48910
48911
48912
48913
48914
48915
48916
48917
48918
48919
48920
48921
48922
48923
48924
48925
48926
48927
48928
48929
48930
48931
48932
48933
48934
48935
48936
48937
48938
48939
48940
48941
48942
48943
48944
48945
48946
48947
48948
48949
48950
48951
48952
48953
48954
48955
48956
48957
48958
48959
48960
48961
48962
48963
48964
48965
48966
48967
48968
48969
48970
48971
48972
48973
48974
48975
48976
48977
48978
48979
48980
48981
48982
48983
48984
48985
48986
48987
48988
48989
48990
48991
48992
48993
48994
48995
48996
48997
48998
48999
49000
49001
49002
49003
49004
49005
49006
49007
49008
49009
49010
49011
49012
49013
49014
49015
49016
49017
49018
49019
49020
49021
49022
49023
49024
49025
49026
49027
49028
49029
49030
49031
49032
49033
49034
49035
49036
49037
49038
49039
49040
49041
49042
49043
49044
49045
49046
49047
49048
49049
49050
49051
49052
49053
49054
49055
49056
49057
49058
49059
49060
49061
49062
49063
49064
49065
49066
49067
49068
49069
49070
49071
49072
49073
49074
49075
49076
49077
49078
49079
49080
49081
49082
49083
49084
49085
49086
49087
49088
49089
49090
49091
49092
49093
49094
49095
49096
49097
49098
49099
49100
49101
49102
49103
49104
49105
49106
49107
49108
49109
49110
49111
49112
49113
49114
49115
49116
49117
49118
49119
49120
49121
49122
49123
49124
49125
49126
49127
49128
49129
49130
49131
49132
49133
49134
49135
49136
49137
49138
49139
49140
49141
49142
49143
49144
49145
49146
49147
49148
49149
49150
49151
49152
49153
49154
49155
49156
49157
49158
49159
49160
49161
49162
49163
49164
49165
49166
49167
49168
49169
49170
49171
49172
49173
49174
49175
49176
49177
49178
49179
49180
49181
49182
49183
49184
49185
49186
49187
49188
49189
49190
49191
49192
49193
49194
49195
49196
49197
49198
49199
49200
49201
49202
49203
49204
49205
49206
49207
49208
49209
49210
49211
49212
49213
49214
49215
49216
49217
49218
49219
49220
49221
49222
49223
49224
49225
49226
49227
49228
49229
49230
49231
49232
49233
49234
49235
49236
49237
49238
49239
49240
49241
49242
49243
49244
49245
49246
49247
49248
49249
49250
49251
49252
49253
49254
49255
49256
49257
49258
49259
49260
49261
49262
49263
49264
49265
49266
49267
49268
49269
49270
49271
49272
49273
49274
49275
49276
49277
49278
49279
49280
49281
49282
49283
49284
49285
49286
49287
49288
49289
49290
49291
49292
49293
49294
49295
49296
49297
49298
49299
49300
49301
49302
49303
49304
49305
49306
49307
49308
49309
49310
49311
49312
49313
49314
49315
49316
49317
49318
49319
49320
49321
49322
49323
49324
49325
49326
49327
49328
49329
49330
49331
49332
49333
49334
49335
49336
49337
49338
49339
49340
49341
49342
49343
49344
49345
49346
49347
49348
49349
49350
49351
49352
49353
49354
49355
49356
49357
49358
49359
49360
49361
49362
49363
49364
49365
49366
49367
49368
49369
49370
49371
49372
49373
49374
49375
49376
49377
49378
49379
49380
49381
49382
49383
49384
49385
49386
49387
49388
49389
49390
49391
49392
49393
49394
49395
49396
49397
49398
49399
49400
49401
49402
49403
49404
49405
49406
49407
49408
49409
49410
49411
49412
49413
49414
49415
49416
49417
49418
49419
49420
49421
49422
49423
49424
49425
49426
49427
49428
49429
49430
49431
49432
49433
49434
49435
49436
49437
49438
49439
49440
49441
49442
49443
49444
49445
49446
49447
49448
49449
49450
49451
49452
49453
49454
49455
49456
49457
49458
49459
49460
49461
49462
49463
49464
49465
49466
49467
49468
49469
49470
49471
49472
49473
49474
49475
49476
49477
49478
49479
49480
49481
49482
49483
49484
49485
49486
49487
49488
49489
49490
49491
49492
49493
49494
49495
49496
49497
49498
49499
49500
49501
49502
49503
49504
49505
49506
49507
49508
49509
49510
49511
49512
49513
49514
49515
49516
49517
49518
49519
49520
49521
49522
49523
49524
49525
49526
49527
49528
49529
49530
49531
49532
49533
49534
49535
49536
49537
49538
49539
49540
49541
49542
49543
49544
49545
49546
49547
49548
49549
49550
49551
49552
49553
49554
49555
49556
49557
49558
49559
49560
49561
49562
49563
49564
49565
49566
49567
49568
49569
49570
49571
49572
49573
49574
49575
49576
49577
49578
49579
49580
49581
49582
49583
49584
49585
49586
49587
49588
49589
49590
49591
49592
49593
49594
49595
49596
49597
49598
49599
49600
49601
49602
49603
49604
49605
49606
49607
49608
49609
49610
49611
49612
49613
49614
49615
49616
49617
49618
49619
49620
49621
49622
49623
49624
49625
49626
49627
49628
49629
49630
49631
49632
49633
49634
49635
49636
49637
49638
49639
49640
49641
49642
49643
49644
49645
49646
49647
49648
49649
49650
49651
49652
49653
49654
49655
49656
49657
49658
49659
49660
49661
49662
49663
49664
49665
49666
49667
49668
49669
49670
49671
49672
49673
49674
49675
49676
49677
49678
49679
49680
49681
49682
49683
49684
49685
49686
49687
49688
49689
49690
49691
49692
49693
49694
49695
49696
49697
49698
49699
49700
49701
49702
49703
49704
49705
49706
49707
49708
49709
49710
49711
49712
49713
49714
49715
49716
49717
49718
49719
49720
49721
49722
49723
49724
49725
49726
49727
49728
49729
49730
49731
49732
49733
49734
49735
49736
49737
49738
49739
49740
49741
49742
49743
49744
49745
49746
49747
49748
49749
49750
49751
49752
49753
49754
49755
49756
49757
49758
49759
49760
49761
49762
49763
49764
49765
49766
49767
49768
49769
49770
49771
49772
49773
49774
49775
49776
49777
49778
49779
49780
49781
49782
49783
49784
49785
49786
49787
49788
49789
49790
49791
49792
49793
49794
49795
49796
49797
49798
49799
49800
49801
49802
49803
49804
49805
49806
49807
49808
49809
49810
49811
49812
49813
49814
49815
49816
49817
49818
49819
49820
49821
49822
49823
49824
49825
49826
49827
49828
49829
49830
49831
49832
49833
49834
49835
49836
49837
49838
49839
49840
49841
49842
49843
49844
49845
49846
49847
49848
49849
49850
49851
49852
49853
49854
49855
49856
49857
49858
49859
49860
49861
49862
49863
49864
49865
49866
49867
49868
49869
49870
49871
49872
49873
49874
49875
49876
49877
49878
49879
49880
49881
49882
49883
49884
49885
49886
49887
49888
49889
49890
49891
49892
49893
49894
49895
49896
49897
49898
49899
49900
49901
49902
49903
49904
49905
49906
49907
49908
49909
49910
49911
49912
49913
49914
49915
49916
49917
49918
49919
49920
49921
49922
49923
49924
49925
49926
49927
49928
49929
49930
49931
49932
49933
49934
49935
49936
49937
49938
49939
49940
49941
49942
49943
49944
49945
49946
49947
49948
49949
49950
49951
49952
49953
49954
49955
49956
49957
49958
49959
49960
49961
49962
49963
49964
49965
49966
49967
49968
49969
49970
49971
49972
49973
49974
49975
49976
49977
49978
49979
49980
49981
49982
49983
49984
49985
49986
49987
49988
49989
49990
49991
49992
49993
49994
49995
49996
49997
49998
49999
50000
50001
50002
50003
50004
50005
50006
50007
50008
50009
50010
50011
50012
50013
50014
50015
50016
50017
50018
50019
50020
50021
50022
50023
50024
50025
50026
50027
50028
50029
50030
50031
50032
50033
50034
50035
50036
50037
50038
50039
50040
50041
50042
50043
50044
50045
50046
50047
50048
50049
50050
50051
50052
50053
50054
50055
50056
50057
50058
50059
50060
50061
50062
50063
50064
50065
50066
50067
50068
50069
50070
50071
50072
50073
50074
50075
50076
50077
50078
50079
50080
50081
50082
50083
50084
50085
50086
50087
50088
50089
50090
50091
50092
50093
50094
50095
50096
50097
50098
50099
50100
50101
50102
50103
50104
50105
50106
50107
50108
50109
50110
50111
50112
50113
50114
50115
50116
50117
50118
50119
50120
50121
50122
50123
50124
50125
50126
50127
50128
50129
50130
50131
50132
50133
50134
50135
50136
50137
50138
50139
50140
50141
50142
50143
50144
50145
50146
50147
50148
50149
50150
50151
50152
50153
50154
50155
50156
50157
50158
50159
50160
50161
50162
50163
50164
50165
50166
50167
50168
50169
50170
50171
50172
50173
50174
50175
50176
50177
50178
50179
50180
50181
50182
50183
50184
50185
50186
50187
50188
50189
50190
50191
50192
50193
50194
50195
50196
50197
50198
50199
50200
50201
50202
50203
50204
50205
50206
50207
50208
50209
50210
50211
50212
50213
50214
50215
50216
50217
50218
50219
50220
50221
50222
50223
50224
50225
50226
50227
50228
50229
50230
50231
50232
50233
50234
50235
50236
50237
50238
50239
50240
50241
50242
50243
50244
50245
50246
50247
50248
50249
50250
50251
50252
50253
50254
50255
50256
50257
50258
50259
50260
50261
50262
50263
50264
50265
50266
50267
50268
50269
50270
50271
50272
50273
50274
50275
50276
50277
50278
50279
50280
50281
50282
50283
50284
50285
50286
50287
50288
50289
50290
50291
50292
50293
50294
50295
50296
50297
50298
50299
50300
50301
50302
50303
50304
50305
50306
50307
50308
50309
50310
50311
50312
50313
50314
50315
50316
50317
50318
50319
50320
50321
50322
50323
50324
50325
50326
50327
50328
50329
50330
50331
50332
50333
50334
50335
50336
50337
50338
50339
50340
50341
50342
50343
50344
50345
50346
50347
50348
50349
50350
50351
50352
50353
50354
50355
50356
50357
50358
50359
50360
50361
50362
50363
50364
50365
50366
50367
50368
50369
50370
50371
50372
50373
50374
50375
50376
50377
50378
50379
50380
50381
50382
50383
50384
50385
50386
50387
50388
50389
50390
50391
50392
50393
50394
50395
50396
50397
50398
50399
50400
50401
50402
50403
50404
50405
50406
50407
50408
50409
50410
50411
50412
50413
50414
50415
50416
50417
50418
50419
50420
50421
50422
50423
50424
50425
50426
50427
50428
50429
50430
50431
50432
50433
50434
50435
50436
50437
50438
50439
50440
50441
50442
50443
50444
50445
50446
50447
50448
50449
50450
50451
50452
50453
50454
50455
50456
50457
50458
50459
50460
50461
50462
50463
50464
50465
50466
50467
50468
50469
50470
50471
50472
50473
50474
50475
50476
50477
50478
50479
50480
50481
50482
50483
50484
50485
50486
50487
50488
50489
50490
50491
50492
50493
50494
50495
50496
50497
50498
50499
50500
50501
50502
50503
50504
50505
50506
50507
50508
50509
50510
50511
50512
50513
50514
50515
50516
50517
50518
50519
50520
50521
50522
50523
50524
50525
50526
50527
50528
50529
50530
50531
50532
50533
50534
50535
50536
50537
50538
50539
50540
50541
50542
50543
50544
50545
50546
50547
50548
50549
50550
50551
50552
50553
50554
50555
50556
50557
50558
50559
50560
50561
50562
50563
50564
50565
50566
50567
50568
50569
50570
50571
50572
50573
50574
50575
50576
50577
50578
50579
50580
50581
50582
50583
50584
50585
50586
50587
50588
50589
50590
50591
50592
50593
50594
50595
50596
50597
50598
50599
50600
50601
50602
50603
50604
50605
50606
50607
50608
50609
50610
50611
50612
50613
50614
50615
50616
50617
50618
50619
50620
50621
50622
50623
50624
50625
50626
50627
50628
50629
50630
50631
50632
50633
50634
50635
50636
50637
50638
50639
50640
50641
50642
50643
50644
50645
50646
50647
50648
50649
50650
50651
50652
50653
50654
50655
50656
50657
50658
50659
50660
50661
50662
50663
50664
50665
50666
50667
50668
50669
50670
50671
50672
50673
50674
50675
50676
50677
50678
50679
50680
50681
50682
50683
50684
50685
50686
50687
50688
50689
50690
50691
50692
50693
50694
50695
50696
50697
50698
50699
50700
50701
50702
50703
50704
50705
50706
50707
50708
50709
50710
50711
50712
50713
50714
50715
50716
50717
50718
50719
50720
50721
50722
50723
50724
50725
50726
50727
50728
50729
50730
50731
50732
50733
50734
50735
50736
50737
50738
50739
50740
50741
50742
50743
50744
50745
50746
50747
50748
50749
50750
50751
50752
50753
50754
50755
50756
50757
50758
50759
50760
50761
50762
50763
50764
50765
50766
50767
50768
50769
50770
50771
50772
50773
50774
50775
50776
50777
50778
50779
50780
50781
50782
50783
50784
50785
50786
50787
50788
50789
50790
50791
50792
50793
50794
50795
50796
50797
50798
50799
50800
50801
50802
50803
50804
50805
50806
50807
50808
50809
50810
50811
50812
50813
50814
50815
50816
50817
50818
50819
50820
50821
50822
50823
50824
50825
50826
50827
50828
50829
50830
50831
50832
50833
50834
50835
50836
50837
50838
50839
50840
50841
50842
50843
50844
50845
50846
50847
50848
50849
50850
50851
50852
50853
50854
50855
50856
50857
50858
50859
50860
50861
50862
50863
50864
50865
50866
50867
50868
50869
50870
50871
50872
50873
50874
50875
50876
50877
50878
50879
50880
50881
50882
50883
50884
50885
50886
50887
50888
50889
50890
50891
50892
50893
50894
50895
50896
50897
50898
50899
50900
50901
50902
50903
50904
50905
50906
50907
50908
50909
50910
50911
50912
50913
50914
50915
50916
50917
50918
50919
50920
50921
50922
50923
50924
50925
50926
50927
50928
50929
50930
50931
50932
50933
50934
50935
50936
50937
50938
50939
50940
50941
50942
50943
50944
50945
50946
50947
50948
50949
50950
50951
50952
50953
50954
50955
50956
50957
50958
50959
50960
50961
50962
50963
50964
50965
50966
50967
50968
50969
50970
50971
50972
50973
50974
50975
50976
50977
50978
50979
50980
50981
50982
50983
50984
50985
50986
50987
50988
50989
50990
50991
50992
50993
50994
50995
50996
50997
50998
50999
51000
51001
51002
51003
51004
51005
51006
51007
51008
51009
51010
51011
51012
51013
51014
51015
51016
51017
51018
51019
51020
51021
51022
51023
51024
51025
51026
51027
51028
51029
51030
51031
51032
51033
51034
51035
51036
51037
51038
51039
51040
51041
51042
51043
51044
51045
51046
51047
51048
51049
51050
51051
51052
51053
51054
51055
51056
51057
51058
51059
51060
51061
51062
51063
51064
51065
51066
51067
51068
51069
51070
51071
51072
51073
51074
51075
51076
51077
51078
51079
51080
51081
51082
51083
51084
51085
51086
51087
51088
51089
51090
51091
51092
51093
51094
51095
51096
51097
51098
51099
51100
51101
51102
51103
51104
51105
51106
51107
51108
51109
51110
51111
51112
51113
51114
51115
51116
51117
51118
51119
51120
51121
51122
51123
51124
51125
51126
51127
51128
51129
51130
51131
51132
51133
51134
51135
51136
51137
51138
51139
51140
51141
51142
51143
51144
51145
51146
51147
51148
51149
51150
51151
51152
51153
51154
51155
51156
51157
51158
51159
51160
51161
51162
51163
51164
51165
51166
51167
51168
51169
51170
51171
51172
51173
51174
51175
51176
51177
51178
51179
51180
51181
51182
51183
51184
51185
51186
51187
51188
51189
51190
51191
51192
51193
51194
51195
51196
51197
51198
51199
51200
51201
51202
51203
51204
51205
51206
51207
51208
51209
51210
51211
51212
51213
51214
51215
51216
51217
51218
51219
51220
51221
51222
51223
51224
51225
51226
51227
51228
51229
51230
51231
51232
51233
51234
51235
51236
51237
51238
51239
51240
51241
51242
51243
51244
51245
51246
51247
51248
51249
51250
51251
51252
51253
51254
51255
51256
51257
51258
51259
51260
51261
51262
51263
51264
51265
51266
51267
51268
51269
51270
51271
51272
51273
51274
51275
51276
51277
51278
51279
51280
51281
51282
51283
51284
51285
51286
51287
51288
51289
51290
51291
51292
51293
51294
51295
51296
51297
51298
51299
51300
51301
51302
51303
51304
51305
51306
51307
51308
51309
51310
51311
51312
51313
51314
51315
51316
51317
51318
51319
51320
51321
51322
51323
51324
51325
51326
51327
51328
51329
51330
51331
51332
51333
51334
51335
51336
51337
51338
51339
51340
51341
51342
51343
51344
51345
51346
51347
51348
51349
51350
51351
51352
51353
51354
51355
51356
51357
51358
51359
51360
51361
51362
51363
51364
51365
51366
51367
51368
51369
51370
51371
51372
51373
51374
51375
51376
51377
51378
51379
51380
51381
51382
51383
51384
51385
51386
51387
51388
51389
51390
51391
51392
51393
51394
51395
51396
51397
51398
51399
51400
51401
51402
51403
51404
51405
51406
51407
51408
51409
51410
51411
51412
51413
51414
51415
51416
51417
51418
51419
51420
51421
51422
51423
51424
51425
51426
51427
51428
51429
51430
51431
51432
51433
51434
51435
51436
51437
51438
51439
51440
51441
51442
51443
51444
51445
51446
51447
51448
51449
51450
51451
51452
51453
51454
51455
51456
51457
51458
51459
51460
51461
51462
51463
51464
51465
51466
51467
51468
51469
51470
51471
51472
51473
51474
51475
51476
51477
51478
51479
51480
51481
51482
51483
51484
51485
51486
51487
51488
51489
51490
51491
51492
51493
51494
51495
51496
51497
51498
51499
51500
51501
51502
51503
51504
51505
51506
51507
51508
51509
51510
51511
51512
51513
51514
51515
51516
51517
51518
51519
51520
51521
51522
51523
51524
51525
51526
51527
51528
51529
51530
51531
51532
51533
51534
51535
51536
51537
51538
51539
51540
51541
51542
51543
51544
51545
51546
51547
51548
51549
51550
51551
51552
51553
51554
51555
51556
51557
51558
51559
51560
51561
51562
51563
51564
51565
51566
51567
51568
51569
51570
51571
51572
51573
51574
51575
51576
51577
51578
51579
51580
51581
51582
51583
51584
51585
51586
51587
51588
51589
51590
51591
51592
51593
51594
51595
51596
51597
51598
51599
51600
51601
51602
51603
51604
51605
51606
51607
51608
51609
51610
51611
51612
51613
51614
51615
51616
51617
51618
51619
51620
51621
51622
51623
51624
51625
51626
51627
51628
51629
51630
51631
51632
51633
51634
51635
51636
51637
51638
51639
51640
51641
51642
51643
51644
51645
51646
51647
51648
51649
51650
51651
51652
51653
51654
51655
51656
51657
51658
51659
51660
51661
51662
51663
51664
51665
51666
51667
51668
51669
51670
51671
51672
51673
51674
51675
51676
51677
51678
51679
51680
51681
51682
51683
51684
51685
51686
51687
51688
51689
51690
51691
51692
51693
51694
51695
51696
51697
51698
51699
51700
51701
51702
51703
51704
51705
51706
51707
51708
51709
51710
51711
51712
51713
51714
51715
51716
51717
51718
51719
51720
51721
51722
51723
51724
51725
51726
51727
51728
51729
51730
51731
51732
51733
51734
51735
51736
51737
51738
51739
51740
51741
51742
51743
51744
51745
51746
51747
51748
51749
51750
51751
51752
51753
51754
51755
51756
51757
51758
51759
51760
51761
51762
51763
51764
51765
51766
51767
51768
51769
51770
51771
51772
51773
51774
51775
51776
51777
51778
51779
51780
51781
51782
51783
51784
51785
51786
51787
51788
51789
51790
51791
51792
51793
51794
51795
51796
51797
51798
51799
51800
51801
51802
51803
51804
51805
51806
51807
51808
51809
51810
51811
51812
51813
51814
51815
51816
51817
51818
51819
51820
51821
51822
51823
51824
51825
51826
51827
51828
51829
51830
51831
51832
51833
51834
51835
51836
51837
51838
51839
51840
51841
51842
51843
51844
51845
51846
51847
51848
51849
51850
51851
51852
51853
51854
51855
51856
51857
51858
51859
51860
51861
51862
51863
51864
51865
51866
51867
51868
51869
51870
51871
51872
51873
51874
51875
51876
51877
51878
51879
51880
51881
51882
51883
51884
51885
51886
51887
51888
51889
51890
51891
51892
51893
51894
51895
51896
51897
51898
51899
51900
51901
51902
51903
51904
51905
51906
51907
51908
51909
51910
51911
51912
51913
51914
51915
51916
51917
51918
51919
51920
51921
51922
51923
51924
51925
51926
51927
51928
51929
51930
51931
51932
51933
51934
51935
51936
51937
51938
51939
51940
51941
51942
51943
51944
51945
51946
51947
51948
51949
51950
51951
51952
51953
51954
51955
51956
51957
51958
51959
51960
51961
51962
51963
51964
51965
51966
51967
51968
51969
51970
51971
51972
51973
51974
51975
51976
51977
51978
51979
51980
51981
51982
51983
51984
51985
51986
51987
51988
51989
51990
51991
51992
51993
51994
51995
51996
51997
51998
51999
52000
52001
52002
52003
52004
52005
52006
52007
52008
52009
52010
52011
52012
52013
52014
52015
52016
52017
52018
52019
52020
52021
52022
52023
52024
52025
52026
52027
52028
52029
52030
52031
52032
52033
52034
52035
52036
52037
52038
52039
52040
52041
52042
52043
52044
52045
52046
52047
52048
52049
52050
52051
52052
52053
52054
52055
52056
52057
52058
52059
52060
52061
52062
52063
52064
52065
52066
52067
52068
52069
52070
52071
52072
52073
52074
52075
52076
52077
52078
52079
52080
52081
52082
52083
52084
52085
52086
52087
52088
52089
52090
52091
52092
52093
52094
52095
52096
52097
52098
52099
52100
52101
52102
52103
52104
52105
52106
52107
52108
52109
52110
52111
52112
52113
52114
52115
52116
52117
52118
52119
52120
52121
52122
52123
52124
52125
52126
52127
52128
52129
52130
52131
52132
52133
52134
52135
52136
52137
52138
52139
52140
52141
52142
52143
52144
52145
52146
52147
52148
52149
52150
52151
52152
52153
52154
52155
52156
52157
52158
52159
52160
52161
52162
52163
52164
52165
52166
52167
52168
52169
52170
52171
52172
52173
52174
52175
52176
52177
52178
52179
52180
52181
52182
52183
52184
52185
52186
52187
52188
52189
52190
52191
52192
52193
52194
52195
52196
52197
52198
52199
52200
52201
52202
52203
52204
52205
52206
52207
52208
52209
52210
52211
52212
52213
52214
52215
52216
52217
52218
52219
52220
52221
52222
52223
52224
52225
52226
52227
52228
52229
52230
52231
52232
52233
52234
52235
52236
52237
52238
52239
52240
52241
52242
52243
52244
52245
52246
52247
52248
52249
52250
52251
52252
52253
52254
52255
52256
52257
52258
52259
52260
52261
52262
52263
52264
52265
52266
52267
52268
52269
52270
52271
52272
52273
52274
52275
52276
52277
52278
52279
52280
52281
52282
52283
52284
52285
52286
52287
52288
52289
52290
52291
52292
52293
52294
52295
52296
52297
52298
52299
52300
52301
52302
52303
52304
52305
52306
52307
52308
52309
52310
52311
52312
52313
52314
52315
52316
52317
52318
52319
52320
52321
52322
52323
52324
52325
52326
52327
52328
52329
52330
52331
52332
52333
52334
52335
52336
52337
52338
52339
52340
52341
52342
52343
52344
52345
52346
52347
52348
52349
52350
52351
52352
52353
52354
52355
52356
52357
52358
52359
52360
52361
52362
52363
52364
52365
52366
52367
52368
52369
52370
52371
52372
52373
52374
52375
52376
52377
52378
52379
52380
52381
52382
52383
52384
52385
52386
52387
52388
52389
52390
52391
52392
52393
52394
52395
52396
52397
52398
52399
52400
52401
52402
52403
52404
52405
52406
52407
52408
52409
52410
52411
52412
52413
52414
52415
52416
52417
52418
52419
52420
52421
52422
52423
52424
52425
52426
52427
52428
52429
52430
52431
52432
52433
52434
52435
52436
52437
52438
52439
52440
52441
52442
52443
52444
52445
52446
52447
52448
52449
52450
52451
52452
52453
52454
52455
52456
52457
52458
52459
52460
52461
52462
52463
52464
52465
52466
52467
52468
52469
52470
52471
52472
52473
52474
52475
52476
52477
52478
52479
52480
52481
52482
52483
52484
52485
52486
52487
52488
52489
52490
52491
52492
52493
52494
52495
52496
52497
52498
52499
52500
52501
52502
52503
52504
52505
52506
52507
52508
52509
52510
52511
52512
52513
52514
52515
52516
52517
52518
52519
52520
52521
52522
52523
52524
52525
52526
52527
52528
52529
52530
52531
52532
52533
52534
52535
52536
52537
52538
52539
52540
52541
52542
52543
52544
52545
52546
52547
52548
52549
52550
52551
52552
52553
52554
52555
52556
52557
52558
52559
52560
52561
52562
52563
52564
52565
52566
52567
52568
52569
52570
52571
52572
52573
52574
52575
52576
52577
52578
52579
52580
52581
52582
52583
52584
52585
52586
52587
52588
52589
52590
52591
52592
52593
52594
52595
52596
52597
52598
52599
52600
52601
52602
52603
52604
52605
52606
52607
52608
52609
52610
52611
52612
52613
52614
52615
52616
52617
52618
52619
52620
52621
52622
52623
52624
52625
52626
52627
52628
52629
52630
52631
52632
52633
52634
52635
52636
52637
52638
52639
52640
52641
52642
52643
52644
52645
52646
52647
52648
52649
52650
52651
52652
52653
52654
52655
52656
52657
52658
52659
52660
52661
52662
52663
52664
52665
52666
52667
52668
52669
52670
52671
52672
52673
52674
52675
52676
52677
52678
52679
52680
52681
52682
52683
52684
52685
52686
52687
52688
52689
52690
52691
52692
52693
52694
52695
52696
52697
52698
52699
52700
52701
52702
52703
52704
52705
52706
52707
52708
52709
52710
52711
52712
52713
52714
52715
52716
52717
52718
52719
52720
52721
52722
52723
52724
52725
52726
52727
52728
52729
52730
52731
52732
52733
52734
52735
52736
52737
52738
52739
52740
52741
52742
52743
52744
52745
52746
52747
52748
52749
52750
52751
52752
52753
52754
52755
52756
52757
52758
52759
52760
52761
52762
52763
52764
52765
52766
52767
52768
52769
52770
52771
52772
52773
52774
52775
52776
52777
52778
52779
52780
52781
52782
52783
52784
52785
52786
52787
52788
52789
52790
52791
52792
52793
52794
52795
52796
52797
52798
52799
52800
52801
52802
52803
52804
52805
52806
52807
52808
52809
52810
52811
52812
52813
52814
52815
52816
52817
52818
52819
52820
52821
52822
52823
52824
52825
52826
52827
52828
52829
52830
52831
52832
52833
52834
52835
52836
52837
52838
52839
52840
52841
52842
52843
52844
52845
52846
52847
52848
52849
52850
52851
52852
52853
52854
52855
52856
52857
52858
52859
52860
52861
52862
52863
52864
52865
52866
52867
52868
52869
52870
52871
52872
52873
52874
52875
52876
52877
52878
52879
52880
52881
52882
52883
52884
52885
52886
52887
52888
52889
52890
52891
52892
52893
52894
52895
52896
52897
52898
52899
52900
52901
52902
52903
52904
52905
52906
52907
52908
52909
52910
52911
52912
52913
52914
52915
52916
52917
52918
52919
52920
52921
52922
52923
52924
52925
52926
52927
52928
52929
52930
52931
52932
52933
52934
52935
52936
52937
52938
52939
52940
52941
52942
52943
52944
52945
52946
52947
52948
52949
52950
52951
52952
52953
52954
52955
52956
52957
52958
52959
52960
52961
52962
52963
52964
52965
52966
52967
52968
52969
52970
52971
52972
52973
52974
52975
52976
52977
52978
52979
52980
52981
52982
52983
52984
52985
52986
52987
52988
52989
52990
52991
52992
52993
52994
52995
52996
52997
52998
52999
53000
53001
53002
53003
53004
53005
53006
53007
53008
53009
53010
53011
53012
53013
53014
53015
53016
53017
53018
53019
53020
53021
53022
53023
53024
53025
53026
53027
53028
53029
53030
53031
53032
53033
53034
53035
53036
53037
53038
53039
53040
53041
53042
53043
53044
53045
53046
53047
53048
53049
53050
53051
53052
53053
53054
53055
53056
53057
53058
53059
53060
53061
53062
53063
53064
53065
53066
53067
53068
53069
53070
53071
53072
53073
53074
53075
53076
53077
53078
53079
53080
53081
53082
53083
53084
53085
53086
53087
53088
53089
53090
53091
53092
53093
53094
53095
53096
53097
53098
53099
53100
53101
53102
53103
53104
53105
53106
53107
53108
53109
53110
53111
53112
53113
53114
53115
53116
53117
53118
53119
53120
53121
53122
53123
53124
53125
53126
53127
53128
53129
53130
53131
53132
53133
53134
53135
53136
53137
53138
53139
53140
53141
53142
53143
53144
53145
53146
53147
53148
53149
53150
53151
53152
53153
53154
53155
53156
53157
53158
53159
53160
53161
53162
53163
53164
53165
53166
53167
53168
53169
53170
53171
53172
53173
53174
53175
53176
53177
53178
53179
53180
53181
53182
53183
53184
53185
53186
53187
53188
53189
53190
53191
53192
53193
53194
53195
53196
53197
53198
53199
53200
53201
53202
53203
53204
53205
53206
53207
53208
53209
53210
53211
53212
53213
53214
53215
53216
53217
53218
53219
53220
53221
53222
53223
53224
53225
53226
53227
53228
53229
53230
53231
53232
53233
53234
53235
53236
53237
53238
53239
53240
53241
53242
53243
53244
53245
53246
53247
53248
53249
53250
53251
53252
53253
53254
53255
53256
53257
53258
53259
53260
53261
53262
53263
53264
53265
53266
53267
53268
53269
53270
53271
53272
53273
53274
53275
53276
53277
53278
53279
53280
53281
53282
53283
53284
53285
53286
53287
53288
53289
53290
53291
53292
53293
53294
53295
53296
53297
53298
53299
53300
53301
53302
53303
53304
53305
53306
53307
53308
53309
53310
53311
53312
53313
53314
53315
53316
53317
53318
53319
53320
53321
53322
53323
53324
53325
53326
53327
53328
53329
53330
53331
53332
53333
53334
53335
53336
53337
53338
53339
53340
53341
53342
53343
53344
53345
53346
53347
53348
53349
53350
53351
53352
53353
53354
53355
53356
53357
53358
53359
53360
53361
53362
53363
53364
53365
53366
53367
53368
53369
53370
53371
53372
53373
53374
53375
53376
53377
53378
53379
53380
53381
53382
53383
53384
53385
53386
53387
53388
53389
53390
53391
53392
53393
53394
53395
53396
53397
53398
53399
53400
53401
53402
53403
53404
53405
53406
53407
53408
53409
53410
53411
53412
53413
53414
53415
53416
53417
53418
53419
53420
53421
53422
53423
53424
53425
53426
53427
53428
53429
53430
53431
53432
53433
53434
53435
53436
53437
53438
53439
53440
53441
53442
53443
53444
53445
53446
53447
53448
53449
53450
53451
53452
53453
53454
53455
53456
53457
53458
53459
53460
53461
53462
53463
53464
53465
53466
53467
53468
53469
53470
53471
53472
53473
53474
53475
53476
53477
53478
53479
53480
53481
53482
53483
53484
53485
53486
53487
53488
53489
53490
53491
53492
53493
53494
53495
53496
53497
53498
53499
53500
53501
53502
53503
53504
53505
53506
53507
53508
53509
53510
53511
53512
53513
53514
53515
53516
53517
53518
53519
53520
53521
53522
53523
53524
53525
53526
53527
53528
53529
53530
53531
53532
53533
53534
53535
53536
53537
53538
53539
53540
53541
53542
53543
53544
53545
53546
53547
53548
53549
53550
53551
53552
53553
53554
53555
53556
53557
53558
53559
53560
53561
53562
53563
53564
53565
53566
53567
53568
53569
53570
53571
53572
53573
53574
53575
53576
53577
53578
53579
53580
53581
53582
53583
53584
53585
53586
53587
53588
53589
53590
53591
53592
53593
53594
53595
53596
53597
53598
53599
53600
53601
53602
53603
53604
53605
53606
53607
53608
53609
53610
53611
53612
53613
53614
53615
53616
53617
53618
53619
53620
53621
53622
53623
53624
53625
53626
53627
53628
53629
53630
53631
53632
53633
53634
53635
53636
53637
53638
53639
53640
53641
53642
53643
53644
53645
53646
53647
53648
53649
53650
53651
53652
53653
53654
53655
53656
53657
53658
53659
53660
53661
53662
53663
53664
53665
53666
53667
53668
53669
53670
53671
53672
53673
53674
53675
53676
53677
53678
53679
53680
53681
53682
53683
53684
53685
53686
53687
53688
53689
53690
53691
53692
53693
53694
53695
53696
53697
53698
53699
53700
53701
53702
53703
53704
53705
53706
53707
53708
53709
53710
53711
53712
53713
53714
53715
53716
53717
53718
53719
53720
53721
53722
53723
53724
53725
53726
53727
53728
53729
53730
53731
53732
53733
53734
53735
53736
53737
53738
53739
53740
53741
53742
53743
53744
53745
53746
53747
53748
53749
53750
53751
53752
53753
53754
53755
53756
53757
53758
53759
53760
53761
53762
53763
53764
53765
53766
53767
53768
53769
53770
53771
53772
53773
53774
53775
53776
53777
53778
53779
53780
53781
53782
53783
53784
53785
53786
53787
53788
53789
53790
53791
53792
53793
53794
53795
53796
53797
53798
53799
53800
53801
53802
53803
53804
53805
53806
53807
53808
53809
53810
53811
53812
53813
53814
53815
53816
53817
53818
53819
53820
53821
53822
53823
53824
53825
53826
53827
53828
53829
53830
53831
53832
53833
53834
53835
53836
53837
53838
53839
53840
53841
53842
53843
53844
53845
53846
53847
53848
53849
53850
53851
53852
53853
53854
53855
53856
53857
53858
53859
53860
53861
53862
53863
53864
53865
53866
53867
53868
53869
53870
53871
53872
53873
53874
53875
53876
53877
53878
53879
53880
53881
53882
53883
53884
53885
53886
53887
53888
53889
53890
53891
53892
53893
53894
53895
53896
53897
53898
53899
53900
53901
53902
53903
53904
53905
53906
53907
53908
53909
53910
53911
53912
53913
53914
53915
53916
53917
53918
53919
53920
53921
53922
53923
53924
53925
53926
53927
53928
53929
53930
53931
53932
53933
53934
53935
53936
53937
53938
53939
53940
53941
53942
53943
53944
53945
53946
53947
53948
53949
53950
53951
53952
53953
53954
53955
53956
53957
53958
53959
53960
53961
53962
53963
53964
53965
53966
53967
53968
53969
53970
53971
53972
53973
53974
53975
53976
53977
53978
53979
53980
53981
53982
53983
53984
53985
53986
53987
53988
53989
53990
53991
53992
53993
53994
53995
53996
53997
53998
53999
54000
54001
54002
54003
54004
54005
54006
54007
54008
54009
54010
54011
54012
54013
54014
54015
54016
54017
54018
54019
54020
54021
54022
54023
54024
54025
54026
54027
54028
54029
54030
54031
54032
54033
54034
54035
54036
54037
54038
54039
54040
54041
54042
54043
54044
54045
54046
54047
54048
54049
54050
54051
54052
54053
54054
54055
54056
54057
54058
54059
54060
54061
54062
54063
54064
54065
54066
54067
54068
54069
54070
54071
54072
54073
54074
54075
54076
54077
54078
54079
54080
54081
54082
54083
54084
54085
54086
54087
54088
54089
54090
54091
54092
54093
54094
54095
54096
54097
54098
54099
54100
54101
54102
54103
54104
54105
54106
54107
54108
54109
54110
54111
54112
54113
54114
54115
54116
54117
54118
54119
54120
54121
54122
54123
54124
54125
54126
54127
54128
54129
54130
54131
54132
54133
54134
54135
54136
54137
54138
54139
54140
54141
54142
54143
54144
54145
54146
54147
54148
54149
54150
54151
54152
54153
54154
54155
54156
54157
54158
54159
54160
54161
54162
54163
54164
54165
54166
54167
54168
54169
54170
54171
54172
54173
54174
54175
54176
54177
54178
54179
54180
54181
54182
54183
54184
54185
54186
54187
54188
54189
54190
54191
54192
54193
54194
54195
54196
54197
54198
54199
54200
54201
54202
54203
54204
54205
54206
54207
54208
54209
54210
54211
54212
54213
54214
54215
54216
54217
54218
54219
54220
54221
54222
54223
54224
54225
54226
54227
54228
54229
54230
54231
54232
54233
54234
54235
54236
54237
54238
54239
54240
54241
54242
54243
54244
54245
54246
54247
54248
54249
54250
54251
54252
54253
54254
54255
54256
54257
54258
54259
54260
54261
54262
54263
54264
54265
54266
54267
54268
54269
54270
54271
54272
54273
54274
54275
54276
54277
54278
54279
54280
54281
54282
54283
54284
54285
54286
54287
54288
54289
54290
54291
54292
54293
54294
54295
54296
54297
54298
54299
54300
54301
54302
54303
54304
54305
54306
54307
54308
54309
54310
54311
54312
54313
54314
54315
54316
54317
54318
54319
54320
54321
54322
54323
54324
54325
54326
54327
54328
54329
54330
54331
54332
54333
54334
54335
54336
54337
54338
54339
54340
54341
54342
54343
54344
54345
54346
54347
54348
54349
54350
54351
54352
54353
54354
54355
54356
54357
54358
54359
54360
54361
54362
54363
54364
54365
54366
54367
54368
54369
54370
54371
54372
54373
54374
54375
54376
54377
54378
54379
54380
54381
54382
54383
54384
54385
54386
54387
54388
54389
54390
54391
54392
54393
54394
54395
54396
54397
54398
54399
54400
54401
54402
54403
54404
54405
54406
54407
54408
54409
54410
54411
54412
54413
54414
54415
54416
54417
54418
54419
54420
54421
54422
54423
54424
54425
54426
54427
54428
54429
54430
54431
54432
54433
54434
54435
54436
54437
54438
54439
54440
54441
54442
54443
54444
54445
54446
54447
54448
54449
54450
54451
54452
54453
54454
54455
54456
54457
54458
54459
54460
54461
54462
54463
54464
54465
54466
54467
54468
54469
54470
54471
54472
54473
54474
54475
54476
54477
54478
54479
54480
54481
54482
54483
54484
54485
54486
54487
54488
54489
54490
54491
54492
54493
54494
54495
54496
54497
54498
54499
54500
54501
54502
54503
54504
54505
54506
54507
54508
54509
54510
54511
54512
54513
54514
54515
54516
54517
54518
54519
54520
54521
54522
54523
54524
54525
54526
54527
54528
54529
54530
54531
54532
54533
54534
54535
54536
54537
54538
54539
54540
54541
54542
54543
54544
54545
54546
54547
54548
54549
54550
54551
54552
54553
54554
54555
54556
54557
54558
54559
54560
54561
54562
54563
54564
54565
54566
54567
54568
54569
54570
54571
54572
54573
54574
54575
54576
54577
54578
54579
54580
54581
54582
54583
54584
54585
54586
54587
54588
54589
54590
54591
54592
54593
54594
54595
54596
54597
54598
54599
54600
54601
54602
54603
54604
54605
54606
54607
54608
54609
54610
54611
54612
54613
54614
54615
54616
54617
54618
54619
54620
54621
54622
54623
54624
54625
54626
54627
54628
54629
54630
54631
54632
54633
54634
54635
54636
54637
54638
54639
54640
54641
54642
54643
54644
54645
54646
54647
54648
54649
54650
54651
54652
54653
54654
54655
54656
54657
54658
54659
54660
54661
54662
54663
54664
54665
54666
54667
54668
54669
54670
54671
54672
54673
54674
54675
54676
54677
54678
54679
54680
54681
54682
54683
54684
54685
54686
54687
54688
54689
54690
54691
54692
54693
54694
54695
54696
54697
54698
54699
54700
54701
54702
54703
54704
54705
54706
54707
54708
54709
54710
54711
54712
54713
54714
54715
54716
54717
54718
54719
54720
54721
54722
54723
54724
54725
54726
54727
54728
54729
54730
54731
54732
54733
54734
54735
54736
54737
54738
54739
54740
54741
54742
54743
54744
54745
54746
54747
54748
54749
54750
54751
54752
54753
54754
54755
54756
54757
54758
54759
54760
54761
54762
54763
54764
54765
54766
54767
54768
54769
54770
54771
54772
54773
54774
54775
54776
54777
54778
54779
54780
54781
54782
54783
54784
54785
54786
54787
54788
54789
54790
54791
54792
54793
54794
54795
54796
54797
54798
54799
54800
54801
54802
54803
54804
54805
54806
54807
54808
54809
54810
54811
54812
54813
54814
54815
54816
54817
54818
54819
54820
54821
54822
54823
54824
54825
54826
54827
54828
54829
54830
54831
54832
54833
54834
54835
54836
54837
54838
54839
54840
54841
54842
54843
54844
54845
54846
54847
54848
54849
54850
54851
54852
54853
54854
54855
54856
54857
54858
54859
54860
54861
54862
54863
54864
54865
54866
54867
54868
54869
54870
54871
54872
54873
54874
54875
54876
54877
54878
54879
54880
54881
54882
54883
54884
54885
54886
54887
54888
54889
54890
54891
54892
54893
54894
54895
54896
54897
54898
54899
54900
54901
54902
54903
54904
54905
54906
54907
54908
54909
54910
54911
54912
54913
54914
54915
54916
54917
54918
54919
54920
54921
54922
54923
54924
54925
54926
54927
54928
54929
54930
54931
54932
54933
54934
54935
54936
54937
54938
54939
54940
54941
54942
54943
54944
54945
54946
54947
54948
54949
54950
54951
54952
54953
54954
54955
54956
54957
54958
54959
54960
54961
54962
54963
54964
54965
54966
54967
54968
54969
54970
54971
54972
54973
54974
54975
54976
54977
54978
54979
54980
54981
54982
54983
54984
54985
54986
54987
54988
54989
54990
54991
54992
54993
54994
54995
54996
54997
54998
54999
55000
55001
55002
55003
55004
55005
55006
55007
55008
55009
55010
55011
55012
55013
55014
55015
55016
55017
55018
55019
55020
55021
55022
55023
55024
55025
55026
55027
55028
55029
55030
55031
55032
55033
55034
55035
55036
55037
55038
55039
55040
55041
55042
55043
55044
55045
55046
55047
55048
55049
55050
55051
55052
55053
55054
55055
55056
55057
55058
55059
55060
55061
55062
55063
55064
55065
55066
55067
55068
55069
55070
55071
55072
55073
55074
55075
55076
55077
55078
55079
55080
55081
55082
55083
55084
55085
55086
55087
55088
55089
55090
55091
55092
55093
55094
55095
55096
55097
55098
55099
55100
55101
55102
55103
55104
55105
55106
55107
55108
55109
55110
55111
55112
55113
55114
55115
55116
55117
55118
55119
55120
55121
55122
55123
55124
55125
55126
55127
55128
55129
55130
55131
55132
55133
55134
55135
55136
55137
55138
55139
55140
55141
55142
55143
55144
55145
55146
55147
55148
55149
55150
55151
55152
55153
55154
55155
55156
55157
55158
55159
55160
55161
55162
55163
55164
55165
55166
55167
55168
55169
55170
55171
55172
55173
55174
55175
55176
55177
55178
55179
55180
55181
55182
55183
55184
55185
55186
55187
55188
55189
55190
55191
55192
55193
55194
55195
55196
55197
55198
55199
55200
55201
55202
55203
55204
55205
55206
55207
55208
55209
55210
55211
55212
55213
55214
55215
55216
55217
55218
55219
55220
55221
55222
55223
55224
55225
55226
55227
55228
55229
55230
55231
55232
55233
55234
55235
55236
55237
55238
55239
55240
55241
55242
55243
55244
55245
55246
55247
55248
55249
55250
55251
55252
55253
55254
55255
55256
55257
55258
55259
55260
55261
55262
55263
55264
55265
55266
55267
55268
55269
55270
55271
55272
55273
55274
55275
55276
55277
55278
55279
55280
55281
55282
55283
55284
55285
55286
55287
55288
55289
55290
55291
55292
55293
55294
55295
55296
55297
55298
55299
55300
55301
55302
55303
55304
55305
55306
55307
55308
55309
55310
55311
55312
55313
55314
55315
55316
55317
55318
55319
55320
55321
55322
55323
55324
55325
55326
55327
55328
55329
55330
55331
55332
55333
55334
55335
55336
55337
55338
55339
55340
55341
55342
55343
55344
55345
55346
55347
55348
55349
55350
55351
55352
55353
55354
55355
55356
55357
55358
55359
55360
55361
55362
55363
55364
55365
55366
55367
55368
55369
55370
55371
55372
55373
55374
55375
55376
55377
55378
55379
55380
55381
55382
55383
55384
55385
55386
55387
55388
55389
55390
55391
55392
55393
55394
55395
55396
55397
55398
55399
55400
55401
55402
55403
55404
55405
55406
55407
55408
55409
55410
55411
55412
55413
55414
55415
55416
55417
55418
55419
55420
55421
55422
55423
55424
55425
55426
55427
55428
55429
55430
55431
55432
55433
55434
55435
55436
55437
55438
55439
55440
55441
55442
55443
55444
55445
55446
55447
55448
55449
55450
55451
55452
55453
55454
55455
55456
55457
55458
55459
55460
55461
55462
55463
55464
55465
55466
55467
55468
55469
55470
55471
55472
55473
55474
55475
55476
55477
55478
55479
55480
55481
55482
55483
55484
55485
55486
55487
55488
55489
55490
55491
55492
55493
55494
55495
55496
55497
55498
55499
55500
55501
55502
55503
55504
55505
55506
55507
55508
55509
55510
55511
55512
55513
55514
55515
55516
55517
55518
55519
55520
55521
55522
55523
55524
55525
55526
55527
55528
55529
55530
55531
55532
55533
55534
55535
55536
55537
55538
55539
55540
55541
55542
55543
55544
55545
55546
55547
55548
55549
55550
55551
55552
55553
55554
55555
55556
55557
55558
55559
55560
55561
55562
55563
55564
55565
55566
55567
55568
55569
55570
55571
55572
55573
55574
55575
55576
55577
55578
55579
55580
55581
55582
55583
55584
55585
55586
55587
55588
55589
55590
55591
55592
55593
55594
55595
55596
55597
55598
55599
55600
55601
55602
55603
55604
55605
55606
55607
55608
55609
55610
55611
55612
55613
55614
55615
55616
55617
55618
55619
55620
55621
55622
55623
55624
55625
55626
55627
55628
55629
55630
55631
55632
55633
55634
55635
55636
55637
55638
55639
55640
55641
55642
55643
55644
55645
55646
55647
55648
55649
55650
55651
55652
55653
55654
55655
55656
55657
55658
55659
55660
55661
55662
55663
55664
55665
55666
55667
55668
55669
55670
55671
55672
55673
55674
55675
55676
55677
55678
55679
55680
55681
55682
55683
55684
55685
55686
55687
55688
55689
55690
55691
55692
55693
55694
55695
55696
55697
55698
55699
55700
55701
55702
55703
55704
55705
55706
55707
55708
55709
55710
55711
55712
55713
55714
55715
55716
55717
55718
55719
55720
55721
55722
55723
55724
55725
55726
55727
55728
55729
55730
55731
55732
55733
55734
55735
55736
55737
55738
55739
55740
55741
55742
55743
55744
55745
55746
55747
55748
55749
55750
55751
55752
55753
55754
55755
55756
55757
55758
55759
55760
55761
55762
55763
55764
55765
55766
55767
55768
55769
55770
55771
55772
55773
55774
55775
55776
55777
55778
55779
55780
55781
55782
55783
55784
55785
55786
55787
55788
55789
55790
55791
55792
55793
55794
55795
55796
55797
55798
55799
55800
55801
55802
55803
55804
55805
55806
55807
55808
55809
55810
55811
55812
55813
55814
55815
55816
55817
55818
55819
55820
55821
55822
55823
55824
55825
55826
55827
55828
55829
55830
55831
55832
55833
55834
55835
55836
55837
55838
55839
55840
55841
55842
55843
55844
55845
55846
55847
55848
55849
55850
55851
55852
55853
55854
55855
55856
55857
55858
55859
55860
55861
55862
55863
55864
55865
55866
55867
55868
55869
55870
55871
55872
55873
55874
55875
55876
55877
55878
55879
55880
55881
55882
55883
55884
55885
55886
55887
55888
55889
55890
55891
55892
55893
55894
55895
55896
55897
55898
55899
55900
55901
55902
55903
55904
55905
55906
55907
55908
55909
55910
55911
55912
55913
55914
55915
55916
55917
55918
55919
55920
55921
55922
55923
55924
55925
55926
55927
55928
55929
55930
55931
55932
55933
55934
55935
55936
55937
55938
55939
55940
55941
55942
55943
55944
55945
55946
55947
55948
55949
55950
55951
55952
55953
55954
55955
55956
55957
55958
55959
55960
55961
55962
55963
55964
55965
55966
55967
55968
55969
55970
55971
55972
55973
55974
55975
55976
55977
55978
55979
55980
55981
55982
55983
55984
55985
55986
55987
55988
55989
55990
55991
55992
55993
55994
55995
55996
55997
55998
55999
56000
56001
56002
56003
56004
56005
56006
56007
56008
56009
56010
56011
56012
56013
56014
56015
56016
56017
56018
56019
56020
56021
56022
56023
56024
56025
56026
56027
56028
56029
56030
56031
56032
56033
56034
56035
56036
56037
56038
56039
56040
56041
56042
56043
56044
56045
56046
56047
56048
56049
56050
56051
56052
56053
56054
56055
56056
56057
56058
56059
56060
56061
56062
56063
56064
56065
56066
56067
56068
56069
56070
56071
56072
56073
56074
56075
56076
56077
56078
56079
56080
56081
56082
56083
56084
56085
56086
56087
56088
56089
56090
56091
56092
56093
56094
56095
56096
56097
56098
56099
56100
56101
56102
56103
56104
56105
56106
56107
56108
56109
56110
56111
56112
56113
56114
56115
56116
56117
56118
56119
56120
56121
56122
56123
56124
56125
56126
56127
56128
56129
56130
56131
56132
56133
56134
56135
56136
56137
56138
56139
56140
56141
56142
56143
56144
56145
56146
56147
56148
56149
56150
56151
56152
56153
56154
56155
56156
56157
56158
56159
56160
56161
56162
56163
56164
56165
56166
56167
56168
56169
56170
56171
56172
56173
56174
56175
56176
56177
56178
56179
56180
56181
56182
56183
56184
56185
56186
56187
56188
56189
56190
56191
56192
56193
56194
56195
56196
56197
56198
56199
56200
56201
56202
56203
56204
56205
56206
56207
56208
56209
56210
56211
56212
56213
56214
56215
56216
56217
56218
56219
56220
56221
56222
56223
56224
56225
56226
56227
56228
56229
56230
56231
56232
56233
56234
56235
56236
56237
56238
56239
56240
56241
56242
56243
56244
56245
56246
56247
56248
56249
56250
56251
56252
56253
56254
56255
56256
56257
56258
56259
56260
56261
56262
56263
56264
56265
56266
56267
56268
56269
56270
56271
56272
56273
56274
56275
56276
56277
56278
56279
56280
56281
56282
56283
56284
56285
56286
56287
56288
56289
56290
56291
56292
56293
56294
56295
56296
56297
56298
56299
56300
56301
56302
56303
56304
56305
56306
56307
56308
56309
56310
56311
56312
56313
56314
56315
56316
56317
56318
56319
56320
56321
56322
56323
56324
56325
56326
56327
56328
56329
56330
56331
56332
56333
56334
56335
56336
56337
56338
56339
56340
56341
56342
56343
56344
56345
56346
56347
56348
56349
56350
56351
56352
56353
56354
56355
56356
56357
56358
56359
56360
56361
56362
56363
56364
56365
56366
56367
56368
56369
56370
56371
56372
56373
56374
56375
56376
56377
56378
56379
56380
56381
56382
56383
56384
56385
56386
56387
56388
56389
56390
56391
56392
56393
56394
56395
56396
56397
56398
56399
56400
56401
56402
56403
56404
56405
56406
56407
56408
56409
56410
56411
56412
56413
56414
56415
56416
56417
56418
56419
56420
56421
56422
56423
56424
56425
56426
56427
56428
56429
56430
56431
56432
56433
56434
56435
56436
56437
56438
56439
56440
56441
56442
56443
56444
56445
56446
56447
56448
56449
56450
56451
56452
56453
56454
56455
56456
56457
56458
56459
56460
56461
56462
56463
56464
56465
56466
56467
56468
56469
56470
56471
56472
56473
56474
56475
56476
56477
56478
56479
56480
56481
56482
56483
56484
56485
56486
56487
56488
56489
56490
56491
56492
56493
56494
56495
56496
56497
56498
56499
56500
56501
56502
56503
56504
56505
56506
56507
56508
56509
56510
56511
56512
56513
56514
56515
56516
56517
56518
56519
56520
56521
56522
56523
56524
56525
56526
56527
56528
56529
56530
56531
56532
56533
56534
56535
56536
56537
56538
56539
56540
56541
56542
56543
56544
56545
56546
56547
56548
56549
56550
56551
56552
56553
56554
56555
56556
56557
56558
56559
56560
56561
56562
56563
56564
56565
56566
56567
56568
56569
56570
56571
56572
56573
56574
56575
56576
56577
56578
56579
56580
56581
56582
56583
56584
56585
56586
56587
56588
56589
56590
56591
56592
56593
56594
56595
56596
56597
56598
56599
56600
56601
56602
56603
56604
56605
56606
56607
56608
56609
56610
56611
56612
56613
56614
56615
56616
56617
56618
56619
56620
56621
56622
56623
56624
56625
56626
56627
56628
56629
56630
56631
56632
56633
56634
56635
56636
56637
56638
56639
56640
56641
56642
56643
56644
56645
56646
56647
56648
56649
56650
56651
56652
56653
56654
56655
56656
56657
56658
56659
56660
56661
56662
56663
56664
56665
56666
56667
56668
56669
56670
56671
56672
56673
56674
56675
56676
56677
56678
56679
56680
56681
56682
56683
56684
56685
56686
56687
56688
56689
56690
56691
56692
56693
56694
56695
56696
56697
56698
56699
56700
56701
56702
56703
56704
56705
56706
56707
56708
56709
56710
56711
56712
56713
56714
56715
56716
56717
56718
56719
56720
56721
56722
56723
56724
56725
56726
56727
56728
56729
56730
56731
56732
56733
56734
56735
56736
56737
56738
56739
56740
56741
56742
56743
56744
56745
56746
56747
56748
56749
56750
56751
56752
56753
56754
56755
56756
56757
56758
56759
56760
56761
56762
56763
56764
56765
56766
56767
56768
56769
56770
56771
56772
56773
56774
56775
56776
56777
56778
56779
56780
56781
56782
56783
56784
56785
56786
56787
56788
56789
56790
56791
56792
56793
56794
56795
56796
56797
56798
56799
56800
56801
56802
56803
56804
56805
56806
56807
56808
56809
56810
56811
56812
56813
56814
56815
56816
56817
56818
56819
56820
56821
56822
56823
56824
56825
56826
56827
56828
56829
56830
56831
56832
56833
56834
56835
56836
56837
56838
56839
56840
56841
56842
56843
56844
56845
56846
56847
56848
56849
56850
56851
56852
56853
56854
56855
56856
56857
56858
56859
56860
56861
56862
56863
56864
56865
56866
56867
56868
56869
56870
56871
56872
56873
56874
56875
56876
56877
56878
56879
56880
56881
56882
56883
56884
56885
56886
56887
56888
56889
56890
56891
56892
56893
56894
56895
56896
56897
56898
56899
56900
56901
56902
56903
56904
56905
56906
56907
56908
56909
56910
56911
56912
56913
56914
56915
56916
56917
56918
56919
56920
56921
56922
56923
56924
56925
56926
56927
56928
56929
56930
56931
56932
56933
56934
56935
56936
56937
56938
56939
56940
56941
56942
56943
56944
56945
56946
56947
56948
56949
56950
56951
56952
56953
56954
56955
56956
56957
56958
56959
56960
56961
56962
56963
56964
56965
56966
56967
56968
56969
56970
56971
56972
56973
56974
56975
56976
56977
56978
56979
56980
56981
56982
56983
56984
56985
56986
56987
56988
56989
56990
56991
56992
56993
56994
56995
56996
56997
56998
56999
57000
57001
57002
57003
57004
57005
57006
57007
57008
57009
57010
57011
57012
57013
57014
57015
57016
57017
57018
57019
57020
57021
57022
57023
57024
57025
57026
57027
57028
57029
57030
57031
57032
57033
57034
57035
57036
57037
57038
57039
57040
57041
57042
57043
57044
57045
57046
57047
57048
57049
57050
57051
57052
57053
57054
57055
57056
57057
57058
57059
57060
57061
57062
57063
57064
57065
57066
57067
57068
57069
57070
57071
57072
57073
57074
57075
57076
57077
57078
57079
57080
57081
57082
57083
57084
57085
57086
57087
57088
57089
57090
57091
57092
57093
57094
57095
57096
57097
57098
57099
57100
57101
57102
57103
57104
57105
57106
57107
57108
57109
57110
57111
57112
57113
57114
57115
57116
57117
57118
57119
57120
57121
57122
57123
57124
57125
57126
57127
57128
57129
57130
57131
57132
57133
57134
57135
57136
57137
57138
57139
57140
57141
57142
57143
57144
57145
57146
57147
57148
57149
57150
57151
57152
57153
57154
57155
57156
57157
57158
57159
57160
57161
57162
57163
57164
57165
57166
57167
57168
57169
57170
57171
57172
57173
57174
57175
57176
57177
57178
57179
57180
57181
57182
57183
57184
57185
57186
57187
57188
57189
57190
57191
57192
57193
57194
57195
57196
57197
57198
57199
57200
57201
57202
57203
57204
57205
57206
57207
57208
57209
57210
57211
57212
57213
57214
57215
57216
57217
57218
57219
57220
57221
57222
57223
57224
57225
57226
57227
57228
57229
57230
57231
57232
57233
57234
57235
57236
57237
57238
57239
57240
57241
57242
57243
57244
57245
57246
57247
57248
57249
57250
57251
57252
57253
57254
57255
57256
57257
57258
57259
57260
57261
57262
57263
57264
57265
57266
57267
57268
57269
57270
57271
57272
57273
57274
57275
57276
57277
57278
57279
57280
57281
57282
57283
57284
57285
57286
57287
57288
57289
57290
57291
57292
57293
57294
57295
57296
57297
57298
57299
57300
57301
57302
57303
57304
57305
57306
57307
57308
57309
57310
57311
57312
57313
57314
57315
57316
57317
57318
57319
57320
57321
57322
57323
57324
57325
57326
57327
57328
57329
57330
57331
57332
57333
57334
57335
57336
57337
57338
57339
57340
57341
57342
57343
57344
57345
57346
57347
57348
57349
57350
57351
57352
57353
57354
57355
57356
57357
57358
57359
57360
57361
57362
57363
57364
57365
57366
57367
57368
57369
57370
57371
57372
57373
57374
57375
57376
57377
57378
57379
57380
57381
57382
57383
57384
57385
57386
57387
57388
57389
57390
57391
57392
57393
57394
57395
57396
57397
57398
57399
57400
57401
57402
57403
57404
57405
57406
57407
57408
57409
57410
57411
57412
57413
57414
57415
57416
57417
57418
57419
57420
57421
57422
57423
57424
57425
57426
57427
57428
57429
57430
57431
57432
57433
57434
57435
57436
57437
57438
57439
57440
57441
57442
57443
57444
57445
57446
57447
57448
57449
57450
57451
57452
57453
57454
57455
57456
57457
57458
57459
57460
57461
57462
57463
57464
57465
57466
57467
57468
57469
57470
57471
57472
57473
57474
57475
57476
57477
57478
57479
57480
57481
57482
57483
57484
57485
57486
57487
57488
57489
57490
57491
57492
57493
57494
57495
57496
57497
57498
57499
57500
57501
57502
57503
57504
57505
57506
57507
57508
57509
57510
57511
57512
57513
57514
57515
57516
57517
57518
57519
57520
57521
57522
57523
57524
57525
57526
57527
57528
57529
57530
57531
57532
57533
57534
57535
57536
57537
57538
57539
57540
57541
57542
57543
57544
57545
57546
57547
57548
57549
57550
57551
57552
57553
57554
57555
57556
57557
57558
57559
57560
57561
57562
57563
57564
57565
57566
57567
57568
57569
57570
57571
57572
57573
57574
57575
57576
57577
57578
57579
57580
57581
57582
57583
57584
57585
57586
57587
57588
57589
57590
57591
57592
57593
57594
57595
57596
57597
57598
57599
57600
57601
57602
57603
57604
57605
57606
57607
57608
57609
57610
57611
57612
57613
57614
57615
57616
57617
57618
57619
57620
57621
57622
57623
57624
57625
57626
57627
57628
57629
57630
57631
57632
57633
57634
57635
57636
57637
57638
57639
57640
57641
57642
57643
57644
57645
57646
57647
57648
57649
57650
57651
57652
57653
57654
57655
57656
57657
57658
57659
57660
57661
57662
57663
57664
57665
57666
57667
57668
57669
57670
57671
57672
57673
57674
57675
57676
57677
57678
57679
57680
57681
57682
57683
57684
57685
57686
57687
57688
57689
57690
57691
57692
57693
57694
57695
57696
57697
57698
57699
57700
57701
57702
57703
57704
57705
57706
57707
57708
57709
57710
57711
57712
57713
57714
57715
57716
57717
57718
57719
57720
57721
57722
57723
57724
57725
57726
57727
57728
57729
57730
57731
57732
57733
57734
57735
57736
57737
57738
57739
57740
57741
57742
57743
57744
57745
57746
57747
57748
57749
57750
57751
57752
57753
57754
57755
57756
57757
57758
57759
57760
57761
57762
57763
57764
57765
57766
57767
57768
57769
57770
57771
57772
57773
57774
57775
57776
57777
57778
57779
57780
57781
57782
57783
57784
57785
57786
57787
57788
57789
57790
57791
57792
57793
57794
57795
57796
57797
57798
57799
57800
57801
57802
57803
57804
57805
57806
57807
57808
57809
57810
57811
57812
57813
57814
57815
57816
57817
57818
57819
57820
57821
57822
57823
57824
57825
57826
57827
57828
57829
57830
57831
57832
57833
57834
57835
57836
57837
57838
57839
57840
57841
57842
57843
57844
57845
57846
57847
57848
57849
57850
57851
57852
57853
57854
57855
57856
57857
57858
57859
57860
57861
57862
57863
57864
57865
57866
57867
57868
57869
57870
57871
57872
57873
57874
57875
57876
57877
57878
57879
57880
57881
57882
57883
57884
57885
57886
57887
57888
57889
57890
57891
57892
57893
57894
57895
57896
57897
57898
57899
57900
57901
57902
57903
57904
57905
57906
57907
57908
57909
57910
57911
57912
57913
57914
57915
57916
57917
57918
57919
57920
57921
57922
57923
57924
57925
57926
57927
57928
57929
57930
57931
57932
57933
57934
57935
57936
57937
57938
57939
57940
57941
57942
57943
57944
57945
57946
57947
57948
57949
57950
57951
57952
57953
57954
57955
57956
57957
57958
57959
57960
57961
57962
57963
57964
57965
57966
57967
57968
57969
57970
57971
57972
57973
57974
57975
57976
57977
57978
57979
57980
57981
57982
57983
57984
57985
57986
57987
57988
57989
57990
57991
57992
57993
57994
57995
57996
57997
57998
57999
58000
58001
58002
58003
58004
58005
58006
58007
58008
58009
58010
58011
58012
58013
58014
58015
58016
58017
58018
58019
58020
58021
58022
58023
58024
58025
58026
58027
58028
58029
58030
58031
58032
58033
58034
58035
58036
58037
58038
58039
58040
58041
58042
58043
58044
58045
58046
58047
58048
58049
58050
58051
58052
58053
58054
58055
58056
58057
58058
58059
58060
58061
58062
58063
58064
58065
58066
58067
58068
58069
58070
58071
58072
58073
58074
58075
58076
58077
58078
58079
58080
58081
58082
58083
58084
58085
58086
58087
58088
58089
58090
58091
58092
58093
58094
58095
58096
58097
58098
58099
58100
58101
58102
58103
58104
58105
58106
58107
58108
58109
58110
58111
58112
58113
58114
58115
58116
58117
58118
58119
58120
58121
58122
58123
58124
58125
58126
58127
58128
58129
58130
58131
58132
58133
58134
58135
58136
58137
58138
58139
58140
58141
58142
58143
58144
58145
58146
58147
58148
58149
58150
58151
58152
58153
58154
58155
58156
58157
58158
58159
58160
58161
58162
58163
58164
58165
58166
58167
58168
58169
58170
58171
58172
58173
58174
58175
58176
58177
58178
58179
58180
58181
58182
58183
58184
58185
58186
58187
58188
58189
58190
58191
58192
58193
58194
58195
58196
58197
58198
58199
58200
58201
58202
58203
58204
58205
58206
58207
58208
58209
58210
58211
58212
58213
58214
58215
58216
58217
58218
58219
58220
58221
58222
58223
58224
58225
58226
58227
58228
58229
58230
58231
58232
58233
58234
58235
58236
58237
58238
58239
58240
58241
58242
58243
58244
58245
58246
58247
58248
58249
58250
58251
58252
58253
58254
58255
58256
58257
58258
58259
58260
58261
58262
58263
58264
58265
58266
58267
58268
58269
58270
58271
58272
58273
58274
58275
58276
58277
58278
58279
58280
58281
58282
58283
58284
58285
58286
58287
58288
58289
58290
58291
58292
58293
58294
58295
58296
58297
58298
58299
58300
58301
58302
58303
58304
58305
58306
58307
58308
58309
58310
58311
58312
58313
58314
58315
58316
58317
58318
58319
58320
58321
58322
58323
58324
58325
58326
58327
58328
58329
58330
58331
58332
58333
58334
58335
58336
58337
58338
58339
58340
58341
58342
58343
58344
58345
58346
58347
58348
58349
58350
58351
58352
58353
58354
58355
58356
58357
58358
58359
58360
58361
58362
58363
58364
58365
58366
58367
58368
58369
58370
58371
58372
58373
58374
58375
58376
58377
58378
58379
58380
58381
58382
58383
58384
58385
58386
58387
58388
58389
58390
58391
58392
58393
58394
58395
58396
58397
58398
58399
58400
58401
58402
58403
58404
58405
58406
58407
58408
58409
58410
58411
58412
58413
58414
58415
58416
58417
58418
58419
58420
58421
58422
58423
58424
58425
58426
58427
58428
58429
58430
58431
58432
58433
58434
58435
58436
58437
58438
58439
58440
58441
58442
58443
58444
58445
58446
58447
58448
58449
58450
58451
58452
58453
58454
58455
58456
58457
58458
58459
58460
58461
58462
58463
58464
58465
58466
58467
58468
58469
58470
58471
58472
58473
58474
58475
58476
58477
58478
58479
58480
58481
58482
58483
58484
58485
58486
58487
58488
58489
58490
58491
58492
58493
58494
58495
58496
58497
58498
58499
58500
58501
58502
58503
58504
58505
58506
58507
58508
58509
58510
58511
58512
58513
58514
58515
58516
58517
58518
58519
58520
58521
58522
58523
58524
58525
58526
58527
58528
58529
58530
58531
58532
58533
58534
58535
58536
58537
58538
58539
58540
58541
58542
58543
58544
58545
58546
58547
58548
58549
58550
58551
58552
58553
58554
58555
58556
58557
58558
58559
58560
58561
58562
58563
58564
58565
58566
58567
58568
58569
58570
58571
58572
58573
58574
58575
58576
58577
58578
58579
58580
58581
58582
58583
58584
58585
58586
58587
58588
58589
58590
58591
58592
58593
58594
58595
58596
58597
58598
58599
58600
58601
58602
58603
58604
58605
58606
58607
58608
58609
58610
58611
58612
58613
58614
58615
58616
58617
58618
58619
58620
58621
58622
58623
58624
58625
58626
58627
58628
58629
58630
58631
58632
58633
58634
58635
58636
58637
58638
58639
58640
58641
58642
58643
58644
58645
58646
58647
58648
58649
58650
58651
58652
58653
58654
58655
58656
58657
58658
58659
58660
58661
58662
58663
58664
58665
58666
58667
58668
58669
58670
58671
58672
58673
58674
58675
58676
58677
58678
58679
58680
58681
58682
58683
58684
58685
58686
58687
58688
58689
58690
58691
58692
58693
58694
58695
58696
58697
58698
58699
58700
58701
58702
58703
58704
58705
58706
58707
58708
58709
58710
58711
58712
58713
58714
58715
58716
58717
58718
58719
58720
58721
58722
58723
58724
58725
58726
58727
58728
58729
58730
58731
58732
58733
58734
58735
58736
58737
58738
58739
58740
58741
58742
58743
58744
58745
58746
58747
58748
58749
58750
58751
58752
58753
58754
58755
58756
58757
58758
58759
58760
58761
58762
58763
58764
58765
58766
58767
58768
58769
58770
58771
58772
58773
58774
58775
58776
58777
58778
58779
58780
58781
58782
58783
58784
58785
58786
58787
58788
58789
58790
58791
58792
58793
58794
58795
58796
58797
58798
58799
58800
58801
58802
58803
58804
58805
58806
58807
58808
58809
58810
58811
58812
58813
58814
58815
58816
58817
58818
58819
58820
58821
58822
58823
58824
58825
58826
58827
58828
58829
58830
58831
58832
58833
58834
58835
58836
58837
58838
58839
58840
58841
58842
58843
58844
58845
58846
58847
58848
58849
58850
58851
58852
58853
58854
58855
58856
58857
58858
58859
58860
58861
58862
58863
58864
58865
58866
58867
58868
58869
58870
58871
58872
58873
58874
58875
58876
58877
58878
58879
58880
58881
58882
58883
58884
58885
58886
58887
58888
58889
58890
58891
58892
58893
58894
58895
58896
58897
58898
58899
58900
58901
58902
58903
58904
58905
58906
58907
58908
58909
58910
58911
58912
58913
58914
58915
58916
58917
58918
58919
58920
58921
58922
58923
58924
58925
58926
58927
58928
58929
58930
58931
58932
58933
58934
58935
58936
58937
58938
58939
58940
58941
58942
58943
58944
58945
58946
58947
58948
58949
58950
58951
58952
58953
58954
58955
58956
58957
58958
58959
58960
58961
58962
58963
58964
58965
58966
58967
58968
58969
58970
58971
58972
58973
58974
58975
58976
58977
58978
58979
58980
58981
58982
58983
58984
58985
58986
58987
58988
58989
58990
58991
58992
58993
58994
58995
58996
58997
58998
58999
59000
59001
59002
59003
59004
59005
59006
59007
59008
59009
59010
59011
59012
59013
59014
59015
59016
59017
59018
59019
59020
59021
59022
59023
59024
59025
59026
59027
59028
59029
59030
59031
59032
59033
59034
59035
59036
59037
59038
59039
59040
59041
59042
59043
59044
59045
59046
59047
59048
59049
59050
59051
59052
59053
59054
59055
59056
59057
59058
59059
59060
59061
59062
59063
59064
59065
59066
59067
59068
59069
59070
59071
59072
59073
59074
59075
59076
59077
59078
59079
59080
59081
59082
59083
59084
59085
59086
59087
59088
59089
59090
59091
59092
59093
59094
59095
59096
59097
59098
59099
59100
59101
59102
59103
59104
59105
59106
59107
59108
59109
59110
59111
59112
59113
59114
59115
59116
59117
59118
59119
59120
59121
59122
59123
59124
59125
59126
59127
59128
59129
59130
59131
59132
59133
59134
59135
59136
59137
59138
59139
59140
59141
59142
59143
59144
59145
59146
59147
59148
59149
59150
59151
59152
59153
59154
59155
59156
59157
59158
59159
59160
59161
59162
59163
59164
59165
59166
59167
59168
59169
59170
59171
59172
59173
59174
59175
59176
59177
59178
59179
59180
59181
59182
59183
59184
59185
59186
59187
59188
59189
59190
59191
59192
59193
59194
59195
59196
59197
59198
59199
59200
59201
59202
59203
59204
59205
59206
59207
59208
59209
59210
59211
59212
59213
59214
59215
59216
59217
59218
59219
59220
59221
59222
59223
59224
59225
59226
59227
59228
59229
59230
59231
59232
59233
59234
59235
59236
59237
59238
59239
59240
59241
59242
59243
59244
59245
59246
59247
59248
59249
59250
59251
59252
59253
59254
59255
59256
59257
59258
59259
59260
59261
59262
59263
59264
59265
59266
59267
59268
59269
59270
59271
59272
59273
59274
59275
59276
59277
59278
59279
59280
59281
59282
59283
59284
59285
59286
59287
59288
59289
59290
59291
59292
59293
59294
59295
59296
59297
59298
59299
59300
59301
59302
59303
59304
59305
59306
59307
59308
59309
59310
59311
59312
59313
59314
59315
59316
59317
59318
59319
59320
59321
59322
59323
59324
59325
59326
59327
59328
59329
59330
59331
59332
59333
59334
59335
59336
59337
59338
59339
59340
59341
59342
59343
59344
59345
59346
59347
59348
59349
59350
59351
59352
59353
59354
59355
59356
59357
59358
59359
59360
59361
59362
59363
59364
59365
59366
59367
59368
59369
59370
59371
59372
59373
59374
59375
59376
59377
59378
59379
59380
59381
59382
59383
59384
59385
59386
59387
59388
59389
59390
59391
59392
59393
59394
59395
59396
59397
59398
59399
59400
59401
59402
59403
59404
59405
59406
59407
59408
59409
59410
59411
59412
59413
59414
59415
59416
59417
59418
59419
59420
59421
59422
59423
59424
59425
59426
59427
59428
59429
59430
59431
59432
59433
59434
59435
59436
59437
59438
59439
59440
59441
59442
59443
59444
59445
59446
59447
59448
59449
59450
59451
59452
59453
59454
59455
59456
59457
59458
59459
59460
59461
59462
59463
59464
59465
59466
59467
59468
59469
59470
59471
59472
59473
59474
59475
59476
59477
59478
59479
59480
59481
59482
59483
59484
59485
59486
59487
59488
59489
59490
59491
59492
59493
59494
59495
59496
59497
59498
59499
59500
59501
59502
59503
59504
59505
59506
59507
59508
59509
59510
59511
59512
59513
59514
59515
59516
59517
59518
59519
59520
59521
59522
59523
59524
59525
59526
59527
59528
59529
59530
59531
59532
59533
59534
59535
59536
59537
59538
59539
59540
59541
59542
59543
59544
59545
59546
59547
59548
59549
59550
59551
59552
59553
59554
59555
59556
59557
59558
59559
59560
59561
59562
59563
59564
59565
59566
59567
59568
59569
59570
59571
59572
59573
59574
59575
59576
59577
59578
59579
59580
59581
59582
59583
59584
59585
59586
59587
59588
59589
59590
59591
59592
59593
59594
59595
59596
59597
59598
59599
59600
59601
59602
59603
59604
59605
59606
59607
59608
59609
59610
59611
59612
59613
59614
59615
59616
59617
59618
59619
59620
59621
59622
59623
59624
59625
59626
59627
59628
59629
59630
59631
59632
59633
59634
59635
59636
59637
59638
59639
59640
59641
59642
59643
59644
59645
59646
59647
59648
59649
59650
59651
59652
59653
59654
59655
59656
59657
59658
59659
59660
59661
59662
59663
59664
59665
59666
59667
59668
59669
59670
59671
59672
59673
59674
59675
59676
59677
59678
59679
59680
59681
59682
59683
59684
59685
59686
59687
59688
59689
59690
59691
59692
59693
59694
59695
59696
59697
59698
59699
59700
59701
59702
59703
59704
59705
59706
59707
59708
59709
59710
59711
59712
59713
59714
59715
59716
59717
59718
59719
59720
59721
59722
59723
59724
59725
59726
59727
59728
59729
59730
59731
59732
59733
59734
59735
59736
59737
59738
59739
59740
59741
59742
59743
59744
59745
59746
59747
59748
59749
59750
59751
59752
59753
59754
59755
59756
59757
59758
59759
59760
59761
59762
59763
59764
59765
59766
59767
59768
59769
59770
59771
59772
59773
59774
59775
59776
59777
59778
59779
59780
59781
59782
59783
59784
59785
59786
59787
59788
59789
59790
59791
59792
59793
59794
59795
59796
59797
59798
59799
59800
59801
59802
59803
59804
59805
59806
59807
59808
59809
59810
59811
59812
59813
59814
59815
59816
59817
59818
59819
59820
59821
59822
59823
59824
59825
59826
59827
59828
59829
59830
59831
59832
59833
59834
59835
59836
59837
59838
59839
59840
59841
59842
59843
59844
59845
59846
59847
59848
59849
59850
59851
59852
59853
59854
59855
59856
59857
59858
59859
59860
59861
59862
59863
59864
59865
59866
59867
59868
59869
59870
59871
59872
59873
59874
59875
59876
59877
59878
59879
59880
59881
59882
59883
59884
59885
59886
59887
59888
59889
59890
59891
59892
59893
59894
59895
59896
59897
59898
59899
59900
59901
59902
59903
59904
59905
59906
59907
59908
59909
59910
59911
59912
59913
59914
59915
59916
59917
59918
59919
59920
59921
59922
59923
59924
59925
59926
59927
59928
59929
59930
59931
59932
59933
59934
59935
59936
59937
59938
59939
59940
59941
59942
59943
59944
59945
59946
59947
59948
59949
59950
59951
59952
59953
59954
59955
59956
59957
59958
59959
59960
59961
59962
59963
59964
59965
59966
59967
59968
59969
59970
59971
59972
59973
59974
59975
59976
59977
59978
59979
59980
59981
59982
59983
59984
59985
59986
59987
59988
59989
59990
59991
59992
59993
59994
59995
59996
59997
59998
59999
60000
60001
60002
60003
60004
60005
60006
60007
60008
60009
60010
60011
60012
60013
60014
60015
60016
60017
60018
60019
60020
60021
60022
60023
60024
60025
60026
60027
60028
60029
60030
60031
60032
60033
60034
60035
60036
60037
60038
60039
60040
60041
60042
60043
60044
60045
60046
60047
60048
60049
60050
60051
60052
60053
60054
60055
60056
60057
60058
60059
60060
60061
60062
60063
60064
60065
60066
60067
60068
60069
60070
60071
60072
60073
60074
60075
60076
60077
60078
60079
60080
60081
60082
60083
60084
60085
60086
60087
60088
60089
60090
60091
60092
60093
60094
60095
60096
60097
60098
60099
60100
60101
60102
60103
60104
60105
60106
60107
60108
60109
60110
60111
60112
60113
60114
60115
60116
60117
60118
60119
60120
60121
60122
60123
60124
60125
60126
60127
60128
60129
60130
60131
60132
60133
60134
60135
60136
60137
60138
60139
60140
60141
60142
60143
60144
60145
60146
60147
60148
60149
60150
60151
60152
60153
60154
60155
60156
60157
60158
60159
60160
60161
60162
60163
60164
60165
60166
60167
60168
60169
60170
60171
60172
60173
60174
60175
60176
60177
60178
60179
60180
60181
60182
60183
60184
60185
60186
60187
60188
60189
60190
60191
60192
60193
60194
60195
60196
60197
60198
60199
60200
60201
60202
60203
60204
60205
60206
60207
60208
60209
60210
60211
60212
60213
60214
60215
60216
60217
60218
60219
60220
60221
60222
60223
60224
60225
60226
60227
60228
60229
60230
60231
60232
60233
60234
60235
60236
60237
60238
60239
60240
60241
60242
60243
60244
60245
60246
60247
60248
60249
60250
60251
60252
60253
60254
60255
60256
60257
60258
60259
60260
60261
60262
60263
60264
60265
60266
60267
60268
60269
60270
60271
60272
60273
60274
60275
60276
60277
60278
60279
60280
60281
60282
60283
60284
60285
60286
60287
60288
60289
60290
60291
60292
60293
60294
60295
60296
60297
60298
60299
60300
60301
60302
60303
60304
60305
60306
60307
60308
60309
60310
60311
60312
60313
60314
60315
60316
60317
60318
60319
60320
60321
60322
60323
60324
60325
60326
60327
60328
60329
60330
60331
60332
60333
60334
60335
60336
60337
60338
60339
60340
60341
60342
60343
60344
60345
60346
60347
60348
60349
60350
60351
60352
60353
60354
60355
60356
60357
60358
60359
60360
60361
60362
60363
60364
60365
60366
60367
60368
60369
60370
60371
60372
60373
60374
60375
60376
60377
60378
60379
60380
60381
60382
60383
60384
60385
60386
60387
60388
60389
60390
60391
60392
60393
60394
60395
60396
60397
60398
60399
60400
60401
60402
60403
60404
60405
60406
60407
60408
60409
60410
60411
60412
60413
60414
60415
60416
60417
60418
60419
60420
60421
60422
60423
60424
60425
60426
60427
60428
60429
60430
60431
60432
60433
60434
60435
60436
60437
60438
60439
60440
60441
60442
60443
60444
60445
60446
60447
60448
60449
60450
60451
60452
60453
60454
60455
60456
60457
60458
60459
60460
60461
60462
60463
60464
60465
60466
60467
60468
60469
60470
60471
60472
60473
60474
60475
60476
60477
60478
60479
60480
60481
60482
60483
60484
60485
60486
60487
60488
60489
60490
60491
60492
60493
60494
60495
60496
60497
60498
60499
60500
60501
60502
60503
60504
60505
60506
60507
60508
60509
60510
60511
60512
60513
60514
60515
60516
60517
60518
60519
60520
60521
60522
60523
60524
60525
60526
60527
60528
60529
60530
60531
60532
60533
60534
60535
60536
60537
60538
60539
60540
60541
60542
60543
60544
60545
60546
60547
60548
60549
60550
60551
60552
60553
60554
60555
60556
60557
60558
60559
60560
60561
60562
60563
60564
60565
60566
60567
60568
60569
60570
60571
60572
60573
60574
60575
60576
60577
60578
60579
60580
60581
60582
60583
60584
60585
60586
60587
60588
60589
60590
60591
60592
60593
60594
60595
60596
60597
60598
60599
60600
60601
60602
60603
60604
60605
60606
60607
60608
60609
60610
60611
60612
60613
60614
60615
60616
60617
60618
60619
60620
60621
60622
60623
60624
60625
60626
60627
60628
60629
60630
60631
60632
60633
60634
60635
60636
60637
60638
60639
60640
60641
60642
60643
60644
60645
60646
60647
60648
60649
60650
60651
60652
60653
60654
60655
60656
60657
60658
60659
60660
60661
60662
60663
60664
60665
60666
60667
60668
60669
60670
60671
60672
60673
60674
60675
60676
60677
60678
60679
60680
60681
60682
60683
60684
60685
60686
60687
60688
60689
60690
60691
60692
60693
60694
60695
60696
60697
60698
60699
60700
60701
60702
60703
60704
60705
60706
60707
60708
60709
60710
60711
60712
60713
60714
60715
60716
60717
60718
60719
60720
60721
60722
60723
60724
60725
60726
60727
60728
60729
60730
60731
60732
60733
60734
60735
60736
60737
60738
60739
60740
60741
60742
60743
60744
60745
60746
60747
60748
60749
60750
60751
60752
60753
60754
60755
60756
60757
60758
60759
60760
60761
60762
60763
60764
60765
60766
60767
60768
60769
60770
60771
60772
60773
60774
60775
60776
60777
60778
60779
60780
60781
60782
60783
60784
60785
60786
60787
60788
60789
60790
60791
60792
60793
60794
60795
60796
60797
60798
60799
60800
60801
60802
60803
60804
60805
60806
60807
60808
60809
60810
60811
60812
60813
60814
60815
60816
60817
60818
60819
60820
60821
60822
60823
60824
60825
60826
60827
60828
60829
60830
60831
60832
60833
60834
60835
60836
60837
60838
60839
60840
60841
60842
60843
60844
60845
60846
60847
60848
60849
60850
60851
60852
60853
60854
60855
60856
60857
60858
60859
60860
60861
60862
60863
60864
60865
60866
60867
60868
60869
60870
60871
60872
60873
60874
60875
60876
60877
60878
60879
60880
60881
60882
60883
60884
60885
60886
60887
60888
60889
60890
60891
60892
60893
60894
60895
60896
60897
60898
60899
60900
60901
60902
60903
60904
60905
60906
60907
60908
60909
60910
60911
60912
60913
60914
60915
60916
60917
60918
60919
60920
60921
60922
60923
60924
60925
60926
60927
60928
60929
60930
60931
60932
60933
60934
60935
60936
60937
60938
60939
60940
60941
60942
60943
60944
60945
60946
60947
60948
60949
60950
60951
60952
60953
60954
60955
60956
60957
60958
60959
60960
60961
60962
60963
60964
60965
60966
60967
60968
60969
60970
60971
60972
60973
60974
60975
60976
60977
60978
60979
60980
60981
60982
60983
60984
60985
60986
60987
60988
60989
60990
60991
60992
60993
60994
60995
60996
60997
60998
60999
61000
61001
61002
61003
61004
61005
61006
61007
61008
61009
61010
61011
61012
61013
61014
61015
61016
61017
61018
61019
61020
61021
61022
61023
61024
61025
61026
61027
61028
61029
61030
61031
61032
61033
61034
61035
61036
61037
61038
61039
61040
61041
61042
61043
61044
61045
61046
61047
61048
61049
61050
61051
61052
61053
61054
61055
61056
61057
61058
61059
61060
61061
61062
61063
61064
61065
61066
61067
61068
61069
61070
61071
61072
61073
61074
61075
61076
61077
61078
61079
61080
61081
61082
61083
61084
61085
61086
61087
61088
61089
61090
61091
61092
61093
61094
61095
61096
61097
61098
61099
61100
61101
61102
61103
61104
61105
61106
61107
61108
61109
61110
61111
61112
61113
61114
61115
61116
61117
61118
61119
61120
61121
61122
61123
61124
61125
61126
61127
61128
61129
61130
61131
61132
61133
61134
61135
61136
61137
61138
61139
61140
61141
61142
61143
61144
61145
61146
61147
61148
61149
61150
61151
61152
61153
61154
61155
61156
61157
61158
61159
61160
61161
61162
61163
61164
61165
61166
61167
61168
61169
61170
61171
61172
61173
61174
61175
61176
61177
61178
61179
61180
61181
61182
61183
61184
61185
61186
61187
61188
61189
61190
61191
61192
61193
61194
61195
61196
61197
61198
61199
61200
61201
61202
61203
61204
61205
61206
61207
61208
61209
61210
61211
61212
61213
61214
61215
61216
61217
61218
61219
61220
61221
61222
61223
61224
61225
61226
61227
61228
61229
61230
61231
61232
61233
61234
61235
61236
61237
61238
61239
61240
61241
61242
61243
61244
61245
61246
61247
61248
61249
61250
61251
61252
61253
61254
61255
61256
61257
61258
61259
61260
61261
61262
61263
61264
61265
61266
61267
61268
61269
61270
61271
61272
61273
61274
61275
61276
61277
61278
61279
61280
61281
61282
61283
61284
61285
61286
61287
61288
61289
61290
61291
61292
61293
61294
61295
61296
61297
61298
61299
61300
61301
61302
61303
61304
61305
61306
61307
61308
61309
61310
61311
61312
61313
61314
61315
61316
61317
61318
61319
61320
61321
61322
61323
61324
61325
61326
61327
61328
61329
61330
61331
61332
61333
61334
61335
61336
61337
61338
61339
61340
61341
61342
61343
61344
61345
61346
61347
61348
61349
61350
61351
61352
61353
61354
61355
61356
61357
61358
61359
61360
61361
61362
61363
61364
61365
61366
61367
61368
61369
61370
61371
61372
61373
61374
61375
61376
61377
61378
61379
61380
61381
61382
61383
61384
61385
61386
61387
61388
61389
61390
61391
61392
61393
61394
61395
61396
61397
61398
61399
61400
61401
61402
61403
61404
61405
61406
61407
61408
61409
61410
61411
61412
61413
61414
61415
61416
61417
61418
61419
61420
61421
61422
61423
61424
61425
61426
61427
61428
61429
61430
61431
61432
61433
61434
61435
61436
61437
61438
61439
61440
61441
61442
61443
61444
61445
61446
61447
61448
61449
61450
61451
61452
61453
61454
61455
61456
61457
61458
61459
61460
61461
61462
61463
61464
61465
61466
61467
61468
61469
61470
61471
61472
61473
61474
61475
61476
61477
61478
61479
61480
61481
61482
61483
61484
61485
61486
61487
61488
61489
61490
61491
61492
61493
61494
61495
61496
61497
61498
61499
61500
61501
61502
61503
61504
61505
61506
61507
61508
61509
61510
61511
61512
61513
61514
61515
61516
61517
61518
61519
61520
61521
61522
61523
61524
61525
61526
61527
61528
61529
61530
61531
61532
61533
61534
61535
61536
61537
61538
61539
61540
61541
61542
61543
61544
61545
61546
61547
61548
61549
61550
61551
61552
61553
61554
61555
61556
61557
61558
61559
61560
61561
61562
61563
61564
61565
61566
61567
61568
61569
61570
61571
61572
61573
61574
61575
61576
61577
61578
61579
61580
61581
61582
61583
61584
61585
61586
61587
61588
61589
61590
61591
61592
61593
61594
61595
61596
61597
61598
61599
61600
61601
61602
61603
61604
61605
61606
61607
61608
61609
61610
61611
61612
61613
61614
61615
61616
61617
61618
61619
61620
61621
61622
61623
61624
61625
61626
61627
61628
61629
61630
61631
61632
61633
61634
61635
61636
61637
61638
61639
61640
61641
61642
61643
61644
61645
61646
61647
61648
61649
61650
61651
61652
61653
61654
61655
61656
61657
61658
61659
61660
61661
61662
61663
61664
61665
61666
61667
61668
61669
61670
61671
61672
61673
61674
61675
61676
61677
61678
61679
61680
61681
61682
61683
61684
61685
61686
61687
61688
61689
61690
61691
61692
61693
61694
61695
61696
61697
61698
61699
61700
61701
61702
61703
61704
61705
61706
61707
61708
61709
61710
61711
61712
61713
61714
61715
61716
61717
61718
61719
61720
61721
61722
61723
61724
61725
61726
61727
61728
61729
61730
61731
61732
61733
61734
61735
61736
61737
61738
61739
61740
61741
61742
61743
61744
61745
61746
61747
61748
61749
61750
61751
61752
61753
61754
61755
61756
61757
61758
61759
61760
61761
61762
61763
61764
61765
61766
61767
61768
61769
61770
61771
61772
61773
61774
61775
61776
61777
61778
61779
61780
61781
61782
61783
61784
61785
61786
61787
61788
61789
61790
61791
61792
61793
61794
61795
61796
61797
61798
61799
61800
61801
61802
61803
61804
61805
61806
61807
61808
61809
61810
61811
61812
61813
61814
61815
61816
61817
61818
61819
61820
61821
61822
61823
61824
61825
61826
61827
61828
61829
61830
61831
61832
61833
61834
61835
61836
61837
61838
61839
61840
61841
61842
61843
61844
61845
61846
61847
61848
61849
61850
61851
61852
61853
61854
61855
61856
61857
61858
61859
61860
61861
61862
61863
61864
61865
61866
61867
61868
61869
61870
61871
61872
61873
61874
61875
61876
61877
61878
61879
61880
61881
61882
61883
61884
61885
61886
61887
61888
61889
61890
61891
61892
61893
61894
61895
61896
61897
61898
61899
61900
61901
61902
61903
61904
61905
61906
61907
61908
61909
61910
61911
61912
61913
61914
61915
61916
61917
61918
61919
61920
61921
61922
61923
61924
61925
61926
61927
61928
61929
61930
61931
61932
61933
61934
61935
61936
61937
61938
61939
61940
61941
61942
61943
61944
61945
61946
61947
61948
61949
61950
61951
61952
61953
61954
61955
61956
61957
61958
61959
61960
61961
61962
61963
61964
61965
61966
61967
61968
61969
61970
61971
61972
61973
61974
61975
61976
61977
61978
61979
61980
61981
61982
61983
61984
61985
61986
61987
61988
61989
61990
61991
61992
61993
61994
61995
61996
61997
61998
61999
62000
62001
62002
62003
62004
62005
62006
62007
62008
62009
62010
62011
62012
62013
62014
62015
62016
62017
62018
62019
62020
62021
62022
62023
62024
62025
62026
62027
62028
62029
62030
62031
62032
62033
62034
62035
62036
62037
62038
62039
62040
62041
62042
62043
62044
62045
62046
62047
62048
62049
62050
62051
62052
62053
62054
62055
62056
62057
62058
62059
62060
62061
62062
62063
62064
62065
62066
62067
62068
62069
62070
62071
62072
62073
62074
62075
62076
62077
62078
62079
62080
62081
62082
62083
62084
62085
62086
62087
62088
62089
62090
62091
62092
62093
62094
62095
62096
62097
62098
62099
62100
62101
62102
62103
62104
62105
62106
62107
62108
62109
62110
62111
62112
62113
62114
62115
62116
62117
62118
62119
62120
62121
62122
62123
62124
62125
62126
62127
62128
62129
62130
62131
62132
62133
62134
62135
62136
62137
62138
62139
62140
62141
62142
62143
62144
62145
62146
62147
62148
62149
62150
62151
62152
62153
62154
62155
62156
62157
62158
62159
62160
62161
62162
62163
62164
62165
62166
62167
62168
62169
62170
62171
62172
62173
62174
62175
62176
62177
62178
62179
62180
62181
62182
62183
62184
62185
62186
62187
62188
62189
62190
62191
62192
62193
62194
62195
62196
62197
62198
62199
62200
62201
62202
62203
62204
62205
62206
62207
62208
62209
62210
62211
62212
62213
62214
62215
62216
62217
62218
62219
62220
62221
62222
62223
62224
62225
62226
62227
62228
62229
62230
62231
62232
62233
62234
62235
62236
62237
62238
62239
62240
62241
62242
62243
62244
62245
62246
62247
62248
62249
62250
62251
62252
62253
62254
62255
62256
62257
62258
62259
62260
62261
62262
62263
62264
62265
62266
62267
62268
62269
62270
62271
62272
62273
62274
62275
62276
62277
62278
62279
62280
62281
62282
62283
62284
62285
62286
62287
62288
62289
62290
62291
62292
62293
62294
62295
62296
62297
62298
62299
62300
62301
62302
62303
62304
62305
62306
62307
62308
62309
62310
62311
62312
62313
62314
62315
62316
62317
62318
62319
62320
62321
62322
62323
62324
62325
62326
62327
62328
62329
62330
62331
62332
62333
62334
62335
62336
62337
62338
62339
62340
62341
62342
62343
62344
62345
62346
62347
62348
62349
62350
62351
62352
62353
62354
62355
62356
62357
62358
62359
62360
62361
62362
62363
62364
62365
62366
62367
62368
62369
62370
62371
62372
62373
62374
62375
62376
62377
62378
62379
62380
62381
62382
62383
62384
62385
62386
62387
62388
62389
62390
62391
62392
62393
62394
62395
62396
62397
62398
62399
62400
62401
62402
62403
62404
62405
62406
62407
62408
62409
62410
62411
62412
62413
62414
62415
62416
62417
62418
62419
62420
62421
62422
62423
62424
62425
62426
62427
62428
62429
62430
62431
62432
62433
62434
62435
62436
62437
62438
62439
62440
62441
62442
62443
62444
62445
62446
62447
62448
62449
62450
62451
62452
62453
62454
62455
62456
62457
62458
62459
62460
62461
62462
62463
62464
62465
62466
62467
62468
62469
62470
62471
62472
62473
62474
62475
62476
62477
62478
62479
62480
62481
62482
62483
62484
62485
62486
62487
62488
62489
62490
62491
62492
62493
62494
62495
62496
62497
62498
62499
62500
62501
62502
62503
62504
62505
62506
62507
62508
62509
62510
62511
62512
62513
62514
62515
62516
62517
62518
62519
62520
62521
62522
62523
62524
62525
62526
62527
62528
62529
62530
62531
62532
62533
62534
62535
62536
62537
62538
62539
62540
62541
62542
62543
62544
62545
62546
62547
62548
62549
62550
62551
62552
62553
62554
62555
62556
62557
62558
62559
62560
62561
62562
62563
62564
62565
62566
62567
62568
62569
62570
62571
62572
62573
62574
62575
62576
62577
62578
62579
62580
62581
62582
62583
62584
62585
62586
62587
62588
62589
62590
62591
62592
62593
62594
62595
62596
62597
62598
62599
62600
62601
62602
62603
62604
62605
62606
62607
62608
62609
62610
62611
62612
62613
62614
62615
62616
62617
62618
62619
62620
62621
62622
62623
62624
62625
62626
62627
62628
62629
62630
62631
62632
62633
62634
62635
62636
62637
62638
62639
62640
62641
62642
62643
62644
62645
62646
62647
62648
62649
62650
62651
62652
62653
62654
62655
62656
62657
62658
62659
62660
62661
62662
62663
62664
62665
62666
62667
62668
62669
62670
62671
62672
62673
62674
62675
62676
62677
62678
62679
62680
62681
62682
62683
62684
62685
62686
62687
62688
62689
62690
62691
62692
62693
62694
62695
62696
62697
62698
62699
62700
62701
62702
62703
62704
62705
62706
62707
62708
62709
62710
62711
62712
62713
62714
62715
62716
62717
62718
62719
62720
62721
62722
62723
62724
62725
62726
62727
62728
62729
62730
62731
62732
62733
62734
62735
62736
62737
62738
62739
62740
62741
62742
62743
62744
62745
62746
62747
62748
62749
62750
62751
62752
62753
62754
62755
62756
62757
62758
62759
62760
62761
62762
62763
62764
62765
62766
62767
62768
62769
62770
62771
62772
62773
62774
62775
62776
62777
62778
62779
62780
62781
62782
62783
62784
62785
62786
62787
62788
62789
62790
62791
62792
62793
62794
62795
62796
62797
62798
62799
62800
62801
62802
62803
62804
62805
62806
62807
62808
62809
62810
62811
62812
62813
62814
62815
62816
62817
62818
62819
62820
62821
62822
62823
62824
62825
62826
62827
62828
62829
62830
62831
62832
62833
62834
62835
62836
62837
62838
62839
62840
62841
62842
62843
62844
62845
62846
62847
62848
62849
62850
62851
62852
62853
62854
62855
62856
62857
62858
62859
62860
62861
62862
62863
62864
62865
62866
62867
62868
62869
62870
62871
62872
62873
62874
62875
62876
62877
62878
62879
62880
62881
62882
62883
62884
62885
62886
62887
62888
62889
62890
62891
62892
62893
62894
62895
62896
62897
62898
62899
62900
62901
62902
62903
62904
62905
62906
62907
62908
62909
62910
62911
62912
62913
62914
62915
62916
62917
62918
62919
62920
62921
62922
62923
62924
62925
62926
62927
62928
62929
62930
62931
62932
62933
62934
62935
62936
62937
62938
62939
62940
62941
62942
62943
62944
62945
62946
62947
62948
62949
62950
62951
62952
62953
62954
62955
62956
62957
62958
62959
62960
62961
62962
62963
62964
62965
62966
62967
62968
62969
62970
62971
62972
62973
62974
62975
62976
62977
62978
62979
62980
62981
62982
62983
62984
62985
62986
62987
62988
62989
62990
62991
62992
62993
62994
62995
62996
62997
62998
62999
63000
63001
63002
63003
63004
63005
63006
63007
63008
63009
63010
63011
63012
63013
63014
63015
63016
63017
63018
63019
63020
63021
63022
63023
63024
63025
63026
63027
63028
63029
63030
63031
63032
63033
63034
63035
63036
63037
63038
63039
63040
63041
63042
63043
63044
63045
63046
63047
63048
63049
63050
63051
63052
63053
63054
63055
63056
63057
63058
63059
63060
63061
63062
63063
63064
63065
63066
63067
63068
63069
63070
63071
63072
63073
63074
63075
63076
63077
63078
63079
63080
63081
63082
63083
63084
63085
63086
63087
63088
63089
63090
63091
63092
63093
63094
63095
63096
63097
63098
63099
63100
63101
63102
63103
63104
63105
63106
63107
63108
63109
63110
63111
63112
63113
63114
63115
63116
63117
63118
63119
63120
63121
63122
63123
63124
63125
63126
63127
63128
63129
63130
63131
63132
63133
63134
63135
63136
63137
63138
63139
63140
63141
63142
63143
63144
63145
63146
63147
63148
63149
63150
63151
63152
63153
63154
63155
63156
63157
63158
63159
63160
63161
63162
63163
63164
63165
63166
63167
63168
63169
63170
63171
63172
63173
63174
63175
63176
63177
63178
63179
63180
63181
63182
63183
63184
63185
63186
63187
63188
63189
63190
63191
63192
63193
63194
63195
63196
63197
63198
63199
63200
63201
63202
63203
63204
63205
63206
63207
63208
63209
63210
63211
63212
63213
63214
63215
63216
63217
63218
63219
63220
63221
63222
63223
63224
63225
63226
63227
63228
63229
63230
63231
63232
63233
63234
63235
63236
63237
63238
63239
63240
63241
63242
63243
63244
63245
63246
63247
63248
63249
63250
63251
63252
63253
63254
63255
63256
63257
63258
63259
63260
63261
63262
63263
63264
63265
63266
63267
63268
63269
63270
63271
63272
63273
63274
63275
63276
63277
63278
63279
63280
63281
63282
63283
63284
63285
63286
63287
63288
63289
63290
63291
63292
63293
63294
63295
63296
63297
63298
63299
63300
63301
63302
63303
63304
63305
63306
63307
63308
63309
63310
63311
63312
63313
63314
63315
63316
63317
63318
63319
63320
63321
63322
63323
63324
63325
63326
63327
63328
63329
63330
63331
63332
63333
63334
63335
63336
63337
63338
63339
63340
63341
63342
63343
63344
63345
63346
63347
63348
63349
63350
63351
63352
63353
63354
63355
63356
63357
63358
63359
63360
63361
63362
63363
63364
63365
63366
63367
63368
63369
63370
63371
63372
63373
63374
63375
63376
63377
63378
63379
63380
63381
63382
63383
63384
63385
63386
63387
63388
63389
63390
63391
63392
63393
63394
63395
63396
63397
63398
63399
63400
63401
63402
63403
63404
63405
63406
63407
63408
63409
63410
63411
63412
63413
63414
63415
63416
63417
63418
63419
63420
63421
63422
63423
63424
63425
63426
63427
63428
63429
63430
63431
63432
63433
63434
63435
63436
63437
63438
63439
63440
63441
63442
63443
63444
63445
63446
63447
63448
63449
63450
63451
63452
63453
63454
63455
63456
63457
63458
63459
63460
63461
63462
63463
63464
63465
63466
63467
63468
63469
63470
63471
63472
63473
63474
63475
63476
63477
63478
63479
63480
63481
63482
63483
63484
63485
63486
63487
63488
63489
63490
63491
63492
63493
63494
63495
63496
63497
63498
63499
63500
63501
63502
63503
63504
63505
63506
63507
63508
63509
63510
63511
63512
63513
63514
63515
63516
63517
63518
63519
63520
63521
63522
63523
63524
63525
63526
63527
63528
63529
63530
63531
63532
63533
63534
63535
63536
63537
63538
63539
63540
63541
63542
63543
63544
63545
63546
63547
63548
63549
63550
63551
63552
63553
63554
63555
63556
63557
63558
63559
63560
63561
63562
63563
63564
63565
63566
63567
63568
63569
63570
63571
63572
63573
63574
63575
63576
63577
63578
63579
63580
63581
63582
63583
63584
63585
63586
63587
63588
63589
63590
63591
63592
63593
63594
63595
63596
63597
63598
63599
63600
63601
63602
63603
63604
63605
63606
63607
63608
63609
63610
63611
63612
63613
63614
63615
63616
63617
63618
63619
63620
63621
63622
63623
63624
63625
63626
63627
63628
63629
63630
63631
63632
63633
63634
63635
63636
63637
63638
63639
63640
63641
63642
63643
63644
63645
63646
63647
63648
63649
63650
63651
63652
63653
63654
63655
63656
63657
63658
63659
63660
63661
63662
63663
63664
63665
63666
63667
63668
63669
63670
63671
63672
63673
63674
63675
63676
63677
63678
63679
63680
63681
63682
63683
63684
63685
63686
63687
63688
63689
63690
63691
63692
63693
63694
63695
63696
63697
63698
63699
63700
63701
63702
63703
63704
63705
63706
63707
63708
63709
63710
63711
63712
63713
63714
63715
63716
63717
63718
63719
63720
63721
63722
63723
63724
63725
63726
63727
63728
63729
63730
63731
63732
63733
63734
63735
63736
63737
63738
63739
63740
63741
63742
63743
63744
63745
63746
63747
63748
63749
63750
63751
63752
63753
63754
63755
63756
63757
63758
63759
63760
63761
63762
63763
63764
63765
63766
63767
63768
63769
63770
63771
63772
63773
63774
63775
63776
63777
63778
63779
63780
63781
63782
63783
63784
63785
63786
63787
63788
63789
63790
63791
63792
63793
63794
63795
63796
63797
63798
63799
63800
63801
63802
63803
63804
63805
63806
63807
63808
63809
63810
63811
63812
63813
63814
63815
63816
63817
63818
63819
63820
63821
63822
63823
63824
63825
63826
63827
63828
63829
63830
63831
63832
63833
63834
63835
63836
63837
63838
63839
63840
63841
63842
63843
63844
63845
63846
63847
63848
63849
63850
63851
63852
63853
63854
63855
63856
63857
63858
63859
63860
63861
63862
63863
63864
63865
63866
63867
63868
63869
63870
63871
63872
63873
63874
63875
63876
63877
63878
63879
63880
63881
63882
63883
63884
63885
63886
63887
63888
63889
63890
63891
63892
63893
63894
63895
63896
63897
63898
63899
63900
63901
63902
63903
63904
63905
63906
63907
63908
63909
63910
63911
63912
63913
63914
63915
63916
63917
63918
63919
63920
63921
63922
63923
63924
63925
63926
63927
63928
63929
63930
63931
63932
63933
63934
63935
63936
63937
63938
63939
63940
63941
63942
63943
63944
63945
63946
63947
63948
63949
63950
63951
63952
63953
63954
63955
63956
63957
63958
63959
63960
63961
63962
63963
63964
63965
63966
63967
63968
63969
63970
63971
63972
63973
63974
63975
63976
63977
63978
63979
63980
63981
63982
63983
63984
63985
63986
63987
63988
63989
63990
63991
63992
63993
63994
63995
63996
63997
63998
63999
64000
64001
64002
64003
64004
64005
64006
64007
64008
64009
64010
64011
64012
64013
64014
64015
64016
64017
64018
64019
64020
64021
64022
64023
64024
64025
64026
64027
64028
64029
64030
64031
64032
64033
64034
64035
64036
64037
64038
64039
64040
64041
64042
64043
64044
64045
64046
64047
64048
64049
64050
64051
64052
64053
64054
64055
64056
64057
64058
64059
64060
64061
64062
64063
64064
64065
64066
64067
64068
64069
64070
64071
64072
64073
64074
64075
64076
64077
64078
64079
64080
64081
64082
64083
64084
64085
64086
64087
64088
64089
64090
64091
64092
64093
64094
64095
64096
64097
64098
64099
64100
64101
64102
64103
64104
64105
64106
64107
64108
64109
64110
64111
64112
64113
64114
64115
64116
64117
64118
64119
64120
64121
64122
64123
64124
64125
64126
64127
64128
64129
64130
64131
64132
64133
64134
64135
64136
64137
64138
64139
64140
64141
64142
64143
64144
64145
64146
64147
64148
64149
64150
64151
64152
64153
64154
64155
64156
64157
64158
64159
64160
64161
64162
64163
64164
64165
64166
64167
64168
64169
64170
64171
64172
64173
64174
64175
64176
64177
64178
64179
64180
64181
64182
64183
64184
64185
64186
64187
64188
64189
64190
64191
64192
64193
64194
64195
64196
64197
64198
64199
64200
64201
64202
64203
64204
64205
64206
64207
64208
64209
64210
64211
64212
64213
64214
64215
64216
64217
64218
64219
64220
64221
64222
64223
64224
64225
64226
64227
64228
64229
64230
64231
64232
64233
64234
64235
64236
64237
64238
64239
64240
64241
64242
64243
64244
64245
64246
64247
64248
64249
64250
64251
64252
64253
64254
64255
64256
64257
64258
64259
64260
64261
64262
64263
64264
64265
64266
64267
64268
64269
64270
64271
64272
64273
64274
64275
64276
64277
64278
64279
64280
64281
64282
64283
64284
64285
64286
64287
64288
64289
64290
64291
64292
64293
64294
64295
64296
64297
64298
64299
64300
64301
64302
64303
64304
64305
64306
64307
64308
64309
64310
64311
64312
64313
64314
64315
64316
64317
64318
64319
64320
64321
64322
64323
64324
64325
64326
64327
64328
64329
64330
64331
64332
64333
64334
64335
64336
64337
64338
64339
64340
64341
64342
64343
64344
64345
64346
64347
64348
64349
64350
64351
64352
64353
64354
64355
64356
64357
64358
64359
64360
64361
64362
64363
64364
64365
64366
64367
64368
64369
64370
64371
64372
64373
64374
64375
64376
64377
64378
64379
64380
64381
64382
64383
64384
64385
64386
64387
64388
64389
64390
64391
64392
64393
64394
64395
64396
64397
64398
64399
64400
64401
64402
64403
64404
64405
64406
64407
64408
64409
64410
64411
64412
64413
64414
64415
64416
64417
64418
64419
64420
64421
64422
64423
64424
64425
64426
64427
64428
64429
64430
64431
64432
64433
64434
64435
64436
64437
64438
64439
64440
64441
64442
64443
64444
64445
64446
64447
64448
64449
64450
64451
64452
64453
64454
64455
64456
64457
64458
64459
64460
64461
64462
64463
64464
64465
64466
64467
64468
64469
64470
64471
64472
64473
64474
64475
64476
64477
64478
64479
64480
64481
64482
64483
64484
64485
64486
64487
64488
64489
64490
64491
64492
64493
64494
64495
64496
64497
64498
64499
64500
64501
64502
64503
64504
64505
64506
64507
64508
64509
64510
64511
64512
64513
64514
64515
64516
64517
64518
64519
64520
64521
64522
64523
64524
64525
64526
64527
64528
64529
64530
64531
64532
64533
64534
64535
64536
64537
64538
64539
64540
64541
64542
64543
64544
64545
64546
64547
64548
64549
64550
64551
64552
64553
64554
64555
64556
64557
64558
64559
64560
64561
64562
64563
64564
64565
64566
64567
64568
64569
64570
64571
64572
64573
64574
64575
64576
64577
64578
64579
64580
64581
64582
64583
64584
64585
64586
64587
64588
64589
64590
64591
64592
64593
64594
64595
64596
64597
64598
64599
64600
64601
64602
64603
64604
64605
64606
64607
64608
64609
64610
64611
64612
64613
64614
64615
64616
64617
64618
64619
64620
64621
64622
64623
64624
64625
64626
64627
64628
64629
64630
64631
64632
64633
64634
64635
64636
64637
64638
64639
64640
64641
64642
64643
64644
64645
64646
64647
64648
64649
64650
64651
64652
64653
64654
64655
64656
64657
64658
64659
64660
64661
64662
64663
64664
64665
64666
64667
64668
64669
64670
64671
64672
64673
64674
64675
64676
64677
64678
64679
64680
64681
64682
64683
64684
64685
64686
64687
64688
64689
64690
64691
64692
64693
64694
64695
64696
64697
64698
64699
64700
64701
64702
64703
64704
64705
64706
64707
64708
64709
64710
64711
64712
64713
64714
64715
64716
64717
64718
64719
64720
64721
64722
64723
64724
64725
64726
64727
64728
64729
64730
64731
64732
64733
64734
64735
64736
64737
64738
64739
64740
64741
64742
64743
64744
64745
64746
64747
64748
64749
64750
64751
64752
64753
64754
64755
64756
64757
64758
64759
64760
64761
64762
64763
64764
64765
64766
64767
64768
64769
64770
64771
64772
64773
64774
64775
64776
64777
64778
64779
64780
64781
64782
64783
64784
64785
64786
64787
64788
64789
64790
64791
64792
64793
64794
64795
64796
64797
64798
64799
64800
64801
64802
64803
64804
64805
64806
64807
64808
64809
64810
64811
64812
64813
64814
64815
64816
64817
64818
64819
64820
64821
64822
64823
64824
64825
64826
64827
64828
64829
64830
64831
64832
64833
64834
64835
64836
64837
64838
64839
64840
64841
64842
64843
64844
64845
64846
64847
64848
64849
64850
64851
64852
64853
64854
64855
64856
64857
64858
64859
64860
64861
64862
64863
64864
64865
64866
64867
64868
64869
64870
64871
64872
64873
64874
64875
64876
64877
64878
64879
64880
64881
64882
64883
64884
64885
64886
64887
64888
64889
64890
64891
64892
64893
64894
64895
64896
64897
64898
64899
64900
64901
64902
64903
64904
64905
64906
64907
64908
64909
64910
64911
64912
64913
64914
64915
64916
64917
64918
64919
64920
64921
64922
64923
64924
64925
64926
64927
64928
64929
64930
64931
64932
64933
64934
64935
64936
64937
64938
64939
64940
64941
64942
64943
64944
64945
64946
64947
64948
64949
64950
64951
64952
64953
64954
64955
64956
64957
64958
64959
64960
64961
64962
64963
64964
64965
64966
64967
64968
64969
64970
64971
64972
64973
64974
64975
64976
64977
64978
64979
64980
64981
64982
64983
64984
64985
64986
64987
64988
64989
64990
64991
64992
64993
64994
64995
64996
64997
64998
64999
65000
65001
65002
65003
65004
65005
65006
65007
65008
65009
65010
65011
65012
65013
65014
65015
65016
65017
65018
65019
65020
65021
65022
65023
65024
65025
65026
65027
65028
65029
65030
65031
65032
65033
65034
65035
65036
65037
65038
65039
65040
65041
65042
65043
65044
65045
65046
65047
65048
65049
65050
65051
65052
65053
65054
65055
65056
65057
65058
65059
65060
65061
65062
65063
65064
65065
65066
65067
65068
65069
65070
65071
65072
65073
65074
65075
65076
65077
65078
65079
65080
65081
65082
65083
65084
65085
65086
65087
65088
65089
65090
65091
65092
65093
65094
65095
65096
65097
65098
65099
65100
65101
65102
65103
65104
65105
65106
65107
65108
65109
65110
65111
65112
65113
65114
65115
65116
65117
65118
65119
65120
65121
65122
65123
65124
65125
65126
65127
65128
65129
65130
65131
65132
65133
65134
65135
65136
65137
65138
65139
65140
65141
65142
65143
65144
65145
65146
65147
65148
65149
65150
65151
65152
65153
65154
65155
65156
65157
65158
65159
65160
65161
65162
65163
65164
65165
65166
65167
65168
65169
65170
65171
65172
65173
65174
65175
65176
65177
65178
65179
65180
65181
65182
65183
65184
65185
65186
65187
65188
65189
65190
65191
65192
65193
65194
65195
65196
65197
65198
65199
65200
65201
65202
65203
65204
65205
65206
65207
65208
65209
65210
65211
65212
65213
65214
65215
65216
65217
65218
65219
65220
65221
65222
65223
65224
65225
65226
65227
65228
65229
65230
65231
65232
65233
65234
65235
65236
65237
65238
65239
65240
65241
65242
65243
65244
65245
65246
65247
65248
65249
65250
65251
65252
65253
65254
65255
65256
65257
65258
65259
65260
65261
65262
65263
65264
65265
65266
65267
65268
65269
65270
65271
65272
65273
65274
65275
65276
65277
65278
65279
65280
65281
65282
65283
65284
65285
65286
65287
65288
65289
65290
65291
65292
65293
65294
65295
65296
65297
65298
65299
65300
65301
65302
65303
65304
65305
65306
65307
65308
65309
65310
65311
65312
65313
65314
65315
65316
65317
65318
65319
65320
65321
65322
65323
65324
65325
65326
65327
65328
65329
65330
65331
65332
65333
65334
65335
65336
65337
65338
65339
65340
65341
65342
65343
65344
65345
65346
65347
65348
65349
65350
65351
65352
65353
65354
65355
65356
65357
65358
65359
65360
65361
65362
65363
65364
65365
65366
65367
65368
65369
65370
65371
65372
65373
65374
65375
65376
65377
65378
65379
65380
65381
65382
65383
65384
65385
65386
65387
65388
65389
65390
65391
65392
65393
65394
65395
65396
65397
65398
65399
65400
65401
65402
65403
65404
65405
65406
65407
65408
65409
65410
65411
65412
65413
65414
65415
65416
65417
65418
65419
65420
65421
65422
65423
65424
65425
65426
65427
65428
65429
65430
65431
65432
65433
65434
65435
65436
65437
65438
65439
65440
65441
65442
65443
65444
65445
65446
65447
65448
65449
65450
65451
65452
65453
65454
65455
65456
65457
65458
65459
65460
65461
65462
65463
65464
65465
65466
65467
65468
65469
65470
65471
65472
65473
65474
65475
65476
65477
65478
65479
65480
65481
65482
65483
65484
65485
65486
65487
65488
65489
65490
65491
65492
65493
65494
65495
65496
65497
65498
65499
65500
65501
65502
65503
65504
65505
65506
65507
65508
65509
65510
65511
65512
65513
65514
65515
65516
65517
65518
65519
65520
65521
65522
65523
65524
65525
65526
65527
65528
65529
65530
65531
65532
65533
65534
65535
65536
65537
65538
65539
65540
65541
65542
65543
65544
65545
65546
65547
65548
65549
65550
65551
65552
65553
65554
65555
65556
65557
65558
65559
65560
65561
65562
65563
65564
65565
65566
65567
65568
65569
65570
65571
65572
65573
65574
65575
65576
65577
65578
65579
65580
65581
65582
65583
65584
65585
65586
65587
65588
65589
65590
65591
65592
65593
65594
65595
65596
65597
65598
65599
65600
65601
65602
65603
65604
65605
65606
65607
65608
65609
65610
65611
65612
65613
65614
65615
65616
65617
65618
65619
65620
65621
65622
65623
65624
65625
65626
65627
65628
65629
65630
65631
65632
65633
65634
65635
65636
65637
65638
65639
65640
65641
65642
65643
65644
65645
65646
65647
65648
65649
65650
65651
65652
65653
65654
65655
65656
65657
65658
65659
65660
65661
65662
65663
65664
65665
65666
65667
65668
65669
65670
65671
65672
65673
65674
65675
65676
65677
65678
65679
65680
65681
65682
65683
65684
65685
65686
65687
65688
65689
65690
65691
65692
65693
65694
65695
65696
65697
65698
65699
65700
65701
65702
65703
65704
65705
65706
65707
65708
65709
65710
65711
65712
65713
65714
65715
65716
65717
65718
65719
65720
65721
65722
65723
65724
65725
65726
65727
65728
65729
65730
65731
65732
65733
65734
65735
65736
65737
65738
65739
65740
65741
65742
65743
65744
65745
65746
65747
65748
65749
65750
65751
65752
65753
65754
65755
65756
65757
65758
65759
65760
65761
65762
65763
65764
65765
65766
65767
65768
65769
65770
65771
65772
65773
65774
65775
65776
65777
65778
65779
65780
65781
65782
65783
65784
65785
65786
65787
65788
65789
65790
65791
65792
65793
65794
65795
65796
65797
65798
65799
65800
65801
65802
65803
65804
65805
65806
65807
65808
65809
65810
65811
65812
65813
65814
65815
65816
65817
65818
65819
65820
65821
65822
65823
65824
65825
65826
65827
65828
65829
65830
65831
65832
65833
65834
65835
65836
65837
65838
65839
65840
65841
65842
65843
65844
65845
65846
65847
65848
65849
65850
65851
65852
65853
65854
65855
65856
65857
65858
65859
65860
65861
65862
65863
65864
65865
65866
65867
65868
65869
65870
65871
65872
65873
65874
65875
65876
65877
65878
65879
65880
65881
65882
65883
65884
65885
65886
65887
65888
65889
65890
65891
65892
65893
65894
65895
65896
65897
65898
65899
65900
65901
65902
65903
65904
65905
65906
65907
65908
65909
65910
65911
65912
65913
65914
65915
65916
65917
65918
65919
65920
65921
65922
65923
65924
65925
65926
65927
65928
65929
65930
65931
65932
65933
65934
65935
65936
65937
65938
65939
65940
65941
65942
65943
65944
65945
65946
65947
65948
65949
65950
65951
65952
65953
65954
65955
65956
65957
65958
65959
65960
65961
65962
65963
65964
65965
65966
65967
65968
65969
65970
65971
65972
65973
65974
65975
65976
65977
65978
65979
65980
65981
65982
65983
65984
65985
65986
65987
65988
65989
65990
65991
65992
65993
65994
65995
65996
65997
65998
65999
66000
66001
66002
66003
66004
66005
66006
66007
66008
66009
66010
66011
66012
66013
66014
66015
66016
66017
66018
66019
66020
66021
66022
66023
66024
66025
66026
66027
66028
66029
66030
66031
66032
66033
66034
66035
66036
66037
66038
66039
66040
66041
66042
66043
66044
66045
66046
66047
66048
66049
66050
66051
66052
66053
66054
66055
66056
66057
66058
66059
66060
66061
66062
66063
66064
66065
66066
66067
66068
66069
66070
66071
66072
66073
66074
66075
66076
66077
66078
66079
66080
66081
66082
66083
66084
66085
66086
66087
66088
66089
66090
66091
66092
66093
66094
66095
66096
66097
66098
66099
66100
66101
66102
66103
66104
66105
66106
66107
66108
66109
66110
66111
66112
66113
66114
66115
66116
66117
66118
66119
66120
66121
66122
66123
66124
66125
66126
66127
66128
66129
66130
66131
66132
66133
66134
66135
66136
66137
66138
66139
66140
66141
66142
66143
66144
66145
66146
66147
66148
66149
66150
66151
66152
66153
66154
66155
66156
66157
66158
66159
66160
66161
66162
66163
66164
66165
66166
66167
66168
66169
66170
66171
66172
66173
66174
66175
66176
66177
66178
66179
66180
66181
66182
66183
66184
66185
66186
66187
66188
66189
66190
66191
66192
66193
66194
66195
66196
66197
66198
66199
66200
66201
66202
66203
66204
66205
66206
66207
66208
66209
66210
66211
66212
66213
66214
66215
66216
66217
66218
66219
66220
66221
66222
66223
66224
66225
66226
66227
66228
66229
66230
66231
66232
66233
66234
66235
66236
66237
66238
66239
66240
66241
66242
66243
66244
66245
66246
66247
66248
66249
66250
66251
66252
66253
66254
66255
66256
66257
66258
66259
66260
66261
66262
66263
66264
66265
66266
66267
66268
66269
66270
66271
66272
66273
66274
66275
66276
66277
66278
66279
66280
66281
66282
66283
66284
66285
66286
66287
66288
66289
66290
66291
66292
66293
66294
66295
66296
66297
66298
66299
66300
66301
66302
66303
66304
66305
66306
66307
66308
66309
66310
66311
66312
66313
66314
66315
66316
66317
66318
66319
66320
66321
66322
66323
66324
66325
66326
66327
66328
66329
66330
66331
66332
66333
66334
66335
66336
66337
66338
66339
66340
66341
66342
66343
66344
66345
66346
66347
66348
66349
66350
66351
66352
66353
66354
66355
66356
66357
66358
66359
66360
66361
66362
66363
66364
66365
66366
66367
66368
66369
66370
66371
66372
66373
66374
66375
66376
66377
66378
66379
66380
66381
66382
66383
66384
66385
66386
66387
66388
66389
66390
66391
66392
66393
66394
66395
66396
66397
66398
66399
66400
66401
66402
66403
66404
66405
66406
66407
66408
66409
66410
66411
66412
66413
66414
66415
66416
66417
66418
66419
66420
66421
66422
66423
66424
66425
66426
66427
66428
66429
66430
66431
66432
66433
66434
66435
66436
66437
66438
66439
66440
66441
66442
66443
66444
66445
66446
66447
66448
66449
66450
66451
66452
66453
66454
66455
66456
66457
66458
66459
66460
66461
66462
66463
66464
66465
66466
66467
66468
66469
66470
66471
66472
66473
66474
66475
66476
66477
66478
66479
66480
66481
66482
66483
66484
66485
66486
66487
66488
66489
66490
66491
66492
66493
66494
66495
66496
66497
66498
66499
66500
66501
66502
66503
66504
66505
66506
66507
66508
66509
66510
66511
66512
66513
66514
66515
66516
66517
66518
66519
66520
66521
66522
66523
66524
66525
66526
66527
66528
66529
66530
66531
66532
66533
66534
66535
66536
66537
66538
66539
66540
66541
66542
66543
66544
66545
66546
66547
66548
66549
66550
66551
66552
66553
66554
66555
66556
66557
66558
66559
66560
66561
66562
66563
66564
66565
66566
66567
66568
66569
66570
66571
66572
66573
66574
66575
66576
66577
66578
66579
66580
66581
66582
66583
66584
66585
66586
66587
66588
66589
66590
66591
66592
66593
66594
66595
66596
66597
66598
66599
66600
66601
66602
66603
66604
66605
66606
66607
66608
66609
66610
66611
66612
66613
66614
66615
66616
66617
66618
66619
66620
66621
66622
66623
66624
66625
66626
66627
66628
66629
66630
66631
66632
66633
66634
66635
66636
66637
66638
66639
66640
66641
66642
66643
66644
66645
66646
66647
66648
66649
66650
66651
66652
66653
66654
66655
66656
66657
66658
66659
66660
66661
66662
66663
66664
66665
66666
66667
66668
66669
66670
66671
66672
66673
66674
66675
66676
66677
66678
66679
66680
66681
66682
66683
66684
66685
66686
66687
66688
66689
66690
66691
66692
66693
66694
66695
66696
66697
66698
66699
66700
66701
66702
66703
66704
66705
66706
66707
66708
66709
66710
66711
66712
66713
66714
66715
66716
66717
66718
66719
66720
66721
66722
66723
66724
66725
66726
66727
66728
66729
66730
66731
66732
66733
66734
66735
66736
66737
66738
66739
66740
66741
66742
66743
66744
66745
66746
66747
66748
66749
66750
66751
66752
66753
66754
66755
66756
66757
66758
66759
66760
66761
66762
66763
66764
66765
66766
66767
66768
66769
66770
66771
66772
66773
66774
66775
66776
66777
66778
66779
66780
66781
66782
66783
66784
66785
66786
66787
66788
66789
66790
66791
66792
66793
66794
66795
66796
66797
66798
66799
66800
66801
66802
66803
66804
66805
66806
66807
66808
66809
66810
66811
66812
66813
66814
66815
66816
66817
66818
66819
66820
66821
66822
66823
66824
66825
66826
66827
66828
66829
66830
66831
66832
66833
66834
66835
66836
66837
66838
66839
66840
66841
66842
66843
66844
66845
66846
66847
66848
66849
66850
66851
66852
66853
66854
66855
66856
66857
66858
66859
66860
66861
66862
66863
66864
66865
66866
66867
66868
66869
66870
66871
66872
66873
66874
66875
66876
66877
66878
66879
66880
66881
66882
66883
66884
66885
66886
66887
66888
66889
66890
66891
66892
66893
66894
66895
66896
66897
66898
66899
66900
66901
66902
66903
66904
66905
66906
66907
66908
66909
66910
66911
66912
66913
66914
66915
66916
66917
66918
66919
66920
66921
66922
66923
66924
66925
66926
66927
66928
66929
66930
66931
66932
66933
66934
66935
66936
66937
66938
66939
66940
66941
66942
66943
66944
66945
66946
66947
66948
66949
66950
66951
66952
66953
66954
66955
66956
66957
66958
66959
66960
66961
66962
66963
66964
66965
66966
66967
66968
66969
66970
66971
66972
66973
66974
66975
66976
66977
66978
66979
66980
66981
66982
66983
66984
66985
66986
66987
66988
66989
66990
66991
66992
66993
66994
66995
66996
66997
66998
66999
67000
67001
67002
67003
67004
67005
67006
67007
67008
67009
67010
67011
67012
67013
67014
67015
67016
67017
67018
67019
67020
67021
67022
67023
67024
67025
67026
67027
67028
67029
67030
67031
67032
67033
67034
67035
67036
67037
67038
67039
67040
67041
67042
67043
67044
67045
67046
67047
67048
67049
67050
67051
67052
67053
67054
67055
67056
67057
67058
67059
67060
67061
67062
67063
67064
67065
67066
67067
67068
67069
67070
67071
67072
67073
67074
67075
67076
67077
67078
67079
67080
67081
67082
67083
67084
67085
67086
67087
67088
67089
67090
67091
67092
67093
67094
67095
67096
67097
67098
67099
67100
67101
67102
67103
67104
67105
67106
67107
67108
67109
67110
67111
67112
67113
67114
67115
67116
67117
67118
67119
67120
67121
67122
67123
67124
67125
67126
67127
67128
67129
67130
67131
67132
67133
67134
67135
67136
67137
67138
67139
67140
67141
67142
67143
67144
67145
67146
67147
67148
67149
67150
67151
67152
67153
67154
67155
67156
67157
67158
67159
67160
67161
67162
67163
67164
67165
67166
67167
67168
67169
67170
67171
67172
67173
67174
67175
67176
67177
67178
67179
67180
67181
67182
67183
67184
67185
67186
67187
67188
67189
67190
67191
67192
67193
67194
67195
67196
67197
67198
67199
67200
67201
67202
67203
67204
67205
67206
67207
67208
67209
67210
67211
67212
67213
67214
67215
67216
67217
67218
67219
67220
67221
67222
67223
67224
67225
67226
67227
67228
67229
67230
67231
67232
67233
67234
67235
67236
67237
67238
67239
67240
67241
67242
67243
67244
67245
67246
67247
67248
67249
67250
67251
67252
67253
67254
67255
67256
67257
67258
67259
67260
67261
67262
67263
67264
67265
67266
67267
67268
67269
67270
67271
67272
67273
67274
67275
67276
67277
67278
67279
67280
67281
67282
67283
67284
67285
67286
67287
67288
67289
67290
67291
67292
67293
67294
67295
67296
67297
67298
67299
67300
67301
67302
67303
67304
67305
67306
67307
67308
67309
67310
67311
67312
67313
67314
67315
67316
67317
67318
67319
67320
67321
67322
67323
67324
67325
67326
67327
67328
67329
67330
67331
67332
67333
67334
67335
67336
67337
67338
67339
67340
67341
67342
67343
67344
67345
67346
67347
67348
67349
67350
67351
67352
67353
67354
67355
67356
67357
67358
67359
67360
67361
67362
67363
67364
67365
67366
67367
67368
67369
67370
67371
67372
67373
67374
67375
67376
67377
67378
67379
67380
67381
67382
67383
67384
67385
67386
67387
67388
67389
67390
67391
67392
67393
67394
67395
67396
67397
67398
67399
67400
67401
67402
67403
67404
67405
67406
67407
67408
67409
67410
67411
67412
67413
67414
67415
67416
67417
67418
67419
67420
67421
67422
67423
67424
67425
67426
67427
67428
67429
67430
67431
67432
67433
67434
67435
67436
67437
67438
67439
67440
67441
67442
67443
67444
67445
67446
67447
67448
67449
67450
67451
67452
67453
67454
67455
67456
67457
67458
67459
67460
67461
67462
67463
67464
67465
67466
67467
67468
67469
67470
67471
67472
67473
67474
67475
67476
67477
67478
67479
67480
67481
67482
67483
67484
67485
67486
67487
67488
67489
67490
67491
67492
67493
67494
67495
67496
67497
67498
67499
67500
67501
67502
67503
67504
67505
67506
67507
67508
67509
67510
67511
67512
67513
67514
67515
67516
67517
67518
67519
67520
67521
67522
67523
67524
67525
67526
67527
67528
67529
67530
67531
67532
67533
67534
67535
67536
67537
67538
67539
67540
67541
67542
67543
67544
67545
67546
67547
67548
67549
67550
67551
67552
67553
67554
67555
67556
67557
67558
67559
67560
67561
67562
67563
67564
67565
67566
67567
67568
67569
67570
67571
67572
67573
67574
67575
67576
67577
67578
67579
67580
67581
67582
67583
67584
67585
67586
67587
67588
67589
67590
67591
67592
67593
67594
67595
67596
67597
67598
67599
67600
67601
67602
67603
67604
67605
67606
67607
67608
67609
67610
67611
67612
67613
67614
67615
67616
67617
67618
67619
67620
67621
67622
67623
67624
67625
67626
67627
67628
67629
67630
67631
67632
67633
67634
67635
67636
67637
67638
67639
67640
67641
67642
67643
67644
67645
67646
67647
67648
67649
67650
67651
67652
67653
67654
67655
67656
67657
67658
67659
67660
67661
67662
67663
67664
67665
67666
67667
67668
67669
67670
67671
67672
67673
67674
67675
67676
67677
67678
67679
67680
67681
67682
67683
67684
67685
67686
67687
67688
67689
67690
67691
67692
67693
67694
67695
67696
67697
67698
67699
67700
67701
67702
67703
67704
67705
67706
67707
67708
67709
67710
67711
67712
67713
67714
67715
67716
67717
67718
67719
67720
67721
67722
67723
67724
67725
67726
67727
67728
67729
67730
67731
67732
67733
67734
67735
67736
67737
67738
67739
67740
67741
67742
67743
67744
67745
67746
67747
67748
67749
67750
67751
67752
67753
67754
67755
67756
67757
67758
67759
67760
67761
67762
67763
67764
67765
67766
67767
67768
67769
67770
67771
67772
67773
67774
67775
67776
67777
67778
67779
67780
67781
67782
67783
67784
67785
67786
67787
67788
67789
67790
67791
67792
67793
67794
67795
67796
67797
67798
67799
67800
67801
67802
67803
67804
67805
67806
67807
67808
67809
67810
67811
67812
67813
67814
67815
67816
67817
67818
67819
67820
67821
67822
67823
67824
67825
67826
67827
67828
67829
67830
67831
67832
67833
67834
67835
67836
67837
67838
67839
67840
67841
67842
67843
67844
67845
67846
67847
67848
67849
67850
67851
67852
67853
67854
67855
67856
67857
67858
67859
67860
67861
67862
67863
67864
67865
67866
67867
67868
67869
67870
67871
67872
67873
67874
67875
67876
67877
67878
67879
67880
67881
67882
67883
67884
67885
67886
67887
67888
67889
67890
67891
67892
67893
67894
67895
67896
67897
67898
67899
67900
67901
67902
67903
67904
67905
67906
67907
67908
67909
67910
67911
67912
67913
67914
67915
67916
67917
67918
67919
67920
67921
67922
67923
67924
67925
67926
67927
67928
67929
67930
67931
67932
67933
67934
67935
67936
67937
67938
67939
67940
67941
67942
67943
67944
67945
67946
67947
67948
67949
67950
67951
67952
67953
67954
67955
67956
67957
67958
67959
67960
67961
67962
67963
67964
67965
67966
67967
67968
67969
67970
67971
67972
67973
67974
67975
67976
67977
67978
67979
67980
67981
67982
67983
67984
67985
67986
67987
67988
67989
67990
67991
67992
67993
67994
67995
67996
67997
67998
67999
68000
68001
68002
68003
68004
68005
68006
68007
68008
68009
68010
68011
68012
68013
68014
68015
68016
68017
68018
68019
68020
68021
68022
68023
68024
68025
68026
68027
68028
68029
68030
68031
68032
68033
68034
68035
68036
68037
68038
68039
68040
68041
68042
68043
68044
68045
68046
68047
68048
68049
68050
68051
68052
68053
68054
68055
68056
68057
68058
68059
68060
68061
68062
68063
68064
68065
68066
68067
68068
68069
68070
68071
68072
68073
68074
68075
68076
68077
68078
68079
68080
68081
68082
68083
68084
68085
68086
68087
68088
68089
68090
68091
68092
68093
68094
68095
68096
68097
68098
68099
68100
68101
68102
68103
68104
68105
68106
68107
68108
68109
68110
68111
68112
68113
68114
68115
68116
68117
68118
68119
68120
68121
68122
68123
68124
68125
68126
68127
68128
68129
68130
68131
68132
68133
68134
68135
68136
68137
68138
68139
68140
68141
68142
68143
68144
68145
68146
68147
68148
68149
68150
68151
68152
68153
68154
68155
68156
68157
68158
68159
68160
68161
68162
68163
68164
68165
68166
68167
68168
68169
68170
68171
68172
68173
68174
68175
68176
68177
68178
68179
68180
68181
68182
68183
68184
68185
68186
68187
68188
68189
68190
68191
68192
68193
68194
68195
68196
68197
68198
68199
68200
68201
68202
68203
68204
68205
68206
68207
68208
68209
68210
68211
68212
68213
68214
68215
68216
68217
68218
68219
68220
68221
68222
68223
68224
68225
68226
68227
68228
68229
68230
68231
68232
68233
68234
68235
68236
68237
68238
68239
68240
68241
68242
68243
68244
68245
68246
68247
68248
68249
68250
68251
68252
68253
68254
68255
68256
68257
68258
68259
68260
68261
68262
68263
68264
68265
68266
68267
68268
68269
68270
68271
68272
68273
68274
68275
68276
68277
68278
68279
68280
68281
68282
68283
68284
68285
68286
68287
68288
68289
68290
68291
68292
68293
68294
68295
68296
68297
68298
68299
68300
68301
68302
68303
68304
68305
68306
68307
68308
68309
68310
68311
68312
68313
68314
68315
68316
68317
68318
68319
68320
68321
68322
68323
68324
68325
68326
68327
68328
68329
68330
68331
68332
68333
68334
68335
68336
68337
68338
68339
68340
68341
68342
68343
68344
68345
68346
68347
68348
68349
68350
68351
68352
68353
68354
68355
68356
68357
68358
68359
68360
68361
68362
68363
68364
68365
68366
68367
68368
68369
68370
68371
68372
68373
68374
68375
68376
68377
68378
68379
68380
68381
68382
68383
68384
68385
68386
68387
68388
68389
68390
68391
68392
68393
68394
68395
68396
68397
68398
68399
68400
68401
68402
68403
68404
68405
68406
68407
68408
68409
68410
68411
68412
68413
68414
68415
68416
68417
68418
68419
68420
68421
68422
68423
68424
68425
68426
68427
68428
68429
68430
68431
68432
68433
68434
68435
68436
68437
68438
68439
68440
68441
68442
68443
68444
68445
68446
68447
68448
68449
68450
68451
68452
68453
68454
68455
68456
68457
68458
68459
68460
68461
68462
68463
68464
68465
68466
68467
68468
68469
68470
68471
68472
68473
68474
68475
68476
68477
68478
68479
68480
68481
68482
68483
68484
68485
68486
68487
68488
68489
68490
68491
68492
68493
68494
68495
68496
68497
68498
68499
68500
68501
68502
68503
68504
68505
68506
68507
68508
68509
68510
68511
68512
68513
68514
68515
68516
68517
68518
68519
68520
68521
68522
68523
68524
68525
68526
68527
68528
68529
68530
68531
68532
68533
68534
68535
68536
68537
68538
68539
68540
68541
68542
68543
68544
68545
68546
68547
68548
68549
68550
68551
68552
68553
68554
68555
68556
68557
68558
68559
68560
68561
68562
68563
68564
68565
68566
68567
68568
68569
68570
68571
68572
68573
68574
68575
68576
68577
68578
68579
68580
68581
68582
68583
68584
68585
68586
68587
68588
68589
68590
68591
68592
68593
68594
68595
68596
68597
68598
68599
68600
68601
68602
68603
68604
68605
68606
68607
68608
68609
68610
68611
68612
68613
68614
68615
68616
68617
68618
68619
68620
68621
68622
68623
68624
68625
68626
68627
68628
68629
68630
68631
68632
68633
68634
68635
68636
68637
68638
68639
68640
68641
68642
68643
68644
68645
68646
68647
68648
68649
68650
68651
68652
68653
68654
68655
68656
68657
68658
68659
68660
68661
68662
68663
68664
68665
68666
68667
68668
68669
68670
68671
68672
68673
68674
68675
68676
68677
68678
68679
68680
68681
68682
68683
68684
68685
68686
68687
68688
68689
68690
68691
68692
68693
68694
68695
68696
68697
68698
68699
68700
68701
68702
68703
68704
68705
68706
68707
68708
68709
68710
68711
68712
68713
68714
68715
68716
68717
68718
68719
68720
68721
68722
68723
68724
68725
68726
68727
68728
68729
68730
68731
68732
68733
68734
68735
68736
68737
68738
68739
68740
68741
68742
68743
68744
68745
68746
68747
68748
68749
68750
68751
68752
68753
68754
68755
68756
68757
68758
68759
68760
68761
68762
68763
68764
68765
68766
68767
68768
68769
68770
68771
68772
68773
68774
68775
68776
68777
68778
68779
68780
68781
68782
68783
68784
68785
68786
68787
68788
68789
68790
68791
68792
68793
68794
68795
68796
68797
68798
68799
68800
68801
68802
68803
68804
68805
68806
68807
68808
68809
68810
68811
68812
68813
68814
68815
68816
68817
68818
68819
68820
68821
68822
68823
68824
68825
68826
68827
68828
68829
68830
68831
68832
68833
68834
68835
68836
68837
68838
68839
68840
68841
68842
68843
68844
68845
68846
68847
68848
68849
68850
68851
68852
68853
68854
68855
68856
68857
68858
68859
68860
68861
68862
68863
68864
68865
68866
68867
68868
68869
68870
68871
68872
68873
68874
68875
68876
68877
68878
68879
68880
68881
68882
68883
68884
68885
68886
68887
68888
68889
68890
68891
68892
68893
68894
68895
68896
68897
68898
68899
68900
68901
68902
68903
68904
68905
68906
68907
68908
68909
68910
68911
68912
68913
68914
68915
68916
68917
68918
68919
68920
68921
68922
68923
68924
68925
68926
68927
68928
68929
68930
68931
68932
68933
68934
68935
68936
68937
68938
68939
68940
68941
68942
68943
68944
68945
68946
68947
68948
68949
68950
68951
68952
68953
68954
68955
68956
68957
68958
68959
68960
68961
68962
68963
68964
68965
68966
68967
68968
68969
68970
68971
68972
68973
68974
68975
68976
68977
68978
68979
68980
68981
68982
68983
68984
68985
68986
68987
68988
68989
68990
68991
68992
68993
68994
68995
68996
68997
68998
68999
69000
69001
69002
69003
69004
69005
69006
69007
69008
69009
69010
69011
69012
69013
69014
69015
69016
69017
69018
69019
69020
69021
69022
69023
69024
69025
69026
69027
69028
69029
69030
69031
69032
69033
69034
69035
69036
69037
69038
69039
69040
69041
69042
69043
69044
69045
69046
69047
69048
69049
69050
69051
69052
69053
69054
69055
69056
69057
69058
69059
69060
69061
69062
69063
69064
69065
69066
69067
69068
69069
69070
69071
69072
69073
69074
69075
69076
69077
69078
69079
69080
69081
69082
69083
69084
69085
69086
69087
69088
69089
69090
69091
69092
69093
69094
69095
69096
69097
69098
69099
69100
69101
69102
69103
69104
69105
69106
69107
69108
69109
69110
69111
69112
69113
69114
69115
69116
69117
69118
69119
69120
69121
69122
69123
69124
69125
69126
69127
69128
69129
69130
69131
69132
69133
69134
69135
69136
69137
69138
69139
69140
69141
69142
69143
69144
69145
69146
69147
69148
69149
69150
69151
69152
69153
69154
69155
69156
69157
69158
69159
69160
69161
69162
69163
69164
69165
69166
69167
69168
69169
69170
69171
69172
69173
69174
69175
69176
69177
69178
69179
69180
69181
69182
69183
69184
69185
69186
69187
69188
69189
69190
69191
69192
69193
69194
69195
69196
69197
69198
69199
69200
69201
69202
69203
69204
69205
69206
69207
69208
69209
69210
69211
69212
69213
69214
69215
69216
69217
69218
69219
69220
69221
69222
69223
69224
69225
69226
69227
69228
69229
69230
69231
69232
69233
69234
69235
69236
69237
69238
69239
69240
69241
69242
69243
69244
69245
69246
69247
69248
69249
69250
69251
69252
69253
69254
69255
69256
69257
69258
69259
69260
69261
69262
69263
69264
69265
69266
69267
69268
69269
69270
69271
69272
69273
69274
69275
69276
69277
69278
69279
69280
69281
69282
69283
69284
69285
69286
69287
69288
69289
69290
69291
69292
69293
69294
69295
69296
69297
69298
69299
69300
69301
69302
69303
69304
69305
69306
69307
69308
69309
69310
69311
69312
69313
69314
69315
69316
69317
69318
69319
69320
69321
69322
69323
69324
69325
69326
69327
69328
69329
69330
69331
69332
69333
69334
69335
69336
69337
69338
69339
69340
69341
69342
69343
69344
69345
69346
69347
69348
69349
69350
69351
69352
69353
69354
69355
69356
69357
69358
69359
69360
69361
69362
69363
69364
69365
69366
69367
69368
69369
69370
69371
69372
69373
69374
69375
69376
69377
69378
69379
69380
69381
69382
69383
69384
69385
69386
69387
69388
69389
69390
69391
69392
69393
69394
69395
69396
69397
69398
69399
69400
69401
69402
69403
69404
69405
69406
69407
69408
69409
69410
69411
69412
69413
69414
69415
69416
69417
69418
69419
69420
69421
69422
69423
69424
69425
69426
69427
69428
69429
69430
69431
69432
69433
69434
69435
69436
69437
69438
69439
69440
69441
69442
69443
69444
69445
69446
69447
69448
69449
69450
69451
69452
69453
69454
69455
69456
69457
69458
69459
69460
69461
69462
69463
69464
69465
69466
69467
69468
69469
69470
69471
69472
69473
69474
69475
69476
69477
69478
69479
69480
69481
69482
69483
69484
69485
69486
69487
69488
69489
69490
69491
69492
69493
69494
69495
69496
69497
69498
69499
69500
69501
69502
69503
69504
69505
69506
69507
69508
69509
69510
69511
69512
69513
69514
69515
69516
69517
69518
69519
69520
69521
69522
69523
69524
69525
69526
69527
69528
69529
69530
69531
69532
69533
69534
69535
69536
69537
69538
69539
69540
69541
69542
69543
69544
69545
69546
69547
69548
69549
69550
69551
69552
69553
69554
69555
69556
69557
69558
69559
69560
69561
69562
69563
69564
69565
69566
69567
69568
69569
69570
69571
69572
69573
69574
69575
69576
69577
69578
69579
69580
69581
69582
69583
69584
69585
69586
69587
69588
69589
69590
69591
69592
69593
69594
69595
69596
69597
69598
69599
69600
69601
69602
69603
69604
69605
69606
69607
69608
69609
69610
69611
69612
69613
69614
69615
69616
69617
69618
69619
69620
69621
69622
69623
69624
69625
69626
69627
69628
69629
69630
69631
69632
69633
69634
69635
69636
69637
69638
69639
69640
69641
69642
69643
69644
69645
69646
69647
69648
69649
69650
69651
69652
69653
69654
69655
69656
69657
69658
69659
69660
69661
69662
69663
69664
69665
69666
69667
69668
69669
69670
69671
69672
69673
69674
69675
69676
69677
69678
69679
69680
69681
69682
69683
69684
69685
69686
69687
69688
69689
69690
69691
69692
69693
69694
69695
69696
69697
69698
69699
69700
69701
69702
69703
69704
69705
69706
69707
69708
69709
69710
69711
69712
69713
69714
69715
69716
69717
69718
69719
69720
69721
69722
69723
69724
69725
69726
69727
69728
69729
69730
69731
69732
69733
69734
69735
69736
69737
69738
69739
69740
69741
69742
69743
69744
69745
69746
69747
69748
69749
69750
69751
69752
69753
69754
69755
69756
69757
69758
69759
69760
69761
69762
69763
69764
69765
69766
69767
69768
69769
69770
69771
69772
69773
69774
69775
69776
69777
69778
69779
69780
69781
69782
69783
69784
69785
69786
69787
69788
69789
69790
69791
69792
69793
69794
69795
69796
69797
69798
69799
69800
69801
69802
69803
69804
69805
69806
69807
69808
69809
69810
69811
69812
69813
69814
69815
69816
69817
69818
69819
69820
69821
69822
69823
69824
69825
69826
69827
69828
69829
69830
69831
69832
69833
69834
69835
69836
69837
69838
69839
69840
69841
69842
69843
69844
69845
69846
69847
69848
69849
69850
69851
69852
69853
69854
69855
69856
69857
69858
69859
69860
69861
69862
69863
69864
69865
69866
69867
69868
69869
69870
69871
69872
69873
69874
69875
69876
69877
69878
69879
69880
69881
69882
69883
69884
69885
69886
69887
69888
69889
69890
69891
69892
69893
69894
69895
69896
69897
69898
69899
69900
69901
69902
69903
69904
69905
69906
69907
69908
69909
69910
69911
69912
69913
69914
69915
69916
69917
69918
69919
69920
69921
69922
69923
69924
69925
69926
69927
69928
69929
69930
69931
69932
69933
69934
69935
69936
69937
69938
69939
69940
69941
69942
69943
69944
69945
69946
69947
69948
69949
69950
69951
69952
69953
69954
69955
69956
69957
69958
69959
69960
69961
69962
69963
69964
69965
69966
69967
69968
69969
69970
69971
69972
69973
69974
69975
69976
69977
69978
69979
69980
69981
69982
69983
69984
69985
69986
69987
69988
69989
69990
69991
69992
69993
69994
69995
69996
69997
69998
69999
70000
70001
70002
70003
70004
70005
70006
70007
70008
70009
70010
70011
70012
70013
70014
70015
70016
70017
70018
70019
70020
70021
70022
70023
70024
70025
70026
70027
70028
70029
70030
70031
70032
70033
70034
70035
70036
70037
70038
70039
70040
70041
70042
70043
70044
70045
70046
70047
70048
70049
70050
70051
70052
70053
70054
70055
70056
70057
70058
70059
70060
70061
70062
70063
70064
70065
70066
70067
70068
70069
70070
70071
70072
70073
70074
70075
70076
70077
70078
70079
70080
70081
70082
70083
70084
70085
70086
70087
70088
70089
70090
70091
70092
70093
70094
70095
70096
70097
70098
70099
70100
70101
70102
70103
70104
70105
70106
70107
70108
70109
70110
70111
70112
70113
70114
70115
70116
70117
70118
70119
70120
70121
70122
70123
70124
70125
70126
70127
70128
70129
70130
70131
70132
70133
70134
70135
70136
70137
70138
70139
70140
70141
70142
70143
70144
70145
70146
70147
70148
70149
70150
70151
70152
70153
70154
70155
70156
70157
70158
70159
70160
70161
70162
70163
70164
70165
70166
70167
70168
70169
70170
70171
70172
70173
70174
70175
70176
70177
70178
70179
70180
70181
70182
70183
70184
70185
70186
70187
70188
70189
70190
70191
70192
70193
70194
70195
70196
70197
70198
70199
70200
70201
70202
70203
70204
70205
70206
70207
70208
70209
70210
70211
70212
70213
70214
70215
70216
70217
70218
70219
70220
70221
70222
70223
70224
70225
70226
70227
70228
70229
70230
70231
70232
70233
70234
70235
70236
70237
70238
70239
70240
70241
70242
70243
70244
70245
70246
70247
70248
70249
70250
70251
70252
70253
70254
70255
70256
70257
70258
70259
70260
70261
70262
70263
70264
70265
70266
70267
70268
70269
70270
70271
70272
70273
70274
70275
70276
70277
70278
70279
70280
70281
70282
70283
70284
70285
70286
70287
70288
70289
70290
70291
70292
70293
70294
70295
70296
70297
70298
70299
70300
70301
70302
70303
70304
70305
70306
70307
70308
70309
70310
70311
70312
70313
70314
70315
70316
70317
70318
70319
70320
70321
70322
70323
70324
70325
70326
70327
70328
70329
70330
70331
70332
70333
70334
70335
70336
70337
70338
70339
70340
70341
70342
70343
70344
70345
70346
70347
70348
70349
70350
70351
70352
70353
70354
70355
70356
70357
70358
70359
70360
70361
70362
70363
70364
70365
70366
70367
70368
70369
70370
70371
70372
70373
70374
70375
70376
70377
70378
70379
70380
70381
70382
70383
70384
70385
70386
70387
70388
70389
70390
70391
70392
70393
70394
70395
70396
70397
70398
70399
70400
70401
70402
70403
70404
70405
70406
70407
70408
70409
70410
70411
70412
70413
70414
70415
70416
70417
70418
70419
70420
70421
70422
70423
70424
70425
70426
70427
70428
70429
70430
70431
70432
70433
70434
70435
70436
70437
70438
70439
70440
70441
70442
70443
70444
70445
70446
70447
70448
70449
70450
70451
70452
70453
70454
70455
70456
70457
70458
70459
70460
70461
70462
70463
70464
70465
70466
70467
70468
70469
70470
70471
70472
70473
70474
70475
70476
70477
70478
70479
70480
70481
70482
70483
70484
70485
70486
70487
70488
70489
70490
70491
70492
70493
70494
70495
70496
70497
70498
70499
70500
70501
70502
70503
70504
70505
70506
70507
70508
70509
70510
70511
70512
70513
70514
70515
70516
70517
70518
70519
70520
70521
70522
70523
70524
70525
70526
70527
70528
70529
70530
70531
70532
70533
70534
70535
70536
70537
70538
70539
70540
70541
70542
70543
70544
70545
70546
70547
70548
70549
70550
70551
70552
70553
70554
70555
70556
70557
70558
70559
70560
70561
70562
70563
70564
70565
70566
70567
70568
70569
70570
70571
70572
70573
70574
70575
70576
70577
70578
70579
70580
70581
70582
70583
70584
70585
70586
70587
70588
70589
70590
70591
70592
70593
70594
70595
70596
70597
70598
70599
70600
70601
70602
70603
70604
70605
70606
70607
70608
70609
70610
70611
70612
70613
70614
70615
70616
70617
70618
70619
70620
70621
70622
70623
70624
70625
70626
70627
70628
70629
70630
70631
70632
70633
70634
70635
70636
70637
70638
70639
70640
70641
70642
70643
70644
70645
70646
70647
70648
70649
70650
70651
70652
70653
70654
70655
70656
70657
70658
70659
70660
70661
70662
70663
70664
70665
70666
70667
70668
70669
70670
70671
70672
70673
70674
70675
70676
70677
70678
70679
70680
70681
70682
70683
70684
70685
70686
70687
70688
70689
70690
70691
70692
70693
70694
70695
70696
70697
70698
70699
70700
70701
70702
70703
70704
70705
70706
70707
70708
70709
70710
70711
70712
70713
70714
70715
70716
70717
70718
70719
70720
70721
70722
70723
70724
70725
70726
70727
70728
70729
70730
70731
70732
70733
70734
70735
70736
70737
70738
70739
70740
70741
70742
70743
70744
70745
70746
70747
70748
70749
70750
70751
70752
70753
70754
70755
70756
70757
70758
70759
70760
70761
70762
70763
70764
70765
70766
70767
70768
70769
70770
70771
70772
70773
70774
70775
70776
70777
70778
70779
70780
70781
70782
70783
70784
70785
70786
70787
70788
70789
70790
70791
70792
70793
70794
70795
70796
70797
70798
70799
70800
70801
70802
70803
70804
70805
70806
70807
70808
70809
70810
70811
70812
70813
70814
70815
70816
70817
70818
70819
70820
70821
70822
70823
70824
70825
70826
70827
70828
70829
70830
70831
70832
70833
70834
70835
70836
70837
70838
70839
70840
70841
70842
70843
70844
70845
70846
70847
70848
70849
70850
70851
70852
70853
70854
70855
70856
70857
70858
70859
70860
70861
70862
70863
70864
70865
70866
70867
70868
70869
70870
70871
70872
70873
70874
70875
70876
70877
70878
70879
70880
70881
70882
70883
70884
70885
70886
70887
70888
70889
70890
70891
70892
70893
70894
70895
70896
70897
70898
70899
70900
70901
70902
70903
70904
70905
70906
70907
70908
70909
70910
70911
70912
70913
70914
70915
70916
70917
70918
70919
70920
70921
70922
70923
70924
70925
70926
70927
70928
70929
70930
70931
70932
70933
70934
70935
70936
70937
70938
70939
70940
70941
70942
70943
70944
70945
70946
70947
70948
70949
70950
70951
70952
70953
70954
70955
70956
70957
70958
70959
70960
70961
70962
70963
70964
70965
70966
70967
70968
70969
70970
70971
70972
70973
70974
70975
70976
70977
70978
70979
70980
70981
70982
70983
70984
70985
70986
70987
70988
70989
70990
70991
70992
70993
70994
70995
70996
70997
70998
70999
71000
71001
71002
71003
71004
71005
71006
71007
71008
71009
71010
71011
71012
71013
71014
71015
71016
71017
71018
71019
71020
71021
71022
71023
71024
71025
71026
71027
71028
71029
71030
71031
71032
71033
71034
71035
71036
71037
71038
71039
71040
71041
71042
71043
71044
71045
71046
71047
71048
71049
71050
71051
71052
71053
71054
71055
71056
71057
71058
71059
71060
71061
71062
71063
71064
71065
71066
71067
71068
71069
71070
71071
71072
71073
71074
71075
71076
71077
71078
71079
71080
71081
71082
71083
71084
71085
71086
71087
71088
71089
71090
71091
71092
71093
71094
71095
71096
71097
71098
71099
71100
71101
71102
71103
71104
71105
71106
71107
71108
71109
71110
71111
71112
71113
71114
71115
71116
71117
71118
71119
71120
71121
71122
71123
71124
71125
71126
71127
71128
71129
71130
71131
71132
71133
71134
71135
71136
71137
71138
71139
71140
71141
71142
71143
71144
71145
71146
71147
71148
71149
71150
71151
71152
71153
71154
71155
71156
71157
71158
71159
71160
71161
71162
71163
71164
71165
71166
71167
71168
71169
71170
71171
71172
71173
71174
71175
71176
71177
71178
71179
71180
71181
71182
71183
71184
71185
71186
71187
71188
71189
71190
71191
71192
71193
71194
71195
71196
71197
71198
71199
71200
71201
71202
71203
71204
71205
71206
71207
71208
71209
71210
71211
71212
71213
71214
71215
71216
71217
71218
71219
71220
71221
71222
71223
71224
71225
71226
71227
71228
71229
71230
71231
71232
71233
71234
71235
71236
71237
71238
71239
71240
71241
71242
71243
71244
71245
71246
71247
71248
71249
71250
71251
71252
71253
71254
71255
71256
71257
71258
71259
71260
71261
71262
71263
71264
71265
71266
71267
71268
71269
71270
71271
71272
71273
71274
71275
71276
71277
71278
71279
71280
71281
71282
71283
71284
71285
71286
71287
71288
71289
71290
71291
71292
71293
71294
71295
71296
71297
71298
71299
71300
71301
71302
71303
71304
71305
71306
71307
71308
71309
71310
71311
71312
71313
71314
71315
71316
71317
71318
71319
71320
71321
71322
71323
71324
71325
71326
71327
71328
71329
71330
71331
71332
71333
71334
71335
71336
71337
71338
71339
71340
71341
71342
71343
71344
71345
71346
71347
71348
71349
71350
71351
71352
71353
71354
71355
71356
71357
71358
71359
71360
71361
71362
71363
71364
71365
71366
71367
71368
71369
71370
71371
71372
71373
71374
71375
71376
71377
71378
71379
71380
71381
71382
71383
71384
71385
71386
71387
71388
71389
71390
71391
71392
71393
71394
71395
71396
71397
71398
71399
71400
71401
71402
71403
71404
71405
71406
71407
71408
71409
71410
71411
71412
71413
71414
71415
71416
71417
71418
71419
71420
71421
71422
71423
71424
71425
71426
71427
71428
71429
71430
71431
71432
71433
71434
71435
71436
71437
71438
71439
71440
71441
71442
71443
71444
71445
71446
71447
71448
71449
71450
71451
71452
71453
71454
71455
71456
71457
71458
71459
71460
71461
71462
71463
71464
71465
71466
71467
71468
71469
71470
71471
71472
71473
71474
71475
71476
71477
71478
71479
71480
71481
71482
71483
71484
71485
71486
71487
71488
71489
71490
71491
71492
71493
71494
71495
71496
71497
71498
71499
71500
71501
71502
71503
71504
71505
71506
71507
71508
71509
71510
71511
71512
71513
71514
71515
71516
71517
71518
71519
71520
71521
71522
71523
71524
71525
71526
71527
71528
71529
71530
71531
71532
71533
71534
71535
71536
71537
71538
71539
71540
71541
71542
71543
71544
71545
71546
71547
71548
71549
71550
71551
71552
71553
71554
71555
71556
71557
71558
71559
71560
71561
71562
71563
71564
71565
71566
71567
71568
71569
71570
71571
71572
71573
71574
71575
71576
71577
71578
71579
71580
71581
71582
71583
71584
71585
71586
71587
71588
71589
71590
71591
71592
71593
71594
71595
71596
71597
71598
71599
71600
71601
71602
71603
71604
71605
71606
71607
71608
71609
71610
71611
71612
71613
71614
71615
71616
71617
71618
71619
71620
71621
71622
71623
71624
71625
71626
71627
71628
71629
71630
71631
71632
71633
71634
71635
71636
71637
71638
71639
71640
71641
71642
71643
71644
71645
71646
71647
71648
71649
71650
71651
71652
71653
71654
71655
71656
71657
71658
71659
71660
71661
71662
71663
71664
71665
71666
71667
71668
71669
71670
71671
71672
71673
71674
71675
71676
71677
71678
71679
71680
71681
71682
71683
71684
71685
71686
71687
71688
71689
71690
71691
71692
71693
71694
71695
71696
71697
71698
71699
71700
71701
71702
71703
71704
71705
71706
71707
71708
71709
71710
71711
71712
71713
71714
71715
71716
71717
71718
71719
71720
71721
71722
71723
71724
71725
71726
71727
71728
71729
71730
71731
71732
71733
71734
71735
71736
71737
71738
71739
71740
71741
71742
71743
71744
71745
71746
71747
71748
71749
71750
71751
71752
71753
71754
71755
71756
71757
71758
71759
71760
71761
71762
71763
71764
71765
71766
71767
71768
71769
71770
71771
71772
71773
71774
71775
71776
71777
71778
71779
71780
71781
71782
71783
71784
71785
71786
71787
71788
71789
71790
71791
71792
71793
71794
71795
71796
71797
71798
71799
71800
71801
71802
71803
71804
71805
71806
71807
71808
71809
71810
71811
71812
71813
71814
71815
71816
71817
71818
71819
71820
71821
71822
71823
71824
71825
71826
71827
71828
71829
71830
71831
71832
71833
71834
71835
71836
71837
71838
71839
71840
71841
71842
71843
71844
71845
71846
71847
71848
71849
71850
71851
71852
71853
71854
71855
71856
71857
71858
71859
71860
71861
71862
71863
71864
71865
71866
71867
71868
71869
71870
71871
71872
71873
71874
71875
71876
71877
71878
71879
71880
71881
71882
71883
71884
71885
71886
71887
71888
71889
71890
71891
71892
71893
71894
71895
71896
71897
71898
71899
71900
71901
71902
71903
71904
71905
71906
71907
71908
71909
71910
71911
71912
71913
71914
71915
71916
71917
71918
71919
71920
71921
71922
71923
71924
71925
71926
71927
71928
71929
71930
71931
71932
71933
71934
71935
71936
71937
71938
71939
71940
71941
71942
71943
71944
71945
71946
71947
71948
71949
71950
71951
71952
71953
71954
71955
71956
71957
71958
71959
71960
71961
71962
71963
71964
71965
71966
71967
71968
71969
71970
71971
71972
71973
71974
71975
71976
71977
71978
71979
71980
71981
71982
71983
71984
71985
71986
71987
71988
71989
71990
71991
71992
71993
71994
71995
71996
71997
71998
71999
72000
72001
72002
72003
72004
72005
72006
72007
72008
72009
72010
72011
72012
72013
72014
72015
72016
72017
72018
72019
72020
72021
72022
72023
72024
72025
72026
72027
72028
72029
72030
72031
72032
72033
72034
72035
72036
72037
72038
72039
72040
72041
72042
72043
72044
72045
72046
72047
72048
72049
72050
72051
72052
72053
72054
72055
72056
72057
72058
72059
72060
72061
72062
72063
72064
72065
72066
72067
72068
72069
72070
72071
72072
72073
72074
72075
72076
72077
72078
72079
72080
72081
72082
72083
72084
72085
72086
72087
72088
72089
72090
72091
72092
72093
72094
72095
72096
72097
72098
72099
72100
72101
72102
72103
72104
72105
72106
72107
72108
72109
72110
72111
72112
72113
72114
72115
72116
72117
72118
72119
72120
72121
72122
72123
72124
72125
72126
72127
72128
72129
72130
72131
72132
72133
72134
72135
72136
72137
72138
72139
72140
72141
72142
72143
72144
72145
72146
72147
72148
72149
72150
72151
72152
72153
72154
72155
72156
72157
72158
72159
72160
72161
72162
72163
72164
72165
72166
72167
72168
72169
72170
72171
72172
72173
72174
72175
72176
72177
72178
72179
72180
72181
72182
72183
72184
72185
72186
72187
72188
72189
72190
72191
72192
72193
72194
72195
72196
72197
72198
72199
72200
72201
72202
72203
72204
72205
72206
72207
72208
72209
72210
72211
72212
72213
72214
72215
72216
72217
72218
72219
72220
72221
72222
72223
72224
72225
72226
72227
72228
72229
72230
72231
72232
72233
72234
72235
72236
72237
72238
72239
72240
72241
72242
72243
72244
72245
72246
72247
72248
72249
72250
72251
72252
72253
72254
72255
72256
72257
72258
72259
72260
72261
72262
72263
72264
72265
72266
72267
72268
72269
72270
72271
72272
72273
72274
72275
72276
72277
72278
72279
72280
72281
72282
72283
72284
72285
72286
72287
72288
72289
72290
72291
72292
72293
72294
72295
72296
72297
72298
72299
72300
72301
72302
72303
72304
72305
72306
72307
72308
72309
72310
72311
72312
72313
72314
72315
72316
72317
72318
72319
72320
72321
72322
72323
72324
72325
72326
72327
72328
72329
72330
72331
72332
72333
72334
72335
72336
72337
72338
72339
72340
72341
72342
72343
72344
72345
72346
72347
72348
72349
72350
72351
72352
72353
72354
72355
72356
72357
72358
72359
72360
72361
72362
72363
72364
72365
72366
72367
72368
72369
72370
72371
72372
72373
72374
72375
72376
72377
72378
72379
72380
72381
72382
72383
72384
72385
72386
72387
72388
72389
72390
72391
72392
72393
72394
72395
72396
72397
72398
72399
72400
72401
72402
72403
72404
72405
72406
72407
72408
72409
72410
72411
72412
72413
72414
72415
72416
72417
72418
72419
72420
72421
72422
72423
72424
72425
72426
72427
72428
72429
72430
72431
72432
72433
72434
72435
72436
72437
72438
72439
72440
72441
72442
72443
72444
72445
72446
72447
72448
72449
72450
72451
72452
72453
72454
72455
72456
72457
72458
72459
72460
72461
72462
72463
72464
72465
72466
72467
72468
72469
72470
72471
72472
72473
72474
72475
72476
72477
72478
72479
72480
72481
72482
72483
72484
72485
72486
72487
72488
72489
72490
72491
72492
72493
72494
72495
72496
72497
72498
72499
72500
72501
72502
72503
72504
72505
72506
72507
72508
72509
72510
72511
72512
72513
72514
72515
72516
72517
72518
72519
72520
72521
72522
72523
72524
72525
72526
72527
72528
72529
72530
72531
72532
72533
72534
72535
72536
72537
72538
72539
72540
72541
72542
72543
72544
72545
72546
72547
72548
72549
72550
72551
72552
72553
72554
72555
72556
72557
72558
72559
72560
72561
72562
72563
72564
72565
72566
72567
72568
72569
72570
72571
72572
72573
72574
72575
72576
72577
72578
72579
72580
72581
72582
72583
72584
72585
72586
72587
72588
72589
72590
72591
72592
72593
72594
72595
72596
72597
72598
72599
72600
72601
72602
72603
72604
72605
72606
72607
72608
72609
72610
72611
72612
72613
72614
72615
72616
72617
72618
72619
72620
72621
72622
72623
72624
72625
72626
72627
72628
72629
72630
72631
72632
72633
72634
72635
72636
72637
72638
72639
72640
72641
72642
72643
72644
72645
72646
72647
72648
72649
72650
72651
72652
72653
72654
72655
72656
72657
72658
72659
72660
72661
72662
72663
72664
72665
72666
72667
72668
72669
72670
72671
72672
72673
72674
72675
72676
72677
72678
72679
72680
72681
72682
72683
72684
72685
72686
72687
72688
72689
72690
72691
72692
72693
72694
72695
72696
72697
72698
72699
72700
72701
72702
72703
72704
72705
72706
72707
72708
72709
72710
72711
72712
72713
72714
72715
72716
72717
72718
72719
72720
72721
72722
72723
72724
72725
72726
72727
72728
72729
72730
72731
72732
72733
72734
72735
72736
72737
72738
72739
72740
72741
72742
72743
72744
72745
72746
72747
72748
72749
72750
72751
72752
72753
72754
72755
72756
72757
72758
72759
72760
72761
72762
72763
72764
72765
72766
72767
72768
72769
72770
72771
72772
72773
72774
72775
72776
72777
72778
72779
72780
72781
72782
72783
72784
72785
72786
72787
72788
72789
72790
72791
72792
72793
72794
72795
72796
72797
72798
72799
72800
72801
72802
72803
72804
72805
72806
72807
72808
72809
72810
72811
72812
72813
72814
72815
72816
72817
72818
72819
72820
72821
72822
72823
72824
72825
72826
72827
72828
72829
72830
72831
72832
72833
72834
72835
72836
72837
72838
72839
72840
72841
72842
72843
72844
72845
72846
72847
72848
72849
72850
72851
72852
72853
72854
72855
72856
72857
72858
72859
72860
72861
72862
72863
72864
72865
72866
72867
72868
72869
72870
72871
72872
72873
72874
72875
72876
72877
72878
72879
72880
72881
72882
72883
72884
72885
72886
72887
72888
72889
72890
72891
72892
72893
72894
72895
72896
72897
72898
72899
72900
72901
72902
72903
72904
72905
72906
72907
72908
72909
72910
72911
72912
72913
72914
72915
72916
72917
72918
72919
72920
72921
72922
72923
72924
72925
72926
72927
72928
72929
72930
72931
72932
72933
72934
72935
72936
72937
72938
72939
72940
72941
72942
72943
72944
72945
72946
72947
72948
72949
72950
72951
72952
72953
72954
72955
72956
72957
72958
72959
72960
72961
72962
72963
72964
72965
72966
72967
72968
72969
72970
72971
72972
72973
72974
72975
72976
72977
72978
72979
72980
72981
72982
72983
72984
72985
72986
72987
72988
72989
72990
72991
72992
72993
72994
72995
72996
72997
72998
72999
73000
73001
73002
73003
73004
73005
73006
73007
73008
73009
73010
73011
73012
73013
73014
73015
73016
73017
73018
73019
73020
73021
73022
73023
73024
73025
73026
73027
73028
73029
73030
73031
73032
73033
73034
73035
73036
73037
73038
73039
73040
73041
73042
73043
73044
73045
73046
73047
73048
73049
73050
73051
73052
73053
73054
73055
73056
73057
73058
73059
73060
73061
73062
73063
73064
73065
73066
73067
73068
73069
73070
73071
73072
73073
73074
73075
73076
73077
73078
73079
73080
73081
73082
73083
73084
73085
73086
73087
73088
73089
73090
73091
73092
73093
73094
73095
73096
73097
73098
73099
73100
73101
73102
73103
73104
73105
73106
73107
73108
73109
73110
73111
73112
73113
73114
73115
73116
73117
73118
73119
73120
73121
73122
73123
73124
73125
73126
73127
73128
73129
73130
73131
73132
73133
73134
73135
73136
73137
73138
73139
73140
73141
73142
73143
73144
73145
73146
73147
73148
73149
73150
73151
73152
73153
73154
73155
73156
73157
73158
73159
73160
73161
73162
73163
73164
73165
73166
73167
73168
73169
73170
73171
73172
73173
73174
73175
73176
73177
73178
73179
73180
73181
73182
73183
73184
73185
73186
73187
73188
73189
73190
73191
73192
73193
73194
73195
73196
73197
73198
73199
73200
73201
73202
73203
73204
73205
73206
73207
73208
73209
73210
73211
73212
73213
73214
73215
73216
73217
73218
73219
73220
73221
73222
73223
73224
73225
73226
73227
73228
73229
73230
73231
73232
73233
73234
73235
73236
73237
73238
73239
73240
73241
73242
73243
73244
73245
73246
73247
73248
73249
73250
73251
73252
73253
73254
73255
73256
73257
73258
73259
73260
73261
73262
73263
73264
73265
73266
73267
73268
73269
73270
73271
73272
73273
73274
73275
73276
73277
73278
73279
73280
73281
73282
73283
73284
73285
73286
73287
73288
73289
73290
73291
73292
73293
73294
73295
73296
73297
73298
73299
73300
73301
73302
73303
73304
73305
73306
73307
73308
73309
73310
73311
73312
73313
73314
73315
73316
73317
73318
73319
73320
73321
73322
73323
73324
73325
73326
73327
73328
73329
73330
73331
73332
73333
73334
73335
73336
73337
73338
73339
73340
73341
73342
73343
73344
73345
73346
73347
73348
73349
73350
73351
73352
73353
73354
73355
73356
73357
73358
73359
73360
73361
73362
73363
73364
73365
73366
73367
73368
73369
73370
73371
73372
73373
73374
73375
73376
73377
73378
73379
73380
73381
73382
73383
73384
73385
73386
73387
73388
73389
73390
73391
73392
73393
73394
73395
73396
73397
73398
73399
73400
73401
73402
73403
73404
73405
73406
73407
73408
73409
73410
73411
73412
73413
73414
73415
73416
73417
73418
73419
73420
73421
73422
73423
73424
73425
73426
73427
73428
73429
73430
73431
73432
73433
73434
73435
73436
73437
73438
73439
73440
73441
73442
73443
73444
73445
73446
73447
73448
73449
73450
73451
73452
73453
73454
73455
73456
73457
73458
73459
73460
73461
73462
73463
73464
73465
73466
73467
73468
73469
73470
73471
73472
73473
73474
73475
73476
73477
73478
73479
73480
73481
73482
73483
73484
73485
73486
73487
73488
73489
73490
73491
73492
73493
73494
73495
73496
73497
73498
73499
73500
73501
73502
73503
73504
73505
73506
73507
73508
73509
73510
73511
73512
73513
73514
73515
73516
73517
73518
73519
73520
73521
73522
73523
73524
73525
73526
73527
73528
73529
73530
73531
73532
73533
73534
73535
73536
73537
73538
73539
73540
73541
73542
73543
73544
73545
73546
73547
73548
73549
73550
73551
73552
73553
73554
73555
73556
73557
73558
73559
73560
73561
73562
73563
73564
73565
73566
73567
73568
73569
73570
73571
73572
73573
73574
73575
73576
73577
73578
73579
73580
73581
73582
73583
73584
73585
73586
73587
73588
73589
73590
73591
73592
73593
73594
73595
73596
73597
73598
73599
73600
73601
73602
73603
73604
73605
73606
73607
73608
73609
73610
73611
73612
73613
73614
73615
73616
73617
73618
73619
73620
73621
73622
73623
73624
73625
73626
73627
73628
73629
73630
73631
73632
73633
73634
73635
73636
73637
73638
73639
73640
73641
73642
73643
73644
73645
73646
73647
73648
73649
73650
73651
73652
73653
73654
73655
73656
73657
73658
73659
73660
73661
73662
73663
73664
73665
73666
73667
73668
73669
73670
73671
73672
73673
73674
73675
73676
73677
73678
73679
73680
73681
73682
73683
73684
73685
73686
73687
73688
73689
73690
73691
73692
73693
73694
73695
73696
73697
73698
73699
73700
73701
73702
73703
73704
73705
73706
73707
73708
73709
73710
73711
73712
73713
73714
73715
73716
73717
73718
73719
73720
73721
73722
73723
73724
73725
73726
73727
73728
73729
73730
73731
73732
73733
73734
73735
73736
73737
73738
73739
73740
73741
73742
73743
73744
73745
73746
73747
73748
73749
73750
73751
73752
73753
73754
73755
73756
73757
73758
73759
73760
73761
73762
73763
73764
73765
73766
73767
73768
73769
73770
73771
73772
73773
73774
73775
73776
73777
73778
73779
73780
73781
73782
73783
73784
73785
73786
73787
73788
73789
73790
73791
73792
73793
73794
73795
73796
73797
73798
73799
73800
73801
73802
73803
73804
73805
73806
73807
73808
73809
73810
73811
73812
73813
73814
73815
73816
73817
73818
73819
73820
73821
73822
73823
73824
73825
73826
73827
73828
73829
73830
73831
73832
73833
73834
73835
73836
73837
73838
73839
73840
73841
73842
73843
73844
73845
73846
73847
73848
73849
73850
73851
73852
73853
73854
73855
73856
73857
73858
73859
73860
73861
73862
73863
73864
73865
73866
73867
73868
73869
73870
73871
73872
73873
73874
73875
73876
73877
73878
73879
73880
73881
73882
73883
73884
73885
73886
73887
73888
73889
73890
73891
73892
73893
73894
73895
73896
73897
73898
73899
73900
73901
73902
73903
73904
73905
73906
73907
73908
73909
73910
73911
73912
73913
73914
73915
73916
73917
73918
73919
73920
73921
73922
73923
73924
73925
73926
73927
73928
73929
73930
73931
73932
73933
73934
73935
73936
73937
73938
73939
73940
73941
73942
73943
73944
73945
73946
73947
73948
73949
73950
73951
73952
73953
73954
73955
73956
73957
73958
73959
73960
73961
73962
73963
73964
73965
73966
73967
73968
73969
73970
73971
73972
73973
73974
73975
73976
73977
73978
73979
73980
73981
73982
73983
73984
73985
73986
73987
73988
73989
73990
73991
73992
73993
73994
73995
73996
73997
73998
73999
74000
74001
74002
74003
74004
74005
74006
74007
74008
74009
74010
74011
74012
74013
74014
74015
74016
74017
74018
74019
74020
74021
74022
74023
74024
74025
74026
74027
74028
74029
74030
74031
74032
74033
74034
74035
74036
74037
74038
74039
74040
74041
74042
74043
74044
74045
74046
74047
74048
74049
74050
74051
74052
74053
74054
74055
74056
74057
74058
74059
74060
74061
74062
74063
74064
74065
74066
74067
74068
74069
74070
74071
74072
74073
74074
74075
74076
74077
74078
74079
74080
74081
74082
74083
74084
74085
74086
74087
74088
74089
74090
74091
74092
74093
74094
74095
74096
74097
74098
74099
74100
74101
74102
74103
74104
74105
74106
74107
74108
74109
74110
74111
74112
74113
74114
74115
74116
74117
74118
74119
74120
74121
74122
74123
74124
74125
74126
74127
74128
74129
74130
74131
74132
74133
74134
74135
74136
74137
74138
74139
74140
74141
74142
74143
74144
74145
74146
74147
74148
74149
74150
74151
74152
74153
74154
74155
74156
74157
74158
74159
74160
74161
74162
74163
74164
74165
74166
74167
74168
74169
74170
74171
74172
74173
74174
74175
74176
74177
74178
74179
74180
74181
74182
74183
74184
74185
74186
74187
74188
74189
74190
74191
74192
74193
74194
74195
74196
74197
74198
74199
74200
74201
74202
74203
74204
74205
74206
74207
74208
74209
74210
74211
74212
74213
74214
74215
74216
74217
74218
74219
74220
74221
74222
74223
74224
74225
74226
74227
74228
74229
74230
74231
74232
74233
74234
74235
74236
74237
74238
74239
74240
74241
74242
74243
74244
74245
74246
74247
74248
74249
74250
74251
74252
74253
74254
74255
74256
74257
74258
74259
74260
74261
74262
74263
74264
74265
74266
74267
74268
74269
74270
74271
74272
74273
74274
74275
74276
74277
74278
74279
74280
74281
74282
74283
74284
74285
74286
74287
74288
74289
74290
74291
74292
74293
74294
74295
74296
74297
74298
74299
74300
74301
74302
74303
74304
74305
74306
74307
74308
74309
74310
74311
74312
74313
74314
74315
74316
74317
74318
74319
74320
74321
74322
74323
74324
74325
74326
74327
74328
74329
74330
74331
74332
74333
74334
74335
74336
74337
74338
74339
74340
74341
74342
74343
74344
74345
74346
74347
74348
74349
74350
74351
74352
74353
74354
74355
74356
74357
74358
74359
74360
74361
74362
74363
74364
74365
74366
74367
74368
74369
74370
74371
74372
74373
74374
74375
74376
74377
74378
74379
74380
74381
74382
74383
74384
74385
74386
74387
74388
74389
74390
74391
74392
74393
74394
74395
74396
74397
74398
74399
74400
74401
74402
74403
74404
74405
74406
74407
74408
74409
74410
74411
74412
74413
74414
74415
74416
74417
74418
74419
74420
74421
74422
74423
74424
74425
74426
74427
74428
74429
74430
74431
74432
74433
74434
74435
74436
74437
74438
74439
74440
74441
74442
74443
74444
74445
74446
74447
74448
74449
74450
74451
74452
74453
74454
74455
74456
74457
74458
74459
74460
74461
74462
74463
74464
74465
74466
74467
74468
74469
74470
74471
74472
74473
74474
74475
74476
74477
74478
74479
74480
74481
74482
74483
74484
74485
74486
74487
74488
74489
74490
74491
74492
74493
74494
74495
74496
74497
74498
74499
74500
74501
74502
74503
74504
74505
74506
74507
74508
74509
74510
74511
74512
74513
74514
74515
74516
74517
74518
74519
74520
74521
74522
74523
74524
74525
74526
74527
74528
74529
74530
74531
74532
74533
74534
74535
74536
74537
74538
74539
74540
74541
74542
74543
74544
74545
74546
74547
74548
74549
74550
74551
74552
74553
74554
74555
74556
74557
74558
74559
74560
74561
74562
74563
74564
74565
74566
74567
74568
74569
74570
74571
74572
74573
74574
74575
74576
74577
74578
74579
74580
74581
74582
74583
74584
74585
74586
74587
74588
74589
74590
74591
74592
74593
74594
74595
74596
74597
74598
74599
74600
74601
74602
74603
74604
74605
74606
74607
74608
74609
74610
74611
74612
74613
74614
74615
74616
74617
74618
74619
74620
74621
74622
74623
74624
74625
74626
74627
74628
74629
74630
74631
74632
74633
74634
74635
74636
74637
74638
74639
74640
74641
74642
74643
74644
74645
74646
74647
74648
74649
74650
74651
74652
74653
74654
74655
74656
74657
74658
74659
74660
74661
74662
74663
74664
74665
74666
74667
74668
74669
74670
74671
74672
74673
74674
74675
74676
74677
74678
74679
74680
74681
74682
74683
74684
74685
74686
74687
74688
74689
74690
74691
74692
74693
74694
74695
74696
74697
74698
74699
74700
74701
74702
74703
74704
74705
74706
74707
74708
74709
74710
74711
74712
74713
74714
74715
74716
74717
74718
74719
74720
74721
74722
74723
74724
74725
74726
74727
74728
74729
74730
74731
74732
74733
74734
74735
74736
74737
74738
74739
74740
74741
74742
74743
74744
74745
74746
74747
74748
74749
74750
74751
74752
74753
74754
74755
74756
74757
74758
74759
74760
74761
74762
74763
74764
74765
74766
74767
74768
74769
74770
74771
74772
74773
74774
74775
74776
74777
74778
74779
74780
74781
74782
74783
74784
74785
74786
74787
74788
74789
74790
74791
74792
74793
74794
74795
74796
74797
74798
74799
74800
74801
74802
74803
74804
74805
74806
74807
74808
74809
74810
74811
74812
74813
74814
74815
74816
74817
74818
74819
74820
74821
74822
74823
74824
74825
74826
74827
74828
74829
74830
74831
74832
74833
74834
74835
74836
74837
74838
74839
74840
74841
74842
74843
74844
74845
74846
74847
74848
74849
74850
74851
74852
74853
74854
74855
74856
74857
74858
74859
74860
74861
74862
74863
74864
74865
74866
74867
74868
74869
74870
74871
74872
74873
74874
74875
74876
74877
74878
74879
74880
74881
74882
74883
74884
74885
74886
74887
74888
74889
74890
74891
74892
74893
74894
74895
74896
74897
74898
74899
74900
74901
74902
74903
74904
74905
74906
74907
74908
74909
74910
74911
74912
74913
74914
74915
74916
74917
74918
74919
74920
74921
74922
74923
74924
74925
74926
74927
74928
74929
74930
74931
74932
74933
74934
74935
74936
74937
74938
74939
74940
74941
74942
74943
74944
74945
74946
74947
74948
74949
74950
74951
74952
74953
74954
74955
74956
74957
74958
74959
74960
74961
74962
74963
74964
74965
74966
74967
74968
74969
74970
74971
74972
74973
74974
74975
74976
74977
74978
74979
74980
74981
74982
74983
74984
74985
74986
74987
74988
74989
74990
74991
74992
74993
74994
74995
74996
74997
74998
74999
75000
75001
75002
75003
75004
75005
75006
75007
75008
75009
75010
75011
75012
75013
75014
75015
75016
75017
75018
75019
75020
75021
75022
75023
75024
75025
75026
75027
75028
75029
75030
75031
75032
75033
75034
75035
75036
75037
75038
75039
75040
75041
75042
75043
75044
75045
75046
75047
75048
75049
75050
75051
75052
75053
75054
75055
75056
75057
75058
75059
75060
75061
75062
75063
75064
75065
75066
75067
75068
75069
75070
75071
75072
75073
75074
75075
75076
75077
75078
75079
75080
75081
75082
75083
75084
75085
75086
75087
75088
75089
75090
75091
75092
75093
75094
75095
75096
75097
75098
75099
75100
75101
75102
75103
75104
75105
75106
75107
75108
75109
75110
75111
75112
75113
75114
75115
75116
75117
75118
75119
75120
75121
75122
75123
75124
75125
75126
75127
75128
75129
75130
75131
75132
75133
75134
75135
75136
75137
75138
75139
75140
75141
75142
75143
75144
75145
75146
75147
75148
75149
75150
75151
75152
75153
75154
75155
75156
75157
75158
75159
75160
75161
75162
75163
75164
75165
75166
75167
75168
75169
75170
75171
75172
75173
75174
75175
75176
75177
75178
75179
75180
75181
75182
75183
75184
75185
75186
75187
75188
75189
75190
75191
75192
75193
75194
75195
75196
75197
75198
75199
75200
75201
75202
75203
75204
75205
75206
75207
75208
75209
75210
75211
75212
75213
75214
75215
75216
75217
75218
75219
75220
75221
75222
75223
75224
75225
75226
75227
75228
75229
75230
75231
75232
75233
75234
75235
75236
75237
75238
75239
75240
75241
75242
75243
75244
75245
75246
75247
75248
75249
75250
75251
75252
75253
75254
75255
75256
75257
75258
75259
75260
75261
75262
75263
75264
75265
75266
75267
75268
75269
75270
75271
75272
75273
75274
75275
75276
75277
75278
75279
75280
75281
75282
75283
75284
75285
75286
75287
75288
75289
75290
75291
75292
75293
75294
75295
75296
75297
75298
75299
75300
75301
75302
75303
75304
75305
75306
75307
75308
75309
75310
75311
75312
75313
75314
75315
75316
75317
75318
75319
75320
75321
75322
75323
75324
75325
75326
75327
75328
75329
75330
75331
75332
75333
75334
75335
75336
75337
75338
75339
75340
75341
75342
75343
75344
75345
75346
75347
75348
75349
75350
75351
75352
75353
75354
75355
75356
75357
75358
75359
75360
75361
75362
75363
75364
75365
75366
75367
75368
75369
75370
75371
75372
75373
75374
75375
75376
75377
75378
75379
75380
75381
75382
75383
75384
75385
75386
75387
75388
75389
75390
75391
75392
75393
75394
75395
75396
75397
75398
75399
75400
75401
75402
75403
75404
75405
75406
75407
75408
75409
75410
75411
75412
75413
75414
75415
75416
75417
75418
75419
75420
75421
75422
75423
75424
75425
75426
75427
75428
75429
75430
75431
75432
75433
75434
75435
75436
75437
75438
75439
75440
75441
75442
75443
75444
75445
75446
75447
75448
75449
75450
75451
75452
75453
75454
75455
75456
75457
75458
75459
75460
75461
75462
75463
75464
75465
75466
75467
75468
75469
75470
75471
75472
75473
75474
75475
75476
75477
75478
75479
75480
75481
75482
75483
75484
75485
75486
75487
75488
75489
75490
75491
75492
75493
75494
75495
75496
75497
75498
75499
75500
75501
75502
75503
75504
75505
75506
75507
75508
75509
75510
75511
75512
75513
75514
75515
75516
75517
75518
75519
75520
75521
75522
75523
75524
75525
75526
75527
75528
75529
75530
75531
75532
75533
75534
75535
75536
75537
75538
75539
75540
75541
75542
75543
75544
75545
75546
75547
75548
75549
75550
75551
75552
75553
75554
75555
75556
75557
75558
75559
75560
75561
75562
75563
75564
75565
75566
75567
75568
75569
75570
75571
75572
75573
75574
75575
75576
75577
75578
75579
75580
75581
75582
75583
75584
75585
75586
75587
75588
75589
75590
75591
75592
75593
75594
75595
75596
75597
75598
75599
75600
75601
75602
75603
75604
75605
75606
75607
75608
75609
75610
75611
75612
75613
75614
75615
75616
75617
75618
75619
75620
75621
75622
75623
75624
75625
75626
75627
75628
75629
75630
75631
75632
75633
75634
75635
75636
75637
75638
75639
75640
75641
75642
75643
75644
75645
75646
75647
75648
75649
75650
75651
75652
75653
75654
75655
75656
75657
75658
75659
75660
75661
75662
75663
75664
75665
75666
75667
75668
75669
75670
75671
75672
75673
75674
75675
75676
75677
75678
75679
75680
75681
75682
75683
75684
75685
75686
75687
75688
75689
75690
75691
75692
75693
75694
75695
75696
75697
75698
75699
75700
75701
75702
75703
75704
75705
75706
75707
75708
75709
75710
75711
75712
75713
75714
75715
75716
75717
75718
75719
75720
75721
75722
75723
75724
75725
75726
75727
75728
75729
75730
75731
75732
75733
75734
75735
75736
75737
75738
75739
75740
75741
75742
75743
75744
75745
75746
75747
75748
75749
75750
75751
75752
75753
75754
75755
75756
75757
75758
75759
75760
75761
75762
75763
75764
75765
75766
75767
75768
75769
75770
75771
75772
75773
75774
75775
75776
75777
75778
75779
75780
75781
75782
75783
75784
75785
75786
75787
75788
75789
75790
75791
75792
75793
75794
75795
75796
75797
75798
75799
75800
75801
75802
75803
75804
75805
75806
75807
75808
75809
75810
75811
75812
75813
75814
75815
75816
75817
75818
75819
75820
75821
75822
75823
75824
75825
75826
75827
75828
75829
75830
75831
75832
75833
75834
75835
75836
75837
75838
75839
75840
75841
75842
75843
75844
75845
75846
75847
75848
75849
75850
75851
75852
75853
75854
75855
75856
75857
75858
75859
75860
75861
75862
75863
75864
75865
75866
75867
75868
75869
75870
75871
75872
75873
75874
75875
75876
75877
75878
75879
75880
75881
75882
75883
75884
75885
75886
75887
75888
75889
75890
75891
75892
75893
75894
75895
75896
75897
75898
75899
75900
75901
75902
75903
75904
75905
75906
75907
75908
75909
75910
75911
75912
75913
75914
75915
75916
75917
75918
75919
75920
75921
75922
75923
75924
75925
75926
75927
75928
75929
75930
75931
75932
75933
75934
75935
75936
75937
75938
75939
75940
75941
75942
75943
75944
75945
75946
75947
75948
75949
75950
75951
75952
75953
75954
75955
75956
75957
75958
75959
75960
75961
75962
75963
75964
75965
75966
75967
75968
75969
75970
75971
75972
75973
75974
75975
75976
75977
75978
75979
75980
75981
75982
75983
75984
75985
75986
75987
75988
75989
75990
75991
75992
75993
75994
75995
75996
75997
75998
75999
76000
76001
76002
76003
76004
76005
76006
76007
76008
76009
76010
76011
76012
76013
76014
76015
76016
76017
76018
76019
76020
76021
76022
76023
76024
76025
76026
76027
76028
76029
76030
76031
76032
76033
76034
76035
76036
76037
76038
76039
76040
76041
76042
76043
76044
76045
76046
76047
76048
76049
76050
76051
76052
76053
76054
76055
76056
76057
76058
76059
76060
76061
76062
76063
76064
76065
76066
76067
76068
76069
76070
76071
76072
76073
76074
76075
76076
76077
76078
76079
76080
76081
76082
76083
76084
76085
76086
76087
76088
76089
76090
76091
76092
76093
76094
76095
76096
76097
76098
76099
76100
76101
76102
76103
76104
76105
76106
76107
76108
76109
76110
76111
76112
76113
76114
76115
76116
76117
76118
76119
76120
76121
76122
76123
76124
76125
76126
76127
76128
76129
76130
76131
76132
76133
76134
76135
76136
76137
76138
76139
76140
76141
76142
76143
76144
76145
76146
76147
76148
76149
76150
76151
76152
76153
76154
76155
76156
76157
76158
76159
76160
76161
76162
76163
76164
76165
76166
76167
76168
76169
76170
76171
76172
76173
76174
76175
76176
76177
76178
76179
76180
76181
76182
76183
76184
76185
76186
76187
76188
76189
76190
76191
76192
76193
76194
76195
76196
76197
76198
76199
76200
76201
76202
76203
76204
76205
76206
76207
76208
76209
76210
76211
76212
76213
76214
76215
76216
76217
76218
76219
76220
76221
76222
76223
76224
76225
76226
76227
76228
76229
76230
76231
76232
76233
76234
76235
76236
76237
76238
76239
76240
76241
76242
76243
76244
76245
76246
76247
76248
76249
76250
76251
76252
76253
76254
76255
76256
76257
76258
76259
76260
76261
76262
76263
76264
76265
76266
76267
76268
76269
76270
76271
76272
76273
76274
76275
76276
76277
76278
76279
76280
76281
76282
76283
76284
76285
76286
76287
76288
76289
76290
76291
76292
76293
76294
76295
76296
76297
76298
76299
76300
76301
76302
76303
76304
76305
76306
76307
76308
76309
76310
76311
76312
76313
76314
76315
76316
76317
76318
76319
76320
76321
76322
76323
76324
76325
76326
76327
76328
76329
76330
76331
76332
76333
76334
76335
76336
76337
76338
76339
76340
76341
76342
76343
76344
76345
76346
76347
76348
76349
76350
76351
76352
76353
76354
76355
76356
76357
76358
76359
76360
76361
76362
76363
76364
76365
76366
76367
76368
76369
76370
76371
76372
76373
76374
76375
76376
76377
76378
76379
76380
76381
76382
76383
76384
76385
76386
76387
76388
76389
76390
76391
76392
76393
76394
76395
76396
76397
76398
76399
76400
76401
76402
76403
76404
76405
76406
76407
76408
76409
76410
76411
76412
76413
76414
76415
76416
76417
76418
76419
76420
76421
76422
76423
76424
76425
76426
76427
76428
76429
76430
76431
76432
76433
76434
76435
76436
76437
76438
76439
76440
76441
76442
76443
76444
76445
76446
76447
76448
76449
76450
76451
76452
76453
76454
76455
76456
76457
76458
76459
76460
76461
76462
76463
76464
76465
76466
76467
76468
76469
76470
76471
76472
76473
76474
76475
76476
76477
76478
76479
76480
76481
76482
76483
76484
76485
76486
76487
76488
76489
76490
76491
76492
76493
76494
76495
76496
76497
76498
76499
76500
76501
76502
76503
76504
76505
76506
76507
76508
76509
76510
76511
76512
76513
76514
76515
76516
76517
76518
76519
76520
76521
76522
76523
76524
76525
76526
76527
76528
76529
76530
76531
76532
76533
76534
76535
76536
76537
76538
76539
76540
76541
76542
76543
76544
76545
76546
76547
76548
76549
76550
76551
76552
76553
76554
76555
76556
76557
76558
76559
76560
76561
76562
76563
76564
76565
76566
76567
76568
76569
76570
76571
76572
76573
76574
76575
76576
76577
76578
76579
76580
76581
76582
76583
76584
76585
76586
76587
76588
76589
76590
76591
76592
76593
76594
76595
76596
76597
76598
76599
76600
76601
76602
76603
76604
76605
76606
76607
76608
76609
76610
76611
76612
76613
76614
76615
76616
76617
76618
76619
76620
76621
76622
76623
76624
76625
76626
76627
76628
76629
76630
76631
76632
76633
76634
76635
76636
76637
76638
76639
76640
76641
76642
76643
76644
76645
76646
76647
76648
76649
76650
76651
76652
76653
76654
76655
76656
76657
76658
76659
76660
76661
76662
76663
76664
76665
76666
76667
76668
76669
76670
76671
76672
76673
76674
76675
76676
76677
76678
76679
76680
76681
76682
76683
76684
76685
76686
76687
76688
76689
76690
76691
76692
76693
76694
76695
76696
76697
76698
76699
76700
76701
76702
76703
76704
76705
76706
76707
76708
76709
76710
76711
76712
76713
76714
76715
76716
76717
76718
76719
76720
76721
76722
76723
76724
76725
76726
76727
76728
76729
76730
76731
76732
76733
76734
76735
76736
76737
76738
76739
76740
76741
76742
76743
76744
76745
76746
76747
76748
76749
76750
76751
76752
76753
76754
76755
76756
76757
76758
76759
76760
76761
76762
76763
76764
76765
76766
76767
76768
76769
76770
76771
76772
76773
76774
76775
76776
76777
76778
76779
76780
76781
76782
76783
76784
76785
76786
76787
76788
76789
76790
76791
76792
76793
76794
76795
76796
76797
76798
76799
76800
76801
76802
76803
76804
76805
76806
76807
76808
76809
76810
76811
76812
76813
76814
76815
76816
76817
76818
76819
76820
76821
76822
76823
76824
76825
76826
76827
76828
76829
76830
76831
76832
76833
76834
76835
76836
76837
76838
76839
76840
76841
76842
76843
76844
76845
76846
76847
76848
76849
76850
76851
76852
76853
76854
76855
76856
76857
76858
76859
76860
76861
76862
76863
76864
76865
76866
76867
76868
76869
76870
76871
76872
76873
76874
76875
76876
76877
76878
76879
76880
76881
76882
76883
76884
76885
76886
76887
76888
76889
76890
76891
76892
76893
76894
76895
76896
76897
76898
76899
76900
76901
76902
76903
76904
76905
76906
76907
76908
76909
76910
76911
76912
76913
76914
76915
76916
76917
76918
76919
76920
76921
76922
76923
76924
76925
76926
76927
76928
76929
76930
76931
76932
76933
76934
76935
76936
76937
76938
76939
76940
76941
76942
76943
76944
76945
76946
76947
76948
76949
76950
76951
76952
76953
76954
76955
76956
76957
76958
76959
76960
76961
76962
76963
76964
76965
76966
76967
76968
76969
76970
76971
76972
76973
76974
76975
76976
76977
76978
76979
76980
76981
76982
76983
76984
76985
76986
76987
76988
76989
76990
76991
76992
76993
76994
76995
76996
76997
76998
76999
77000
77001
77002
77003
77004
77005
77006
77007
77008
77009
77010
77011
77012
77013
77014
77015
77016
77017
77018
77019
77020
77021
77022
77023
77024
77025
77026
77027
77028
77029
77030
77031
77032
77033
77034
77035
77036
77037
77038
77039
77040
77041
77042
77043
77044
77045
77046
77047
77048
77049
77050
77051
77052
77053
77054
77055
77056
77057
77058
77059
77060
77061
77062
77063
77064
77065
77066
77067
77068
77069
77070
77071
77072
77073
77074
77075
77076
77077
77078
77079
77080
77081
77082
77083
77084
77085
77086
77087
77088
77089
77090
77091
77092
77093
77094
77095
77096
77097
77098
77099
77100
77101
77102
77103
77104
77105
77106
77107
77108
77109
77110
77111
77112
77113
77114
77115
77116
77117
77118
77119
77120
77121
77122
77123
77124
77125
77126
77127
77128
77129
77130
77131
77132
77133
77134
77135
77136
77137
77138
77139
77140
77141
77142
77143
77144
77145
77146
77147
77148
77149
77150
77151
77152
77153
77154
77155
77156
77157
77158
77159
77160
77161
77162
77163
77164
77165
77166
77167
77168
77169
77170
77171
77172
77173
77174
77175
77176
77177
77178
77179
77180
77181
77182
77183
77184
77185
77186
77187
77188
77189
77190
77191
77192
77193
77194
77195
77196
77197
77198
77199
77200
77201
77202
77203
77204
77205
77206
77207
77208
77209
77210
77211
77212
77213
77214
77215
77216
77217
77218
77219
77220
77221
77222
77223
77224
77225
77226
77227
77228
77229
77230
77231
77232
77233
77234
77235
77236
77237
77238
77239
77240
77241
77242
77243
77244
77245
77246
77247
77248
77249
77250
77251
77252
77253
77254
77255
77256
77257
77258
77259
77260
77261
77262
77263
77264
77265
77266
77267
77268
77269
77270
77271
77272
77273
77274
77275
77276
77277
77278
77279
77280
77281
77282
77283
77284
77285
77286
77287
77288
77289
77290
77291
77292
77293
77294
77295
77296
77297
77298
77299
77300
77301
77302
77303
77304
77305
77306
77307
77308
77309
77310
77311
77312
77313
77314
77315
77316
77317
77318
77319
77320
77321
77322
77323
77324
77325
77326
77327
77328
77329
77330
77331
77332
77333
77334
77335
77336
77337
77338
77339
77340
77341
77342
77343
77344
77345
77346
77347
77348
77349
77350
77351
77352
77353
77354
77355
77356
77357
77358
77359
77360
77361
77362
77363
77364
77365
77366
77367
77368
77369
77370
77371
77372
77373
77374
77375
77376
77377
77378
77379
77380
77381
77382
77383
77384
77385
77386
77387
77388
77389
77390
77391
77392
77393
77394
77395
77396
77397
77398
77399
77400
77401
77402
77403
77404
77405
77406
77407
77408
77409
77410
77411
77412
77413
77414
77415
77416
77417
77418
77419
77420
77421
77422
77423
77424
77425
77426
77427
77428
77429
77430
77431
77432
77433
77434
77435
77436
77437
77438
77439
77440
77441
77442
77443
77444
77445
77446
77447
77448
77449
77450
77451
77452
77453
77454
77455
77456
77457
77458
77459
77460
77461
77462
77463
77464
77465
77466
77467
77468
77469
77470
77471
77472
77473
77474
77475
77476
77477
77478
77479
77480
77481
77482
77483
77484
77485
77486
77487
77488
77489
77490
77491
77492
77493
77494
77495
77496
77497
77498
77499
77500
77501
77502
77503
77504
77505
77506
77507
77508
77509
77510
77511
77512
77513
77514
77515
77516
77517
77518
77519
77520
77521
77522
77523
77524
77525
77526
77527
77528
77529
77530
77531
77532
77533
77534
77535
77536
77537
77538
77539
77540
77541
77542
77543
77544
77545
77546
77547
77548
77549
77550
77551
77552
77553
77554
77555
77556
77557
77558
77559
77560
77561
77562
77563
77564
77565
77566
77567
77568
77569
77570
77571
77572
77573
77574
77575
77576
77577
77578
77579
77580
77581
77582
77583
77584
77585
77586
77587
77588
77589
77590
77591
77592
77593
77594
77595
77596
77597
77598
77599
77600
77601
77602
77603
77604
77605
77606
77607
77608
77609
77610
77611
77612
77613
77614
77615
77616
77617
77618
77619
77620
77621
77622
77623
77624
77625
77626
77627
77628
77629
77630
77631
77632
77633
77634
77635
77636
77637
77638
77639
77640
77641
77642
77643
77644
77645
77646
77647
77648
77649
77650
77651
77652
77653
77654
77655
77656
77657
77658
77659
77660
77661
77662
77663
77664
77665
77666
77667
77668
77669
77670
77671
77672
77673
77674
77675
77676
77677
77678
77679
77680
77681
77682
77683
77684
77685
77686
77687
77688
77689
77690
77691
77692
77693
77694
77695
77696
77697
77698
77699
77700
77701
77702
77703
77704
77705
77706
77707
77708
77709
77710
77711
77712
77713
77714
77715
77716
77717
77718
77719
77720
77721
77722
77723
77724
77725
77726
77727
77728
77729
77730
77731
77732
77733
77734
77735
77736
77737
77738
77739
77740
77741
77742
77743
77744
77745
77746
77747
77748
77749
77750
77751
77752
77753
77754
77755
77756
77757
77758
77759
77760
77761
77762
77763
77764
77765
77766
77767
77768
77769
77770
77771
77772
77773
77774
77775
77776
77777
77778
77779
77780
77781
77782
77783
77784
77785
77786
77787
77788
77789
77790
77791
77792
77793
77794
77795
77796
77797
77798
77799
77800
77801
77802
77803
77804
77805
77806
77807
77808
77809
77810
77811
77812
77813
77814
77815
77816
77817
77818
77819
77820
77821
77822
77823
77824
77825
77826
77827
77828
77829
77830
77831
77832
77833
77834
77835
77836
77837
77838
77839
77840
77841
77842
77843
77844
77845
77846
77847
77848
77849
77850
77851
77852
77853
77854
77855
77856
77857
77858
77859
77860
77861
77862
77863
77864
77865
77866
77867
77868
77869
77870
77871
77872
77873
77874
77875
77876
77877
77878
77879
77880
77881
77882
77883
77884
77885
77886
77887
77888
77889
77890
77891
77892
77893
77894
77895
77896
77897
77898
77899
77900
77901
77902
77903
77904
77905
77906
77907
77908
77909
77910
77911
77912
77913
77914
77915
77916
77917
77918
77919
77920
77921
77922
77923
77924
77925
77926
77927
77928
77929
77930
77931
77932
77933
77934
77935
77936
77937
77938
77939
77940
77941
77942
77943
77944
77945
77946
77947
77948
77949
77950
77951
77952
77953
77954
77955
77956
77957
77958
77959
77960
77961
77962
77963
77964
77965
77966
77967
77968
77969
77970
77971
77972
77973
77974
77975
77976
77977
77978
77979
77980
77981
77982
77983
77984
77985
77986
77987
77988
77989
77990
77991
77992
77993
77994
77995
77996
77997
77998
77999
78000
78001
78002
78003
78004
78005
78006
78007
78008
78009
78010
78011
78012
78013
78014
78015
78016
78017
78018
78019
78020
78021
78022
78023
78024
78025
78026
78027
78028
78029
78030
78031
78032
78033
78034
78035
78036
78037
78038
78039
78040
78041
78042
78043
78044
78045
78046
78047
78048
78049
78050
78051
78052
78053
78054
78055
78056
78057
78058
78059
78060
78061
78062
78063
78064
78065
78066
78067
78068
78069
78070
78071
78072
78073
78074
78075
78076
78077
78078
78079
78080
78081
78082
78083
78084
78085
78086
78087
78088
78089
78090
78091
78092
78093
78094
78095
78096
78097
78098
78099
78100
78101
78102
78103
78104
78105
78106
78107
78108
78109
78110
78111
78112
78113
78114
78115
78116
78117
78118
78119
78120
78121
78122
78123
78124
78125
78126
78127
78128
78129
78130
78131
78132
78133
78134
78135
78136
78137
78138
78139
78140
78141
78142
78143
78144
78145
78146
78147
78148
78149
78150
78151
78152
78153
78154
78155
78156
78157
78158
78159
78160
78161
78162
78163
78164
78165
78166
78167
78168
78169
78170
78171
78172
78173
78174
78175
78176
78177
78178
78179
78180
78181
78182
78183
78184
78185
78186
78187
78188
78189
78190
78191
78192
78193
78194
78195
78196
78197
78198
78199
78200
78201
78202
78203
78204
78205
78206
78207
78208
78209
78210
78211
78212
78213
78214
78215
78216
78217
78218
78219
78220
78221
78222
78223
78224
78225
78226
78227
78228
78229
78230
78231
78232
78233
78234
78235
78236
78237
78238
78239
78240
78241
78242
78243
78244
78245
78246
78247
78248
78249
78250
78251
78252
78253
78254
78255
78256
78257
78258
78259
78260
78261
78262
78263
78264
78265
78266
78267
78268
78269
78270
78271
78272
78273
78274
78275
78276
78277
78278
78279
78280
78281
78282
78283
78284
78285
78286
78287
78288
78289
78290
78291
78292
78293
78294
78295
78296
78297
78298
78299
78300
78301
78302
78303
78304
78305
78306
78307
78308
78309
78310
78311
78312
78313
78314
78315
78316
78317
78318
78319
78320
78321
78322
78323
78324
78325
78326
78327
78328
78329
78330
78331
78332
78333
78334
78335
78336
78337
78338
78339
78340
78341
78342
78343
78344
78345
78346
78347
78348
78349
78350
78351
78352
78353
78354
78355
78356
78357
78358
78359
78360
78361
78362
78363
78364
78365
78366
78367
78368
78369
78370
78371
78372
78373
78374
78375
78376
78377
78378
78379
78380
78381
78382
78383
78384
78385
78386
78387
78388
78389
78390
78391
78392
78393
78394
78395
78396
78397
78398
78399
78400
78401
78402
78403
78404
78405
78406
78407
78408
78409
78410
78411
78412
78413
78414
78415
78416
78417
78418
78419
78420
78421
78422
78423
78424
78425
78426
78427
78428
78429
78430
78431
78432
78433
78434
78435
78436
78437
78438
78439
78440
78441
78442
78443
78444
78445
78446
78447
78448
78449
78450
78451
78452
78453
78454
78455
78456
78457
78458
78459
78460
78461
78462
78463
78464
78465
78466
78467
78468
78469
78470
78471
78472
78473
78474
78475
78476
78477
78478
78479
78480
78481
78482
78483
78484
78485
78486
78487
78488
78489
78490
78491
78492
78493
78494
78495
78496
78497
78498
78499
78500
78501
78502
78503
78504
78505
78506
78507
78508
78509
78510
78511
78512
78513
78514
78515
78516
78517
78518
78519
78520
78521
78522
78523
78524
78525
78526
78527
78528
78529
78530
78531
78532
78533
78534
78535
78536
78537
78538
78539
78540
78541
78542
78543
78544
78545
78546
78547
78548
78549
78550
78551
78552
78553
78554
78555
78556
78557
78558
78559
78560
78561
78562
78563
78564
78565
78566
78567
78568
78569
78570
78571
78572
78573
78574
78575
78576
78577
78578
78579
78580
78581
78582
78583
78584
78585
78586
78587
78588
78589
78590
78591
78592
78593
78594
78595
78596
78597
78598
78599
78600
78601
78602
78603
78604
78605
78606
78607
78608
78609
78610
78611
78612
78613
78614
78615
78616
78617
78618
78619
78620
78621
78622
78623
78624
78625
78626
78627
78628
78629
78630
78631
78632
78633
78634
78635
78636
78637
78638
78639
78640
78641
78642
78643
78644
78645
78646
78647
78648
78649
78650
78651
78652
78653
78654
78655
78656
78657
78658
78659
78660
78661
78662
78663
78664
78665
78666
78667
78668
78669
78670
78671
78672
78673
78674
78675
78676
78677
78678
78679
78680
78681
78682
78683
78684
78685
78686
78687
78688
78689
78690
78691
78692
78693
78694
78695
78696
78697
78698
78699
78700
78701
78702
78703
78704
78705
78706
78707
78708
78709
78710
78711
78712
78713
78714
78715
78716
78717
78718
78719
78720
78721
78722
78723
78724
78725
78726
78727
78728
78729
78730
78731
78732
78733
78734
78735
78736
78737
78738
78739
78740
78741
78742
78743
78744
78745
78746
78747
78748
78749
78750
78751
78752
78753
78754
78755
78756
78757
78758
78759
78760
78761
78762
78763
78764
78765
78766
78767
78768
78769
78770
78771
78772
78773
78774
78775
78776
78777
78778
78779
78780
78781
78782
78783
78784
78785
78786
78787
78788
78789
78790
78791
78792
78793
78794
78795
78796
78797
78798
78799
78800
78801
78802
78803
78804
78805
78806
78807
78808
78809
78810
78811
78812
78813
78814
78815
78816
78817
78818
78819
78820
78821
78822
78823
78824
78825
78826
78827
78828
78829
78830
78831
78832
78833
78834
78835
78836
78837
78838
78839
78840
78841
78842
78843
78844
78845
78846
78847
78848
78849
78850
78851
78852
78853
78854
78855
78856
78857
78858
78859
78860
78861
78862
78863
78864
78865
78866
78867
78868
78869
78870
78871
78872
78873
78874
78875
78876
78877
78878
78879
78880
78881
78882
78883
78884
78885
78886
78887
78888
78889
78890
78891
78892
78893
78894
78895
78896
78897
78898
78899
78900
78901
78902
78903
78904
78905
78906
78907
78908
78909
78910
78911
78912
78913
78914
78915
78916
78917
78918
78919
78920
78921
78922
78923
78924
78925
78926
78927
78928
78929
78930
78931
78932
78933
78934
78935
78936
78937
78938
78939
78940
78941
78942
78943
78944
78945
78946
78947
78948
78949
78950
78951
78952
78953
78954
78955
78956
78957
78958
78959
78960
78961
78962
78963
78964
78965
78966
78967
78968
78969
78970
78971
78972
78973
78974
78975
78976
78977
78978
78979
78980
78981
78982
78983
78984
78985
78986
78987
78988
78989
78990
78991
78992
78993
78994
78995
78996
78997
78998
78999
79000
79001
79002
79003
79004
79005
79006
79007
79008
79009
79010
79011
79012
79013
79014
79015
79016
79017
79018
79019
79020
79021
79022
79023
79024
79025
79026
79027
79028
79029
79030
79031
79032
79033
79034
79035
79036
79037
79038
79039
79040
79041
79042
79043
79044
79045
79046
79047
79048
79049
79050
79051
79052
79053
79054
79055
79056
79057
79058
79059
79060
79061
79062
79063
79064
79065
79066
79067
79068
79069
79070
79071
79072
79073
79074
79075
79076
79077
79078
79079
79080
79081
79082
79083
79084
79085
79086
79087
79088
79089
79090
79091
79092
79093
79094
79095
79096
79097
79098
79099
79100
79101
79102
79103
79104
79105
79106
79107
79108
79109
79110
79111
79112
79113
79114
79115
79116
79117
79118
79119
79120
79121
79122
79123
79124
79125
79126
79127
79128
79129
79130
79131
79132
79133
79134
79135
79136
79137
79138
79139
79140
79141
79142
79143
79144
79145
79146
79147
79148
79149
79150
79151
79152
79153
79154
79155
79156
79157
79158
79159
79160
79161
79162
79163
79164
79165
79166
79167
79168
79169
79170
79171
79172
79173
79174
79175
79176
79177
79178
79179
79180
79181
79182
79183
79184
79185
79186
79187
79188
79189
79190
79191
79192
79193
79194
79195
79196
79197
79198
79199
79200
79201
79202
79203
79204
79205
79206
79207
79208
79209
79210
79211
79212
79213
79214
79215
79216
79217
79218
79219
79220
79221
79222
79223
79224
79225
79226
79227
79228
79229
79230
79231
79232
79233
79234
79235
79236
79237
79238
79239
79240
79241
79242
79243
79244
79245
79246
79247
79248
79249
79250
79251
79252
79253
79254
79255
79256
79257
79258
79259
79260
79261
79262
79263
79264
79265
79266
79267
79268
79269
79270
79271
79272
79273
79274
79275
79276
79277
79278
79279
79280
79281
79282
79283
79284
79285
79286
79287
79288
79289
79290
79291
79292
79293
79294
79295
79296
79297
79298
79299
79300
79301
79302
79303
79304
79305
79306
79307
79308
79309
79310
79311
79312
79313
79314
79315
79316
79317
79318
79319
79320
79321
79322
79323
79324
79325
79326
79327
79328
79329
79330
79331
79332
79333
79334
79335
79336
79337
79338
79339
79340
79341
79342
79343
79344
79345
79346
79347
79348
79349
79350
79351
79352
79353
79354
79355
79356
79357
79358
79359
79360
79361
79362
79363
79364
79365
79366
79367
79368
79369
79370
79371
79372
79373
79374
79375
79376
79377
79378
79379
79380
79381
79382
79383
79384
79385
79386
79387
79388
79389
79390
79391
79392
79393
79394
79395
79396
79397
79398
79399
79400
79401
79402
79403
79404
79405
79406
79407
79408
79409
79410
79411
79412
79413
79414
79415
79416
79417
79418
79419
79420
79421
79422
79423
79424
79425
79426
79427
79428
79429
79430
79431
79432
79433
79434
79435
79436
79437
79438
79439
79440
79441
79442
79443
79444
79445
79446
79447
79448
79449
79450
79451
79452
79453
79454
79455
79456
79457
79458
79459
79460
79461
79462
79463
79464
79465
79466
79467
79468
79469
79470
79471
79472
79473
79474
79475
79476
79477
79478
79479
79480
79481
79482
79483
79484
79485
79486
79487
79488
79489
79490
79491
79492
79493
79494
79495
79496
79497
79498
79499
79500
79501
79502
79503
79504
79505
79506
79507
79508
79509
79510
79511
79512
79513
79514
79515
79516
79517
79518
79519
79520
79521
79522
79523
79524
79525
79526
79527
79528
79529
79530
79531
79532
79533
79534
79535
79536
79537
79538
79539
79540
79541
79542
79543
79544
79545
79546
79547
79548
79549
79550
79551
79552
79553
79554
79555
79556
79557
79558
79559
79560
79561
79562
79563
79564
79565
79566
79567
79568
79569
79570
79571
79572
79573
79574
79575
79576
79577
79578
79579
79580
79581
79582
79583
79584
79585
79586
79587
79588
79589
79590
79591
79592
79593
79594
79595
79596
79597
79598
79599
79600
79601
79602
79603
79604
79605
79606
79607
79608
79609
79610
79611
79612
79613
79614
79615
79616
79617
79618
79619
79620
79621
79622
79623
79624
79625
79626
79627
79628
79629
79630
79631
79632
79633
79634
79635
79636
79637
79638
79639
79640
79641
79642
79643
79644
79645
79646
79647
79648
79649
79650
79651
79652
79653
79654
79655
79656
79657
79658
79659
79660
79661
79662
79663
79664
79665
79666
79667
79668
79669
79670
79671
79672
79673
79674
79675
79676
79677
79678
79679
79680
79681
79682
79683
79684
79685
79686
79687
79688
79689
79690
79691
79692
79693
79694
79695
79696
79697
79698
79699
79700
79701
79702
79703
79704
79705
79706
79707
79708
79709
79710
79711
79712
79713
79714
79715
79716
79717
79718
79719
79720
79721
79722
79723
79724
79725
79726
79727
79728
79729
79730
79731
79732
79733
79734
79735
79736
79737
79738
79739
79740
79741
79742
79743
79744
79745
79746
79747
79748
79749
79750
79751
79752
79753
79754
79755
79756
79757
79758
79759
79760
79761
79762
79763
79764
79765
79766
79767
79768
79769
79770
79771
79772
79773
79774
79775
79776
79777
79778
79779
79780
79781
79782
79783
79784
79785
79786
79787
79788
79789
79790
79791
79792
79793
79794
79795
79796
79797
79798
79799
79800
79801
79802
79803
79804
79805
79806
79807
79808
79809
79810
79811
79812
79813
79814
79815
79816
79817
79818
79819
79820
79821
79822
79823
79824
79825
79826
79827
79828
79829
79830
79831
79832
79833
79834
79835
79836
79837
79838
79839
79840
79841
79842
79843
79844
79845
79846
79847
79848
79849
79850
79851
79852
79853
79854
79855
79856
79857
79858
79859
79860
79861
79862
79863
79864
79865
79866
79867
79868
79869
79870
79871
79872
79873
79874
79875
79876
79877
79878
79879
79880
79881
79882
79883
79884
79885
79886
79887
79888
79889
79890
79891
79892
79893
79894
79895
79896
79897
79898
79899
79900
79901
79902
79903
79904
79905
79906
79907
79908
79909
79910
79911
79912
79913
79914
79915
79916
79917
79918
79919
79920
79921
79922
79923
79924
79925
79926
79927
79928
79929
79930
79931
79932
79933
79934
79935
79936
79937
79938
79939
79940
79941
79942
79943
79944
79945
79946
79947
79948
79949
79950
79951
79952
79953
79954
79955
79956
79957
79958
79959
79960
79961
79962
79963
79964
79965
79966
79967
79968
79969
79970
79971
79972
79973
79974
79975
79976
79977
79978
79979
79980
79981
79982
79983
79984
79985
79986
79987
79988
79989
79990
79991
79992
79993
79994
79995
79996
79997
79998
79999
80000
80001
80002
80003
80004
80005
80006
80007
80008
80009
80010
80011
80012
80013
80014
80015
80016
80017
80018
80019
80020
80021
80022
80023
80024
80025
80026
80027
80028
80029
80030
80031
80032
80033
80034
80035
80036
80037
80038
80039
80040
80041
80042
80043
80044
80045
80046
80047
80048
80049
80050
80051
80052
80053
80054
80055
80056
80057
80058
80059
80060
80061
80062
80063
80064
80065
80066
80067
80068
80069
80070
80071
80072
80073
80074
80075
80076
80077
80078
80079
80080
80081
80082
80083
80084
80085
80086
80087
80088
80089
80090
80091
80092
80093
80094
80095
80096
80097
80098
80099
80100
80101
80102
80103
80104
80105
80106
80107
80108
80109
80110
80111
80112
80113
80114
80115
80116
80117
80118
80119
80120
80121
80122
80123
80124
80125
80126
80127
80128
80129
80130
80131
80132
80133
80134
80135
80136
80137
80138
80139
80140
80141
80142
80143
80144
80145
80146
80147
80148
80149
80150
80151
80152
80153
80154
80155
80156
80157
80158
80159
80160
80161
80162
80163
80164
80165
80166
80167
80168
80169
80170
80171
80172
80173
80174
80175
80176
80177
80178
80179
80180
80181
80182
80183
80184
80185
80186
80187
80188
80189
80190
80191
80192
80193
80194
80195
80196
80197
80198
80199
80200
80201
80202
80203
80204
80205
80206
80207
80208
80209
80210
80211
80212
80213
80214
80215
80216
80217
80218
80219
80220
80221
80222
80223
80224
80225
80226
80227
80228
80229
80230
80231
80232
80233
80234
80235
80236
80237
80238
80239
80240
80241
80242
80243
80244
80245
80246
80247
80248
80249
80250
80251
80252
80253
80254
80255
80256
80257
80258
80259
80260
80261
80262
80263
80264
80265
80266
80267
80268
80269
80270
80271
80272
80273
80274
80275
80276
80277
80278
80279
80280
80281
80282
80283
80284
80285
80286
80287
80288
80289
80290
80291
80292
80293
80294
80295
80296
80297
80298
80299
80300
80301
80302
80303
80304
80305
80306
80307
80308
80309
80310
80311
80312
80313
80314
80315
80316
80317
80318
80319
80320
80321
80322
80323
80324
80325
80326
80327
80328
80329
80330
80331
80332
80333
80334
80335
80336
80337
80338
80339
80340
80341
80342
80343
80344
80345
80346
80347
80348
80349
80350
80351
80352
80353
80354
80355
80356
80357
80358
80359
80360
80361
80362
80363
80364
80365
80366
80367
80368
80369
80370
80371
80372
80373
80374
80375
80376
80377
80378
80379
80380
80381
80382
80383
80384
80385
80386
80387
80388
80389
80390
80391
80392
80393
80394
80395
80396
80397
80398
80399
80400
80401
80402
80403
80404
80405
80406
80407
80408
80409
80410
80411
80412
80413
80414
80415
80416
80417
80418
80419
80420
80421
80422
80423
80424
80425
80426
80427
80428
80429
80430
80431
80432
80433
80434
80435
80436
80437
80438
80439
80440
80441
80442
80443
80444
80445
80446
80447
80448
80449
80450
80451
80452
80453
80454
80455
80456
80457
80458
80459
80460
80461
80462
80463
80464
80465
80466
80467
80468
80469
80470
80471
80472
80473
80474
80475
80476
80477
80478
80479
80480
80481
80482
80483
80484
80485
80486
80487
80488
80489
80490
80491
80492
80493
80494
80495
80496
80497
80498
80499
80500
80501
80502
80503
80504
80505
80506
80507
80508
80509
80510
80511
80512
80513
80514
80515
80516
80517
80518
80519
80520
80521
80522
80523
80524
80525
80526
80527
80528
80529
80530
80531
80532
80533
80534
80535
80536
80537
80538
80539
80540
80541
80542
80543
80544
80545
80546
80547
80548
80549
80550
80551
80552
80553
80554
80555
80556
80557
80558
80559
80560
80561
80562
80563
80564
80565
80566
80567
80568
80569
80570
80571
80572
80573
80574
80575
80576
80577
80578
80579
80580
80581
80582
80583
80584
80585
80586
80587
80588
80589
80590
80591
80592
80593
80594
80595
80596
80597
80598
80599
80600
80601
80602
80603
80604
80605
80606
80607
80608
80609
80610
80611
80612
80613
80614
80615
80616
80617
80618
80619
80620
80621
80622
80623
80624
80625
80626
80627
80628
80629
80630
80631
80632
80633
80634
80635
80636
80637
80638
80639
80640
80641
80642
80643
80644
80645
80646
80647
80648
80649
80650
80651
80652
80653
80654
80655
80656
80657
80658
80659
80660
80661
80662
80663
80664
80665
80666
80667
80668
80669
80670
80671
80672
80673
80674
80675
80676
80677
80678
80679
80680
80681
80682
80683
80684
80685
80686
80687
80688
80689
80690
80691
80692
80693
80694
80695
80696
80697
80698
80699
80700
80701
80702
80703
80704
80705
80706
80707
80708
80709
80710
80711
80712
80713
80714
80715
80716
80717
80718
80719
80720
80721
80722
80723
80724
80725
80726
80727
80728
80729
80730
80731
80732
80733
80734
80735
80736
80737
80738
80739
80740
80741
80742
80743
80744
80745
80746
80747
80748
80749
80750
80751
80752
80753
80754
80755
80756
80757
80758
80759
80760
80761
80762
80763
80764
80765
80766
80767
80768
80769
80770
80771
80772
80773
80774
80775
80776
80777
80778
80779
80780
80781
80782
80783
80784
80785
80786
80787
80788
80789
80790
80791
80792
80793
80794
80795
80796
80797
80798
80799
80800
80801
80802
80803
80804
80805
80806
80807
80808
80809
80810
80811
80812
80813
80814
80815
80816
80817
80818
80819
80820
80821
80822
80823
80824
80825
80826
80827
80828
80829
80830
80831
80832
80833
80834
80835
80836
80837
80838
80839
80840
80841
80842
80843
80844
80845
80846
80847
80848
80849
80850
80851
80852
80853
80854
80855
80856
80857
80858
80859
80860
80861
80862
80863
80864
80865
80866
80867
80868
80869
80870
80871
80872
80873
80874
80875
80876
80877
80878
80879
80880
80881
80882
80883
80884
80885
80886
80887
80888
80889
80890
80891
80892
80893
80894
80895
80896
80897
80898
80899
80900
80901
80902
80903
80904
80905
80906
80907
80908
80909
80910
80911
80912
80913
80914
80915
80916
80917
80918
80919
80920
80921
80922
80923
80924
80925
80926
80927
80928
80929
80930
80931
80932
80933
80934
80935
80936
80937
80938
80939
80940
80941
80942
80943
80944
80945
80946
80947
80948
80949
80950
80951
80952
80953
80954
80955
80956
80957
80958
80959
80960
80961
80962
80963
80964
80965
80966
80967
80968
80969
80970
80971
80972
80973
80974
80975
80976
80977
80978
80979
80980
80981
80982
80983
80984
80985
80986
80987
80988
80989
80990
80991
80992
80993
80994
80995
80996
80997
80998
80999
81000
81001
81002
81003
81004
81005
81006
81007
81008
81009
81010
81011
81012
81013
81014
81015
81016
81017
81018
81019
81020
81021
81022
81023
81024
81025
81026
81027
81028
81029
81030
81031
81032
81033
81034
81035
81036
81037
81038
81039
81040
81041
81042
81043
81044
81045
81046
81047
81048
81049
81050
81051
81052
81053
81054
81055
81056
81057
81058
81059
81060
81061
81062
81063
81064
81065
81066
81067
81068
81069
81070
81071
81072
81073
81074
81075
81076
81077
81078
81079
81080
81081
81082
81083
81084
81085
81086
81087
81088
81089
81090
81091
81092
81093
81094
81095
81096
81097
81098
81099
81100
81101
81102
81103
81104
81105
81106
81107
81108
81109
81110
81111
81112
81113
81114
81115
81116
81117
81118
81119
81120
81121
81122
81123
81124
81125
81126
81127
81128
81129
81130
81131
81132
81133
81134
81135
81136
81137
81138
81139
81140
81141
81142
81143
81144
81145
81146
81147
81148
81149
81150
81151
81152
81153
81154
81155
81156
81157
81158
81159
81160
81161
81162
81163
81164
81165
81166
81167
81168
81169
81170
81171
81172
81173
81174
81175
81176
81177
81178
81179
81180
81181
81182
81183
81184
81185
81186
81187
81188
81189
81190
81191
81192
81193
81194
81195
81196
81197
81198
81199
81200
81201
81202
81203
81204
81205
81206
81207
81208
81209
81210
81211
81212
81213
81214
81215
81216
81217
81218
81219
81220
81221
81222
81223
81224
81225
81226
81227
81228
81229
81230
81231
81232
81233
81234
81235
81236
81237
81238
81239
81240
81241
81242
81243
81244
81245
81246
81247
81248
81249
81250
81251
81252
81253
81254
81255
81256
81257
81258
81259
81260
81261
81262
81263
81264
81265
81266
81267
81268
81269
81270
81271
81272
81273
81274
81275
81276
81277
81278
81279
81280
81281
81282
81283
81284
81285
81286
81287
81288
81289
81290
81291
81292
81293
81294
81295
81296
81297
81298
81299
81300
81301
81302
81303
81304
81305
81306
81307
81308
81309
81310
81311
81312
81313
81314
81315
81316
81317
81318
81319
81320
81321
81322
81323
81324
81325
81326
81327
81328
81329
81330
81331
81332
81333
81334
81335
81336
81337
81338
81339
81340
81341
81342
81343
81344
81345
81346
81347
81348
81349
81350
81351
81352
81353
81354
81355
81356
81357
81358
81359
81360
81361
81362
81363
81364
81365
81366
81367
81368
81369
81370
81371
81372
81373
81374
81375
81376
81377
81378
81379
81380
81381
81382
81383
81384
81385
81386
81387
81388
81389
81390
81391
81392
81393
81394
81395
81396
81397
81398
81399
81400
81401
81402
81403
81404
81405
81406
81407
81408
81409
81410
81411
81412
81413
81414
81415
81416
81417
81418
81419
81420
81421
81422
81423
81424
81425
81426
81427
81428
81429
81430
81431
81432
81433
81434
81435
81436
81437
81438
81439
81440
81441
81442
81443
81444
81445
81446
81447
81448
81449
81450
81451
81452
81453
81454
81455
81456
81457
81458
81459
81460
81461
81462
81463
81464
81465
81466
81467
81468
81469
81470
81471
81472
81473
81474
81475
81476
81477
81478
81479
81480
81481
81482
81483
81484
81485
81486
81487
81488
81489
81490
81491
81492
81493
81494
81495
81496
81497
81498
81499
81500
81501
81502
81503
81504
81505
81506
81507
81508
81509
81510
81511
81512
81513
81514
81515
81516
81517
81518
81519
81520
81521
81522
81523
81524
81525
81526
81527
81528
81529
81530
81531
81532
81533
81534
81535
81536
81537
81538
81539
81540
81541
81542
81543
81544
81545
81546
81547
81548
81549
81550
81551
81552
81553
81554
81555
81556
81557
81558
81559
81560
81561
81562
81563
81564
81565
81566
81567
81568
81569
81570
81571
81572
81573
81574
81575
81576
81577
81578
81579
81580
81581
81582
81583
81584
81585
81586
81587
81588
81589
81590
81591
81592
81593
81594
81595
81596
81597
81598
81599
81600
81601
81602
81603
81604
81605
81606
81607
81608
81609
81610
81611
81612
81613
81614
81615
81616
81617
81618
81619
81620
81621
81622
81623
81624
81625
81626
81627
81628
81629
81630
81631
81632
81633
81634
81635
81636
81637
81638
81639
81640
81641
81642
81643
81644
81645
81646
81647
81648
81649
81650
81651
81652
81653
81654
81655
81656
81657
81658
81659
81660
81661
81662
81663
81664
81665
81666
81667
81668
81669
81670
81671
81672
81673
81674
81675
81676
81677
81678
81679
81680
81681
81682
81683
81684
81685
81686
81687
81688
81689
81690
81691
81692
81693
81694
81695
81696
81697
81698
81699
81700
81701
81702
81703
81704
81705
81706
81707
81708
81709
81710
81711
81712
81713
81714
81715
81716
81717
81718
81719
81720
81721
81722
81723
81724
81725
81726
81727
81728
81729
81730
81731
81732
81733
81734
81735
81736
81737
81738
81739
81740
81741
81742
81743
81744
81745
81746
81747
81748
81749
81750
81751
81752
81753
81754
81755
81756
81757
81758
81759
81760
81761
81762
81763
81764
81765
81766
81767
81768
81769
81770
81771
81772
81773
81774
81775
81776
81777
81778
81779
81780
81781
81782
81783
81784
81785
81786
81787
81788
81789
81790
81791
81792
81793
81794
81795
81796
81797
81798
81799
81800
81801
81802
81803
81804
81805
81806
81807
81808
81809
81810
81811
81812
81813
81814
81815
81816
81817
81818
81819
81820
81821
81822
81823
81824
81825
81826
81827
81828
81829
81830
81831
81832
81833
81834
81835
81836
81837
81838
81839
81840
81841
81842
81843
81844
81845
81846
81847
81848
81849
81850
81851
81852
81853
81854
81855
81856
81857
81858
81859
81860
81861
81862
81863
81864
81865
81866
81867
81868
81869
81870
81871
81872
81873
81874
81875
81876
81877
81878
81879
81880
81881
81882
81883
81884
81885
81886
81887
81888
81889
81890
81891
81892
81893
81894
81895
81896
81897
81898
81899
81900
81901
81902
81903
81904
81905
81906
81907
81908
81909
81910
81911
81912
81913
81914
81915
81916
81917
81918
81919
81920
81921
81922
81923
81924
81925
81926
81927
81928
81929
81930
81931
81932
81933
81934
81935
81936
81937
81938
81939
81940
81941
81942
81943
81944
81945
81946
81947
81948
81949
81950
81951
81952
81953
81954
81955
81956
81957
81958
81959
81960
81961
81962
81963
81964
81965
81966
81967
81968
81969
81970
81971
81972
81973
81974
81975
81976
81977
81978
81979
81980
81981
81982
81983
81984
81985
81986
81987
81988
81989
81990
81991
81992
81993
81994
81995
81996
81997
81998
81999
82000
82001
82002
82003
82004
82005
82006
82007
82008
82009
82010
82011
82012
82013
82014
82015
82016
82017
82018
82019
82020
82021
82022
82023
82024
82025
82026
82027
82028
82029
82030
82031
82032
82033
82034
82035
82036
82037
82038
82039
82040
82041
82042
82043
82044
82045
82046
82047
82048
82049
82050
82051
82052
82053
82054
82055
82056
82057
82058
82059
82060
82061
82062
82063
82064
82065
82066
82067
82068
82069
82070
82071
82072
82073
82074
82075
82076
82077
82078
82079
82080
82081
82082
82083
82084
82085
82086
82087
82088
82089
82090
82091
82092
82093
82094
82095
82096
82097
82098
82099
82100
82101
82102
82103
82104
82105
82106
82107
82108
82109
82110
82111
82112
82113
82114
82115
82116
82117
82118
82119
82120
82121
82122
82123
82124
82125
82126
82127
82128
82129
82130
82131
82132
82133
82134
82135
82136
82137
82138
82139
82140
82141
82142
82143
82144
82145
82146
82147
82148
82149
82150
82151
82152
82153
82154
82155
82156
82157
82158
82159
82160
82161
82162
82163
82164
82165
82166
82167
82168
82169
82170
82171
82172
82173
82174
82175
82176
82177
82178
82179
82180
82181
82182
82183
82184
82185
82186
82187
82188
82189
82190
82191
82192
82193
82194
82195
82196
82197
82198
82199
82200
82201
82202
82203
82204
82205
82206
82207
82208
82209
82210
82211
82212
82213
82214
82215
82216
82217
82218
82219
82220
82221
82222
82223
82224
82225
82226
82227
82228
82229
82230
82231
82232
82233
82234
82235
82236
82237
82238
82239
82240
82241
82242
82243
82244
82245
82246
82247
82248
82249
82250
82251
82252
82253
82254
82255
82256
82257
82258
82259
82260
82261
82262
82263
82264
82265
82266
82267
82268
82269
82270
82271
82272
82273
82274
82275
82276
82277
82278
82279
82280
82281
82282
82283
82284
82285
82286
82287
82288
82289
82290
82291
82292
82293
82294
82295
82296
82297
82298
82299
82300
82301
82302
82303
82304
82305
82306
82307
82308
82309
82310
82311
82312
82313
82314
82315
82316
82317
82318
82319
82320
82321
82322
82323
82324
82325
82326
82327
82328
82329
82330
82331
82332
82333
82334
82335
82336
82337
82338
82339
82340
82341
82342
82343
82344
82345
82346
82347
82348
82349
82350
82351
82352
82353
82354
82355
82356
82357
82358
82359
82360
82361
82362
82363
82364
82365
82366
82367
82368
82369
82370
82371
82372
82373
82374
82375
82376
82377
82378
82379
82380
82381
82382
82383
82384
82385
82386
82387
82388
82389
82390
82391
82392
82393
82394
82395
82396
82397
82398
82399
82400
82401
82402
82403
82404
82405
82406
82407
82408
82409
82410
82411
82412
82413
82414
82415
82416
82417
82418
82419
82420
82421
82422
82423
82424
82425
82426
82427
82428
82429
82430
82431
82432
82433
82434
82435
82436
82437
82438
82439
82440
82441
82442
82443
82444
82445
82446
82447
82448
82449
82450
82451
82452
82453
82454
82455
82456
82457
82458
82459
82460
82461
82462
82463
82464
82465
82466
82467
82468
82469
82470
82471
82472
82473
82474
82475
82476
82477
82478
82479
82480
82481
82482
82483
82484
82485
82486
82487
82488
82489
82490
82491
82492
82493
82494
82495
82496
82497
82498
82499
82500
82501
82502
82503
82504
82505
82506
82507
82508
82509
82510
82511
82512
82513
82514
82515
82516
82517
82518
82519
82520
82521
82522
82523
82524
82525
82526
82527
82528
82529
82530
82531
82532
82533
82534
82535
82536
82537
82538
82539
82540
82541
82542
82543
82544
82545
82546
82547
82548
82549
82550
82551
82552
82553
82554
82555
82556
82557
82558
82559
82560
82561
82562
82563
82564
82565
82566
82567
82568
82569
82570
82571
82572
82573
82574
82575
82576
82577
82578
82579
82580
82581
82582
82583
82584
82585
82586
82587
82588
82589
82590
82591
82592
82593
82594
82595
82596
82597
82598
82599
82600
82601
82602
82603
82604
82605
82606
82607
82608
82609
82610
82611
82612
82613
82614
82615
82616
82617
82618
82619
82620
82621
82622
82623
82624
82625
82626
82627
82628
82629
82630
82631
82632
82633
82634
82635
82636
82637
82638
82639
82640
82641
82642
82643
82644
82645
82646
82647
82648
82649
82650
82651
82652
82653
82654
82655
82656
82657
82658
82659
82660
82661
82662
82663
82664
82665
82666
82667
82668
82669
82670
82671
82672
82673
82674
82675
82676
82677
82678
82679
82680
82681
82682
82683
82684
82685
82686
82687
82688
82689
82690
82691
82692
82693
82694
82695
82696
82697
82698
82699
82700
82701
82702
82703
82704
82705
82706
82707
82708
82709
82710
82711
82712
82713
82714
82715
82716
82717
82718
82719
82720
82721
82722
82723
82724
82725
82726
82727
82728
82729
82730
82731
82732
82733
82734
82735
82736
82737
82738
82739
82740
82741
82742
82743
82744
82745
82746
82747
82748
82749
82750
82751
82752
82753
82754
82755
82756
82757
82758
82759
82760
82761
82762
82763
82764
82765
82766
82767
82768
82769
82770
82771
82772
82773
82774
82775
82776
82777
82778
82779
82780
82781
82782
82783
82784
82785
82786
82787
82788
82789
82790
82791
82792
82793
82794
82795
82796
82797
82798
82799
82800
82801
82802
82803
82804
82805
82806
82807
82808
82809
82810
82811
82812
82813
82814
82815
82816
82817
82818
82819
82820
82821
82822
82823
82824
82825
82826
82827
82828
82829
82830
82831
82832
82833
82834
82835
82836
82837
82838
82839
82840
82841
82842
82843
82844
82845
82846
82847
82848
82849
82850
82851
82852
82853
82854
82855
82856
82857
82858
82859
82860
82861
82862
82863
82864
82865
82866
82867
82868
82869
82870
82871
82872
82873
82874
82875
82876
82877
82878
82879
82880
82881
82882
82883
82884
82885
82886
82887
82888
82889
82890
82891
82892
82893
82894
82895
82896
82897
82898
82899
82900
82901
82902
82903
82904
82905
82906
82907
82908
82909
82910
82911
82912
82913
82914
82915
82916
82917
82918
82919
82920
82921
82922
82923
82924
82925
82926
82927
82928
82929
82930
82931
82932
82933
82934
82935
82936
82937
82938
82939
82940
82941
82942
82943
82944
82945
82946
82947
82948
82949
82950
82951
82952
82953
82954
82955
82956
82957
82958
82959
82960
82961
82962
82963
82964
82965
82966
82967
82968
82969
82970
82971
82972
82973
82974
82975
82976
82977
82978
82979
82980
82981
82982
82983
82984
82985
82986
82987
82988
82989
82990
82991
82992
82993
82994
82995
82996
82997
82998
82999
83000
83001
83002
83003
83004
83005
83006
83007
83008
83009
83010
83011
83012
83013
83014
83015
83016
83017
83018
83019
83020
83021
83022
83023
83024
83025
83026
83027
83028
83029
83030
83031
83032
83033
83034
83035
83036
83037
83038
83039
83040
83041
83042
83043
83044
83045
83046
83047
83048
83049
83050
83051
83052
83053
83054
83055
83056
83057
83058
83059
83060
83061
83062
83063
83064
83065
83066
83067
83068
83069
83070
83071
83072
83073
83074
83075
83076
83077
83078
83079
83080
83081
83082
83083
83084
83085
83086
83087
83088
83089
83090
83091
83092
83093
83094
83095
83096
83097
83098
83099
83100
83101
83102
83103
83104
83105
83106
83107
83108
83109
83110
83111
83112
83113
83114
83115
83116
83117
83118
83119
83120
83121
83122
83123
83124
83125
83126
83127
83128
83129
83130
83131
83132
83133
83134
83135
83136
83137
83138
83139
83140
83141
83142
83143
83144
83145
83146
83147
83148
83149
83150
83151
83152
83153
83154
83155
83156
83157
83158
83159
83160
83161
83162
83163
83164
83165
83166
83167
83168
83169
83170
83171
83172
83173
83174
83175
83176
83177
83178
83179
83180
83181
83182
83183
83184
83185
83186
83187
83188
83189
83190
83191
83192
83193
83194
83195
83196
83197
83198
83199
83200
83201
83202
83203
83204
83205
83206
83207
83208
83209
83210
83211
83212
83213
83214
83215
83216
83217
83218
83219
83220
83221
83222
83223
83224
83225
83226
83227
83228
83229
83230
83231
83232
83233
83234
83235
83236
83237
83238
83239
83240
83241
83242
83243
83244
83245
83246
83247
83248
83249
83250
83251
83252
83253
83254
83255
83256
83257
83258
83259
83260
83261
83262
83263
83264
83265
83266
83267
83268
83269
83270
83271
83272
83273
83274
83275
83276
83277
83278
83279
83280
83281
83282
83283
83284
83285
83286
83287
83288
83289
83290
83291
83292
83293
83294
83295
83296
83297
83298
83299
83300
83301
83302
83303
83304
83305
83306
83307
83308
83309
83310
83311
83312
83313
83314
83315
83316
83317
83318
83319
83320
83321
83322
83323
83324
83325
83326
83327
83328
83329
83330
83331
83332
83333
83334
83335
83336
83337
83338
83339
83340
83341
83342
83343
83344
83345
83346
83347
83348
83349
83350
83351
83352
83353
83354
83355
83356
83357
83358
83359
83360
83361
83362
83363
83364
83365
83366
83367
83368
83369
83370
83371
83372
83373
83374
83375
83376
83377
83378
83379
83380
83381
83382
83383
83384
83385
83386
83387
83388
83389
83390
83391
83392
83393
83394
83395
83396
83397
83398
83399
83400
83401
83402
83403
83404
83405
83406
83407
83408
83409
83410
83411
83412
83413
83414
83415
83416
83417
83418
83419
83420
83421
83422
83423
83424
83425
83426
83427
83428
83429
83430
83431
83432
83433
83434
83435
83436
83437
83438
83439
83440
83441
83442
83443
83444
83445
83446
83447
83448
83449
83450
83451
83452
83453
83454
83455
83456
83457
83458
83459
83460
83461
83462
83463
83464
83465
83466
83467
83468
83469
83470
83471
83472
83473
83474
83475
83476
83477
83478
83479
83480
83481
83482
83483
83484
83485
83486
83487
83488
83489
83490
83491
83492
83493
83494
83495
83496
83497
83498
83499
83500
83501
83502
83503
83504
83505
83506
83507
83508
83509
83510
83511
83512
83513
83514
83515
83516
83517
83518
83519
83520
83521
83522
83523
83524
83525
83526
83527
83528
83529
83530
83531
83532
83533
83534
83535
83536
83537
83538
83539
83540
83541
83542
83543
83544
83545
83546
83547
83548
83549
83550
83551
83552
83553
83554
83555
83556
83557
83558
83559
83560
83561
83562
83563
83564
83565
83566
83567
83568
83569
83570
83571
83572
83573
83574
83575
83576
83577
83578
83579
83580
83581
83582
83583
83584
83585
83586
83587
83588
83589
83590
83591
83592
83593
83594
83595
83596
83597
83598
83599
83600
83601
83602
83603
83604
83605
83606
83607
83608
83609
83610
83611
83612
83613
83614
83615
83616
83617
83618
83619
83620
83621
83622
83623
83624
83625
83626
83627
83628
83629
83630
83631
83632
83633
83634
83635
83636
83637
83638
83639
83640
83641
83642
83643
83644
83645
83646
83647
83648
83649
83650
83651
83652
83653
83654
83655
83656
83657
83658
83659
83660
83661
83662
83663
83664
83665
83666
83667
83668
83669
83670
83671
83672
83673
83674
83675
83676
83677
83678
83679
83680
83681
83682
83683
83684
83685
83686
83687
83688
83689
83690
83691
83692
83693
83694
83695
83696
83697
83698
83699
83700
83701
83702
83703
83704
83705
83706
83707
83708
83709
83710
83711
83712
83713
83714
83715
83716
83717
83718
83719
83720
83721
83722
83723
83724
83725
83726
83727
83728
83729
83730
83731
83732
83733
83734
83735
83736
83737
83738
83739
83740
83741
83742
83743
83744
83745
83746
83747
83748
83749
83750
83751
83752
83753
83754
83755
83756
83757
83758
83759
83760
83761
83762
83763
83764
83765
83766
83767
83768
83769
83770
83771
83772
83773
83774
83775
83776
83777
83778
83779
83780
83781
83782
83783
83784
83785
83786
83787
83788
83789
83790
83791
83792
83793
83794
83795
83796
83797
83798
83799
83800
83801
83802
83803
83804
83805
83806
83807
83808
83809
83810
83811
83812
83813
83814
83815
83816
83817
83818
83819
83820
83821
83822
83823
83824
83825
83826
83827
83828
83829
83830
83831
83832
83833
83834
83835
83836
83837
83838
83839
83840
83841
83842
83843
83844
83845
83846
83847
83848
83849
83850
83851
83852
83853
83854
83855
83856
83857
83858
83859
83860
83861
83862
83863
83864
83865
83866
83867
83868
83869
83870
83871
83872
83873
83874
83875
83876
83877
83878
83879
83880
83881
83882
83883
83884
83885
83886
83887
83888
83889
83890
83891
83892
83893
83894
83895
83896
83897
83898
83899
83900
83901
83902
83903
83904
83905
83906
83907
83908
83909
83910
83911
83912
83913
83914
83915
83916
83917
83918
83919
83920
83921
83922
83923
83924
83925
83926
83927
83928
83929
83930
83931
83932
83933
83934
83935
83936
83937
83938
83939
83940
83941
83942
83943
83944
83945
83946
83947
83948
83949
83950
83951
83952
83953
83954
83955
83956
83957
83958
83959
83960
83961
83962
83963
83964
83965
83966
83967
83968
83969
83970
83971
83972
83973
83974
83975
83976
83977
83978
83979
83980
83981
83982
83983
83984
83985
83986
83987
83988
83989
83990
83991
83992
83993
83994
83995
83996
83997
83998
83999
84000
84001
84002
84003
84004
84005
84006
84007
84008
84009
84010
84011
84012
84013
84014
84015
84016
84017
84018
84019
84020
84021
84022
84023
84024
84025
84026
84027
84028
84029
84030
84031
84032
84033
84034
84035
84036
84037
84038
84039
84040
84041
84042
84043
84044
84045
84046
84047
84048
84049
84050
84051
84052
84053
84054
84055
84056
84057
84058
84059
84060
84061
84062
84063
84064
84065
84066
84067
84068
84069
84070
84071
84072
84073
84074
84075
84076
84077
84078
84079
84080
84081
84082
84083
84084
84085
84086
84087
84088
84089
84090
84091
84092
84093
84094
84095
84096
84097
84098
84099
84100
84101
84102
84103
84104
84105
84106
84107
84108
84109
84110
84111
84112
84113
84114
84115
84116
84117
84118
84119
84120
84121
84122
84123
84124
84125
84126
84127
84128
84129
84130
84131
84132
84133
84134
84135
84136
84137
84138
84139
84140
84141
84142
84143
84144
84145
84146
84147
84148
84149
84150
84151
84152
84153
84154
84155
84156
84157
84158
84159
84160
84161
84162
84163
84164
84165
84166
84167
84168
84169
84170
84171
84172
84173
84174
84175
84176
84177
84178
84179
84180
84181
84182
84183
84184
84185
84186
84187
84188
84189
84190
84191
84192
84193
84194
84195
84196
84197
84198
84199
84200
84201
84202
84203
84204
84205
84206
84207
84208
84209
84210
84211
84212
84213
84214
84215
84216
84217
84218
84219
84220
84221
84222
84223
84224
84225
84226
84227
84228
84229
84230
84231
84232
84233
84234
84235
84236
84237
84238
84239
84240
84241
84242
84243
84244
84245
84246
84247
84248
84249
84250
84251
84252
84253
84254
84255
84256
84257
84258
84259
84260
84261
84262
84263
84264
84265
84266
84267
84268
84269
84270
84271
84272
84273
84274
84275
84276
84277
84278
84279
84280
84281
84282
84283
84284
84285
84286
84287
84288
84289
84290
84291
84292
84293
84294
84295
84296
84297
84298
84299
84300
84301
84302
84303
84304
84305
84306
84307
84308
84309
84310
84311
84312
84313
84314
84315
84316
84317
84318
84319
84320
84321
84322
84323
84324
84325
84326
84327
84328
84329
84330
84331
84332
84333
84334
84335
84336
84337
84338
84339
84340
84341
84342
84343
84344
84345
84346
84347
84348
84349
84350
84351
84352
84353
84354
84355
84356
84357
84358
84359
84360
84361
84362
84363
84364
84365
84366
84367
84368
84369
84370
84371
84372
84373
84374
84375
84376
84377
84378
84379
84380
84381
84382
84383
84384
84385
84386
84387
84388
84389
84390
84391
84392
84393
84394
84395
84396
84397
84398
84399
84400
84401
84402
84403
84404
84405
84406
84407
84408
84409
84410
84411
84412
84413
84414
84415
84416
84417
84418
84419
84420
84421
84422
84423
84424
84425
84426
84427
84428
84429
84430
84431
84432
84433
84434
84435
84436
84437
84438
84439
84440
84441
84442
84443
84444
84445
84446
84447
84448
84449
84450
84451
84452
84453
84454
84455
84456
84457
84458
84459
84460
84461
84462
84463
84464
84465
84466
84467
84468
84469
84470
84471
84472
84473
84474
84475
84476
84477
84478
84479
84480
84481
84482
84483
84484
84485
84486
84487
84488
84489
84490
84491
84492
84493
84494
84495
84496
84497
84498
84499
84500
84501
84502
84503
84504
84505
84506
84507
84508
84509
84510
84511
84512
84513
84514
84515
84516
84517
84518
84519
84520
84521
84522
84523
84524
84525
84526
84527
84528
84529
84530
84531
84532
84533
84534
84535
84536
84537
84538
84539
84540
84541
84542
84543
84544
84545
84546
84547
84548
84549
84550
84551
84552
84553
84554
84555
84556
84557
84558
84559
84560
84561
84562
84563
84564
84565
84566
84567
84568
84569
84570
84571
84572
84573
84574
84575
84576
84577
84578
84579
84580
84581
84582
84583
84584
84585
84586
84587
84588
84589
84590
84591
84592
84593
84594
84595
84596
84597
84598
84599
84600
84601
84602
84603
84604
84605
84606
84607
84608
84609
84610
84611
84612
84613
84614
84615
84616
84617
84618
84619
84620
84621
84622
84623
84624
84625
84626
84627
84628
84629
84630
84631
84632
84633
84634
84635
84636
84637
84638
84639
84640
84641
84642
84643
84644
84645
84646
84647
84648
84649
84650
84651
84652
84653
84654
84655
84656
84657
84658
84659
84660
84661
84662
84663
84664
84665
84666
84667
84668
84669
84670
84671
84672
84673
84674
84675
84676
84677
84678
84679
84680
84681
84682
84683
84684
84685
84686
84687
84688
84689
84690
84691
84692
84693
84694
84695
84696
84697
84698
84699
84700
84701
84702
84703
84704
84705
84706
84707
84708
84709
84710
84711
84712
84713
84714
84715
84716
84717
84718
84719
84720
84721
84722
84723
84724
84725
84726
84727
84728
84729
84730
84731
84732
84733
84734
84735
84736
84737
84738
84739
84740
84741
84742
84743
84744
84745
84746
84747
84748
84749
84750
84751
84752
84753
84754
84755
84756
84757
84758
84759
84760
84761
84762
84763
84764
84765
84766
84767
84768
84769
84770
84771
84772
84773
84774
84775
84776
84777
84778
84779
84780
84781
84782
84783
84784
84785
84786
84787
84788
84789
84790
84791
84792
84793
84794
84795
84796
84797
84798
84799
84800
84801
84802
84803
84804
84805
84806
84807
84808
84809
84810
84811
84812
84813
84814
84815
84816
84817
84818
84819
84820
84821
84822
84823
84824
84825
84826
84827
84828
84829
84830
84831
84832
84833
84834
84835
84836
84837
84838
84839
84840
84841
84842
84843
84844
84845
84846
84847
84848
84849
84850
84851
84852
84853
84854
84855
84856
84857
84858
84859
84860
84861
84862
84863
84864
84865
84866
84867
84868
84869
84870
84871
84872
84873
84874
84875
84876
84877
84878
84879
84880
84881
84882
84883
84884
84885
84886
84887
84888
84889
84890
84891
84892
84893
84894
84895
84896
84897
84898
84899
84900
84901
84902
84903
84904
84905
84906
84907
84908
84909
84910
84911
84912
84913
84914
84915
84916
84917
84918
84919
84920
84921
84922
84923
84924
84925
84926
84927
84928
84929
84930
84931
84932
84933
84934
84935
84936
84937
84938
84939
84940
84941
84942
84943
84944
84945
84946
84947
84948
84949
84950
84951
84952
84953
84954
84955
84956
84957
84958
84959
84960
84961
84962
84963
84964
84965
84966
84967
84968
84969
84970
84971
84972
84973
84974
84975
84976
84977
84978
84979
84980
84981
84982
84983
84984
84985
84986
84987
84988
84989
84990
84991
84992
84993
84994
84995
84996
84997
84998
84999
85000
85001
85002
85003
85004
85005
85006
85007
85008
85009
85010
85011
85012
85013
85014
85015
85016
85017
85018
85019
85020
85021
85022
85023
85024
85025
85026
85027
85028
85029
85030
85031
85032
85033
85034
85035
85036
85037
85038
85039
85040
85041
85042
85043
85044
85045
85046
85047
85048
85049
85050
85051
85052
85053
85054
85055
85056
85057
85058
85059
85060
85061
85062
85063
85064
85065
85066
85067
85068
85069
85070
85071
85072
85073
85074
85075
85076
85077
85078
85079
85080
85081
85082
85083
85084
85085
85086
85087
85088
85089
85090
85091
85092
85093
85094
85095
85096

<!DOCTYPE html><html lang=en-US-x-hixie><title>HTML5 (including next generation additions still in development)</title><script>
   var loadTimer = new Date();
   var current_revision = "r" + "$Revision: 5097 $".substr(11);
   current_revision = current_revision.substr(0, current_revision.length - 2);
   var last_known_revision = current_revision;
   function getCookie(name) {
     var params = location.search.substr(1).split("&");
     for (var index = 0; index < params.length; index++) {
       if (params[index] == name)
         return "1";
       var data = params[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     var cookies = document.cookie.split("; ");
     for (var index = 0; index < cookies.length; index++) {
       var data = cookies[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     return null;
   }
   var currentAlert;
   var currentAlertTimeout;
   function showAlert(s, href) {
     if (!currentAlert) {
       currentAlert = document.createElement('div');
       currentAlert.id = 'alert';
       var x = document.createElement('button');
       x.textContent = '\u2573';
       x.onclick = closeAlert2;
       currentAlert.appendChild(x);
       currentAlert.appendChild(document.createElement('span'));
       currentAlert.onmousemove = function () {
         clearTimeout(currentAlertTimeout);
         currentAlert.className = '';
         currentAlertTimeout = setTimeout(closeAlert, 10000);
       }
       document.body.appendChild(currentAlert);
     } else {
       clearTimeout(currentAlertTimeout);
       currentAlert.className = '';
     }
     currentAlert.lastChild.textContent = s + ' ';
     if (href) {
       var link = document.createElement('a');
       link.href = href;
       link.textContent = href;
       currentAlert.lastChild.appendChild(link);
     }
     currentAlertTimeout = setTimeout(closeAlert, 10000);
   }
   function closeAlert() {
     clearTimeout(currentAlertTimeout);
     if (currentAlert) {
       currentAlert.className = 'closed';
       currentAlertTimeout = setTimeout(closeAlert2, 3000);
     }
   }
   function closeAlert2() {
     clearTimeout(currentAlertTimeout);
     if (currentAlert) {
       currentAlert.parentNode.removeChild(currentAlert);
       currentAlert = null;
     }
   }
   window.addEventListener('keydown', function (event) {
     if (event.keyCode == 27) {
       if (currentAlert)
         closeAlert2();
     } else {
       closeAlert();
     }
   }, false);
   window.addEventListener('scroll', function (event) {
     closeAlert();
   }, false);
   function load(script) {
     var e = document.createElement('script');
     e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
     document.body.appendChild(e);
   }
  </script><link href=/style/specification rel=stylesheet><link href=/images/icon rel=icon><style>
   .proposal { border: blue solid; padding: 1em; }
   .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
   #updatesStatus { display: none; }
   #updatesStatus.relevant { display: block; position: fixed; right: 1em; top: 1em; padding: 0.5em; font: bold small sans-serif; min-width: 25em; width: 30%; max-width: 40em; height: auto; border: ridge 4px gray; background: #EEEEEE; color: black; }
   div.head .logo { width: 11em; margin-bottom: 20em; }
   #configUI { position: absolute; z-index: 20; top: 10em; right: 0; width: 11em; padding: 0 0.5em 0 0.5em; font-size: small; background: gray; background: rgba(32,32,32,0.9); color: white; border-radius: 1em 0 0 1em; -moz-border-radius: 1em 0 0 1em; }
   #configUI p { margin: 0.75em 0; padding: 0.3em; }
   #configUI p label { display: block; }
   #configUI #updateUI, #configUI .loginUI { text-align: center; }
   #configUI input[type=button] { display: block; margin: auto; }
   #configUI :link, #configUI :visited { color: white; }
   #configUI :link:hover, #configUI :visited:hover { background: transparent; }
   #reviewer { position: fixed; bottom: 0; right: 0; padding: 0.15em 0.25em 0em 0.5em; white-space: nowrap; overflow: hidden; z-index: 30; background: gray; background: rgba(32,32,32,0.9); color: white; border-radius: 1em 0 0 0; -moz-border-radius: 1em 0 0 0; max-width: 90%; }
   #reviewer input { max-width: 50%; }
   #reviewer * { font-size: small; }
   #reviewer.off > :not(:first-child) { display: none; }
   #alert { position: fixed; top: 20%; left: 20%; right: 20%; font-size: 2em; padding: 0.5em; z-index: 40; background: gray; background: rgba(32,32,32,0.9); color: white; border-radius: 1em; -moz-border-radius: 1em; -webkit-transition: opacity 1s linear; }
   #alert.closed { opacity: 0; }
   #alert button { position: absolute; top: -1em; right: 2em; border-radius: 1em 1em 0 0; border: none; line-height: 0.9; color: white; background: rgb(64,64,64); font-size: 0.6em; font-weight: 900; cursor: pointer; }
   #alert :link, #alert :visited { color: white; }
   #alert :link:hover, #alert :visited:hover { background: transparent; }
   @media print { #configUI { display: none; } }
   .rfc2119 { font-variant: small-caps; text-shadow: 0 0 0.5em yellow; position: static; }
   .rfc2119::after { position: absolute; left: 0; width: 25px; text-align: center; color: yellow; text-shadow: 0.075em 0.075em 0.2em black; }
   .rfc2119.m\ust::after { content: '\2605'; }
   .rfc2119.s\hould::after { content: '\2606'; }
   [hidden] { display: none; }
  </style><style type=text/css>

   .applies thead th > * { display: block; }
   .applies thead code { display: block; }
   .applies tbody th { whitespace: nowrap; }
   .applies td { text-align: center; }
   .applies .yes { background: yellow; }

   .matrix, .matrix td { border: none; text-align: right; }
   .matrix { margin-left: 2em; }

   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }

   #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
   #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
   #table-example-1 caption { padding-bottom: 0.5em; }
   #table-example-1 thead, #table-example-1 tbody { border: none; }
   #table-example-1 th, #table-example-1 td { border: solid thin; }
   #table-example-1 th { font-weight: normal; }
   #table-example-1 td { border-style: none solid; vertical-align: top; }
   #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
   #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
   #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
   #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
   #table-example-1 tbody td:first-child::after { content: leader(". "); }
   #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
   #table-example-1 tbody td:first-child + td { width: 10em; }
   #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
   #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }

   .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
   .apple-table-examples * { font-family: "Times", serif; }
   .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
   .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
   .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
   .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
   .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
   .apple-table-examples td { text-align: right; vertical-align: top; }
   .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
   .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
   .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
   .apple-table-examples sup { line-height: 0; }

   .details-example img { vertical-align: top; }

   #named-character-references-table {
     font-size: 0.6em;
     column-width: 28em;
     column-gap: 1em;
     -moz-column-width: 28em;
     -moz-column-gap: 1em;
     -webkit-column-width: 28em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }

  </style><style>
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><link href=data:text/css, id=complete rel=stylesheet title="Complete specification"><link href=data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20} id=author rel="alternate stylesheet" title="Author documentation only"><link href=data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20} id=highlight rel="alternate stylesheet" title="Highlight implementation requirements"><link href=status.css rel=stylesheet><script>
   function init() {
     if (location.search == '?slow-browser')
       return;
     var configUI = document.createElement('div');
     configUI.id = 'configUI';
     document.body.appendChild(configUI);
     load('reviewer.js');
     if (document.documentElement.className == "" || document.documentElement.className == "split index")
       load('toc.js');
     load('styler.js');
     load('updater.js');
     load('dfn.js');
     load('status.js');
     if (getCookie('profile') == '1')
       document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
   }
  </script><body class=draft onload=init()>

  <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
   <hgroup><h1>HTML5 (including next generation additions still in development)</h1>
    <h2 class="no-num no-toc">Draft Standard &mdash; 18 May 2010</h2>
   </hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
   <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
   <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
   <dl><dt>Multiple-page version:</dt>
    <dd><strong><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/>http://whatwg.org/html5</a></strong></dd>
    <dt>One-page version:</dt>
    <dd><a href=http://www.whatwg.org/specs/web-apps/current-work/>http://www.whatwg.org/specs/web-apps/current-work/</a></dd>
    <dt>PDF print versions:</dt>
    <dd>A4: <a href=http://www.whatwg.org/specs/web-apps/current-work/html5-a4.pdf>http://www.whatwg.org/specs/web-apps/current-work/html5-a4.pdf</a></dd>
    <dd>Letter: <a href=http://www.whatwg.org/specs/web-apps/current-work/html5-letter.pdf>http://www.whatwg.org/specs/web-apps/current-work/html5-letter.pdf</a></dd>
    <dt>Version history:</dt>
    <dd>Twitter messages (non-editorial changes only): <a href=http://twitter.com/WHATWG>http://twitter.com/WHATWG</a></dd>
    <dd>Commit-Watchers mailing list: <a href=http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org>http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org</a></dd>
    <dd>Interactive Web interface: <a href=http://html5.org/tools/web-apps-tracker>http://html5.org/tools/web-apps-tracker</a></dd>
    <dd>Subversion interface: <a href=http://svn.whatwg.org/>http://svn.whatwg.org/</a></dd>
    <dt>Issues:</dt>
    <dd>To view the open bugs: <a href="http://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;short_desc_type=allwordssubstr&amp;short_desc=&amp;product=HTML+WG&amp;long_desc_type=allwordssubstr&amp;long_desc=&amp;bug_file_loc_type=allwordssubstr&amp;bug_file_loc=&amp;status_whiteboard_type=allwordssubstr&amp;status_whiteboard=&amp;keywords_type=allwords&amp;keywords=&amp;bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;emailassigned_to1=1&amp;emailtype1=exact&amp;email1=ian%40hixie.ch&amp;emailtype2=substring&amp;email2=&amp;bugidtype=include&amp;bug_id=&amp;votes=&amp;chfieldfrom=&amp;chfieldto=Now&amp;chfieldvalue=&amp;cmdtype=doit&amp;order=Reuse+same+sort+as+last+time&amp;field0-0-0=noop&amp;type0-0-0=noop&amp;value0-0-0=">HTML5 bug list</a></dd>
    <dd>To file bugs, use the "submit review comments" feature at the bottom of the window</dd>
    <dd>To send feedback by e-mail: <a href=http://www.whatwg.org/mailing-list>whatwg@whatwg.org</a></dd>
    <dd>To view and vote on e-mail feedback: <a href=http://www.whatwg.org/issues/>http://www.whatwg.org/issues/</a></dd>
    <dt>Editor:</dt>
    <dd>Ian Hickson, Google, ian@hixie.ch</dd>
   </dl><p class=copyright>&copy; Copyright 2004-2010 Apple Computer, Inc.,
   Mozilla Foundation, and Opera Software ASA.</p>
   <p class=copyright>You are granted a license to use, reproduce
   and create derivative works of this document.</p>
  </header><hr><h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>This specification evolves HTML and its related APIs to ease the
  authoring of Web-based applications. The most recent additions
  include a <code><a href=#devices>device</a></code> element to enable video conferencing,
  as well as all the features added as part of the earlier HTML5
  effort.</p>


  <h2 class="no-num no-toc" id=status>Status of this document</h2>

  <p><strong>This is a work in progress!</strong> This document is
  changing on a daily if not hourly basis in response to comments and
  as a general part of its development process. Comments are very
  welcome, please send them to <a href=mailto:whatwg@whatwg.org>whatwg@whatwg.org</a>. Thank
  you.</p>

  <p><a href=http://www.whatwg.org/issues/>Outstanding feedback</a>
  is tracked; all e-mails sent to the list above receive a reply. The
  level of outstanding feedback is <a href=http://www.whatwg.org/issues/data.html>charted</a> to allow
  progress to be evaluated.</p>

  <p>Implementors should be aware that this specification is not
  stable. <strong>Implementors who are not taking part in the
  discussions are likely to find the specification changing out from
  under them in incompatible ways.</strong> Vendors interested in
  implementing this specification before it eventually reaches the
  call for implementations should join the <a href=/mailing-list>WHATWG mailing list</a> and take part in the
  discussions.</p>

  <p>This specification is intended to replace (be the new version of)
  what was previously the HTML5, HTML4, XHTML1, and DOM2 HTML
  specifications.</p>



  <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  
<!--begin-toc-->
<ol class=toc>
 <li><a href=#introduction><span class=secno>1 </span>Introduction</a>
  <ol>
   <li><a href=#is-this-html5?><span class=secno>1.1 </span>Is this HTML5?</a></li>
   <li><a href=#background><span class=secno>1.2 </span>Background</a></li>
   <li><a href=#audience><span class=secno>1.3 </span>Audience</a></li>
   <li><a href=#scope><span class=secno>1.4 </span>Scope</a></li>
   <li><a href=#history-1><span class=secno>1.5 </span>History</a></li>
   <li><a href=#design-notes><span class=secno>1.6 </span>Design notes</a>
    <ol>
     <li><a href=#serializability-of-script-execution><span class=secno>1.6.1 </span>Serializability of script execution</a></li>
     <li><a href=#compliance-with-other-specifications><span class=secno>1.6.2 </span>Compliance with other specifications</a></ol></li>
   <li><a href=#html-vs-xhtml><span class=secno>1.7 </span>HTML vs XHTML</a></li>
   <li><a href=#structure-of-this-specification><span class=secno>1.8 </span>Structure of this specification</a>
    <ol>
     <li><a href=#how-to-read-this-specification><span class=secno>1.8.1 </span>How to read this specification</a></li>
     <li><a href=#typographic-conventions><span class=secno>1.8.2 </span>Typographic conventions</a></ol></li>
   <li><a href=#a-quick-introduction-to-html><span class=secno>1.9 </span>A quick introduction to HTML</a></li>
   <li><a href=#conformance-requirements-for-authors><span class=secno>1.10 </span>Conformance requirements for authors</a>
    <ol>
     <li><a href=#presentational-markup><span class=secno>1.10.1 </span>Presentational markup</a></li>
     <li><a href=#syntax-errors><span class=secno>1.10.2 </span>Syntax errors</a></li>
     <li><a href=#restrictions-on-content-models-and-on-attribute-values><span class=secno>1.10.3 </span>Restrictions on content models and on attribute values</a></ol></li>
   <li><a href=#recommended-reading><span class=secno>1.11 </span>Recommended reading</a></ol></li>
 <li><a href=#infrastructure><span class=secno>2 </span>Common infrastructure</a>
  <ol>
   <li><a href=#terminology><span class=secno>2.1 </span>Terminology</a>
    <ol>
     <li><a href=#resources><span class=secno>2.1.1 </span>Resources</a></li>
     <li><a href=#xml><span class=secno>2.1.2 </span>XML</a></li>
     <li><a href=#dom-trees><span class=secno>2.1.3 </span>DOM trees</a></li>
     <li><a href=#scripting-0><span class=secno>2.1.4 </span>Scripting</a></li>
     <li><a href=#plugins><span class=secno>2.1.5 </span>Plugins</a></li>
     <li><a href=#character-encodings><span class=secno>2.1.6 </span>Character encodings</a></ol></li>
   <li><a href=#conformance-requirements><span class=secno>2.2 </span>Conformance requirements</a>
    <ol>
     <li><a href=#dependencies><span class=secno>2.2.1 </span>Dependencies</a></li>
     <li><a href=#extensibility><span class=secno>2.2.2 </span>Extensibility</a></ol></li>
   <li><a href=#case-sensitivity-and-string-comparison><span class=secno>2.3 </span>Case-sensitivity and string comparison</a></li>
   <li><a href=#common-microsyntaxes><span class=secno>2.4 </span>Common microsyntaxes</a>
    <ol>
     <li><a href=#common-parser-idioms><span class=secno>2.4.1 </span>Common parser idioms</a></li>
     <li><a href=#boolean-attributes><span class=secno>2.4.2 </span>Boolean attributes</a></li>
     <li><a href=#keywords-and-enumerated-attributes><span class=secno>2.4.3 </span>Keywords and enumerated attributes</a></li>
     <li><a href=#numbers><span class=secno>2.4.4 </span>Numbers</a>
      <ol>
       <li><a href=#non-negative-integers><span class=secno>2.4.4.1 </span>Non-negative integers</a></li>
       <li><a href=#signed-integers><span class=secno>2.4.4.2 </span>Signed integers</a></li>
       <li><a href=#real-numbers><span class=secno>2.4.4.3 </span>Real numbers</a></li>
       <li><a href=#percentages-and-dimensions><span class=secno>2.4.4.4 </span>Percentages and lengths</a></li>
       <li><a href=#lists-of-integers><span class=secno>2.4.4.5 </span>Lists of integers</a></li>
       <li><a href=#lists-of-dimensions><span class=secno>2.4.4.6 </span>Lists of dimensions</a></ol></li>
     <li><a href=#dates-and-times><span class=secno>2.4.5 </span>Dates and times</a>
      <ol>
       <li><a href=#months><span class=secno>2.4.5.1 </span>Months</a></li>
       <li><a href=#dates><span class=secno>2.4.5.2 </span>Dates</a></li>
       <li><a href=#times><span class=secno>2.4.5.3 </span>Times</a></li>
       <li><a href=#local-dates-and-times><span class=secno>2.4.5.4 </span>Local dates and times</a></li>
       <li><a href=#global-dates-and-times><span class=secno>2.4.5.5 </span>Global dates and times</a></li>
       <li><a href=#weeks><span class=secno>2.4.5.6 </span>Weeks</a></li>
       <li><a href=#vaguer-moments-in-time><span class=secno>2.4.5.7 </span>Vaguer moments in time</a></ol></li>
     <li><a href=#colors><span class=secno>2.4.6 </span>Colors</a></li>
     <li><a href=#space-separated-tokens><span class=secno>2.4.7 </span>Space-separated tokens</a></li>
     <li><a href=#comma-separated-tokens><span class=secno>2.4.8 </span>Comma-separated tokens</a></li>
     <li><a href=#syntax-references><span class=secno>2.4.9 </span>References</a></li>
     <li><a href=#mq><span class=secno>2.4.10 </span>Media queries</a></ol></li>
   <li><a href=#urls><span class=secno>2.5 </span>URLs</a>
    <ol>
     <li><a href=#terminology-0><span class=secno>2.5.1 </span>Terminology</a></li>
     <li><a href=#dynamic-changes-to-base-urls><span class=secno>2.5.2 </span>Dynamic changes to base URLs</a></li>
     <li><a href=#interfaces-for-url-manipulation><span class=secno>2.5.3 </span>Interfaces for URL manipulation</a></ol></li>
   <li><a href=#fetching-resources><span class=secno>2.6 </span>Fetching resources</a>
    <ol>
     <li><a href=#concept-http-equivalent><span class=secno>2.6.1 </span>Protocol concepts</a></li>
     <li><a href=#encrypted-http-and-related-security-concerns><span class=secno>2.6.2 </span>Encrypted HTTP and related security concerns</a></li>
     <li><a href=#content-type-sniffing><span class=secno>2.6.3 </span>Determining the type of a resource</a></ol></li>
   <li><a href=#common-dom-interfaces><span class=secno>2.7 </span>Common DOM interfaces</a>
    <ol>
     <li><a href=#reflecting-content-attributes-in-idl-attributes><span class=secno>2.7.1 </span>Reflecting content attributes in IDL attributes</a></li>
     <li><a href=#collections-0><span class=secno>2.7.2 </span>Collections</a>
      <ol>
       <li><a href=#htmlcollection-0><span class=secno>2.7.2.1 </span>HTMLCollection</a></li>
       <li><a href=#htmlallcollection-0><span class=secno>2.7.2.2 </span>HTMLAllCollection</a></li>
       <li><a href=#htmlformcontrolscollection-0><span class=secno>2.7.2.3 </span>HTMLFormControlsCollection</a></li>
       <li><a href=#htmloptionscollection-0><span class=secno>2.7.2.4 </span>HTMLOptionsCollection</a></li>
       <li><a href=#htmlpropertiescollection-0><span class=secno>2.7.2.5 </span>HTMLPropertiesCollection</a></ol></li>
     <li><a href=#domtokenlist-0><span class=secno>2.7.3 </span>DOMTokenList</a></li>
     <li><a href=#domsettabletokenlist-0><span class=secno>2.7.4 </span>DOMSettableTokenList</a></li>
     <li><a href=#safe-passing-of-structured-data><span class=secno>2.7.5 </span>Safe passing of structured data</a></li>
     <li><a href=#domstringmap-0><span class=secno>2.7.6 </span>DOMStringMap</a></li>
     <li><a href=#dom-feature-strings><span class=secno>2.7.7 </span>DOM feature strings</a></li>
     <li><a href=#exceptions><span class=secno>2.7.8 </span>Exceptions</a></li>
     <li><a href=#garbage-collection><span class=secno>2.7.9 </span>Garbage collection</a></ol></li>
   <li><a href=#namespaces><span class=secno>2.8 </span>Namespaces</a></ol></li>
 <li><a href=#dom><span class=secno>3 </span>Semantics, structure, and APIs of HTML documents</a>
  <ol>
   <li><a href=#documents><span class=secno>3.1 </span>Documents</a>
    <ol>
     <li><a href=#documents-in-the-dom><span class=secno>3.1.1 </span>Documents in the DOM</a></li>
     <li><a href=#security-document><span class=secno>3.1.2 </span>Security</a></li>
     <li><a href=#resource-metadata-management><span class=secno>3.1.3 </span>Resource metadata management</a></li>
     <li><a href=#dom-tree-accessors><span class=secno>3.1.4 </span>DOM tree accessors</a></li>
     <li><a href=#creating-documents><span class=secno>3.1.5 </span>Creating documents</a></ol></li>
   <li><a href=#elements><span class=secno>3.2 </span>Elements</a>
    <ol>
     <li><a href=#semantics-0><span class=secno>3.2.1 </span>Semantics</a></li>
     <li><a href=#elements-in-the-dom><span class=secno>3.2.2 </span>Elements in the DOM</a></li>
     <li><a href=#global-attributes><span class=secno>3.2.3 </span>Global attributes</a>
      <ol>
       <li><a href=#the-id-attribute><span class=secno>3.2.3.1 </span>The <code>id</code> attribute</a></li>
       <li><a href=#the-title-attribute><span class=secno>3.2.3.2 </span>The <code>title</code> attribute</a></li>
       <li><a href=#the-lang-and-xml:lang-attributes><span class=secno>3.2.3.3 </span>The <code title=attr-lang>lang</code> and <code title=attr-xml-lang>xml:lang</code> attributes</a></li>
       <li><a href=#the-xml:base-attribute-(xml-only)><span class=secno>3.2.3.4 </span>The <code>xml:base</code>
  attribute (XML only)</a></li>
       <li><a href=#the-dir-attribute><span class=secno>3.2.3.5 </span>The <code>dir</code> attribute</a></li>
       <li><a href=#classes><span class=secno>3.2.3.6 </span>The <code>class</code> attribute</a></li>
       <li><a href=#the-style-attribute><span class=secno>3.2.3.7 </span>The <code>style</code> attribute</a></li>
       <li><a href=#embedding-custom-non-visible-data><span class=secno>3.2.3.8 </span>Embedding custom non-visible data</a></ol></li>
     <li><a href=#element-definitions><span class=secno>3.2.4 </span>Element definitions</a>
      <ol>
       <li><a href=#attributes><span class=secno>3.2.4.1 </span>Attributes</a></ol></li>
     <li><a href=#content-models><span class=secno>3.2.5 </span>Content models</a>
      <ol>
       <li><a href=#kinds-of-content><span class=secno>3.2.5.1 </span>Kinds of content</a>
        <ol>
         <li><a href=#metadata-content-0><span class=secno>3.2.5.1.1 </span>Metadata content</a></li>
         <li><a href=#flow-content-0><span class=secno>3.2.5.1.2 </span>Flow content</a></li>
         <li><a href=#sectioning-content-0><span class=secno>3.2.5.1.3 </span>Sectioning content</a></li>
         <li><a href=#heading-content-0><span class=secno>3.2.5.1.4 </span>Heading content</a></li>
         <li><a href=#phrasing-content-0><span class=secno>3.2.5.1.5 </span>Phrasing content</a></li>
         <li><a href=#embedded-content-0><span class=secno>3.2.5.1.6 </span>Embedded content</a></li>
         <li><a href=#interactive-content-0><span class=secno>3.2.5.1.7 </span>Interactive content</a></ol></li>
       <li><a href=#transparent-content-models><span class=secno>3.2.5.2 </span>Transparent content models</a></li>
       <li><a href=#paragraphs><span class=secno>3.2.5.3 </span>Paragraphs</a></ol></li>
     <li><a href=#annotations-for-assistive-technology-products-(aria)><span class=secno>3.2.6 </span>Annotations for assistive technology products (ARIA)</a></ol></li>
   <li><a href=#apis-in-html-documents><span class=secno>3.3 </span>APIs in HTML documents</a></li>
   <li><a href=#interactions-with-xpath-and-xslt><span class=secno>3.4 </span>Interactions with XPath and XSLT</a></li>
   <li><a href=#dynamic-markup-insertion><span class=secno>3.5 </span>Dynamic markup insertion</a>
    <ol>
     <li><a href=#opening-the-input-stream><span class=secno>3.5.1 </span>Opening the input stream</a></li>
     <li><a href=#closing-the-input-stream><span class=secno>3.5.2 </span>Closing the input stream</a></li>
     <li><a href=#document.write()><span class=secno>3.5.3 </span><code title=dom-document-write>document.write()</code></a></li>
     <li><a href=#document.writeln()><span class=secno>3.5.4 </span><code title=dom-document-writeln>document.writeln()</code></a></li>
     <li><a href=#innerhtml><span class=secno>3.5.5 </span><code title=dom-innerHTML>innerHTML</code></a></li>
     <li><a href=#outerhtml><span class=secno>3.5.6 </span><code title=dom-outerHTML>outerHTML</code></a></li>
     <li><a href=#insertadjacenthtml()><span class=secno>3.5.7 </span><code title=dom-insertAdjacentHTML>insertAdjacentHTML()</code></a></ol></ol></li>
 <li><a href=#semantics><span class=secno>4 </span>The elements of HTML</a>
  <ol>
   <li><a href=#the-root-element><span class=secno>4.1 </span>The root element</a>
    <ol>
     <li><a href=#the-html-element-0><span class=secno>4.1.1 </span>The <code>html</code> element</a></ol></li>
   <li><a href=#document-metadata><span class=secno>4.2 </span>Document metadata</a>
    <ol>
     <li><a href=#the-head-element-0><span class=secno>4.2.1 </span>The <code>head</code> element</a></li>
     <li><a href=#the-title-element-0><span class=secno>4.2.2 </span>The <code>title</code> element</a></li>
     <li><a href=#the-base-element><span class=secno>4.2.3 </span>The <code>base</code> element</a></li>
     <li><a href=#the-link-element><span class=secno>4.2.4 </span>The <code>link</code> element</a></li>
     <li><a href=#meta><span class=secno>4.2.5 </span>The <code>meta</code> element</a>
      <ol>
       <li><a href=#standard-metadata-names><span class=secno>4.2.5.1 </span>Standard metadata names</a></li>
       <li><a href=#other-metadata-names><span class=secno>4.2.5.2 </span>Other metadata names</a></li>
       <li><a href=#pragma-directives><span class=secno>4.2.5.3 </span>Pragma directives</a></li>
       <li><a href=#other-pragma-directives><span class=secno>4.2.5.4 </span>Other pragma directives</a></li>
       <li><a href=#charset><span class=secno>4.2.5.5 </span>Specifying the document's character encoding</a></ol></li>
     <li><a href=#the-style-element><span class=secno>4.2.6 </span>The <code>style</code> element</a></li>
     <li><a href=#styling><span class=secno>4.2.7 </span>Styling</a></ol></li>
   <li><a href=#scripting-1><span class=secno>4.3 </span>Scripting</a>
    <ol>
     <li><a href=#script><span class=secno>4.3.1 </span>The <code>script</code> element</a>
      <ol>
       <li><a href=#scriptingLanguages><span class=secno>4.3.1.1 </span>Scripting languages</a></li>
       <li><a href=#restrictions-for-contents-of-script-elements><span class=secno>4.3.1.2 </span>Restrictions for contents of <code>script</code> elements</a></li>
       <li><a href=#inline-documentation-for-external-scripts><span class=secno>4.3.1.3 </span>Inline documentation for external scripts</a></ol></li>
     <li><a href=#the-noscript-element><span class=secno>4.3.2 </span>The <code>noscript</code> element</a></ol></li>
   <li><a href=#sections><span class=secno>4.4 </span>Sections</a>
    <ol>
     <li><a href=#the-body-element-0><span class=secno>4.4.1 </span>The <code>body</code> element</a></li>
     <li><a href=#the-section-element><span class=secno>4.4.2 </span>The <code>section</code> element</a></li>
     <li><a href=#the-nav-element><span class=secno>4.4.3 </span>The <code>nav</code> element</a></li>
     <li><a href=#the-article-element><span class=secno>4.4.4 </span>The <code>article</code> element</a></li>
     <li><a href=#the-aside-element><span class=secno>4.4.5 </span>The <code>aside</code> element</a></li>
     <li><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><span class=secno>4.4.6 </span>The <code>h1</code>, <code>h2</code>,
  <code>h3</code>, <code>h4</code>,
  <code>h5</code>, and <code>h6</code>
  elements</a></li>
     <li><a href=#the-hgroup-element><span class=secno>4.4.7 </span>The <code>hgroup</code> element</a></li>
     <li><a href=#the-header-element><span class=secno>4.4.8 </span>The <code>header</code> element</a></li>
     <li><a href=#the-footer-element><span class=secno>4.4.9 </span>The <code>footer</code> element</a></li>
     <li><a href=#the-address-element><span class=secno>4.4.10 </span>The <code>address</code> element</a></li>
     <li><a href=#headings-and-sections><span class=secno>4.4.11 </span>Headings and sections</a>
      <ol>
       <li><a href=#outlines><span class=secno>4.4.11.1 </span>Creating an outline</a></ol></ol></li>
   <li><a href=#grouping-content><span class=secno>4.5 </span>Grouping content</a>
    <ol>
     <li><a href=#the-p-element><span class=secno>4.5.1 </span>The <code>p</code> element</a></li>
     <li><a href=#the-hr-element><span class=secno>4.5.2 </span>The <code>hr</code> element</a></li>
     <li><a href=#the-pre-element><span class=secno>4.5.3 </span>The <code>pre</code> element</a></li>
     <li><a href=#the-blockquote-element><span class=secno>4.5.4 </span>The <code>blockquote</code> element</a></li>
     <li><a href=#the-ol-element><span class=secno>4.5.5 </span>The <code>ol</code> element</a></li>
     <li><a href=#the-ul-element><span class=secno>4.5.6 </span>The <code>ul</code> element</a></li>
     <li><a href=#the-li-element><span class=secno>4.5.7 </span>The <code>li</code> element</a></li>
     <li><a href=#the-dl-element><span class=secno>4.5.8 </span>The <code>dl</code> element</a></li>
     <li><a href=#the-dt-element><span class=secno>4.5.9 </span>The <code>dt</code> element</a></li>
     <li><a href=#the-dd-element><span class=secno>4.5.10 </span>The <code>dd</code> element</a></li>
     <li><a href=#the-figure-element><span class=secno>4.5.11 </span>The <code>figure</code> element</a></li>
     <li><a href=#the-figcaption-element><span class=secno>4.5.12 </span>The <code>figcaption</code> element</a></li>
     <li><a href=#the-div-element><span class=secno>4.5.13 </span>The <code>div</code> element</a></ol></li>
   <li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
    <ol>
     <li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
     <li><a href=#the-em-element><span class=secno>4.6.2 </span>The <code>em</code> element</a></li>
     <li><a href=#the-strong-element><span class=secno>4.6.3 </span>The <code>strong</code> element</a></li>
     <li><a href=#the-small-element><span class=secno>4.6.4 </span>The <code>small</code> element</a></li>
     <li><a href=#the-cite-element><span class=secno>4.6.5 </span>The <code>cite</code> element</a></li>
     <li><a href=#the-q-element><span class=secno>4.6.6 </span>The <code>q</code> element</a></li>
     <li><a href=#the-dfn-element><span class=secno>4.6.7 </span>The <code>dfn</code> element</a></li>
     <li><a href=#the-abbr-element><span class=secno>4.6.8 </span>The <code>abbr</code> element</a></li>
     <li><a href=#the-time-element><span class=secno>4.6.9 </span>The <code>time</code> element</a></li>
     <li><a href=#the-code-element><span class=secno>4.6.10 </span>The <code>code</code> element</a></li>
     <li><a href=#the-var-element><span class=secno>4.6.11 </span>The <code>var</code> element</a></li>
     <li><a href=#the-samp-element><span class=secno>4.6.12 </span>The <code>samp</code> element</a></li>
     <li><a href=#the-kbd-element><span class=secno>4.6.13 </span>The <code>kbd</code> element</a></li>
     <li><a href=#the-sub-and-sup-elements><span class=secno>4.6.14 </span>The <code>sub</code> and <code>sup</code> elements</a></li>
     <li><a href=#the-i-element><span class=secno>4.6.15 </span>The <code>i</code> element</a></li>
     <li><a href=#the-b-element><span class=secno>4.6.16 </span>The <code>b</code> element</a></li>
     <li><a href=#the-mark-element><span class=secno>4.6.17 </span>The <code>mark</code> element</a></li>
     <li><a href=#the-ruby-element><span class=secno>4.6.18 </span>The <code>ruby</code> element</a></li>
     <li><a href=#the-rt-element><span class=secno>4.6.19 </span>The <code>rt</code> element</a></li>
     <li><a href=#the-rp-element><span class=secno>4.6.20 </span>The <code>rp</code> element</a></li>
     <li><a href=#the-bdo-element><span class=secno>4.6.21 </span>The <code>bdo</code> element</a></li>
     <li><a href=#the-span-element><span class=secno>4.6.22 </span>The <code>span</code> element</a></li>
     <li><a href=#the-br-element><span class=secno>4.6.23 </span>The <code>br</code> element</a></li>
     <li><a href=#the-wbr-element><span class=secno>4.6.24 </span>The <code>wbr</code> element</a></li>
     <li><a href=#usage-summary><span class=secno>4.6.25 </span>Usage summary</a></ol></li>
   <li><a href=#edits><span class=secno>4.7 </span>Edits</a>
    <ol>
     <li><a href=#the-ins-element><span class=secno>4.7.1 </span>The <code>ins</code> element</a></li>
     <li><a href=#the-del-element><span class=secno>4.7.2 </span>The <code>del</code> element</a></li>
     <li><a href=#attributes-common-to-ins-and-del-elements><span class=secno>4.7.3 </span>Attributes common to <code>ins</code> and <code>del</code> elements</a></li>
     <li><a href=#edits-and-paragraphs><span class=secno>4.7.4 </span>Edits and paragraphs</a></li>
     <li><a href=#edits-and-lists><span class=secno>4.7.5 </span>Edits and lists</a></ol></li>
   <li><a href=#embedded-content-1><span class=secno>4.8 </span>Embedded content</a>
    <ol>
     <li><a href=#the-img-element><span class=secno>4.8.1 </span>The <code>img</code> element</a>
      <ol>
       <li><a href=#alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</a>
        <ol>
         <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</a></li>
         <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
         <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
         <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
         <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</a></li>
         <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</a></li>
         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</a></li>
         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</a></li>
         <li><a href=#a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</a></li>
         <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</a></li>
         <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
         <li><a href=#general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</a></li>
         <li><a href=#guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</a></li>
         <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
     <li><a href=#the-iframe-element><span class=secno>4.8.2 </span>The <code>iframe</code> element</a></li>
     <li><a href=#the-embed-element><span class=secno>4.8.3 </span>The <code>embed</code> element</a></li>
     <li><a href=#the-object-element><span class=secno>4.8.4 </span>The <code>object</code> element</a></li>
     <li><a href=#the-param-element><span class=secno>4.8.5 </span>The <code>param</code> element</a></li>
     <li><a href=#video><span class=secno>4.8.6 </span>The <code>video</code> element</a></li>
     <li><a href=#audio><span class=secno>4.8.7 </span>The <code>audio</code> element</a></li>
     <li><a href=#the-source-element><span class=secno>4.8.8 </span>The <code>source</code> element</a></li>
     <li><a href=#the-track-element><span class=secno>4.8.9 </span>The <code>track</code> element</a></li>
     <li><a href=#media-elements><span class=secno>4.8.10 </span>Media elements</a>
      <ol>
       <li><a href=#error-codes><span class=secno>4.8.10.1 </span>Error codes</a></li>
       <li><a href=#location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</a></li>
       <li><a href=#mime-types><span class=secno>4.8.10.3 </span>MIME types</a></li>
       <li><a href=#network-states><span class=secno>4.8.10.4 </span>Network states</a></li>
       <li><a href=#loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</a></li>
       <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</a></li>
       <li><a href=#the-ready-states><span class=secno>4.8.10.7 </span>The ready states</a></li>
       <li><a href=#playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</a></li>
       <li><a href=#seeking><span class=secno>4.8.10.9 </span>Seeking</a></li>
       <li><a href=#timed-tracks><span class=secno>4.8.10.10 </span>Timed tracks</a>
        <ol>
         <li><a href=#timed-track-model><span class=secno>4.8.10.10.1 </span>Timed track model</a></li>
         <li><a href=#sourcing-in-band-timed-tracks><span class=secno>4.8.10.10.2 </span>Sourcing in-band timed tracks</a></li>
         <li><a href=#sourcing-out-of-band-timed-tracks><span class=secno>4.8.10.10.3 </span>Sourcing out-of-band timed tracks</a></li>
         <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-timed-track-cues><span class=secno>4.8.10.10.4 </span>Guidelines for exposing cues in various formats as
  timed track cues</a></li>
         <li><a href=#timed-track-api><span class=secno>4.8.10.10.5 </span>Timed track API</a></li>
         <li><a href=#cue-events><span class=secno>4.8.10.10.6 </span>Event definitions</a></ol></li>
       <li><a href=#websrt><span class=secno>4.8.10.11 </span>WebSRT</a>
        <ol>
         <li><a href=#syntax-0><span class=secno>4.8.10.11.1 </span>Syntax</a></li>
         <li><a href=#parsing-0><span class=secno>4.8.10.11.2 </span>Parsing</a></ol></li>
       <li><a href=#user-interface><span class=secno>4.8.10.12 </span>User interface</a></li>
       <li><a href=#time-ranges><span class=secno>4.8.10.13 </span>Time ranges</a></li>
       <li><a href=#mediaevents><span class=secno>4.8.10.14 </span>Event summary</a></li>
       <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.15 </span>Security and privacy considerations</a></ol></li>
     <li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
      <ol>
       <li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
        <ol>
         <li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
         <li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
         <li><a href=#compositing><span class=secno>4.8.11.1.3 </span>Compositing</a></li>
         <li><a href=#colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</a></li>
         <li><a href=#line-styles><span class=secno>4.8.11.1.5 </span>Line styles</a></li>
         <li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
         <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
         <li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
         <li><a href=#focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</a></li>
         <li><a href=#text-0><span class=secno>4.8.11.1.10 </span>Text</a></li>
         <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
         <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
         <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
         <li><a href=#examples><span class=secno>4.8.11.1.14 </span>Examples</a></ol></li>
       <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
       <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
     <li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
     <li><a href=#the-area-element><span class=secno>4.8.13 </span>The <code>area</code> element</a></li>
     <li><a href=#image-maps><span class=secno>4.8.14 </span>Image maps</a>
      <ol>
       <li><a href=#authoring><span class=secno>4.8.14.1 </span>Authoring</a></li>
       <li><a href=#processing-model><span class=secno>4.8.14.2 </span>Processing model</a></ol></li>
     <li><a href=#mathml><span class=secno>4.8.15 </span>MathML</a></li>
     <li><a href=#svg-0><span class=secno>4.8.16 </span>SVG</a></li>
     <li><a href=#dimension-attributes><span class=secno>4.8.17 </span>Dimension attributes</a></ol></li>
   <li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
    <ol>
     <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
     <li><a href=#the-caption-element><span class=secno>4.9.2 </span>The <code>caption</code> element</a></li>
     <li><a href=#the-colgroup-element><span class=secno>4.9.3 </span>The <code>colgroup</code> element</a></li>
     <li><a href=#the-col-element><span class=secno>4.9.4 </span>The <code>col</code> element</a></li>
     <li><a href=#the-tbody-element><span class=secno>4.9.5 </span>The <code>tbody</code> element</a></li>
     <li><a href=#the-thead-element><span class=secno>4.9.6 </span>The <code>thead</code> element</a></li>
     <li><a href=#the-tfoot-element><span class=secno>4.9.7 </span>The <code>tfoot</code> element</a></li>
     <li><a href=#the-tr-element><span class=secno>4.9.8 </span>The <code>tr</code> element</a></li>
     <li><a href=#the-td-element><span class=secno>4.9.9 </span>The <code>td</code> element</a></li>
     <li><a href=#the-th-element><span class=secno>4.9.10 </span>The <code>th</code> element</a></li>
     <li><a href=#attributes-common-to-td-and-th-elements><span class=secno>4.9.11 </span>Attributes common to <code>td</code> and <code>th</code> elements</a></li>
     <li><a href=#processing-model-0><span class=secno>4.9.12 </span>Processing model</a>
      <ol>
       <li><a href=#forming-a-table><span class=secno>4.9.12.1 </span>Forming a table</a></li>
       <li><a href=#header-and-data-cell-semantics><span class=secno>4.9.12.2 </span>Forming relationships between data cells and header cells</a></ol></li>
     <li><a href=#examples-0><span class=secno>4.9.13 </span>Examples</a></ol></li>
   <li><a href=#forms><span class=secno>4.10 </span>Forms</a>
    <ol>
     <li><a href=#introduction-0><span class=secno>4.10.1 </span>Introduction</a>
      <ol>
       <li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
       <li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
       <li><a href=#configuring-a-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring a form to communicate with a server</a></li>
       <li><a href=#client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</a></ol></li>
     <li><a href=#categories><span class=secno>4.10.2 </span>Categories</a></li>
     <li><a href=#the-form-element><span class=secno>4.10.3 </span>The <code>form</code> element</a></li>
     <li><a href=#the-fieldset-element><span class=secno>4.10.4 </span>The <code>fieldset</code> element</a></li>
     <li><a href=#the-legend-element><span class=secno>4.10.5 </span>The <code>legend</code> element</a></li>
     <li><a href=#the-label-element><span class=secno>4.10.6 </span>The <code>label</code> element</a></li>
     <li><a href=#the-input-element><span class=secno>4.10.7 </span>The <code>input</code> element</a>
      <ol>
       <li><a href=#states-of-the-type-attribute><span class=secno>4.10.7.1 </span>States of the <code title=attr-input-type>type</code> attribute</a>
        <ol>
         <li><a href=#hidden-state><span class=secno>4.10.7.1.1 </span>Hidden state</a></li>
         <li><a href=#text-state-and-search-state><span class=secno>4.10.7.1.2 </span>Text state and Search state</a></li>
         <li><a href=#telephone-state><span class=secno>4.10.7.1.3 </span>Telephone state</a></li>
         <li><a href=#url-state><span class=secno>4.10.7.1.4 </span>URL state</a></li>
         <li><a href=#e-mail-state><span class=secno>4.10.7.1.5 </span>E-mail state</a></li>
         <li><a href=#password-state><span class=secno>4.10.7.1.6 </span>Password state</a></li>
         <li><a href=#date-and-time-state><span class=secno>4.10.7.1.7 </span>Date and Time state</a></li>
         <li><a href=#date-state><span class=secno>4.10.7.1.8 </span>Date state</a></li>
         <li><a href=#month-state><span class=secno>4.10.7.1.9 </span>Month state</a></li>
         <li><a href=#week-state><span class=secno>4.10.7.1.10 </span>Week state</a></li>
         <li><a href=#time-state><span class=secno>4.10.7.1.11 </span>Time state</a></li>
         <li><a href=#local-date-and-time-state><span class=secno>4.10.7.1.12 </span>Local Date and Time state</a></li>
         <li><a href=#number-state><span class=secno>4.10.7.1.13 </span>Number state</a></li>
         <li><a href=#range-state><span class=secno>4.10.7.1.14 </span>Range state</a></li>
         <li><a href=#color-state><span class=secno>4.10.7.1.15 </span>Color state</a></li>
         <li><a href=#checkbox-state><span class=secno>4.10.7.1.16 </span>Checkbox state</a></li>
         <li><a href=#radio-button-state><span class=secno>4.10.7.1.17 </span>Radio Button state</a></li>
         <li><a href=#file-upload-state><span class=secno>4.10.7.1.18 </span>File Upload state</a></li>
         <li><a href=#submit-button-state><span class=secno>4.10.7.1.19 </span>Submit Button state</a></li>
         <li><a href=#image-button-state><span class=secno>4.10.7.1.20 </span>Image Button state</a></li>
         <li><a href=#reset-button-state><span class=secno>4.10.7.1.21 </span>Reset Button state</a></li>
         <li><a href=#button-state><span class=secno>4.10.7.1.22 </span>Button state</a></ol></li>
       <li><a href=#common-input-element-attributes><span class=secno>4.10.7.2 </span>Common <code>input</code> element attributes</a>
        <ol>
         <li><a href=#the-autocomplete-attribute><span class=secno>4.10.7.2.1 </span>The <code title=attr-input-autocomplete>autocomplete</code> attribute</a></li>
         <li><a href=#the-list-attribute><span class=secno>4.10.7.2.2 </span>The <code title=attr-input-list>list</code> attribute</a></li>
         <li><a href=#the-readonly-attribute><span class=secno>4.10.7.2.3 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
         <li><a href=#the-size-attribute><span class=secno>4.10.7.2.4 </span>The <code title=attr-input-size>size</code> attribute</a></li>
         <li><a href=#the-required-attribute><span class=secno>4.10.7.2.5 </span>The <code title=attr-input-required>required</code> attribute</a></li>
         <li><a href=#the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
         <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.2.7 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
         <li><a href=#the-pattern-attribute><span class=secno>4.10.7.2.8 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
         <li><a href=#the-min-and-max-attributes><span class=secno>4.10.7.2.9 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
         <li><a href=#the-step-attribute><span class=secno>4.10.7.2.10 </span>The <code title=attr-input-step>step</code> attribute</a></li>
         <li><a href=#the-placeholder-attribute><span class=secno>4.10.7.2.11 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
       <li><a href=#common-input-element-apis><span class=secno>4.10.7.3 </span>Common <code>input</code> element APIs</a></li>
       <li><a href=#common-event-behaviors><span class=secno>4.10.7.4 </span>Common event behaviors</a></ol></li>
     <li><a href=#the-button-element><span class=secno>4.10.8 </span>The <code>button</code> element</a></li>
     <li><a href=#the-select-element><span class=secno>4.10.9 </span>The <code>select</code> element</a></li>
     <li><a href=#the-datalist-element><span class=secno>4.10.10 </span>The <code>datalist</code> element</a></li>
     <li><a href=#the-optgroup-element><span class=secno>4.10.11 </span>The <code>optgroup</code> element</a></li>
     <li><a href=#the-option-element><span class=secno>4.10.12 </span>The <code>option</code> element</a></li>
     <li><a href=#the-textarea-element><span class=secno>4.10.13 </span>The <code>textarea</code> element</a></li>
     <li><a href=#the-keygen-element><span class=secno>4.10.14 </span>The <code>keygen</code> element</a></li>
     <li><a href=#the-output-element><span class=secno>4.10.15 </span>The <code>output</code> element</a></li>
     <li><a href=#the-progress-element><span class=secno>4.10.16 </span>The <code>progress</code> element</a></li>
     <li><a href=#the-meter-element><span class=secno>4.10.17 </span>The <code>meter</code> element</a></li>
     <li><a href=#association-of-controls-and-forms><span class=secno>4.10.18 </span>Association of controls and forms</a></li>
     <li><a href=#attributes-common-to-form-controls><span class=secno>4.10.19 </span>Attributes common to form controls</a>
      <ol>
       <li><a href=#naming-form-controls><span class=secno>4.10.19.1 </span>Naming form controls</a></li>
       <li><a href=#enabling-and-disabling-form-controls><span class=secno>4.10.19.2 </span>Enabling and disabling form controls</a></li>
       <li><a href="#a-form-control's-value"><span class=secno>4.10.19.3 </span>A form control's value</a></li>
       <li><a href=#autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</a></li>
       <li><a href=#limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</a></li>
       <li><a href=#form-submission-0><span class=secno>4.10.19.6 </span>Form submission</a></ol></li>
     <li><a href=#constraints><span class=secno>4.10.20 </span>Constraints</a>
      <ol>
       <li><a href=#definitions><span class=secno>4.10.20.1 </span>Definitions</a></li>
       <li><a href=#constraint-validation><span class=secno>4.10.20.2 </span>Constraint validation</a></li>
       <li><a href=#the-constraint-validation-api><span class=secno>4.10.20.3 </span>The constraint validation API</a></li>
       <li><a href=#security-forms><span class=secno>4.10.20.4 </span>Security</a></ol></li>
     <li><a href=#form-submission><span class=secno>4.10.21 </span>Form submission</a>
      <ol>
       <li><a href=#introduction-1><span class=secno>4.10.21.1 </span>Introduction</a></li>
       <li><a href=#implicit-submission><span class=secno>4.10.21.2 </span>Implicit submission</a></li>
       <li><a href=#form-submission-algorithm><span class=secno>4.10.21.3 </span>Form submission algorithm</a></li>
       <li><a href=#url-encoded-form-data><span class=secno>4.10.21.4 </span>URL-encoded form data</a></li>
       <li><a href=#multipart-form-data><span class=secno>4.10.21.5 </span>Multipart form data</a></li>
       <li><a href=#plain-text-form-data><span class=secno>4.10.21.6 </span>Plain text form data</a></ol></li>
     <li><a href=#resetting-a-form><span class=secno>4.10.22 </span>Resetting a form</a></li>
     <li><a href=#event-dispatch><span class=secno>4.10.23 </span>Event dispatch</a></ol></li>
   <li><a href=#interactive-elements><span class=secno>4.11 </span>Interactive elements</a>
    <ol>
     <li><a href=#the-details-element><span class=secno>4.11.1 </span>The <code>details</code> element</a></li>
     <li><a href=#the-summary-element><span class=secno>4.11.2 </span>The <code>summary</code> element</a></li>
     <li><a href=#the-command><span class=secno>4.11.3 </span>The <code>command</code> element</a></li>
     <li><a href=#menus><span class=secno>4.11.4 </span>The <code>menu</code> element</a>
      <ol>
       <li><a href=#menus-intro><span class=secno>4.11.4.1 </span>Introduction</a></li>
       <li><a href=#building-menus-and-toolbars><span class=secno>4.11.4.2 </span>Building menus and toolbars</a></li>
       <li><a href=#context-menus><span class=secno>4.11.4.3 </span>Context menus</a></li>
       <li><a href=#toolbars><span class=secno>4.11.4.4 </span>Toolbars</a></ol></li>
     <li><a href=#commands><span class=secno>4.11.5 </span>Commands</a>
      <ol>
       <li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span>Using the <code>a</code> element to define a command</a></li>
       <li><a href=#using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span>Using the <code>button</code> element to define a command</a></li>
       <li><a href=#using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span>Using the <code>input</code> element to define a command</a></li>
       <li><a href=#using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span>Using the <code>option</code> element to define a command</a></li>
       <li><a href=#using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <code>command</code> element to define
  a command</a></li>
       <li><a href=#using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.6 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</a></li>
       <li><a href=#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.7 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</a></li>
       <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></li>
     <li><a href=#devices><span class=secno>4.11.6 </span>The <code>device</code> element</a>
      <ol>
       <li><a href=#stream-api><span class=secno>4.11.6.1 </span>Stream API</a></li>
       <li><a href=#peer-to-peer-connections><span class=secno>4.11.6.2 </span>Peer-to-peer connections</a></ol></ol></li>
   <li><a href=#links><span class=secno>4.12 </span>Links</a>
    <ol>
     <li><a href=#hyperlink-elements><span class=secno>4.12.1 </span>Hyperlink elements</a></li>
     <li><a href=#following-hyperlinks><span class=secno>4.12.2 </span>Following hyperlinks</a>
      <ol>
       <li><a href=#hyperlink-auditing><span class=secno>4.12.2.1 </span>Hyperlink auditing</a></ol></li>
     <li><a href=#linkTypes><span class=secno>4.12.3 </span>Link types</a>
      <ol>
       <li><a href=#link-type-alternate><span class=secno>4.12.3.1 </span>Link type "<code>alternate</code>"</a></li>
       <li><a href=#link-type-archives><span class=secno>4.12.3.2 </span>Link type "<code>archives</code>"</a></li>
       <li><a href=#link-type-author><span class=secno>4.12.3.3 </span>Link type "<code>author</code>"</a></li>
       <li><a href=#link-type-bookmark><span class=secno>4.12.3.4 </span>Link type "<code>bookmark</code>"</a></li>
       <li><a href=#link-type-external><span class=secno>4.12.3.5 </span>Link type "<code>external</code>"</a></li>
       <li><a href=#link-type-help><span class=secno>4.12.3.6 </span>Link type "<code>help</code>"</a></li>
       <li><a href=#rel-icon><span class=secno>4.12.3.7 </span>Link type "<code>icon</code>"</a></li>
       <li><a href=#link-type-license><span class=secno>4.12.3.8 </span>Link type "<code>license</code>"</a></li>
       <li><a href=#link-type-nofollow><span class=secno>4.12.3.9 </span>Link type "<code>nofollow</code>"</a></li>
       <li><a href=#link-type-noreferrer><span class=secno>4.12.3.10 </span>Link type "<code>noreferrer</code>"</a></li>
       <li><a href=#link-type-pingback><span class=secno>4.12.3.11 </span>Link type "<code>pingback</code>"</a></li>
       <li><a href=#link-type-prefetch><span class=secno>4.12.3.12 </span>Link type "<code>prefetch</code>"</a></li>
       <li><a href=#link-type-search><span class=secno>4.12.3.13 </span>Link type "<code>search</code>"</a></li>
       <li><a href=#link-type-stylesheet><span class=secno>4.12.3.14 </span>Link type "<code>stylesheet</code>"</a></li>
       <li><a href=#link-type-sidebar><span class=secno>4.12.3.15 </span>Link type "<code>sidebar</code>"</a></li>
       <li><a href=#link-type-tag><span class=secno>4.12.3.16 </span>Link type "<code>tag</code>"</a></li>
       <li><a href=#hierarchical-link-types><span class=secno>4.12.3.17 </span>Hierarchical link types</a>
        <ol>
         <li><a href=#link-type-index><span class=secno>4.12.3.17.1 </span>Link type "<code>index</code>"</a></li>
         <li><a href=#link-type-up><span class=secno>4.12.3.17.2 </span>Link type "<code>up</code>"</a></ol></li>
       <li><a href=#sequential-link-types><span class=secno>4.12.3.18 </span>Sequential link types</a>
        <ol>
         <li><a href=#link-type-first><span class=secno>4.12.3.18.1 </span>Link type "<code>first</code>"</a></li>
         <li><a href=#link-type-last><span class=secno>4.12.3.18.2 </span>Link type "<code>last</code>"</a></li>
         <li><a href=#link-type-next><span class=secno>4.12.3.18.3 </span>Link type "<code>next</code>"</a></li>
         <li><a href=#link-type-prev><span class=secno>4.12.3.18.4 </span>Link type "<code>prev</code>"</a></ol></li>
       <li><a href=#other-link-types><span class=secno>4.12.3.19 </span>Other link types</a></ol></ol></li>
   <li><a href=#common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</a>
    <ol>
     <li><a href=#tag-clouds><span class=secno>4.13.1 </span>Tag clouds</a></li>
     <li><a href=#conversations><span class=secno>4.13.2 </span>Conversations</a></li>
     <li><a href=#footnotes><span class=secno>4.13.3 </span>Footnotes</a></ol></li>
   <li><a href=#matching-html-elements-using-selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</a>
    <ol>
     <li><a href=#selectors><span class=secno>4.14.1 </span>Case-sensitivity</a></li>
     <li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
 <li><a href=#microdata><span class=secno>5 </span>Microdata</a>
  <ol>
   <li><a href=#introduction-2><span class=secno>5.1 </span>Introduction</a>
    <ol>
     <li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
     <li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
     <li><a href=#typed-items><span class=secno>5.1.3 </span>Typed items</a></li>
     <li><a href=#global-identifiers-for-items><span class=secno>5.1.4 </span>Global identifiers for items</a></li>
     <li><a href=#selecting-names-when-defining-vocabularies><span class=secno>5.1.5 </span>Selecting names when defining vocabularies</a></li>
     <li><a href=#using-the-microdata-dom-api><span class=secno>5.1.6 </span>Using the microdata DOM API</a></ol></li>
   <li><a href=#encoding-microdata><span class=secno>5.2 </span>Encoding microdata</a>
    <ol>
     <li><a href=#the-microdata-model><span class=secno>5.2.1 </span>The microdata model</a></li>
     <li><a href=#items><span class=secno>5.2.2 </span>Items</a></li>
     <li><a href=#names:-the-itemprop-attribute><span class=secno>5.2.3 </span>Names: the <code>itemprop</code> attribute</a></li>
     <li><a href=#values><span class=secno>5.2.4 </span>Values</a></li>
     <li><a href=#associating-names-with-items><span class=secno>5.2.5 </span>Associating names with items</a></ol></li>
   <li><a href=#microdata-dom-api><span class=secno>5.3 </span>Microdata DOM API</a></li>
   <li><a href=#mdvocabs><span class=secno>5.4 </span>Microdata vocabularies</a>
    <ol>
     <li><a href=#vcard><span class=secno>5.4.1 </span>vCard</a>
      <ol>
       <li><a href=#conversion-to-vcard><span class=secno>5.4.1.1 </span>Conversion to vCard</a></li>
       <li><a href=#examples-1><span class=secno>5.4.1.2 </span>Examples</a></ol></li>
     <li><a href=#vevent><span class=secno>5.4.2 </span>vEvent</a>
      <ol>
       <li><a href=#conversion-to-icalendar><span class=secno>5.4.2.1 </span>Conversion to iCalendar</a></li>
       <li><a href=#examples-2><span class=secno>5.4.2.2 </span>Examples</a></ol></li>
     <li><a href=#licensing-works><span class=secno>5.4.3 </span>Licensing works</a>
      <ol>
       <li><a href=#conversion-to-rdf><span class=secno>5.4.3.1 </span>Conversion to RDF</a></li>
       <li><a href=#examples-3><span class=secno>5.4.3.2 </span>Examples</a></ol></ol></li>
   <li><a href=#converting-html-to-other-formats><span class=secno>5.5 </span>Converting HTML to other formats</a>
    <ol>
     <li><a href=#json><span class=secno>5.5.1 </span>JSON</a></li>
     <li><a href=#rdf><span class=secno>5.5.2 </span>RDF</a>
      <ol>
       <li><a href=#examples-4><span class=secno>5.5.2.1 </span>Examples</a></ol></li>
     <li><a href=#atom><span class=secno>5.5.3 </span>Atom</a></ol></ol></li>
 <li><a href=#browsers><span class=secno>6 </span>Loading Web pages</a>
  <ol>
   <li><a href=#windows><span class=secno>6.1 </span>Browsing contexts</a>
    <ol>
     <li><a href=#nested-browsing-contexts><span class=secno>6.1.1 </span>Nested browsing contexts</a>
      <ol>
       <li><a href=#navigating-nested-browsing-contexts-in-the-dom><span class=secno>6.1.1.1 </span>Navigating nested browsing contexts in the DOM</a></ol></li>
     <li><a href=#auxiliary-browsing-contexts><span class=secno>6.1.2 </span>Auxiliary browsing contexts</a>
      <ol>
       <li><a href=#navigating-auxiliary-browsing-contexts-in-the-dom><span class=secno>6.1.2.1 </span>Navigating auxiliary browsing contexts in the DOM</a></ol></li>
     <li><a href=#secondary-browsing-contexts><span class=secno>6.1.3 </span>Secondary browsing contexts</a></li>
     <li><a href=#security-nav><span class=secno>6.1.4 </span>Security</a></li>
     <li><a href=#groupings-of-browsing-contexts><span class=secno>6.1.5 </span>Groupings of browsing contexts</a></li>
     <li><a href=#browsing-context-names><span class=secno>6.1.6 </span>Browsing context names</a></ol></li>
   <li><a href=#the-window-object><span class=secno>6.2 </span>The <code>Window</code> object</a>
    <ol>
     <li><a href=#security-window><span class=secno>6.2.1 </span>Security</a></li>
     <li><a href=#apis-for-creating-and-navigating-browsing-contexts-by-name><span class=secno>6.2.2 </span>APIs for creating and navigating browsing contexts by name</a></li>
     <li><a href=#accessing-other-browsing-contexts><span class=secno>6.2.3 </span>Accessing other browsing contexts</a></li>
     <li><a href=#named-access-on-the-window-object><span class=secno>6.2.4 </span>Named access on the <code>Window</code> object</a></li>
     <li><a href=#garbage-collection-and-browsing-contexts><span class=secno>6.2.5 </span>Garbage collection and browsing contexts</a></li>
     <li><a href=#browser-interface-elements><span class=secno>6.2.6 </span>Browser interface elements</a></li>
     <li><a href=#the-windowproxy-object><span class=secno>6.2.7 </span>The <code>WindowProxy</code> object</a></ol></li>
   <li><a href=#origin-0><span class=secno>6.3 </span>Origin</a>
    <ol>
     <li><a href=#relaxing-the-same-origin-restriction><span class=secno>6.3.1 </span>Relaxing the same-origin restriction</a></ol></li>
   <li><a href=#history><span class=secno>6.4 </span>Session history and navigation</a>
    <ol>
     <li><a href=#the-session-history-of-browsing-contexts><span class=secno>6.4.1 </span>The session history of browsing contexts</a></li>
     <li><a href=#the-history-interface><span class=secno>6.4.2 </span>The <code>History</code> interface</a></li>
     <li><a href=#the-location-interface><span class=secno>6.4.3 </span>The <code>Location</code> interface</a>
      <ol>
       <li><a href=#security-location><span class=secno>6.4.3.1 </span>Security</a></ol></li>
     <li><a href=#history-notes><span class=secno>6.4.4 </span>Implementation notes for session history</a></ol></li>
   <li><a href=#browsing-the-web><span class=secno>6.5 </span>Browsing the Web</a>
    <ol>
     <li><a href=#navigating-across-documents><span class=secno>6.5.1 </span>Navigating across documents</a></li>
     <li><a href=#read-html><span class=secno>6.5.2 </span>Page load processing model for HTML files</a></li>
     <li><a href=#read-xml><span class=secno>6.5.3 </span>Page load processing model for XML files</a></li>
     <li><a href=#read-text><span class=secno>6.5.4 </span>Page load processing model for text files</a></li>
     <li><a href=#read-image><span class=secno>6.5.5 </span>Page load processing model for images</a></li>
     <li><a href=#read-plugin><span class=secno>6.5.6 </span>Page load processing model for content that uses plugins</a></li>
     <li><a href=#read-ua-inline><span class=secno>6.5.7 </span>Page load processing model for inline content that doesn't have a DOM</a></li>
     <li><a href=#scroll-to-fragid><span class=secno>6.5.8 </span>Navigating to a fragment identifier</a></li>
     <li><a href=#history-traversal><span class=secno>6.5.9 </span>History traversal</a>
      <ol>
       <li><a href=#event-definitions><span class=secno>6.5.9.1 </span>Event definitions</a></ol></li>
     <li><a href=#unloading-documents><span class=secno>6.5.10 </span>Unloading documents</a>
      <ol>
       <li><a href=#event-definition><span class=secno>6.5.10.1 </span>Event definition</a></ol></li>
     <li><a href=#aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</a></ol></li>
   <li><a href=#offline><span class=secno>6.6 </span>Offline Web applications</a>
    <ol>
     <li><a href=#introduction-3><span class=secno>6.6.1 </span>Introduction</a>
      <ol>
       <li><a href=#appcacheevents><span class=secno>6.6.1.1 </span>Event summary</a></ol></li>
     <li><a href=#appcache><span class=secno>6.6.2 </span>Application caches</a></li>
     <li><a href=#manifests><span class=secno>6.6.3 </span>The cache manifest syntax</a>
      <ol>
       <li><a href=#a-sample-manifest><span class=secno>6.6.3.1 </span>A sample manifest</a></li>
       <li><a href=#writing-cache-manifests><span class=secno>6.6.3.2 </span>Writing cache manifests</a></li>
       <li><a href=#parsing-cache-manifests><span class=secno>6.6.3.3 </span>Parsing cache manifests</a></ol></li>
     <li><a href=#downloading-or-updating-an-application-cache><span class=secno>6.6.4 </span>Downloading or updating an application cache</a></li>
     <li><a href=#the-application-cache-selection-algorithm><span class=secno>6.6.5 </span>The application cache selection algorithm</a></li>
     <li><a href=#changesToNetworkingModel><span class=secno>6.6.6 </span>Changes to the networking model</a></li>
     <li><a href=#expiring-application-caches><span class=secno>6.6.7 </span>Expiring application caches</a></li>
     <li><a href=#application-cache-api><span class=secno>6.6.8 </span>Application cache API</a></li>
     <li><a href=#browser-state><span class=secno>6.6.9 </span>Browser state</a></ol></ol></li>
 <li><a href=#webappapis><span class=secno>7 </span>Web application APIs</a>
  <ol>
   <li><a href=#scripting><span class=secno>7.1 </span>Scripting</a>
    <ol>
     <li><a href=#introduction-4><span class=secno>7.1.1 </span>Introduction</a></li>
     <li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
     <li><a href=#processing-model-1><span class=secno>7.1.3 </span>Processing model</a>
      <ol>
       <li><a href=#definitions-0><span class=secno>7.1.3.1 </span>Definitions</a></li>
       <li><a href=#calling-scripts><span class=secno>7.1.3.2 </span>Calling scripts</a></li>
       <li><a href=#creating-scripts><span class=secno>7.1.3.3 </span>Creating scripts</a></li>
       <li><a href=#killing-scripts><span class=secno>7.1.3.4 </span>Killing scripts</a></ol></li>
     <li><a href=#event-loops><span class=secno>7.1.4 </span>Event loops</a>
      <ol>
       <li><a href=#definitions-1><span class=secno>7.1.4.1 </span>Definitions</a></li>
       <li><a href=#processing-model-2><span class=secno>7.1.4.2 </span>Processing model</a></li>
       <li><a href=#generic-task-sources><span class=secno>7.1.4.3 </span>Generic task sources</a></ol></li>
     <li><a href=#javascript-protocol><span class=secno>7.1.5 </span>The <code title="">javascript:</code> protocol</a></li>
     <li><a href=#events><span class=secno>7.1.6 </span>Events</a>
      <ol>
       <li><a href=#event-handler-attributes><span class=secno>7.1.6.1 </span>Event handlers</a></li>
       <li><a href=#event-handlers-on-elements,-document-objects,-and-window-objects><span class=secno>7.1.6.2 </span>Event handlers on elements, <code>Document</code> objects, and <code>Window</code> objects</a></li>
       <li><a href=#event-firing><span class=secno>7.1.6.3 </span>Event firing</a></li>
       <li><a href=#events-and-the-window-object><span class=secno>7.1.6.4 </span>Events and the <code>Window</code> object</a></li>
       <li><a href=#runtime-script-errors><span class=secno>7.1.6.5 </span>Runtime script errors</a></ol></ol></li>
   <li><a href=#timers><span class=secno>7.2 </span>Timers</a></li>
   <li><a href=#user-prompts><span class=secno>7.3 </span>User prompts</a>
    <ol>
     <li><a href=#simple-dialogs><span class=secno>7.3.1 </span>Simple dialogs</a></li>
     <li><a href=#printing><span class=secno>7.3.2 </span>Printing</a></li>
     <li><a href=#dialogs-implemented-using-separate-documents><span class=secno>7.3.3 </span>Dialogs implemented using separate documents</a></ol></li>
   <li><a href=#system-state-and-capabilities><span class=secno>7.4 </span>System state and capabilities</a>
    <ol>
     <li><a href=#client-identification><span class=secno>7.4.1 </span>Client identification</a></li>
     <li><a href=#custom-handlers><span class=secno>7.4.2 </span>Custom scheme and content handlers</a>
      <ol>
       <li><a href=#security-and-privacy><span class=secno>7.4.2.1 </span>Security and privacy</a></li>
       <li><a href=#sample-handler-impl><span class=secno>7.4.2.2 </span>Sample user interface</a></ol></li>
     <li><a href=#manually-releasing-the-storage-mutex><span class=secno>7.4.3 </span>Manually releasing the storage mutex</a></ol></ol></li>
 <li><a href=#editing><span class=secno>8 </span>User interaction</a>
  <ol>
   <li><a href=#the-hidden-attribute><span class=secno>8.1 </span>The <code>hidden</code> attribute</a></li>
   <li><a href=#activation><span class=secno>8.2 </span>Activation</a></li>
   <li><a href=#scrolling-elements-into-view><span class=secno>8.3 </span>Scrolling elements into view</a></li>
   <li><a href=#focus><span class=secno>8.4 </span>Focus</a>
    <ol>
     <li><a href=#sequential-focus-navigation><span class=secno>8.4.1 </span>Sequential focus navigation</a></li>
     <li><a href=#focus-management><span class=secno>8.4.2 </span>Focus management</a></li>
     <li><a href=#document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</a></li>
     <li><a href=#element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</a></ol></li>
   <li><a href=#the-accesskey-attribute><span class=secno>8.5 </span>The <code>accesskey</code> attribute</a></li>
   <li><a href=#selection><span class=secno>8.6 </span>The text selection APIs</a>
    <ol>
     <li><a href=#documentSelection><span class=secno>8.6.1 </span>APIs for the browsing context selection</a></li>
     <li><a href=#textFieldSelection><span class=secno>8.6.2 </span>APIs for the text field selections</a></ol></li>
   <li><a href=#contenteditable><span class=secno>8.7 </span>The <code title=attr-contenteditable>contenteditable</code> attribute</a>
    <ol>
     <li><a href=#user-editing-actions><span class=secno>8.7.1 </span>User editing actions</a></li>
     <li><a href=#making-entire-documents-editable><span class=secno>8.7.2 </span>Making entire documents editable</a></ol></li>
   <li><a href=#spelling-and-grammar-checking><span class=secno>8.8 </span>Spelling and grammar checking</a></li>
   <li><a href=#dnd><span class=secno>8.9 </span>Drag and drop</a>
    <ol>
     <li><a href=#introduction-5><span class=secno>8.9.1 </span>Introduction</a></li>
     <li><a href=#the-dragevent-and-datatransfer-interfaces><span class=secno>8.9.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li>
     <li><a href=#dndevents><span class=secno>8.9.3 </span>Events fired during a drag-and-drop action</a></li>
     <li><a href=#drag-and-drop-processing-model><span class=secno>8.9.4 </span>Drag-and-drop processing model</a>
      <ol>
       <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.9.4.1 </span>When the drag-and-drop operation starts or ends in another
  document</a></li>
       <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.9.4.2 </span>When the drag-and-drop operation starts or ends in another
  application</a></ol></li>
     <li><a href=#the-draggable-attribute><span class=secno>8.9.5 </span>The <code>draggable</code> attribute</a></li>
     <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.9.6 </span>Security risks in the drag-and-drop model</a></ol></li>
   <li><a href=#undo><span class=secno>8.10 </span>Undo history</a>
    <ol>
     <li><a href=#definitions-2><span class=secno>8.10.1 </span>Definitions</a></li>
     <li><a href=#the-undomanager-interface><span class=secno>8.10.2 </span>The <code>UndoManager</code> interface</a></li>
     <li><a href=#undo:-moving-back-in-the-undo-transaction-history><span class=secno>8.10.3 </span>Undo: moving back in the undo transaction history</a></li>
     <li><a href=#redo:-moving-forward-in-the-undo-transaction-history><span class=secno>8.10.4 </span>Redo: moving forward in the undo transaction history</a></li>
     <li><a href=#the-undomanagerevent-interface-and-the-undo-and-redo-events><span class=secno>8.10.5 </span>The <code>UndoManagerEvent</code> interface and the <code title=event-undo>undo</code> and <code title=event-redo>redo</code> events</a></li>
     <li><a href=#implementation-notes><span class=secno>8.10.6 </span>Implementation notes</a></ol></li>
   <li><a href=#editing-apis><span class=secno>8.11 </span>Editing APIs</a></ol></li>
 <li><a href=#comms><span class=secno>9 </span>Communication</a>
  <ol>
   <li><a href=#event-definitions-0><span class=secno>9.1 </span>Event definitions</a></li>
   <li><a href=#web-messaging><span class=secno>9.2 </span>Cross-document messaging</a>
    <ol>
     <li><a href=#introduction-6><span class=secno>9.2.1 </span>Introduction</a></li>
     <li><a href=#security-postmsg><span class=secno>9.2.2 </span>Security</a>
      <ol>
       <li><a href=#authors><span class=secno>9.2.2.1 </span>Authors</a></li>
       <li><a href=#user-agents><span class=secno>9.2.2.2 </span>User agents</a></ol></li>
     <li><a href=#posting-messages><span class=secno>9.2.3 </span>Posting messages</a></ol></li>
   <li><a href=#channel-messaging><span class=secno>9.3 </span>Channel messaging</a>
    <ol>
     <li><a href=#introduction-7><span class=secno>9.3.1 </span>Introduction</a></li>
     <li><a href=#message-channels><span class=secno>9.3.2 </span>Message channels</a></li>
     <li><a href=#message-ports><span class=secno>9.3.3 </span>Message ports</a>
      <ol>
       <li><a href=#ports-and-garbage-collection><span class=secno>9.3.3.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
 <li><a href=#syntax><span class=secno>10 </span>The HTML syntax</a>
  <ol>
   <li><a href=#writing><span class=secno>10.1 </span>Writing HTML documents</a>
    <ol>
     <li><a href=#the-doctype><span class=secno>10.1.1 </span>The DOCTYPE</a></li>
     <li><a href=#elements-0><span class=secno>10.1.2 </span>Elements</a>
      <ol>
       <li><a href=#start-tags><span class=secno>10.1.2.1 </span>Start tags</a></li>
       <li><a href=#end-tags><span class=secno>10.1.2.2 </span>End tags</a></li>
       <li><a href=#attributes-0><span class=secno>10.1.2.3 </span>Attributes</a></li>
       <li><a href=#optional-tags><span class=secno>10.1.2.4 </span>Optional tags</a></li>
       <li><a href=#element-restrictions><span class=secno>10.1.2.5 </span>Restrictions on content models</a></li>
       <li><a href=#cdata-rcdata-restrictions><span class=secno>10.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</a></ol></li>
     <li><a href=#text-1><span class=secno>10.1.3 </span>Text</a>
      <ol>
       <li><a href=#newlines><span class=secno>10.1.3.1 </span>Newlines</a></ol></li>
     <li><a href=#character-references><span class=secno>10.1.4 </span>Character references</a></li>
     <li><a href=#cdata-sections><span class=secno>10.1.5 </span>CDATA sections</a></li>
     <li><a href=#comments><span class=secno>10.1.6 </span>Comments</a></ol></li>
   <li><a href=#parsing><span class=secno>10.2 </span>Parsing HTML documents</a>
    <ol>
     <li><a href=#overview-of-the-parsing-model><span class=secno>10.2.1 </span>Overview of the parsing model</a></li>
     <li><a href=#the-input-stream><span class=secno>10.2.2 </span>The input stream</a>
      <ol>
       <li><a href=#determining-the-character-encoding><span class=secno>10.2.2.1 </span>Determining the character encoding</a></li>
       <li><a href=#character-encodings-0><span class=secno>10.2.2.2 </span>Character encodings</a></li>
       <li><a href=#preprocessing-the-input-stream><span class=secno>10.2.2.3 </span>Preprocessing the input stream</a></li>
       <li><a href=#changing-the-encoding-while-parsing><span class=secno>10.2.2.4 </span>Changing the encoding while parsing</a></ol></li>
     <li><a href=#parse-state><span class=secno>10.2.3 </span>Parse state</a>
      <ol>
       <li><a href=#the-insertion-mode><span class=secno>10.2.3.1 </span>The insertion mode</a></li>
       <li><a href=#the-stack-of-open-elements><span class=secno>10.2.3.2 </span>The stack of open elements</a></li>
       <li><a href=#the-list-of-active-formatting-elements><span class=secno>10.2.3.3 </span>The list of active formatting elements</a></li>
       <li><a href=#the-element-pointers><span class=secno>10.2.3.4 </span>The element pointers</a></li>
       <li><a href=#other-parsing-state-flags><span class=secno>10.2.3.5 </span>Other parsing state flags</a></ol></li>
     <li><a href=#tokenization><span class=secno>10.2.4 </span>Tokenization</a>
      <ol>
       <li><a href=#data-state><span class=secno>10.2.4.1 </span>Data state</a></li>
       <li><a href=#character-reference-in-data-state><span class=secno>10.2.4.2 </span>Character reference in data state</a></li>
       <li><a href=#rcdata-state><span class=secno>10.2.4.3 </span>RCDATA state</a></li>
       <li><a href=#character-reference-in-rcdata-state><span class=secno>10.2.4.4 </span>Character reference in RCDATA state</a></li>
       <li><a href=#rawtext-state><span class=secno>10.2.4.5 </span>RAWTEXT state</a></li>
       <li><a href=#script-data-state><span class=secno>10.2.4.6 </span>Script data state</a></li>
       <li><a href=#plaintext-state><span class=secno>10.2.4.7 </span>PLAINTEXT state</a></li>
       <li><a href=#tag-open-state><span class=secno>10.2.4.8 </span>Tag open state</a></li>
       <li><a href=#end-tag-open-state><span class=secno>10.2.4.9 </span>End tag open state</a></li>
       <li><a href=#tag-name-state><span class=secno>10.2.4.10 </span>Tag name state</a></li>
       <li><a href=#rcdata-less-than-sign-state><span class=secno>10.2.4.11 </span>RCDATA less-than sign state</a></li>
       <li><a href=#rcdata-end-tag-open-state><span class=secno>10.2.4.12 </span>RCDATA end tag open state</a></li>
       <li><a href=#rcdata-end-tag-name-state><span class=secno>10.2.4.13 </span>RCDATA end tag name state</a></li>
       <li><a href=#rawtext-less-than-sign-state><span class=secno>10.2.4.14 </span>RAWTEXT less-than sign state</a></li>
       <li><a href=#rawtext-end-tag-open-state><span class=secno>10.2.4.15 </span>RAWTEXT end tag open state</a></li>
       <li><a href=#rawtext-end-tag-name-state><span class=secno>10.2.4.16 </span>RAWTEXT end tag name state</a></li>
       <li><a href=#script-data-less-than-sign-state><span class=secno>10.2.4.17 </span>Script data less-than sign state</a></li>
       <li><a href=#script-data-end-tag-open-state><span class=secno>10.2.4.18 </span>Script data end tag open state</a></li>
       <li><a href=#script-data-end-tag-name-state><span class=secno>10.2.4.19 </span>Script data end tag name state</a></li>
       <li><a href=#script-data-escape-start-state><span class=secno>10.2.4.20 </span>Script data escape start state</a></li>
       <li><a href=#script-data-escape-start-dash-state><span class=secno>10.2.4.21 </span>Script data escape start dash state</a></li>
       <li><a href=#script-data-escaped-state><span class=secno>10.2.4.22 </span>Script data escaped state</a></li>
       <li><a href=#script-data-escaped-dash-state><span class=secno>10.2.4.23 </span>Script data escaped dash state</a></li>
       <li><a href=#script-data-escaped-dash-dash-state><span class=secno>10.2.4.24 </span>Script data escaped dash dash state</a></li>
       <li><a href=#script-data-escaped-less-than-sign-state><span class=secno>10.2.4.25 </span>Script data escaped less-than sign state</a></li>
       <li><a href=#script-data-escaped-end-tag-open-state><span class=secno>10.2.4.26 </span>Script data escaped end tag open state</a></li>
       <li><a href=#script-data-escaped-end-tag-name-state><span class=secno>10.2.4.27 </span>Script data escaped end tag name state</a></li>
       <li><a href=#script-data-double-escape-start-state><span class=secno>10.2.4.28 </span>Script data double escape start state</a></li>
       <li><a href=#script-data-double-escaped-state><span class=secno>10.2.4.29 </span>Script data double escaped state</a></li>
       <li><a href=#script-data-double-escaped-dash-state><span class=secno>10.2.4.30 </span>Script data double escaped dash state</a></li>
       <li><a href=#script-data-double-escaped-dash-dash-state><span class=secno>10.2.4.31 </span>Script data double escaped dash dash state</a></li>
       <li><a href=#script-data-double-escaped-less-than-sign-state><span class=secno>10.2.4.32 </span>Script data double escaped less-than sign state</a></li>
       <li><a href=#script-data-double-escape-end-state><span class=secno>10.2.4.33 </span>Script data double escape end state</a></li>
       <li><a href=#before-attribute-name-state><span class=secno>10.2.4.34 </span>Before attribute name state</a></li>
       <li><a href=#attribute-name-state><span class=secno>10.2.4.35 </span>Attribute name state</a></li>
       <li><a href=#after-attribute-name-state><span class=secno>10.2.4.36 </span>After attribute name state</a></li>
       <li><a href=#before-attribute-value-state><span class=secno>10.2.4.37 </span>Before attribute value state</a></li>
       <li><a href=#attribute-value-(double-quoted)-state><span class=secno>10.2.4.38 </span>Attribute value (double-quoted) state</a></li>
       <li><a href=#attribute-value-(single-quoted)-state><span class=secno>10.2.4.39 </span>Attribute value (single-quoted) state</a></li>
       <li><a href=#attribute-value-(unquoted)-state><span class=secno>10.2.4.40 </span>Attribute value (unquoted) state</a></li>
       <li><a href=#character-reference-in-attribute-value-state><span class=secno>10.2.4.41 </span>Character reference in attribute value state</a></li>
       <li><a href=#after-attribute-value-(quoted)-state><span class=secno>10.2.4.42 </span>After attribute value (quoted) state</a></li>
       <li><a href=#self-closing-start-tag-state><span class=secno>10.2.4.43 </span>Self-closing start tag state</a></li>
       <li><a href=#bogus-comment-state><span class=secno>10.2.4.44 </span>Bogus comment state</a></li>
       <li><a href=#markup-declaration-open-state><span class=secno>10.2.4.45 </span>Markup declaration open state</a></li>
       <li><a href=#comment-start-state><span class=secno>10.2.4.46 </span>Comment start state</a></li>
       <li><a href=#comment-start-dash-state><span class=secno>10.2.4.47 </span>Comment start dash state</a></li>
       <li><a href=#comment-state><span class=secno>10.2.4.48 </span>Comment state</a></li>
       <li><a href=#comment-end-dash-state><span class=secno>10.2.4.49 </span>Comment end dash state</a></li>
       <li><a href=#comment-end-state><span class=secno>10.2.4.50 </span>Comment end state</a></li>
       <li><a href=#comment-end-bang-state><span class=secno>10.2.4.51 </span>Comment end bang state</a></li>
       <li><a href=#comment-end-space-state><span class=secno>10.2.4.52 </span>Comment end space state</a></li>
       <li><a href=#doctype-state><span class=secno>10.2.4.53 </span>DOCTYPE state</a></li>
       <li><a href=#before-doctype-name-state><span class=secno>10.2.4.54 </span>Before DOCTYPE name state</a></li>
       <li><a href=#doctype-name-state><span class=secno>10.2.4.55 </span>DOCTYPE name state</a></li>
       <li><a href=#after-doctype-name-state><span class=secno>10.2.4.56 </span>After DOCTYPE name state</a></li>
       <li><a href=#after-doctype-public-keyword-state><span class=secno>10.2.4.57 </span>After DOCTYPE public keyword state</a></li>
       <li><a href=#before-doctype-public-identifier-state><span class=secno>10.2.4.58 </span>Before DOCTYPE public identifier state</a></li>
       <li><a href=#doctype-public-identifier-(double-quoted)-state><span class=secno>10.2.4.59 </span>DOCTYPE public identifier (double-quoted) state</a></li>
       <li><a href=#doctype-public-identifier-(single-quoted)-state><span class=secno>10.2.4.60 </span>DOCTYPE public identifier (single-quoted) state</a></li>
       <li><a href=#after-doctype-public-identifier-state><span class=secno>10.2.4.61 </span>After DOCTYPE public identifier state</a></li>
       <li><a href=#between-doctype-public-and-system-identifiers-state><span class=secno>10.2.4.62 </span>Between DOCTYPE public and system identifiers state</a></li>
       <li><a href=#after-doctype-system-keyword-state><span class=secno>10.2.4.63 </span>After DOCTYPE system keyword state</a></li>
       <li><a href=#before-doctype-system-identifier-state><span class=secno>10.2.4.64 </span>Before DOCTYPE system identifier state</a></li>
       <li><a href=#doctype-system-identifier-(double-quoted)-state><span class=secno>10.2.4.65 </span>DOCTYPE system identifier (double-quoted) state</a></li>
       <li><a href=#doctype-system-identifier-(single-quoted)-state><span class=secno>10.2.4.66 </span>DOCTYPE system identifier (single-quoted) state</a></li>
       <li><a href=#after-doctype-system-identifier-state><span class=secno>10.2.4.67 </span>After DOCTYPE system identifier state</a></li>
       <li><a href=#bogus-doctype-state><span class=secno>10.2.4.68 </span>Bogus DOCTYPE state</a></li>
       <li><a href=#cdata-section-state><span class=secno>10.2.4.69 </span>CDATA section state</a></li>
       <li><a href=#tokenizing-character-references><span class=secno>10.2.4.70 </span>Tokenizing character references</a></ol></li>
     <li><a href=#tree-construction><span class=secno>10.2.5 </span>Tree construction</a>
      <ol>
       <li><a href=#creating-and-inserting-elements><span class=secno>10.2.5.1 </span>Creating and inserting elements</a></li>
       <li><a href=#closing-elements-that-have-implied-end-tags><span class=secno>10.2.5.2 </span>Closing elements that have implied end tags</a></li>
       <li><a href=#foster-parenting><span class=secno>10.2.5.3 </span>Foster parenting</a></li>
       <li><a href=#the-initial-insertion-mode><span class=secno>10.2.5.4 </span>The "initial" insertion mode</a></li>
       <li><a href=#the-before-html-insertion-mode><span class=secno>10.2.5.5 </span>The "before html" insertion mode</a></li>
       <li><a href=#the-before-head-insertion-mode><span class=secno>10.2.5.6 </span>The "before head" insertion mode</a></li>
       <li><a href=#parsing-main-inhead><span class=secno>10.2.5.7 </span>The "in head" insertion mode</a></li>
       <li><a href=#parsing-main-inheadnoscript><span class=secno>10.2.5.8 </span>The "in head noscript" insertion mode</a></li>
       <li><a href=#the-after-head-insertion-mode><span class=secno>10.2.5.9 </span>The "after head" insertion mode</a></li>
       <li><a href=#parsing-main-inbody><span class=secno>10.2.5.10 </span>The "in body" insertion mode</a></li>
       <li><a href=#parsing-main-incdata><span class=secno>10.2.5.11 </span>The "text" insertion mode</a></li>
       <li><a href=#parsing-main-intable><span class=secno>10.2.5.12 </span>The "in table" insertion mode</a></li>
       <li><a href=#parsing-main-intabletext><span class=secno>10.2.5.13 </span>The "in table text" insertion mode</a></li>
       <li><a href=#parsing-main-incaption><span class=secno>10.2.5.14 </span>The "in caption" insertion mode</a></li>
       <li><a href=#parsing-main-incolgroup><span class=secno>10.2.5.15 </span>The "in column group" insertion mode</a></li>
       <li><a href=#parsing-main-intbody><span class=secno>10.2.5.16 </span>The "in table body" insertion mode</a></li>
       <li><a href=#parsing-main-intr><span class=secno>10.2.5.17 </span>The "in row" insertion mode</a></li>
       <li><a href=#parsing-main-intd><span class=secno>10.2.5.18 </span>The "in cell" insertion mode</a></li>
       <li><a href=#parsing-main-inselect><span class=secno>10.2.5.19 </span>The "in select" insertion mode</a></li>
       <li><a href=#parsing-main-inselectintable><span class=secno>10.2.5.20 </span>The "in select in table" insertion mode</a></li>
       <li><a href=#parsing-main-inforeign><span class=secno>10.2.5.21 </span>The "in foreign content" insertion mode</a></li>
       <li><a href=#parsing-main-afterbody><span class=secno>10.2.5.22 </span>The "after body" insertion mode</a></li>
       <li><a href=#parsing-main-inframeset><span class=secno>10.2.5.23 </span>The "in frameset" insertion mode</a></li>
       <li><a href=#parsing-main-afterframeset><span class=secno>10.2.5.24 </span>The "after frameset" insertion mode</a></li>
       <li><a href=#the-after-after-body-insertion-mode><span class=secno>10.2.5.25 </span>The "after after body" insertion mode</a></li>
       <li><a href=#the-after-after-frameset-insertion-mode><span class=secno>10.2.5.26 </span>The "after after frameset" insertion mode</a></ol></li>
     <li><a href=#the-end><span class=secno>10.2.6 </span>The end</a></li>
     <li><a href=#coercing-an-html-dom-into-an-infoset><span class=secno>10.2.7 </span>Coercing an HTML DOM into an infoset</a></li>
     <li><a href=#an-introduction-to-error-handling-and-strange-cases-in-the-parser><span class=secno>10.2.8 </span>An introduction to error handling and strange cases in the parser</a>
      <ol>
       <li><a href=#misnested-tags:-b-i-/b-/i><span class=secno>10.2.8.1 </span>Misnested tags: &lt;b&gt;&lt;i&gt;&lt;/b&gt;&lt;/i&gt;</a></li>
       <li><a href=#misnested-tags:-b-p-/b-/p><span class=secno>10.2.8.2 </span>Misnested tags: &lt;b&gt;&lt;p&gt;&lt;/b&gt;&lt;/p&gt;</a></li>
       <li><a href=#unexpected-markup-in-tables><span class=secno>10.2.8.3 </span>Unexpected markup in tables</a></li>
       <li><a href=#scripts-that-modify-the-page-as-it-is-being-parsed><span class=secno>10.2.8.4 </span>Scripts that modify the page as it is being parsed</a></ol></ol></li>
   <li><a href=#serializing-html-fragments><span class=secno>10.3 </span>Serializing HTML fragments</a></li>
   <li><a href=#parsing-html-fragments><span class=secno>10.4 </span>Parsing HTML fragments</a></li>
   <li><a href=#named-character-references><span class=secno>10.5 </span>Named character references</a></ol></li>
 <li><a href=#the-xhtml-syntax><span class=secno>11 </span>The XHTML syntax</a>
  <ol>
   <li><a href=#writing-xhtml-documents><span class=secno>11.1 </span>Writing XHTML documents</a></li>
   <li><a href=#parsing-xhtml-documents><span class=secno>11.2 </span>Parsing XHTML documents</a></li>
   <li><a href=#serializing-xhtml-fragments><span class=secno>11.3 </span>Serializing XHTML fragments</a></li>
   <li><a href=#parsing-xhtml-fragments><span class=secno>11.4 </span>Parsing XHTML fragments</a></ol></li>
 <li><a href=#rendering><span class=secno>12 </span>Rendering</a>
  <ol>
   <li><a href=#introduction-8><span class=secno>12.1 </span>Introduction</a></li>
   <li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>12.2 </span>The CSS user agent style sheet and presentational hints</a>
    <ol>
     <li><a href=#introduction-9><span class=secno>12.2.1 </span>Introduction</a></li>
     <li><a href=#display-types><span class=secno>12.2.2 </span>Display types</a></li>
     <li><a href=#margins-and-padding><span class=secno>12.2.3 </span>Margins and padding</a></li>
     <li><a href=#alignment><span class=secno>12.2.4 </span>Alignment</a></li>
     <li><a href=#fonts-and-colors><span class=secno>12.2.5 </span>Fonts and colors</a></li>
     <li><a href=#punctuation-and-decorations><span class=secno>12.2.6 </span>Punctuation and decorations</a></li>
     <li><a href=#resetting-rules-for-inherited-properties><span class=secno>12.2.7 </span>Resetting rules for inherited properties</a></li>
     <li><a href=#the-hr-element-0><span class=secno>12.2.8 </span>The <code>hr</code> element</a></li>
     <li><a href=#the-fieldset-element-0><span class=secno>12.2.9 </span>The <code>fieldset</code> element</a></ol></li>
   <li><a href=#replaced-elements><span class=secno>12.3 </span>Replaced elements</a>
    <ol>
     <li><a href=#embedded-content-2><span class=secno>12.3.1 </span>Embedded content</a></li>
     <li><a href=#timed-tracks-0><span class=secno>12.3.2 </span>Timed tracks</a></li>
     <li><a href=#images-0><span class=secno>12.3.3 </span>Images</a></li>
     <li><a href=#attributes-for-embedded-content-and-images><span class=secno>12.3.4 </span>Attributes for embedded content and images</a></li>
     <li><a href=#image-maps-0><span class=secno>12.3.5 </span>Image maps</a></li>
     <li><a href=#toolbars-0><span class=secno>12.3.6 </span>Toolbars</a></ol></li>
   <li><a href=#bindings><span class=secno>12.4 </span>Bindings</a>
    <ol>
     <li><a href=#introduction-10><span class=secno>12.4.1 </span>Introduction</a></li>
     <li><a href=#the-button-element-0><span class=secno>12.4.2 </span>The <code>button</code> element</a></li>
     <li><a href=#the-details-element-0><span class=secno>12.4.3 </span>The <code>details</code> element</a></li>
     <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>12.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
     <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>12.4.5 </span>The <code>input</code> element as domain-specific widgets</a></li>
     <li><a href=#the-input-element-as-a-range-control><span class=secno>12.4.6 </span>The <code>input</code> element as a range control</a></li>
     <li><a href=#the-input-element-as-a-color-well><span class=secno>12.4.7 </span>The <code>input</code> element as a color well</a></li>
     <li><a href=#the-input-element-as-a-check-box-and-radio-button-widgets><span class=secno>12.4.8 </span>The <code>input</code> element as a check box and radio button widgets</a></li>
     <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>12.4.9 </span>The <code>input</code> element as a file upload control</a></li>
     <li><a href=#the-input-element-as-a-button><span class=secno>12.4.10 </span>The <code>input</code> element as a button</a></li>
     <li><a href=#the-marquee-element-0><span class=secno>12.4.11 </span>The <code>marquee</code> element</a></li>
     <li><a href=#the-meter-element-0><span class=secno>12.4.12 </span>The <code>meter</code> element</a></li>
     <li><a href=#the-progress-element-0><span class=secno>12.4.13 </span>The <code>progress</code> element</a></li>
     <li><a href=#the-select-element-0><span class=secno>12.4.14 </span>The <code>select</code> element</a></li>
     <li><a href=#the-textarea-element-0><span class=secno>12.4.15 </span>The <code>textarea</code> element</a></li>
     <li><a href=#the-keygen-element-0><span class=secno>12.4.16 </span>The <code>keygen</code> element</a></li>
     <li><a href=#the-time-element-0><span class=secno>12.4.17 </span>The <code>time</code> element</a></ol></li>
   <li><a href=#frames-and-framesets><span class=secno>12.5 </span>Frames and framesets</a></li>
   <li><a href=#interactive-media><span class=secno>12.6 </span>Interactive media</a>
    <ol>
     <li><a href=#links,-forms,-and-navigation><span class=secno>12.6.1 </span>Links, forms, and navigation</a></li>
     <li><a href=#the-title-attribute-0><span class=secno>12.6.2 </span>The <code title=attr-title>title</code> attribute</a></li>
     <li><a href=#editing-hosts><span class=secno>12.6.3 </span>Editing hosts</a></ol></li>
   <li><a href=#print-media><span class=secno>12.7 </span>Print media</a></ol></li>
 <li><a href=#obsolete><span class=secno>13 </span>Obsolete features</a>
  <ol>
   <li><a href=#obsolete-but-conforming-features><span class=secno>13.1 </span>Obsolete but conforming features</a>
    <ol>
     <li><a href=#warnings-for-obsolete-but-conforming-features><span class=secno>13.1.1 </span>Warnings for obsolete but conforming features</a></ol></li>
   <li><a href=#non-conforming-features><span class=secno>13.2 </span>Non-conforming features</a></li>
   <li><a href=#requirements-for-implementations><span class=secno>13.3 </span>Requirements for implementations</a>
    <ol>
     <li><a href=#the-applet-element><span class=secno>13.3.1 </span>The <code>applet</code> element</a></li>
     <li><a href=#the-marquee-element><span class=secno>13.3.2 </span>The <code>marquee</code> element</a></li>
     <li><a href=#frames><span class=secno>13.3.3 </span>Frames</a></li>
     <li><a href=#other-elements,-attributes-and-apis><span class=secno>13.3.4 </span>Other elements, attributes and APIs</a></ol></ol></li>
 <li><a href=#iana><span class=secno>14 </span>IANA considerations</a>
  <ol>
   <li><a href=#text/html><span class=secno>14.1 </span><code>text/html</code></a></li>
   <li><a href=#text/html-sandboxed><span class=secno>14.2 </span><code>text/html-sandboxed</code></a></li>
   <li><a href=#application/xhtml+xml><span class=secno>14.3 </span><code>application/xhtml+xml</code></a></li>
   <li><a href=#text/cache-manifest><span class=secno>14.4 </span><code>text/cache-manifest</code></a></li>
   <li><a href=#text/ping><span class=secno>14.5 </span><code>text/ping</code></a></li>
   <li><a href=#text/srt><span class=secno>14.6 </span><code>text/srt</code></a></li>
   <li><a href=#application/microdata+json><span class=secno>14.7 </span><code>application/microdata+json</code></a></li>
   <li><a href=#ping-from><span class=secno>14.8 </span><code>Ping-From</code></a></li>
   <li><a href=#ping-to><span class=secno>14.9 </span><code>Ping-To</code></a></ol></li>
 <li><a class=no-num href=#index>Index</a>
  <ol>
   <li><a class=no-num href=#elements-1>Elements</a></li>
   <li><a class=no-num href=#element-content-categories>Element content categories</a></li>
   <li><a class=no-num href=#attributes-1>Attributes</a></li>
   <li><a class=no-num href=#interfaces>Interfaces</a></li>
   <li><a class=no-num href=#events-0>Events</a></ol></li>
 <li><a class=no-num href=#references>References</a></li>
 <li><a class=no-num href=#acknowledgements>Acknowledgements</a></ol>
<!--end-toc-->
  <hr><h2 id=introduction><span class=secno>1 </span>Introduction</h2>



  <h3 id=is-this-html5?><span class=secno>1.1 </span>Is this HTML5?</h3>

  <p><i>This section is non-normative.</i></p>



  <p>In short: Yes.</p>

  <p>In more length: "HTML5" has at various times been used to refer
  to a wide variety of technologies, some of which originated in this
  document, and some of which have only ever been tangentially
  related.</p>

  <p>This specification actually now defines the next generation of
  HTML after HTML5. HTML5 reached Last Call at the WHATWG in October
  2009, and shortly after we started working on some experimental new
  features that are not as stable as the rest of the
  specification. The stability of sections is annotated in the
  margin.</p>

  <p>The W3C has also been working on HTML in conjunction with the
  WHATWG; at the W3C, this document has been split into several parts,
  and the occasional informative paragraph or example has been removed
  for technical reasons. For all intents and purposes, however, the
  W3C HTML specifications and this specification are equivalent (and
  they are in fact all generated from the same source document).</p>

  <p>Features that are considered part of the next generation of HTML
  beyond HTML5 currently consist of only:</p>

  <ul class=brief><li>The <code><a href=#devices>device</a></code> element.</li>
   <li>The <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute and related <a href=#hyperlink-auditing>hyperlink auditing</a> features.</li>
  </ul><p>Features that are part of HTML5 (and this specification) but that
  are either currently, or have been in the past, published as
  separate specifications:</p>

  <ul class=brief><li><a href=#2dcontext>Canvas 2D Graphics Context</a>
   <li><a href=#microdata>Microdata</a>
   <li><a href=#mdvocabs>Microdata vocabularies</a>
   <li><a href=#crossDocumentMessages>Cross-document messaging</a> (also known as Communications)
   <li><a href=#channel-messaging>Channel messaging</a> (also known as Communications)
   <li><a href=#forms>Forms</a> (previously known as Web Forms 2)
  </ul><p>Features that are not currently in this document that were in the
  past considered part of HTML5, or that were never part of HTML5 but
  have been referred to as part of HTML5 in the media, include:</p>

  <ul class=brief><li><a href=http://www.whatwg.org/specs/web-workers/current-work/>Web Workers</a>
   <li><a href=http://dev.w3.org/html5/webstorage/>Web Storage</a>
   <li><a href=http://dev.w3.org/html5/websockets/>WebSocket API</a>
   <li><a href=http://www.whatwg.org/specs/web-socket-protocol/>WebSocket protocol</a>
<!--
   <li><a href="http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol">WebSocket protocol</a>
-->
   <li><a href=http://dev.w3.org/html5/eventsource/>Server-sent Events</a>
   <li><a href=http://dev.w3.org/html5/webdatabase/>Web SQL Database</a>
   <li><a href=http://dev.w3.org/geo/api/spec-source.html>Geolocation API</a>
   <li><a href=http://www.w3.org/TR/SVG/>SVG</a>
   <li><a href=http://www.w3.org/TR/MathML/>MathML</a>
   <li><a href=http://dev.w3.org/2006/webapi/XMLHttpRequest-2/>XMLHttpRequest</a>
  </ul><h3 id=background><span class=secno>1.2 </span>Background</h3>

  <p><i>This section is non-normative.</i></p>

  <p>The World Wide Web's markup language has always been HTML. HTML
  was primarily designed as a language for semantically describing
  scientific documents, although its general design and adaptations
  over the years have enabled it to be used to describe a number of
  other types of documents.</p>

  <p>The main area that has not been adequately addressed by HTML is a
  vague subject referred to as Web Applications. This specification
  attempts to rectify this, while at the same time updating the HTML
  specifications to address issues raised in the past few years.</p>


  <h3 id=audience><span class=secno>1.3 </span>Audience</h3>

  <p><i>This section is non-normative.</i></p>

  <p>This specification is intended for authors of documents and
  scripts that use the features defined in this specification<span class=impl>, implementors of tools that operate on pages that use
  the features defined in this specification, and individuals wishing
  to establish the correctness of documents or implementations with
  respect to the requirements of this specification</span>.</p>

  <p>This document is probably not suited to readers who do not
  already have at least a passing familiarity with Web technologies,
  as in places it sacrifices clarity for precision, and brevity for
  completeness. More approachable tutorials and authoring guides can
  provide a gentler introduction to the topic.</p>

  <p>In particular, familiarity with the basics of DOM Core and DOM
  Events is necessary for a complete understanding of some of the more
  technical parts of this specification. An understanding of Web IDL,
  HTTP, XML, Unicode, character encodings, JavaScript, and CSS will
  also be helpful in places but is not essential.</p>


  <h3 id=scope><span class=secno>1.4 </span>Scope</h3>

  <p><i>This section is non-normative.</i></p>

  <p>This specification is limited to providing a semantic-level
  markup language and associated semantic-level scripting APIs for
  authoring accessible pages on the Web ranging from static documents
  to dynamic applications.</p>

  <p>The scope of this specification does not include providing
  mechanisms for media-specific customization of presentation
  (although default rendering rules for Web browsers are included at
  the end of this specification, and several mechanisms for hooking
  into CSS are provided as part of the language).</p>

  <p>The scope of this specification is not to describe an entire
  operating system. In particular, hardware configuration software,
  image manipulation tools, and applications that users would be
  expected to use with high-end workstations on a daily basis are out
  of scope. In terms of applications, this specification is targeted
  specifically at applications that would be expected to be used by
  users on an occasional basis, or regularly but from disparate
  locations, with low CPU requirements. For instance online purchasing
  systems, searching systems, games (especially multiplayer online
  games), public telephone books or address books, communications
  software (e-mail clients, instant messaging clients, discussion
  software), document editing software, etc.</p>


  <h3 id=history-1><span class=secno>1.5 </span>History</h3>

  <p><i>This section is non-normative.</i></p>

  <p>For its first five years (1990-1995), HTML went through a number
  of revisions and experienced a number of extensions, primarily
  hosted first at CERN, and then at the IETF.</p>

  <p>With the creation of the W3C, HTML's development changed venue
  again. A first abortive attempt at extending HTML in 1995 known as
  HTML 3.0 then made way to a more pragmatic approach known as HTML
  3.2, which was completed in 1997. HTML4 followed, reaching
  completion in 1998.</p>

  <p>At this time, the W3C membership decided to stop evolving HTML
  and instead begin work on an XML-based equivalent, called
  XHTML. This effort started with a reformulation of HTML4 in XML,
  known as XHTML 1.0, which added no new features except the new
  serialization, and which was completed in 2000. After XHTML 1.0, the
  W3C's focus turned to making it easier for other working groups to
  extend XHTML, under the banner of XHTML Modularization. In parallel
  with this, the W3C also worked on a new language that was not
  compatible with the earlier HTML and XHTML languages, calling it
  XHTML2.</p>

  <p>Around the time that HTML's evolution was stopped in 1998, parts
  of the API for HTML developed by browser vendors were specified and
  published under the name DOM Level 1 (in 1998) and DOM Level 2 Core
  and DOM Level 2 HTML (starting in 2000 and culminating in
  2003). These efforts then petered out, with some DOM Level 3
  specifications published in 2004 but the working group being closed
  before all the Level 3 drafts were completed.</p>

  <p>In 2003, the publication of XForms, a technology which was
  positioned as the next generation of Web forms, sparked a renewed
  interest in evolving HTML itself, rather than finding replacements
  for it. This interest was borne from the realization that XML's
  deployment as a Web technology was limited to entirely new
  technologies (like RSS and later Atom), rather than as a replacement
  for existing deployed technologies (like HTML).</p>

  <p>A proof of concept to show that it was possible to extend HTML4's
  forms to provide many of the features that XForms 1.0 introduced,
  without requiring browsers to implement rendering engines that were
  incompatible with existing HTML Web pages, was the first result of
  this renewed interest. At this early stage, while the draft was
  already publicly available, and input was already being solicited
  from all sources, the specification was only under Opera Software's
  copyright.</p>

  <p>The idea that HTML's evolution should be reopened was tested at a
  W3C workshop in 2004, where some of the principles that underlie the
  HTML5 work (described below), as well as the aforementioned early
  draft proposal covering just forms-related features, were presented
  to the W3C jointly by Mozilla and Opera. The proposal was rejected
  on the grounds that the proposal conflicted with the previously
  chosen direction for the Web's evolution; the W3C staff and
  membership voted to continue developing XML-based replacements
  instead.</p>

  <p>Shortly thereafter, Apple, Mozilla, and Opera jointly announced
  their intent to continue working on the effort under the umbrella of
  a new venue called the WHATWG. A public mailing list was created,
  and the draft was moved to the WHATWG site. The copyright was
  subsequently amended to be jointly owned by all three vendors, and
  to allow reuse of the specification.</p>

  <p>The WHATWG was based on several core principles, in particular
  that technologies need to be backwards compatible, that
  specifications and implementations need to match even if this means
  changing the specification rather than the implementations, and that
  specifications need to be detailed enough that implementations can
  achieve complete interoperability without reverse-engineering each
  other.</p>

  <p>The latter requirement in particular required that the scope of
  the HTML5 specification include what had previously been specified
  in three separate documents: HTML4, XHTML1, and DOM2 HTML. It also
  meant including significantly more detail than had previously been
  considered the norm.</p>

  <p>In 2006, the W3C indicated an interest to participate in the
  development of HTML5 after all, and in 2007 formed a working group
  chartered to work with the WHATWG on the development of the HTML5
  specification. Apple, Mozilla, and Opera allowed the W3C to publish
  the specification under the W3C copyright, while keeping a version
  with the less restrictive license on the WHATWG site.</p>

  <p>Since then, both groups have been working together.</p>

  <p>A separate document has been published by the W3C HTML working
  group to document the differences between this specification and the
  language described in the HTML4 specification. <a href=#refsHTMLDIFF>[HTMLDIFF]</a></p>




  <h3 id=design-notes><span class=secno>1.6 </span>Design notes</h3>

  <p><i>This section is non-normative.</i></p>

  <p>It must be admitted that many aspects of HTML appear at first
  glance to be nonsensical and inconsistent.</p>

  <p>HTML, its supporting DOM APIs, as well as many of its supporting
  technologies, have been developed over a period of several decades
  by a wide array of people with different priorities who, in many
  cases, did not know of each other's existence.</p>

  <p>Features have thus arisen from many sources, and have not always
  been designed in especially consistent ways. Furthermore, because of
  the unique characteristics of the Web, implementation bugs have
  often become de-facto, and now de-jure, standards, as content is
  often unintentionally written in ways that rely on them before they
  can be fixed.</p>

  <p>Despite all this, efforts have been made to adhere to certain
  design goals. These are described in the next few subsections.</p>


  <h4 id=serializability-of-script-execution><span class=secno>1.6.1 </span>Serializability of script execution</h4>

  <p><i>This section is non-normative.</i></p>

  <p>To avoid exposing Web authors to the complexities of
  multithreading, the HTML and DOM APIs are designed such that no
  script can ever detect the simultaneous execution of other
  scripts. Even with <span title=Worker>workers</span>, the intent
  is that the behavior of implementations can be thought of as
  completely serializing the execution of all scripts in all <a href=#browsing-context title="browsing context">browsing contexts</a>.</p>

  <p class=note>The <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
  method, in this model, is equivalent to allowing other scripts to
  run while the calling script is blocked.</p>


  <h4 id=compliance-with-other-specifications><span class=secno>1.6.2 </span>Compliance with other specifications</h4>

  <p><i>This section is non-normative.</i></p>

  <p>This specification interacts with and relies on a wide variety of
  other specifications. In certain circumstances, unfortunately,
  conflicting needs have led to this specification violating the
  requirements of these other specifications. Whenever this has
  occurred, the transgressions have each been noted as a "<dfn id=willful-violation>willful
  violation</dfn>", and the reason for the violation has been
  noted.</p>




  <h3 id=html-vs-xhtml><span class=secno>1.7 </span>HTML vs XHTML</h3>

  <p><i>This section is non-normative.</i></p>

  <p>This specification defines an abstract language for describing
  documents and applications, and some APIs for interacting with
  in-memory representations of resources that use this language.</p>

  <p>The in-memory representation is known as "DOM HTML", or "the DOM"
  for short. This specification defines version 5 of DOM HTML, known
  as "DOM5 HTML".</p>

  <p>There are various concrete syntaxes that can be used to transmit
  resources that use this abstract language, two of which are defined
  in this specification.</p>

  <p>The first such concrete syntax is the HTML syntax. This is the
  format suggested for most authors. It is compatible with most legacy
  Web browsers. If a document is transmitted with an <a href=#html-mime-type>HTML MIME
  type</a>, such as <code><a href=#text/html>text/html</a></code>, then it will be
  processed as an HTML document by Web browsers.

  This specification defines the latest HTML syntax, known simply as
  "HTML".
  

  </p>

  <p>The second concrete syntax is the XHTML syntax, which is an
  application of XML. When a document is transmitted with an <a href=#xml-mime-type>XML
  MIME type</a>, such as <code><a href=#application/xhtml+xml>application/xhtml+xml</a></code>, then
  it is treated as an XML document by Web browsers, to be parsed by an
  XML processor. Authors are reminded that the processing for XML and
  HTML differs; in particular, even minor syntax errors will prevent a
  document labeled as XML from being rendered fully, whereas they
  would be ignored in the HTML syntax.

  This specification defines the latest XHTML syntax, known simply as
  "XHTML".
  

  </p>

  <p>The DOM, the HTML syntax, and XML cannot all represent the same
  content. For example, namespaces cannot be represented using the
  HTML syntax, but they are supported in the DOM and in XML.
  Similarly, documents that use the <code><a href=#the-noscript-element>noscript</a></code> feature can
  be represented using the HTML syntax, but cannot be represented with
  the DOM or in XML. Comments that contain the string "<code title="">--&gt;</code>" can be represented in the DOM but not in the
  HTML syntax or in XML.</p>


  <h3 id=structure-of-this-specification><span class=secno>1.8 </span>Structure of this specification</h3>

  <p><i>This section is non-normative.</i></p>

  <p>This specification is divided into the following major
  sections:</p>

  <dl><dt><a href=#infrastructure>Common infrastructure</a></dt>

   <dd>The conformance classes, algorithms, definitions, and the
   common underpinnings of the rest of the specification.</dd>


   <dt><a href=#dom>Semantics, structure, and APIs of HTML documents</a></dt>

   <dd>Documents are built from elements. These elements form a tree
   using the DOM. This section defines the features of this DOM, as
   well as introducing the features common to all elements, and the
   concepts used in defining elements.</dd>


   <dt><a href=#semantics>The elements of HTML</a></dt>

   <dd>Each element has a predefined meaning, which is explained in
   this section. Rules for authors on how to use the element<span class=impl>, along with user agent requirements for how to handle
   each element,</span> are also given.</dd>


   <dt><a href=#microdata>Microdata</a></dt>

   <dd>This specification introduces a mechanism for adding
   machine-readable annotations to documents, so that tools can
   extract trees of name/value pairs from the document. This section
   describes this mechanism<span class=impl> and some algorithms
   that can be used to convert HTML documents into other
   formats</span>.

   This section also defines some Microdata vocabularies for contact
   information, calendar events, and licensing works.

   </dd>


   <dt><a href=#browsers>Loading Web pages</a></dt>

   <dd>HTML documents do not exist in a vacuum &mdash; this section
   defines many of the features that affect environments that deal
   with multiple pages.</dd>

   <dt><a href=#webappapis>Web application APIs</a></dt>

   <dd>This section introduces basic features for scripting of
   applications in HTML.</dd>

   <dt><a href=#editing>User interaction</a></dt>

   <dd>HTML documents can provide a number of mechanisms for users to
   interact with and modify content, which are described in this
   section.</dd>




   <dt><a href=#comms>The communication APIs</a></dt>

   <dd>This section describes some mechanisms that applications
   written in HTML can use to communicate with other applications from
   different domains running on the same client.
   </dd>



   <dt><a href=#syntax>The HTML syntax</a></dt>
   <dt><a href=#xhtml>The XHTML syntax</a></dt>

   <dd>All of these features would be for naught if they couldn't be
   represented in a serialized form and sent to other people, and so
   these sections define the syntaxes of HTML, along with rules for
   how to parse content using those syntaxes.</dd>


  </dl><p>There are also some appendices, defining <a href=#rendering>rendering rules</a> for Web browsers and listing
  <a href=#obsolete>obsolete features</a> and <a href=#iana>IANA
  considerations</a>.</p>



  <h4 id=how-to-read-this-specification><span class=secno>1.8.1 </span>How to read this specification</h4>

  <p>This specification should be read like all other specifications.
  First, it should be read cover-to-cover, multiple times. Then, it
  should be read backwards at least once. Then it should be read by
  picking random sections from the contents list and following all the
  cross-references.</p>



  <h4 id=typographic-conventions><span class=secno>1.8.2 </span>Typographic conventions</h4>

  <p>This is a definition, requirement, or explanation.</p>

  <p class=note>This is a note.</p>

  <p class=example>This is an example.</p>

  <p class=XXX>This is an open issue.</p>

  <p class=warning>This is a warning.</p>

  <pre class="idl extract">interface <dfn title="">Example</dfn> {
  // this is an IDL definition
};</pre>

  <dl class=domintro><dt><var title="">variable</var> = <var title="">object</var> . <code title="">method</code>( [ <var title="">optionalArgument</var> ] )</dt>

   <dd>

    <p>This is a note to authors describing the usage of an interface.</p>

   </dd>

  </dl><pre class=css>/* this is a CSS fragment */</pre>

  <p>The defining instance of a term is marked up like <dfn id=x-this title=x-this>this</dfn>. Uses of that term are marked up like
  <a href=#x-this title=x-this>this</a> or like <i title=x-this><a href=#x-this>this</a></i>.</p>

  <p>The defining instance of an element, attribute, or API is marked
  up like <dfn id=x-that title=x-that><code>this</code></dfn>. References to
  that element, attribute, or API are marked up like <code title=x-that><a href=#x-that>this</a></code>.</p>

  <p>Other code fragments are marked up <code title="">like
  this</code>.</p>

  <p>Variables are marked up like <var title="">this</var>.</p>

  <p class=impl>This is an implementation requirement.</p>



  <h3 id=a-quick-introduction-to-html><span class=secno>1.9 </span>A quick introduction to HTML</h3>

  <p><i>This section is non-normative.</i></p>

  <p>A basic HTML document looks like this:</p>

  <pre id=intro-early-example>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Sample page&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;Sample page&lt;/h1&gt;
  &lt;p&gt;This is a &lt;a href="demo.html"&gt;simple&lt;/a&gt; sample.&lt;/p&gt;
  &lt;!-- this is a comment --&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  <p>HTML documents consist of a tree of elements and text. Each
  element is denoted in the source by a <a href=#syntax-start-tag title=syntax-start-tag>start tag</a>, such as "<code title="">&lt;body&gt;</code>", and an <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a>, such as "<code title="">&lt;/body&gt;</code>". (Certain
  start tags and end tags can in certain cases be <a href=#syntax-tag-omission title=syntax-tag-omission>omitted</a> and are implied by other
  tags.)</p>

  <p>Tags have to be nested such that elements are all completely
  within each other, without overlapping:</p>

  <pre class=bad>&lt;p&gt;This is &lt;em&gt;very &lt;strong&gt;wrong&lt;/em&gt;!&lt;/strong&gt;&lt;/p&gt;</pre>
  <pre>&lt;p&gt;This &lt;em&gt;is &lt;strong&gt;correct&lt;/strong&gt;.&lt;/em&gt;&lt;/p&gt;</pre>

  <p>This specification defines a set of elements that can be used in
  HTML, along with rules about the ways in which the elements can be
  nested.</p>

  <p>Elements can have attributes, which control how the elements
  work. In the example below, there is a <a href=#hyperlink>hyperlink</a>,
  formed using the <code><a href=#the-a-element>a</a></code> element and its <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute:</p>

  <pre>&lt;a href="demo.html"&gt;simple&lt;/a&gt;</pre>

  <p><a href=#syntax-attributes title=syntax-attributes>Attributes</a> are placed
  inside the start tag, and consist of a <a href=#syntax-attribute-name title=syntax-attribute-name>name</a> and a <a href=#syntax-attribute-value title=syntax-attribute-value>value</a>, separated by an "<code title="">=</code>" character. The attribute value can remain <a href=#unquoted>unquoted</a> if it doesn't contain spaces or any of
  <code title="">"</code> <code title="">'</code> <code title="">`</code> <code title="">=</code> <code title="">&lt;</code>
  or <code title="">&gt;</code>. Otherwise, it has to be quoted using
  either single or double quotes. The value, along with the "<code title="">=</code>" character, can be omitted altogether if the value
  is the empty string.</p>

  <pre>&lt;!-- empty attributes --&gt;
&lt;input name=address disabled&gt;
&lt;input name=address disabled=""&gt;

&lt;!-- attributes with a value --&gt;
&lt;input name=address maxlength=200&gt;
&lt;input name=address maxlength='200'&gt;
&lt;input name=address maxlength="200"&gt;</pre>

  <p>HTML user agents (e.g. Web browsers) then <i>parse</i> this
  markup, turning it into a DOM (Document Object Model) tree. A DOM
  tree is an in-memory representation of a document.</p>

  <p>DOM trees contain several kinds of nodes, in particular a DOCTYPE
  node, elements, text nodes, and comment nodes.</p>

  <p>The <a href=#intro-early-example>markup snippet at the top of
  this section</a> would be turned into the following DOM tree:</p>

  <ul class=domTree><li class=t10>DOCTYPE: <code><a href=#the-html-element-0>html</a></code><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</span><li class=t1><code><a href=#the-title-element-0>title</a></code><ul><li class=t3><code>#text</code>: <span title="">Sample page</span></ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;</span></ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;</span><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</span><li class=t1><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><ul><li class=t3><code>#text</code>: <span title="">Sample page</span></ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</span><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">This is a </span><li class=t1><code><a href=#the-a-element>a</a></code> <span class=t2 title=""><code class="attribute name">href</code>="<code class="attribute value">demo.html</code>"</span><ul><li class=t3><code>#text</code>: <span title="">simple</span></ul><li class=t3><code>#text</code>: <span title=""> sample.</span></ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</span><li class=t8><code>#comment</code>: <span title=""> this is a comment </span><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9166;</span></ul></ul></ul><p>The <a href=#root-element>root element</a> of this tree is the
  <code><a href=#the-html-element-0>html</a></code> element, which is the element always found at the
  root of HTML documents. It contains two elements, <code><a href=#the-head-element-0>head</a></code>
  and <code><a href=#the-body-element-0>body</a></code>, as well as a text node between them.</p>

  <p>There are many more text nodes in the DOM tree than one would
  initially expect, because the source contains a number of spaces
  (represented here by "&#9251;") and line breaks ("&#9166;") that
  all end up as text nodes in the DOM.</p>

  <p>The <code><a href=#the-head-element-0>head</a></code> element contains a <code><a href=#the-title-element-0>title</a></code>
  element, which itself contains a text node with the text "Sample
  page". Similarly, the <code><a href=#the-body-element-0>body</a></code> element contains an
  <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element, a <code><a href=#the-p-element>p</a></code> element, and a
  comment.</p>

  <hr><p>This DOM tree can be manipulated from scripts in the
  page. Scripts (typically in JavaScript) are small programs that can
  be embedded using the <code><a href=#script>script</a></code> element or using
  <a href=#event-handler-content-attributes>event handler content attributes</a>. For example, here is
  a form with a script that sets the value of the form's
  <code><a href=#the-output-element>output</a></code> element to say "Hello World":</p>

  <pre>&lt;<a href=#the-form-element>form</a> <a href=#attr-form-name title=attr-form-name>name</a>="main"&gt;
 Result: &lt;<a href=#the-output-element>output</a> <a href=#attr-fe-name title=attr-fe-name>name</a>="result"&gt;&lt;/output&gt;
 &lt;<a href=#script>script</a>&gt;
  <a href=#htmldocument title=HTMLDocument>document</a>.<a href=#dom-document-forms title=dom-document-forms>forms</a>.main.<a href=#dom-form-elements title=dom-form-elements>elements</a>.result.<a href=#dom-output-value title=dom-output-value>value</a> = 'Hello World';
 &lt;/script&gt;
&lt;/form&gt;</pre>

  <p>Each element in the DOM tree is represented by an object, and
  these objects have APIs so that they can be manipulated. For
  instance, a link (e.g. the <code><a href=#the-a-element>a</a></code> element in the tree above)
  can have its "<code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>"
  attribute changed in several ways:</p>

  <pre>var a = <a href=#htmldocument title=HTMLDocument>document</a>.<a href=#dom-document-links title=dom-document-links>links</a>[0]; // obtain the first link in the document
a.<a href=#dom-a-href title=dom-a-href>href</a> = 'sample.html'; // change the destination URL of the link
a.<a href=#dom-uda-protocol title=dom-uda-protocol>protocol</a> = 'https'; // change just the scheme part of the URL
a.setAttribute('href', 'http://example.com/'); // change the content attribute directly</pre>

  <p>Since DOM trees are used as the way to represent HTML documents
  when they are processed and presented by implementations (especially
  interactive implementations like Web browsers), this specification
  is mostly phrased in terms of DOM trees, instead of the markup
  described above.</p>

  <hr><p>HTML documents represent a media-independent description of
  interactive content. HTML documents might be rendered to a screen,
  or through a speech synthesizer, or on a braille display. To
  influence exactly how such rendering takes place, authors can use a
  styling language such as CSS.</p>

  <p>In the following example, the page has been made yellow-on-blue
  using CSS.</p>

  <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Sample styled page&lt;/title&gt;
  &lt;style&gt;
   body { background: navy; color: yellow; }
  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;Sample styled page&lt;/h1&gt;
  &lt;p&gt;This page is just a demo.&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  <p>For more details on how to use HTML, authors are encouraged to
  consult tutorials and guides. Some of the examples included in this
  specification might also be of use, but the novice author is
  cautioned that this specification, by necessity, defines the
  language with a level of detail that might be difficult to
  understand at first.</p>


  <h3 id=conformance-requirements-for-authors><span class=secno>1.10 </span>Conformance requirements for authors</h3>

  <p><i>This section is non-normative.</i></p>

  <p>Unlike previous versions of the HTML specification, this
  specification defines in some detail the required processing for
  invalid documents as well as valid documents.</p> <!-- This has led
  to some questioning the purpose of conformance criteria: if there is
  no ambiguity in how something will be processed, why disallow it? -->

  <p>However, even though the processing of invalid content is in most
  cases well-defined, conformance requirements for documents are still
  important: in practice, interoperability (the situation in which all
  implementations process particular content in a reliable and
  identical or equivalent way) is not the only goal of document
  conformance requirements. This section details some of the more
  common reasons for still distinguishing between a conforming
  document and one with errors.</p>


  <h4 id=presentational-markup><span class=secno>1.10.1 </span>Presentational markup</h4>

  <p><i>This section is non-normative.</i></p>

  <p>The majority of presentational features from previous versions of
  HTML are no longer allowed. Presentational markup in general has
  been found to have a number of problems:</p>

  <dl><dt>The use of presentational elements leads to poorer accessibility</dt>

   <dd>

    <p>While it is possible to use presentational markup in a way that
    provides users of assistive technologies (ATs) with an acceptable
    experience (e.g. using ARIA), doing so is significantly more
    difficult than doing so when using semantically-appropriate
    markup. Furthermore, even using such techniques doesn't help make
    pages accessible for non-AT non-graphical users, such as users of
    text-mode browsers.</p>

    <p>Using media-independent markup, on the other hand, provides an
    easy way for documents to be authored in such a way that they work
    for more users (e.g. text browsers).</p>

   </dd>


   <dt>Higher cost of maintenance</dt>

   <dd>

    <p>It is significantly easier to maintain a site written in such a
    way that the markup is style-independent. For example, changing
    the color of a site that uses <code>&lt;font&nbsp;color=""&gt;</code>
    throughout requires changes across the entire site, whereas a
    similar change to a site based on CSS can be done by changing a
    single file.</p>

   </dd>


   <dt>Higher document sizes</dt>

   <dd>

    <p>Presentational markup tends to be much more redundant, and thus
    results in larger document sizes.</p>

   </dd>

  </dl><p>For those reasons, presentational markup has been removed from
  HTML in this version. This change should not come as a surprise;
  HTML4 deprecated presentational markup many years ago and provided a
  mode (HTML4 Transitional) to help authors move away from
  presentational markup; later, XHTML 1.1 went further and obsoleted
  those features altogether.</p>

  <p>The only remaining presentational markup features in HTML are the
  <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute and the
  <code><a href=#the-style-element>style</a></code> element. Use of the <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute is somewhat discouraged in
  production environments, but it can be useful for rapid prototyping
  (where its rules can be directly moved into a separate style sheet
  later) and for providing specific styles in unusual cases where a
  separate style sheet would be inconvenient. Similarly, the
  <code><a href=#the-style-element>style</a></code> element can be useful in syndication or for
  page-specific styles, but in general an external style sheet is
  likely to be more convenient when the styles apply to multiple
  pages.</p>

  <p>It is also worth noting that four elements that were previously
  presentational have been redefined in this specification to be
  media-independent: <code><a href=#the-b-element>b</a></code>, <code><a href=#the-i-element>i</a></code>, <code><a href=#the-hr-element>hr</a></code>,
  and <code><a href=#the-small-element>small</a></code>.</p>


  <h4 id=syntax-errors><span class=secno>1.10.2 </span>Syntax errors</h4>

  <p><i>This section is non-normative.</i></p>

  <p>The syntax of HTML is constrained to avoid a wide variety of
  problems.</p>

  <dl><dt>Unintuitive error-handling behavior</dt>

   <dd>

    <p>Certain invalid syntax constructs, when parsed, result in DOM
    trees that are highly unintuitive.</p>

    <div class=example>

     <p>For example, the following markup fragment results in a DOM
     with an <code><a href=#the-hr-element>hr</a></code> element that is an <em>earlier</em>
     sibling of the corresponding <code><a href=#the-table-element>table</a></code> element:</p>

     <pre class=bad>&lt;table&gt;&lt;hr&gt;...</pre>

    </div>

   </dd>


   <dt>Errors with optional error recovery</dt>

   <dd>

    <p>To allow user agents to be used in controlled environments
    without having to implement the more bizarre and convoluted error
    handling rules, user agents are permitted to fail whenever
    encountering a <a href=#parse-error>parse error</a>.</p>

   </dd>


   <dt>Errors where the error-handling behavior is not compatible with streaming user agents</dt>

   <dd>

    <p>Some error-handling behavior, such as the behavior for the
    <code title="">&lt;table&gt;&lt;hr&gt;...</code> example mentioned
    above, are incompatible with streaming user agents. To avoid
    interoperability problems with such user agents, any syntax
    resulting in such behavior is considered invalid.</p>

   </dd>


   <dt>Errors that can result in infoset coercion</dt>

   <dd>

    <p>When a user agent based on XML is connected to an HTML parser,
    it is possible that certain invariants that XML enforces, such as
    comments never containing two consecutive hyphens, will be
    violated by an HTML file. Handling this can require that the
    parser coerce the HTML DOM into an XML-compatible infoset. Most
    syntax constructs that require such handling are considered
    invalid.</p>

   </dd>


   <dt>Errors that result in disproportionally poor performance</dt>

   <dd>

    <p>Certain syntax constructs can result in disproportionally poor
    performance. To discourage the use of such constructs, they are
    typically made non-conforming.</p>

    <div class=example>

     <p>For example, the following markup results in poor performance
     when hitting the highlighted end tag, since all the open elements
     are examined first to see if they match the close tag:</p>

     <pre class=bad>&lt;p&gt;&lt;em&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;...&lt;span&gt;&lt;span&gt;&lt;span&gt;<strong>&lt;/em&gt;</strong></pre>

    </div>

   </dd>


   <dt>Errors involving fragile syntax constructs</dt>

   <dd>

    <p>There are syntax constructs that, for historical reasons, are
    relatively fragile. To help reduce the number of users who
    accidentally run into such problems, they are made
    non-conforming.</p>

    <div class=example>

     <p>For example, the parsing of certain named character references
     in attributes happens even with the closing semicolon being
     omitted. It is safe to include an ampersand followed by letters
     that do not form a named character reference, but if the letters
     are changed to a string that <em>does</em> form a named character
     reference, they will be interpreted as that character instead.</p>

     <p>In this fragment, the attribute's value is "<code title="">?hello=1&amp;world=2</code>":</p>

     <pre class=bad>&lt;a href="?hello=1&amp;world=2"&gt;Demo&lt;/a&gt;</pre>

     <p>In the following fragment, however, the attribute's value is
     actually "<code title="">?original=1&copy;=2</code>",
     <em>not</em> the intended "<code title="">?original=1&amp;copy=2</code>":</p>

     <pre class=bad>&lt;a href="?original=1&amp;copy=2"&gt;Compare&lt;/a&gt;</pre>

     <p>To avoid this problem, all named character references are
     required to end with a semicolon, and uses of named character
     references without a semicolon are flagged as errors.</p>

     <p>Thus, the correct way to express the above cases is as
     follows:</p>

     <pre>&lt;a href="?hello=1&amp;world=2"&gt;Demo&lt;/a&gt; &lt;!-- &amp;world is ok, since it's not a named character reference --&gt;</pre>
     <pre>&lt;a href="?original=1&amp;amp;copy=2"&gt;Compare&lt;/a&gt; &lt;!-- the &amp; has to be escaped, since &amp;copy <em>is</em> a named character reference --&gt;</pre>

    </div>

   </dd>


   <dt>Errors involving known interoperability problems in legacy user agents</dt>

   <dd>

    <p>Certain syntax constructs are known to cause especially subtle
    or serious problems in legacy user agents, and are therefore
    marked as non-conforming to help authors avoid them.</p>

    <div class=example>

     <p>For example, this is why the U+0060 GRAVE ACCENT character (`)
     is not allowed in unquoted attributes. In certain legacy user
     agents, <!-- namely IE --> it is sometimes treated as a quote
     character.</p>

    </div>

    <div class=example>

     <p>Another example of this is the DOCTYPE, which is required to
     trigger <a href=#no-quirks-mode>no-quirks mode</a>, because the behavior of
     legacy user agents in <a href=#quirks-mode>quirks mode</a> is often largely
     undocumented.</p>

    </div>

   </dd>


   <dt>Errors that risk exposing authors to security attacks</dt>

   <dd>

    <p>Certain restrictions exist purely to avoid known security
    problems.</p>

    <div class=example>

     <p>For example, the restriction on using UTF-7 exists purely to
     avoid authors falling prey to a known cross-site-scripting attack
     using UTF-7.</p>

    </div>

   </dd>


   <dt>Cases where the author's intent is unclear</dt>

   <dd>

    <p>Markup where the author's intent is very unclear is often made
    non-conforming. Correcting these errors early makes later
    maintenance easier.</p>

    <div class=example>

     <p>For example, it is unclear whether the author intended the
     following to be an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> heading or an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>
     heading:</p>

     <pre class=bad>&lt;h1&gt;Contact details&lt;/h2&gt;</pre>

    </div>

   </dd>


   <dt>Cases that are likely to be typos</dt>

   <dd>

    <p>When a user makes a simple typo, it is helpful if the error can
    be caught early, as this can save the author a lot of debugging
    time. This specification therefore usually considers it an error
    to use element names, attribute names, and so forth, that do not
    match the names defined in this specification.</p>

    <div class=example>

     <p>For example, if the author typed <code>&lt;capton&gt;</code>
     instead of <code>&lt;caption&gt;</code>, this would be flagged as an
     error and the author could correct the typo immediately.</p>

    </div>

   </dd>


   <dt>Errors that could interfere with new syntax in the future</dt>

   <dd>

    <p>In order to allow the language syntax to be extended in the
    future, certain otherwise harmless features are disallowed.</p>

    <div class=example>

     <p>For example, "attributes" in end tags are ignored currently,
     but they are invalid, in case a future change to the language
     makes use of that syntax feature without conflicting with
     already-deployed (and valid!) content.</p>

    </div>

   </dd>


  </dl><p>Some authors find it helpful to be in the practice of always
  quoting all attributes and always including all optional tags,
  preferring the consistency derived from such custom over the minor
  benefits of terseness afforded by making use of the flexibility of
  the HTML syntax. To aid such authors, conformance checkers can
  provide modes of operation wherein such conventions are
  enforced.</p>



  <h4 id=restrictions-on-content-models-and-on-attribute-values><span class=secno>1.10.3 </span>Restrictions on content models and on attribute values</h4>

  <p><i>This section is non-normative.</i></p>

  <p>Beyond the syntax of the language, this specification also places
  restrictions on how elements and attributes can be specified. These
  restrictions are present for similar reasons:</p>

  <dl><dt>Errors involving content with dubious semantics</dt>

   <dd>

    <p>To avoid misuse of elements with defined meanings, content
    models are defined that restrict how elements can be nested when
    such nestings would be of dubious value.</p>

    <p class=example>For example, this specification disallows
    nesting a <code><a href=#the-section-element>section</a></code> element inside a <code><a href=#the-kbd-element>kbd</a></code>
    element, since it is highly unlikely for an author to indicate
    that an entire section should be keyed in.</p>

   </dd>


   <dt>Errors that involve a conflict in expressed semantics</dt>

   <dd>

    <p>Similarly, to draw the author's attention to mistakes in the
    use of elements, clear contradictions in the semantics expressed
    are also considered conformance errors.</p>

    <div class=example>

     <p>In the fragments below, for example, the semantics are
     nonsensical: a row cannot simultaneously be a cell, nor can a
     radio button be a progress bar.</p>

     <pre class=bad>&lt;tr role="cell"&gt;</pre>
     <pre class=bad>&lt;input type=radio role=progressbar&gt;</pre>

    </div>

    <p class=example>Another example is the restrictions on the
    content models of the <code><a href=#the-ul-element>ul</a></code> element, which only allows
    <code><a href=#the-li-element>li</a></code> element children. Lists by definition consist just
    of zero or more list items, so if a <code><a href=#the-ul-element>ul</a></code> element
    contains something other than an <code><a href=#the-li-element>li</a></code> element, it's not
    clear what was meant.</p>

   </dd>


   <dt>Cases where the default styles are likely to lead to confusion</dt>

   <dd>

    <p>Certain elements have default styles or behaviors that make
    certain combinations likely to lead to confusion. Where these have
    equivalent alternatives without this problem, the confusing
    combinations are disallowed.</p>

    <p class=example>For example, <code><a href=#the-div-element>div</a></code> elements are
    rendered as block boxes, and <code><a href=#the-span-element>span</a></code> elements as inline
    boxes. Putting a block box in an inline box is unnecessarily
    confusing; since either nesting just <code><a href=#the-div-element>div</a></code> elements, or
    nesting just <code><a href=#the-span-element>span</a></code> elements, or nesting
    <code><a href=#the-span-element>span</a></code> elements inside <code><a href=#the-div-element>div</a></code> elements all
    serve the same purpose as nesting a <code><a href=#the-div-element>div</a></code> element in a
    <code><a href=#the-span-element>span</a></code> element, but only the latter involves a block
    box in an inline box, the latter combination is disallowed.</p>

    <p class=example>Another example would be the way
    <a href=#interactive-content>interactive content</a> cannot be nested. For example, a
    <code><a href=#the-button-element>button</a></code> element cannot contain a <code><a href=#the-textarea-element>textarea</a></code>
    element. This is because the default behavior of such nesting
    interactive elements would be highly confusing to users. Instead
    of nesting these elements, they can be placed side by side.</p>

   </dd>


   <dt>Errors that indicate a likely misunderstanding of the specification</dt>

   <dd>

    <p>Sometimes, something is disallowed because allowing it would
    likely cause author confusion.</p>

    <p class=example>For example, setting the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute to the value
    "<code title="">false</code>" is disallowed, because despite the
    appearance of meaning that the element is enabled, it in fact
    means that the element is <em>disabled</em> (what matters for
    implementations is the presence of the attribute, not its
    value).</p>

   </dd>


   <dt>Errors involving limits that have been imposed merely to simplify the language</dt>

   <dd>

    <p>Some conformance errors simplify the language that authors need
    to learn.</p>

    <p class=example>For example, the <code><a href=#the-area-element>area</a></code> element's
    <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute, despite
    accepting both <code title=attr-area-shape-keyword-circ><a href=#attr-area-shape-keyword-circ>circ</a></code> and <code title=attr-area-shape-keyword-circle><a href=#attr-area-shape-keyword-circle>circle</a></code> values in
    practice as synonyms, disallows the use of the <code title=attr-area-shape-keyword-circ><a href=#attr-area-shape-keyword-circ>circ</a></code> value, so as to
    simplify tutorials and other learning aids. There would be no
    benefit to allowing both, but it would cause extra confusion when
    teaching the language.</p>

   </dd>


   <dt>Errors that involve peculiarities of the parser</dt>

   <dd>

    <p>Certain elements are parsed in somewhat eccentric ways
    (typically for historical reasons), and their content model
    restrictions are intended to avoid exposing the author to these
    issues.</p>

    <div class=example>

     <p>For example, a <code><a href=#the-form-element>form</a></code> element isn't allowed inside
     <a href=#phrasing-content>phrasing content</a>, because when parsed as HTML, a
     <code><a href=#the-form-element>form</a></code> element's start tag will imply a <code><a href=#the-p-element>p</a></code>
     element's end tag. Thus, the following markup results in two
     <a href=#paragraph title=paragraph>paragraphs</a>, not one:</p>

     <pre>&lt;p&gt;Welcome. &lt;form&gt;&lt;label&gt;Name:&lt;/label&gt; &lt;input&gt;&lt;/form&gt;</pre>

     <p>It is parsed exactly like the following:</p>

     <pre>&lt;p&gt;Welcome. &lt;/p&gt;&lt;form&gt;&lt;label&gt;Name:&lt;/label&gt; &lt;input&gt;&lt;/form&gt;</pre>

    </div>

   </dd>


   <dt>Errors that would likely result in scripts failing in hard-to-debug ways</dt>

   <dd>

    <p>Some errors are intended to help prevent script problems that
    would be hard to debug.</p>

    <p class=example>This is why, for instance, it is non-conforming
    to have two <code title=attr-id><a href=#the-id-attribute>id</a></code> attributes with the
    same value. Duplicate IDs lead to the wrong element being
    selected, with sometimes disastrous effects whose cause is hard to
    determine.</p>

   </dd>


   <dt>Errors that waste authoring time</dt>

   <dd>

    <p>Some constructs are disallowed because historically they have
    been the cause of a lot of wasted authoring time, and by
    encouraging authors to avoid making them, authors can save time in
    future efforts.</p>

    <p class=example>For example, a <code><a href=#script>script</a></code> element's
    <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute causes the
    element's contents to be ignored. However, this isn't obvious,
    especially if the element's contents appear to be executable
    script &mdash; which can lead to authors spending a lot of time
    trying to debug the inline script without realising that it is not
    executing. To reduce this problem, this specification makes it
    non-conforming to have executable script in a <code><a href=#script>script</a></code>
    element when the <code title=attr-script-src><a href=#attr-script-src>src</a></code>
    attribute is present. This means that authors who are validating
    their documents are less likely to waste time with this kind of
    mistake.</p>

   </dd>


   <dt>Errors that involve areas that affect authors migrating to and from XHTML</dt>

   <dd>

    <p>Some authors like to write files that can be interpreted as
    both XML and HTML with similar results. Though this practice is
    discouraged in general due to the myriad of subtle complications
    involved (especially when involving scripting, styling, or any
    kind of automated serialization), this specification has a few
    restrictions intended to at least somewhat mitigate the
    difficulties. This makes it easier for authors to use this as a
    transitionary step when migrating between HTML and XHTML.</p>

    <p class=example>For example, there are somewhat complicated
    rules surrounding the <code title=attr-lang><a href=#attr-lang>lang</a></code> and
    <code title=attr-xml-lang><a href=#attr-xml-lang>xml:lang</a></code> attributes intended
    to keep the two synchronized.</p>

    <p class=example>Another example would be the restrictions on
    the values of <code title="">xmlns</code> attributes in the HTML
    serialization, which are intended to ensure that elements in
    conforming documents end up in the same namespaces whether
    processed as HTML or XML.</p>

   </dd>


   <dt>Errors that involve areas reserved for future expansion</dt>

   <dd>

    <p>As with the restrictions on the syntax intended to allow for
    new syntax in future revisions of the language, some restrictions
    on the content models of elements and values of attributes are
    intended to allow for future expansion of the HTML vocabulary.</p>

    <p class=example>For example, limiting the values of the <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute that start
    with an U+005F LOW LINE character (_) to only specific predefined
    values allows new predefined values to be introduced at a future
    time without conflicting with author-defined values.</p>

   </dd>


   <dt>Errors that indicate a mis-use of other specifications</dt>

   <dd>

    <p>Certain restrictions are intended to support the restrictions
    made by other specifications.</p>

    <p class=example>For example, requiring that attributes that
    take media queries use only <em>valid</em> media queries
    reinforces the importance of following the conformance rules of
    that specification.</p>

   </dd>

  </dl><h3 id=recommended-reading><span class=secno>1.11 </span>Recommended reading</h3>

  <p><i>This section is non-normative.</i></p>

  <p>The following documents might be of interest to readers of this
  specification.</p>

  <dl><dt><cite>Character Model for the World Wide Web 1.0: Fundamentals</cite> <a href=#refsCHARMOD>[CHARMOD]</a></dt>

   <dd><blockquote><p>This Architectural Specification provides
   authors of specifications, software developers, and content
   developers with a common reference for interoperable text
   manipulation on the World Wide Web, building on the Universal
   Character Set, defined jointly by the Unicode Standard and ISO/IEC
   10646. Topics addressed include use of the terms 'character',
   'encoding' and 'string', a reference processing model, choice and
   identification of character encodings, character escaping, and
   string indexing.</blockquote></dd>

   <dt><cite>Unicode Security Considerations</cite> <a href=#refsUTR36>[UTR36]</a></dt>

   <dd><blockquote><p>Because Unicode contains such a large number of
   characters and incorporates the varied writing systems of the
   world, incorrect usage can expose programs or systems to possible
   security attacks. This is especially important as more and more
   products are internationalized. This document describes some of the
   security considerations that programmers, system analysts,
   standards developers, and users should take into account, and
   provides specific recommendations to reduce the risk of
   problems.</blockquote></dd>

   <dt><cite>Web Content Accessibility Guidelines (WCAG) 2.0</cite> <a href=#refsWCAG>[WCAG]</a></dt>

   <dd><blockquote><p>Web Content Accessibility Guidelines (WCAG) 2.0
   covers a wide range of recommendations for making Web content more
   accessible. Following these guidelines will make content accessible
   to a wider range of people with disabilities, including blindness
   and low vision, deafness and hearing loss, learning disabilities,
   cognitive limitations, limited movement, speech disabilities,
   photosensitivity and combinations of these. Following these
   guidelines will also often make your Web content more usable to
   users in general.</blockquote></dd>

   <dt class=impl><cite>Authoring Tool Accessibility Guidelines (ATAG) 2.0</cite> <a href=#refsATAG>[ATAG]</a></dt>

   <dd class=impl><blockquote><p>This specification provides
   guidelines for designing Web content authoring tools that are more
   accessible for people with disabilities. An authoring tool that
   conforms to these guidelines will promote accessibility by
   providing an accessible user interface to authors with disabilities
   as well as by enabling, supporting, and promoting the production of
   accessible Web content by all authors.</blockquote></dd>

   <dt class=impl><cite>User Agent Accessibility Guidelines (UAAG) 2.0</cite> <a href=#refsUAAG>[UAAG]</a></dt>

   <dd class=impl><blockquote><p>This document provides guidelines
   for designing user agents that lower barriers to Web accessibility
   for people with disabilities. User agents include browsers and
   other types of software that retrieve and render Web content. A
   user agent that conforms to these guidelines will promote
   accessibility through its own user interface and through other
   internal facilities, including its ability to communicate with
   other technologies (especially assistive
   technologies). Furthermore, all users, not just users with
   disabilities, should find conforming user agents to be more
   usable.</blockquote></dd>

  </dl><h2 id=infrastructure><span class=secno>2 </span>Common infrastructure</h2>

  <h3 id=terminology><span class=secno>2.1 </span>Terminology</h3>

  <p>This specification refers to both HTML and XML attributes and IDL
  attributes, often in the same context. When it is not clear which is
  being referred to, they are referred to as <dfn title="">content
  attributes</dfn> for HTML and XML attributes, and <dfn title="">IDL
  attributes</dfn> for those defined on IDL interfaces. Similarly, the
  term "properties" is used for both JavaScript object properties and
  CSS properties. When these are ambiguous they are qualified as <dfn title="">object properties</dfn> and <dfn title="">CSS
  properties</dfn> respectively.</p>

  <p>Generally, when the specification states that a feature applies
  to <a href=#syntax>the HTML syntax</a> or <a href=#the-xhtml-syntax>the XHTML syntax</a>, it
  also includes the other. When a feature specifically only applies to
  one of the two languages, it is called out by explicitly stating
  that it does not apply to the other format, as in "for HTML,
  ... (this does not apply to XHTML)".</p>

  <p>This specification uses the term <dfn title="">document</dfn> to
  refer to any use of HTML, ranging from short static documents to
  long essays or reports with rich multimedia, as well as to
  fully-fledged interactive applications.</p>

  <p>For simplicity, terms such as <dfn title="">shown</dfn>, <dfn title="">displayed</dfn>, and <dfn title="">visible</dfn> might
  sometimes be used when referring to the way a document is rendered
  to the user. These terms are not meant to imply a visual medium;
  they must be considered to apply to other media in equivalent
  ways.</p>

  <div class=impl>

  <p>When an algorithm B says to return to another algorithm A, it
  implies that A called B. Upon returning to A, the implementation
  must continue from where it left off in calling B.</p>

  </div>


  <h4 id=resources><span class=secno>2.1.1 </span>Resources</h4>

  <p>The specification uses the term <dfn title="">supported</dfn>
  when referring to whether a user agent has an implementation capable
  of decoding the semantics of an external resource. A format or type
  is said to be <i>supported</i> if the implementation can process an
  external resource of that format or type without critical aspects of
  the resource being ignored. Whether a specific resource is
  <i>supported</i> can depend on what features of the resource's
  format are in use.</p>

  <p class=example>For example, a PNG image would be considered to
  be in a supported format if its pixel data could be decoded and
  rendered, even if, unbeknownst to the implementation, the image also
  contained animation data.</p>

  <p class=example>A MPEG4 video file would not be considered to be
  in a supported format if the compression format used was not
  supported, even if the implementation could determine the dimensions
  of the movie from the file's metadata.</p>

  <p>What some specifications, in particular the HTTP and URI
  specifications, refer to as a <i>representation</i> is referred to
  in this specification as a <dfn title="">resource</dfn>. <a href=#refsHTTP>[HTTP]</a> <a href=#refsRFC3986>[RFC3986]</a></p>

  <p>The term <dfn id=mime-type>MIME type</dfn> is used to refer to what is
  sometimes called an <i>Internet media type</i> in protocol
  literature. The term <i>media type</i> in this specification is used
  to refer to the type of media intended for presentation, as used by
  the CSS specifications. <a href=#refsRFC2046>[RFC2046]</a> <a href=#refsMQ>[MQ]</a></p>

  <p>A string is a <dfn id=valid-mime-type>valid MIME type</dfn> if it matches the <code title="">media-type</code> rule defined in section 3.7 "Media Types"
  of RFC 2616. In particular, a <a href=#valid-mime-type>valid MIME type</a> may
  include MIME type parameters. <a href=#refsHTTP>[HTTP]</a></p>

  <p>A string is a <dfn id=valid-mime-type-with-no-parameters>valid MIME type with no parameters</dfn> if it
  matches the <code title="">media-type</code> rule defined in section
  3.7 "Media Types" of RFC 2616, but does not contain any U+003B
  SEMICOLON characters (;). In other words, if it consists only of a
  type and subtype, with no MIME Type parameters. <a href=#refsHTTP>[HTTP]</a></p>

  <p>The term <dfn id=html-mime-type>HTML MIME type</dfn> is used to refer to the <a href=#mime-type title="MIME type">MIME types</a> <code><a href=#text/html>text/html</a></code> and
  <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>.</p>

  <p>A resource's <dfn id=critical-subresources>critical subresources</dfn> are those that the
  resource needs to have available to be correctly processed. Which
  resources are considered critical or not is defined by the
  specification that defines the resource's format. For CSS resources,
  only <code title="">@import</code> rules introduce <a href=#critical-subresources>critical
  subresources</a>; other resources, e.g. fonts or backgrounds, are
  not.</p>


  <h4 id=xml><span class=secno>2.1.2 </span>XML</h4>

  <p id=html-namespace>To ease migration from HTML to XHTML, UAs
  conforming to this specification will place elements in HTML in the
  <code>http://www.w3.org/1999/xhtml</code> namespace, at least for
  the purposes of the DOM and CSS. The term "<dfn id=html-elements>HTML
  elements</dfn>", when used in this specification, refers to any
  element in that namespace, and thus refers to both HTML and XHTML
  elements.</p>

  <p>Except where otherwise stated, all elements defined or mentioned
  in this specification are in the
  <code>http://www.w3.org/1999/xhtml</code> namespace, and all
  attributes defined or mentioned in this specification have no
  namespace.</p>

  <p>Attribute names are said to be <dfn id=xml-compatible>XML-compatible</dfn> if they
  match the <a href=http://www.w3.org/TR/REC-xml/#NT-Name><code title="">Name</code></a> production defined in XML, they contain no
  U+003A COLON characters (:), and their first three characters are
  not an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
  "<code title="">xml</code>". <a href=#refsXML>[XML]</a></p>

  <p>The term <dfn id=xml-mime-type>XML MIME type</dfn> is used to refer to the <a href=#mime-type title="MIME type">MIME types</a> <code title="">text/xml</code>,
  <code title="">application/xml</code>, and any <a href=#mime-type>MIME
  type</a> whose subtype ends with the four characters "<code title="">+xml</code>". <a href=#refsRFC3023>[RFC3023]</a></p>


  <h4 id=dom-trees><span class=secno>2.1.3 </span>DOM trees</h4>

  <p>The term <dfn id=root-element>root element</dfn>, when not explicitly qualified
  as referring to the document's root element, means the furthest
  ancestor element node of whatever node is being discussed, or the
  node itself if it has no ancestors. When the node is a part of the
  document, then the node's <a href=#root-element>root element</a> is indeed the
  document's root element; however, if the node is not currently part
  of the document tree, the root element will be an orphaned node.</p>

  <p>When an element's <a href=#root-element>root element</a> is the root element
  of a <code><a href=#document>Document</a></code>, it is said to be <dfn id=in-a-document>in a
  <code>Document</code></dfn>. An element is said to have been <dfn id=insert-an-element-into-a-document title="insert an element into a document">inserted into a
  document</dfn> when its <a href=#root-element>root element</a> changes and is now
  the document's <a href=#root-element>root element</a>. Analogously, an element is
  said to have been <dfn id=remove-an-element-from-a-document title="remove an element from a
  document">removed from a document</dfn> when its <a href=#root-element>root
  element</a> changes from being the document's <a href=#root-element>root
  element</a> to being another element.</p>

  <p>A node's <dfn id=home-subtree>home subtree</dfn> is the subtree rooted at that
  node's <a href=#root-element>root element</a>. When a node is <a href=#in-a-document>in a
  <code>Document</code></a>, its <a href=#home-subtree>home subtree</a> is that
  <code><a href=#document>Document</a></code>'s tree.</p>

  <p>The <code><a href=#document>Document</a></code> of a <code><a href=#node>Node</a></code> (such as an
  element) is the <code><a href=#document>Document</a></code> that the <code><a href=#node>Node</a></code>'s
  <code title="">ownerDocument</code> IDL attribute returns. When a
  <code><a href=#node>Node</a></code> is <a href=#in-a-document>in a <code>Document</code></a> then
  that <code><a href=#document>Document</a></code> is always the <code><a href=#node>Node</a></code>'s
  <code><a href=#document>Document</a></code>, and the <code><a href=#node>Node</a></code>'s <code title="">ownerDocument</code> IDL attribute thus always returns that
  <code><a href=#document>Document</a></code>.</p>

  <p>The term <dfn id=tree-order>tree order</dfn> means a pre-order, depth-first
  traversal of DOM nodes involved (through the <code title=dom-Node-parentNode><a href=#dom-node-parentnode>parentNode</a></code>/<code title=dom-Node-childNodes><a href=#dom-node-childnodes>childNodes</a></code> relationship).</p>

  <p>When it is stated that some element or attribute is <dfn id=ignore title=ignore>ignored</dfn>, or treated as some other value, or
  handled as if it was something else, this refers only to the
  processing of the node after it is in the DOM. <span class=impl>A
  user agent must not mutate the DOM in such situations.</span></p>

  <p>The term <dfn id=text-node>text node</dfn> refers to any <code><a href=#text>Text</a></code>
  node, including <code><a href=#cdatasection>CDATASection</a></code> nodes; specifically, any
  <code><a href=#node>Node</a></code> with node type <code title="">TEXT_NODE</code> (3)
  or <code title="">CDATA_SECTION_NODE</code> (4). <a href=#refsDOMCORE>[DOMCORE]</a></p>

  <p>A content attribute is said to <dfn title="">change</dfn> value
  only if its new value is different than its previous value; setting
  an attribute to a value it already has does not change it.</p>


  <h4 id=scripting-0><span class=secno>2.1.4 </span>Scripting</h4>

  <p>The construction "a <code>Foo</code> object", where
  <code>Foo</code> is actually an interface, is sometimes used instead
  of the more accurate "an object implementing the interface
  <code>Foo</code>".</p>

  <p>An IDL attribute is said to be <dfn title="">getting</dfn> when
  its value is being retrieved (e.g. by author script), and is said to
  be <dfn title="">setting</dfn> when a new value is assigned to
  it.</p>

  <p>If a DOM object is said to be <dfn id=live>live</dfn>, then the
  attributes and methods on that object <span class=impl>must</span>
  operate on the actual underlying data, not a snapshot of the
  data.</p>

  <p>The terms <dfn title="">fire</dfn> and <dfn title="">dispatch</dfn> are used interchangeably in the context of
  events, as in the DOM Events specifications. The term <dfn id=concept-events-trusted title=concept-events-trusted>trusted event</dfn> is used as
  defined by the DOM Events specification. <!--
  http://krijnhoetmer.nl/irc-logs/webapps/20091218 --> <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>


  <h4 id=plugins><span class=secno>2.1.5 </span>Plugins</h4>

  <p>The term <dfn id=plugin>plugin</dfn> refers to a user-agent defined set of
  content handlers used by the user agent that can take part in the
  user agent's rendering of a <code><a href=#document>Document</a></code> object, but that
  neither act as <a href=#child-browsing-context title="child browsing context">child browsing
  contexts</a> of the <code><a href=#document>Document</a></code> nor introduce any
  <code><a href=#node>Node</a></code> objects to the <code><a href=#document>Document</a></code>'s DOM.</p>

  <p>Typically such content handlers are provided by third parties,
  though a user agent can also designate built-in content handlers as
  plugins.</p>

  <p>A user agent must not consider the types <code>text/plain</code>
  and <code>application/octet-stream</code> as having a registered
  <a href=#plugin>plugin</a>.</p> <!-- because of the way <object> handles
  those types, if nothing else (it also doesn't make any sense to have
  a plugin registered for those types, of course) -->

  <p class=example>One example of a plugin would be a PDF viewer
  that is instantiated in a <a href=#browsing-context>browsing context</a> when the
  user navigates to a PDF file. This would count as a plugin
  regardless of whether the party that implemented the PDF viewer
  component was the same as that which implemented the user agent
  itself. However, a PDF viewer application that launches separate
  from the user agent (as opposed to using the same interface) is not
  a plugin by this definition.</p>

  <p class=note>This specification does not define a mechanism for
  interacting with plugins, as it is expected to be user-agent- and
  platform-specific. Some UAs might opt to support a plugin mechanism
  such as the Netscape Plugin API; others might use remote content
  converters or have built-in support for certain types. <a href=#refsNPAPI>[NPAPI]</a></p>

  <p class=warning>Browsers should take extreme care when
  interacting with external content intended for <a href=#plugin title=plugin>plugins</a>. When third-party software is run with
  the same privileges as the user agent itself, vulnerabilities in the
  third-party software become as dangerous as those in the user
  agent.</p>


  <h4 id=character-encodings><span class=secno>2.1.6 </span>Character encodings</h4>

  <p>The <dfn id=preferred-mime-name>preferred MIME name</dfn> of a character encoding is the
  name or alias labeled as "preferred MIME name" in the IANA
  <cite>Character Sets</cite> registry, if there is one, or the
  encoding's name, if none of the aliases are so labeled. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>

  <p>An <dfn id=ascii-compatible-character-encoding>ASCII-compatible character encoding</dfn> is a
  single-byte or variable-length encoding in which the bytes 0x09,
  0x0A, 0x0C, 0x0D, 0x20 - 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A,
  and 0x61 - 0x7A<!-- is that list ok? do any character sets we want
  to support do things outside that range?  -->, ignoring bytes that
  are the second and later bytes of multibyte sequences, all
  correspond to single-byte sequences that map to the same Unicode
  characters as those bytes in ANSI_X3.4-1968 (US-ASCII). <a href=#refsRFC1345>[RFC1345]</a></p>

  <p class=note>This includes such encodings as Shift_JIS,
  HZ-GB-2312, and variants of ISO-2022, even though it is possible in
  these encodings for bytes like 0x70 to be part of longer sequences
  that are unrelated to their interpretation as ASCII. It excludes
  such encodings as UTF-7, UTF-16, GSM03.38, and EBCDIC variants.</p>

  <!--
   We'll have to change that if anyone comes up with a way to have a
   document that is valid as two different encodings at once, with
   different <meta charset> elements applying in each case.
  -->

  <p>The term <dfn title="">Unicode character</dfn> is used to mean a
  <i title="">Unicode scalar value</i> (i.e. any Unicode code point
  that is not a surrogate code point). <a href=#refsUNICODE>[UNICODE]</a></p>





<!--FIXUP microdata +1-->
<!--FIXUP 2dcontext +1-->
  <h3 id=conformance-requirements><span class=secno>2.2 </span>Conformance requirements</h3>
<!--FIXUP microdata -1-->
<!--FIXUP 2dcontext -1-->

  <p>All diagrams, examples, and notes in this specification are
  non-normative, as are all sections explicitly marked non-normative.
  Everything else in this specification is normative.</p>

  <p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
  NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
  "OPTIONAL" in the normative parts of this document are to be
  interpreted as described in RFC2119. For readability, these words do
  not appear in all uppercase letters in this specification. <a href=#refsRFC2119>[RFC2119]</a></p>

  <p class=impl>Requirements phrased in the imperative as part of
  algorithms (such as "strip any leading space characters" or "return
  false and abort these steps") are to be interpreted with the meaning
  of the key word ("must", "should", "may", etc) used in introducing
  the algorithm.</p>

  <p>This specification describes the conformance criteria for <span class=impl>user agents (relevant to implementors) and</span>
  documents<span class=impl> (relevant to authors and authoring tool
  implementors)</span>.</p>

  <p><dfn id=conforming-documents>Conforming documents</dfn> are those that comply with all
  the conformance criteria for documents. For readability, some of
  these conformance requirements are phrased as conformance
  requirements on authors; such requirements are implicitly
  requirements on documents: by definition, all documents are assumed
  to have had an author. (In some cases, that author may itself be a
  user agent &mdash; such user agents are subject to additional rules,
  as explained below.)</p>

  <p class=example>For example, if a requirement states that
  "authors must not use the <code title="">foobar</code> element", it
  would imply that documents are not allowed to contain elements named
  <code title="">foobar</code>.</p>

  <div class=impl>



  <p>User agents fall into several (overlapping) categories with
  different conformance requirements.</p>

  <dl><dt id=interactive>Web browsers and other interactive user agents</dt>

   <dd>

    <p>Web browsers that support <a href=#the-xhtml-syntax>the XHTML syntax</a> must
    process elements and attributes from the <a href=#html-namespace-0>HTML
    namespace</a> found in XML documents as described in this
    specification, so that users can interact with them, unless the
    semantics of those elements have been overridden by other
    specifications.</p>

    <p class=example>A conforming XHTML processor would, upon
    finding an XHTML <code><a href=#script>script</a></code> element in an XML document,
    execute the script contained in that element. However, if the
    element is found within a transformation expressed in XSLT
    (assuming the user agent also supports XSLT), then the processor
    would instead treat the <code><a href=#script>script</a></code> element as an opaque
    element that forms part of the transform.</p>

    <p>Web browsers that support <a href=#syntax>the HTML syntax</a> must
    process documents labeled with an <a href=#html-mime-type>HTML MIME type</a> as
    described in this specification, so that users can interact with
    them.</p>

    <p>User agents that support scripting must also be conforming
    implementations of the IDL fragments in this specification, as
    described in the Web IDL specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>

    <p class=note>Unless explicitly stated, specifications that
    override the semantics of HTML elements do not override the
    requirements on DOM objects representing those elements. For
    example, the <code><a href=#script>script</a></code> element in the example above
    would still implement the <code><a href=#htmlscriptelement>HTMLScriptElement</a></code>
    interface.</p>

   </dd>

   <dt id=non-interactive>Non-interactive presentation user agents</dt>

   <dd>

    <p>User agents that process HTML and XHTML documents purely to
    render non-interactive versions of them must comply to the same
    conformance criteria as Web browsers, except that they are exempt
    from requirements regarding user interaction.</p>

    <p class=note>Typical examples of non-interactive presentation
    user agents are printers (static UAs) and overhead displays
    (dynamic UAs). It is expected that most static non-interactive
    presentation user agents will also opt to <a href=#non-scripted>lack scripting support</a>.</p>

    <p class=example>A non-interactive but dynamic presentation UA
    would still execute scripts, allowing forms to be dynamically
    submitted, and so forth. However, since the concept of "focus" is
    irrelevant when the user cannot interact with the document, the UA
    would not need to support any of the focus-related DOM APIs.</p>

   </dd>

   <dt><dfn id=non-scripted>User agents with no scripting support</dfn></dt>

   <dd>

    <p>Implementations that do not support scripting (or which have
    their scripting features disabled entirely) are exempt from
    supporting the events and DOM interfaces mentioned in this
    specification. For the parts of this specification that are
    defined in terms of an events model or in terms of the DOM, such
    user agents must still act as if events and the DOM were
    supported.</p>

    <p class=note>Scripting can form an integral part of an
    application. Web browsers that do not support scripting, or that
    have scripting disabled, might be unable to fully convey the
    author's intent.</p>

   </dd>

   <dt>Conformance checkers</dt>

   <dd id=conformance-checkers>

    <p>Conformance checkers must verify that a document conforms to
    the applicable conformance criteria described in this
    specification. Automated conformance checkers are exempt from
    detecting errors that require interpretation of the author's
    intent (for example, while a document is non-conforming if the
    content of a <code><a href=#the-blockquote-element>blockquote</a></code> element is not a quote,
    conformance checkers running without the input of human judgement
    do not have to check that <code><a href=#the-blockquote-element>blockquote</a></code> elements only
    contain quoted material).</p>

    <p>Conformance checkers must check that the input document
    conforms when parsed without a <a href=#browsing-context>browsing context</a>
    (meaning that no scripts are run, and that the parser's
    <a href=#scripting-flag>scripting flag</a> is disabled), and should also check
    that the input document conforms when parsed with a <a href=#browsing-context>browsing
    context</a> in which scripts execute, and that the scripts
    never cause non-conforming states to occur other than transiently
    during script execution itself. (This is only a "SHOULD" and not a
    "MUST" requirement because it has been proven to be impossible. <a href=#refsCOMPUTABLE>[COMPUTABLE]</a>)</p>

    <p>The term "HTML validator" can be used to refer to a
    conformance checker that itself conforms to the applicable
    requirements of this specification.</p>
    

    <div class=note>

     <p>XML DTDs cannot express all the conformance requirements of
     this specification. Therefore, a validating XML processor and a
     DTD cannot constitute a conformance checker. Also, since neither
     of the two authoring formats defined in this specification are
     applications of SGML, a validating SGML system cannot constitute
     a conformance checker either.</p>

     <p>To put it another way, there are three types of conformance
     criteria:</p>

     <ol><li>Criteria that can be expressed in a DTD.</li>

      <li>Criteria that cannot be expressed by a DTD, but can still be
      checked by a machine.</li>

      <li>Criteria that can only be checked by a human.</li>

     </ol><p>A conformance checker must check for the first two. A simple
     DTD-based validator only checks for the first class of errors and
     is therefore not a conforming conformance checker according to
     this specification.</p>

    </div>
   </dd>

   <dt>Data mining tools</dt>

   <dd id=data-mining>

    <p>Applications and tools that process HTML and XHTML documents
    for reasons other than to either render the documents or check
    them for conformance should act in accordance with the semantics
    of the documents that they process.</p>

    <p class=example>A tool that generates <a href=#outline title=outline>document outlines</a> but increases the nesting
    level for each paragraph and does not increase the nesting level
    for each section would not be conforming.</p>

   </dd>

   <dt id=editors>Authoring tools and markup generators</dt>

   <dd>

    <p>Authoring tools and markup generators must generate
    <a href=#conforming-documents>conforming documents</a>. Conformance criteria that apply
    to authors also apply to authoring tools, where appropriate.</p>

    <p>Authoring tools are exempt from the strict requirements of
    using elements only for their specified purpose, but only to the
    extent that authoring tools are not yet able to determine author
    intent. However, authoring tools must not automatically misuse
    elements or encourage their users to do so.</p>

    <p class=example>For example, it is not conforming to use an
    <code><a href=#the-address-element>address</a></code> element for arbitrary contact information;
    that element can only be used for marking up contact information
    for the author of the document or section. However, since an
    authoring tool is likely unable to determine the difference, an
    authoring tool is exempt from that requirement. This does not
    mean, though, that authoring tools can use <code><a href=#the-address-element>address</a></code>
    elements for any block of italics text (for instance); it just
    means that the authoring tool doesn't have to verify that when the
    user uses a tool for inserting contact information for a section,
    that the user really is doing that and not inserting something
    else instead.</p>

    <p class=note>In terms of conformance checking, an editor has to
    output documents that conform to the same extent that a
    conformance checker will verify.</p>

    <p>When an authoring tool is used to edit a non-conforming
    document, it may preserve the conformance errors in sections of
    the document that were not edited during the editing session
    (i.e. an editing tool is allowed to round-trip erroneous
    content). However, an authoring tool must not claim that the
    output is conformant if errors have been so preserved.</p>

    <p>Authoring tools are expected to come in two broad varieties:
    tools that work from structure or semantic data, and tools that
    work on a What-You-See-Is-What-You-Get media-specific editing
    basis (WYSIWYG).</p>

    <p>The former is the preferred mechanism for tools that author
    HTML, since the structure in the source information can be used to
    make informed choices regarding which HTML elements and attributes
    are most appropriate.</p>

    <p>However, WYSIWYG tools are legitimate. WYSIWYG tools should use
    elements they know are appropriate, and should not use elements
    that they do not know to be appropriate. This might in certain
    extreme cases mean limiting the use of flow elements to just a few
    elements, like <code><a href=#the-div-element>div</a></code>, <code><a href=#the-b-element>b</a></code>, <code><a href=#the-i-element>i</a></code>,
    and <code><a href=#the-span-element>span</a></code> and making liberal use of the <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute.</p>

    <p>All authoring tools, whether WYSIWYG or not, should make a best
    effort attempt at enabling users to create well-structured,
    semantically rich, media-independent content.</p>

   </dd>

  </dl><p>Some conformance requirements are phrased as requirements on
  elements, attributes, methods or objects. Such requirements fall
  into two categories: those describing content model restrictions,
  and those describing implementation behavior. Those in the former
  category are requirements on documents and authoring tools. Those in
  the second category are requirements on user agents. Similarly, some
  conformance requirements are phrased as requirements on authors;
  such requirements are to be interpreted as conformance requirements
  on the documents that authors produce. (In other words, this
  specification does not distinguish between conformance criteria on
  authors and conformance criteria on documents.)</p>

  <p>Conformance requirements phrased as algorithms or specific steps
  may be implemented in any manner, so long as the end result is
  equivalent. (In particular, the algorithms defined in this
  specification are intended to be easy to follow, and not intended to
  be performant.)</p>

  <p id=hardwareLimitations>User agents may impose
  implementation-specific limits on otherwise unconstrained inputs,
  e.g. to prevent denial of service attacks, to guard against running
  out of memory, or to work around platform-specific limitations.</p>

  </div>



  <p class="note impl">There is no implied relationship between
  document conformance requirements and implementation conformance
  requirements. User agents are not free to handle non-conformant
  documents as they please; the processing model described in this
  specification applies to implementations regardless of the
  conformity of the input documents.</p>

  <p>For compatibility with existing content and prior specifications,
  this specification describes two authoring formats: one based on XML
  (referred to as <a href=#the-xhtml-syntax>the XHTML syntax</a>), and one using a <a href=#writing>custom format</a> inspired by SGML (referred to as
  <a href=#syntax>the HTML syntax</a>). <span class=impl>Implementations
  may support only one of these two formats, although supporting both
  is encouraged.</span></p>

  <p class=impl id=entity-references>The language in this
  specification assumes that the user agent expands all entity
  references, and therefore does not include entity reference nodes in
  the DOM. If user agents do include entity reference nodes in the
  DOM, then user agents must handle them as if they were fully
  expanded when implementing this specification. For example, if a
  requirement talks about an element's child text nodes, then any text
  nodes that are children of an entity reference that is a child of
  that element would be used as well. Entity references to unknown
  entities must be treated as if they contained just an empty text
  node for the purposes of the algorithms defined in this
  specification.</p>


  <div class=impl>

  <h4 id=dependencies><span class=secno>2.2.1 </span>Dependencies</h4>

  <p>This specification relies on several other underlying
  specifications.</p>

  <dl><dt>XML</dt>

   <dd>

    <p>Implementations that support <a href=#the-xhtml-syntax>the XHTML syntax</a> must
    support some version of XML, as well as its corresponding
    namespaces specification, because that syntax uses an XML
    serialization with namespaces. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a></p>

   </dd>

   <dt>DOM</dt>

   <dd>

    <p>The Document Object Model (DOM) is a representation &mdash; a
    model &mdash; of a document and its content. The DOM is not just
    an API; the conformance criteria of HTML implementations are
    defined, in this specification, in terms of operations on the DOM.
    <a href=#refsDOMCORE>[DOMCORE]</a></p>

    <p>Implementations must support some version of DOM Core and DOM
    Events, because this specification is defined in terms of the DOM,
    and some of the features are defined as extensions to the DOM Core
    interfaces. <a href=#refsDOMCORE>[DOMCORE]</a> <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

    <p>In particular, the following features are defined in the DOM
    Core specification: <a href=#refsDOMCORE>[DOMCORE]</a></p>

    <ul class=brief><li><dfn id=attr><code>Attr</code></dfn> interface</li>
     <li><dfn id=cdatasection><code>CDATASection</code></dfn> interface</li>
     <li><dfn id=comment-0><code>Comment</code></dfn> interface</li>
     <li><dfn id=domimplementation><code>DOMImplementation</code></dfn> interface</li>
     <li><dfn id=document><code>Document</code></dfn> interface</li>
     <li><dfn id=documentfragment><code>DocumentFragment</code></dfn> interface</li>
     <li><dfn id=documenttype><code>DocumentType</code></dfn> interface</li>
     <li><dfn id=domexception><code>DOMException</code></dfn> interface</li>
     <li><dfn id=element><code>Element</code></dfn> interface</li>
     <li><dfn id=node><code>Node</code></dfn> interface</li>
     <li><dfn id=nodelist><code>NodeList</code></dfn> interface</li>
     <li><dfn id=processinginstruction><code>ProcessingInstruction</code></dfn> interface</li>
     <li><dfn id=text><code>Text</code></dfn> interface</li>

     <li><dfn id=dom-domimplementation-createdocument title=dom-DOMImplementation-createDocument><code>createDocument()</code></dfn> method</li>
     <li><dfn id=dom-document-getelementbyid title=dom-Document-getElementById><code>getElementById()</code></dfn> method</li>
     <li><dfn id=dom-node-insertbefore title=dom-Node-insertBefore><code>insertBefore()</code></dfn> method</li>

     <li><dfn id=dom-node-childnodes title=dom-Node-childNodes><code>childNodes</code></dfn> attribute </li>
     <li><dfn id=dom-node-localname title=dom-Node-localName><code>localName</code></dfn> attribute </li>
     <li><dfn id=dom-node-parentnode title=dom-Node-parentNode><code>parentNode</code></dfn> attribute </li>
     <li><dfn id=dom-element-tagname title=dom-Element-tagName><code>tagName</code></dfn> attribute </li>
     <li><dfn id=textcontent><code>textContent</code></dfn> attribute </li>

    </ul><p>The following features are defined in the DOM Events
    specification: <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

    <ul class=brief><li><dfn id=event><code>Event</code></dfn> interface</li>
     <li><dfn id=eventtarget><code>EventTarget</code></dfn> interface</li>
     <li><dfn id=uievent><code>UIEvent</code></dfn> interface</li>

     <li><dfn id=event-click title=event-click><code>click</code></dfn> event</li>
     <li><dfn id=event-domactivate title=event-DOMActivate><code>DOMActivate</code></dfn> event</li>

     <li><dfn id=dom-event-target title=dom-Event-target><code>target</code></dfn> attribute</li>

    </ul><p>The following features are defined in the DOM
    Range specification: <a href=#refsDOMRANGE>[DOMRANGE]</a></p>

    <ul class=brief><li><dfn id=range><code>Range</code></dfn> interface</li>

     <li><dfn id=dom-range-deletecontents title=dom-Range-deleteContents><code>deleteContents()</code></dfn> method </li>
     <li><dfn id=dom-range-selectnodecontents title=dom-Range-selectNodeContents><code>selectNodeContents()</code></dfn> method </li>
     <li><dfn id=dom-range-setend title=dom-Range-setEnd><code>setEnd()</code></dfn> method </li>
     <li><dfn id=dom-range-setstart title=dom-Range-setStart><code>setStart()</code></dfn> method </li>

     <li><dfn id=dom-range-collapsed title=dom-Range-collapsed><code>collapsed</code></dfn> attribute </li>
     <li><dfn id=dom-range-endcontainer title=dom-Range-endContainer><code>endContainer</code></dfn> attribute </li>
     <li><dfn id=dom-range-endoffset title=dom-Range-endOffset><code>endOffset</code></dfn> attribute </li>
     <li><dfn id=dom-range-startcontainer title=dom-Range-startContainer><code>startContainer</code></dfn> attribute </li>
     <li><dfn id=dom-range-startoffset title=dom-Range-startOffset><code>startOffset</code></dfn> attribute </li>

    </ul></dd>

   <dt>Web IDL</dt>

   <dd>

    <p>The IDL fragments in this specification must be interpreted as
    required for conforming IDL fragments, as described in the Web IDL
    specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>

    <p id=float-nan>Except where otherwise specified, if an IDL
    attribute that is a floating point number type (<code title="">float</code>) is assigned an Infinity or Not-a-Number
    (NaN) value, a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception must be
    raised.</p>

    <p>Except where otherwise specified, if a method with an argument
    that is a floating point number type (<code title="">float</code>)
    is passed an Infinity or Not-a-Number (NaN) value, a
    <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception must be raised.</p>

   </dd>

   <dt>JavaScript</dt>

   <dd>

    <p>Some parts of the language described by this specification only
    support JavaScript as the underlying scripting language. <a href=#refsECMA262>[ECMA262]</a></p>

    <p class=note>The term "JavaScript" is used to refer to ECMA262,
    rather than the official term ECMAScript, since the term
    JavaScript is more widely known. Similarly, the <a href=#mime-type>MIME
    type</a> used to refer to JavaScript in this specification is
    <code title="">text/javascript</code>, since that is the most
    commonly used type, <a href=#willful-violation title="willful violation">despite it
    being an officially obsoleted type</a> according to RFC
    4329. <a href=#refsRFC4329>[RFC4329]</a></p>

   </dd>

   <dt>Media Queries</dt>

   <dd>

    <p>Implementations must support some version of the Media Queries
    language. <a href=#refsMQ>[MQ]</a></p>

   </dd>

   <dt>URIs, IRIs, IDNA</dt>

   <dd>

    <p>Implementations must support the semantics of <a href=#url title=URL>URLs</a> defined in the URI and IRI specifications,
    as well as the semantics of IDNA domain names defined in the
    <cite>Internationalizing Domain Names in Applications
    (IDNA)</cite> specification. <a href=#refsRFC3986>[RFC3986]</a>
    <a href=#refsRFC3987>[RFC3987]</a> <a href=#refsRFC3490>[RFC3490]</a>

   </dd>

  </dl><p>This specification does not <em>require</em> support of any
  particular network protocol, style sheet language, scripting
  language, or any of the DOM specifications beyond those described
  above. However, the language described by this specification is
  biased towards CSS as the styling language, JavaScript as the
  scripting language, and HTTP as the network protocol, and several
  features assume that those languages and protocols are in use.</p>

  <p class=note>This specification might have certain additional
  requirements on character encodings, image formats, audio formats,
  and video formats in the respective sections.</p>

  </div>



  <h4 id=extensibility><span class=secno>2.2.2 </span>Extensibility</h4>

  <p>HTML has a wide number of extensibility mechanisms that can be
  used for adding semantics in a safe manner:</p>

  <ul><li>Authors can use the <code title=attr-class><a href=#classes>class</a></code>
   attribute to extend elements, effectively creating their own
   elements, while using the most applicable existing "real" HTML
   element, so that browsers and other tools that don't know of the
   extension can still support it somewhat well. This is the tack used
   by Microformats, for example.</li>

   <li>Authors can include data for inline client-side scripts or
   server-side site-wide scripts to process using the <code title=attr-data-*><a href=#attr-data-*>data-*=""</a></code> attributes. These are
   guaranteed to never be touched by browsers, and allow scripts to
   include data on HTML elements that scripts can then look for and
   process.</li>

   <li>Authors can use the <code title=meta><a href=#meta>&lt;meta name=""
   content=""&gt;</a></code> mechanism to include page-wide metadata by
   registering <a href=#concept-meta-extensions title=concept-meta-extensions>extensions to the
   predefined set of metadata names</a>.</li>

   <li>Authors can use the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel=""</a></code> mechanism to annotate
   links with specific meanings by registering <a href=#concept-rel-extensions title=concept-rel-extensions> extensions to the predefined set of
   link types</a>. This is also used by Microformats.</li>

   <li>Authors can embed raw data using the <code title=script><a href=#script>&lt;script type=""&gt;</a></code> mechanism with a custom
   type, for further handling by a inline or server-side scripts.</li>

   <li>Authors can create <a href=#plugin title=plugin>plugins</a> and
   invoke them using the <code><a href=#the-embed-element>embed</a></code> element. This is how Flash
   works.</li>

   <li>Authors can extend APIs using the JavaScript prototyping
   mechanism. This is widely used by script libraries, for
   instance.</li>

   <li>Authors can use the microdata feature (the <code title=attr-item>item=""</code> and <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop=""</a></code> attributes) to embed
   nested name-value pairs of data to be shared with other
   applications and sites.</li>

  </ul><div class=impl>

  <hr><p>Vendor-specific proprietary user agent extensions to this
  specification are strongly discouraged. Documents must not use such
  extensions, as doing so reduces interoperability and fragments the
  user base, allowing only users of specific user agents to access the
  content in question.</p>

  <p>If such extensions are nonetheless needed, e.g. for experimental
  purposes, then vendors are strongly urged to use one of the
  following extension mechanisms:</p>

  <p>For markup-level features that can be limited to the XML
  serialization and need not be supported in the HTML serialization,
  vendors should use the namespace mechanism to define custom
  namespaces in which the non-standard elements and attributes are
  supported.</p>

  <p>For markup-level features that are intended for use with
  <a href=#syntax>the HTML syntax</a>, extensions should be limited to new
  attributes of the form "<code title="">_<var title="">vendor</var>-<var title="">feature</var></code>", where
  <var title="">vendor</var> is a short string that identifies the
  vendor responsible for the extension, and <var title="">feature</var> is the name of the feature. New element names
  should not be created. Using attributes for such extensions
  exclusively allows extensions from multiple vendors to co-exist on
  the same element, which would not be possible with elements. Using
  the "<code title="">_<var title="">vendor</var>-<var title="">feature</var></code>" form allows extensions to be made
  without risk of conflicting with future additions to the
  specification.</p>

  <div class=example>

   <p>For instance, a browser named "FerretBrowser" could use "ferret"
   as a vendor prefix, while a browser named "Mellblom Browser" could
   use "mb". If both of these browsers invented extensions that turned
   elements into scratch-and-sniff areas, an author experimenting with
   these features could write:</p>

   <pre>&lt;p&gt;This smells of lemons!
&lt;span _ferret-smellovision _ferret-smellcode="LEM01"
      _mb-outputsmell _mb-smell="lemon juice"&gt;&lt;/span&gt;&lt;/p&gt;</pre>

  </div>

  <p>Attribute names starting with a U+005F LOW LINE character (_) are
  reserved for user agent use and are guaranteed to never be formally
  added to the HTML language.</p>

  <p class=note>Pages that use such attributes are by definition
  non-conforming.</p>

  <p>For DOM extensions, e.g. new methods and IDL attributes, the new
  members should be prefixed by vendor-specific strings to prevent
  clashes with future versions of this specification.</p>

  <p>All extensions must be defined so that the use of extensions
  neither contradicts nor causes the non-conformance of functionality
  defined in the specification.</p> <!-- thanks to QA Framework -->

  <div class=example>

   <p>For example, while strongly discouraged from doing so, an
   implementation "Foo Browser" could add a new IDL attribute "<code title="">fooTypeTime</code>" to a control's DOM interface that
   returned the time it took the user to select the current value of a
   control (say). On the other hand, defining a new control that
   appears in a form's <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code>
   array would be in violation of the above requirement, as it would
   violate the definition of <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> given in this
   specification.</p>

  </div>

  <hr><p>When vendor-neutral extensions to this specification are needed,
  either this specification can be updated accordingly, or an
  extension specification can be written that overrides the
  requirements in this specification. When someone applying this
  specification to their activities decides that they will recognize
  the requirements of such an extension specification, it becomes an
  <dfn id=other-applicable-specifications title="other applicable specifications">applicable
  specification</dfn> for the purposes of conformance requirements in
  this specification.</p>
  <!-- http://www.w3.org/mid/17E341CD-E790-422C-9F9A-69347EE01CEB@iki.fi -->

  <hr><p>User agents must treat elements and attributes that they do not
  understand as semantically neutral; leaving them in the DOM (for DOM
  processors), and styling them according to CSS (for CSS processors),
  but not inferring any meaning from them.</p>

  <p>When support for a feature is disabled (e.g. as an emergency
  measure to mitigate a security problem, or to aid in development, or
  for performance reasons), user agents must act as if they had no
  support for the feature whatsoever, and as if the feature was not
  mentioned in this specification. For example, if a particular
  feature is accessed via an attribute in a Web IDL interface, the
  attribute itself would be omitted from the objects that implement
  that interface &mdash; leaving the attribute on the object but
  making it return null or throw an exception is insufficient.</p>

  </div>



  <h3 id=case-sensitivity-and-string-comparison><span class=secno>2.3 </span>Case-sensitivity and string comparison</h3>

  <p>Comparing two strings in a <dfn id=case-sensitive>case-sensitive</dfn> manner means
  comparing them exactly, code point for code point.</p>

  <p>Comparing two strings in an <dfn id=ascii-case-insensitive>ASCII case-insensitive</dfn>
  manner means comparing them exactly, code point for code point, except
  that the characters in the range U+0041 to U+005A (i.e. LATIN
  CAPITAL LETTER A to LATIN CAPITAL LETTER Z) and the corresponding
  characters in the range U+0061 to U+007A (i.e. LATIN SMALL LETTER A
  to LATIN SMALL LETTER Z) are considered to also match.</p>

  <p>Comparing two strings in a <dfn id=compatibility-caseless>compatibility caseless</dfn>
  manner means using the Unicode <i>compatibility caseless match</i>
  operation to compare the two strings. <a href=#refsUNICODE>[UNICODE]</a></p>


  <div class=impl>

  <p><dfn id=converted-to-ascii-uppercase title="converted to ASCII uppercase">Converting a string to
  ASCII uppercase</dfn> means replacing all characters in the range
  U+0061 to U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z)
  with the corresponding characters in the range U+0041 to U+005A
  (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).</p>

  <p><dfn id=converted-to-ascii-lowercase title="converted to ASCII lowercase">Converting a string to
  ASCII lowercase</dfn> means replacing all characters in the range
  U+0041 to U+005A (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL
  LETTER Z) with the corresponding characters in the range U+0061
  to U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z).</p>

  </div>


  <p>A string <var title="">pattern</var> is a <dfn id=prefix-match>prefix match</dfn>
  for a string <var title="">s</var> when <var title="">pattern</var>
  is not longer than <var title="">s</var> and truncating <var title="">s</var> to <var title="">pattern</var>'s length leaves the
  two strings as matches of each other.</p>


  <h3 id=common-microsyntaxes><span class=secno>2.4 </span>Common microsyntaxes</h3>

  <p>There are various places in HTML that accept particular data
  types, such as dates or numbers. This section describes what the
  conformance criteria for content in those formats is, and how to
  parse them.</p>

  <div class=impl>

  <p class=note>Implementors are strongly urged to carefully examine
  any third-party libraries they might consider using to implement the
  parsing of syntaxes described below. For example, date libraries are
  likely to implement error handling behavior that differs from what
  is required in this specification, since error-handling behavior is
  often not defined in specifications that describe date syntaxes
  similar to those used in this specification, and thus
  implementations tend to vary greatly in how they handle errors.</p>

  </div>


  <div class=impl>

  <h4 id=common-parser-idioms><span class=secno>2.4.1 </span>Common parser idioms</h4>

  <p>The <dfn id=space-character title="space character">space characters</dfn>, for the
  purposes of this specification, are U+0020 SPACE, U+0009 CHARACTER
  TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), and
  U+000D CARRIAGE RETURN (CR).</p>

  <p>The <dfn id=white_space title=White_Space>White_Space characters</dfn> are
  those that have the Unicode property "White_Space" in the Unicode
  <code title="">PropList.txt</code> data file. <a href=#refsUNICODE>[UNICODE]</a></p>

  <p class=note>This should not be confused with the "White_Space"
  value (abbreviated "WS") of the "Bidi_Class" property in the <code title="">Unicode.txt</code> data file.</p>

  <p>The <dfn id=alphanumeric-ascii-characters>alphanumeric ASCII characters</dfn> are those in the
  ranges U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN
  CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z, U+0061 LATIN
  SMALL LETTER A to U+007A LATIN SMALL LETTER Z.</p>

  <p>Some of the micro-parsers described below follow the pattern of
  having an <var title="">input</var> variable that holds the string
  being parsed, and having a <var title="">position</var> variable
  pointing at the next character to parse in <var title="">input</var>.</p>

  <p>For parsers based on this pattern, a step that requires the user
  agent to <dfn id=collect-a-sequence-of-characters>collect a sequence of characters</dfn> means that the
  following algorithm must be run, with <var title="">characters</var>
  being the set of characters that can be collected:</p>

  <ol><li><p>Let <var title="">input</var> and <var title="">position</var> be the same variables as those of the same
   name in the algorithm that invoked these steps.</li>

   <li><p>Let <var title="">result</var> be the empty string.</li>

   <li><p>While <var title="">position</var> doesn't point past the
   end of <var title="">input</var> and the character at <var title="">position</var> is one of the <var title="">characters</var>, append that character to the end of <var title="">result</var> and advance <var title="">position</var> to
   the next character in <var title="">input</var>.</li>

   <li><p>Return <var title="">result</var>.</li>

  </ol><p>The step <dfn id=skip-whitespace>skip whitespace</dfn> means that the user agent
  must <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> that are <a href=#space-character title="space character">space characters</a>. The step <dfn id=skip-white_space-characters>skip
  White_Space characters</dfn> means that the user agent must
  <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> that are
  <a href=#white_space>White_Space</a> characters. In both cases, the collected
  characters are not used. <a href=#refsUNICODE>[UNICODE]</a></p>

  <p>When a user agent is to <dfn id=strip-line-breaks>strip line breaks</dfn> from a
  string, the user agent must remove any U+000A LINE FEED (LF) and
  U+000D CARRIAGE RETURN (CR) characters from that string.</p>

  <p>When a user agent is to <dfn id=strip-leading-and-trailing-whitespace>strip leading and trailing
  whitespace</dfn> from a string, the user agent must remove all <a href=#space-character title="space character">space characters</a> that are at the
  start or end of the string.</p>

  <p>The <dfn id=code-point-length>code-point length</dfn> of a string is the number of
  Unicode code points in that string.</p>

  </div>



  <h4 id=boolean-attributes><span class=secno>2.4.2 </span>Boolean attributes</h4>

  <p>A number of attributes are <dfn id=boolean-attribute title="boolean attribute">boolean
  attributes</dfn>. The presence of a boolean attribute on an element
  represents the true value, and the absence of the attribute
  represents the false value.</p>

  <p>If the attribute is present, its value must either be the empty
  string or a value that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a>
  match for the attribute's canonical name, with no leading or
  trailing whitespace.</p>

  <p class=note>The values "true" and "false" are not allowed on
  boolean attributes. To represent a false value, the attribute has to
  be omitted altogether.</p>



  <h4 id=keywords-and-enumerated-attributes><span class=secno>2.4.3 </span>Keywords and enumerated attributes</h4>

  <p>Some attributes are defined as taking one of a finite set of
  keywords. Such attributes are called <dfn id=enumerated-attribute title="enumerated
  attribute">enumerated attributes</dfn>. The keywords are each
  defined to map to a particular <em>state</em> (several keywords
  might map to the same state, in which case some of the keywords are
  synonyms of each other; additionally, some of the keywords can be
  said to be non-conforming, and are only in the specification for
  historical reasons). In addition, two default states can be
  given. The first is the <i>invalid value default</i>, the second
  is the <i>missing value default</i>.</p>

  <p>If an enumerated attribute is specified, the attribute's value
  must be an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the
  given keywords that are not said to be non-conforming, with no
  leading or trailing whitespace.</p>

  <p>When the attribute is specified, if its value is an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> match for one of the given keywords then
  that keyword's state is the state that the attribute represents. If
  the attribute value matches none of the given keywords, but the
  attribute has an <i>invalid value default</i>, then the attribute
  represents that state. Otherwise, if the attribute value matches
  none of the keywords but there is a <i>missing value default</i>
  state defined, then <em>that</em> is the state represented by the
  attribute. Otherwise, there is no default, and invalid values must
  be ignored.</p>

  <p>When the attribute is <em>not</em> specified, if there is a
  <i>missing value default</i> state defined, then that is the state
  represented by the (missing) attribute. Otherwise, the absence of
  the attribute means that there is no state represented.</p>

  <p class=note>The empty string can be a valid keyword.</p>


  <h4 id=numbers><span class=secno>2.4.4 </span>Numbers</h4>

  <h5 id=non-negative-integers><span class=secno>2.4.4.1 </span>Non-negative integers</h5>

  <p>A string is a <dfn id=valid-non-negative-integer>valid non-negative integer</dfn> if it
  consists of one or more characters in the range U+0030 DIGIT ZERO
  (0) to U+0039 DIGIT NINE (9).</p>

  <p>A <a href=#valid-non-negative-integer>valid non-negative integer</a> represents the number
  that is represented in base ten by that string of digits.</p>

  <div class=impl>

  <p>The <dfn id=rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</dfn> are as
  given in the following algorithm. When invoked, the steps must be
  followed in the order given, aborting at the first step that returns
  a value. This algorithm will return either zero, a positive integer,
  or an error. Leading spaces are ignored. Trailing spaces and any
  trailing garbage characters are ignored.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>

   <li><p>If the character indicated by <var title="">position</var>
   is a U+002B PLUS SIGN character (+), advance <var title="">position</var> to the next character. (The "<code title="">+</code>" is ignored, but it is not conforming.)</li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>

   <li><p>If the character indicated by <var title="">position</var>
   is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then
   return an error.</li>

   <!-- Ok. At this point we know we have a number. It might have
   trailing garbage which we'll ignore, but it's a number, and we
   won't return an error. -->

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
   resulting sequence as a base-ten integer. Let <var title="">value</var> be that integer.</li>

   <li><p>Return <var title="">value</var>.</li>

  </ol></div>


  <h5 id=signed-integers><span class=secno>2.4.4.2 </span>Signed integers</h5>

  <p>A string is a <dfn id=valid-integer>valid integer</dfn> if it consists of one or
  more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
  NINE (9), optionally prefixed with a U+002D HYPHEN-MINUS character
  (-).</p>

  <p>A <a href=#valid-integer>valid integer</a> without a U+002D HYPHEN-MINUS (-)
  prefix represents the number that is represented in base ten by that
  string of digits. A <a href=#valid-integer>valid integer</a> <em>with</em> a
  U+002D HYPHEN-MINUS (-) prefix represents the number represented in
  base ten by the string of digits that follows the U+002D
  HYPHEN-MINUS, subtracted from zero.</p>

  <div class=impl>

  <p>The <dfn id=rules-for-parsing-integers>rules for parsing integers</dfn> are similar to the
  <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative integers">rules for
  non-negative integers</a>, and are as given in the following
  algorithm. When invoked, the steps must be followed in the order
  given, aborting at the first step that returns a value. This
  algorithm will return either an integer or an error. Leading spaces
  are ignored. Trailing spaces and trailing garbage characters are
  ignored.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p>Let <var title="">sign</var> have the value
   "positive".</li>

   <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>

   <li>

    <p>If the character indicated by <var title="">position</var> (the
    first character) is a U+002D HYPHEN-MINUS character (-):</p>

    <ol><li>Let <var title="">sign</var> be "negative".</li>

     <li>Advance <var title="">position</var> to the next
     character.</li>

     <li>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>

    </ol><p>Otherwise, if the character indicated by <var title="">position</var> (the first character) is a U+002B PLUS
    SIGN character (+):</p>

    <ol><li>Advance <var title="">position</var> to the next
     character. (The "<code title="">+</code>" is ignored, but it is
     not conforming.)</li>

     <li>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>

    </ol></li>

   <li><p>If the character indicated by <var title="">position</var>
   is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then
   return an error.</li>

   <!-- Ok. At this point we know we have a number. It might have
   trailing garbage which we'll ignore, but it's a number, and we
   won't return an error. -->

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
   resulting sequence as a base-ten integer. Let <var title="">value</var> be that integer.</li>

   <li><p>If <var title="">sign</var> is "positive", return <var title="">value</var>, otherwise return the result of subtracting
   <var title="">value</var> from zero.</li>

  </ol></div>


  <h5 id=real-numbers><span class=secno>2.4.4.3 </span>Real numbers</h5>

  <p>A string is a <dfn id=valid-floating-point-number>valid floating point number</dfn> if it
  consists of:</p>

  <ol class=brief><li>Optionally, a U+002D HYPHEN-MINUS character (-).</li>

   <li>A series of one or more characters in the range U+0030 DIGIT
   ZERO (0) to U+0039 DIGIT NINE (9).</li>

   <li>Optionally:

    <ol><li>A single U+002E FULL STOP character (.).</li>

     <li>A series of one or more characters in the range U+0030 DIGIT
     ZERO (0) to U+0039 DIGIT NINE (9).</li>

    </ol></li>

   <li>Optionally:

    <ol><li>Either a U+0065 LATIN SMALL LETTER E character (e) or a
     U+0045 LATIN CAPITAL LETTER E character (E).</li>

     <li>Optionally, a U+002D HYPHEN-MINUS character (-) or U+002B
     PLUS SIGN character (+).</li>

     <li>A series of one or more characters in the range U+0030 DIGIT
     ZERO (0) to U+0039 DIGIT NINE (9).</li>

    </ol></li>

  </ol><p>A <a href=#valid-floating-point-number>valid floating point number</a> represents the number
  obtained by multiplying the significand by ten raised to the power
  of the exponent, where the significand is the first number,
  interpreted as base ten (including the decimal point and the number
  after the decimal point, if any, and interpreting the significand as
  a negative number if the whole string starts with a U+002D
  HYPHEN-MINUS character (-) and the number is not zero), and where
  the exponent is the number after the E, if any (interpreted as a
  negative number if there is a U+002D HYPHEN-MINUS character (-)
  between the E and the number and the number is not zero, or else
  ignoring a U+002B PLUS SIGN character (+) between the E and the
  number if there is one). If there is no E, then the exponent is
  treated as zero.</p>

  <p class=note>The Infinity and Not-a-Number (NaN) values are not
  <a href=#valid-floating-point-number title="valid floating point number">valid floating point
  numbers</a>.</p>

  <div class=impl>

  <p>The <dfn id=best-representation-of-the-number-as-a-floating-point-number title="best representation of the number as a floating
  point number">best representation of the number <var title="">n</var> as a floating point number</dfn> is the string
  obtained from applying the JavaScript operator ToString to <var title="">n</var>. The JavaScript operator ToString is not uniquely
  determined. When there are multiple possible strings that could be
  obtained from the JavaScript operator ToString for a particular
  value, the user agent must always return the same string for that
  value (though it may differ from the value used by other user
  agents).</p>

  <p>The <dfn id=rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</dfn> are
  as given in the following algorithm. This algorithm must be aborted
  at the first step that returns something. This algorithm will return
  either a number or an error. Leading spaces are ignored. Trailing
  spaces and garbage characters are ignored.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p>Let <var title="">value</var> have the value 1.</li>

   <li><p>Let <var title="">divisor</var> have the value 1.</li>

   <li><p>Let <var title="">exponent</var> have the value 1.</li>

   <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>

   <li>

    <p>If the character indicated by <var title="">position</var> is a
    U+002D HYPHEN-MINUS character (-):</p>

    <ol><li>Change <var title="">value</var> and <var title="">divisor</var> to &minus;1.</li>

     <li>Advance <var title="">position</var> to the next
     character.</li>

     <li>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>

    </ol></li>

   <li><p>If the character indicated by <var title="">position</var>
   is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then
   return an error.</li>

   <!-- Ok. At this point we know we have a number. It might have
   trailing garbage which we'll ignore, but it's a number, and we
   won't return an error unless it's out of range. -->

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
   resulting sequence as a base-ten integer. Multiply <var title="">value</var> by that integer.</li>

   <li>If <var title="">position</var> is past the end of <var title="">input</var>, jump to the step labeled
   <i>conversion</i>.</li>

   <li><p>If the character indicated by <var title="">position</var>
   is a U+002E FULL STOP (.), run these substeps:</p>

    <ol><li><p>Advance <var title="">position</var> to the next
     character.</li>

     <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, or if the character indicated by <var title="">position</var> is not one of U+0030 DIGIT ZERO (0) to
     U+0039 DIGIT NINE (9), then jump to the step labeled
     <i>conversion</i>.</li>

     <li><p><i>Fraction loop</i>: Multiply <var title="">divisor</var>
     by ten.</li>

     <li>Add the value of the character indicated by <var title="">position</var>, interpreted as a base-ten digit (0..9)
     and divided by <var title="">divisor</var>, to <var title="">value</var>.</li>

     <li><p>Advance <var title="">position</var> to the next
     character.</li>

     <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
     <i>conversion</i>.</li>

     <li><p>If the character indicated by <var title="">position</var>
     is one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), jump
     back to the step labeled <i>fraction loop</i> in these
     substeps.</li>

    </ol></li>

   <li><p>If the character indicated by <var title="">position</var>
   is a U+0065 LATIN SMALL LETTER E character (e) or a U+0045 LATIN
   CAPITAL LETTER E character (E), run these substeps:</p>

    <ol><li><p>Advance <var title="">position</var> to the next
     character.</li>

     <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
     <i>conversion</i>.</li>

     <li>

      <p>If the character indicated by <var title="">position</var> is
      a U+002D HYPHEN-MINUS character (-):</p>

      <ol><li>Change <var title="">exponent</var> to &minus;1.</li>

       <li>Advance <var title="">position</var> to the next
       character.</li>

       <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
       <i>conversion</i>.</li>

      </ol><p>Otherwise, if the character indicated by <var title="">position</var> is a U+002B PLUS SIGN character (+):</p>

      <ol><li>Advance <var title="">position</var> to the next
       character.</li>

       <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
       <i>conversion</i>.</li>

      </ol></li>

     <li><p>If the character indicated by <var title="">position</var>
     is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9),
     then jump to the step labeled <i>conversion</i>.</li>

     <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
     U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
     resulting sequence as a base-ten integer. Multiply <var title="">exponent</var> by that integer.</li>

     <li><p>Multiply <var title="">value</var> by ten raised to the
     <var title="">exponent</var>th power.</li>

    </ol></li>

   <li><p><i>Conversion</i>: Let <var title="">S</var> be the set of
   finite IEEE 754 single-precision floating point values except
   &minus;0, but with two special values added: 2<sup title="">128</sup> and &minus;2<sup title="">128</sup>.</li>

   <li><p>Let <var title="">rounded-value</var> be the number in <var title="">S</var> that is closest to <var title="">value</var>,
   selecting the number with an even significand if there are two
   equally close values. (The two special values 2<sup title="">128</sup> and &minus;2<sup title="">128</sup> are
   considered to have even significands for this purpose.)</li>

   <li><p>If <var title="">rounded-value</var> is 2<sup title="">128</sup> or &minus;2<sup title="">128</sup>, return an
   error.</li>

   <li><p>Return <var title="">rounded-value</var>.</li>

  </ol></div>


<div class=impl>
  <h5 id=percentages-and-dimensions><span class=secno>2.4.4.4 </span>Percentages and lengths</h5>
<!--(percentages are not used in valid html anymore)
  <p>A string is a <dfn>valid dimension value</dfn> if it consists of
  a character in the range U+0031 DIGIT ONE (1) to U+0039 DIGIT NINE
  (9), optionally followed by zero of more characters in the range
  U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), optionally followed
  by a U+002E FULL STOP character (.) and one or more characters in
  the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and
  optionally suffixed by a U+0025 PERCENT SIGN character (%).</p>

  <p>A <span>valid dimension value</span> represents the number that
  is represented in base ten by that string of digits, optionally with
  a fractional component. If the U+0025 PERCENT SIGN is present, then
  the dimension is a percentage; otherwise, it is a length.</p>

  <p class="note">For historical reasons, percentanges and lengths
  less than 1.0 cannot be represented as <span title="valid dimension
  value">valid dimension values</span>.</p>
-->
  <p>The <dfn id=rules-for-parsing-dimension-values>rules for parsing dimension values</dfn> are as given in
  the following algorithm. When invoked, the steps must be followed in
  the order given, aborting at the first step that returns a
  value. This algorithm will return either a number greater than or
  equal to 1.0, or an error; if a number is returned, then it is
  further categorized as either a percentage or a length.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>

   <li><p>If the character indicated by <var title="">position</var>
   is a U+002B PLUS SIGN character (+), advance <var title="">position</var> to the next character.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
   U+0030 DIGIT ZERO (0) characters, and discard them.</li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>

   <li><p>If the character indicated by <var title="">position</var>
   is not one of U+0031 DIGIT ONE (1) to U+0039 DIGIT NINE (9), then
   return an error.</li>

   <!-- Ok. At this point we know we have a number. It might have
   trailing garbage which we'll ignore, but it's a number, and we
   won't return an error. -->

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
   resulting sequence as a base-ten integer. Let <var title="">value</var> be that number.</li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return <var title="">value</var> as a
   length.</li>

   <li>

    <p>If the character indicated by <var title="">position</var> is a
    U+002E FULL STOP character (.):</p>

    <ol><li><p>Advance <var title="">position</var> to the next
     character.</li>

     <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, or if the character indicated by <var title="">position</var> is not one of U+0030 DIGIT ZERO (0) to
     U+0039 DIGIT NINE (9), then return <var title="">value</var> as a
     length.</li>

     <li><p>Let <var title="">divisor</var> have the value 1.</li>

     <li><p><i>Fraction loop</i>: Multiply <var title="">divisor</var>
     by ten.</li>

     <li>Add the value of the character indicated by <var title="">position</var>, interpreted as a base-ten digit (0..9)
     and divided by <var title="">divisor</var>, to <var title="">value</var>.</li>

     <li><p>Advance <var title="">position</var> to the next
     character.</li>

     <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then return <var title="">value</var> as a
     length.</li>

     <li><p>If the character indicated by <var title="">position</var>
     is one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), return
     to the step labeled <i>fraction loop</i> in these
     substeps.</li>

    </ol></li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return <var title="">value</var> as a
   length.</li>

   <li><p>If the character indicated by <var title="">position</var>
   is a U+0025 PERCENT SIGN character (%), return <var title="">value</var> as a percentage.</li>

   <li><p>Return <var title="">value</var> as a length.</li>

  </ol></div>


  <h5 id=lists-of-integers><span class=secno>2.4.4.5 </span>Lists of integers</h5>

  <p>A <dfn id=valid-list-of-integers>valid list of integers</dfn> is a number of <a href=#valid-integer title="valid integer">valid integers</a> separated by U+002C
  COMMA characters, with no other characters (e.g. no <a href=#space-character title="space character">space characters</a>). In addition, there
  might be restrictions on the number of integers that can be given,
  or on the range of values allowed.</p>

  <div class=impl>

  <p>The <dfn id=rules-for-parsing-a-list-of-integers>rules for parsing a list of integers</dfn> are as
  follows:</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p>Let <var title="">numbers</var> be an initially empty list
   of integers. This list will be the result of this
   algorithm.</li>

   <li><p>If there is a character in the string <var title="">input</var> at position <var title="">position</var>, and
   it is either a U+0020 SPACE, U+002C COMMA, or U+003B SEMICOLON
   character, then advance <var title="">position</var> to the next
   character in <var title="">input</var>, or to beyond the end of the
   string if there are no more characters.</li>

   <li><p>If <var title="">position</var> points to beyond the end of
   <var title="">input</var>, return <var title="">numbers</var> and
   abort.</li>

   <li><p>If the character in the string <var title="">input</var> at
   position <var title="">position</var> is a U+0020 SPACE, U+002C
   COMMA, or U+003B SEMICOLON character, then return to step 4.</li>

   <li><p>Let <var title="">negated</var> be false.</li>
   <li><p>Let <var title="">value</var> be 0.</li>

   <li><p>Let <var title="">started</var> be false. This variable is
   set to true when the parser sees a number or a U+002D HYPHEN-MINUS
   character (-).</li>

   <li><p>Let <var title="">got number</var> be false. This variable
   is set to true when the parser sees a number.</li>

   <li><p>Let <var title="">finished</var> be false. This variable is
   set to true to switch parser into a mode where it ignores
   characters until the next separator.</li>

   <li><p>Let <var title="">bogus</var> be false.</li>

   <li><p><i>Parser</i>: If the character in the string <var title="">input</var> at position <var title="">position</var>
   is:</p>

    <dl class=switch><dt>A U+002D HYPHEN-MINUS character</dt>

     <dd>

      <p>Follow these substeps:</p>

      <ol><li>If <var title="">got number</var> is true, let <var title="">finished</var> be true.</li>

       <li>If <var title="">finished</var> is true, skip to the next
       step in the overall set of steps.</li>

       <li>If <var title="">started</var> is true, let <var title="">negated</var> be false.</li>

       <li>Otherwise, if <var title="">started</var> is false and if <var title="">bogus</var> is false, let <var title="">negated</var>
       be true.</li>

       <li>Let <var title="">started</var> be true.</li>

      </ol></dd>


     <dt>A character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
     NINE (9)</dt>

     <dd>

      <p>Follow these substeps:</p>

      <ol><li>If <var title="">finished</var> is true, skip to the next
       step in the overall set of steps.</li>

       <li>Multiply <var title="">value</var> by ten.</li>

       <li>Add the value of the digit, interpreted in base ten, to
       <var title="">value</var>.</li>

       <li>Let <var title="">started</var> be true.</li>

       <li>Let <var title="">got number</var> be true.</li>

      </ol></dd>


     <dt>A U+0020 SPACE character</dt>
     <dt>A U+002C COMMA character</dt>
     <dt>A U+003B SEMICOLON character</dt>

     <dd>

      <p>Follow these substeps:</p>

      <ol><li>If <var title="">got number</var> is false, return the <var title="">numbers</var> list and abort. This happens if an entry
       in the list has no digits, as in "<code title="">1,2,x,4</code>".</li>

       <li>If <var title="">negated</var> is true, then negate <var title="">value</var>.</li>

       <li>Append <var title="">value</var> to the <var title="">numbers</var> list.</li>

       <li>Jump to step 4 in the overall set of steps.</li>

      </ol></dd>


     <!-- <dt>A U+002E FULL STOP character</dt> -->
     <dt>A character in the range U+0001 to U+001F, <!-- space --> U+0021 to U+002B, <!-- comma --> U+002D to U+002F, <!-- digits --> U+003A, <!-- semicolon --> U+003C to U+0040, <!-- a-z --> U+005B to U+0060, <!-- A-Z --> U+007b to U+007F
        (i.e. any other non-alphabetic ASCII character)</dt>

 <!--
 Test: http://www.hixie.ch/tests/adhoc/html/flow/image-maps/004-demo.html
 IE6 on Wine treats the following characters like this also: U+1-U+1f,
 U+21-U+2b, U+2d-U+2f, U+3a, U+3c-U+40, U+5b-U+60, U+7b-U+82,
 U+84-U+89, U+8b, U+8d, U+8f-U+99, U+9b, U+9d, U+a0-U+bf, U+d7, U+f7,
 U+1f6-U+1f9, U+218-U+24f, U+2a9-U+385, U+387, U+38b, U+38d, U+3a2,
 U+3cf, U+3d7-U+3d9, U+3db, U+3dd, U+3df, U+3e1, U+3f4-U+400, U+40d,
 U+450, U+45d, U+482-U+48f, U+4c5-U+4c6, U+4c9-U+4ca, U+4cd-U+4cf,
 U+4ec-U+4ed, U+4f6-U+4f7, U+4fa-U+530, U+557-U+560, U+588-U+5cf,
 U+5eb-U+5ef, U+5f3-U+620, U+63b-U+640, U+64b-U+670, U+6b8-U+6b9,
 U+6bf, U+6cf, U+6d4, U+6d6-U+904, U+93a-U+957, U+962-U+984,
 U+98d-U+98e, U+991-U+992, U+9a9, U+9b1, U+9b3-U+9b5, U+9ba-U+9db,
 U+9de, U+9e2-U+9ef, U+9f2-U+a04, U+a0b-U+a0e, U+a11-U+a12, U+a29,
 U+a31, U+a34, U+a37, U+a3a-U+a58, U+a5d, U+a5f-U+a84, U+a8c, U+a8e,
 U+a92, U+aa9, U+ab1, U+ab4, U+aba-U+adf, U+ae1-U+b04, U+b0d-U+b0e,
 U+b11-U+b12, U+b29, U+b31, U+b34-U+b35, U+b3a-U+b5b, U+b5e,
 U+b62-U+b84, U+b8b-U+b8d, U+b91, U+b96-U+b98, U+b9b, U+b9d,
 U+ba0-U+ba2, U+ba5-U+ba7, U+bab-U+bad, U+bb6, U+bba-U+c04, U+c0d,
 U+c11, U+c29, U+c34, U+c3a-U+c5f, U+c62-U+c84, U+c8d, U+c91, U+ca9,
 U+cb4, U+cba-U+cdd, U+cdf, U+ce2-U+d04, U+d0d, U+d11, U+d29,
 U+d3a-U+d5f, U+d62-U+e00, U+e2f, U+e31, U+e34-U+e3f, U+e46-U+e80,
 U+e83, U+e85-U+e86, U+e89, U+e8b-U+e8c, U+e8e-U+e93, U+e98, U+ea0,
 U+ea4, U+ea6, U+ea8-U+ea9, U+eac, U+eaf-U+edb, U+ede-U+109f,
 U+10c6-U+10cf, U+10f7-U+10ff, U+115a-U+115e, U+11a3-U+11a7,
 U+11fa-U+1dff, U+1e9b-U+1e9f, U+1efa-U+1eff, U+1f16-U+1f17,
 U+1f1e-U+1f1f, U+1f46-U+1f47, U+1f4e-U+1f4f, U+1f58, U+1f5a, U+1f5c,
 U+1f5e, U+1f7e-U+1f7f, U+1fb5, U+1fbd-U+1fc1, U+1fc5, U+1fcd-U+1fcf,
 U+1fd4-U+1fd5, U+1fdc-U+1fdf, U+1fed-U+1ff1, U+1ff5, U+1ffd-U+249b,
 U+24ea-U+3004, U+3006-U+3040, U+3095-U+309a, U+309f-U+30a0, U+30fb,
 U+30ff-U+3104, U+312d-U+3130, U+318f-U+4dff, U+9fa6-U+abff,
 U+d7a4-U+d7ff, U+e000-U+f8ff, U+fa2e-U+faff, U+fb07-U+fb12,
 U+fb18-U+fb1e, U+fb37, U+fb3d, U+fb3f, U+fb42, U+fb45, U+fbb2-U+fbd2,
 U+fbe9, U+fce1, U+fd3e-U+fd4f, U+fd90-U+fd91, U+fdc8-U+fdef,
 U+fdfc-U+fe7f, U+fefd-U+ff20, U+ff3b-U+ff40, U+ff5b-U+ff65, U+ffa0,
 U+ffbf-U+ffc1, U+ffc8-U+ffc9, U+ffd0-U+ffd1, U+ffd8-U+ffd9,
 U+ffdd-U+ffff
 IE7 on Win2003 treats the following characters like this also
 instead: U+1-U+1f, U+21-U+2b, U+2d-U+2f, U+3a, U+3c-U+40, U+5b-U+60,
 U+7b-U+82, U+84-U+89, U+8b, U+8d, U+8f-U+99, U+9b, U+9d, U+a0-U+a9,
 U+ab-U+b4, U+b6-U+b9, U+bb-U+bf, U+d7, U+f7, U+220-U+221,
 U+234-U+24f, U+2ae-U+2af, U+2b9-U+2ba, U+2c2-U+2df, U+2e5-U+2ed,
 U+2ef-U+344, U+346-U+379, U+37b-U+385, U+387, U+38b, U+38d, U+3a2,
 U+3cf, U+3d8-U+3d9, U+3f4-U+3ff, U+482-U+48b, U+4c5-U+4c6,
 U+4c9-U+4ca, U+4cd-U+4cf, U+4f6-U+4f7, U+4fa-U+530, U+557-U+558,
 U+55a-U+560, U+588-U+5cf, U+5eb-U+5ef, U+5f3-U+620, U+63b-U+640,
 U+656-U+66f, U+6d4, U+6dd-U+6e0, U+6e9-U+6ec, U+6ee-U+6f9,
 U+6fd-U+70f, U+72d-U+72f, U+740-U+77f, U+7b1-U+900, U+904,
 U+93a-U+93c, U+94d - U+94f, U+951-U+957, U+964-U+980, U+984,
 U+98d-U+98e, U+991-U+992, U+9a9, U+9b1, U+9b3-U+9b5, U+9ba-U+9bd,
 U+9c5-U+9c6, U+9c9-U+9ca, U+9cd-U+9d6, U+9d8-U+9db, U+9de,
 U+9e4-U+9ef, U+9f2-U+a01, U+a03-U+a04, U+a0b-U+a0e, U+a11-U+a12,
 U+a29, U+a31, U+a34, U+a37, U+a3a-U+a3d, U+a43-U+a46, U+a49-U+a4a,
 U+a4d-U+a58, U+a5d, U+a5f-U+a6f, U+a75-U+a80, U+a84, U+a8c, U+a8e,
 U+a92, U+aa9, U+ab1, U+ab4, U+aba-U+abc, U+ac6, U+aca, U+acd-U+acf,
 U+ad1-U+adf, U+ae1-U+b00, U+b04, U+b0d-U+b0e, U+b11-U+b12, U+b29,
 U+b31, U+b34-U+b35, U+b3a-U+b3c, U+b44-U+b46, U+b49 - U+b4a,
 U+b4d-U+b55, U+b58-U+b5b, U+b5e, U+b62-U+b81, U+b84, U+b8b-U+b8d,
 U+b91, U+b96-U+b98, U+b9b, U+b9d, U+ba0 - U+ba2, U+ba5-U+ba7,
 U+bab-U+bad, U+bb6, U+bba-U+bbd, U+bc3-U+bc5, U+bc9, U+bcd-U+bd6,
 U+bd8-U+c00, U+c04, U+c0d, U+c11, U+c29, U+c34, U+c3a-U+c3d, U+c45,
 U+c49, U+c4d-U+c54, U+c57-U+c5f, U+c62-U+c81, U+c84, U+c8d, U+c91,
 U+ca9, U+cb4, U+cba-U+cbd, U+cc5, U+cc9, U+ccd-U+cd4, U+cd7-U+cdd,
 U+cdf, U+ce2-U+d01, U+d04, U+d0d, U+d11, U+d29, U+d3a-U+d3d,
 U+d44-U+d45, U+d49, U+d4d-U+d56, U+d58-U+d5f, U+d62-U+d81, U+d84,
 U+d97-U+d99, U+db2, U+dbc, U+dbe - U+dbf, U+dc7-U+dce, U+dd5, U+dd7,
 U+de0-U+df1, U+df4-U+e00, U+e3b-U+e3f, U+e4f-U+e80, U+e83,
 U+e85-U+e86, U+e89, U+e8b-U+e8c, U+e8e-U+e93, U+e98, U+ea0, U+ea4,
 U+ea6, U+ea8-U+ea9, U+eac, U+eba, U+ebe-U+ebf, U+ec5-U+ecc,
 U+ece-U+edb, U+ede-U+eff, U+f01-U+f3f, U+f48, U+f6b-U+f70,
 U+f82-U+f87, U+f8c-U+f8f, U+f98, U+fbd-U+fff, U+1022, U+1028, U+102b,
 U+1033-U+1035, U+1037, U+1039-U+104f, U+105a-U+109f, U+10c6-U+10cf,
 U+10f7-U+10ff, U+115a - U+115e, U+11a3-U+11a7, U+11fa-U+11ff, U+1207,
 U+1247, U+1249, U+124e-U+124f, U+1257, U+1259, U+125e-U+125f, U+1287,
 U+1289, U+128e-U+128f, U+12af, U+12b1, U+12b6-U+12b7, U+12bf, U+12c1,
 U+12c6-U+12c7, U+12cf, U+12d7, U+12ef, U+130f, U+1311, U+1316-U+1317,
 U+131f, U+1347, U+135b-U+139f, U+13f5-U+1400, U+166d-U+166e,
 U+1677-U+1680, U+169b - U+169f, U+16eb-U+177f, U+17c9-U+181f, U+1843,
 U+1878-U+187f, U+18aa-U+1dff, U+1e9c-U+1e9f, U+1efa-U+1eff,
 U+1f16-U+1f17, U+1f1e-U+1f1f, U+1f46-U+1f47, U+1f4e-U+1f4f, U+1f58,
 U+1f5a, U+1f5c, U+1f5e, U+1f7e-U+1f7f, U+1fb5, U+1fbd, U+1fbf-U+1fc1,
 U+1fc5, U+1fcd-U+1fcf, U+1fd4-U+1fd5, U+1fdc-U+1fdf, U+1fed-U+1ff1,
 U+1ff5, U+1ffd-U+207e, U+2080-U+2101, U+2103-U+2106, U+2108-U+2109,
 U+2114, U+2116-U+2118, U+211e-U+2123, U+2125, U+2127, U+2129, U+212e,
 U+2132, U+213a-U+215f, U+2184-U+3005, U+3008-U+3020, U+302a-U+3037,
 U+303b-U+3104, U+312d-U+3130, U+318f - U+319f, U+31b8-U+33ff,
 U+4db6-U+4dff, U+9fa6-U+9fff, U+a48d-U+abff, U+d7a4-U+d7ff,
 U+e000-U+f8ff, U+fa2e-U+faff, U+fb07-U+fb12, U+fb18-U+fb1c, U+fb1e,
 U+fb29, U+fb37, U+fb3d, U+fb3f, U+fb42, U+fb45, U+fbb2-U+fbd2,
 U+fd3e-U+fd4f, U+fd90-U+fd91, U+fdc8-U+fdef, U+fdfc-U+fe6f, U+fe73,
 U+fe75, U+fefd-U+ff20, U+ff3b-U+ff40, U+ff5b-U+ff9f, U+ffbf-U+ffc1,
 U+ffc8-U+ffc9, U+ffd0-U+ffd1, U+ffd8-U+ffd9, U+ffdd-U+ffff
 -->

     <dd>

      <p>Follow these substeps:</p>

      <ol><li>If <var title="">got number</var> is true, let <var title="">finished</var> be true.</li>

       <li>If <var title="">finished</var> is true, skip to the next
       step in the overall set of steps.</li>

       <li>Let <var title="">negated</var> be false.</li>

      </ol></dd>


     <dt>Any other character</dt>
     <!-- alphabetic a-z A-Z, and non-ASCII -->

     <dd>

      <p>Follow these substeps:</p>

      <ol><li>If <var title="">finished</var> is true, skip to the next
       step in the overall set of steps.</li>

       <li>Let <var title="">negated</var> be false.</li>

       <li>Let <var title="">bogus</var> be true.</li>

       <li>If <var title="">started</var> is true, then return the
       <var title="">numbers</var> list, and abort. (The value in <var title="">value</var> is not appended to the list first; it is
       dropped.)</li>

      </ol></dd>

    </dl></li>

   <li><p>Advance <var title="">position</var> to the next character
   in <var title="">input</var>, or to beyond the end of the string if
   there are no more characters.</li>

   <li><p>If <var title="">position</var> points to a character (and
   not to beyond the end of <var title="">input</var>), jump to the
   big <i>Parser</i> step above.</li>

   <li><p>If <var title="">negated</var> is true, then negate <var title="">value</var>.</li>

   <li><p>If <var title="">got number</var> is true, then append <var title="">value</var> to the <var title="">numbers</var> list.</li>

   <li><p>Return the <var title="">numbers</var> list and
   abort.</li>

  </ol></div>


  <div class=impl>

  <h5 id=lists-of-dimensions><span class=secno>2.4.4.6 </span>Lists of dimensions</h5>

  <!-- no definition of a type since no conforming feature uses this
  syntax (it's only used in cols="" and rows="" on <frameset> -->

  <p>The <dfn id=rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</dfn> are as
  follows. These rules return a list of zero or more pairs consisting
  of a number and a unit, the unit being one of <i>percentage</i>,
  <i>relative</i>, and <i>absolute</i>.</p>

  <ol><li><p>Let <var title="">raw input</var> be the string being
   parsed.</li>

   <li><p>If the last character in <var title="">raw input</var> is a
   U+002C COMMA character (,), then remove that character from <var title="">raw input</var>.</li>

   <li><p><a href=#split-a-string-on-commas title="split a string on commas">Split the string <var title="">raw input</var> on commas</a>. Let <var title="">raw
   tokens</var> be the resulting list of tokens.</li>

   <li><p>Let <var title="">result</var> be an empty list of
   number/unit pairs.</li>

   <li>

    <p>For each token in <var title="">raw tokens</var>, run the
    following substeps:</p>

    <ol><li><p>Let <var title="">input</var> be the token.</li>

     <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
     string.</li>

     <li><p>Let <var title="">value</var> be the number 0.</li>

     <li><p>Let <var title="">unit</var> be <i>absolute</i>.</li>

     <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, set <var title="">unit</var> to
     <i>relative</i> and jump to the last substep.</li>

     <li><p>If the character at <var title="">position</var> is a
     character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE
     (9), <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> in the range
     U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), interpret the
     resulting sequence as an integer in base ten, and increment <var title="">value</var> by that integer.</li>

     <li>

      <p>If the character at <var title="">position</var> is a U+002E
      FULL STOP character (.), run these substeps:</p>

      <ol><li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> consisting
       of <a href=#space-character title="space character">space characters</a> and
       characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
       NINE (9). Let <var title="">s</var> be the resulting
       sequence.</li>

       <li><p>Remove all <a href=#space-character title="space character">space
       characters</a> in <var title="">s</var>.</li>

       <li>

        <p>If <var title="">s</var> is not the empty string, run these
        subsubsteps:</p>

        <ol><li><p>Let <var title="">length</var> be the number of
         characters in <var title="">s</var> (after the spaces were
         removed).</li>

         <li><p>Let <var title="">fraction</var> be the result of
         interpreting <var title="">s</var> as a base-ten integer, and
         then dividing that number by <span title="">10<sup title=""><var title="">length</var></sup></span>.</li>

         <li><p>Increment <var title="">value</var> by <var title="">fraction</var>.</li>

        </ol></li>

      </ol></li>

     <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

     <li>

      <p>If the character at <var title="">position</var> is a U+0025
      PERCENT SIGN character (%), then set <var title="">unit</var> to
      <i>percentage</i>.</p>

      <p>Otherwise, if the character at <var title="">position</var>
      is a U+002A ASTERISK character (*), then set <var title="">unit</var> to <i>relative</i>.</p>

     </li>

     <!-- the remaining characters in /input/ are ignored -->

     <li><p>Add an entry to <var title="">result</var> consisting of
     the number given by <var title="">value</var> and the unit given
     by <var title="">unit</var>.</li>

    </ol></li>

   <li><p>Return the list <var title="">result</var>.</li>

  </ol></div>


  <h4 id=dates-and-times><span class=secno>2.4.5 </span>Dates and times</h4>

  <p>In the algorithms below, the <dfn id=number-of-days-in-month-month-of-year-year>number of days in month <var title="">month</var> of year <var title="">year</var></dfn> is:
  <em>31</em> if <var title="">month</var> is 1, 3, 5, 7, 8, 10, or
  12; <em>30</em> if <var title="">month</var> is 4, 6, 9, or 11;
  <em>29</em> if <var title="">month</var> is 2 and <var title="">year</var> is a number divisible by 400, or if <var title="">year</var> is a number divisible by 4 but not by 100; and
  <em>28</em> otherwise. This takes into account leap years in the
  Gregorian calendar. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>

  <p>The <dfn id=concept-datetime-digit title=concept-datetime-digit>digits</dfn> in the date
  and time syntaxes defined in this section must be characters in the
  range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), used to
  express numbers in base ten.</p>

  <div class=impl>

  <p class=note>While the formats described here are intended to be
  subsets of the corresponding ISO8601 formats, this specification
  defines parsing rules in much more detail than ISO8601.
  Implementors are therefore encouraged to carefully examine any date
  parsing libraries before using them to implement the parsing rules
  described below; ISO8601 libraries might not parse dates and times
  in exactly the same manner. <a href=#refsISO8601>[ISO8601]</a></p>

  </div>


  <h5 id=months><span class=secno>2.4.5.1 </span>Months</h5>

  <p>A <dfn id=concept-month title=concept-month>month</dfn> consists of a specific
  proleptic Gregorian date with no time-zone information and no date
  information beyond a year and a month. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>

  <p>A string is a <dfn id=valid-month-string>valid month string</dfn> representing a year
  <var title="">year</var> and month <var title="">month</var> if it
  consists of the following components in the given order:</p>

  <ol><li>Four or more <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>, representing <var title="">year</var>, where <var title="">year</var>&nbsp;&gt;&nbsp;0</li>

   <li>A U+002D HYPHEN-MINUS character (-)</li>

   <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   representing the month <var title="">month</var>, in the range
   1&nbsp;&le;&nbsp;<var title="">month</var>&nbsp;&le;&nbsp;12</li>

  </ol><div class=impl>

  <p>The rules to <dfn id=parse-a-month-string>parse a month string</dfn> are as follows. This
  will return either a year and month, or nothing. If at any point the
  algorithm says that it "fails", this means that it is aborted at
  that point and returns nothing.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><a href=#parse-a-month-component>Parse a month component</a> to obtain <var title="">year</var> and <var title="">month</var>. If this returns
   nothing, then fail.</p>

   <li><p>If <var title="">position</var> is <em>not</em> beyond the
   end of <var title="">input</var>, then fail.</li>

   <li><p>Return <var title="">year</var> and <var title="">month</var>.</li>

  </ol><p>The rules to <dfn id=parse-a-month-component>parse a month component</dfn>, given an <var title="">input</var> string and a <var title="">position</var>, are
  as follows. This will return either a year and a month, or
  nothing. If at any point the algorithm says that it "fails", this
  means that it is aborted at that point and returns nothing.</p>

  <ol><li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   sequence is not at least four characters long, then
   fail. Otherwise, interpret the resulting sequence as a base-ten
   integer. Let that number be the <var title="">year</var>.</li>

   <li><p>If <var title="">year</var> is not a number greater than
   zero, then fail.</li>

   <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+002D HYPHEN-MINUS character,
   then fail. Otherwise, move <var title="">position</var> forwards
   one character.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   sequence is not exactly two characters long, then fail. Otherwise,
   interpret the resulting sequence as a base-ten integer. Let that
   number be the <var title="">month</var>.</li>

   <li><p>If <var title="">month</var> is not a number in the range
   1&nbsp;&le;&nbsp;<var title="">month</var>&nbsp;&le;&nbsp;12, then
   fail.</li>

   <li><p>Return <var title="">year</var> and <var title="">month</var>.</li>

  </ol></div>


  <h5 id=dates><span class=secno>2.4.5.2 </span>Dates</h5>

  <p>A <dfn id=concept-date title=concept-date>date</dfn> consists of a specific
  proleptic Gregorian date with no time-zone information, consisting
  of a year, a month, and a day. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>

  <p>A string is a <dfn id=valid-date-string>valid date string</dfn> representing a year
  <var title="">year</var>, month <var title="">month</var>, and day
  <var title="">day</var> if it consists of the following components
  in the given order:</p>

  <ol><li>A <a href=#valid-month-string>valid month string</a>, representing <var title="">year</var> and <var title="">month</var></li>

   <li>A U+002D HYPHEN-MINUS character (-)</li>

   <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   representing <var title="">day</var>, in the range
   1&nbsp;&le;&nbsp;<var title="">day</var>&nbsp;&le;&nbsp;<var title="">maxday</var> where <var title="">maxday</var> is the <a href=#number-of-days-in-month-month-of-year-year title="number of days in month month of year year">number of days
   in the month <var title="">month</var> and year <var title="">year</var></a></li>

  </ol><div class=impl>

  <p>The rules to <dfn id=parse-a-date-string>parse a date string</dfn> are as follows. This
  will return either a date, or nothing. If at any point the algorithm
  says that it "fails", this means that it is aborted at that point
  and returns nothing.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><a href=#parse-a-date-component>Parse a date component</a> to obtain <var title="">year</var>, <var title="">month</var>, and <var title="">day</var>. If this returns nothing, then fail.</p>

   <li><p>If <var title="">position</var> is <em>not</em> beyond the
   end of <var title="">input</var>, then fail.</li>

   <li><p>Let <var title="">date</var> be the date with year <var title="">year</var>, month <var title="">month</var>, and day <var title="">day</var>.</li>

   <li><p>Return <var title="">date</var>.</li>

  </ol><p>The rules to <dfn id=parse-a-date-component>parse a date component</dfn>, given an <var title="">input</var> string and a <var title="">position</var>, are
  as follows. This will return either a year, a month, and a day, or
  nothing. If at any point the algorithm says that it "fails", this
  means that it is aborted at that point and returns nothing.</p>

  <ol><li><p><a href=#parse-a-month-component>Parse a month component</a> to obtain <var title="">year</var> and <var title="">month</var>. If this returns
   nothing, then fail.</li>

   <li><p>Let <var title="">maxday</var> be the <a href=#number-of-days-in-month-month-of-year-year>number of days
   in month <var title="">month</var> of year <var title="">year</var></a>.</li>

   <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+002D HYPHEN-MINUS character,
   then fail. Otherwise, move <var title="">position</var> forwards
   one character.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   sequence is not exactly two characters long, then fail. Otherwise,
   interpret the resulting sequence as a base-ten integer. Let that
   number be the <var title="">day</var>.</li>

   <li><p>If <var title="">day</var> is not a number in the range
   1&nbsp;&le;&nbsp;<var title="">day</var>&nbsp;&le;&nbsp;<var title="">maxday</var>, then fail.</li>

   <li><p>Return <var title="">year</var>, <var title="">month</var>,
   and <var title="">day</var>.</li>

  </ol></div>


  <h5 id=times><span class=secno>2.4.5.3 </span>Times</h5>

  <p>A <dfn id=concept-time title=concept-time>time</dfn> consists of a specific
  time with no time-zone information, consisting of an hour, a minute,
  a second, and a fraction of a second.</p>

  <p>A string is a <dfn id=valid-time-string>valid time string</dfn> representing an hour
  <var title="">hour</var>, a minute <var title="">minute</var>, and a
  second <var title="">second</var> if it consists of the following
  components in the given order:</p>

  <ol><li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   representing <var title="">hour</var>, in the range
   0&nbsp;&le;&nbsp;<var title="">hour</var>&nbsp;&le;&nbsp;23</li>

   <li>A U+003A COLON character (:)</li>

   <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   representing <var title="">minute</var>, in the range
   0&nbsp;&le;&nbsp;<var title="">minute</var>&nbsp;&le;&nbsp;59</li>

   <li>Optionally (required if <var title="">second</var> is
   non-zero):

    <ol><li>A U+003A COLON character (:)</li>

     <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
     representing the integer part of <var title="">second</var>, in
     the range 0&nbsp;&le;&nbsp;<var title="">s</var>&nbsp;&le;&nbsp;59</li>

     <li>Optionally (required if <var title="">second</var> is not an
     integer):

      <ol><li>A 002E FULL STOP character (.)</li>

       <li>One or more <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>, representing the
       fractional part of <var title="">second</var></li>

      </ol></li>

    </ol></li>

  </ol><p class=note>The <var title="">second</var> component cannot be
  60 or 61; leap seconds cannot be represented.</p>

  <div class=impl>

  <p>The rules to <dfn id=parse-a-time-string>parse a time string</dfn> are as follows. This
  will return either a time, or nothing. If at any point the algorithm
  says that it "fails", this means that it is aborted at that point
  and returns nothing.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><a href=#parse-a-time-component>Parse a time component</a> to obtain <var title="">hour</var>, <var title="">minute</var>, and <var title="">second</var>. If this returns nothing, then fail.</p>

   <li><p>If <var title="">position</var> is <em>not</em> beyond the
   end of <var title="">input</var>, then fail.</li>

   <li><p>Let <var title="">time</var> be the time with hour <var title="">hour</var>, minute <var title="">minute</var>, and second
   <var title="">second</var>.</li>

   <li><p>Return <var title="">time</var>.</li>

  </ol><p>The rules to <dfn id=parse-a-time-component>parse a time component</dfn>, given an <var title="">input</var> string and a <var title="">position</var>, are
  as follows. This will return either an hour, a minute, and a second,
  or nothing. If at any point the algorithm says that it "fails", this
  means that it is aborted at that point and returns nothing.</p>

  <ol><li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   sequence is not exactly two characters long, then fail. Otherwise,
   interpret the resulting sequence as a base-ten integer. Let that
   number be the <var title="">hour</var>.</li>

   <li>If <var title="">hour</var> is not a number in the range
   0&nbsp;&le;&nbsp;<var title="">hour</var>&nbsp;&le;&nbsp;23, then
   fail.</li>

   <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+003A COLON character, then
   fail. Otherwise, move <var title="">position</var> forwards one
   character.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   sequence is not exactly two characters long, then fail. Otherwise,
   interpret the resulting sequence as a base-ten integer. Let that
   number be the <var title="">minute</var>.</li>

   <li>If <var title="">minute</var> is not a number in the range
   0&nbsp;&le;&nbsp;<var title="">minute</var>&nbsp;&le;&nbsp;59, then
   fail.</li>

   <li><p>Let <var title="">second</var> be a string with the value
   "0".</li>

   <li>

    <p>If <var title="">position</var> is not beyond the end of
    <var title="">input</var> and the character at <var title="">position</var> is a U+003A COLON, then run these
    substeps:</p>

    <ol><li><p>Advance <var title="">position</var> to the next character
     in <var title="">input</var>.</li>

     <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var>, or at the last character in <var title="">input</var>, or if the next <em>two</em> characters in
     <var title="">input</var> starting at <var title="">position</var> are not two characters both in the range
     U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then
     fail.</li>

     <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
     either characters in the range U+0030 DIGIT ZERO (0) to U+0039
     DIGIT NINE (9) or U+002E FULL STOP characters. If the collected
     sequence has more than one U+002E FULL STOP characters, or if the
     last character in the sequence is a U+002E FULL STOP character,
     then fail. Otherwise, let the collected string be <var title="">second</var> instead of its previous value.</li>

    </ol></li>

   <li><p>Interpret <var title="">second</var> as a base-ten number
   (possibly with a fractional part). Let <var title="">second</var>
   be that number instead of the string version.</li>

   <li><p>If <var title="">second</var> is not a number in the range
   0&nbsp;&le;&nbsp;<var title="">second</var>&nbsp;&lt;&nbsp;60, then
   fail.</li>

   <li><p>Return <var title="">hour</var>, <var title="">minute</var>,
   and <var title="">second</var>.</li>

  </ol></div>


  <h5 id=local-dates-and-times><span class=secno>2.4.5.4 </span>Local dates and times</h5>

  <p>A <dfn id=concept-datetime-local title=concept-datetime-local>local date and time</dfn>
  consists of a specific proleptic Gregorian date, consisting of a
  year, a month, and a day, and a time, consisting of an hour, a
  minute, a second, and a fraction of a second, but expressed without
  a time zone. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>

  <p>A string is a <dfn id=valid-local-date-and-time-string>valid local date and time string</dfn>
  representing a date and time if it consists of the following
  components in the given order:</p>

  <ol><li>A <a href=#valid-date-string>valid date string</a> representing the date.</li>

   <li>A U+0054 LATIN CAPITAL LETTER T character (T).</li>

   <li>A <a href=#valid-time-string>valid time string</a> representing the time.</li>

  </ol><div class=impl>

  <p>The rules to <dfn id=parse-a-local-date-and-time-string>parse a local date and time string</dfn> are as
  follows. This will return either a date and time, or nothing. If at
  any point the algorithm says that it "fails", this means that it is
  aborted at that point and returns nothing.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><a href=#parse-a-date-component>Parse a date component</a> to obtain <var title="">year</var>, <var title="">month</var>, and <var title="">day</var>. If this returns nothing, then fail.</p>

   <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+0054 LATIN CAPITAL LETTER T
   character (T) then fail. Otherwise, move <var title="">position</var> forwards one character.</li>

   <li><p><a href=#parse-a-time-component>Parse a time component</a> to obtain <var title="">hour</var>, <var title="">minute</var>, and <var title="">second</var>. If this returns nothing, then fail.</p>

   <li><p>If <var title="">position</var> is <em>not</em> beyond the
   end of <var title="">input</var>, then fail.</li>

   <li><p>Let <var title="">date</var> be the date with year <var title="">year</var>, month <var title="">month</var>, and day <var title="">day</var>.</li>

   <li><p>Let <var title="">time</var> be the time with hour <var title="">hour</var>, minute <var title="">minute</var>, and second
   <var title="">second</var>.</li>

   <li><p>Return <var title="">date</var> and <var title="">time</var>.</li>

  </ol></div>



  <h5 id=global-dates-and-times><span class=secno>2.4.5.5 </span>Global dates and times</h5>

  <p>A <dfn id=concept-datetime title=concept-datetime>global date and time</dfn>
  consists of a specific proleptic Gregorian date, consisting of a
  year, a month, and a day, and a time, consisting of an hour, a
  minute, a second, and a fraction of a second, expressed with a
  time-zone offset, consisting of a signed number of hours and
  minutes. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>

  <p>A string is a <dfn id=valid-global-date-and-time-string>valid global date and time string</dfn>
  representing a date, time, and a time-zone offset if it consists of
  the following components in the given order:</p>

  <ol><li>A <a href=#valid-date-string>valid date string</a> representing the date</li>

   <li>A U+0054 LATIN CAPITAL LETTER T character (T)</li>

   <li>A <a href=#valid-time-string>valid time string</a> representing the time</li>

   <li>Either:

    <ul><li>A U+005A LATIN CAPITAL LETTER Z character (Z), allowed only
     if the time zone is UTC</li>

     <li>Or:

      <ol><li>Either a U+002B PLUS SIGN character (+) or a U+002D
       HYPHEN-MINUS character (-), representing the sign of the
       time-zone offset</li>

       <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
       representing the hours component <var title="">hour</var> of
       the time-zone offset, in the range 0&nbsp;&le;&nbsp;<var title="">hour</var>&nbsp;&le;&nbsp;23</li>

       <li>A U+003A COLON character (:)</li>

       <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
       representing the minutes component <var title="">minute</var>
       of the time-zone offset, in the range 0&nbsp;&le;&nbsp;<var title="">minute</var>&nbsp;&le;&nbsp;59</li>

      </ol></li>

    </ul></li>

  </ol><p class=note>This format allows for time-zone offsets from -23:59
  to +23:59. In practice, however, the range of offsets of actual time
  zones is -12:00 to +14:00, and the minutes component of offsets of
  actual time zones is always either 00, 30, or 45.</p>

  <div class=example>

   <p>The following are some examples of dates written as <a href=#valid-global-date-and-time-string title="valid global date and time string">valid global date and
   time strings</a>.</p>

   <dl><dt>"<code>0037-12-13T00:00Z</code>"</dt>

    <dd>Midnight UTC on the birthday of Nero (the Roman Emperor). See
    below for further discussion on which date this actually
    corresponds to.</dd>

    <dt>"<code>1979-10-14T12:00:00.001-04:00</code>"</dt>

    <dd>One millisecond after noon on October 14th 1979, in the time
    zone in use on the east coast of the USA during daylight saving
    time.</dd>

    <dt>"<code>8592-01-01T02:09+02:09</code>"</dt>

    <dd>Midnight UTC on the 1st of January, 8592. The time zone
    associated with that time is two hours and nine minutes ahead of
    UTC, which is not currently a real time zone, but is nonetheless
    allowed.</dd>

   </dl><p>Several things are notable about these dates:</p>

   <ul><li>Years with fewer than four digits have to be
    zero-padded. The date "37-12-13" would not be a valid date.</li>

    <li>To unambiguously identify a moment in time prior to the
    introduction of the Gregorian calendar, the date has to be first
    converted to the Gregorian calendar from the calendar in use at
    the time (e.g. from the Julian calendar). The date of Nero's birth
    is the 15th of December 37, in the Julian Calendar, which is the
    13th of December 37 in the proleptic Gregorian Calendar.</li> <!--
    This might not be true. I can't find a reference that gives his
    birthday with an explicit statement about the calendar being
    used. However, it seems unlikely that it would be given in the
    Gregorian calendar, so I assume sites use the Julian one. -->

    <li>The time and time-zone offset components are not optional.</li>

    <li>Dates before the year one can't be represented as a datetime
    in this version of HTML.</li>

    <li>Time-zone offsets differ based on daylight savings time.</li>

   </ul></div>

  <div class=impl>

  <p>The <dfn id=best-representation-of-the-global-date-and-time-string>best representation of the global date and time
  string</dfn> <var title="">datetime</var> is the <a href=#valid-global-date-and-time-string>valid global
  date and time string</a> representing <var title="">datetime</var> with the last character of the string not
  being a U+005A LATIN CAPITAL LETTER Z character (Z), even if the
  time zone is UTC, and with a U+002D HYPHEN-MINUS character (-)
  representing the sign of the time-zone offset when the time zone is
  UTC.</p>

  <p>The rules to <dfn id=parse-a-global-date-and-time-string>parse a global date and time string</dfn> are
  as follows. This will return either a time in UTC, with associated
  time-zone offset information for round tripping or display purposes,
  or nothing. If at any point the algorithm says that it "fails", this
  means that it is aborted at that point and returns nothing.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><a href=#parse-a-date-component>Parse a date component</a> to obtain <var title="">year</var>, <var title="">month</var>, and <var title="">day</var>. If this returns nothing, then fail.</p>

   <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+0054 LATIN CAPITAL LETTER T
   character (T) then fail. Otherwise, move <var title="">position</var> forwards one character.</li>

   <li><p><a href=#parse-a-time-component>Parse a time component</a> to obtain <var title="">hour</var>, <var title="">minute</var>, and <var title="">second</var>. If this returns nothing, then fail.</p>

   <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var>, then fail.</li>

   <li><p><a href=#parse-a-time-zone-offset-component>Parse a time-zone offset component</a> to obtain
   <var title="">timezone<sub title="">hours</sub></var> and <var title="">timezone<sub title="">minutes</sub></var>. If this returns
   nothing, then fail.</p>

   <li><p>If <var title="">position</var> is <em>not</em> beyond the
   end of <var title="">input</var>, then fail.</li>

   <li><p>Let <var title="">time</var> be the moment in time at year
   <var title="">year</var>, month <var title="">month</var>, day <var title="">day</var>, hours <var title="">hour</var>, minute <var title="">minute</var>, second <var title="">second</var>,
   subtracting <var title="">timezone<sub title="">hours</sub></var>
   hours and <var title="">timezone<sub title="">minutes</sub></var>
   minutes. That moment in time is a moment in the UTC
   time zone.</li>

   <li><p>Let <var title="">timezone</var> be <var title="">timezone<sub title="">hours</sub></var> hours and <var title="">timezone<sub title="">minutes</sub></var> minutes from
   UTC.</li>

   <li><p>Return <var title="">time</var> and <var title="">timezone</var>.</li>

  </ol><p>The rules to <dfn id=parse-a-time-zone-offset-component>parse a time-zone offset component</dfn>, given
  an <var title="">input</var> string and a <var title="">position</var>, are as follows. This will return either
  time-zone hours and time-zone minutes, or nothing. If at any point
  the algorithm says that it "fails", this means that it is aborted at
  that point and returns nothing.</p>

  <ol><li>

    <p>If the character at <var title="">position</var> is a U+005A
    LATIN CAPITAL LETTER Z character (Z), then:</p>

    <ol><li><p>Let <var title="">timezone<sub title="">hours</sub></var>
     be 0.</li>

     <li><p>Let <var title="">timezone<sub title="">minutes</sub></var> be 0.</li>

     <li><p>Advance <var title="">position</var> to the next character
     in <var title="">input</var>.</li>

    </ol><p>Otherwise, if the character at <var title="">position</var> is
    either a U+002B PLUS SIGN (+) or a U+002D HYPHEN-MINUS (-),
    then:</p>

    <ol><li><p>If the character at <var title="">position</var> is a
     U+002B PLUS SIGN (+), let <var title="">sign</var> be
     "positive". Otherwise, it's a U+002D HYPHEN-MINUS (-); let <var title="">sign</var> be "negative".</li>

     <li><p>Advance <var title="">position</var> to the next character
     in <var title="">input</var>.</li>

     <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
     U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
     sequence is not exactly two characters long, then
     fail. Otherwise, interpret the resulting sequence as a base-ten
     integer. Let that number be the <var title="">timezone<sub title="">hours</sub></var>.</li>

     <li>If <var title="">timezone<sub title="">hours</sub></var> is
     not a number in the range 0&nbsp;&le;&nbsp;<var title="">timezone<sub title="">hours</sub></var>&nbsp;&le;&nbsp;23, then fail.</li>

     <li>If <var title="">sign</var> is "negative", then negate <var title="">timezone<sub title="">hours</sub></var>.</li>

     <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+003A COLON character, then
     fail. Otherwise, move <var title="">position</var> forwards one
     character.</li>

     <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
     U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
     sequence is not exactly two characters long, then
     fail. Otherwise, interpret the resulting sequence as a base-ten
     integer. Let that number be the <var title="">timezone<sub title="">minutes</sub></var>.</li>

     <li>If <var title="">timezone<sub title="">minutes</sub></var> is
     not a number in the range 0&nbsp;&le;&nbsp;<var title="">timezone<sub title="">minutes</sub></var>&nbsp;&le;&nbsp;59, then fail.</li>

     <li>If <var title="">sign</var> is "negative", then negate <var title="">timezone<sub title="">minutes</sub></var>.</li>

    </ol><p>Otherwise, fail.</p>

   </li>

   <li><p>Return <var title="">timezone<sub title="">hours</sub></var>
   and <var title="">timezone<sub title="">minutes</sub></var>.</li>

  </ol></div>


  <h5 id=weeks><span class=secno>2.4.5.6 </span>Weeks</h5>

  <p>A <dfn id=concept-week title=concept-week>week</dfn> consists of a week-year
  number and a week number representing a seven-day period starting on
  a Monday. Each week-year in this calendaring system has either 52 or
  53 such seven-day periods, as defined below. The seven-day period
  starting on the Gregorian date Monday December 29th 1969
  (1969-12-29) is defined as week number 1 in week-year
  1970. Consecutive weeks are numbered sequentially. The week before
  the number 1 week in a week-year is the last week in the previous
  week-year, and vice versa. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>

  <p>A week-year with a number <var title="">year</var> has 53 weeks
  if it corresponds to either a year <var title="">year</var> in the
  proleptic Gregorian calendar that has a Thursday as its first day
  (January 1st), or a year <var title="">year</var> in the proleptic
  Gregorian calendar that has a Wednesday as its first day (January
  1st) and where <var title="">year</var> is a number divisible by
  400, or a number divisible by 4 but not by 100. All other week-years
  have 52 weeks.</p>

  <p>The <dfn id=week-number-of-the-last-day>week number of the last day</dfn> of a week-year with 53
  weeks is 53; the week number of the last day of a week-year with 52
  weeks is 52.</p>

  <p class=note>The week-year number of a particular day can be
  different than the number of the year that contains that day in the
  proleptic Gregorian calendar. The first week in a week-year <var title="">y</var> is the week that contains the first Thursday of
  the Gregorian year <var title="">y</var>.</p>

  <p>A string is a <dfn id=valid-week-string>valid week string</dfn> representing a
  week-year <var title="">year</var> and week <var title="">week</var>
  if it consists of the following components in the given order:</p>

  <ol><li>Four or more <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>, representing <var title="">year</var>, where <var title="">year</var>&nbsp;&gt;&nbsp;0</li>

   <li>A U+002D HYPHEN-MINUS character (-)</li>

   <li>A U+0057 LATIN CAPITAL LETTER W character (W)</li>

   <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   representing the week <var title="">week</var>, in the range
   1&nbsp;&le;&nbsp;<var title="">week</var>&nbsp;&le;&nbsp;<var title="">maxweek</var>, where <var title="">maxweek</var> is the
   <a href=#week-number-of-the-last-day>week number of the last day</a> of week-year <var title="">year</var></li>

  </ol><div class=impl>

  <p>The rules to <dfn id=parse-a-week-string>parse a week string</dfn> are as follows. This
  will return either a week-year number and week number, or
  nothing. If at any point the algorithm says that it "fails", this
  means that it is aborted at that point and returns nothing.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   sequence is not at least four characters long, then
   fail. Otherwise, interpret the resulting sequence as a base-ten
   integer. Let that number be the <var title="">year</var>.</li>

   <li><p>If <var title="">year</var> is not a number greater than
   zero, then fail.</li>

   <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+002D HYPHEN-MINUS character,
   then fail. Otherwise, move <var title="">position</var> forwards
   one character.</li>

   <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+0057 LATIN CAPITAL LETTER W
   character (W), then fail. Otherwise, move <var title="">position</var> forwards one character.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   sequence is not exactly two characters long, then fail. Otherwise,
   interpret the resulting sequence as a base-ten integer. Let that
   number be the <var title="">week</var>.</li>

   <li><p>Let <var title="">maxweek</var> be the <a href=#week-number-of-the-last-day>week number of
   the last day</a> of year <var title="">year</var>.</li>

   <li><p>If <var title="">week</var> is not a number in the range
   1&nbsp;&le;&nbsp;<var title="">week</var>&nbsp;&le;&nbsp;<var title="">maxweek</var>, then fail.</li>

   <li><p>If <var title="">position</var> is <em>not</em> beyond the
   end of <var title="">input</var>, then fail.</li>

   <li><p>Return the week-year number <var title="">year</var> and the
   week number <var title="">week</var>.</li>

  </ol></div>


  <h5 id=vaguer-moments-in-time><span class=secno>2.4.5.7 </span>Vaguer moments in time</h5>

  <p>A string is a <dfn id=valid-date-or-time-string>valid date or time string</dfn> if it is also
  one of the following:</p>

  <ul><li>A <a href=#valid-date-string>valid date string</a>.</li>

   <li>A <a href=#valid-time-string>valid time string</a>.</li>

   <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</li>

  </ul><p>A string is a <dfn id=valid-date-or-time-string-in-content>valid date or time string in content</dfn> if
  it consists of zero or more <a href=#white_space>White_Space</a> characters,
  followed by a <a href=#valid-date-or-time-string>valid date or time string</a>, followed by
  zero or more further <a href=#white_space>White_Space</a> characters.</p>

  <hr><p>A string is a <dfn id=valid-date-string-with-optional-time>valid date string with optional time</dfn> if
  it is also one of the following:</p>

  <ul><li>A <a href=#valid-date-string>valid date string</a>.</li>

   <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</li>

  </ul><p>A string is a <dfn id=valid-date-string-in-content-with-optional-time>valid date string in content with optional
  time</dfn> if it consists of zero or more <a href=#white_space>White_Space</a>
  characters, followed by a <a href=#valid-date-string-with-optional-time>valid date string with optional
  time</a>, followed by zero or more further
  <a href=#white_space>White_Space</a> characters.</p>

  <div class=impl>

  <hr><p>The rules to <dfn id=parse-a-date-or-time-string>parse a date or time string</dfn> are as
  follows. The algorithm is invoked with a flag indicating if the
  <i>in attribute</i> variant or the <i>in content</i> variant is to
  be used. The algorithm will return either a <a href=#concept-date title=concept-date>date</a>, a <a href=#concept-time title=concept-time>time</a>, a <a href=#concept-datetime title=concept-datetime>global date and time</a>, or nothing. If
  at any point the algorithm says that it "fails", this means that it
  is aborted at that point and returns nothing.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p>For the <i>in content</i> variant: <a href=#skip-white_space-characters>skip White_Space
   characters</a>.</li>

   <li><p>Set <var title="">start position</var> to the same position
   as <var title="">position</var>.</li>

   <li><p>Set the <var title="">date present</var> and <var title="">time present</var> flags to true.</li>

   <li><p><a href=#parse-a-date-component>Parse a date component</a> to obtain <var title="">year</var>, <var title="">month</var>, and <var title="">day</var>. If this fails, then set the <var title="">date
   present</var> flag to false.</p>

   <li>

    <p>If <var title="">date present</var> is true, and <var title="">position</var> is not beyond the end of <var title="">input</var>, and the character at <var title="">position</var> is a U+0054 LATIN CAPITAL LETTER T
    character (T), then advance <var title="">position</var> to the
    next character in <var title="">input</var>.</p>

    <p>Otherwise, if <var title="">date present</var> is true, and
    either <var title="">position</var> is beyond the end of <var title="">input</var> or the character at <var title="">position</var> is not a U+0054 LATIN CAPITAL LETTER T
    character (T), then set <var title="">time present</var> to
    false.</p>

    <p>Otherwise, if <var title="">date present</var> is false, set
    <var title="">position</var> back to the same position as <var title="">start position</var>.</p>

   </li>

   <li><p>If the <var title="">time present</var> flag is true, then
   <a href=#parse-a-time-component>parse a time component</a> to obtain <var title="">hour</var>, <var title="">minute</var>, and <var title="">second</var>. If this returns nothing, then fail.</li>

   <li><p>If the <var title="">date present</var> and <var title="">time present</var> flags are both true, but <var title="">position</var> is beyond the end of <var title="">input</var>, then fail.</li>

   <li><p>If the <var title="">date present</var> and <var title="">time present</var> flags are both true, <a href=#parse-a-time-zone-offset-component>parse a
   time-zone offset component</a> to obtain <var title="">timezone<sub title="">hours</sub></var> and <var title="">timezone<sub title="">minutes</sub></var>. If this returns
   nothing, then fail.</p>

   <li><p>For the <i>in content</i> variant: <a href=#skip-white_space-characters>skip White_Space
   characters</a>.</li>

   <li><p>If <var title="">position</var> is <em>not</em> beyond the
   end of <var title="">input</var>, then fail.</li>

   <li>

    <p>If the <var title="">date present</var> flag is true and the
    <var title="">time present</var> flag is false, then let <var title="">date</var> be the date with year <var title="">year</var>, month <var title="">month</var>, and day <var title="">day</var>, and return <var title="">date</var>.</p>

    <p>Otherwise, if the <var title="">time present</var> flag is true
    and the <var title="">date present</var> flag is false, then let
    <var title="">time</var> be the time with hour <var title="">hour</var>, minute <var title="">minute</var>, and second
    <var title="">second</var>, and return <var title="">time</var>.</p>

    <p>Otherwise, let <var title="">time</var> be the moment in time
    at year <var title="">year</var>, month <var title="">month</var>,
    day <var title="">day</var>, hours <var title="">hour</var>,
    minute <var title="">minute</var>, second <var title="">second</var>, subtracting <var title="">timezone<sub title="">hours</sub></var> hours and <var title="">timezone<sub title="">minutes</sub></var> minutes, that moment in time being a
    moment in the UTC time zone; let <var title="">timezone</var> be
    <var title="">timezone<sub title="">hours</sub></var> hours and
    <var title="">timezone<sub title="">minutes</sub></var> minutes
    from UTC; and return <var title="">time</var> and <var title="">timezone</var>.</p>

   </li>

  </ol></div>


  <h4 id=colors><span class=secno>2.4.6 </span>Colors</h4>

  <p>A <dfn id=simple-color>simple color</dfn> consists of three 8-bit numbers in the
  range 0..255, representing the red, green, and blue components of
  the color respectively, in the sRGB color space. <a href=#refsSRGB>[SRGB]</a></p>

  <p>A string is a <dfn id=valid-simple-color>valid simple color</dfn> if it is exactly
  seven characters long, and the first character is a U+0023 NUMBER
  SIGN character (#), and the remaining six characters are all in the
  range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN
  CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, U+0061 LATIN
  SMALL LETTER A to U+0066 LATIN SMALL LETTER F, with the first two
  digits representing the red component, the middle two digits
  representing the green component, and the last two digits
  representing the blue component, in hexadecimal.</p>

  <p>A string is a <dfn id=valid-lowercase-simple-color>valid lowercase simple color</dfn> if it is a
  <a href=#valid-simple-color>valid simple color</a> and doesn't use any characters in
  the range U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL
  LETTER F.</p>

  <div class=impl>

  <p>The <dfn id=rules-for-parsing-simple-color-values>rules for parsing simple color values</dfn> are as given
  in the following algorithm. When invoked, the steps must be followed
  in the order given, aborting at the first step that returns a
  value. This algorithm will return either a <a href=#simple-color>simple color</a>
  or an error.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>If <var title="">input</var> is not exactly seven characters
   long, then return an error.</li>

   <li><p>If the first character in <var title="">input</var> is not a
   U+0023 NUMBER SIGN character (#), then return an error.</li>

   <li><p>If the last six characters of <var title="">input</var> are
   not all in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE
   (9), U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER
   F, U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, then
   return an error.</li>

   <li><p>Let <var title="">result</var> be a <a href=#simple-color>simple
   color</a>.</p>

   <li><p>Interpret the second and third characters as a hexadecimal
   number and let the result be the red component of <var title="">result</var>.</p>

   <li><p>Interpret the fourth and fifth characters as a hexadecimal
   number and let the result be the green component of <var title="">result</var>.</p>

   <li><p>Interpret the sixth and seventh characters as a hexadecimal
   number and let the result be the blue component of <var title="">result</var>.</p>

   <li><p>Return <var title="">result</var>.</p>

  </ol><p>The <dfn id=rules-for-serializing-simple-color-values>rules for serializing simple color values</dfn> given a
  <a href=#simple-color>simple color</a> are as given in the following
  algorithm:</p>

  <ol><li><p>Let <var title="">result</var> be a string consisting of a
   single U+0023 NUMBER SIGN character (#).</li>

   <li><p>Convert the red, green, and blue components in turn to
   two-digit hexadecimal numbers using the digits U+0030 DIGIT ZERO
   (0) to U+0039 DIGIT NINE (9) and U+0061 LATIN SMALL LETTER A
   to U+0066 LATIN SMALL LETTER F, zero-padding if necessary, and
   append these numbers to <var title="">result</var>, in the order
   red, green, blue.</p>

   <li><p>Return <var title="">result</var>, which will be a
   <a href=#valid-lowercase-simple-color>valid lowercase simple color</a>.</li>

  </ol><hr><p>Some obsolete legacy attributes parse colors in a more
  complicated manner, using the <dfn id=rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
  value</dfn>, which are given in the following algorithm. When
  invoked, the steps must be followed in the order given, aborting at
  the first step that returns a value. This algorithm will return
  either a <a href=#simple-color>simple color</a> or an error.</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>If <var title="">input</var> is the empty string, then
   return an error.</li>

   <li><p>If <var title="">input</var> is an <a href=#ascii-case-insensitive>ASCII
   case-insensitive</a> match for the string "<code title="">transparent</code>", then return an error.</li>

   <li><p>If <var title="">input</var> is an <a href=#ascii-case-insensitive>ASCII
   case-insensitive</a> match for one of the keywords listed in the
   <a href=http://www.w3.org/TR/css3-color/#svg-color>SVG color
   keywords</a> or <a href=http://www.w3.org/TR/css3-color/#css2-system>CSS2 System
   Colors</a> sections of the CSS3 Color specification, then return
   the <a href=#simple-color>simple color</a> corresponding to that keyword. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></li>

   <li>

    <p>If <var title="">input</var> is four characters long, and the
    first character in <var title="">input</var> is a U+0023 NUMBER
    SIGN character (#), and the last three characters of <var title="">input</var> are all in the range U+0030 DIGIT ZERO (0)
    to U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+0046
    LATIN CAPITAL LETTER F, and U+0061 LATIN SMALL LETTER A to U+0066
    LATIN SMALL LETTER F, then run these substeps:</p>

    <ol><li><p>Let <var title="">result</var> be a <a href=#simple-color>simple
     color</a>.</p>

     <li><p>Interpret the second character of <var title="">input</var> as a hexadecimal digit; let the red
     component of <var title="">result</var> be the resulting number
     multiplied by 17.</p>

     <li><p>Interpret the third character of <var title="">input</var>
     as a hexadecimal digit; let the green component of <var title="">result</var> be the resulting number multiplied by
     17.</p>

     <li><p>Interpret the fourth character of <var title="">input</var> as a hexadecimal digit; let the blue
     component of <var title="">result</var> be the resulting number
     multiplied by 17.</p>

     <li><p>Return <var title="">result</var>.</p>

    </ol></li>

   <li><p>Replace any characters in <var title="">input</var> that
   have a Unicode code point greater than U+FFFF (i.e. any characters
   that are not in the basic multilingual plane) with the
   two-character string "<code title="">00</code>".</li>

   <li><p>If <var title="">input</var> is longer than 128 characters,
   truncate <var title="">input</var>, leaving only the first 128
   characters.</li>

   <li><p>If the first character in <var title="">input</var> is a
   U+0023 NUMBER SIGN character (#), remove it.</li>

   <li><p>Replace any character in <var title="">input</var> that is
   not in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9),
   U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, and
   U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F with the
   character U+0030 DIGIT ZERO (0).</li>

   <li><p>While <var title="">input</var>'s length is zero or not a
   multiple of three, append a U+0030 DIGIT ZERO (0) character to <var title="">input</var>.</li>

   <li><p>Split <var title="">input</var> into three strings of equal
   length, to obtain three components. Let <var title="">length</var>
   be the length of those components (one third the length of <var title="">input</var>).</li>

   <li><p>If <var title="">length</var> is greater than 8, then remove
   the leading <span title=""><var title="">length</var>-8</span>
   characters in each component, and let <var title="">length</var> be
   8.</li>

   <li><p>While <var title="">length</var> is greater than two and the
   first character in each component is a U+0030 DIGIT ZERO (0)
   character, remove that character and reduce <var title="">length</var> by one.</li>

   <li><p>If <var title="">length</var> is <em>still</em> greater than
   two, truncate each component, leaving only the first two
   characters in each.</li>

   <li><p>Let <var title="">result</var> be a <a href=#simple-color>simple
   color</a>.</p>

   <li><p>Interpret the first component as a hexadecimal number; let
   the red component of <var title="">result</var> be the resulting
   number.</li>

   <li><p>Interpret the second component as a hexadecimal number; let
   the green component of <var title="">result</var> be the resulting
   number.</li>

   <li><p>Interpret the third component as a hexadecimal number; let
   the blue component of <var title="">result</var> be the resulting
   number.</li>

   <li><p>Return <var title="">result</var>.</p>

  </ol></div>

  <hr><p class=note>The <a href=#canvas-context-2d title=canvas-context-2d>2D graphics
  context</a> has a separate color syntax that also handles
  opacity.</p>

  


  <h4 id=space-separated-tokens><span class=secno>2.4.7 </span>Space-separated tokens</h4>

  <p>A <dfn id=set-of-space-separated-tokens>set of space-separated tokens</dfn> is a string containing
  zero or more words separated by one or more <a href=#space-character title="space
  character">space characters</a>, where words consist of any
  string of one or more characters, none of which are <a href=#space-character title="space character">space characters</a>.</p>

  <p>A string containing a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a>
  may have leading or trailing <a href=#space-character title="space character">space
  characters</a>.</p>

  <p>An <dfn id=unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</dfn> is a
  <a href=#set-of-space-separated-tokens>set of space-separated tokens</a> where none of the words
  are duplicated.</p>

  <p>An <dfn id=ordered-set-of-unique-space-separated-tokens>ordered set of unique space-separated tokens</dfn> is a
  <a href=#set-of-space-separated-tokens>set of space-separated tokens</a> where none of the words
  are duplicated but where the order of the tokens is meaningful.</p>

  <p><a href=#set-of-space-separated-tokens title="set of space-separated tokens">Sets of
  space-separated tokens</a> sometimes have a defined set of
  allowed values. When a set of allowed values is defined, the tokens
  must all be from that list of allowed values; other values are
  non-conforming. If no such set of allowed values is provided, then
  all values are conforming.</p>

  <div class=impl>

  <p>When a user agent has to <dfn id=split-a-string-on-spaces>split a string on spaces</dfn>, it
  must use the following algorithm:</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p>Let <var title="">tokens</var> be a list of tokens,
   initially empty.</li>

   <li><p><a href=#skip-whitespace>Skip whitespace</a></li>

   <li><p>While <var title="">position</var> is not past the end of
   <var title="">input</var>:</p>

    <ol><li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not
     <a href=#space-character title="space character">space characters</a>.</li>

     <li><p>Add the string collected in the previous step to <var title="">tokens</var>.</li>

     <li><p><a href=#skip-whitespace>Skip whitespace</a></li>

    </ol></li>

   <li><p>Return <var title="">tokens</var>.</li>

  </ol><p>When a user agent has to <dfn id=remove-a-token-from-a-string>remove a token from a string</dfn>,
  it must use the following algorithm:</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   modified.</li>

   <li><p>Let <var title="">token</var> be the token being removed. It
   will not contain any <a href=#space-character title="space character">space
   characters</a>.</li>

   <li><p>Let <var title="">output</var> be the output string,
   initially empty.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><i>Loop</i>: If <var title="">position</var> is beyond the
   end of <var title="">input</var>, abort these steps.</li>

   <li><p>If the character at <var title="">position</var> is a
   <a href=#space-character>space character</a>:</p>

    <ol><li><p>Append the character at <var title="">position</var> to
     the end of <var title="">output</var>.</li>

     <li><p>Advance <var title="">position</var> so it points at the
     next character in <var title="">input</var>.</li>

     <li><p>Return to the step labeled <i>loop</i>.</li>

    </ol></li>

   <li><p>Otherwise, the character at <var title="">position</var> is
   the first character of a token. <a href=#collect-a-sequence-of-characters>Collect a sequence of
   characters</a> that are not <a href=#space-character title="space character">space
   characters</a>, and let that be <var title="">s</var>.</li>

   <li><p>If <var title="">s</var> is exactly equal to <var title="">token</var>, then:</p>

    <ol><li><p><a href=#skip-whitespace>Skip whitespace</a> (in <var title="">input</var>).</li>

     <li><p>Remove any <a href=#space-character title="space character">space
     characters</a> currently at the end of <var title="">output</var>.</li>

     <li><p>If <var title="">position</var> is not past the end of
     <var title="">input</var>, and <var title="">output</var> is not
     the empty string, append a single U+0020 SPACE character at the
     end of <var title="">output</var>.</li>

    </ol></li>

   <li><p>Otherwise, append <var title="">s</var> to the end of <var title="">output</var>.</li>

   <li><p>Return to the step labeled <i>loop</i>.</li>

  </ol><p class=note>This causes any occurrences of the token to be
  removed from the string, and any spaces that were surrounding the
  token to be collapsed to a single space, except at the start and end
  of the string, where such spaces are removed.</p>

  </div>



  <h4 id=comma-separated-tokens><span class=secno>2.4.8 </span>Comma-separated tokens</h4>

  <p>A <dfn id=set-of-comma-separated-tokens>set of comma-separated tokens</dfn> is a string containing
  zero or more tokens each separated from the next by a single U+002C
  COMMA character (,), where tokens consist of any string of zero or
  more characters, neither beginning nor ending with <a href=#space-character title="space character">space characters</a>, nor containing any
  U+002C COMMA characters (,), and optionally surrounded by <a href=#space-character title="space character">space characters</a>.</p>

  <p class=example>For instance, the string "<code title="">&nbsp;a&nbsp;,b,,d&nbsp;d&nbsp;</code>" consists of four
  tokens: "a", "b", the empty string, and "d&nbsp;d". Leading and
  trailing whitespace around each token doesn't count as part of the
  token, and the empty string can be a token.</p>

  <p><a href=#set-of-comma-separated-tokens title="set of comma-separated tokens">Sets of
  comma-separated tokens</a> sometimes have further restrictions on
  what consists a valid token. When such restrictions are defined, the
  tokens must all fit within those restrictions; other values are
  non-conforming. If no such restrictions are specified, then all
  values are conforming.</p>

  <div class=impl>

  <p>When a user agent has to <dfn id=split-a-string-on-commas>split a string on commas</dfn>, it
  must use the following algorithm:</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p>Let <var title="">tokens</var> be a list of tokens,
   initially empty.</li>

   <li><p><i>Token</i>: If <var title="">position</var> is past the
   end of <var title="">input</var>, jump to the last step.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not
   U+002C COMMA characters (,). Let <var title="">s</var> be the resulting sequence (which might be the
   empty string).</li>

   <li><p>Remove any leading or trailing sequence of <a href=#space-character title="space character">space characters</a> from <var title="">s</var>.</li>

   <li><p>Add <var title="">s</var> to <var title="">tokens</var>.</li>

   <li><p>If <var title="">position</var> is not past the end of <var title="">input</var>, then the character at <var title="">position</var> is a U+002C COMMA character (,); advance
   <var title="">position</var> past that character.</li>

   <li><p>Jump back to the step labeled <i>token</i>.</li>

   <li><p>Return <var title="">tokens</var>.</li>

  </ol></div>




  <h4 id=syntax-references><span class=secno>2.4.9 </span>References</h4>

  <p>A <dfn id=valid-hash-name-reference>valid hash-name reference</dfn> to an element of type <var title="">type</var> is a string consisting of a U+0023 NUMBER SIGN
  character (#) followed by a string which exactly matches the value
  of the <code title="">name</code> attribute of an element with type
  <var title="">type</var> in the document.</p>

  <div class=impl>

  <p>The <dfn id=rules-for-parsing-a-hash-name-reference>rules for parsing a hash-name reference</dfn> to an
  element of type <var title="">type</var> are as follows:</p>

  <ol><li><p>If the string being parsed does not contain a U+0023 NUMBER
   SIGN character, or if the first such character in the string is the
   last character in the string, then return null and abort these
   steps.</li>

   <li><p>Let <var title="">s</var> be the string from the character
   immediately after the first U+0023 NUMBER SIGN character in the
   string being parsed up to the end of that string.</li>

   <li><p>Return the first element of type <var title="">type</var>
   that has an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute whose value
   is a <a href=#case-sensitive>case-sensitive</a> match for <var title="">s</var> or
   a <code title="">name</code> attribute whose value is a
   <a href=#compatibility-caseless>compatibility caseless</a> match for <var title="">s</var>.</li>

   <!--
   IE is also doing case-insensitive id="" matching.
   Tests:
   http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cmap%20name%3D%22T%26eacute%3B%26%23x01F1%3B%26%23x2075%3B%22%3E%3Carea%20href%3D%22%2F%22%20shape%3Drect%20coords%3D0%2C0%2C200%2C200%3E%3C%2Fmap%3E%0A%3Cimg%20usemap%3D%22%23t%26Eacute%3BDZ5%22%20src%3Dimage%3E
   ...except that doesn't explain why this fails:
   http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cmap%20name%3D%22T%26eacute%3B%26%23x01F1%3B%26%23x2075%3B%26%23xFB01%3B%22%3E%3Carea%20href%3D%22%2F%22%20shape%3Drect%20coords%3D0%2C0%2C200%2C200%3E%3C%2Fmap%3E%0A%3Cimg%20usemap%3D%22%23t%26Eacute%3BDZ5F%26%23x0131%3B%26%23x0307%3B%22%20src%3Dimage%3E
   maybe they just don't know about combining dot above?
   -->

  </ol></div>


  <h4 id=mq><span class=secno>2.4.10 </span>Media queries</h4>

  <p>A string is a <dfn id=valid-media-query>valid media query</dfn> if it matches the
  <code title="">media_query_list</code> production of the Media
  Queries specification. <a href=#refsMQ>[MQ]</a></p>

  <p>A string <dfn id=matches-the-environment>matches the environment</dfn> of the user if it is
  the empty string, a string consisting of only <a href=#space-character title="space
  character">space characters</a>, or is a media query that matches
  the user's environment according to the definitions given in the
  Media Queries specification. <a href=#refsMQ>[MQ]</a></p>




  <h3 id=urls><span class=secno>2.5 </span>URLs</h3>

  <h4 id=terminology-0><span class=secno>2.5.1 </span>Terminology</h4>

  <!-- see also: svn diff -r3244:3245 source -->

  <p>A <dfn id=url>URL</dfn> is a string used to identify a resource.</p>

  <p>A <a href=#url>URL</a> is a <dfn id=valid-url>valid URL</dfn> if at least one of
  the following conditions holds:</p>

  <ul><li><p>The <a href=#url>URL</a> is a valid URI reference <a href=#refsRFC3986>[RFC3986]</a>.</li>

   <li><p>The <a href=#url>URL</a> is a valid IRI reference and it has no
   query component. <a href=#refsRFC3987>[RFC3987]</a></li>

   <li><p>The <a href=#url>URL</a> is a valid IRI reference and its query
   component contains no unescaped non-ASCII characters. <a href=#refsRFC3987>[RFC3987]</a></li>

   <li><p>The <a href=#url>URL</a> is a valid IRI reference and the <a href="#document's-character-encoding" title="document's character encoding">character encoding</a> of
   the URL's <code><a href=#document>Document</a></code> is UTF-8 or UTF-16. <a href=#refsRFC3987>[RFC3987]</a></li>

  </ul><p>A string is a <dfn id=valid-non-empty-url>valid non-empty URL</dfn> if it is a
  <a href=#valid-url>valid URL</a> but it is not the empty string.</p>

  <p>A string is a <dfn id=valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
  spaces</dfn> if, after <a href=#strip-leading-and-trailing-whitespace title="strip leading and trailing
  whitespace">stripping leading and trailing whitespace</a> from
  it, it is a <a href=#valid-url>valid URL</a>.</p>

  <p>A string is a <dfn id=valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</dfn> if, after <a href=#strip-leading-and-trailing-whitespace title="strip leading and trailing
  whitespace">stripping leading and trailing whitespace</a> from
  it, it is a <a href=#valid-non-empty-url>valid non-empty URL</a>.</p>

  <div class=impl>

  <p>To <dfn id=parse-a-url>parse a URL</dfn> <var title="">url</var> into its
  component parts, the user agent must use the <span class=XXX>parse
  an address</span> algorithm defined by the IRI specification. <a href=#refsRFC3987>[RFC3987]</a></p>

  <p>Parsing a URL can fail. If it does not, then it results in the
  following components, again as defined by the IRI specification:</p>

  <ul class=brief><li><dfn id=url-scheme title=url-scheme>&lt;scheme&gt;</dfn></li>
   <li><dfn id=url-host title=url-host>&lt;host&gt;</dfn></li>
   <li><dfn id=url-port title=url-port>&lt;port&gt;</dfn></li>
   <li><dfn id=url-hostport title=url-hostport>&lt;hostport&gt;</dfn></li>
   <li><dfn id=url-path title=url-path>&lt;path&gt;</dfn></li>
   <li><dfn id=url-query title=url-query>&lt;query&gt;</dfn></li>
   <li><dfn id=url-fragment title=url-fragment>&lt;fragment&gt;</dfn></li>
   <li><dfn id=url-host-specific title=url-host-specific>&lt;host-specific&gt;</dfn></li>
  </ul><hr><p>To <dfn id=resolve-a-url>resolve a URL</dfn> to an <a href=#absolute-url>absolute URL</a>
  relative to either another <a href=#absolute-url>absolute URL</a> or an element,
  the user agent must use the following steps. Resolving a URL can
  result in an error, in which case the URL is not resolvable.</p>

  <ol><li><p>Let <var title="">url</var> be the <a href=#url>URL</a> being
   resolved.</li>

   <li>

    <p>Let <var title="">encoding</var> be determined as follows:</p>

    <dl class=switch><dt>If the URL had a character encoding defined when the URL was
     created or defined</dt>

     <dd>The URL character encoding is as defined.</dd>

     <dt>If the URL came from a script (e.g. as an argument to a
     method)</dt>

     <dd>The URL character encoding is the <a href="#script's-url-character-encoding">script's URL character
     encoding</a>.</dd>

     <dt>If the URL came from a DOM node (e.g. from an element)</dt>

     <dd>The node has a <code><a href=#document>Document</a></code>, and the URL character
     encoding is the <a href="#document's-character-encoding">document's character encoding</a>.</dd>

    </dl></li>

   <li><p>If <var title="">encoding</var> is a UTF-16 encoding, then
   change the value of <var title="">encoding</var> to UTF-8.</li>

   <li>

    <p>If the algorithm was invoked with an <a href=#absolute-url>absolute URL</a>
    to use as the base URL, let <var title="">base</var> be that
    <a href=#absolute-url>absolute URL</a>.</p>

    <p>Otherwise, let <var title="">base</var> be the <i>base URI of
    the element</i>, as defined by the XML Base specification, with
    <i>the base URI of the document entity</i> being defined as the
    <a href=#document-base-url>document base URL</a> of the <code><a href=#document>Document</a></code> that
    owns the element. <a href=#refsXMLBASE>[XMLBASE]</a></p>

    <p>For the purposes of the XML Base specification, user agents
    must act as if all <code><a href=#document>Document</a></code> objects represented XML
    documents.</p>

    <p class=note>It is possible for <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attributes to be present
    even in HTML fragments, as such attributes can be added
    dynamically using script. (Such scripts would not be conforming,
    however, as <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attributes
    are not allowed in <a href=#html-documents>HTML documents</a>.)</p>

    <p>The <dfn id=document-base-url>document base URL</dfn> of a <code><a href=#document>Document</a></code>
    object is the <a href=#absolute-url>absolute URL</a> obtained by running these
    substeps:</p>

    <ol><li><p>Let <var title="">fallback base url</var> be <a href="#the-document's-address">the
     document's address</a>.</li>

     <li>

      <!-- http://www.hixie.ch/tests/adhoc/html/navigation/javascript-url/ -->

      <!-- this should be tested in the case of a browsing context that
      was navigated to about:blank after having been elsewhere, as
      opposed to the about:blank used at the time of the browsing
      context's creation. -->

      <p>If <var title="">fallback base url</var> is
      <code><a href=#about:blank>about:blank</a></code>, and the <code><a href=#document>Document</a></code>'s
      <a href=#browsing-context>browsing context</a> has a <a href=#creator-browsing-context>creator browsing
      context</a>, then let <var title="">fallback base url</var>
      be the <a href=#document-base-url>document base URL</a> of the <a href=#creator-document>creator
      <code>Document</code></a> instead.</p>

     </li>

     <li><p>If there is no <code><a href=#the-base-element>base</a></code> element that is both a
     child of <a href=#the-head-element>the <code>head</code> element</a> and has an
     <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute, then the
     <a href=#document-base-url>document base URL</a> is <var title="">fallback base
     url</var>.</li>

     <li><p>Otherwise, let <var title="">url</var> be the value of the
     <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute of the first
     such element.</li>

     <li><p><a href=#resolve-a-url title="resolve a URL">Resolve</a> <var title="">url</var> relative to <var title="">fallback base
     url</var> (thus, the <code><a href=#the-base-element>base</a></code> <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute isn't affected by
     <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attributes).</li>

     <li><p>The <a href=#document-base-url>document base URL</a> is the result of the
     previous step if it was successful; otherwise it is <var title="">fallback base url</var>.</li>

    </ol></li>

   <li><p>Return the result of applying the <span class=XXX>resolve
   an address</span> algorithm defined by the IRI specification to
   resolve <var title="">url</var> relative to <var title="">base</var> using encoding <var title="">encoding</var>. <a href=#refsRFC3987>[RFC3987]</a></li>

  </ol></div>

  <p>A <a href=#url>URL</a> is an <dfn id=absolute-url>absolute URL</dfn> if <a href=#resolve-a-url title="resolve a url">resolving</a> it results in the same output
  regardless of what it is resolved relative to, and that output is
  not a failure.</p>

  <p>An <a href=#absolute-url>absolute URL</a> is a <dfn id=hierarchical-url>hierarchical URL</dfn> if,
  when <a href=#resolve-a-url title="resolve a url">resolved</a> and then <a href=#parse-a-url title="parse a url">parsed</a>, there is a character immediately
  after the <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component
  and it is a U+002F SOLIDUS character (/).</p>

  <p>An <a href=#absolute-url>absolute URL</a> is an <dfn id=authority-based-url>authority-based URL</dfn>
  if, when <a href=#resolve-a-url title="resolve a url">resolved</a> and then <a href=#parse-a-url title="parse a url">parsed</a>, there are two characters
  immediately after the <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a>
  component and they are both U+002F SOLIDUS characters (//).</p>

  <hr><p>This specification defines the URL
  <dfn id=about:legacy-compat><code>about:legacy-compat</code></dfn> as a reserved, though
  unresolvable, <code title="">about:</code> URI, for use in <a href=#syntax-doctype title=syntax-doctype>DOCTYPE</a>s in <a href=#html-documents>HTML
  documents</a> when needed for compatibility with XML tools. <a href=#refsABOUT>[ABOUT]</a></p>

  <p>This specification defines the URL
  <dfn id=about:srcdoc><code>about:srcdoc</code></dfn> as a reserved, though
  unresolvable, <code title="">about:</code> URI, that is used as
  <a href="#the-document's-address">the document's address</a> of <a href=#an-iframe-srcdoc-document title="an iframe srcdoc
  document"><code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> documents</a>. <a href=#refsABOUT>[ABOUT]</a></p>

  <p class=note>The term "URL" in this specification is used in a
  manner distinct from the precise technical meaning it is given in
  RFC 3986. Readers familiar with that RFC will find it easier to read
  <em>this</em> specification if they pretend the term "URL" as used
  herein is really called something else altogether. This is a
  <a href=#willful-violation>willful violation</a> of RFC 3986. <a href=#refsRFC3986>[RFC3986]</a></p>


  <div class=impl>

  <h4 id=dynamic-changes-to-base-urls><span class=secno>2.5.2 </span>Dynamic changes to base URLs</h4>

  <p>When an <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attribute
  changes, the attribute's element, and all descendant elements, are
  <a href=#affected-by-a-base-url-change>affected by a base URL change</a>.</p>

  <p>When a document's <a href=#document-base-url>document base URL</a> changes, all
  elements in that document are <a href=#affected-by-a-base-url-change>affected by a base URL
  change</a>.</p>

  <p>When an element is moved from one document to another, if the two
  documents have different <a href=#document-base-url title="document base URL">base
  URLs</a>, then that element and all its descendants are
  <a href=#affected-by-a-base-url-change>affected by a base URL change</a>.</p>

  <p>When an element is <dfn id=affected-by-a-base-url-change>affected by a base URL change</dfn>, it
  must act as described in the following list:</p>

  <dl class=switch><dt>If the element is a <a href=#hyperlink title=hyperlink>hyperlink
   element</a></dt>

   <dd>

    <p>If the <a href=#absolute-url>absolute URL</a> identified by the hyperlink is
    being shown to the user, or if any data derived from that URL is
    affecting the display, then the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute should be <a href=#resolve-a-url title="resolve a url">re-resolved</a> relative to the element
    and the UI updated appropriately.</p>

    <p class=example>For example, the CSS <code title=selector-link><a href=#selector-link>:link</a></code>/<code title=selector-visited><a href=#selector-visited>:visited</a></code> pseudo-classes might have
    been affected.</p>

<!--PING-->
    <p>If the hyperlink has a <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute and its <a href=#absolute-url title="absolute URL">absolute URL(s)</a> are being shown to the
    user, then the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>
    attribute's tokens should be <a href=#resolve-a-url title="resolve a
    url">re-resolved</a> relative to the element and the UI updated
    appropriately.</p>
<!--PING-->

   </dd>

   <dt>If the element is a <code><a href=#the-q-element>q</a></code>, <code><a href=#the-blockquote-element>blockquote</a></code>,
   <code><a href=#the-section-element>section</a></code>, <code><a href=#the-article-element>article</a></code>, <code><a href=#the-ins-element>ins</a></code>, or
   <code><a href=#the-del-element>del</a></code> element with a <code title="">cite</code>
   attribute</dt>

   <dd>

    <p>If the <a href=#absolute-url>absolute URL</a> identified by the <code title="">cite</code> attribute is being shown to the user, or if
    any data derived from that URL is affecting the display, then the
    <a href=#url>URL</a> should be <a href=#resolve-a-url title="resolve a
    url">re-resolved</a> relative to the element and the UI updated
    appropriately.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>The element is not directly affected.</p>

    <p class=example>Changing the base URL doesn't affect the image
    displayed by <code><a href=#the-img-element>img</a></code> elements, although subsequent
    accesses of the <code title=dom-img-src><a href=#dom-img-src>src</a></code> IDL attribute
    from script will return a new <a href=#absolute-url>absolute URL</a> that might
    no longer correspond to the image being shown.</p>

   </dd>

  </dl></div>



  <h4 id=interfaces-for-url-manipulation><span class=secno>2.5.3 </span>Interfaces for URL manipulation</h4>

  <p>An interface that has a complement of <dfn id=url-decomposition-idl-attributes>URL decomposition IDL
  attributes</dfn> will have seven attributes with the following
  definitions:</p>

<pre class="idl extract">           attribute DOMString <a href=#dom-uda-protocol title=dom-uda-protocol>protocol</a>;
           attribute DOMString <a href=#dom-uda-host title=dom-uda-host>host</a>;
           attribute DOMString <a href=#dom-uda-hostname title=dom-uda-hostname>hostname</a>;
           attribute DOMString <a href=#dom-uda-port title=dom-uda-port>port</a>;
           attribute DOMString <a href=#dom-uda-pathname title=dom-uda-pathname>pathname</a>;
           attribute DOMString <a href=#dom-uda-search title=dom-uda-search>search</a>;
           attribute DOMString <a href=#dom-uda-hash title=dom-uda-hash>hash</a>;</pre>

  <dl class=domintro><dt><var title="">o</var> . <code title=dom-uda-protocol><a href=#dom-uda-protocol>protocol</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current scheme of the underlying URL.</p>
    <p>Can be set, to change the underlying URL's scheme.</p>
   </dd>

   <dt><var title="">o</var> . <code title=dom-uda-host><a href=#dom-uda-host>host</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current host and port (if it's not the default port) in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's host and port.</p>
    <p>The host and the port are separated by a colon. The port part,
    if omitted, will be assumed to be the current scheme's default
    port.</p>
   </dd>

   <dt><var title="">o</var> . <code title=dom-uda-hostname><a href=#dom-uda-hostname>hostname</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current host in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's host.</p>
   </dd>

   <dt><var title="">o</var> . <code title=dom-uda-port><a href=#dom-uda-port>port</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current port in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's port.</p>
   </dd>

   <dt><var title="">o</var> . <code title=dom-uda-pathname><a href=#dom-uda-pathname>pathname</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current path in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's path.</p>
   </dd>

   <dt><var title="">o</var> . <code title=dom-uda-search><a href=#dom-uda-search>search</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current query component in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's query component.</p>
   </dd>

   <dt><var title="">o</var> . <code title=dom-uda-hash><a href=#dom-uda-hash>hash</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current fragment identifier in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's fragment identifier.</p>
   </dd>

  </dl><div class=impl>

  <hr><p>The attributes defined to be URL decomposition IDL attributes must
  act as described for the attributes with the same corresponding
  names in this section.</p>

  <p>In addition, an interface with a complement of URL decomposition IDL
  attributes will define an <dfn id=concept-uda-input title=concept-uda-input>input</dfn>, which is a <a href=#url>URL</a>
  that the attributes act on, and a <dfn id=concept-uda-setter title=concept-uda-setter>common setter action</dfn>, which is a
  set of steps invoked when any of the attributes' setters are
  invoked.</p>

  <p>The seven URL decomposition IDL attributes have similar
  requirements.</p>

  <p>On getting, if the <a href=#concept-uda-input title=concept-uda-input>input</a>
  is an <a href=#absolute-url>absolute URL</a> that fulfills the condition given in
  the "getter condition" column corresponding to the attribute in the
  table below, the user agent must return the part of the <a href=#concept-uda-input title=concept-uda-input>input</a> URL given in the "component"
  column, with any prefixes specified in the "prefix" column
  appropriately added to the start of the string and any suffixes
  specified in the "suffix" column appropriately added to the end of
  the string. Otherwise, the attribute must return the empty
  string.</p>

  <p>On setting, the new value must first be mutated as described by
  the "setter preprocessor" column, then mutated by %-escaping any
  characters in the new value that are not valid in the relevant
  component as given by the "component" column. Then, if the <a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#absolute-url>absolute
  URL</a> and the resulting new value fulfills the condition given
  in the "setter condition" column, the user agent must make a new
  string <var title="">output</var> by replacing the component of the
  URL given by the "component" column in the <a href=#concept-uda-input title=concept-uda-input>input</a> URL with the new value;
  otherwise, the user agent must let <var title="">output</var> be
  equal to the <a href=#concept-uda-input title=concept-uda-input>input</a>. Finally,
  the user agent must invoke the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> with the
  value of <var title="">output</var>.</p>

  <p>When replacing a component in the URL, if the component is part
  of an optional group in the URL syntax consisting of a character
  followed by the component, the component (including its prefix
  character) must be included even if the new value is the empty
  string.</p>

  <p class=note>The previous paragraph applies in particular to the
  "<code title="">:</code>" before a &lt;port&gt; component, the "<code title="">?</code>" before a &lt;query&gt; component, and the "<code title="">#</code>" before a &lt;fragment&gt; component.</p>

  <p>For the purposes of the above definitions, URLs must be parsed
  using the <a href=#parse-a-url title="parse a URL">URL parsing rules</a> defined
  in this specification.</p>

  <table><thead><tr><th>Attribute
     <th>Component
     <th>Getter Condition
     <th>Prefix
     <th>Suffix
     <th>Setter Preprocessor
     <th>Setter Condition
   <tbody><tr><td><dfn id=dom-uda-protocol title=dom-uda-protocol><code>protocol</code></dfn>
     <td><a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a>
     <td>&mdash;
     <td>&mdash;
     <td>U+003A COLON (:)
     <td>Remove all trailing U+003A COLON characters (:)
     <td>The new value is not the empty string
    <tr><td><dfn id=dom-uda-host title=dom-uda-host><code>host</code></dfn>
     <td><a href=#url-hostport title=url-hostport>&lt;hostport&gt;</a>
     <td><a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#authority-based-url>authority-based URL</a>
     <td>&mdash;
     <td>&mdash;
     <td>&mdash;
     <td>The new value is not the empty string and <a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#authority-based-url>authority-based URL</a>
    <tr><td><dfn id=dom-uda-hostname title=dom-uda-hostname><code>hostname</code></dfn>
     <td><a href=#url-host title=url-host>&lt;host&gt;</a>
     <td><a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#authority-based-url>authority-based URL</a>
     <td>&mdash;
     <td>&mdash;
     <td>Remove all leading U+002F SOLIDUS characters (/)
     <td>The new value is not the empty string and <a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#authority-based-url>authority-based URL</a>
    <tr><td><dfn id=dom-uda-port title=dom-uda-port><code>port</code></dfn>
     <td><a href=#url-port title=url-port>&lt;port&gt;</a>
     <td><a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#authority-based-url>authority-based URL</a>, and contained a <a href=#url-port title=url-port>&lt;port&gt;</a> component (possibly an empty one)
     <td>&mdash;
     <td>&mdash;
     <td>Remove all characters in the new value from the first that is not in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), if any.
         Remove any leading U+0030 DIGIT ZERO characters (0) in the new value.
         If the resulting string is empty, set it to a single U+0030 DIGIT ZERO character (0).
     <td><a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#authority-based-url>authority-based URL</a>,
         and the new value, when interpretted as a base-ten integer, is less than or equal to 65535
    <tr><td><dfn id=dom-uda-pathname title=dom-uda-pathname><code>pathname</code></dfn>
     <td><a href=#url-path title=url-path>&lt;path&gt;</a>
     <td><a href=#concept-uda-input title=concept-uda-input>input</a> is a <a href=#hierarchical-url>hierarchical URL</a>
     <td>&mdash;
     <td>&mdash;
     <td>If it has no leading U+002F SOLIDUS character (/), prepend a U+002F SOLIDUS character (/) to the new value
     <td><a href=#concept-uda-input title=concept-uda-input>input</a> is hierarchical
    <tr><td><dfn id=dom-uda-search title=dom-uda-search><code>search</code></dfn>
     <td><a href=#url-query title=url-query>&lt;query&gt;</a>
     <td><a href=#concept-uda-input title=concept-uda-input>input</a> is a <a href=#hierarchical-url>hierarchical URL</a>, and contained a <a href=#url-query title=url-query>&lt;query&gt;</a> component (possibly an empty one)
     <td>U+003F QUESTION MARK (?)
     <td>&mdash;
     <td>Remove one leading U+003F QUESTION MARK character (?), if any
     <td><a href=#concept-uda-input title=concept-uda-input>input</a> is a <a href=#hierarchical-url>hierarchical URL</a>
    <tr><td><dfn id=dom-uda-hash title=dom-uda-hash><code>hash</code></dfn>
     <td><a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
     <td><a href=#concept-uda-input title=concept-uda-input>input</a> contained a non-empty <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component
     <td>U+0023 NUMBER SIGN (#)
     <td>&mdash;
     <td>Remove one leading U+0023 NUMBER SIGN character (#), if any
     <td>&mdash;
  </table><!--
  http://www.hixie.ch/tests/adhoc/dom/level0/location/components/
  http://lxr.mozilla.org/seamonkey/source/dom/src/base/nsLocation.cpp
  http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/ref_h-l.htm#84722
--></div>

  <div class=example>

   <p>The table below demonstrates how the getter <span class=impl>condition</span> for <code title=dom-uda-search><a href=#dom-uda-search>search</a></code> results in different results
   depending on the exact original syntax of the URL:</p>

   <table><thead><tr><th> Input URL
      <th> <code title=dom-uda-search><a href=#dom-uda-search>search</a></code> value
      <th> Explanation
    <tbody><tr><td> <code title="">http://example.com/</code>
      <td> <i>empty string</i>
      <td> No <a href=#url-query title=url-query>&lt;query&gt;</a> component in input URL.
     <tr><td> <code title="">http://example.com/?</code>
      <td> <code title="">?</code>
      <td> There is a <a href=#url-query title=url-query>&lt;query&gt;</a> component, but it is empty.
           <span class=impl>The question mark in the resulting value is the prefix.</span>
     <tr><td> <code title="">http://example.com/?test</code>
      <td> <code title="">?test</code>
      <td> The <a href=#url-query title=url-query>&lt;query&gt;</a> component has the value "<code title="">test</code>".
     <tr><td> <code title="">http://example.com/?test#</code>
      <td> <code title="">?test</code>
      <td> The (empty) <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component is not part of the <a href=#url-query title=url-query>&lt;query&gt;</a> component.
   </table></div>


  <div class=impl>

  <h3 id=fetching-resources><span class=secno>2.6 </span>Fetching resources</h3>

  <p>When a user agent is to <dfn id=fetch>fetch</dfn> a resource or
  <a href=#url>URL</a>, optionally from an origin <i title="">origin</i>,
  and optionally with a <i>synchronous flag</i> and/or a <i>manual
  redirect flag</i>, the following steps must be run. (When a
  <em>URL</em> is to be fetched, the URL identifies a resource to be
  obtained.)</p>

  <!-- if invoked with the synchronous flag, make sure to release the
  storage mutex first -->

  <!-- synchronous flag is only used by sync-XHR, for legacy reasons;
  don't use it in new features! -->

  <ol><li>

    <p>Generate the <i>address of the resource from which Request-URIs
    are obtained</i> as required by HTTP for the <code title=http-referer>Referer</code> (sic) header from <a href="#the-document's-current-address">the
    document's current address</a> of the appropriate
    <code><a href=#document>Document</a></code> as given by the following list. <a href=#refsHTTP>[HTTP]</a></p>

    <dl class=switch><dt>When <a href=#navigate title=navigate>navigating</a></dt>

     <dd>The <a href=#active-document>active document</a> of the <a href=#source-browsing-context>source browsing
     context</a>.</dd>

     <dt>When fetching resources for an element</dt>

     <dd>The element's <code><a href=#document>Document</a></code>.</dd>

     <dt>When fetching resources in response to a call to an API</dt>

     <dd>The <a href=#entry-script>entry script</a>'s <a href="#script's-document" title="script's
     document">document</a>.</dd>

    </dl><p>Remove any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
    component from the generated <i>address of the resource from which
    Request-URIs are obtained</i>.</p> <!-- RFC2616 says "The URI MUST
    NOT include a fragment." (section 14.36) -->

    <p>If the <a href=#origin>origin</a> of the appropriate
    <code><a href=#document>Document</a></code> is not a scheme/host/port tuple, then the
    <code title=http-referer>Referer</code> (sic) header must be
    omitted, regardless of its value.</p>

   </li>

   <li><p>If the algorithm was not invoked with the <i>synchronous
   flag</i>, perform the remaining steps asynchronously.</li>

   <li>

    <p>This is the <i>main step</i>.</p>

    <p>If the resource is identified by an <a href=#absolute-url>absolute URL</a>,
    and the resource is to be obtained using an idempotent action
    (such as an HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
    equivalent</a>), and it is already being downloaded for other
    reasons (e.g. another invocation of this algorithm), and this
    request would be identical to the previous one (e.g. same <code title=http-accept>Accept</code> and <code title=http-origin>Origin</code> headers), and the user agent is
    configured such that it is to reuse the data from the existing
    download instead of initiating a new one, then use the results of
    the existing download instead of starting a new one.</p>

    <p>Otherwise, at a time convenient to the user and the user agent,
    download (or otherwise obtain) the resource, applying the
    semantics of the relevant specifications (e.g. performing an HTTP
    GET or POST operation, or reading the file from disk, <a href=#concept-js-deref title=concept-js-deref>dereferencing <span title="javascript
    protocol"><code title="">javascript:</code> URLs</span></a>,
    etc).</p>

    <p>For the purposes of the <code title=http-referer>Referer</code> (sic) header, use the
    <i>address of the resource from which Request-URIs are
    obtained</i> generated in the earlier step.</p>

    <p>For the purposes of the <code title=http-origin>Origin</code>
    header, if the <a href=#fetch title=fetch>fetching algorithm</a> was
    explicitly initiated from an <i title="">origin</i>, then <i title="">the origin that initiated the HTTP request</i> is <i title="">origin</i>. Otherwise, this is <i title="">a request from
    a "privacy-sensitive" context</i>. <a href=#refsORIGIN>[ORIGIN]</a></p>

    <p>If the resource is identified by the <a href=#url>URL</a>
    <dfn id=about:blank><code>about:blank</code></dfn>, then the resource is
    immediately available and consists of the empty string, with no
    metadata.</p>

   </li>

   <li>

    <p>If there are cookies to be set, then the user agent must run
    the following substeps:</p>

    <ol><li><p>Wait until ownership of the <a href=#storage-mutex>storage mutex</a> can
     be taken by this instance of the <a href=#fetch title=fetch>fetching</a> algorithm.</li>

     <li><p>Take ownership of the <a href=#storage-mutex>storage mutex</a>.</li>

     <li><p>Update the cookies. <a href=#refsCOOKIES>[COOKIES]</a></li>

     <li><p>Release the <a href=#storage-mutex>storage mutex</a> so that it is once
     again free.</li>

    </ol></li>

   <li>

    <p>If the fetched resource is an HTTP redirect <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>,
    then:</p>

    <dl class=switch><dt>If the <i>manual redirect flag</i> is set</dt>

     <dd>

      <p>Continue, using the fetched resource (the redirect) as the
      result of the algorithm.</p>

     </dd>

     <dt>Otherwise</dt>

     <dd>

      <p>First, apply any relevant requirements for redirects (such as
      showing any appropriate prompts). Then, redo <i>main step</i>,
      but using the target of the redirect as the resource to fetch,
      rather than the original resource.</p>

      <p class=note>The HTTP specification requires that 301, 302,
      and 307 redirects, when applied to methods other than the safe
      methods, not be followed without user confirmation. That would
      be an appropriate prompt for the purposes of the requirement in
      the paragraph above. <a href=#refsHTTP>[HTTP]</a></p>

     </dd>

    </dl></li>

   <li>

    <p>If the algorithm was not invoked with the <i>synchronous
    flag</i>: When the resource is available, or if there is an error
    of some description, <a href=#queue-a-task>queue a task</a> that uses the
    resource as appropriate. If the resource can be processed
    incrementally, as, for instance, with a progressively interlaced
    JPEG or an HTML file, additional tasks may be queued to process
    the data as it is downloaded. The <a href=#task-source>task source</a> for
    these <a href=#concept-task title=concept-task>tasks</a> is the
    <a href=#networking-task-source>networking task source</a>.</p>

    <p>Otherwise, return the resource or error information to the
    calling algorithm.</p>

   </li>

  </ol><p>If the user agent can determine the actual length of the resource
  being <a href=#fetch title=fetch>fetched</a> for an instance of this
  algorithm, and if that length is finite, then that length is the
  file's <dfn id=concept-fetch-total title=concept-fetch-total>size</dfn>. Otherwise, the
  subject of the algorithm (that is, the resource being fetched) has
  no known <a href=#concept-fetch-total title=concept-fetch-total>size</a>. (For
  example, the HTTP <code title=http-content-length>Content-Length</code> header might
  provide this information.)</p>

  <p>The user agent must also keep track of the <dfn id=concept-fetch-loaded title=concept-fetch-loaded>number of bytes downloaded</dfn> for
  each instance of this algorithm. This number must exclude any
  out-of-band metadata, such as HTTP headers.</p>

  <p class=note>The <a href=#application-cache>application cache</a> processing model
  introduces some <a href=#changesToNetworkingModel>changes to the
  networking model</a> to handle the returning of cached
  resources.</p>

  <p class=note>The <a href=#navigate title=navigate>navigation</a>
  processing model handles redirects itself, overriding the
  redirection handling that would be done by the fetching
  algorithm.</p>

  <p class=note>Whether the <a href=#content-type-sniffing>type
  sniffing rules</a> apply to the fetched resource depends on the
  algorithm that invokes the rules &mdash; they are not always
  applicable.</p>


  <h4 id=concept-http-equivalent><span class=secno>2.6.1 </span>Protocol concepts</h4>

  <p>User agents can implement a variety of transfer protocols, but
  this specification mostly defines behavior in terms of HTTP. <a href=#refsHTTP>[HTTP]</a></p>

  <p>The <dfn id=concept-http-equivalent-get title=concept-http-equivalent-get>HTTP GET
  method</dfn> is equivalent to the default retrieval action of the
  protocol. For example, RETR in FTP. Such actions are idempotent and
  safe, in HTTP terms.</p>

  <p>The <dfn id=concept-http-equivalent-codes title=concept-http-equivalent-codes>HTTP response
  codes</dfn> are equivalent to statuses in other protocols that have
  the same basic meanings. For example, a "file not found" error is
  equivalent to a 404 code, a server error is equivalent to a 5xx
  code, and so on.</p>

  <p>The <dfn id=concept-http-equivalent-headers title=concept-http-equivalent-headers>HTTP
  headers</dfn> are equivalent to fields in other protocols that have
  the same basic meaning. For example, the HTTP authentication
  headers are equivalent to the authentication aspects of the FTP
  protocol.</p>


  <h4 id=encrypted-http-and-related-security-concerns><span class=secno>2.6.2 </span>Encrypted HTTP and related security concerns</h4>

  <p>Anything in this specification that refers to HTTP also applies
  to HTTP-over-TLS, as represented by <a href=#url title=url>URLs</a>
  representing the <code title="">https</code> scheme.</p>

  <p class=warning>User agents should report certificate errors to
  the user and must either refuse to download resources sent with
  erroneous certificates or must act as if such resources were in fact
  served with no encryption.</p>

  <p>User agents should warn the user that there is a potential
  problem whenever the user visits a page that the user has previously
  visited, if the page uses less secure encryption on the second
  visit.</p>

  <p>Not doing so can result in users not noticing man-in-the-middle
  attacks.</p>

  <div class=example>

   <p>If a user connects to a server with a self-signed certificate,
   the user agent could allow the connection but just act as if there
   had been no encryption. If the user agent instead allowed the user
   to override the problem and then displayed the page as if it was
   fully and safely encrypted, the user could be easily tricked into
   accepting man-in-the-middle connections.</p>

   <p>If a user connects to a server with full encryption, but the
   page then refers to an external resource that has an expired
   certificate, then the user agent will act as if the resource was
   unavailable, possibly also reporting the problem to the user. If
   the user agent instead allowed the resource to be used, then an
   attacker could just look for "secure" sites that used resources
   from a different host and only apply man-in-the-middle attacks to
   that host, for example taking over scripts in the page.</p>

   <p>If a user bookmarks a site that uses a CA-signed certificate,
   and then later revisits that site directly but the site has started
   using a self-signed certificate, the user agent could warn the user
   that a man-in-the-middle attack is likely underway, instead of
   simply acting as if the page was not encrypted.</p>

  </div>


  <h4 id=content-type-sniffing><span class=secno>2.6.3 </span>Determining the type of a resource</h4>

  <p>The <dfn id=content-type title=Content-Type>Content-Type metadata</dfn> of a
  resource must be obtained and interpreted in a manner consistent
  with the requirements of the Content-Type Processing Model
  specification. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></p>

  <p>The <dfn id=content-type-sniffing-0 title="Content-Type sniffing">sniffed type of a
  resource</dfn> must be found in a manner consistent with the
  requirements given in the Content-Type Processing Model
  specification for finding the <i>sniffed-type</i> of the relevant
  sequence of octets. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></p>

  <p>The <dfn id=content-type-sniffing:-image title="Content-Type sniffing: image">rules for sniffing
  images specifically</dfn> and the <dfn id=content-type-sniffing:-text-or-binary title="Content-Type sniffing:
  text or binary">rules for distingushing if a resource is text or
  binary</dfn> are also defined in the Content-Type Processing Model
  specification. Both sets of rules return a <a href=#mime-type>MIME type</a> as
  their result. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></p>

  <p class=warning>It is imperative that the rules in the
  Content-Type Processing Model specification be followed
  exactly. When a user agent uses different heuristics for content
  type detection than the server expects, security problems can
  occur. For more details, see the Content-Type Processing Model
  specification. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></p>

  <p>The <dfn id=algorithm-for-extracting-an-encoding-from-a-content-type>algorithm for extracting an encoding from a
  Content-Type</dfn>, given a string <var title="">s</var>, is as
  follows. It either returns an encoding or nothing.</p>

  <ol><li><p>Find the first seven characters in <var title="">s</var>
   that are an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the word
   "<code title="">charset</code>".  If no such match is found, return
   nothing.</li>

   <li><p>Skip any U+0009, U+000A, U+000C, U+000D, or U+0020
   characters that immediately follow the word "<code title="">charset</code>" (there might not be any).</li>

   <li><p>If the next character is not a U+003D EQUALS SIGN ('='),
   return nothing and abort these steps.</li>

   <li><p>Skip any U+0009, U+000A, U+000C, U+000D, or U+0020
   characters that immediately follow the equals sign (there might not
   be any).</li>

   <li>

    <p>Process the next character as follows:</p>

    <dl class=switch><dt>If it is a U+0022 QUOTATION MARK ('"') and there is a later U+0022 QUOTATION MARK ('"') in <var title="">s</var></dt>
     <dt>If it is a U+0027 APOSTROPHE ("'") and there is a later U+0027 APOSTROPHE ("'") in <var title="">s</var></dt>
     <dd>Return the encoding corresponding to the string between this character and the next earliest occurrence of this character.</dd>

     <dt>If it is an unmatched U+0022 QUOTATION MARK ('"')</dt>
     <dt>If it is an unmatched U+0027 APOSTROPHE ("'")</dt>
     <dt>If there is no next character</dt>
     <dd>Return nothing.</dd>

     <dt>Otherwise</dt>
     <dd>Return the encoding corresponding to the string from this
     character to the first U+0009, U+000A, U+000C, U+000D, U+0020, or
     U+003B character or the end of <var title="">s</var>, whichever
     comes first.</dd>

    </dl></li>

  </ol><p class=note>This requirement is a <a href=#willful-violation>willful violation</a>
  of the HTTP specification, motivated by the need for backwards
  compatibility with legacy content. <a href=#refsHTTP>[HTTP]</a></p>

  </div>



  <h3 id=common-dom-interfaces><span class=secno>2.7 </span>Common DOM interfaces</h3>

  <h4 id=reflecting-content-attributes-in-idl-attributes><span class=secno>2.7.1 </span>Reflecting content attributes in IDL attributes</h4>

  <p>Some IDL attributes are defined to <dfn id=reflect>reflect</dfn> a
  particular content attribute. This means that on getting, the IDL
  attribute returns the current value of the content attribute, and on
  setting, the IDL attribute changes the value of the content
  attribute to the given value.</p>

<!-- v2 for completeness: (also search for REFLECTIDL)
  <p class="note">A list of <span>reflecting IDL attributes</span> and
  their corresponding content attributes is given in the index.</p>
-->

  <div class=impl>

  <p>In general, on getting, if the content attribute is not present,
  the IDL attribute must act as if the content attribute's value is
  the empty string; and on setting, if the content attribute is not
  present, it must first be added.</p>

  <p>If a reflecting IDL attribute is a <code>DOMString</code>
  attribute whose content attribute is defined to contain a
  <a href=#url>URL</a>, then on getting, the IDL attribute must <a href=#resolve-a-url title="resolve a url">resolve</a> the value of the content
  attribute relative to the element and return the resulting
  <a href=#absolute-url>absolute URL</a> if that was successful, or the empty
  string otherwise; and on setting, must set the content attribute to
  the specified literal value. If the content attribute is absent, the
  IDL attribute must return the default value, if the content
  attribute has one, or else the empty string.</p>

  <p>If a reflecting IDL attribute is a <code>DOMString</code>
  attribute whose content attribute is defined to contain one or more
  <a href=#url title=URL>URLs</a>, then on getting, the IDL attribute
  must <a href=#split-a-string-on-spaces title="split a string on spaces">split the content
  attribute on spaces</a> and return the concatenation of <a href=#resolve-a-url title="resolve a URL">resolving</a> each token URL to an
  <a href=#absolute-url>absolute URL</a> relative to the element, with a single
  U+0020 SPACE character between each URL, ignoring any tokens that
  did not resolve successfully. If the content attribute is absent,
  the IDL attribute must return the default value, if the content
  attribute has one, or else the empty string. On setting, the IDL
  attribute must set the content attribute to the specified literal
  value.</p>

  <p>If a reflecting IDL attribute is a <code>DOMString</code> whose
  content attribute is an <a href=#enumerated-attribute>enumerated attribute</a>, and the
  IDL attribute is <dfn id=limited-to-only-known-values>limited to only known values</dfn>, then, on
  getting, the IDL attribute must return the conforming value
  associated with the state the attribute is in (in its canonical
  case), or the empty string if the attribute is in a state that has
  no associated keyword value; and on setting, if the new value is an
  <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the keywords
  given for that attribute, then the content attribute must be set to
  the conforming value associated with the state that the attribute
  would be in if set to the given new value, otherwise, if the new
  value is the empty string, then the content attribute must be
  removed, otherwise, the content attribute must be set to the given
  new value.</p>

  <p>If a reflecting IDL attribute is a <code>DOMString</code> but
  doesn't fall into any of the above categories, then the getting and
  setting must be done in a transparent, case-preserving manner.</p>

  <p>If a reflecting IDL attribute is a <code title="">boolean</code>
  attribute, then on getting the IDL attribute must return true if the
  content attribute is set, and false if it is absent. On setting, the
  content attribute must be removed if the IDL attribute is set to
  false, and must be set to the empty string if the IDL attribute is
  set to true. (This corresponds to the rules for <a href=#boolean-attribute title="boolean
  attribute">boolean content attributes</a>.)</p>

  <p>If a reflecting IDL attribute is a signed integer type
  (<code>long</code>) then, on getting, the content attribute must be
  parsed according to the <a href=#rules-for-parsing-integers title="rules for parsing
  integers">rules for parsing signed integers</a>, and if that is
  successful, and the value is in the range of the IDL attribute's
  type, the resulting value must be returned. If, on the other hand,
  it fails or returns an out of range value, or if the attribute is
  absent, then the default value must be returned instead, or 0 if
  there is no default value. On setting, the given value must be
  converted to the shortest possible string representing the number as
  a <a href=#valid-integer>valid integer</a> and then that string must be used as
  the new content attribute value.</p>

  <p>If a reflecting IDL attribute is a signed integer type
  (<code>long</code>) that is <dfn id=limited-to-only-non-negative-numbers>limited to only non-negative
  numbers</dfn> then, on getting, the content attribute must be parsed
  according to the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
  integers</a>, and if that is successful, and the value is in the
  range of the IDL attribute's type, the resulting value must be
  returned. If, on the other hand, it fails or returns an out of range
  value, or if the attribute is absent, the default value must be
  returned instead, or &minus;1 if there is no default value. On
  setting, if the value is negative, the user agent must fire an
  <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. Otherwise, the given value
  must be converted to the shortest possible string representing the
  number as a <a href=#valid-non-negative-integer>valid non-negative integer</a> and then that
  string must be used as the new content attribute value.</p>

  <p>If a reflecting IDL attribute is an <em>unsigned</em> integer
  type (<code>unsigned long</code>) then, on getting, the content
  attribute must be parsed according to the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
  non-negative integers</a>, and if that is successful, and the
  value is in the range of the IDL attribute's type, the resulting
  value must be returned. If, on the other hand, it fails or returns
  an out of range value, or if the attribute is absent, the default
  value must be returned instead, or 0 if there is no default
  value. On setting, the given value must be converted to the shortest
  possible string representing the number as a <a href=#valid-non-negative-integer>valid
  non-negative integer</a> and then that string must be used as the
  new content attribute value.</p>

  <p>If a reflecting IDL attribute is an unsigned integer type
  (<code>unsigned long</code>) that is <dfn id=limited-to-only-non-negative-numbers-greater-than-zero>limited to only
  non-negative numbers greater than zero</dfn>, then the behavior is
  similar to the previous case, but zero is not allowed. On getting,
  the content attribute must first be parsed according to the
  <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>, and if that is
  successful, and the value is in the range of the IDL attribute's
  type, the resulting value must be returned. If, on the other hand,
  it fails or returns an out of range value, or if the attribute is
  absent, the default value must be returned instead, or 1 if there is
  no default value. On setting, if the value is zero, the user agent
  must fire an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. Otherwise, the
  given value must be converted to the shortest possible string
  representing the number as a <a href=#valid-non-negative-integer>valid non-negative integer</a>
  and then that string must be used as the new content attribute
  value.</p>

  <p>If a reflecting IDL attribute is a floating point number type
  (<code>float</code>), then, on getting, the content attribute must
  be parsed according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point
  number values</a>, and if that is successful, the resulting value
  must be returned. If, on the other hand, it fails, or if the
  attribute is absent, the default value must be returned instead, or
  0.0 if there is no default value. On setting, the given value must
  be converted to the <a href=#best-representation-of-the-number-as-a-floating-point-number>best representation of the number as a
  floating point number</a> and then that string must be used as
  the new content attribute value.</p>

  <p class=note>The values Infinity and Not-a-Number (NaN) values
  throw an exception on setting, as <a href=#float-nan>defined
  earlier</a>.</p>

  <p>If a reflecting IDL attribute is of the type
  <code><a href=#domtokenlist>DOMTokenList</a></code> or <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code>, then
  on getting it must return a <code><a href=#domtokenlist>DOMTokenList</a></code> or
  <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code> object (as appropriate) whose
  underlying string is the element's corresponding content
  attribute. When the object mutates its underlying string, the
  content attribute must itself be immediately mutated. When the
  attribute is absent, then the string represented by the object is
  the empty string; when the object mutates this empty string, the
  user agent must add the corresponding content attribute, with its
  value set to the value it would have been set to after mutating the
  empty string. The same <code><a href=#domtokenlist>DOMTokenList</a></code> or
  <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code> object must be returned every time
  for each attribute.</p>

  <div class=example>

   <p>If an element with no attributes has its <code title=dom-tokenlist-remove><a href=#dom-tokenlist-remove>element.classList.remove()</a></code>
   method invoked, the underlying string won't be changed, since the
   result of removing any token from the empty string is still the
   empty string. However, if the <code title=dom-tokenlist-add><a href=#dom-tokenlist-add>element.classList.add()</a></code> method is
   then invoked, a <code title=attr-class><a href=#classes>class</a></code> attribute
   will be added to the element with the value of the token to be
   added.</p>

  </div>

  <p>If a reflecting IDL attribute has the type
  <code><a href=#htmlelement>HTMLElement</a></code>, or an interface that descends from
  <code><a href=#htmlelement>HTMLElement</a></code>, then, on getting, it must run the
  following algorithm (stopping at the first point where a value is
  returned):</p>

  <ol><li>If the corresponding content attribute is absent, then the
   IDL attribute must return null.</li>

   <li>Let <var title="">candidate</var> be the element that the <code title=dom-Document-getElementById><a href=#dom-document-getelementbyid>document.getElementById()</a></code> method
   would find when called on the content attribute's document if it
   was passed as its argument the current value of the corresponding
   content attribute.</li>

   <li>If <var title="">candidate</var> is null, or if it is not
   type-compatible with the IDL attribute, then the IDL attribute must
   return null.</li>

   <li>Otherwise, it must return <var title="">candidate</var>.</li>

  </ol><p>On setting, if the given element has an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute, then the content attribute must
  be set to the value of that <code title=attr-id><a href=#the-id-attribute>id</a></code>
  attribute. Otherwise, the IDL attribute must be set to the empty
  string.</p>

  </div>


  <h4 id=collections-0><span class=secno>2.7.2 </span>Collections</h4>

  <p>The <code><a href=#htmlcollection>HTMLCollection</a></code>, <code><a href=#htmlallcollection>HTMLAllCollection</a></code>,
  <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code>,
  <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code>, and
  <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> interfaces represent various
  lists of DOM nodes. Collectively, objects implementing these
  interfaces are called <dfn id=collections>collections</dfn>.</p>

  <p>When a <a href=#collections title=collections>collection</a> is created, a
  filter and a root are associated with the collection.</p>

  <p class=example>For example, when the <code><a href=#htmlcollection>HTMLCollection</a></code>
  object for the <code title=dom-document-images><a href=#dom-document-images>document.images</a></code> attribute is
  created, it is associated with a filter that selects only
  <code><a href=#the-img-element>img</a></code> elements, and rooted at the root of the
  document.</p>

  <p>The <a href=#collections title=collections>collection</a> then <dfn id=represented-by-the-collection title="represented by the collection">represents</dfn> a
  <a href=#live>live</a> view of the subtree rooted at the collection's
  root, containing only nodes that match the given filter. The view is
  linear. <span class=impl>In the absence of specific requirements
  to the contrary, the nodes within the collection must be sorted in
  <a href=#tree-order>tree order</a>.</span></p>

  <div class=impl>

  <p class=note>The <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> list is
  not in tree order.</p>

  <p>An attribute that returns a collection must return the same
  object every time it is retrieved.</p>

  </div>


  <h5 id=htmlcollection-0><span class=secno>2.7.2.1 </span>HTMLCollection</h5>

  <p>The <code><a href=#htmlcollection>HTMLCollection</a></code> interface represents a generic
  <a href=#collections title=collections>collection</a> of elements.</p>

  <pre class=idl>interface <dfn id=htmlcollection>HTMLCollection</dfn> {
  readonly attribute unsigned long <a href=#dom-htmlcollection-length title=dom-HTMLCollection-length>length</a>;
  caller getter object <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>(in unsigned long index); // only returns Element
  caller getter object <a href=#dom-htmlcollection-nameditem title=dom-HTMLCollection-namedItem>namedItem</a>(in DOMString name); // only returns Element
};</pre>

  <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLCollection-length><a href=#dom-htmlcollection-length>length</a></code></dt>
   <dd>
    <p>Returns the number of elements in the collection.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   <dd>
    <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
    <p>Returns null if <var title="">index</var> is out of range.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   <dd>
    <p>Returns the first item with <a href=#concept-id title=concept-id>ID</a> or name <var title="">name</var>
    from the collection.</p>
    <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> or name could be found.</p>
    <p>Only <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
    <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
    <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
    <code><a href=#the-object-element>object</a></code> elements can have a name for the purpose of
    this method; their name is given by the value of their <code title="">name</code> attribute.</p>
   </dd>
  </dl><div class=impl>

  <p>The object's <span>indices of the supported indexed
  properties</span> are the numbers in the range zero to one less than
  the number of nodes <a href=#represented-by-the-collection>represented by the collection</a>. If
  there are no such elements, then there are no <span>supported
  indexed properties</span>.</p>

  <p>The <dfn id=dom-htmlcollection-length title=dom-HTMLCollection-length><code>length</code></dfn>
  attribute must return the number of nodes <a href=#represented-by-the-collection>represented by the
  collection</a>.</p>

  <p>The <dfn id=dom-htmlcollection-item title=dom-HTMLCollection-item><code>item(<var title="">index</var>)</code></dfn> method must return the <var title="">index</var>th node in the collection. If there is no <var title="">index</var>th node in the collection, then the method must
  return null.</p>

  <p>The <span>names of the supported named properties</span> consist
  of the values of the <code title="">name</code> attributes of each
  <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
  <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
  <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
  <code><a href=#the-object-element>object</a></code> element <a href=#represented-by-the-collection>represented by the
  collection</a> with a <code title="">name</code> attribute, plus
  the list of IDs that the elements <a href=#represented-by-the-collection>represented by the
  collection</a> have.</p>

  <p>The <dfn id=dom-htmlcollection-nameditem title=dom-HTMLCollection-namedItem><code>namedItem(<var title="">key</var>)</code></dfn> method must return the first node
  in the collection that matches the following requirements:</p>

  <ul><li>It is an <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>,
   <code><a href=#the-area-element>area</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>,
   <code><a href=#frame>frame</a></code>, <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>,
   <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> element with a <code title="">name</code> attribute equal to <var title="">key</var>,
   or,</li>

   <li>It is an element with an <a href=#concept-id title=concept-id>ID</a>
   equal to <var title="">key</var>.</li>

  </ul><p>If no such elements are found, then the method must return
  null.</p>

  </div>


  <h5 id=htmlallcollection-0><span class=secno>2.7.2.2 </span>HTMLAllCollection</h5>

  <p>The <code><a href=#htmlallcollection>HTMLAllCollection</a></code> interface represents a generic
  <a href=#collections title=collections>collection</a> of elements just like
  <code><a href=#htmlcollection>HTMLCollection</a></code>, with the exception that its <code title=dom-HTMLAllCollection-namedItem><a href=#dom-htmlallcollection-nameditem>namedItem()</a></code> method
  returns an <code><a href=#htmlcollection>HTMLCollection</a></code> object when there are
  multiple matching elements.</p>

  <pre class=idl>interface <dfn id=htmlallcollection>HTMLAllCollection</dfn> : <a href=#htmlcollection>HTMLCollection</a> {
  // inherits <a href=#dom-htmlcollection-length title=dom-HTMLCollection-length>length</a> and <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>()
  caller getter object <a href=#dom-htmlallcollection-nameditem title=dom-HTMLAllCollection-namedItem>namedItem</a>(in DOMString name); // overrides inherited namedItem()
  <a href=#htmlallcollection>HTMLAllCollection</a> <a href=#dom-htmlallcollection-tags title=dom-HTMLAllCollection-tags>tags</a>(in DOMString tagName);
};</pre>

  <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLCollection-length><a href=#dom-htmlcollection-length>length</a></code></dt>
   <dd>
    <p>Returns the number of elements in the collection.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   <dd>
    <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
    <p>Returns null if <var title="">index</var> is out of range.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLAllCollection-namedItem><a href=#dom-htmlallcollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">collection</var> = <var title="">collection</var> . <code title=dom-HTMLAllCollection-namedItem><a href=#dom-htmlallcollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   <dd>
    <p>Returns the item with <a href=#concept-id title=concept-id>ID</a> or name <var title="">name</var> from the collection.</p>
    <p>If there are multiple matching items, then an <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object containing all those elements is returned.</p>
    <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> or name could be found.</p>
    <p>Only <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
    <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
    <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
    <code><a href=#the-object-element>object</a></code> elements can have a name for the purpose of
    this method; their name is given by the value of their <code title="">name</code> attribute.</p>
   </dd>

   <dt><var title="">collection</var> = <var title="">collection</var> . <code title=dom-HTMLAllCollection-tags><a href=#dom-htmlallcollection-tags>tags</a></code>(<var title="">tagName</var>)</dt>
   <dd>
    <p>Returns a collection that is a filtered view of the current collection, containing only elements with the given tag name.</p>
   </dd>

  </dl><div class=impl>

  <p>The object's <span>indices of the supported indexed
  properties</span> and <span>names of the supported named
  properties</span> are as defined for <code><a href=#htmlcollection>HTMLCollection</a></code>
  objects.</p>

  <p>The <dfn id=dom-htmlallcollection-nameditem title=dom-HTMLAllCollection-namedItem><code>namedItem(<var title="">key</var>)</code></dfn> method must act according to the
  following algorithm:</p>

  <ol><li>

    <p>Let <var title="">collection</var> be an
    <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object rooted at the same node as
    the <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object on which the method was
    invoked, whose filter matches only only elements that already
    match the filter of the <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object on
    which the method was invoked and that are either:</p>

    <ul><li><code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
     <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
     <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or
     <code><a href=#the-object-element>object</a></code> elements with a <code title="">name</code>
     attribute equal to <var title="">key</var>, or,</li>

     <li>elements with an <a href=#concept-id title=concept-id>ID</a> equal to
     <var title="">key</var>.</li>

    </ul></li>

   <li>If, at the time the method is called, there is exactly one node
   in <var title="">collection</var>, then return that node and stop
   the algorithm.</li>

   <li>Otherwise, if, at the time the method is called, <var title="">collection</var> is empty, return null and stop the
   algorithm.</li>

   <li>Otherwise, return <var title="">collection</var>.</li>

  </ol><p>The <dfn id=dom-htmlallcollection-tags title=dom-HTMLAllCollection-tags><code>tags(<var title="">tagName</var>)</code></dfn> method must return an
  <code><a href=#htmlallcollection>HTMLAllCollection</a></code> rooted at the same node as the
  <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object on which the method was
  invoked, whose filter matches only <a href=#html-elements>HTML elements</a> whose
  local name is the <var title="">tagName</var> argument and that
  already match the filter of the <code><a href=#htmlallcollection>HTMLAllCollection</a></code>
  object on which the method was invoked. In <a href=#html-documents>HTML
  documents</a>, the argument must first be <a href=#converted-to-ascii-lowercase>converted to
  ASCII lowercase</a>.</p>

  </div>


  <h5 id=htmlformcontrolscollection-0><span class=secno>2.7.2.3 </span>HTMLFormControlsCollection</h5>

  <p>The <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> interface represents
  a <a href=#collections title=collections>collection</a> of <a href=#category-listed title=category-listed>listed elements</a> in <code><a href=#the-form-element>form</a></code>
  and <code><a href=#the-fieldset-element>fieldset</a></code> elements.</p>

  <pre class=idl>interface <dfn id=htmlformcontrolscollection>HTMLFormControlsCollection</dfn> : <a href=#htmlcollection>HTMLCollection</a> {
  // inherits <a href=#dom-htmlcollection-length title=dom-HTMLCollection-length>length</a> and <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>()
  caller getter object <a href=#dom-htmlformcontrolscollection-nameditem title=dom-HTMLFormControlsCollection-namedItem>namedItem</a>(in DOMString name); // overrides inherited namedItem()
};

interface <dfn id=radionodelist>RadioNodeList</dfn> : <a href=#nodelist>NodeList</a> {
          attribute DOMString <a href=#dom-radionodelist-value title=dom-RadioNodeList-value>value</a>;
};</pre>

  <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLCollection-length><a href=#dom-htmlcollection-length>length</a></code></dt>
   <dd>
    <p>Returns the number of elements in the collection.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   <dd>
    <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
    <p>Returns null if <var title="">index</var> is out of range.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLFormControlsCollection-namedItem><a href=#dom-htmlformcontrolscollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">radioNodeList</var> = <var title="">collection</var> . <code title=dom-HTMLFormControlsCollection-namedItem><a href=#dom-htmlformcontrolscollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   <dd>
    <p>Returns the item with <a href=#concept-id title=concept-id>ID</a> or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> <var title="">name</var> from the collection.</p>
    <p>If there are multiple matching items, then a <code><a href=#radionodelist>RadioNodeList</a></code> object containing all those elements is returned.</p>
    <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> could be found.</p>
   </dd>

   <dt><var title="">radioNodeList</var> . <var title="">value</var> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the value of the first checked radio button represented by the object.</p>
    <p>Can be set, to check the first radio button with the given value represented by the object.</p>
   </dd>

  </dl><div class=impl>

  <p>The object's <span>indices of the supported indexed
  properties</span> are as defined for <code><a href=#htmlcollection>HTMLCollection</a></code>
  objects.</p>

  <p>The <span>names of the supported named properties</span> consist
  of the values of all the <code title=attr-id><a href=#the-id-attribute>id</a></code> and <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attributes of all the elements
  <a href=#represented-by-the-collection>represented by the collection</a>.</p>

  <p>The <dfn id=dom-htmlformcontrolscollection-nameditem title=dom-HTMLFormControlsCollection-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method must act according to the
  following algorithm:</p>

  <ol><li>If, at the time the method is called, there is exactly one node
   in the collection that has either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute equal to <var title="">name</var>, then return that node and stop the
   algorithm.</li>

   <li>Otherwise, if there are no nodes in the collection that have
   either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute equal to <var title="">name</var>, then return null and stop the algorithm.</li>

   <li>Otherwise, create a new <code><a href=#radionodelist>RadioNodeList</a></code> object
   representing a <a href=#live>live</a> view of the
   <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> object, further filtered so
   that the only nodes in the <code><a href=#radionodelist>RadioNodeList</a></code> object are
   those that have either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute
   or a <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute equal to <var title="">name</var>. The nodes in the <code><a href=#radionodelist>RadioNodeList</a></code>
   object must be sorted in <a href=#tree-order>tree order</a>.</li>

   <li>Return that <code><a href=#radionodelist>RadioNodeList</a></code> object.</li>

  </ol><hr><p>Members of the <code><a href=#radionodelist>RadioNodeList</a></code> interface inherited
  from the <code><a href=#nodelist>NodeList</a></code> interface must behave as they would
  on a <code><a href=#nodelist>NodeList</a></code> object.</p>

  <p>The <dfn id=dom-radionodelist-value title=dom-RadioNodeList-value><code>value</code></dfn>
  IDL attribute on the <code><a href=#radionodelist>RadioNodeList</a></code> object, on getting,
  must return the value returned by running the following steps:</p>

  <ol><li><p>Let <var title="">element</var> be the first element in
   <a href=#tree-order>tree order</a> represented by the
   <code><a href=#radionodelist>RadioNodeList</a></code> object that is an <code><a href=#the-input-element>input</a></code>
   element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute
   is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>
   state and whose <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>
   is true. Otherwise, let it be null.</li>

   <li><p>If <var title="">element</var> is null, or if it is an
   element with no <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   attribute, return the empty string.</li>

   <li><p>Otherwise, return the value of <var title="">element</var>'s
   <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</li>

  </ol><p>On setting, the <code title=dom-RadioNodeList-value><a href=#dom-radionodelist-value>value</a></code> IDL attribute must run
  the following steps:</p>

  <ol><li><p>Let <var title="">element</var> be the first element in
   <a href=#tree-order>tree order</a> represented by the
   <code><a href=#radionodelist>RadioNodeList</a></code> object that is an <code><a href=#the-input-element>input</a></code>
   element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute
   is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>
   state and whose <code title=attr-input-value><a href=#attr-input-value>value</a></code> content
   attribute is present and equal to the new value, if any. Otherwise,
   let it be null.</li>

   <li><p>If <var title="">element</var> is not null, then set its
   <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to true.</p>

  </ol><!--
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E...%0A%3Cform%20name%3D%22a%22%3E%3Cinput%20id%3D%22x%22%20name%3D%22y%22%3E%3Cinput%20name%3D%22x%22%20id%3D%22y%22%3E%3C/form%3E%0A%3Cscript%3E%0A%20%20var%20x%3B%0A%20%20w%28x%20%3D%20document.forms%5B%27a%27%5D%5B%27x%27%5D%29%3B%0A%20%20w%28x.length%29%3B%0A%20%20x%5B0%5D.parentNode.removeChild%28x%5B0%5D%29%3B%0A%20%20w%28x.length%29%3B%0A%20%20w%28x%20%3D%3D%20document.forms%5B%27a%27%5D%5B%27x%27%5D%29%3B%0A%3C/script%3E%0A
--></div>


  <h5 id=htmloptionscollection-0><span class=secno>2.7.2.4 </span>HTMLOptionsCollection</h5>

  <p>The <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> interface represents a
  list of <code><a href=#the-option-element>option</a></code> elements. It is always rooted on a
  <code><a href=#the-select-element>select</a></code> element and has attributes and methods that
  manipulate that element's descendants.</p>

  <pre class=idl>interface <dfn id=htmloptionscollection>HTMLOptionsCollection</dfn> : <a href=#htmlcollection>HTMLCollection</a> {
  // inherits <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>()
           attribute unsigned long <a href=#dom-htmloptionscollection-length title=dom-HTMLOptionsCollection-length>length</a>; // overrides inherited length
  caller getter object <a href=#dom-htmloptionscollection-nameditem title=dom-HTMLOptionsCollection-namedItem>namedItem</a>(in DOMString name); // overrides inherited namedItem()
  void <a href=#dom-htmloptionscollection-add title=dom-HTMLOptionsCollection-add>add</a>(in <a href=#htmlelement>HTMLElement</a> element, in optional <a href=#htmlelement>HTMLElement</a> before);
  void <a href=#dom-htmloptionscollection-add title=dom-HTMLOptionsCollection-add>add</a>(in <a href=#htmlelement>HTMLElement</a> element, in long before);
  void <a href=#dom-htmloptionscollection-remove title=dom-HTMLOptionsCollection-remove>remove</a>(in long index);
};</pre>

  <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLOptionsCollection-length><a href=#dom-htmloptionscollection-length>length</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the number of elements in the collection.</p>
    <p>When set to a smaller number, truncates the number of <code><a href=#the-option-element>option</a></code> elements in the corresponding container.</p>
    <p>When set to a greater number, adds new blank <code><a href=#the-option-element>option</a></code> elements to that container.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   <dd>
    <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
    <p>Returns null if <var title="">index</var> is out of range.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLOptionsCollection-namedItem><a href=#dom-htmloptionscollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">nodeList</var> = <var title="">collection</var> . <code title=dom-HTMLOptionsCollection-namedItem><a href=#dom-htmloptionscollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   <dd>
    <p>Returns the item with <a href=#concept-id title=concept-id>ID</a> or <code title=attr-option-name><a href=#attr-option-name>name</a></code> <var title="">name</var> from the collection.</p>
    <p>If there are multiple matching items, then a <code><a href=#nodelist>NodeList</a></code> object containing all those elements is returned.</p>
    <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> could be found.</p>
   </dd>

   <dt><var title="">collection</var> . <code title=dom-HTMLOptionsCollection-add><a href=#dom-htmloptionscollection-add>add</a></code>(<var title="">element</var> [, <var title="">before</var> ] )</dt>
   <dd>
    <p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p>
    <p>The <var title="">before</var> argument can be a number, in
    which case <var title="">element</var> is inserted before the item
    with that number, or an element from the collection, in which case
    <var title="">element</var> is inserted before that element.</p>
    <p>If <var title="">before</var> is omitted, null, or a number out
    of range, then <var title="">element</var> will be added at the
    end of the list.</p>
    <p>This method will throw a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code>
    exception if <var title="">element</var> is an ancestor of the
    element into which it is to be inserted. If <var title="">element</var> is not an <code><a href=#the-option-element>option</a></code> or
    <code><a href=#the-optgroup-element>optgroup</a></code> element, then the method does nothing.</p>
   </dd>

  </dl><div class=impl>

  <p>The object's <span>indices of the supported indexed
  properties</span> are as defined for <code><a href=#htmlcollection>HTMLCollection</a></code>
  objects.</p>

  <p>On getting, the <dfn id=dom-htmloptionscollection-length title=dom-HTMLOptionsCollection-length><code>length</code></dfn>
  attribute must return the number of nodes <a href=#represented-by-the-collection>represented by the
  collection</a>.</p>

  <p>On setting, the behavior depends on whether the new value is
  equal to, greater than, or less than the number of nodes
  <a href=#represented-by-the-collection>represented by the collection</a> at that time. If the
  number is the same, then setting the attribute must do nothing. If
  the new value is greater, then <var title="">n</var> new
  <code><a href=#the-option-element>option</a></code> elements with no attributes and no child nodes
  must be appended to the <code><a href=#the-select-element>select</a></code> element on which the
  <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted, where <var title="">n</var> is the difference between the two numbers (new
  value minus old value). Mutation events must be fired as if a
  <code><a href=#documentfragment>DocumentFragment</a></code> containing the new <code><a href=#the-option-element>option</a></code>
  elements had been inserted.  If the new value is lower, then the
  last <var title="">n</var> nodes in the collection must be removed
  from their parent nodes, where <var title="">n</var> is the
  difference between the two numbers (old value minus new value).</p>

  <p class=note>Setting <code title=dom-HTMLOptionsCollection-length><a href=#dom-htmloptionscollection-length>length</a></code> never removes
  or adds any <code><a href=#the-optgroup-element>optgroup</a></code> elements, and never adds new
  children to existing <code><a href=#the-optgroup-element>optgroup</a></code> elements (though it can
  remove children from them).</p>

  <p>The <span>names of the supported named properties</span> consist
  of the values of all the <code title=attr-id><a href=#the-id-attribute>id</a></code> and <code title=attr-option-name><a href=#attr-option-name>name</a></code> attributes of all the elements
  <a href=#represented-by-the-collection>represented by the collection</a>.</p>

  <p>The <dfn id=dom-htmloptionscollection-nameditem title=dom-HTMLOptionsCollection-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method must act according to the
  following algorithm:</p>

  <ol><li>If, at the time the method is called, there is exactly one node
   in the collection that has either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-option-name><a href=#attr-option-name>name</a></code> attribute equal to <var title="">name</var>, then return that node and stop the
   algorithm.</li>

   <li>Otherwise, if there are no nodes in the collection that have
   either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-option-name><a href=#attr-option-name>name</a></code> attribute equal to <var title="">name</var>, then return null and stop the algorithm.</li>

   <!-- IE returns an HTMLCollection instead; we may need to change to that for compat -->
   <li>Otherwise, create a new <code><a href=#nodelist>NodeList</a></code> object
   representing a <a href=#live>live</a> view of the
   <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> object, further filtered so that
   the only nodes in the <code><a href=#nodelist>NodeList</a></code> object are those that
   have either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-option-name><a href=#attr-option-name>name</a></code> attribute equal to <var title="">name</var>. The nodes in the <code><a href=#nodelist>NodeList</a></code> object
   must be sorted in <a href=#tree-order>tree order</a>.</li>

   <li>Return that <code><a href=#nodelist>NodeList</a></code> object.</li>

  </ol><p>The <dfn id=dom-htmloptionscollection-add title=dom-HTMLOptionsCollection-add><code>add(<var title="">element</var>, <var title="">before</var>)</code></dfn>
  method must act according to the following algorithm:</p>

  <ol><li><p>If <var title="">element</var> is not an <code><a href=#the-option-element>option</a></code>
   or <code><a href=#the-optgroup-element>optgroup</a></code> element, then return and abort these
   steps.</li>

   <li><p>If <var title="">element</var> is an ancestor of the
   <code><a href=#the-select-element>select</a></code> element on which the
   <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted, then throw a
   <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</li>

   <li><p>If <var title="">before</var> is an element, but that
   element isn't a descendant of the <code><a href=#the-select-element>select</a></code> element on
   which the <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted, then throw
   a <code><a href=#not_found_err>NOT_FOUND_ERR</a></code> exception.</li>

   <li><p>If <var title="">element</var> and <var title="">before</var> are the same element, then return and abort
   these steps.</li>

   <li><p>If <var title="">before</var> is a node, then let <var title="">reference</var> be that node. Otherwise, if <var title="">before</var> is an integer, and there is a <var title="">before</var>th node in the collection, let <var title="">reference</var> be that node. Otherwise, let <var title="">reference</var> be null.</li>

   <li><p>If <var title="">reference</var> is not null, let <var title="">parent</var> be the parent node of <var title="">reference</var>. Otherwise, let <var title="">parent</var>
   be the <code><a href=#the-select-element>select</a></code> element on which the
   <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted.</li>

   <li><p>Act as if the DOM Core <code title=dom-Node-insertBefore><a href=#dom-node-insertbefore>insertBefore()</a></code> method was
   invoked on the <var title="">parent</var> node, with <var title="">element</var> as the first argument and <var title="">reference</var> as the second argument.</p>

  </ol><p>The <dfn id=dom-htmloptionscollection-remove title=dom-HTMLOptionsCollection-remove><code>remove(<var title="">index</var>)</code></dfn> method must act according to
  the following algorithm:</p>

  <ol><li><p>If the number of nodes <a href=#represented-by-the-collection>represented by the
   collection</a> is zero, abort these steps.</li>

   <li><p>If <var title="">index</var> is not a number greater than or
   equal to 0 and less than the number of nodes <a href=#represented-by-the-collection>represented by
   the collection</a>, let <var title="">element</var> be the first
   element in the collection. Otherwise, let <var title="">element</var> be the <var title="">index</var>th element
   in the collection.</li>

   <li><p>Remove <var title="">element</var> from its parent
   node.</li>

  </ol><!-- see also http://ln.hixie.ch/?start=1161042744&count=1 --></div>


  <div data-component="HTML Microdata (editor: Ian Hickson)">

<!--FIXUP microdata -1-->
  <h5 id=htmlpropertiescollection-0><span class=secno>2.7.2.5 </span>HTMLPropertiesCollection</h5>
<!--FIXUP microdata +1-->

  <p>The <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> interface represents a
  <a href=#collections title=collections>collection</a> of elements that add
  name-value pairs to a particular <a href=#concept-item title=concept-item>item</a> in the <a href=#microdata>microdata</a>
  model.</p>

  <pre class=idl>interface <dfn id=htmlpropertiescollection>HTMLPropertiesCollection</dfn> : <a href=#htmlcollection>HTMLCollection</a> {
  // inherits <a href=#dom-htmlcollection-length title=dom-HTMLCollection-length>length</a> and <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>()
  caller getter <a href=#propertynodelist>PropertyNodeList</a> <a href=#dom-htmlpropertiescollection-nameditem title=dom-HTMLPropertiesCollection-namedItem>namedItem</a>(in DOMString name); // overrides inherited namedItem()
  readonly attribute <span>DOMStringList</span> <a href=#dom-htmlpropertiescollection-names title=dom-HTMLPropertiesCollection-names>names</a>;
};

typedef sequence&lt;any&gt; <dfn id=propertyvaluearray>PropertyValueArray</dfn>;

interface <dfn id=propertynodelist>PropertyNodeList</dfn> : <a href=#nodelist>NodeList</a> {
  readonly attribute <a href=#propertyvaluearray>PropertyValueArray</a> <a href=#dom-propertynodelist-values title=dom-PropertyNodeList-values>values</a>;
};</pre>

  <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLCollection-length><a href=#dom-htmlcollection-length>length</a></code></dt>
   <dd>
    <p>Returns the number of elements in the collection.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   <dd>
    <p>Returns the element with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
    <p>Returns null if <var title="">index</var> is out of range.</p>
   </dd>

   <dt><var title="">propertyNodeList</var> = <var title="">collection</var> . <code title=dom-HTMLPropertiesCollection-namedItem><a href=#dom-htmlpropertiescollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   <dd>
    <p>Returns a <code><a href=#propertynodelist>PropertyNodeList</a></code> object containing any elements that add a property named <var title="">name</var>.</p>
   </dd>

   <dt><var title="">collection</var> . <code title=dom-HTMLPropertiesCollection-names><a href=#dom-htmlpropertiescollection-names>names</a></code></dt>
   <dd>
    <p>Returns a <code>DOMStringList</code> with the <a href=#property-names>property names</a> of the elements in the collection.</p>
   </dd>

   <dt><var title="">propertyNodeList</var> . <code title=dom-PropertyNodeList-values><a href=#dom-propertynodelist-values>values</a></code></dt>
   <dd>
    <p>Returns an array of the various values that the relevant elements have.</p>
   </dd>

  </dl><div class=impl>

  <p>The object's <span>indices of the supported indexed
  properties</span> are as defined for <code><a href=#htmlcollection>HTMLCollection</a></code>
  objects.</p>

  <p>The <span>names of the supported named properties</span> consist
  of the <a href=#property-names>property names</a> of all the elements
  <a href=#represented-by-the-collection>represented by the collection</a>.</p>

  <p>The <dfn id=dom-htmlpropertiescollection-names title=dom-HTMLPropertiesCollection-names><code>names</code></dfn>
  attribute must return a <a href=#live>live</a> <code>DOMStringList</code>
  object giving the <a href=#property-names>property names</a> of all the elements
  <a href=#represented-by-the-collection>represented by the collection</a>, listed in <a href=#tree-order>tree
  order</a>, but with duplicates removed, leaving only the first
  occurrence of each name. The same object must be returned each
  time.</p>

  <p>The <dfn id=dom-htmlpropertiescollection-nameditem title=dom-HTMLPropertiesCollection-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method must return a
  <code><a href=#propertynodelist>PropertyNodeList</a></code> object representing a
  <a href=#live>live</a> view of the <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code>
  object, further filtered so that the only nodes in the
  <code><a href=#propertynodelist>PropertyNodeList</a></code> object are those that have a <a href=#property-names title="property names">property name</a> equal to <var title="">name</var>. The nodes in the <code><a href=#propertynodelist>PropertyNodeList</a></code>
  object must be sorted in <a href=#tree-order>tree order</a>, and the same
  object must be returned each time a particular <var title="">name</var> is queried.</p>

  <hr><p>Members of the <code><a href=#propertynodelist>PropertyNodeList</a></code> interface inherited
  from the <code><a href=#nodelist>NodeList</a></code> interface must behave as they would
  on a <code><a href=#nodelist>NodeList</a></code> object.</p>

  <p>The <dfn id=dom-propertynodelist-values title=dom-PropertyNodeList-values><code>values</code></dfn>
  IDL attribute on the <code><a href=#propertynodelist>PropertyNodeList</a></code> object, on
  getting, must return a newly constructed array whose values are the
  values obtained from the <code title=dom-itemValue><a href=#dom-itemvalue>itemValue</a></code> DOM property of each of the
  elements represented by the object, in <a href=#tree-order>tree order</a>.</p>

  </div>

  </div><!--data-component-->



  <h4 id=domtokenlist-0><span class=secno>2.7.3 </span>DOMTokenList</h4>

  <p>The <code><a href=#domtokenlist>DOMTokenList</a></code> interface represents an interface
  to an underlying string that consists of a <a href=#set-of-space-separated-tokens>set of
  space-separated tokens</a>.</p>

  <p class=note><code><a href=#domtokenlist>DOMTokenList</a></code> objects are always
  <a href=#case-sensitive>case-sensitive</a>, even when the underlying string might
  ordinarily be treated in a case-insensitive manner.</p>

  <pre class=idl>interface <dfn id=domtokenlist>DOMTokenList</dfn> {
  readonly attribute unsigned long <a href=#dom-tokenlist-length title=dom-tokenlist-length>length</a>;
  getter DOMString <a href=#dom-tokenlist-item title=dom-tokenlist-item>item</a>(in unsigned long index);
  boolean <a href=#dom-tokenlist-contains title=dom-tokenlist-contains>contains</a>(in DOMString token);
  void <a href=#dom-tokenlist-add title=dom-tokenlist-add>add</a>(in DOMString token);
  void <a href=#dom-tokenlist-remove title=dom-tokenlist-remove>remove</a>(in DOMString token);
  boolean <a href=#dom-tokenlist-toggle title=dom-tokenlist-toggle>toggle</a>(in DOMString token);
  <a href=#dom-tokenlist-tostring title=dom-tokenlist-toString>stringifier</a> DOMString ();
};</pre>

  <dl class=domintro><dt><var title="">tokenlist</var> . <code title=dom-tokenlist-length><a href=#dom-tokenlist-length>length</a></code></dt>
   <dd>
    <p>Returns the number of tokens in the string.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">tokenlist</var> . <code title=dom-tokenlist-item><a href=#dom-tokenlist-item>item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">tokenlist</var>[<var title="">index</var>]</dt>
   <dd>
    <p>Returns the token with index <var title="">index</var>. The tokens are returned in the order they are found in the underlying string.</p>
    <p>Returns null if <var title="">index</var> is out of range.</p>
   </dd>

   <dt><var title="">hastoken</var> = <var title="">tokenlist</var> . <code title=dom-tokenlist-contains><a href=#dom-tokenlist-contains>contains</a></code>(<var title="">token</var>)</dt>
   <dd>
    <p>Returns true if the <var title="">token</var> is present; false otherwise.</p>
    <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
    <p>Throws an <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
   </dd>

   <dt><var title="">tokenlist</var> . <code title=dom-tokenlist-add><a href=#dom-tokenlist-add>add</a></code>(<var title="">token</var>)</dt>
   <dd>
    <p>Adds <var title="">token</var>, unless it is already present.</p>
    <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
    <p>Throws an <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
   </dd>

   <dt><var title="">tokenlist</var> . <code title=dom-tokenlist-remove><a href=#dom-tokenlist-remove>remove</a></code>(<var title="">token</var>)</dt>
   <dd>
    <p>Removes <var title="">token</var> if it is present.</p>
    <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
    <p>Throws an <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
   </dd>

   <dt><var title="">hastoken</var> = <var title="">tokenlist</var> . <code title=dom-tokenlist-toggle><a href=#dom-tokenlist-toggle>toggle</a></code>(<var title="">token</var>)</dt>
   <dd>
    <p>Adds <var title="">token</var> if it is not present, or removes
    it if it is. Returns true if <var title="">token</var> is now
    present (it was added); returns false if it is not (it was
    removed).</p>
    <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
    <p>Throws an <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-tokenlist-length title=dom-tokenlist-length><code>length</code></dfn>
  attribute must return the number of tokens that result from <a href=#split-a-string-on-spaces title="split a string on spaces">splitting the underlying string on
  spaces</a>. This is the <var title=dom-tokenlist-length><a href=#dom-tokenlist-length>length</a></var>.</p>

  <p>The object's <span>indices of the supported indexed
  properties</span> are the numbers in the range zero to <span title=""><var title=dom-tokenlist-length><a href=#dom-tokenlist-length>length</a></var>-1</span>, unless the <var title=dom-tokenlist-length><a href=#dom-tokenlist-length>length</a></var> is zero, in which case
  there are no <span>supported indexed properties</span>.</p>

  <p>The <dfn id=dom-tokenlist-item title=dom-tokenlist-item><code>item(<var title="">index</var>)</code></dfn> method must <a href=#split-a-string-on-spaces title="split a
  string on spaces">split the underlying string on spaces</a>,
  preserving the order of the tokens as found in the underlying
  string, and then return the <var title="">index</var>th item in this
  list. If <var title="">index</var> is equal to or greater than the
  number of tokens, then the method must return null.</p>

  <p class=example>For example, if the string is "<code title="">a b
  a c</code>" then there are four tokens: the token with index 0 is
  "<code title="">a</code>", the token with index 1 is "<code title="">b</code>", the token with index 2 is "<code title="">a</code>", and the token with index 3 is "<code title="">c</code>".</p>

  <p>The <dfn id=dom-tokenlist-contains title=dom-tokenlist-contains><code>contains(<var title="">token</var>)</code></dfn> method must run the following
  algorithm:</p>

  <ol><li>If the <var title="">token</var> argument is the empty string,
   then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and stop the
   algorithm.</li>

   <li>If the <var title="">token</var> argument contains any <a href=#space-character title="space character">space characters</a>, then raise an
   <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception and stop the
   algorithm.</li>

   <li>Otherwise, <a href=#split-a-string-on-spaces title="split a string on spaces">split the
   underlying string on spaces</a> to get the list of tokens in the
   object's underlying string.</li>

   <li>If the token indicated by <var title="">token</var> is a
   <a href=#case-sensitive>case-sensitive</a> match for one of the tokens in the
   object's underlying string then return true and stop this
   algorithm.</li>

   <li>Otherwise, return false.</li>

  </ol><p>The <dfn id=dom-tokenlist-add title=dom-tokenlist-add><code>add(<var title="">token</var>)</code></dfn> method must run the following
  algorithm:</p>

  <ol><li>If the <var title="">token</var> argument is the empty string,
   then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and stop the
   algorithm.</li>

   <li>If the <var title="">token</var> argument contains any <a href=#space-character title="space character">space characters</a>, then raise an
   <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception and stop the
   algorithm.</li>

   <li>Otherwise, <a href=#split-a-string-on-spaces title="split a string on spaces">split the
   underlying string on spaces</a> to get the list of tokens in the
   object's underlying string.</li>

   <li>If the given <var title="">token</var> is a
   <a href=#case-sensitive>case-sensitive</a> match for one of the tokens in the
   <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying string then stop the
   algorithm.</li>

   <li>Otherwise, if the <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying
   string is not the empty string and the last character of that
   string is not a <a href=#space-character>space character</a>, then append a U+0020
   SPACE character to the end of that string.</li>

   <li>Append the value of <var title="">token</var> to the end of the
   <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying string.</li>

  </ol><p>The <dfn id=dom-tokenlist-remove title=dom-tokenlist-remove><code>remove(<var title="">token</var>)</code></dfn> method must run the following
  algorithm:</p>

  <ol><li>If the <var title="">token</var> argument is the empty string,
   then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and stop the
   algorithm.</li>

   <li>If the <var title="">token</var> argument contains any <a href=#space-character title="space character">space characters</a>, then raise an
   <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception and stop the
   algorithm.</li>

   <li>Otherwise, <a href=#remove-a-token-from-a-string title="remove a token from a string">remove
   the given <var title="">token</var> from the underlying
   string</a>.</li>

  </ol><p>The <dfn id=dom-tokenlist-toggle title=dom-tokenlist-toggle><code>toggle(<var title="">token</var>)</code></dfn> method must run the following
  algorithm:</p>

  <ol><li>If the <var title="">token</var> argument is the empty string,
   then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and stop the
   algorithm.</li>

   <li>If the <var title="">token</var> argument contains any <a href=#space-character title="space character">space characters</a>, then raise an
   <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception and stop the
   algorithm.</li>

   <li>Otherwise, <a href=#split-a-string-on-spaces title="split a string on spaces">split the
   underlying string on spaces</a> to get the list of tokens in the
   object's underlying string.</li>

   <li>If the given <var title="">token</var> is a
   <a href=#case-sensitive>case-sensitive</a> match for one of the tokens in the
   <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying string then <a href=#remove-a-token-from-a-string title="remove a token from a string">remove the given <var title="">token</var> from the underlying string</a> and stop the
   algorithm, returning false.</li>

   <li>Otherwise, if the <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying
   string is not the empty string and the last character of that
   string is not a <a href=#space-character>space character</a>, then append a U+0020
   SPACE character to the end of that string.</li>

   <li>Append the value of <var title="">token</var> to the end of the
   <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying string.</li>

   <li>Return true.</li>

  </ol><p>Objects implementing the <code><a href=#domtokenlist>DOMTokenList</a></code> interface must
  <dfn id=dom-tokenlist-tostring title=dom-tokenlist-toString>stringify</dfn> to the object's
  underlying string representation.</p>

  </div>


  <h4 id=domsettabletokenlist-0><span class=secno>2.7.4 </span>DOMSettableTokenList</h4>

  <p>The <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code> interface is the same as the
  <code><a href=#domtokenlist>DOMTokenList</a></code> interface, except that it allows the
  underlying string to be directly changed.</p>

  <pre class=idl>interface <dfn id=domsettabletokenlist>DOMSettableTokenList</dfn> : <a href=#domtokenlist>DOMTokenList</a> {
            attribute DOMString <a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>;
};</pre>

  <dl class=domintro><dt><var title="">tokenlist</var> . <code title=dom-DOMSettableTokenList-value><a href=#dom-domsettabletokenlist-value>value</a></code></dt>
   <dd>
    <p>Returns the underlying string.</p>
    <p>Can be set, to change the underlying string.</p>
   </dd>

  </dl><div class=impl>

  <p>An object implementing the <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code>
  interface must act as defined for the <code><a href=#domtokenlist>DOMTokenList</a></code>
  interface, except for the <code title=dom-DOMSettableTokenList-value><a href=#dom-domsettabletokenlist-value>value</a></code> attribute defined
  here.</p>

  <p>The <dfn id=dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value><code>value</code></dfn>
  attribute must return the underlying string on getting, and must
  replace the underlying string with the new value on setting.</p>

  </div>


  <div class=impl>

  <h4 id=safe-passing-of-structured-data><span class=secno>2.7.5 </span>Safe passing of structured data</h4>

  <p>When a user agent is required to obtain a <dfn id=structured-clone>structured
  clone</dfn> of an object, it must run the following algorithm, which
  either returns a separate object, or throws an exception.</p>

  <ol><li><p>Let <var title="">input</var> be the object being
   cloned.</li>

   <li><p>Let <var title="">memory</var> be a list of objects,
   initially empty. (This is used to catch cycles.)</li>

   <li><p>Let <var title="">output</var> be the object resulting from
   calling the <a href=#internal-structured-cloning-algorithm>internal structured cloning algorithm</a> with
   <var title="">input</var> and <var title="">memory</var>.</li>

   <li><p>Return <var title="">output</var>.</li>

  </ol><p>The <dfn id=internal-structured-cloning-algorithm>internal structured cloning algorithm</dfn> is always
  called with two arguments, <var title="">input</var> and <var title="">memory</var>, and its behavior depends on the type of <var title="">input</var>, as follows:</p>

  <dl class=switch><dt>If <var title="">input</var> is the undefined value</dt>

   <dd><p>Return the undefined value.</dd>

   <dt>If <var title="">input</var> is the null value</dt>

   <dd><p>Return the null value.</dd>

   <dt>If <var title="">input</var> is the false value</dt>

   <dd><p>Return the false value.</dd>

   <dt>If <var title="">input</var> is the true value</dt>

   <dd><p>Return the true value.</dd>

   <dt>If <var title="">input</var> is a Number object</dt>

   <dd><p>Return a newly constructed Number object with the same value as <var title="">input</var>.</dd>

   <dt>If <var title="">input</var> is a String object</dt>

   <dd><p>Return a newly constructed String object with the same value as <var title="">input</var>.</dd>

   <dt>If <var title="">input</var> is a <code>Date</code> object</dt>

   <dd><p>Return a newly constructed <code>Date</code> object with the same value as <var title="">input</var>.</dd>

   <dt>If <var title="">input</var> is a <code>RegExp</code> object</dt>

   <dd>

    <p>Return a newly constructed <code>RegExp</code> object with the same pattern and flags as <var title="">input</var>.</p>

    <p class=note>The value of the <code title="">lastIndex</code> property is not copied.</p>

   </dd>

   <dt>If <var title="">input</var> is a <code><a href=#imagedata>ImageData</a></code> object</dt>

   <dd><p>Return a newly constructed <code><a href=#imagedata>ImageData</a></code> object
   with the same <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> and
   <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> as <var title="">input</var>, and with a newly constructed
   <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> for its <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code> attribute, with the same
   <code title=dom-canvaspixelarray-length><a href=#dom-canvaspixelarray-length>length</a></code> and pixel
   values as the <var title="">input</var>'s.</dd>

   <dt>If <var title="">input</var> is a <code>File</code> object</dt>

   <dd><p>Return a newly constructed <code>File</code> object corresponding to the same underlying data.</dd>

   <dt>If <var title="">input</var> is a <code>Blob</code> object</dt>

   <dd><p>Return a newly constructed <code>Blob</code> object corresponding to the same underlying data.</dd>

   <dt>If <var title="">input</var> is a <code>FileList</code> object</dt>

   <dd><p>Return a newly constructed <code>FileList</code> object containing a list of newly constructed <code>File</code> objects corresponding to the same underlying data as those in <var title="">input</var>, maintaining their relative order.</dd>

   <dt>If <var title="">input</var> is an Array object</dt>
   <dt>If <var title="">input</var> is an Object object</dt>

   <dd>

    <ol><li><p>If <var title="">input</var> is in <var title="">memory</var>, then throw a
     <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception and abort the overall
     <a href=#structured-clone>structured clone</a> algorithm.</li>

     <li><p>Otherwise, let <var title="">new memory</var> be a list
     consisting of the items in <var title="">memory</var> with the
     addition of <var title="">input</var>.</li>

     <li><p>Create a new object, <var title="">output</var>, of the
     same type as <var title="">input</var>: either an Array or an
     Object.</li>

     <li>

      <p>For each enumerable property in <var title="">input</var>,
      add a corresponding property to <var title="">output</var>
      having the same name, and having a value created from invoking
      the <a href=#internal-structured-cloning-algorithm>internal structured cloning algorithm</a>
      recursively with the value of the property as the "<var title="">input</var>" argument and <var title="">new
      memory</var> as the "<var title="">memory</var>" argument. The
      order of the properties in the <var title="">input</var> and
      <var title="">output</var> objects must be the same.</p>

      <p class=note>This does not walk the prototype chain.</p>

     </li>

     <li><p>Return <var title="">output</var>.</li>

    </ol></dd>

   <dt>If <var title="">input</var> is another native object type (e.g. <code>Error</code>)</dt>
   <dt>If <var title="">input</var> is a host object (e.g. a DOM node)</dt>

   <dd><p>Throw a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception and abort
   the overall <a href=#structured-clone>structured clone</a> algorithm.</dd>

  </dl></div>


  <h4 id=domstringmap-0><span class=secno>2.7.6 </span>DOMStringMap</h4>

  <p>The <code><a href=#domstringmap>DOMStringMap</a></code> interface represents a set of
  name-value pairs. It exposes these using the scripting language's
  native mechanisms for property access.</p>

  <div class=impl>

  <p>When a <code><a href=#domstringmap>DOMStringMap</a></code> object is instantiated, it is
  associated with three algorithms, one for getting the list of
  name-value pairs, one for setting names to certain values, and one
  for deleting names.</p>

  <pre class=idl>interface <dfn id=domstringmap>DOMStringMap</dfn> {
  getter DOMString (in DOMString name);
  setter void (in DOMString name, in DOMString value);
  creator void (in DOMString name, in DOMString value);
  deleter void (in DOMString name);
};</pre>

  <p>The <span>names of the supported named properties</span> on a
  <code><a href=#domstringmap>DOMStringMap</a></code> object at any instant are the names of
  each pair returned from the algorithm for getting the list of
  name-value pairs at that instant.</p>

  <p>When a <code><a href=#domstringmap>DOMStringMap</a></code> object is indexed to retrieve a
  named property <var title="">name</var>, the value returned must be
  the value component of the name-value pair whose name component is
  <var title="">name</var> in the list returned by the algorithm for
  getting the list of name-value pairs.</p>

  <p>When a <code><a href=#domstringmap>DOMStringMap</a></code> object is indexed to create or
  modify a named property <var title="">name</var> with value <var title="">value</var>, the algorithm for setting names to certain
  values must be run, passing <var title="">name</var> as the name and
  the result of converting <var title="">value</var> to a
  <code>DOMString</code> as the value.</p>

  <p>When a <code><a href=#domstringmap>DOMStringMap</a></code> object is indexed to delete a
  named property named <var title="">name</var>, the algorithm for
  deleting names must be run, passing <var title="">name</var> as the
  name.</p>

  <p class=note>The <code><a href=#domstringmap>DOMStringMap</a></code> interface definition
  here is only intended for JavaScript environments. Other language
  bindings will need to define how <code><a href=#domstringmap>DOMStringMap</a></code> is to be
  implemented for those languages.</p>

  </div>

  <div class=example>

   <p>The <code title=dom-dataset><a href=#dom-dataset>dataset</a></code> attribute on
   elements exposes the <code title=attr-data-*><a href=#attr-data-*>data-*</a></code>
   attributes on the element.</p>

   <p>Given the following fragment and elements with similar
   constructions:</p>

   <pre>&lt;img class="tower" id="tower5" data-x="12" data-y="5"
     data-ai="robotarget" data-hp="46" data-ability="flames"
     src="towers/rocket.png alt="Rocket Tower"&gt;</pre>

   <p>...one could imagine a function <code title="">splashDamage()</code> that takes some arguments, the first
   of which is the element to process:</p>

   <pre>function splashDamage(node, x, y, damage) {
  if (node.classList.contains('tower') &amp;&amp; // checking the 'class' attribute
      node.dataset.x == x &amp;&amp; // reading the 'data-x' attribute
      node.dataset.y == y) { // reading the 'data-y' attribute
    var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute
    hp = hp - damage;
    if (hp &lt; 0) {
      hp = 0;
      node.dataset.ai = 'dead'; // setting the 'data-ai' attribute
      delete node.dataset.ability; // removing the 'data-ability' attribute
    }
    node.dataset.hp = hp; // setting the 'data-hp' attribute
  }
}</pre>

  </div>


  <h4 id=dom-feature-strings><span class=secno>2.7.7 </span>DOM feature strings</h4>

  <p>DOM3 Core defines mechanisms for checking for interface support,
  and for obtaining implementations of interfaces, using <a href=http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMFeatures>feature
  strings</a>. <a href=#refsDOMCORE>[DOMCORE]</a></p>

  <p>Authors are strongly discouraged from using these, as they are
  notoriously unreliable and imprecise. Authors are encouraged to rely
  on explicit feature testing or the graceful degradation behavior
  intrinsic to some of the features in this specification.</p>

  <div class=impl>

  <p>For historical reasons, user agents should return the true value
  when the <dfn id=hasfeature title=hasFeature><code>hasFeature(<var title="">feature</var>, <var title="">version</var>)</code></dfn>
  method of the <code><a href=#domimplementation>DOMImplementation</a></code> interface is invoked
  with <var title="">feature</var> set to either "<code title="">HTML</code>" or "<code title="">XHTML</code>" and <var title="">version</var> set to either "<code>1.0</code>" or
  "<code>2.0</code>".</p>

  </div>


  <h4 id=exceptions><span class=secno>2.7.8 </span>Exceptions</h4>

  <p>The following are <code><a href=#domexception>DOMException</a></code> codes. <a href=#refsDOMCORE>[DOMCORE]</a></p>

  <ol class=brief><li value=1><dfn id=index_size_err><code>INDEX_SIZE_ERR</code></dfn></li>
   <li value=2><dfn id=domstring_size_err><code>DOMSTRING_SIZE_ERR</code></dfn></li>
   <li value=3><dfn id=hierarchy_request_err><code>HIERARCHY_REQUEST_ERR</code></dfn></li>
   <li value=4><dfn id=wrong_document_err><code>WRONG_DOCUMENT_ERR</code></dfn></li>
   <li value=5><dfn id=invalid_character_err><code>INVALID_CHARACTER_ERR</code></dfn></li>
   <li value=6><dfn id=no_data_allowed_err><code>NO_DATA_ALLOWED_ERR</code></dfn></li>
   <li value=7><dfn id=no_modification_allowed_err><code>NO_MODIFICATION_ALLOWED_ERR</code></dfn></li>
   <li value=8><dfn id=not_found_err><code>NOT_FOUND_ERR</code></dfn></li>
   <li value=9><dfn id=not_supported_err><code>NOT_SUPPORTED_ERR</code></dfn></li>
   <li value=10><dfn id=inuse_attribute_err><code>INUSE_ATTRIBUTE_ERR</code></dfn></li>
   <li value=11><dfn id=invalid_state_err><code>INVALID_STATE_ERR</code></dfn></li>
   <li value=12><dfn id=syntax_err><code>SYNTAX_ERR</code></dfn></li>
   <li value=13><dfn id=invalid_modification_err><code>INVALID_MODIFICATION_ERR</code></dfn></li>
   <li value=14><dfn id=namespace_err><code>NAMESPACE_ERR</code></dfn></li>
   <li value=15><dfn id=invalid_access_err><code>INVALID_ACCESS_ERR</code></dfn></li>
   <li value=16><dfn id=validation_err><code>VALIDATION_ERR</code></dfn></li>
   <li value=17><dfn id=type_mismatch_err><code>TYPE_MISMATCH_ERR</code></dfn></li>
   <li value=18><dfn id=security_err><code>SECURITY_ERR</code></dfn></li> <!-- actually in XHR for now -->
   <li value=19><dfn id=network_err><code>NETWORK_ERR</code></dfn></li> <!-- actually in XHR for now -->
   <li value=20><dfn id=abort_err><code>ABORT_ERR</code></dfn></li> <!-- actually in XHR for now -->
   <li value=21><dfn id=url_mismatch_err><code>URL_MISMATCH_ERR</code></dfn></li> <!-- actually in workers for now -->
   <li value=22><dfn id=quota_exceeded_err><code>QUOTA_EXCEEDED_ERR</code></dfn></li> <!-- actually defined right here for now -->
<!--v2DATAGRID   <li value="23"><dfn><code>DATAGRID_MODEL_ERR</code></dfn></li> --> <!-- actually defined right here for now -->
   <li value=81><dfn id=parse_err><code>PARSE_ERR</code></dfn></li> <!-- actually defined in dom3ls -->
   <li value=82><dfn id=serialize_err><code>SERIALIZE_ERR</code></dfn></li> <!-- actually defined in dom3ls -->
  </ol><div class=impl>

  <h4 id=garbage-collection><span class=secno>2.7.9 </span>Garbage collection</h4>

  <p>There is an <dfn id=implied-strong-reference>implied strong reference</dfn> from any IDL
  attribute that returns a pre-existing object to that object.</p>

  <div class=example>

   <p>For example, the <code>document.location</code> attribute means
   that there is a strong reference from a <code><a href=#document>Document</a></code>
   object to its <code><a href=#location>Location</a></code> object. Similarly, there is
   always a strong reference from a <code><a href=#document>Document</a></code> to any
   descendant nodes, and from any node to its owner
   <code><a href=#document>Document</a></code>.</p>

  </div>

  </div>


  <h3 id=namespaces><span class=secno>2.8 </span>Namespaces</h3>

  <p>The <dfn id=html-namespace-0>HTML namespace</dfn> is: <code>http://www.w3.org/1999/xhtml</code></p>

  <p>The <dfn id=mathml-namespace>MathML namespace</dfn> is: <code>http://www.w3.org/1998/Math/MathML</code></p>

  <p>The <dfn id=svg-namespace>SVG namespace</dfn> is: <code>http://www.w3.org/2000/svg</code></p>

  <p>The <dfn id=xlink-namespace>XLink namespace</dfn> is: <code>http://www.w3.org/1999/xlink</code></p>

  <p>The <dfn id=xml-namespace>XML namespace</dfn> is: <code>http://www.w3.org/XML/1998/namespace</code></p>

  <p>The <dfn id=xmlns-namespace>XMLNS namespace</dfn> is: <code>http://www.w3.org/2000/xmlns/</code></p>

  <hr><p>Data mining tools and other user agents that perform operations
  on content without running scripts, evaluating CSS or XPath
  expressions, or otherwise exposing the resulting DOM to arbitrary
  content, may "support namespaces" by just asserting that their DOM
  node analogues are in certain namespaces, without actually exposing
  the above strings.</p>


  <h2 id=dom><span class=secno>3 </span>Semantics, structure, and APIs of HTML documents</h2>

  <h3 id=documents><span class=secno>3.1 </span>Documents</h3>

  <p>Every XML and HTML document in an HTML UA is represented by a
  <code><a href=#document>Document</a></code> object. <a href=#refsDOMCORE>[DOMCORE]</a></p>

  <p><dfn id="the-document's-address">The document's address</dfn> is an <a href=#absolute-url>absolute URL</a>
  that is set when the <code><a href=#document>Document</a></code> is created. <dfn id="the-document's-current-address">The
  document's current address</dfn> is an <a href=#absolute-url>absolute URL</a>
  that can change during the lifetime of the <code><a href=#document>Document</a></code>,
  for example when the user <a href=#navigate title=navigate>navigates</a> to
  a <a href=#scroll-to-fragid title=navigate-fragid>fragment identifier</a> on the
  page or when the <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> method is called
  with a new <a href=#url>URL</a>. <span class=impl><a href="#the-document's-current-address">The document's
  current address</a> must be set to <a href="#the-document's-address">the document's
  address</a> when the <code><a href=#document>Document</a></code> is created.</span></p>

  <p class=note>Interactive user agents typically expose <a href="#the-document's-current-address">the
  document's current address</a> in their user interface.</p>

  <p>When a <code><a href=#document>Document</a></code> is created by a <a href=#concept-script title=concept-script>script</a> using the <code title=dom-DOMImplementation-createDocument><a href=#dom-domimplementation-createdocument>createDocument()</a></code>
  or <code title=dom-DOMHTMLImplementation-createHTMLDocument><a href=#dom-domhtmlimplementation-createhtmldocument>createHTMLDocument()</a></code>
  APIs, <a href="#the-document's-address">the document's address</a> is the same as <a href="#the-document's-address">the
  document's address</a> of the <a href="#script's-document">script's document</a>.</p>

  <p><code><a href=#document>Document</a></code> objects are assumed to be <dfn id=xml-documents>XML
  documents</dfn> unless they are flagged as being <dfn id=html-documents>HTML
  documents</dfn> when they are created. Whether a document is an
  <a href=#html-documents title="HTML documents">HTML document</a> or an <a href=#xml-documents title="XML documents">XML document</a> affects the behavior of
  certain APIs and the case-sensitivity of some selectors.</p>



  <h4 id=documents-in-the-dom><span class=secno>3.1.1 </span>Documents in the DOM</h4>

  <p>All <code><a href=#document>Document</a></code> objects (in user agents implementing
  this specification) <span class=impl>must</span> also implement
  the <code><a href=#htmldocument>HTMLDocument</a></code> interface, available using
  binding-specific methods. (This is the case whether or not the
  document in question is an <a href=#html-documents title="HTML documents">HTML
  document</a> or indeed whether it contains any <a href=#html-elements>HTML
  elements</a> at all.) <code><a href=#document>Document</a></code> objects <span class=impl>must</span> also implement the document-level interface
  of any other namespaces that the UA supports.</p>

  <p class=example>For example, if an HTML implementation also
  supports SVG, then the <code><a href=#document>Document</a></code> object implements both
  <code><a href=#htmldocument>HTMLDocument</a></code> and <code>SVGDocument</code>.</p>

  <p class=note>Because the <code><a href=#htmldocument>HTMLDocument</a></code> interface is
  now obtained using binding-specific casting methods instead of
  simply being the primary interface of the document object, it is no
  longer defined as inheriting from <code><a href=#document>Document</a></code>.</p>

  <pre class=idl>[OverrideBuiltins]
interface <dfn id=htmldocument>HTMLDocument</dfn> {
  // <a href=#resource-metadata-management>resource metadata management</a>
  [PutForwards=<a href=#dom-location-href title=dom-location-href>href</a>] readonly attribute <a href=#location>Location</a> <a href=#dom-document-location title=dom-document-location>location</a>;
  readonly attribute DOMString <a href=#dom-document-url title=dom-document-URL>URL</a>;
           attribute DOMString <a href=#dom-document-domain title=dom-document-domain>domain</a>;
  readonly attribute DOMString <a href=#dom-document-referrer title=dom-document-referrer>referrer</a>;
           attribute DOMString <a href=#dom-document-cookie title=dom-document-cookie>cookie</a>;
  readonly attribute DOMString <a href=#dom-document-lastmodified title=dom-document-lastModified>lastModified</a>;
  readonly attribute DOMString <a href=#dom-document-compatmode title=dom-document-compatMode>compatMode</a>;
           attribute DOMString <a href=#dom-document-charset title=dom-document-charset>charset</a>;
  readonly attribute DOMString <a href=#dom-document-characterset title=dom-document-characterSet>characterSet</a>;
  readonly attribute DOMString <a href=#dom-document-defaultcharset title=dom-document-defaultCharset>defaultCharset</a>;
  readonly attribute DOMString <a href=#dom-document-readystate title=dom-document-readyState>readyState</a>;

  // <a href=#dom-tree-accessors>DOM tree accessors</a>
  <a href=#dom-document-nameditem title=dom-document-namedItem>getter</a> any (in DOMString name);
           attribute DOMString <a href=#document.title title=dom-document-title>title</a>;
           attribute DOMString <a href=#dom-document-dir title=dom-document-dir>dir</a>;
           attribute <a href=#htmlelement>HTMLElement</a> <a href=#dom-document-body title=dom-document-body>body</a>;
  readonly attribute <a href=#htmlheadelement>HTMLHeadElement</a> <a href=#dom-document-head title=dom-document-head>head</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-images title=dom-document-images>images</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-embeds title=dom-document-embeds>embeds</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-plugins title=dom-document-plugins>plugins</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-links title=dom-document-links>links</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-forms title=dom-document-forms>forms</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-scripts title=dom-document-scripts>scripts</a>;
  NodeList <a href=#dom-document-getelementsbyname title=dom-document-getElementsByName>getElementsByName</a>(in DOMString elementName);
  NodeList <a href=#dom-document-getelementsbyclassname title=dom-document-getElementsByClassName>getElementsByClassName</a>(in DOMString classNames);
  NodeList <a href=#dom-document-getitems title=dom-document-getItems>getItems</a>(in optional DOMString typeNames); // <a href=#microdata>microdata</a> <!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION-->

  // <a href=#dynamic-markup-insertion>dynamic markup insertion</a>
           attribute DOMString <a href=#dom-innerhtml title=dom-innerHTML>innerHTML</a>;
  <a href=#htmldocument>HTMLDocument</a> <a href=#dom-document-open title=dom-document-open>open</a>(in optional DOMString type, in optional DOMString replace);
  <a href=#windowproxy>WindowProxy</a> <a href=#dom-document-open title=dom-document-open>open</a>(in DOMString url, in DOMString name, in DOMString features, in optional boolean replace);
  void <a href=#dom-document-close title=dom-document-close>close</a>();
  void <a href=#dom-document-write title=dom-document-write>write</a>(in DOMString... text);
  void <a href=#dom-document-writeln title=dom-document-writeln>writeln</a>(in DOMString... text);

  // <a href=#editing>user interaction</a>
  readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-document-defaultview title=dom-document-defaultView>defaultView</a>;
  <a href=#selection-0>Selection</a> <a href=#dom-document-getselection title=dom-document-getSelection>getSelection</a>();
  readonly attribute <a href=#element>Element</a> <a href=#dom-document-activeelement title=dom-document-activeElement>activeElement</a>;
  boolean <a href=#dom-document-hasfocus title=dom-document-hasFocus>hasFocus</a>();
           attribute DOMString <a href=#designMode title=dom-document-designMode>designMode</a>;
  boolean <a href=#execCommand title=dom-document-execCommand>execCommand</a>(in DOMString commandId);
  boolean <a href=#execCommand title=dom-document-execCommand>execCommand</a>(in DOMString commandId, in boolean showUI);
  boolean <a href=#execCommand title=dom-document-execCommand>execCommand</a>(in DOMString commandId, in boolean showUI, in DOMString value);
  boolean <a href=#dom-document-querycommandenabled title=dom-document-queryCommandEnabled>queryCommandEnabled</a>(in DOMString commandId);
  boolean <a href=#dom-document-querycommandindeterm title=dom-document-queryCommandIndeterm>queryCommandIndeterm</a>(in DOMString commandId);
  boolean <a href=#dom-document-querycommandstate title=dom-document-queryCommandState>queryCommandState</a>(in DOMString commandId);
  boolean <a href=#dom-document-querycommandsupported title=dom-document-queryCommandSupported>queryCommandSupported</a>(in DOMString commandId);
  DOMString <a href=#dom-document-querycommandvalue title=dom-document-queryCommandValue>queryCommandValue</a>(in DOMString commandId);
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-commands title=dom-document-commands>commands</a>;

  // <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
           attribute <a href=#function>Function</a> <a href=#handler-onabort title=handler-onabort>onabort</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onblur title=handler-onblur>onblur</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onchange title=handler-onchange>onchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onclick title=handler-onclick>onclick</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondrag title=handler-ondrag>ondrag</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragend title=handler-ondragend>ondragend</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragenter title=handler-ondragenter>ondragenter</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragleave title=handler-ondragleave>ondragleave</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragover title=handler-ondragover>ondragover</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragstart title=handler-ondragstart>ondragstart</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondrop title=handler-ondrop>ondrop</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondurationchange title=handler-ondurationchange>ondurationchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onemptied title=handler-onemptied>onemptied</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onended title=handler-onended>onended</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onerror title=handler-onerror>onerror</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onfocus title=handler-onfocus>onfocus</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onformchange title=handler-onformchange>onformchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onforminput title=handler-onforminput>onforminput</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oninput title=handler-oninput>oninput</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oninvalid title=handler-oninvalid>oninvalid</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onkeydown title=handler-onkeydown>onkeydown</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onkeypress title=handler-onkeypress>onkeypress</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onkeyup title=handler-onkeyup>onkeyup</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onload title=handler-onload>onload</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onloadeddata title=handler-onloadeddata>onloadeddata</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onloadedmetadata title=handler-onloadedmetadata>onloadedmetadata</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onloadstart title=handler-onloadstart>onloadstart</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmousedown title=handler-onmousedown>onmousedown</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmousemove title=handler-onmousemove>onmousemove</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmouseout title=handler-onmouseout>onmouseout</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmouseover title=handler-onmouseover>onmouseover</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmouseup title=handler-onmouseup>onmouseup</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmousewheel title=handler-onmousewheel>onmousewheel</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onpause title=handler-onpause>onpause</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onplay title=handler-onplay>onplay</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onplaying title=handler-onplaying>onplaying</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onprogress title=handler-onprogress>onprogress</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onratechange title=handler-onratechange>onratechange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onreadystatechange title=handler-onreadystatechange>onreadystatechange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onscroll title=handler-onscroll>onscroll</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onseeked title=handler-onseeked>onseeked</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onseeking title=handler-onseeking>onseeking</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onselect title=handler-onselect>onselect</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onshow title=handler-onshow>onshow</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onstalled title=handler-onstalled>onstalled</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onsubmit title=handler-onsubmit>onsubmit</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onsuspend title=handler-onsuspend>onsuspend</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ontimeupdate title=handler-ontimeupdate>ontimeupdate</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onvolumechange title=handler-onvolumechange>onvolumechange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onwaiting title=handler-onwaiting>onwaiting</a>;
};
<a href=#document>Document</a> implements <a href=#htmldocument>HTMLDocument</a>;</pre>

  <p>Since the <code><a href=#htmldocument>HTMLDocument</a></code> interface holds methods and
  attributes related to a number of disparate features, the members of
  this interface are described in various different sections.</p>


  <h4 id=security-document><span class=secno>3.1.2 </span>Security</h4>

  <p id=security>User agents <span class=impl>must</span> raise a
  <code><a href=#security_err>SECURITY_ERR</a></code> exception whenever any of the members of
  an <code><a href=#htmldocument>HTMLDocument</a></code> object are accessed by scripts whose
  <a href=#effective-script-origin>effective script origin</a> is not the <a href=#same-origin title="same
  origin">same</a> as the <code><a href=#document>Document</a></code>'s <a href=#effective-script-origin>effective
  script origin</a>.</p>



  <h4 id=resource-metadata-management><span class=secno>3.1.3 </span><dfn>Resource metadata management</dfn></h4>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-URL><a href=#dom-document-url>URL</a></code></dt>
   <dd>
    <p>Returns <a href="#the-document's-address">the document's address</a>.</p>
   </dd>

   <dt><var title="">document</var> . <code title=dom-document-referrer><a href=#dom-document-referrer>referrer</a></code></dt>
   <dd>
    <p>Returns <a href="#the-document's-current-address" title="the document's current address">the
    address</a> of the <code><a href=#document>Document</a></code> from which the user
    navigated to this one, unless it was blocked or there was no such
    document, in which case it returns the empty string.</p>
    <p>The <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> link
    type can be used to block the referrer.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-url title=dom-document-URL><code>URL</code></dfn>
  attribute must return <a href="#the-document's-address">the document's address</a>.</p>

  <p>The <dfn id=dom-document-referrer title=dom-document-referrer><code>referrer</code></dfn> attribute
  must return either the <a href="#the-document's-current-address" title="the document's current
  address">current address</a> of the <a href=#active-document>active document</a>
  of the <a href=#source-browsing-context>source browsing context</a> <em>at the time the
  navigation was started</em> (that is, the page which <a href=#navigate title=navigate>navigated</a> the <a href=#browsing-context>browsing context</a>
  to the current document), with any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component removed; or
  the empty string if there is no such originating page, or if the UA
  has been configured not to report referrers in this case, or if the
  navigation was initiated for a <a href=#hyperlink>hyperlink</a> with a <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword.</p>

  </div>

  <p class=note>In the case of HTTP, the <code title=dom-document-referrer><a href=#dom-document-referrer>referrer</a></code> IDL attribute will
  match the <code title=http-referer>Referer</code> (sic) header
  that was sent when <a href=#fetch title=fetch>fetching</a> the current
  page.</p>

  <p class=note>Typically user agents are configured to not report
  referrers in the case where the referrer uses an encrypted protocol
  and the current page does not (e.g. when navigating from an <code title="">https:</code> page to an <code title="">http:</code>
  page).</p>

  <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-cookie><a href=#dom-document-cookie>cookie</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the HTTP cookies that apply to the
    <code><a href=#document>Document</a></code>. If there are no cookies or cookies can't be
    applied to this resource, the empty string will be returned.</p>
    <p>Can be set, to add a new cookie to the element's set of HTTP
    cookies.</p>
    <p>If the contents are <a href=#sandboxed-origin-browsing-context-flag title="sandboxed origin browsing
    context flag">sandboxed into a unique origin</a> (in an
    <code><a href=#the-iframe-element>iframe</a></code> with the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute) or the
    resource was labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>, a
    <code><a href=#security_err>SECURITY_ERR</a></code> exception will be thrown on getting and
    setting.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-cookie title=dom-document-cookie><code>cookie</code></dfn>
  attribute represents the cookies of the resource from which the
  <code><a href=#document>Document</a></code> was created.</p>

  <p>Some <code><a href=#document>Document</a></code> objects are <dfn id=cookie-free-document-object title="cookie-free
  Document object">cookie-free <code>Document</code>
  objects</dfn>. Any <code><a href=#document>Document</a></code> object created by the <code title="">createDocument()</code> or <code title=dom-DOMHTMLImplementation-createHTMLDocument><a href=#dom-domhtmlimplementation-createhtmldocument>createHTMLDocument()</a></code>
  factory methods is a <a href=#cookie-free-document-object>cookie-free <code>Document</code>
  object</a>. Any <code><a href=#document>Document</a></code> whose <a href="#the-document's-address" title="the
  document's address">address</a> does not use a server-based
  naming authority is a <a href=#cookie-free-document-object>cookie-free <code>Document</code>
  object</a>. Other specifications can also define
  <code><a href=#document>Document</a></code> objects as being <a href=#cookie-free-document-object title="cookie-free
  Document object">cookie-free <code>Document</code>
  objects</a>.</p>

  <p id=sandboxCookies>On getting, if the document is a
  <a href=#cookie-free-document-object>cookie-free <code>Document</code> object</a>, then the user
  agent must return the empty string. Otherwise, if the
  <code><a href=#document>Document</a></code>'s <a href=#origin>origin</a> is not a
  scheme/host/port tuple, the user agent must raise a
  <code><a href=#security_err>SECURITY_ERR</a></code> exception. Otherwise, the user agent must
  first <a href=#obtain-the-storage-mutex>obtain the storage mutex</a> and then return the
  cookie-string for <a href="#the-document's-address">the document's address</a> for a
  "non-HTTP" API. <a href=#refsCOOKIES>[COOKIES]</a></p>

  <p>On setting, if the document is a <a href=#cookie-free-document-object>cookie-free
  <code>Document</code> object</a>, then the user agent must do
  nothing. Otherwise, if the <code><a href=#document>Document</a></code>'s
  <a href=#origin>origin</a> is not a scheme/host/port tuple, the user agent
  must raise a <code><a href=#security_err>SECURITY_ERR</a></code> exception. Otherwise, the
  user agent must <a href=#obtain-the-storage-mutex>obtain the storage mutex</a> and then act
  as it would when <span title="receives a
  set-cookie-string">receiving a set-cookie-string</span> for
  <a href="#the-document's-address">the document's address</a> via a "non-HTTP" API, consisting
  of the new value. <a href=#refsCOOKIES>[COOKIES]</a></p>

  <p class=note>Since the <code title=dom-document-cookie><a href=#dom-document-cookie>cookie</a></code> attribute is accessible
  across frames, the path restrictions on cookies are only a tool to
  help manage which cookies are sent to which parts of the site, and
  are not in any way a security feature.</p>

  <hr></div>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-lastmodified><a href=#dom-document-lastmodified>lastModified</a></code></dt>
   <dd>
    <p>Returns the date of the last modification to the document, as
    reported by the server, in the form "<code title="">MM/DD/YYYY&nbsp;hh:mm:ss</code>", in the user's local
    time zone.</p>
    <p>If the last modification date is not known, the current time is
    returned instead.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-lastmodified title=dom-document-lastModified><code>lastModified</code></dfn>
  attribute, on getting, must return the date and time of the
  <code><a href=#document>Document</a></code>'s source file's last modification, in the
  user's local time zone, in the following format:</p>

  <ol><li> The month component of the date. </li>

   <li> A U+002F SOLIDUS character (/). </li>

   <li> The day component of the date. </li>

   <li> A U+002F SOLIDUS character (/). </li>

   <li> The year component of the date. </li>

   <li> A U+0020 SPACE character. </li>

   <li> The hours component of the time. </li>

   <li> A U+003A COLON character (:). </li>

   <li> The minutes component of the time. </li>

   <li> A U+003A COLON character (:). </li>

   <li> The seconds component of the time. </li>

  </ol><p>All the numeric components above, other than the year, must be
  given as two digits in the range U+0030 DIGIT ZERO (0) to U+0039
  DIGIT NINE (9) representing the number in base ten, zero-padded if
  necessary. The year must be given as the shortest possible string of
  four or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
  DIGIT NINE (9) representing the number in base ten, zero-padded if
  necessary.</p>

  <p>The <code><a href=#document>Document</a></code>'s source file's last modification date
  and time must be derived from relevant features of the networking
  protocols used, e.g. from the value of the HTTP <code title=http-last-modified>Last-Modified</code> header of the
  document, or from metadata in the file system for local files. If
  the last modification date and time are not known, the attribute
  must return the current date and time in the above format.</p>

  <hr></div>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-compatmode><a href=#dom-document-compatmode>compatMode</a></code></dt>
   <dd>
    <p>In a conforming document, returns the string "<code title="">CSS1Compat</code>". (In <a href=#quirks-mode>quirks mode</a>
    documents, returns the string "<code title="">BackCompat</code>",
    but a conforming document can never trigger <a href=#quirks-mode>quirks
    mode</a>.)</p>
   </dd>

  </dl><div class=impl>

  <p>A <code><a href=#document>Document</a></code> is always set to one of three modes:
  <dfn id=no-quirks-mode>no-quirks mode</dfn>, the default; <dfn id=quirks-mode>quirks mode</dfn>, used
  typically for legacy documents; and <dfn id=limited-quirks-mode>limited-quirks mode</dfn>,
  also known as "almost standards" mode. The mode is only ever changed
  from the default by the <a href=#html-parser>HTML parser</a>, based on the
  presence, absence, or value of the DOCTYPE string.</p>

  <p>The <dfn id=dom-document-compatmode title=dom-document-compatMode><code>compatMode</code></dfn> IDL
  attribute must return the literal string "<code title="">CSS1Compat</code>" unless the document has been set to
  <a href=#quirks-mode>quirks mode</a> by the <a href=#html-parser>HTML parser</a>, in which
  case it must instead return the literal string "<code title="">BackCompat</code>".</p>

  <hr></div>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-charset><a href=#dom-document-charset>charset</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the <a href="#document's-character-encoding">document's character encoding</a>.</p>
    <p>Can be set, to dynamically change the <a href="#document's-character-encoding">document's
    character encoding</a>.</p>
    <p>New values that are not IANA-registered aliases supported by the user agent are ignored.</p>
   </dd>

   <dt><var title="">document</var> . <code title=dom-document-characterSet><a href=#dom-document-characterset>characterSet</a></code></dt>
   <dd>
    <p>Returns the <a href="#document's-character-encoding">document's character encoding</a>.</p>
   </dd>

   <dt><var title="">document</var> . <code title=dom-document-defaultCharset><a href=#dom-document-defaultcharset>defaultCharset</a></code></dt>
   <dd>
    <p>Returns what might be the user agent's default character
    encoding. (The user agent might return another character encoding
    altogether, e.g. to protect the user's privacy, or if the user
    agent doesn't use a single default encoding.)</p>
   </dd>

  </dl><div class=impl>

  <p>Documents have an associated <dfn id="document's-character-encoding" title="document's character
  encoding">character encoding</dfn>. When a <code><a href=#document>Document</a></code>
  object is created, the <a href="#document's-character-encoding">document's character encoding</a>
  must be initialized to UTF-16. Various algorithms during page
  loading affect this value, as does the <code title=dom-document-charset><a href=#dom-document-charset>charset</a></code> setter. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>

  <p>The <dfn id=dom-document-charset title=dom-document-charset><code>charset</code></dfn>
  IDL attribute must, on getting, return the <a href=#preferred-mime-name>preferred MIME
  name</a> of the <a href="#document's-character-encoding">document's character encoding</a>. On
  setting, if the new value is an IANA-registered alias for a
  character encoding supported by the user agent, the <a href="#document's-character-encoding">document's
  character encoding</a> must be set to that character
  encoding. (Otherwise, nothing happens.)</p>

  <p>The <dfn id=dom-document-characterset title=dom-document-characterSet><code>characterSet</code></dfn>
  IDL attribute must, on getting, return the <a href=#preferred-mime-name>preferred MIME
  name</a> of the <a href="#document's-character-encoding">document's character encoding</a>.</p>

  <p>The <dfn id=dom-document-defaultcharset title=dom-document-defaultCharset><code>defaultCharset</code></dfn>
  IDL attribute must, on getting, return the <a href=#preferred-mime-name>preferred MIME
  name</a> of a character encoding, possibly the user's default
  encoding, or an encoding associated with the user's current
  geographical location, or any arbitrary encoding name.</p>

  <hr></div>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-readyState><a href=#dom-document-readystate>readyState</a></code></dt>
   <dd>
    <p>Returns "loading" while the <code><a href=#document>Document</a></code> is loading, and "complete" once it has loaded.</p>
    <p>The <code title=event-readystatechange>readystatechange</code> event fires on the <code><a href=#document>Document</a></code> object when this value changes.</p>
   </dd>

  </dl><div class=impl>

  <p>Each document has a <dfn id=current-document-readiness>current document readiness</dfn>. When a
  <code><a href=#document>Document</a></code> object is created, it must have its
  <a href=#current-document-readiness>current document readiness</a> set to the string "loading"
  if the document is associated with an <a href=#html-parser>HTML parser</a> or an
  <a href=#xml-parser>XML parser</a>, or to the string "complete"
  otherwise. Various algorithms during page loading affect this
  value. When the value is set, the user agent must <a href=#fire-a-simple-event>fire a
  simple event</a> named <code title=event-readystatechange>readystatechange</code> at the
  <code><a href=#document>Document</a></code> object.</p>

  <p>A <code><a href=#document>Document</a></code> is said to have an <dfn id=active-parser>active
  parser</dfn> if it is associated with an <a href=#html-parser>HTML parser</a> or
  an <a href=#xml-parser>XML parser</a> that has not yet been <a href=#stop-parsing title="stop
  parsing">stopped</a> or aborted.</p>

  <p>The <dfn id=dom-document-readystate title=dom-document-readyState><code>readyState</code></dfn> IDL
  attribute must, on getting, return the <a href=#current-document-readiness>current document
  readiness</a>.</p>

  </div>



  <h4 id=dom-tree-accessors><span class=secno>3.1.4 </span><dfn>DOM tree accessors</dfn></h4>

  <p><dfn id=the-html-element>The <code>html</code> element</dfn> of a document is the
  document's root element, if there is one and it's an
  <code><a href=#the-html-element-0>html</a></code> element, or null otherwise.</p>

  <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-head><a href=#dom-document-head>head</a></code></dt>
   <dd>
    <p>Returns <a href=#the-head-element>the <code>head</code> element</a>.</p>
   </dd>

  </dl><p><dfn id=the-head-element>The <code>head</code> element</dfn> of a document is the
  first <code><a href=#the-head-element-0>head</a></code> element that is a child of <a href=#the-html-element>the
  <code>html</code> element</a>, if there is one, or null
  otherwise.</p>

  <div class=impl>

  <p>The <dfn id=dom-document-head title=dom-document-head><code>head</code></dfn>
  attribute, on getting, must return <a href=#the-head-element>the <code>head</code>
  element</a> of the document (a <code><a href=#the-head-element-0>head</a></code> element or
  null).</p>

  </div>

  <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-title><a href=#document.title>title</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the document's title, as given by <a href=#the-title-element>the
    <code>title</code> element</a>.</p>
    <p>Can be set, to update the document's title. If there is no
    <a href=#the-head-element title="the head element"><code>head</code> element</a>,
    the new value is ignored.</p>
    <p>In SVG documents, the <code>SVGDocument</code> interface's
    <code title=dom-svg-title>title</code> attribute takes
    precedence.</p>
   </dd>

  </dl><p><dfn id=the-title-element>The <code>title</code> element</dfn> of a document is the
  first <code><a href=#the-title-element-0>title</a></code> element in the document (in tree order), if
  there is one, or null otherwise.</p>

  <div class=impl>

  <p>The <dfn id=document.title title=dom-document-title><code>title</code></dfn> attribute must,
  on getting, run the following algorithm:</p>

  <ol><li><p>If the <a href=#root-element>root element</a> is an <code><a href=#svg>svg</a></code>
   element in the "<code title="">http://www.w3.org/2000/svg</code>"
   namespace, and the user agent supports SVG, then return the value
   that would have been returned by the IDL attribute of the same name
   on the <code>SVGDocument</code> interface. <a href=#refsSVG>[SVG]</a></li>

   <li><p>Otherwise, let <var title="">value</var> be a concatenation
   of the data of all the child <a href=#text-node title="text node">text
   nodes</a> of <a href=#the-title-element>the <code>title</code> element</a>, in
   <a href=#tree-order>tree order</a>, or the empty string if <a href=#the-title-element>the
   <code>title</code> element</a> is null.</li>

   <li><p>Replace any sequence of one or more consecutive <a href=#space-character title="space character">space characters</a> in <var title="">value</var> with a single U+0020 SPACE character.</li>

   <li><p>Remove any leading or trailing <a href=#space-character title="space
   character">space characters</a> in <var title="">value</var>.</li>

   <li><p>Return <var title="">value</var>.</li>

  </ol><p>On setting, the following algorithm must be run. Mutation events
  must be fired as appropriate.</p>

  <ol><li><p>If the <a href=#root-element>root element</a> is an <code><a href=#svg>svg</a></code>
   element in the "<code title="">http://www.w3.org/2000/svg</code>"
   namespace, and the user agent supports SVG, then the setter must
   defer to the setter for the IDL attribute of the same name on the
   <code>SVGDocument</code> interface (if it is readonly, then this
   will raise an exception). Stop the algorithm here. <a href=#refsSVG>[SVG]</a></li>

   <li>If <a href=#the-title-element>the <code>title</code> element</a> is null and
   <a href=#the-head-element>the <code>head</code> element</a> is null, then the
   attribute must do nothing. Stop the algorithm here.</li>

   <li>If <a href=#the-title-element>the <code>title</code> element</a> is null, then a
   new <code><a href=#the-title-element-0>title</a></code> element must be created and appended to
   <a href=#the-head-element>the <code>head</code> element</a>. Let <var title="">element</var> be that element. Otherwise, let <var title="">element</var> be <a href=#the-title-element>the <code>title</code>
   element</a>.</li>

   <li>The children of <var title="">element</var> (if any) must all
   be removed.</li>

   <li>A single <code><a href=#text>Text</a></code> node whose data is the new value
   being assigned must be appended to <var title="">element</var>.</li>

  </ol><p>The <code title=dom-document-title><a href=#document.title>title</a></code> attribute on
  the <code><a href=#htmldocument>HTMLDocument</a></code> interface should shadow the attribute
  of the same name on the <code>SVGDocument</code> interface when the
  user agent supports both HTML and SVG. <a href=#refsSVG>[SVG]</a></p>

  </div>

  <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-body><a href=#dom-document-body>body</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns <a href=#the-body-element>the body element</a>.</p>
    <p>Can be set, to replace <a href=#the-body-element>the body element</a>.</p>
    <p>If the new value is not a <code><a href=#the-body-element-0>body</a></code> or <code><a href=#frameset>frameset</a></code> element, this will throw a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   </dd>

  </dl><p><dfn id=the-body-element>The body element</dfn> of a document is the first child of
  <a href=#the-html-element>the <code>html</code> element</a> that is either a
  <code><a href=#the-body-element-0>body</a></code> element or a <code><a href=#frameset>frameset</a></code> element. If
  there is no such element, it is null. <span class=impl>If the body
  element is null, then when the specification requires that events be
  fired at "the body element", they must instead be fired at the
  <code><a href=#document>Document</a></code> object.</span></p>

  <div class=impl>

  <p>The <dfn id=dom-document-body title=dom-document-body><code>body</code></dfn>
  attribute, on getting, must return <a href=#the-body-element>the body element</a> of
  the document (either a <code><a href=#the-body-element-0>body</a></code> element, a
  <code><a href=#frameset>frameset</a></code> element, or null). On setting, the following
  algorithm must be run:</p>

  <ol><!-- if changes are requested:
    http://lxr.mozilla.org/seamonkey/source/content/html/document/src/nsHTMLDocument.cpp
    search for ::GetBody ::SetBody
    http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/html/HTMLDocument.cpp
    search for ::setBody
    http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/dom/Document.cpp
    search for ::body
   --><li>If the new value is not a <code><a href=#the-body-element-0>body</a></code> or
   <code><a href=#frameset>frameset</a></code> element, then raise a
   <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception and abort these
   steps.</li>

   <li>Otherwise, if the new value is the same as <a href=#the-body-element>the body
   element</a>, do nothing. Abort these steps.</li>

   <li>Otherwise, if <a href=#the-body-element>the body element</a> is not null, then
   replace that element with the new value in the DOM, as if the root
   element's <code title="">replaceChild()</code> method had been
   called with the new value and <a href=#the-body-element title="the body element">the
   incumbent body element</a> as its two arguments respectively,
   then abort these steps.</li>

   <li>Otherwise, <a href=#the-body-element>the body element</a> is null. Append
   the new value to the root element.</li>

  </ol></div>

  <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-images><a href=#dom-document-images>images</a></code></dt>
   <dd>
    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-img-element>img</a></code> elements in the <code><a href=#document>Document</a></code>.</p>
   </dd>

   <dt><var title="">document</var> . <code title=dom-document-embeds><a href=#dom-document-embeds>embeds</a></code></dt>
   <dt><var title="">document</var> . <code title=dom-document-plugins><a href=#dom-document-plugins>plugins</a></code></dt>
   <dd>
    <p>Return an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-embed-element>embed</a></code> elements in the <code><a href=#document>Document</a></code>.</p>
   </dd>

   <dt><var title="">document</var> . <code title=dom-document-links><a href=#dom-document-links>links</a></code></dt>
   <dd>
    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements in the <code><a href=#document>Document</a></code> that have <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes.</p>
   </dd>

   <dt><var title="">document</var> . <code title=dom-document-forms><a href=#dom-document-forms>forms</a></code></dt>
   <dd>
    <p>Return an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-form-element>form</a></code> elements in the <code><a href=#document>Document</a></code>.</p>
   </dd>

   <dt><var title="">document</var> . <code title=dom-document-scripts><a href=#dom-document-scripts>scripts</a></code></dt>
   <dd>
    <p>Return an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#script>script</a></code> elements in the <code><a href=#document>Document</a></code>.</p>
   </dd>

  </dl><div class=impl>

  <!-- these all return the same object each time because of a rule in
  the collection section -->

  <p>The <dfn id=dom-document-images title=dom-document-images><code>images</code></dfn>
  attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches only
  <code><a href=#the-img-element>img</a></code> elements.</p>

  <p>The <dfn id=dom-document-embeds title=dom-document-embeds><code>embeds</code></dfn>
  attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches only
  <code><a href=#the-embed-element>embed</a></code> elements.</p>

  <p>The <dfn id=dom-document-plugins title=dom-document-plugins><code>plugins</code></dfn>
  attribute must return the same object as that returned by the <code title=dom-document-embeds><a href=#dom-document-embeds>embeds</a></code> attribute.</p>

  <p>The <dfn id=dom-document-links title=dom-document-links><code>links</code></dfn>
  attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches only <code><a href=#the-a-element>a</a></code>
  elements with <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
  attributes and <code><a href=#the-area-element>area</a></code> elements with <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes.</p>

  <p>The <dfn id=dom-document-forms title=dom-document-forms><code>forms</code></dfn>
  attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches only
  <code><a href=#the-form-element>form</a></code> elements.</p>

  <p>The <dfn id=dom-document-scripts title=dom-document-scripts><code>scripts</code></dfn>
  attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches only
  <code><a href=#script>script</a></code> elements.</p>

  <hr></div>

  <dl class=domintro><dt><var title="">collection</var> = <var title="">document</var> . <code title=dom-document-getElementsByName><a href=#dom-document-getelementsbyname>getElementsByName</a></code>(<var title="">name</var>)</dt>
   <dd>
    <p>Returns a <code><a href=#nodelist>NodeList</a></code> of elements in the
    <code><a href=#document>Document</a></code> that have a <code title="">name</code>
    attribute with the value <var title="">name</var>.</p>
   </dd>

   <dt><var title="">collection</var> = <var title="">document</var> . <code title=dom-document-getElementsByClassName><a href=#dom-document-getelementsbyclassname>getElementsByClassName(<var title="">classes</var>)</a></code></dt>
   <dt><var title="">collection</var> = <var title="">element</var> . <code title=dom-getElementsByClassName><a href=#dom-getelementsbyclassname>getElementsByClassName(<var title="">classes</var>)</a></code></dt>
   <dd>
    <p>Returns a <code><a href=#nodelist>NodeList</a></code> of the elements in the object
    on which the method was invoked (a <code><a href=#document>Document</a></code> or an
    <code><a href=#element>Element</a></code>) that have all the classes given by <var title="">classes</var>.</p>
    <p>The <var title="">classes</var> argument is interpreted as a
    space-separated list of classes.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-getelementsbyname title=dom-document-getElementsByName><code>getElementsByName(<var title="">name</var>)</code></dfn> method takes a string <var title="">name</var>, and must return a <a href=#live>live</a>
  <code><a href=#nodelist>NodeList</a></code> containing all the <a href=#html-elements>HTML elements</a>
  in that document that have a <code title="">name</code> attribute
  whose value is equal to the <var title="">name</var> argument (in a
  <a href=#case-sensitive>case-sensitive</a> manner), in <a href=#tree-order>tree order</a>.
  When the method is invoked on a <code><a href=#document>Document</a></code> object again
  with the same argument, the user agent may return the same as the
  object returned by the earlier call. In other cases, a new
  <code><a href=#nodelist>NodeList</a></code> object must be returned.</p>

  <p>The <dfn id=dom-document-getelementsbyclassname title=dom-document-getElementsByClassName><code>getElementsByClassName(<var title="">classNames</var>)</code></dfn> method takes a string that
  contains a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a> representing
  classes. When called, the method must return a <a href=#live>live</a>
  <code><a href=#nodelist>NodeList</a></code> object containing all the elements in the
  document, in <a href=#tree-order>tree order</a>, that have all the classes
  specified in that argument, having obtained the classes by <a href=#split-a-string-on-spaces title="split a string on spaces">splitting a string on
  spaces</a>. (Duplicates are ignored.) If there are no tokens
  specified in the argument, then the method must return an empty
  <code><a href=#nodelist>NodeList</a></code>. If the document is in <a href=#quirks-mode>quirks
  mode</a>, then the comparisons for the classes must be done in an
  <a href=#ascii-case-insensitive>ASCII case-insensitive</a> manner, otherwise, the
  comparisons must be done in a <a href=#case-sensitive>case-sensitive</a> manner.
  When the method is invoked on a <code><a href=#document>Document</a></code> object again
  with the same argument, the user agent may return the same object as
  the object returned by the earlier call. In other cases, a new
  <code><a href=#nodelist>NodeList</a></code> object must be returned.</p>

  <p>The <dfn id=dom-getelementsbyclassname title=dom-getElementsByClassName><code>getElementsByClassName(<var title="">classNames</var>)</code></dfn> method on the
  <code><a href=#htmlelement>HTMLElement</a></code> interface must return a <a href=#live>live</a>
  <code><a href=#nodelist>NodeList</a></code> with the nodes that the
  <code><a href=#htmldocument>HTMLDocument</a></code> <code title=dom-document-getElementsByClassName><a href=#dom-document-getelementsbyclassname>getElementsByClassName()</a></code>
  method would return when passed the same argument(s), excluding any
  elements that are not descendants of the <code><a href=#htmlelement>HTMLElement</a></code>
  object on which the method was invoked.
  When the method is invoked on an <code><a href=#htmlelement>HTMLElement</a></code> object
  again with the same argument, the user agent may return the same
  object as the object returned by the earlier call. In other cases, a
  new <code><a href=#nodelist>NodeList</a></code> object must be returned.</p>

  </div>

  <p>HTML, SVG, and MathML elements define which classes they are in
  by having an attribute with no namespace with the name <code title="">class</code> containing a space-separated list of classes
  to which the element belongs. Other specifications may also allow
  elements in their namespaces to be labeled as being in specific
  classes.</p>

  <div class=example>

   <p>Given the following XHTML fragment:</p>

   <pre>&lt;div id="example"&gt;
 &lt;p id="p1" class="aaa bbb"/&gt;
 &lt;p id="p2" class="aaa ccc"/&gt;
 &lt;p id="p3" class="bbb ccc"/&gt;
&lt;/div&gt;</pre>

   <p>A call to <code title="">document.getElementById('example').getElementsByClassName('aaa')</code>
   would return a <code><a href=#nodelist>NodeList</a></code> with the two paragraphs <code title="">p1</code> and <code title="">p2</code> in it.</p>

   <p>A call to <code title="">getElementsByClassName('ccc&nbsp;bbb')</code> would only
   return one node, however, namely <code title="">p3</code>. A call
   to <code title="">document.getElementById('example').getElementsByClassName('bbb&nbsp;&nbsp;ccc&nbsp;')</code>
   would return the same thing.</p>

   <p>A call to <code title="">getElementsByClassName('aaa,bbb')</code> would return no
   nodes; none of the elements above are in the "aaa,bbb" class.</p>

  </div>

<!-- v2:
>         * xGetParentElementByClassName(rootElement, className, tagName) -
> Navigates upwards until we hit a parent element with the given class name and
> optional tag name.
-->

  <div class=impl>

  <hr><p>The <code><a href=#htmldocument>HTMLDocument</a></code> interface <span title="support
  named properties">supports named properties</span>. The <span>names
  of the supported named properties</span> at any moment consist of
  the values of the <code title=attr-name>name</code> content
  attributes of all the <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>,
  <code><a href=#the-form-element>form</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
  <a href=#fallback-free>fallback-free</a> <code><a href=#the-object-element>object</a></code> elements in the
  <code><a href=#document>Document</a></code> that have <code title=attr-name>name</code>
  content attributes, and the values of the <code title=attr-id><a href=#the-id-attribute>id</a></code> content attributes of all the
  <code><a href=#the-applet-element>applet</a></code> and <a href=#fallback-free>fallback-free</a>
  <code><a href=#the-object-element>object</a></code> elements in the <code><a href=#document>Document</a></code> that have
  <code title=attr-id><a href=#the-id-attribute>id</a></code> content attributes, and the values
  of the <code title=attr-id><a href=#the-id-attribute>id</a></code> content attributes of all the
  <code><a href=#the-img-element>img</a></code> elements in the <code><a href=#document>Document</a></code> that have
  both <code title=attr-name>name</code> content attributes and
  <code title=attr-id><a href=#the-id-attribute>id</a></code> content attributes.</p>

  <p>When <dfn id=dom-document-nameditem title=dom-document-namedItem>the
  <code>HTMLDocument</code> object is indexed for property
  retrieval</dfn> using a name <var title="">name</var>, then the user
  agent must return the value obtained using the following steps:</p>

  <ol><li>

    <p>Let <var title="">elements</var> be the list of <a href=#dom-document-nameditem-filter title=dom-document-namedItem-filter>named elements</a> with
    the name <var title="">name</var> in the <code><a href=#document>Document</a></code>.

    <p class=note>There will be at least one such element, by
    definition.<!-- (If there wasn't, then this algorithm wouldn't
    have been invoked by Web IDL.) --></p>

   </li>

   <li>

    <p>If <var title="">elements</var> has only one element, and that
    element is an <code><a href=#the-iframe-element>iframe</a></code> element, then return the
    <code><a href=#windowproxy>WindowProxy</a></code> object of the <a href=#nested-browsing-context>nested browsing
    context</a> represented by that <code><a href=#the-iframe-element>iframe</a></code> element,
    and abort these steps.</p>

   </li>

   <li>

    <p>Otherwise, if <var title="">elements</var> has only one
    element, return that element and abort these steps.</p>

   </li>

   <li>

    <p>Otherwise return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
    <code><a href=#document>Document</a></code> node, whose filter matches only <a href=#dom-document-nameditem-filter title=dom-document-namedItem-filter>named elements</a> with
    the name <var title="">name</var>.</p> <!-- the same one each time
    is returned, because of the rule under collections -->

   </li>

  <!--
  Note that this named getter overrides built-in properties, as in:
     http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A...%3Ciframe%20name%3Dbody%3E%3C%2Fiframe%3E%3Cscript%3Ew(document.body)%3C%2Fscript%3E
  This is what the "OverrideBuiltins" bit means in the IDL.
  -->

  </ol><p><dfn id=dom-document-nameditem-filter title=dom-document-nameditem-filter>Named elements</dfn>
  with the name <var title="">name</var>, for the purposes of the
  above algorithm, are those that are either:</p>

  <ul><li><code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>,
   <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or
   <a href=#fallback-free>fallback-free</a> <code><a href=#the-object-element>object</a></code> elements that have a
   <code title=attr-name>name</code> content attribute whose value
   is <var title="">name</var>, or</li>

   <li><code><a href=#the-applet-element>applet</a></code> or <a href=#fallback-free>fallback-free</a>
   <code><a href=#the-object-element>object</a></code> elements that have an <code title=attr-id><a href=#the-id-attribute>id</a></code> content attribute whose value is <var title="">name</var>, or</li>

   <li><code><a href=#the-img-element>img</a></code> elements that have an <code title=attr-id><a href=#the-id-attribute>id</a></code> content attribute whose value is <var title="">name</var>, and that have a <code title=attr-name>name</code> content attribute present also.</li>

  </ul><p>An <code><a href=#the-object-element>object</a></code> element is said to be
  <dfn id=fallback-free>fallback-free</dfn> if it has no <code><a href=#the-object-element>object</a></code> or
  <code><a href=#the-embed-element>embed</a></code> descendants.</p>

  </div>

  <hr><p class=note>The <code title=dom-document-dir><a href=#dom-document-dir>dir</a></code>
  attribute on the <code><a href=#htmldocument>HTMLDocument</a></code> interface is defined
  along with the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> content
  attribute.</p>



  <h4 id=creating-documents><span class=secno>3.1.5 </span>Creating documents</h4>

  <p><a href=#xml-documents>XML documents</a> can be created from script using the
  <code title=dom-DOMImplementation-createDocument><a href=#dom-domimplementation-createdocument>createDocument()</a></code>
  method on the <code><a href=#domimplementation>DOMImplementation</a></code> interface.</p>

  <p><a href=#html-documents>HTML documents</a> can be created using the <code title=dom-DOMHTMLImplementation-createHTMLDocument><a href=#dom-domhtmlimplementation-createhtmldocument>createHTMLDocument()</a></code>
  method:</p>

  <pre class=idl>[Supplemental, NoInterfaceObject]
interface <dfn id=domhtmlimplementation>DOMHTMLImplementation</dfn> {
  <a href=#document>Document</a> <a href=#dom-domhtmlimplementation-createhtmldocument title=dom-DOMHTMLImplementation-createHTMLDocument>createHTMLDocument</a>(in DOMString title);
};
<a href=#domimplementation>DOMImplementation</a> implements <a href=#domhtmlimplementation>DOMHTMLImplementation</a>;</pre>

  <dl class=domintro><dt><var title="">document</var> = <var title="">document</var> . <code title=dom-document-implementation>implementation</code> . <code title=dom-DOMHTMLImplementation-createHTMLDocument><a href=#dom-domhtmlimplementation-createhtmldocument>createHTMLDocument</a></code>( <var title="">title</var> )</dt>
   <dd>

    <p>Returns a new <code><a href=#document>Document</a></code>, with a basic DOM already
    constructed with an appropriate <code><a href=#the-title-element-0>title</a></code> element.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-domhtmlimplementation-createhtmldocument title=dom-DOMHTMLImplementation-createHTMLDocument><code>createHTMLDocument(<var title="">title</var>)</code></dfn> method, when invoked, must run the
  following steps:</p>

  <ol><li><p>Let <var title="">doc</var> be a newly created
   <code><a href=#document>Document</a></code> object.</li>

   <li><p>Mark <var title="">doc</var> as being an <a href=#html-documents title="HTML
   documents">HTML document</a>.</li>

   <li><p>Create a <code><a href=#documenttype>DocumentType</a></code> node with the <code title="">name</code> attribute set to the string "<code title="">html</code>", and the other attributes specific to
   <code><a href=#documenttype>DocumentType</a></code> objects set to the empty string, null,
   and empty lists, as appropriate. Append the newly created node to
   <var title="">doc</var>.</li>

   <li><p>Create an <code><a href=#the-html-element-0>html</a></code> element, and append it to <var title="">doc</var>.</li>

   <li><p>Create a <code><a href=#the-head-element-0>head</a></code> element, and append it to the
   <code><a href=#the-html-element-0>html</a></code> element created in the previous step.</p>

   <li><p>Create a <code><a href=#the-title-element-0>title</a></code> element, and append it to the
   <code><a href=#the-head-element-0>head</a></code> element created in the previous step.</p>

   <li><p>Create a <code><a href=#text>Text</a></code> node, and set its <code title="">data</code> attribute to the string given by the method's
   argument (which could be the empty string). Append it to the
   <code><a href=#the-title-element-0>title</a></code> element created in the previous step.</p>

   <li><p>Create a <code><a href=#the-body-element-0>body</a></code> element, and append it to the
   <code><a href=#the-html-element-0>html</a></code> element created in the earlier step.</p>

   <li><p>Return <var title="">doc</var>.</li>

  </ol></div>



  <h3 id=elements><span class=secno>3.2 </span>Elements</h3>

  <h4 id=semantics-0><span class=secno>3.2.1 </span>Semantics</h4>

  <p>Elements, attributes, and attribute values in HTML are defined
  (by this specification) to have certain meanings (semantics). For
  example, the <code><a href=#the-ol-element>ol</a></code> element represents an ordered list, and
  the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute represents the
  language of the content.</p>

  <p>Authors must not use elements, attributes, or attribute values
  for purposes other than their appropriate intended semantic
  purpose. Authors must not use elements, attributes, or attribute
  values that are not permitted by this specification or <a href=#other-applicable-specifications>other
  applicable specifications</a>.</p>

  <div class=example>
   <p>For example, the following document is non-conforming, despite
   being syntactically correct:</p>

   <pre class=bad>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en-GB"&gt;
 &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
 &lt;body&gt;
  &lt;table&gt;
   &lt;tr&gt; &lt;td&gt; My favourite animal is the cat. &lt;/td&gt; &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;
     &mdash;&lt;a href="http://example.org/~ernest/"&gt;&lt;cite&gt;Ernest&lt;/cite&gt;&lt;/a&gt;,
     in an essay from 1992
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

   <p>...because the data placed in the cells is clearly not tabular
   data (and the <code><a href=#the-cite-element>cite</a></code> element mis-used). A corrected
   version of this document might be:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en-GB"&gt;
 &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
 &lt;body&gt;
  &lt;blockquote&gt;
   &lt;p&gt; My favourite animal is the cat. &lt;/p&gt;
  &lt;/blockquote&gt;
  &lt;p&gt;
   &mdash;&lt;a href="http://example.org/~ernest/"&gt;Ernest&lt;/a&gt;,
   in an essay from 1992
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

   <p>This next document fragment, intended to represent the heading
   of a corporate site, is similarly non-conforming because the second
   line is not intended to be a heading of a subsection, but merely a
   subheading or subtitle (a subordinate heading for the same
   section).</p>

   <pre class=bad>&lt;body&gt;
 &lt;h1&gt;ABC Company&lt;/h1&gt;
 &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
 ...</pre>

   <p>The <code><a href=#the-hgroup-element>hgroup</a></code> element is intended for these kinds of
   situations:</p>

   <pre>&lt;body&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;ABC Company&lt;/h1&gt;
  &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
 &lt;/hgroup&gt;
 ...</pre>

   <p>In the next example, there is a non-conforming attribute value
   ("carpet") and a non-conforming attribute ("texture"), which
   is not permitted by this specification:</p>

   <pre class=bad>&lt;label&gt;Carpet: &lt;input type="carpet" name="c" texture="deep pile"&gt;&lt;/label&gt;</pre>

   <p>Here would be an alternative and correct way to mark this up:</p>

   <pre>&lt;label&gt;Carpet: &lt;input type="text" class="carpet" name="c" data-texture="deep pile"&gt;&lt;/label&gt;</pre>

  </div>

  <p>Through scripting and using other mechanisms, the values of
  attributes, text, and indeed the entire structure of the document
  may change dynamically while a user agent is processing it. The
  semantics of a document at an instant in time are those represented
  by the state of the document at that instant in time, and the
  semantics of a document can therefore change over time. User agents
  <span class=impl>must</span> update their presentation of the
  document as this occurs.</p>

  <p class=example>HTML has a <code><a href=#the-progress-element>progress</a></code> element that
  describes a progress bar. If its "value" attribute is dynamically
  updated by a script, the UA would update the rendering to show the
  progress changing.</p>



  <h4 id=elements-in-the-dom><span class=secno>3.2.2 </span>Elements in the DOM</h4>

  <p>The nodes representing <a href=#html-elements>HTML elements</a> in the DOM
  <span class=impl>must</span> implement, and expose to scripts, the
  interfaces listed for them in the relevant sections of this
  specification. This includes <a href=#html-elements>HTML elements</a> in <a href=#xml-documents>XML
  documents</a>, even when those documents are in another context
  (e.g. inside an XSLT transform).</p>

  <p>Elements in the DOM <a href=#represents title=represents>represent</a>
  things; that is, they have intrinsic <em>meaning</em>, also known as
  semantics.</p>

  <p class=example>For example, an <code><a href=#the-ol-element>ol</a></code> element
  represents an ordered list.</p>

  <p>The basic interface, from which all the <a href=#html-elements>HTML
  elements</a>' interfaces inherit, <span class=impl>and which
  must be used by elements that have no additional
  requirements,</span> is the <code><a href=#htmlelement>HTMLElement</a></code> interface.</p>

  <pre class=idl>interface <dfn id=htmlelement>HTMLElement</dfn> : <a href=#element>Element</a> {
  // <a href=#dom-tree-accessors>DOM tree accessors</a>
  NodeList <a href=#dom-getelementsbyclassname title=dom-getElementsByClassName>getElementsByClassName</a>(in DOMString classNames);

  // <a href=#dynamic-markup-insertion>dynamic markup insertion</a>
           attribute DOMString <a href=#dom-innerhtml title=dom-innerHTML>innerHTML</a>;
           attribute DOMString <a href=#dom-outerhtml title=dom-outerHTML>outerHTML</a>;
  void <a href=#dom-insertadjacenthtml title=dom-insertAdjacentHTML>insertAdjacentHTML</a>(in DOMString position, in DOMString text);

  // <span>metadata attributes</span>
           attribute DOMString <a href=#dom-id title=dom-id>id</a>;
           attribute DOMString <a href=#dom-title title=dom-title>title</a>;
           attribute DOMString <a href=#dom-lang title=dom-lang>lang</a>;
           attribute DOMString <a href=#dom-dir title=dom-dir>dir</a>;
           attribute <span>DOMString</span> <a href=#dom-classname title=dom-className>className</a>;
  readonly attribute <a href=#domtokenlist>DOMTokenList</a> <a href=#dom-classlist title=dom-classList>classList</a>;
  readonly attribute <a href=#domstringmap>DOMStringMap</a> <a href=#dom-dataset title=dom-dataset>dataset</a>;

  // <a href=#microdata>microdata</a> <!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION-->
           attribute boolean <a href=#dom-itemscope title=dom-itemScope>itemScope</a>;
           attribute DOMString <a href=#dom-itemtype title=dom-itemType>itemType</a>;
           attribute DOMString <a href=#dom-itemid title=dom-itemId>itemId</a>;
  [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-itemref title=dom-itemRef>itemRef</a>;
  [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-itemprop title=dom-itemProp>itemProp</a>;
  readonly attribute <a href=#htmlpropertiescollection>HTMLPropertiesCollection</a> <a href=#dom-properties title=dom-properties>properties</a>;
           attribute any <a href=#dom-itemvalue title=dom-itemValue>itemValue</a>;

  // <a href=#editing>user interaction</a>
           attribute boolean <a href=#dom-hidden title=dom-hidden>hidden</a>;
  void <a href=#dom-click title=dom-click>click</a>();
  void <a href=#dom-scrollintoview title=dom-scrollIntoView>scrollIntoView</a>();
  void <a href=#dom-scrollintoview title=dom-scrollIntoView>scrollIntoView</a>(in boolean top);
           attribute long <a href=#dom-tabindex title=dom-tabindex>tabIndex</a>;
  void <a href=#dom-focus title=dom-focus>focus</a>();
  void <a href=#dom-blur title=dom-blur>blur</a>();
           attribute DOMString <a href=#dom-accesskey title=dom-accessKey>accessKey</a>;
  readonly attribute DOMString <a href=#dom-accesskeylabel title=dom-accessKeyLabel>accessKeyLabel</a>;
           attribute boolean <a href=#dom-draggable title=dom-draggable>draggable</a>;
           attribute DOMString <a href=#dom-contenteditable title=dom-contentEditable>contentEditable</a>;
  readonly attribute boolean <a href=#dom-iscontenteditable title=dom-isContentEditable>isContentEditable</a>;
           attribute <a href=#htmlmenuelement>HTMLMenuElement</a> <a href=#dom-contextmenu title=dom-contextMenu>contextMenu</a>;
           attribute DOMString <a href=#dom-spellcheck title=dom-spellcheck>spellcheck</a>;

  // <a href=#command-api>command API</a>
  readonly attribute DOMString <a href=#dom-command-ro-commandtype title=dom-command-ro-commandType>commandType</a>;
  readonly attribute DOMString <a href=#dom-command-ro-label title=dom-command-ro-label>label</a>;
  readonly attribute DOMString <a href=#dom-command-ro-icon title=dom-command-ro-icon>icon</a>;
  readonly attribute boolean <a href=#dom-command-ro-disabled title=dom-command-ro-disabled>disabled</a>;
  readonly attribute boolean <a href=#dom-command-ro-checked title=dom-command-ro-checked>checked</a>;<!-- v2COMMAND
  readonly attribute <span>HTMLCollection</span> <span title="dom-command-ro-triggers">triggers</span>;-->

  // <span>styling</span>
  readonly attribute <span>CSSStyleDeclaration</span> <a href=#dom-style title=dom-style>style</a>;

  // <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
           attribute <a href=#function>Function</a> <a href=#handler-onabort title=handler-onabort>onabort</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onblur title=handler-onblur>onblur</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onchange title=handler-onchange>onchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onclick title=handler-onclick>onclick</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondrag title=handler-ondrag>ondrag</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragend title=handler-ondragend>ondragend</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragenter title=handler-ondragenter>ondragenter</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragleave title=handler-ondragleave>ondragleave</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragover title=handler-ondragover>ondragover</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragstart title=handler-ondragstart>ondragstart</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondrop title=handler-ondrop>ondrop</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondurationchange title=handler-ondurationchange>ondurationchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onemptied title=handler-onemptied>onemptied</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onended title=handler-onended>onended</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onerror title=handler-onerror>onerror</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onfocus title=handler-onfocus>onfocus</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onformchange title=handler-onformchange>onformchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onforminput title=handler-onforminput>onforminput</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oninput title=handler-oninput>oninput</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oninvalid title=handler-oninvalid>oninvalid</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onkeydown title=handler-onkeydown>onkeydown</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onkeypress title=handler-onkeypress>onkeypress</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onkeyup title=handler-onkeyup>onkeyup</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onload title=handler-onload>onload</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onloadeddata title=handler-onloadeddata>onloadeddata</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onloadedmetadata title=handler-onloadedmetadata>onloadedmetadata</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onloadstart title=handler-onloadstart>onloadstart</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmousedown title=handler-onmousedown>onmousedown</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmousemove title=handler-onmousemove>onmousemove</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmouseout title=handler-onmouseout>onmouseout</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmouseover title=handler-onmouseover>onmouseover</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmouseup title=handler-onmouseup>onmouseup</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmousewheel title=handler-onmousewheel>onmousewheel</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onpause title=handler-onpause>onpause</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onplay title=handler-onplay>onplay</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onplaying title=handler-onplaying>onplaying</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onprogress title=handler-onprogress>onprogress</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onratechange title=handler-onratechange>onratechange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onreadystatechange title=handler-onreadystatechange>onreadystatechange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onscroll title=handler-onscroll>onscroll</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onseeked title=handler-onseeked>onseeked</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onseeking title=handler-onseeking>onseeking</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onselect title=handler-onselect>onselect</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onshow title=handler-onshow>onshow</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onstalled title=handler-onstalled>onstalled</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onsubmit title=handler-onsubmit>onsubmit</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onsuspend title=handler-onsuspend>onsuspend</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ontimeupdate title=handler-ontimeupdate>ontimeupdate</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onvolumechange title=handler-onvolumechange>onvolumechange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onwaiting title=handler-onwaiting>onwaiting</a>;
};

interface <dfn id=htmlunknownelement>HTMLUnknownElement</dfn> : <a href=#htmlelement>HTMLElement</a> { };</pre>

  <p>The <code><a href=#htmlelement>HTMLElement</a></code> interface holds methods and
  attributes related to a number of disparate features, and the
  members of this interface are therefore described in various
  different sections of this specification.</p>

  <div class=impl>

  <p>The <code><a href=#htmlunknownelement>HTMLUnknownElement</a></code> interface must be used for
  <a href=#html-elements>HTML elements</a> that are not defined by this
  specification (or <a href=#other-applicable-specifications>other applicable specifications</a>).</p>

  </div>



  <h4 id=global-attributes><span class=secno>3.2.3 </span><dfn>Global attributes</dfn></h4>

  <p>The following attributes are common to and may be specified on
  all <a href=#html-elements>HTML elements</a><span class=impl> (even those not
  defined in this specification)</span>:</p>

  <ul class=brief><li><code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code></li>
   <li><code title=attr-class><a href=#classes>class</a></code></li>
   <li><code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code></li>
   <li><code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code></li>
   <li><code title=attr-dir><a href=#the-dir-attribute>dir</a></code></li>
   <li><code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code></li>
   <li><code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code></li>
   <li><code title=attr-id><a href=#the-id-attribute>id</a></code></li>
<!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
   <li><code title=attr-itemid><a href=#attr-itemid>itemid</a></code></li>
   <li><code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code></li>
   <li><code title=attr-itemref><a href=#attr-itemref>itemref</a></code></li>
   <li><code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code></li>
   <li><code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code></li>

   <li><code title=attr-lang><a href=#attr-lang>lang</a></code></li>
   <li><code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code></li>
   <li><code title=attr-style><a href=#the-style-attribute>style</a></code></li>
   <li><code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code></li>
   <li><code title=attr-title><a href=#the-title-attribute>title</a></code></li>
  </ul><hr><p>The following <a href=#event-handler-content-attributes>event handler content attributes</a> may
  be specified on any <a href=#html-elements title="HTML elements">HTML
  element</a>:</p>

  <ul class=brief><li><code title=handler-onabort><a href=#handler-onabort>onabort</a></code></li>
   <li><code title=handler-onblur><a href=#handler-onblur>onblur</a></code>*</li>
   <li><code title=handler-oncanplay><a href=#handler-oncanplay>oncanplay</a></code></li>
   <li><code title=handler-oncanplaythrough><a href=#handler-oncanplaythrough>oncanplaythrough</a></code></li>
   <li><code title=handler-onchange><a href=#handler-onchange>onchange</a></code></li>
   <li><code title=handler-onclick><a href=#handler-onclick>onclick</a></code></li>
   <li><code title=handler-oncontextmenu><a href=#handler-oncontextmenu>oncontextmenu</a></code></li>
   <li><code title=handler-ondblclick><a href=#handler-ondblclick>ondblclick</a></code></li>
   <li><code title=handler-ondrag><a href=#handler-ondrag>ondrag</a></code></li>
   <li><code title=handler-ondragend><a href=#handler-ondragend>ondragend</a></code></li>
   <li><code title=handler-ondragenter><a href=#handler-ondragenter>ondragenter</a></code></li>
   <li><code title=handler-ondragleave><a href=#handler-ondragleave>ondragleave</a></code></li>
   <li><code title=handler-ondragover><a href=#handler-ondragover>ondragover</a></code></li>
   <li><code title=handler-ondragstart><a href=#handler-ondragstart>ondragstart</a></code></li>
   <li><code title=handler-ondrop><a href=#handler-ondrop>ondrop</a></code></li>
   <li><code title=handler-ondurationchange><a href=#handler-ondurationchange>ondurationchange</a></code></li>
   <li><code title=handler-onemptied><a href=#handler-onemptied>onemptied</a></code></li>
   <li><code title=handler-onended><a href=#handler-onended>onended</a></code></li>
   <li><code title=handler-onerror><a href=#handler-onerror>onerror</a></code>*</li>
   <li><code title=handler-onfocus><a href=#handler-onfocus>onfocus</a></code>*</li>
   <li><code title=handler-onformchange><a href=#handler-onformchange>onformchange</a></code></li>
   <li><code title=handler-onforminput><a href=#handler-onforminput>onforminput</a></code></li>
   <li><code title=handler-oninput><a href=#handler-oninput>oninput</a></code></li>
   <li><code title=handler-oninvalid><a href=#handler-oninvalid>oninvalid</a></code></li>
   <li><code title=handler-onkeydown><a href=#handler-onkeydown>onkeydown</a></code></li>
   <li><code title=handler-onkeypress><a href=#handler-onkeypress>onkeypress</a></code></li>
   <li><code title=handler-onkeyup><a href=#handler-onkeyup>onkeyup</a></code></li>
   <li><code title=handler-onload><a href=#handler-onload>onload</a></code>*</li>
   <li><code title=handler-onloadeddata><a href=#handler-onloadeddata>onloadeddata</a></code></li>
   <li><code title=handler-onloadedmetadata><a href=#handler-onloadedmetadata>onloadedmetadata</a></code></li>
   <li><code title=handler-onloadstart><a href=#handler-onloadstart>onloadstart</a></code></li>
   <li><code title=handler-onmousedown><a href=#handler-onmousedown>onmousedown</a></code></li>
   <li><code title=handler-onmousemove><a href=#handler-onmousemove>onmousemove</a></code></li>
   <li><code title=handler-onmouseout><a href=#handler-onmouseout>onmouseout</a></code></li>
   <li><code title=handler-onmouseover><a href=#handler-onmouseover>onmouseover</a></code></li>
   <li><code title=handler-onmouseup><a href=#handler-onmouseup>onmouseup</a></code></li>
   <li><code title=handler-onmousewheel><a href=#handler-onmousewheel>onmousewheel</a></code></li>
   <li><code title=handler-onpause><a href=#handler-onpause>onpause</a></code></li>
   <li><code title=handler-onplay><a href=#handler-onplay>onplay</a></code></li>
   <li><code title=handler-onplaying><a href=#handler-onplaying>onplaying</a></code></li>
   <li><code title=handler-onprogress><a href=#handler-onprogress>onprogress</a></code></li>
   <li><code title=handler-onratechange><a href=#handler-onratechange>onratechange</a></code></li>
   <li><code title=handler-onreadystatechange><a href=#handler-onreadystatechange>onreadystatechange</a></code></li>
   <li><code title=handler-onscroll><a href=#handler-onscroll>onscroll</a></code></li>
   <li><code title=handler-onseeked><a href=#handler-onseeked>onseeked</a></code></li>
   <li><code title=handler-onseeking><a href=#handler-onseeking>onseeking</a></code></li>
   <li><code title=handler-onselect><a href=#handler-onselect>onselect</a></code></li>
   <li><code title=handler-onshow><a href=#handler-onshow>onshow</a></code></li>
   <li><code title=handler-onstalled><a href=#handler-onstalled>onstalled</a></code></li>
   <li><code title=handler-onsubmit><a href=#handler-onsubmit>onsubmit</a></code></li>
   <li><code title=handler-onsuspend><a href=#handler-onsuspend>onsuspend</a></code></li>
   <li><code title=handler-ontimeupdate><a href=#handler-ontimeupdate>ontimeupdate</a></code></li>
   <li><code title=handler-onvolumechange><a href=#handler-onvolumechange>onvolumechange</a></code></li>
   <li><code title=handler-onwaiting><a href=#handler-onwaiting>onwaiting</a></code></li>
  </ul><p class=note>The attributes marked with an asterisk have a
  different meaning when specified on <code><a href=#the-body-element-0>body</a></code> elements as
  those elements expose <a href=#event-handlers>event handlers</a> of the
  <code><a href=#window>Window</a></code> object with the same names.</p>

  <p class=note>While these attributes apply to all elements, they
  are not useful on all elements. For example, only <a href=#media-element title="media
  element">media elements</a> will ever receive a <code title=event-media-volumechange><a href=#event-media-volumechange>volumechange</a></code> event fired by
  the user agent.</p>

  <hr><p><a href=#custom-data-attribute title="custom data attribute">Custom data attributes</a>
  (e.g. <code title="">data-foldername</code> or <code title="">data-msgid</code>) can be specified on any <a href=#html-elements title="HTML elements">HTML element</a>, to store custom data
  specific to the page.</p>

  <hr><p>In <a href=#html-documents>HTML documents</a>, elements in the <a href=#html-namespace-0>HTML
  namespace</a> may have an <code title="">xmlns</code> attribute
  specified, if, and only if, it has the exact value
  "<code>http://www.w3.org/1999/xhtml</code>". This does not apply to
  <a href=#xml-documents>XML documents</a>.</p>

  <p class=note>In HTML, the <code title="">xmlns</code> attribute
  has absolutely no effect. It is basically a talisman. It is allowed
  merely to make migration to and from XHTML mildly easier. When
  parsed by an <a href=#html-parser>HTML parser</a>, the attribute ends up in no
  namespace, not the "<code>http://www.w3.org/2000/xmlns/</code>"
  namespace like namespace declaration attributes in XML do.</p>

  <p class=note>In XML, an <code title="">xmlns</code> attribute is
  part of the namespace declaration mechanism, and an element cannot
  actually have an <code title="">xmlns</code> attribute in no
  namespace specified.</p>

  <hr><p>To enable assistive technology products to expose a more
  fine-grained interface than is otherwise possible with HTML elements
  and attributes, a set of <a href=#annotations-for-assistive-technology-products-(aria)>annotations for assistive technology
  products</a> can be specified (the ARIA <code title=attr-aria-role>role</code> and <code title=attr-aria-*>aria-*</code> attributes).</p>


  <h5 id=the-id-attribute><span class=secno>3.2.3.1 </span>The <dfn title=attr-id><code>id</code></dfn> attribute</h5>

  <p>The <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute specifies its
  element's <dfn id=concept-id title=concept-id>unique identifier (ID)</dfn>. The
  value must be unique amongst all the IDs in the element's <a href=#home-subtree>home
  subtree</a> and must contain at least one character. The value
  must not contain any <a href=#space-character title="space character">space
  characters</a>.</p>

  <!-- space characters are disallowed because space-separated lists
  of IDs otherwise would not be able to reach all valid IDs -->

  <p class=note>An element's <a href=#concept-id title=concept-id>unique
  identifier</a> can be used for a variety of purposes, most
  notably as a way to link to specific parts of a document using
  fragment identifiers, as a way to target an element when scripting,
  and as a way to style a specific element from CSS.</p>

  <div class=impl>

  <p>If the value is not the empty string, user agents must associate
  the element with the given value (exactly, including any space
  characters) for the purposes of ID matching within the element's
  <a href=#home-subtree>home subtree</a> (e.g. for selectors in CSS or for the
  <code title=dom-Document-getElementById><a href=#dom-document-getelementbyid>getElementById()</a></code>
  method in the DOM).</p>

  <p>Identifiers are opaque strings. Particular meanings should not be
  derived from the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code>
  attribute.</p>

  <p>This specification doesn't preclude an element having multiple
  IDs, if other mechanisms (e.g. DOM Core methods) can set an
  element's ID in a way that doesn't conflict with the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute.</p>

  <p>The <dfn id=dom-id title=dom-id><code>id</code></dfn> IDL attribute must
  <a href=#reflect>reflect</a> the <code title=attr-id><a href=#the-id-attribute>id</a></code> content
  attribute.</p>

  </div>


  <h5 id=the-title-attribute><span class=secno>3.2.3.2 </span>The <dfn title=attr-title><code>title</code></dfn> attribute</h5>

  <p>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
  <a href=#represents>represents</a> advisory information for the element, such
  as would be appropriate for a tooltip. On a link, this could be the
  title or a description of the target resource; on an image, it could
  be the image credit or a description of the image; on a paragraph,
  it could be a footnote or commentary on the text; on a citation, it
  could be further information about the source; and so forth. The
  value is text.</p>

  <p>If this attribute is omitted from an element, then it implies
  that the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute of the
  nearest ancestor <a href=#html-elements title="HTML elements">HTML element</a>
  with a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute set is also
  relevant to this element. Setting the attribute overrides this,
  explicitly stating that the advisory information of any ancestors is
  not relevant to this element. Setting the attribute to the empty
  string indicates that the element has no advisory information.</p>

  <p>If the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute's value
  contains U+000A LINE FEED (LF) characters, the content is split into
  multiple lines. Each U+000A LINE FEED (LF) character represents a
  line break.</p>

  <div class=example>

   <p>Caution is advised with respect to the use of newlines in <code title=attr-title><a href=#the-title-attribute>title</a></code> attributes.</p>

   <p>For instance, the following snippet actually defines an
   abbreviation's expansion <em>with a line break in it</em>:</p>

   <pre class=bad>&lt;p&gt;My logs show that there was some interest in &lt;abbr title="Hypertext
Transport Protocol"&gt;HTTP&lt;/abbr&gt; today.&lt;/p&gt;</pre>

  </div>

  <p>Some elements, such as <code><a href=#the-link-element>link</a></code>, <code><a href=#the-abbr-element>abbr</a></code>, and
  <code><a href=#the-input-element>input</a></code>, define additional semantics for the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute beyond the semantics
  described above.</p>

  <div class=impl>

  <hr><p>The <dfn id=dom-title title=dom-title><code>title</code></dfn> IDL attribute
  must <a href=#reflect>reflect</a> the <code title=attr-title><a href=#the-title-attribute>title</a></code>
  content attribute.</p>

  </div>



  <h5 id=the-lang-and-xml:lang-attributes><span class=secno>3.2.3.3 </span>The <code title=attr-lang><a href=#attr-lang>lang</a></code> and <code title=attr-xml-lang><a href=#attr-xml-lang>xml:lang</a></code> attributes</h5>

  <p>The <dfn id=attr-lang title=attr-lang><code>lang</code></dfn> attribute (in
  no namespace) specifies the primary language for the element's
  contents and for any of the element's attributes that contain
  text. Its value must be a valid BCP 47 language tag, or the empty
  string. Setting the attribute to the empty string indicates that the
  primary language is unknown<!-- UA conformance requirements for this
  are below -->. <a href=#refsBCP47>[BCP47]</a></p>

  <p>The <dfn id=attr-xml-lang title=attr-xml-lang><code title="">lang</code></dfn>
  attribute in the <a href=#xml-namespace>XML namespace</a> is defined in XML. <a href=#refsXML>[XML]</a></p>

  <p>If these attributes are omitted from an element, then the
  language of this element is the same as the language of its parent
  element, if any.</p>

  <p>The <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute in no namespace
  may be used on any <a href=#html-elements title="HTML elements">HTML
  element</a>.</p>

  <p>The <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code>
  attribute in the <span>XML namespace</span></a> may be used on
  <a href=#html-elements>HTML elements</a> in <a href=#xml-documents>XML documents</a>, as well as
  elements in other namespaces if the relevant specifications allow it
  (in particular, MathML and SVG allow <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attributes in the
  <span>XML namespace</span></a> to be specified on their
  elements). If both the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute
  in no namespace and the <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute in the <span>XML
  namespace</span></a> are specified on the same element, they must
  have exactly the same value when compared in an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> manner.</p>

  <p>Authors must not use the <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute in the <span>XML
  namespace</span></a> on <a href=#html-elements>HTML elements</a> in <a href=#html-documents>HTML
  documents</a>. To ease migration to and from XHTML, authors may
  specify an attribute in no namespace with no prefix and with the
  literal localname "<code title="">xml:lang</code>" on <a href=#html-elements>HTML
  elements</a> in <a href=#html-documents>HTML documents</a>, but such attributes
  must only be specified if a <code title=attr-lang><a href=#attr-lang>lang</a></code>
  attribute in no namespace is also specified, and both attributes
  must have the same value when compared in an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> manner.</p>

  <p class=note>The attribute in no namespace with no prefix and
  with the literal localname "<code title="">xml:lang</code>" has no
  effect on language processing.</p>

  <div class=impl>

  <hr><p>To determine the <dfn id=language>language</dfn> of a node, user agents must
  look at the nearest ancestor element (including the element itself
  if the node is an element) that has a <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute in the
  <span>XML namespace</span></a> set or is an <a href=#html-elements title="HTML
  elements">HTML element</a> and has a <code title=attr-lang><a href=#attr-lang>lang</a></code> in no namespace attribute set. That
  attribute specifies the language of the node (regardless of its
  value).</p>

  <p>If both the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute in no
  namespace and the <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute in the <span>XML
  namespace</span></a> are set on an element, user agents must use
  the <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute
  in the <span>XML namespace</span></a>, and the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute in no namespace must be
  <a href=#ignore title=ignore>ignored</a> for the purposes of determining
  the element's language.</p>

  <p>If none of the node's ancestors, including the <a href=#root-element>root
  element</a>, have either attribute set, but there is a
  <a href=#pragma-set-default-language>pragma-set default language</a> set, then that is the
  language of the node. If there is no <a href=#pragma-set-default-language>pragma-set default
  language</a> set, then language information from a higher-level
  protocol (such as HTTP), if any, must be used as the final fallback
  language instead. In the absence of any such language information,
  and in cases where the higher-level protocol reports multiple
  languages, the language of the node is unknown, and the
  corresponding language tag is the empty string.</p>

  <p>If the resulting value is not a recognized language tag, then it
  must be treated as an unknown language having the given language
  tag, distinct from all other languages. For the purposes of
  round-tripping or communicating with other services that expect
  language tags, user agents should pass unknown language tags
  through unmodified.</p>

  <p class=example>Thus, for instance, an element with <code title="">lang="xyzzy"</code> would be matched by the selector <code title="">:lang(xyzzy)</code> (e.g. in CSS), but it would not be
  matched by <code title="">:lang(abcde)</code>, even though both are
  equally invalid. Similarly, if a Web browser and screen reader
  working in unison communicated about the language of the element,
  the browser would tell the screen reader that the language was
  "xyzzy", even if it knew it was invalid, just in case the screen
  reader actually supported a language with that tag after all.</p>

  <p>If the resulting value is the empty string, then it must be
  interpreted as meaning that the language of the node is explicitly
  unknown.</p>

  <hr><p>User agents may use the element's language to determine proper
  processing or rendering (e.g. in the selection of appropriate
  fonts or pronunciations, or for dictionary selection). <!--User
  agents must not use the element's language to determine text
  directionality. (commented out because text directionality is a
  rendering-level concern.)--></p>

  <hr><p>The <dfn id=dom-lang title=dom-lang><code>lang</code></dfn> IDL attribute
  must <a href=#reflect>reflect</a> the <code title=attr-lang><a href=#attr-lang>lang</a></code>
  content attribute in no namespace.</p>

  </div>



  <h5 id=the-xml:base-attribute-(xml-only)><span class=secno>3.2.3.4 </span>The <dfn title=attr-xml-base><code>xml:base</code></dfn>
  attribute (XML only)</h5>

  <p>The <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attribute is
  defined in XML Base. <a href=#refsXMLBASE>[XMLBASE]</a></p>

  <p>The <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attribute may be
  used on elements of <a href=#xml-documents>XML documents</a>. Authors must not
  use the <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attribute in
  <a href=#html-documents>HTML documents</a>.</p>


  <h5 id=the-dir-attribute><span class=secno>3.2.3.5 </span>The <dfn title=attr-dir><code>dir</code></dfn> attribute</h5>

  <p>The <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute specifies the
  element's text directionality. The attribute is an <a href=#enumerated-attribute>enumerated
  attribute</a> with the keyword <code title="">ltr</code> mapping
  to the state <i>ltr</i>, and the keyword <code title="">rtl</code>
  mapping to the state <i>rtl</i>. The attribute has no <i>invalid
  value default</i> and no <i>missing value default</i>.</p>

  <div class=impl>

  <p>The processing of this attribute is primarily performed by the
  presentation layer. For example, the rendering section in this
  specification defines a mapping from this attribute to the CSS
  'direction' and 'unicode-bidi' properties, and CSS defines rendering
  in terms of those properties.</p>

  </div>

  <p><dfn id=the-directionality>The directionality</dfn> of an element, which is used in
  particular by the <code><a href=#the-canvas-element>canvas</a></code> element's text rendering API,
  is either 'ltr' or 'rtl'. If the user agent supports CSS and the
  'direction' property on this element has a computed value of either
  'ltr' or 'rtl', then that is <a href=#the-directionality>the directionality</a> of the
  element. Otherwise, if the element is <a href=#being-rendered>being rendered</a>,
  then <a href=#the-directionality>the directionality</a> of the element is the
  directionality used by the presentation layer, potentially
  determined from the value of the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>
  attribute on the element. Otherwise, if the element's <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute has the state <i>ltr</i>, the
  element's directionality is 'ltr' (left-to-right); if the attribute
  has the state <i>rtl</i>, the element's directionality is 'rtl'
  (right-to-left); and otherwise, the element's directionality is the
  same as its parent element, or 'ltr' if there is no parent
  element.</p>

  <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-dir><a href=#dom-dir>dir</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns <a href=#the-html-element>the <code>html</code> element</a>'s <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute's value, if any.</p>
    <p>Can be set, to either "<code title="">ltr</code>" or "<code title="">rtl</code>", to replace <a href=#the-html-element>the <code>html</code> element</a>'s <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute's value.</p>
    <p>If there is no <a href=#the-html-element title="the html element"><code>html</code> element</a>, returns the empty string and ignores new values.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-dir title=dom-dir><code>dir</code></dfn> IDL attribute on
  an element must <a href=#reflect>reflect</a> the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> content attribute of that element,
  <a href=#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>The <dfn id=dom-document-dir title=dom-document-dir><code>dir</code></dfn> IDL
  attribute on <code><a href=#htmldocument>HTMLDocument</a></code> objects must
  <a href=#reflect>reflect</a> the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> content
  attribute of <a href=#the-html-element>the <code>html</code> element</a>, if any,
  <a href=#limited-to-only-known-values>limited to only known values</a>. If there is no such
  element, then the attribute must return the empty string and do
  nothing on setting.</p>

  </div>

  <p class=note>Authors are strongly encouraged to use the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute to indicate text direction
  rather than using CSS, since that way their documents will continue
  to render correctly even in the absence of CSS (e.g. as interpreted
  by search engines).</p>


  <h5 id=classes><span class=secno>3.2.3.6 </span>The <dfn title=attr-class><code>class</code></dfn> attribute</h5>

  <p>Every <a href=#html-elements title="HTML elements">HTML element</a> may have a
  <code title=attr-class><a href=#classes>class</a></code> attribute specified.</p>

  <p>The attribute, if specified, must have a value that is a
  <a href=#set-of-space-separated-tokens>set of space-separated tokens</a> representing the various
  classes that the element belongs to.</p>

  <div class=impl>

  <p>The classes that an <a href=#html-elements title="HTML elements">HTML
  element</a> has assigned to it consists of all the classes
  returned when the value of the <code title=attr-class><a href=#classes>class</a></code>
  attribute is <a href=#split-a-string-on-spaces title="split a string on spaces">split on
  spaces</a>. (Duplicates are ignored.)</p>

  </div>

  <p class=note>Assigning classes to an element affects class
  matching in selectors in CSS, the <code title=dom-document-getElementsByClassName><a href=#dom-document-getelementsbyclassname>getElementsByClassName()</a></code>
  method in the DOM, and other such features.</p>

  <p>There are no additional restrictions on the tokens authors can
  use in the <code title=attr-class><a href=#classes>class</a></code> attribute, but
  authors are encouraged to use values that describe the nature of the
  content, rather than values that describe the desired presentation
  of the content.</p>

  <div class=impl>

  <hr><p>The <dfn id=dom-classname title=dom-className><code>className</code></dfn> and
  <dfn id=dom-classlist title=dom-classList><code>classList</code></dfn> IDL
  attributes must both <a href=#reflect>reflect</a> the <code title=attr-class><a href=#classes>class</a></code> content attribute.</p>

  </div>



  <h5 id=the-style-attribute><span class=secno>3.2.3.7 </span>The <dfn title=attr-style><code>style</code></dfn> attribute</h5>

  <p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-style><a href=#the-style-attribute>style</a></code> content attribute set. This is a
  <span>CSS styling attribute</span> as defined by the CSS Styling
  Attribute Syntax specification. <a href=#refsCSSATTR>[CSSATTR]</a></p>

  <div class=impl>

  <p>In user agents that support CSS, the attribute's value must be
  parsed when the attribute is added or has its value changed<!-- so
  dynamic changes to the base URL don't affect the CSS -->, according
  to the rules given for <span>CSS styling attributes</span>. <a href=#refsCSSATTR>[CSSATTR]</a></p>

  </div>

  <p>Documents that use <code title=attr-style><a href=#the-style-attribute>style</a></code>
  attributes on any of their elements must still be comprehensible and
  usable if those attributes were removed.</p>

  <p class=note>In particular, using the <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute to hide and show content,
  or to convey meaning that is otherwise not included in the document,
  is non-conforming. (To hide and show content, use the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute.)</p>

  <hr><dl class=domintro><dt><var title="">element</var> . <code title=dom-style><a href=#dom-style>style</a></code></dt>
   <dd>
    <p>Returns a <code>CSSStyleDeclaration</code> object for the element's <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-style title=dom-style><code>style</code></dfn> IDL attribute
  must return a <code>CSSStyleDeclaration</code> whose value
  represents the declarations specified in the attribute, if
  present. Mutating the <code>CSSStyleDeclaration</code> object must
  create a <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute on the
  element (if there isn't one already) and then change its value to be
  a value representing the serialized form of the
  <code>CSSStyleDeclaration</code> object. The same object must be
  returned each time. <a href=#refsCSSOM>[CSSOM]</a></p>

  </div>

  <div class=example>

   <p>In the following example, the words that refer to colors are
   marked up using the <code><a href=#the-span-element>span</a></code> element and the <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute to make those words show
   up in the relevant colors in visual media.</p>

   <pre>&lt;p&gt;My sweat suit is &lt;span style="color: green; background:
transparent"&gt;green&lt;/span&gt; and my eyes are &lt;span style="color: blue;
background: transparent"&gt;blue&lt;/span&gt;.&lt;/p&gt;</pre>

  </div>



  <h5 id=embedding-custom-non-visible-data><span class=secno>3.2.3.8 </span><dfn>Embedding custom non-visible data</dfn></h5>

  <p>A <dfn id=custom-data-attribute>custom data attribute</dfn> is an attribute in no
  namespace whose name starts with the string "<dfn id=attr-data-* title=attr-data-*><code>data-</code></dfn>", has at least one
  character after the hyphen, is <a href=#xml-compatible>XML-compatible</a>, and
  contains no characters in the range U+0041 to U+005A (LATIN CAPITAL
  LETTER A to LATIN CAPITAL LETTER Z).</p>

  <p class=note>All attributes on <a href=#html-elements>HTML elements</a> in
  <a href=#html-documents>HTML documents</a> get ASCII-lowercased automatically, so
  the restriction on ASCII uppercase letters doesn't affect such
  documents.</p>

  <p><a href=#custom-data-attribute title="custom data attribute">Custom data attributes</a>
  are intended to store custom data private to the page or
  application, for which there are no more appropriate attributes or
  elements.</p>

  <p>These attributes are not intended for use by software that is
  independent of the site that uses the attributes.</p>

  <div class=example>

   <p>For instance, a site about music could annotate list items
   representing tracks in an album with custom data attributes
   containing the length of each track. This information could then be
   used by the site itself to allow the user to sort the list by track
   length, or to filter the list for tracks of certain lengths.</p>

   <pre>&lt;ol&gt;
 &lt;li data-length="2m11s"&gt;Beyond The Sea&lt;/li&gt;
 ...
&lt;/ol&gt;</pre>

   <p>It would be inappropriate, however, for the user to use generic
   software not associated with that music site to search for tracks
   of a certain length by looking at this data.</p>

   <p>This is because these attributes are intended for use by the
   site's own scripts, and are not a generic extension mechanism for
   publicly-usable metadata.</p>

  </div>

  <p>Every <a href=#html-elements title="HTML elements">HTML element</a> may have
  any number of <a href=#custom-data-attribute title="custom data attribute">custom data
  attributes</a> specified, with any value.</p>

  <hr><dl class=domintro><dt><var title="">element</var> . <code title=dom-dataset><a href=#dom-dataset>dataset</a></code></dt>
   <dd>

    <p>Returns a <code><a href=#domstringmap>DOMStringMap</a></code> object for the element's <code title=attr-data-*><a href=#attr-data-*>data-*</a></code> attributes.</p>

    <p>Hyphenated names become camel-cased. For example, <code title="">data-foo-bar=""</code> becomes <code title="">element.dataset.fooBar</code>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-dataset title=dom-dataset><code>dataset</code></dfn> IDL
  attribute provides convenient accessors for all the <code title=attr-data-*><a href=#attr-data-*>data-*</a></code> attributes on an element. On
  getting, the <code title=dom-dataset><a href=#dom-dataset>dataset</a></code> IDL attribute
  must return a <code><a href=#domstringmap>DOMStringMap</a></code> object, associated with the
  following algorithms, which expose these attributes on their
  element:</p>

  <dl><dt>The algorithm for getting the list of name-value pairs</dt>

   <dd>
    <ol><li>Let <var title="">list</var> be an empty list of name-value
     pairs.</li>

     <li>For each content attribute on the element whose first five
     characters are the string "<code title="">data-</code>" and whose
     remaining characters (if any) do not include any characters in
     the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN
     CAPITAL LETTER Z), add a name-value pair to <var title="">list</var> whose name is the attribute's name with the
     first five characters removed and whose value is the attribute's
     value.</li>

     <li>For each name on the list, for each U+002D HYPHEN-MINUS
     character (-) in the name that is followed by a character in the
     range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A
     LATIN SMALL LETTER Z), remove the U+002D HYPHEN-MINUS character
     (-) and replace the character that followed it by the same
     character <a href=#converted-to-ascii-uppercase>converted to ASCII uppercase</a>.</li>

     <li>Return <var title="">list</var>.</li>

    </ol></dd>

   <dt>The algorithm for setting names to certain values</dt>

   <dd>
    <ol><li>Let <var title="">name</var> be the name passed to the
     algorithm.</li>

     <li>Let <var title="">value</var> be the value passed to the
     algorithm.</li>

     <li>If <var title="">name</var> contains a U+002D HYPHEN-MINUS
     character (-) followed by a character in the range U+0061 to
     U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
     Z), throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and abort these
     steps.</li>

     <li>For each character in the range U+0041 to U+005A (U+0041
     LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z) in <var title="">name</var>, insert a U+002D HYPHEN-MINUS character (-)
     before the character and replace the character with the same
     character <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>

     <li>Insert the string <code title="">data-</code> at the front of
     <var title="">name</var>.</li>

     <li>Set the value of the attribute with the name <var title="">name</var>, to the value <var title="">value</var>,
     replacing any previous value if the attribute already existed. If
     <code title="">setAttribute()</code> would have raised an
     exception when setting an attribute with the name <var title="">name</var>, then this must raise the same
     exception.</li>

    </ol></dd>

   <dt>The algorithm for deleting names</dt>

   <dd>
    <ol><li>Let <var title="">name</var> be the name passed to the
     algorithm.</li>

     <li>If <var title="">name</var> contains a U+002D HYPHEN-MINUS
     character (-) followed by a character in the range U+0061 to
     U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
     Z), throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and abort these
     steps.</li>

     <li>For each character in the range U+0041 to U+005A (U+0041
     LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z) in <var title="">name</var>, insert a U+002D HYPHEN-MINUS character (-)
     before the character and replace the character with the same
     character <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>

     <li>Insert the string <code title="">data-</code> at the front of
     <var title="">name</var>.</li>

     <li>Remove the attribute with the name <var title="">name</var>,
     if such an attribute exists. Do nothing otherwise.</li>

    </ol></dd>

  </dl><p>The same object must be returned each time.</p>

  </div>

  <div class=example>

   <p>If a Web page wanted an element to represent a space ship,
   e.g. as part of a game, it would have to use the <code title=attr-class><a href=#classes>class</a></code> attribute along with <code title=attr-data-*><a href=#attr-data-*>data-*</a></code> attributes:</p>

   <pre>&lt;div class="spaceship" data-ship-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90"&gt;
 &lt;button class="fire"
         onclick="spaceships[this.parentNode.dataset.shipId].fire()"&gt;
  Fire
 &lt;/button&gt;
&lt;/div&gt;</pre>

   <p>Notice how the hyphenated attribute name becomes capitalized in
   the API.</p>

  </div>

  <p>Authors should carefully design such extensions so that when the
  attributes are ignored and any associated CSS dropped, the page is
  still usable.</p>

  <div class=impl>

  <p>User agents must not derive any implementation behavior from
  these attributes or values. Specifications intended for user agents
  must not define these attributes to have any meaningful values.</p>

  </div>

  <p>JavaScript libraries may use the <a href=#custom-data-attribute title="custom data
  attribute">custom data attributes</a>, as they are considered to
  be part of the page on which they are used. Authors of libraries
  that are reused by many authors are encouraged to include their name
  in the attribute names, to reduce the risk of clashes.</p>

  <div class=example>

   <p>For example, a library called "DoQuery" could use attribute
   names like <code title="">data-doquery-range</code>, and a library
   called "jJo" could use attributes names like <code title="">data-jjo-range</code>.</p>

  </div>


  <h4 id=element-definitions><span class=secno>3.2.4 </span>Element definitions</h4>

  <p>Each element in this specification has a definition that includes
  the following information:</p>

  <dl><dt>Categories</dt>

   <dd>A list of <a href=#content-categories title="content categories">categories</a> to
   which the element belongs. These are used when defining the
   <a href=#content-models>content models</a> for each element.</dd>


   <dt>Contexts in which this element may be used</dt>

   <dd>A <em>non-normative</em> description of where the element can
   be used. This information is redundant with the content models of
   elements that allow this one as a child, and is provided only as a
   convenience.</dd>


   <dt>Content model</dt>

   <dd>A normative description of what content must be included as
   children and descendants of the element.</dd>


   <dt>Content attributes</dt>

   <dd>A normative list of attributes that may be specified on the
   element (except where otherwise disallowed).</dd>


   <dt>DOM interface</dt>

   <dd>A normative definition of a DOM interface that such elements
   must implement.</dd>

  </dl><p>This is then followed by a description of what the element
  <a href=#represents>represents</a>, along with any additional normative
  conformance criteria that may apply to authors<span class=impl title=""> and implementations</span>. Examples are sometimes
  also included.</p>


  <h5 id=attributes><span class=secno>3.2.4.1 </span>Attributes</h5>

  <p id=attribute-text>Except where otherwise specified, attributes
  on <a href=#html-elements>HTML elements</a> may have any string value, including
  the empty string. Except where explicitly stated, there is no
  restriction on what text can be specified in such attributes.</p>



  <h4 id=content-models><span class=secno>3.2.5 </span><dfn>Content models</dfn></h4>

  <p>Each element defined in this specification has a content model: a
  description of the element's expected contents. An <a href=#html-elements title="HTML
  elements">HTML element</a> must have contents that match the
  requirements described in the element's content model.</p>

  <p class=note>As noted in the conformance and terminology
  sections, for the purposes of determining if an element matches its
  content model or not, <a href=#text-node title="text
  node"><code>CDATASection</code> nodes in the DOM are treated as
  equivalent to <code>Text</code> nodes</a>, and <a href=#entity-references>entity reference nodes are treated as if
  they were expanded in place</a>.</p>

  <p>The <a href=#space-character title="space character">space characters</a> are
  always allowed between elements. User agents represent these
  characters between elements in the source markup as text nodes in
  the DOM.<!-- not a conf criteria since the parser now requires this
  --> Empty <a href=#text-node title="text node">text nodes</a> and <a href=#text-node title="text node">text nodes</a> consisting of just sequences of
  those characters are considered <dfn id=inter-element-whitespace>inter-element
  whitespace</dfn>.</p>

  <p><a href=#inter-element-whitespace>Inter-element whitespace</a>, comment nodes, and
  processing instruction nodes must be ignored when establishing
  whether an element's contents match the element's content model or
  not, and must be ignored when following algorithms that define
  document and element semantics.</p>

  <p>An element <var title="">A</var> is said to be <dfn id=preceded-or-followed>preceded or
  followed</dfn> by a second element <var title="">B</var> if <var title="">A</var> and <var title="">B</var> have the same parent node
  and there are no other element nodes or text nodes (other than
  <a href=#inter-element-whitespace>inter-element whitespace</a>) between them.</p>

  <p>Authors must not use <a href=#html-elements>HTML elements</a> anywhere except
  where they are explicitly allowed, as defined for each element, or
  as explicitly required by other specifications. For XML compound
  documents, these contexts could be inside elements from other
  namespaces, if those elements are defined as providing the relevant
  contexts.</p>

  <div class=example>
   <p>For example, the Atom specification defines a <code title="">content</code> element. When its <code title="">type</code> attribute has the value <code title="">xhtml</code>, the Atom specification requires that it
   contain a single HTML <code><a href=#the-div-element>div</a></code> element. Thus, a
   <code><a href=#the-div-element>div</a></code> element is allowed in that context, even though
   this is not explicitly normatively stated by this specification. <a href=#refsATOM>[ATOM]</a></p>
  </div>

  <p>In addition, <a href=#html-elements>HTML elements</a> may be orphan nodes
  (i.e. without a parent node).</p>

  <div class=example>

   <p>For example, creating a <code><a href=#the-td-element>td</a></code> element and storing it
   in a global variable in a script is conforming, even though
   <code><a href=#the-td-element>td</a></code> elements are otherwise only supposed to be used
   inside <code><a href=#the-tr-element>tr</a></code> elements.</p>

   <pre>var data = {
  name: "Banana",
  cell: document.createElement('td'),
};</pre>

  </div>


  <h5 id=kinds-of-content><span class=secno>3.2.5.1 </span>Kinds of content</h5>

  <p>Each element in HTML falls into zero or more <dfn id=content-categories title="content
  categories">categories</dfn> that group elements with similar
  characteristics together. The following broad categories are used in
  this specification:</p>

  <ul class=brief><li><a href=#metadata-content>Metadata content</a></li>
   <li><a href=#flow-content>Flow content</a></li>
   <li><a href=#sectioning-content>Sectioning content</a></li>
   <li><a href=#heading-content>Heading content</a></li>
   <li><a href=#phrasing-content>Phrasing content</a></li>
   <li><a href=#embedded-content>Embedded content</a></li>
   <li><a href=#interactive-content>Interactive content</a></li>
  </ul><p class=note>Some elements also fall into other categories, which
  are defined in other parts of this specification.</p>

  <p>These categories are related as follows:</p>

  <p><object data=images/content-venn.svg height=288 width=1000><img alt="Sectioning content, heading content, phrasing content, and
  embedded content are all types of flow content. Embedded content is
  also a type of phrasing content." src=images/content-venn.png></object></p>

  <p>In addition, certain elements are categorized as <a href=#form-associated-element title="form-associated element">form-associated elements</a> and
  further subcategorized to define their role in various form-related
  processing models.</p>

  <p>Some elements have unique requirements and do not fit into any
  particular category.</p>


  <h6 id=metadata-content-0><span class=secno>3.2.5.1.1 </span>Metadata content</h6>

  <p><dfn id=metadata-content>Metadata content</dfn> is content that sets up the
  presentation or behavior of the rest of the content, or that sets
  up the relationship of the document with other documents, or that
  conveys other "out of band" information.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href=#the-base-element>base</a></code></li>
   <li><code><a href=#the-command>command</a></code></li>
   <li><code><a href=#the-link-element>link</a></code></li>
   <li><code><a href=#meta>meta</a></code></li>
   <li><code><a href=#the-noscript-element>noscript</a></code></li>
   <li><code><a href=#script>script</a></code></li>
   <li><code><a href=#the-style-element>style</a></code></li>
   <li><code><a href=#the-title-element-0>title</a></code></li>
  </ul><p>Elements from other namespaces whose semantics are primarily
  metadata-related (e.g. RDF) are also <a href=#metadata-content>metadata
  content</a>.</p>

  <div class=example>

   <p>Thus, in the XML serialization, one can use RDF, like this:</p>

   <pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#"&gt;
 &lt;head&gt;
  &lt;title&gt;Hedral's Home Page&lt;/title&gt;
  &lt;r:RDF&gt;
   &lt;Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
           r:about="http://hedral.example.com/#"&gt;
    &lt;fullName&gt;Cat Hedral&lt;/fullName&gt;
    &lt;mailbox r:resource="mailto:hedral@damowmow.com"/&gt;
    &lt;personalTitle&gt;Sir&lt;/personalTitle&gt;
   &lt;/Person&gt;
  &lt;/r:RDF&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;My home page&lt;/h1&gt;
  &lt;p&gt;I like playing with string, I guess. Sister says squirrels are fun
  too so sometimes I follow her to play with them.&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

   <p>This isn't possible in the HTML serialization, however.</p>

  </div>


  <h6 id=flow-content-0><span class=secno>3.2.5.1.2 </span>Flow content</h6>

  <p>Most elements that are used in the body of documents and
  applications are categorized as <dfn id=flow-content>flow content</dfn>.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href=#the-a-element>a</a></code></li>
   <li><code><a href=#the-abbr-element>abbr</a></code></li>
   <li><code><a href=#the-address-element>address</a></code></li>
   <li><code><a href=#the-area-element>area</a></code> (if it is a descendant of a <code><a href=#the-map-element>map</a></code> element)</li>
   <li><code><a href=#the-article-element>article</a></code></li>
   <li><code><a href=#the-aside-element>aside</a></code></li>
   <li><code><a href=#audio>audio</a></code></li>
   <li><code><a href=#the-b-element>b</a></code></li>
   <li><code><a href=#the-bdo-element>bdo</a></code></li>
   <li><code><a href=#the-blockquote-element>blockquote</a></code></li>
   <li><code><a href=#the-br-element>br</a></code></li>
   <li><code><a href=#the-button-element>button</a></code></li>
   <li><code><a href=#the-canvas-element>canvas</a></code></li>
   <li><code><a href=#the-cite-element>cite</a></code></li>
   <li><code><a href=#the-code-element>code</a></code></li>
   <li><code><a href=#the-command>command</a></code></li>
<!-- v2DATAGRID   <li><code>datagrid</code></li> -->
   <li><code><a href=#the-datalist-element>datalist</a></code></li>
   <li><code><a href=#the-del-element>del</a></code></li>
   <li><code><a href=#the-details-element>details</a></code></li>
   <li><code><a href=#the-dfn-element>dfn</a></code></li>
   <li><code><a href=#the-div-element>div</a></code></li>
   <li><code><a href=#the-dl-element>dl</a></code></li>
   <li><code><a href=#the-em-element>em</a></code></li>
   <li><code><a href=#the-embed-element>embed</a></code></li>
   <li><code><a href=#the-fieldset-element>fieldset</a></code></li>
   <li><code><a href=#the-figure-element>figure</a></code></li>
   <li><code><a href=#the-footer-element>footer</a></code></li>
   <li><code><a href=#the-form-element>form</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code></li>
   <li><code><a href=#the-header-element>header</a></code></li>
   <li><code><a href=#the-hgroup-element>hgroup</a></code></li>
   <li><code><a href=#the-hr-element>hr</a></code></li>
   <li><code><a href=#the-i-element>i</a></code></li>
   <li><code><a href=#the-iframe-element>iframe</a></code></li>
   <li><code><a href=#the-img-element>img</a></code></li>
   <li><code><a href=#the-input-element>input</a></code></li>
   <li><code><a href=#the-ins-element>ins</a></code></li>
   <li><code><a href=#the-kbd-element>kbd</a></code></li>
   <li><code><a href=#the-keygen-element>keygen</a></code></li>
   <li><code><a href=#the-label-element>label</a></code></li>

   <li><code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>

   <li><code><a href=#the-map-element>map</a></code></li>
   <li><code><a href=#the-mark-element>mark</a></code></li>
   <li><code><a href=#math>math</a></code></li>
   <li><code><a href=#menus>menu</a></code></li>

   <li><code><a href=#meta>meta</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>

   <li><code><a href=#the-meter-element>meter</a></code></li>
   <li><code><a href=#the-nav-element>nav</a></code></li>
   <li><code><a href=#the-noscript-element>noscript</a></code></li>
   <li><code><a href=#the-object-element>object</a></code></li>
   <li><code><a href=#the-ol-element>ol</a></code></li>
   <li><code><a href=#the-output-element>output</a></code></li>
   <li><code><a href=#the-p-element>p</a></code></li>
   <li><code><a href=#the-pre-element>pre</a></code></li>
   <li><code><a href=#the-progress-element>progress</a></code></li>
   <li><code><a href=#the-q-element>q</a></code></li>
   <li><code><a href=#the-ruby-element>ruby</a></code></li>
   <li><code><a href=#the-samp-element>samp</a></code></li>
   <li><code><a href=#script>script</a></code></li>
   <li><code><a href=#the-section-element>section</a></code></li>
   <li><code><a href=#the-select-element>select</a></code></li>
   <li><code><a href=#the-small-element>small</a></code></li>
   <li><code><a href=#the-span-element>span</a></code></li>
   <li><code><a href=#the-strong-element>strong</a></code></li>
   <li><code><a href=#the-style-element>style</a></code> (if the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is present)</li>
   <li><code><a href=#the-sub-and-sup-elements>sub</a></code></li>
   <li><code><a href=#the-sub-and-sup-elements>sup</a></code></li>
   <li><code><a href=#svg>svg</a></code></li>
   <li><code><a href=#the-table-element>table</a></code></li>
   <li><code><a href=#the-textarea-element>textarea</a></code></li>
   <li><code><a href=#the-time-element>time</a></code></li>
   <li><code><a href=#the-ul-element>ul</a></code></li>
   <li><code><a href=#the-var-element>var</a></code></li>
   <li><code><a href=#video>video</a></code></li>
   <li><code><a href=#the-wbr-element>wbr</a></code></li>
   <li><a href=#text-content title="text content">Text</a></li>
  </ul><p>As a general rule, elements whose content model allows any
  <a href=#flow-content>flow content</a> should have either at least one descendant
  <a href=#text-node>text node</a> that is not <a href=#inter-element-whitespace>inter-element
  whitespace</a>, or at least one descendant element node that is
  <a href=#embedded-content>embedded content</a>. For the purposes of this requirement,
  <code><a href=#the-del-element>del</a></code> elements and their descendants must not be counted
  as contributing to the ancestors of the <code><a href=#the-del-element>del</a></code>
  element.</p>

  <p>This requirement is not a hard requirement, however, as there are
  many cases where an element can be empty legitimately, for example
  when it is used as a placeholder which will later be filled in by a
  script, or when the element is part of a template and would on most
  pages be filled in but on some pages is not relevant.</p>


  <h6 id=sectioning-content-0><span class=secno>3.2.5.1.3 </span>Sectioning content</h6>

  <p><dfn id=sectioning-content>Sectioning content</dfn> is content that defines the scope
  of <a href=#heading-content title="heading content">headings</a> and <a href=#the-footer-element title=footer>footers</a>.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href=#the-article-element>article</a></code></li>
   <li><code><a href=#the-aside-element>aside</a></code></li>
   <li><code><a href=#the-nav-element>nav</a></code></li>
   <li><code><a href=#the-section-element>section</a></code></li>
  </ul><p>Each <a href=#sectioning-content>sectioning content</a> element potentially has a
  heading and an <a href=#outline>outline</a>. See the section on
  <a href=#headings-and-sections>headings and sections</a> for further details.</p>

  <p class=note>There are also certain elements that are <a href=#sectioning-root title="sectioning root">sectioning roots</a>. These are distinct
  from <a href=#sectioning-content>sectioning content</a>, but they can also have an
  <a href=#outline>outline</a>.</p>


  <h6 id=heading-content-0><span class=secno>3.2.5.1.4 </span>Heading content</h6>

  <p><dfn id=heading-content>Heading content</dfn> defines the header of a section
  (whether explicitly marked up using <a href=#sectioning-content>sectioning content</a>
  elements, or implied by the heading content itself).</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code></li>
   <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code></li>
   <li><code><a href=#the-hgroup-element>hgroup</a></code></li>
  </ul><h6 id=phrasing-content-0><span class=secno>3.2.5.1.5 </span>Phrasing content</h6>

  <p><dfn id=phrasing-content>Phrasing content</dfn> is the text of the document, as well
  as elements that mark up that text at the intra-paragraph
  level. Runs of <a href=#phrasing-content>phrasing content</a> form <a href=#paragraph title=paragraph>paragraphs</a>.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href=#the-a-element>a</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)</li>
   <li><code><a href=#the-abbr-element>abbr</a></code></li>
   <li><code><a href=#the-area-element>area</a></code> (if it is a descendant of a <code><a href=#the-map-element>map</a></code> element)</li>
   <li><code><a href=#audio>audio</a></code></li>
   <li><code><a href=#the-b-element>b</a></code></li>
   <li><code><a href=#the-bdo-element>bdo</a></code></li>
   <li><code><a href=#the-br-element>br</a></code></li>
   <li><code><a href=#the-button-element>button</a></code></li>
   <li><code><a href=#the-canvas-element>canvas</a></code></li>
   <li><code><a href=#the-cite-element>cite</a></code></li>
   <li><code><a href=#the-code-element>code</a></code></li>
   <li><code><a href=#the-command>command</a></code></li>
   <li><code><a href=#the-datalist-element>datalist</a></code></li>
   <li><code><a href=#the-del-element>del</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)</li>
   <li><code><a href=#the-dfn-element>dfn</a></code></li>
   <li><code><a href=#the-em-element>em</a></code></li>
   <li><code><a href=#the-embed-element>embed</a></code></li>
   <li><code><a href=#the-i-element>i</a></code></li>
   <li><code><a href=#the-iframe-element>iframe</a></code></li>
   <li><code><a href=#the-img-element>img</a></code></li>
   <li><code><a href=#the-input-element>input</a></code></li>
   <li><code><a href=#the-ins-element>ins</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)</li>
   <li><code><a href=#the-kbd-element>kbd</a></code></li>
   <li><code><a href=#the-keygen-element>keygen</a></code></li>
   <li><code><a href=#the-label-element>label</a></code></li>

   <li><code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>

   <li><code><a href=#the-map-element>map</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)</li>
   <li><code><a href=#the-mark-element>mark</a></code></li>
   <li><code><a href=#math>math</a></code></li>

   <li><code><a href=#meta>meta</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>

   <li><code><a href=#the-meter-element>meter</a></code></li>
   <li><code><a href=#the-noscript-element>noscript</a></code></li>
   <li><code><a href=#the-object-element>object</a></code></li>
   <li><code><a href=#the-output-element>output</a></code></li>
   <li><code><a href=#the-progress-element>progress</a></code></li>
   <li><code><a href=#the-q-element>q</a></code></li>
   <li><code><a href=#the-ruby-element>ruby</a></code></li>
   <li><code><a href=#the-samp-element>samp</a></code></li>
   <li><code><a href=#script>script</a></code></li>
   <li><code><a href=#the-select-element>select</a></code></li>
   <li><code><a href=#the-small-element>small</a></code></li>
   <li><code><a href=#the-span-element>span</a></code></li>
   <li><code><a href=#the-strong-element>strong</a></code></li>
   <li><code><a href=#the-sub-and-sup-elements>sub</a></code></li>
   <li><code><a href=#the-sub-and-sup-elements>sup</a></code></li>
   <li><code><a href=#svg>svg</a></code></li>
   <li><code><a href=#the-textarea-element>textarea</a></code></li>
   <li><code><a href=#the-time-element>time</a></code></li>
   <li><code><a href=#the-var-element>var</a></code></li>
   <li><code><a href=#video>video</a></code></li>
   <li><code><a href=#the-wbr-element>wbr</a></code></li>
   <li><a href=#text-content title="text content">Text</a></li>
  </ul><p>As a general rule, elements whose content model allows any
  <a href=#phrasing-content>phrasing content</a> should have either at least one
  descendant <a href=#text-node>text node</a> that is not <a href=#inter-element-whitespace>inter-element
  whitespace</a>, or at least one descendant element node that is
  <a href=#embedded-content>embedded content</a>. For the purposes of this requirement,
  nodes that are descendants of <code><a href=#the-del-element>del</a></code> elements must not be
  counted as contributing to the ancestors of the <code><a href=#the-del-element>del</a></code>
  element.</p>

  <p class=note>Most elements that are categorized as phrasing
  content can only contain elements that are themselves categorized as
  phrasing content, not any flow content.</p>

  <p><dfn id=text-content title="text content">Text</dfn>, in the context of content
  models, means <a href=#text-node title="text node">text nodes</a>. <a href=#text-content title="text content">Text</a> is sometimes used as a content
  model on its own, but is also <a href=#phrasing-content>phrasing content</a>, and can
  be <a href=#inter-element-whitespace>inter-element whitespace</a> (if the <a href=#text-node title="text
  node">text nodes</a> are empty or contain just <a href=#space-character title="space
  character">space characters</a>).</p>


  <h6 id=embedded-content-0><span class=secno>3.2.5.1.6 </span>Embedded content</h6>

  <p><dfn id=embedded-content>Embedded content</dfn> is content that imports another
  resource into the document, or content from another vocabulary that
  is inserted into the document.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href=#audio>audio</a></code></li>
   <li><code><a href=#the-canvas-element>canvas</a></code></li>
   <li><code><a href=#the-embed-element>embed</a></code></li>
   <li><code><a href=#the-iframe-element>iframe</a></code></li>
   <li><code><a href=#the-img-element>img</a></code></li>
   <li><code><a href=#math>math</a></code></li>
   <li><code><a href=#the-object-element>object</a></code></li>
   <li><code><a href=#svg>svg</a></code></li>
   <li><code><a href=#video>video</a></code></li>
  </ul><p>Elements that are from namespaces other than the <a href=#html-namespace-0>HTML
  namespace</a> and that convey content but not metadata, are
  <a href=#embedded-content>embedded content</a> for the purposes of the content models
  defined in this specification. (For example, MathML, or SVG.)</p>

  <p>Some embedded content elements can have <dfn id=fallback-content>fallback
  content</dfn>: content that is to be used when the external resource
  cannot be used (e.g. because it is of an unsupported format). The
  element definitions state what the fallback is, if any.</p>


  <h6 id=interactive-content-0><span class=secno>3.2.5.1.7 </span>Interactive content</h6>

<!--
TESTS:
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cp%20tabindex%3D1%3Etest%20%3Ca%20href%3D%22%22%3E%20%3Cem%3Etest%3C/em%3E%20%3C/a%3E%0A%3Cscript%3E%0A%20function%20test%20%28e%29%20%7B%20w%28e.type%20+%20%27%20on%20%27%20+%20e.target.tagName%20+%20%27%20through%20%27%20+%20e.currentTarget.tagName%29%3B%20%7D%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%3C/script%3E%0A
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Ca%20href%3Dhttp%3A//google.com/%20target%3Da%3EA%3C/a%3E%3Ca%20href%3Dhttp%3A//yahoo.com/%20target%3Db%3EB%3C/a%3E%3Cbr%3E%0A%3Ciframe%20name%3Da%3E%3C/iframe%3E%3Ciframe%20name%3Db%3E%3C/iframe%3E%0A%3Cscript%3E%0A%20var%20a%20%3D%20document.getElementsByTagName%28%27a%27%29%5B0%5D%3B%0A%20var%20b%20%3D%20document.getElementsByTagName%28%27a%27%29%5B1%5D%3B%0A%20a.appendChild%28b%29%3B%0A%3C/script%3E
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%20onsubmit%3D%22w%28%27onsubmit%27%29%22%3E%3Cem%3EA%3C/em%3E%3C/form%3E%0A%3Cscript%3E%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.attachEvent%28%27onsubmit%27%2C%20function%20%28%29%20%7B%20w%28%27submit%20fired%27%29%20%7D%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.fireEvent%28%27onsubmit%27%29%3B%0A%3C/script%3E
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%3EX%3C/form%3E%0A%3Cscript%3E%0Avar%20evt%20%3D%20document.createEvent%28%22Events%22%29%3B%0Aevt.initEvent%28%22submit%22%2C%20true%2C%20true%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.dispatchEvent%28evt%29%3B%0A%3C/script%3E
-->

  <p><dfn id=interactive-content>Interactive content</dfn> is content that is specifically
  intended for user interaction.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href=#the-a-element>a</a></code></li>
   <li><code><a href=#audio>audio</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present)</li>
   <li><code><a href=#the-button-element>button</a></code></li>
<!-- v2DATAGRID   <li><code>datagrid</code></li> -->
   <li><code><a href=#the-details-element>details</a></code></li>
   <li><code><a href=#the-embed-element>embed</a></code></li>
   <li><code><a href=#the-iframe-element>iframe</a></code></li>
   <li><code><a href=#the-img-element>img</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)</li>
   <li><code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state)</li>
   <li><code><a href=#the-keygen-element>keygen</a></code></li>
   <li><code><a href=#the-label-element>label</a></code></li>
   <li><code><a href=#menus>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state)</li>
   <li><code><a href=#the-object-element>object</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)<!-- see also comment in <object> section --></li>
   <li><code><a href=#the-select-element>select</a></code></li>
   <li><code><a href=#the-textarea-element>textarea</a></code></li>
   <li><code><a href=#video>video</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present)</li>
  </ul><p>Certain elements in HTML have an <a href=#activation-behavior>activation
  behavior</a>, which means that the user can activate them. This
  triggers a sequence of events dependent on the activation mechanism,
  and normally culminating in a <code title=event-click><a href=#event-click>click</a></code>
  event followed by a <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code> event<span class=impl>, as described below</span>.</p>

  <div class=impl>

  <p>The user agent should allow the user to manually trigger elements
  that have an <a href=#activation-behavior>activation behavior</a>, for instance using
  keyboard or voice input, or through mouse clicks. When the user
  triggers an element with a defined <a href=#activation-behavior>activation behavior</a>
  in a manner other than clicking it, the default action of the
  interaction event must be to <a href=#run-synthetic-click-activation-steps>run synthetic click activation
  steps</a> on the element.</p> <!-- interaction event spec point -->

  <p>When a user agent is to <dfn id=run-synthetic-click-activation-steps>run synthetic click activation
  steps</dfn> on an element, the user agent must <a href=#run-pre-click-activation-steps>run pre-click
  activation steps</a> on the element, then <a href=#fire-a-click-event>fire a <code title=event-click>click</code> event</a> at the element. The
  default action of this <code title=event-click><a href=#event-click>click</a></code> event
  must be to <a href=#run-post-click-activation-steps>run post-click activation steps</a> on the
  element. If the event is canceled, the user agent must <a href=#run-canceled-activation-steps>run
  canceled activation steps</a> on the element instead.</p>

  <p>Given an element <var title="">target</var>, the <dfn id=nearest-activatable-element>nearest
  activatable element</dfn> is the element returned by the following
  algorithm:</p>

  <ol><li><p>If <var title="">target</var> has a defined <a href=#activation-behavior>activation
   behavior</a>, then return <var title="">target</var> and abort
   these steps.</li>

   <li><p>If <var title="">target</var> has a parent element, then set
   <var title="">target</var> to that parent element and return to the
   first step.</li>

   <li><p>Otherwise, there is no <a href=#nearest-activatable-element>nearest activatable
   element</a>.</li>

  </ol><p>When a pointing device is clicked, the user agent must run these
  steps:</p>

  <ol><li><p>Let <var title="">e</var> be the <span title="">nearest
   activatable element</span> of the element designated by the user,
   if any.</li>

   <li><p>If there is an element <var title="">e</var>, <a href=#run-pre-click-activation-steps>run
   pre-click activation steps</a> on it.</li>

   <li>

    <p>Dispatch the required <code title=event-click><a href=#event-click>click</a></code>
    event.</p> <!-- interaction event spec point -->

    <p>If there is an element <var title="">e</var>, then the default
    action of the <code title=event-click><a href=#event-click>click</a></code> event must be
    to <a href=#run-post-click-activation-steps>run post-click activation steps</a> on element <var title="">e</var>.</p>

    <p>If there is an element <var title="">e</var> but the event is
    canceled, the user agent must <a href=#run-canceled-activation-steps>run canceled activation
    steps</a> on element <var title="">e</var>.</p>

   </li>

  </ol><p class=note>The above doesn't happen for arbitrary synthetic
  events dispatched by author script. However, the <code title=dom-click><a href=#dom-click>click()</a></code> method can be used to make it
  happen programmatically.</p>

  <p>When a user agent is to <dfn id=run-pre-click-activation-steps>run pre-click activation steps</dfn>
  on an element, it must run the <dfn id=pre-click-activation-steps>pre-click activation steps</dfn>
  defined for that element, if any.</p>

  <p>When a user agent is to <dfn id=run-post-click-activation-steps>run post-click activation
  steps</dfn> on an element, the user agent must <a href=#fire-a-simple-event>fire a simple
  event</a> named <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code> that is cancelable at
  that element. The default action of this event must be to <a href=#run-final-activation-steps>run
  final activation steps</a> on that element. If the event is
  canceled, the user agent must <a href=#run-canceled-activation-steps>run canceled activation
  steps</a> on the element instead.</p>

  <p>When a user agent is to <dfn id=run-canceled-activation-steps>run canceled activation steps</dfn>
  on an element, it must run the <dfn id=canceled-activation-steps>canceled activation steps</dfn>
  defined for that element, if any.</p>

  <p>When a user agent is to <dfn id=run-final-activation-steps>run final activation steps</dfn> on
  an element, it must run the <dfn id=activation-behavior>activation behavior</dfn> defined
  for that element. Activation behaviors can refer to the <code title=event-click><a href=#event-click>click</a></code> and <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code> events that were fired
  by the steps above leading up to this point.</p>

  </div>


  <h5 id=transparent-content-models><span class=secno>3.2.5.2 </span>Transparent content models</h5>

  <p>Some elements are described as <dfn id=transparent>transparent</dfn>; they have
  "transparent" in the description of their content model.</p>

  <p>When a content model includes a part that is "transparent", those
  parts must not contain content that would not be conformant if all
  transparent elements in the tree were replaced, in their parent
  element, by the children in the "transparent" part of their content
  model, retaining order.</p>

  <div class=example>

   <p>Consider the following markup fragment:</p>

   <pre>&lt;p&gt;Hello &lt;a href="world.html"&gt;&lt;em&gt;wonderful&lt;/em&gt; world&lt;/a&gt;!&lt;/p&gt;</pre>

   <p>Its DOM looks like the following:</p>

   <ul class=domTree><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">Hello </span><li class=t1><code><a href=#the-a-element>a</a></code> <span class=t2 title=""><code class="attribute name">href</code>="<code class="attribute value">world.html</code>"</span><ul><li class=t1><code><a href=#the-em-element>em</a></code><ul><li class=t3><code>#text</code>: <span title="">wonderful</span></ul><li class=t3><code>#text</code>: <span title=""> world</span></ul><li class=t3><code>#text</code>: <span title="">!</span></ul></ul><p>The content model of the <code><a href=#the-a-element>a</a></code> element is
   <a href=#transparent>transparent</a>. To see if its contents are conforming,
   therefore, the element is replaced by its contents:</p>

   <ul class=domTree><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">Hello </span><li class=t1><code><a href=#the-em-element>em</a></code><ul><li class=t3><code>#text</code>: <span title="">wonderful</span></ul><li class=t3><code>#text</code>: <span title=""> world</span><li class=t3><code>#text</code>: <span title="">!</span></ul></ul><p>Since that is conforming, the contents of the <code><a href=#the-a-element>a</a></code> are
   conforming in the original fragment.</p>

  </div>

  <p>When a transparent element has no parent, then the part of its
  content model that is "transparent" must instead be treated as
  accepting any <a href=#flow-content>flow content</a>.</p>


  <h5 id=paragraphs><span class=secno>3.2.5.3 </span>Paragraphs</h5>

  <p class=note>The term <a href=#paragraph>paragraph</a> as defined in this
  section is distinct from (though related to) the <code><a href=#the-p-element>p</a></code>
  element defined later. The <a href=#paragraph>paragraph</a> concept defined
  here is used to describe how to interpret documents.</p>

  <p>A <dfn id=paragraph>paragraph</dfn> is typically a run of <a href=#phrasing-content>phrasing
  content</a> that forms a block of text with one or more sentences
  that discuss a particular topic, as in typography, but can also be
  used for more general thematic grouping. For instance, an address is
  also a paragraph, as is a part of a form, a byline, or a stanza in a
  poem.</p>

  <div class=example>

   <p>In the following example, there are two paragraphs in a
   section. There is also a heading, which contains phrasing content
   that is not a paragraph. Note how the comments and
   <a href=#inter-element-whitespace>inter-element whitespace</a> do not form paragraphs.</p>

   <pre>&lt;section&gt;
  &lt;h1&gt;Example of paragraphs&lt;/h1&gt;
  This is the &lt;em&gt;first&lt;/em&gt; paragraph in this example.
  &lt;p&gt;This is the second.&lt;/p&gt;
  &lt;!-- This is not a paragraph. --&gt;
&lt;/section&gt;</pre>

  </div>

  <p>Paragraphs in <a href=#flow-content>flow content</a> are defined relative to
  what the document looks like without the <code><a href=#the-a-element>a</a></code>,
  <code><a href=#the-ins-element>ins</a></code>, <code><a href=#the-del-element>del</a></code>, and <code><a href=#the-map-element>map</a></code> elements
  complicating matters, since those elements, with their hybrid
  content models, can straddle paragraph boundaries, as shown in the
  first two examples below.</p>

  <p class=note>Generally, having elements straddle paragraph
  boundaries is best avoided. Maintaining such markup can be
  difficult.</p>

  <div class=example>

   <p>The following example takes the markup from the earlier example
   and puts <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements around some
   of the markup to show that the text was changed (though in this
   case, the changes admittedly don't make much sense). Notice how
   this example has exactly the same paragraphs as the previous one,
   despite the <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements &mdash;
   the <code><a href=#the-ins-element>ins</a></code> element straddles the heading and the first
   paragraph, and the <code><a href=#the-del-element>del</a></code> element straddles the boundary
   between the two paragraphs.</p>

   <pre>&lt;section&gt;
  &lt;ins&gt;&lt;h1&gt;Example of paragraphs&lt;/h1&gt;
  This is the &lt;em&gt;first&lt;/em&gt; paragraph in&lt;/ins&gt; this example&lt;del&gt;.
  &lt;p&gt;This is the second.&lt;/p&gt;&lt;/del&gt;
  &lt;!-- This is not a paragraph. --&gt;
&lt;/section&gt;</pre>

  </div>

  <div class=impl>

  <p>Let <var title="">view</var> be a view of the DOM that replaces
  all <code><a href=#the-a-element>a</a></code>, <code><a href=#the-ins-element>ins</a></code>, <code><a href=#the-del-element>del</a></code>, and
  <code><a href=#the-map-element>map</a></code> elements in the document with their contents. Then,
  in <var title="">view</var>, for each run of sibling <a href=#phrasing-content>phrasing
  content</a> nodes uninterrupted by other types of content, in an
  element that accepts content other than <a href=#phrasing-content>phrasing
  content</a> as well as <a href=#phrasing-content>phrasing content</a>, let <var title="">first</var> be the first node of the run, and let <var title="">last</var> be the last node of the run. For each such run
  that consists of at least one node that is neither <a href=#embedded-content>embedded
  content</a> nor <a href=#inter-element-whitespace>inter-element whitespace</a>, a
  paragraph exists in the original DOM from immediately before <var title="">first</var> to immediately after <var title="">last</var>. (Paragraphs can thus span across
  <code><a href=#the-a-element>a</a></code>, <code><a href=#the-ins-element>ins</a></code>, <code><a href=#the-del-element>del</a></code>, and
  <code><a href=#the-map-element>map</a></code> elements.)</p>

  <p>Conformance checkers may warn authors of cases where they have
  paragraphs that overlap each other (this can happen with
  <code><a href=#the-object-element>object</a></code>, <code><a href=#video>video</a></code>, <code><a href=#audio>audio</a></code>, and
  <code><a href=#the-canvas-element>canvas</a></code> elements, and indirectly through elements in
  other namespaces that allow HTML to be further embedded therein,
  like <code><a href=#svg>svg</a></code> or <code><a href=#math>math</a></code>).</p> <!-- example below
  -->

  </div>

  <p>A <a href=#paragraph>paragraph</a> is also formed explicitly by
  <code><a href=#the-p-element>p</a></code> elements.</p>

  <p class=note>The <code><a href=#the-p-element>p</a></code> element can be used to wrap
  individual paragraphs when there would otherwise not be any content
  other than phrasing content to separate the paragraphs from each
  other.</p>

  <div class=example>

   <p>In the following example, the link spans half of the first
   paragraph, all of the heading separating the two paragraphs, and
   half of the second paragraph. It straddles the paragraphs and the
   heading.</p>

   <pre>&lt;aside&gt;
 Welcome!
 &lt;a href="about.html"&gt;
  This is home of...
  &lt;h1&gt;The Falcons!&lt;/h1&gt;
  The Lockheed Martin multirole jet fighter aircraft!
 &lt;/a&gt;
 This page discusses the F-16 Fighting Falcon's innermost secrets.
&lt;/aside&gt;</pre>

   <p>Here is another way of marking this up, this time showing the
   paragraphs explicitly, and splitting the one link element into
   three:</p>

   <pre>&lt;aside&gt;
 &lt;p&gt;Welcome! &lt;a href="about.html"&gt;This is home of...&lt;/a&gt;&lt;/p&gt;
 &lt;h1&gt;&lt;a href="about.html"&gt;The Falcons!&lt;/a&gt;&lt;/h1&gt;
 &lt;p&gt;&lt;a href="about.html"&gt;The Lockheed Martin multirole jet
 fighter aircraft!&lt;/a&gt; This page discusses the F-16 Fighting
 Falcon's innermost secrets.&lt;/p&gt;
&lt;/aside&gt;</pre>

  </div>

  <div class=example>

   <!-- I don't know if there's a better way to deal with this, but if
   there is, let me know... -->

   <p>It is possible for paragraphs to overlap when using certain
   elements that define fallback content. For example, in the
   following section:</p>

   <pre>&lt;section&gt;
 &lt;h1&gt;My Cats&lt;/h1&gt;
 You can play with my cat simulator.
 &lt;object data="cats.sim"&gt;
  To see the cat simulator, use one of the following links:
  &lt;ul&gt;
   &lt;li&gt;&lt;a href="cats.sim"&gt;Download simulator file&lt;/a&gt;
   &lt;li&gt;&lt;a href="http://sims.example.com/watch?v=LYds5xY4INU"&gt;Use online simulator&lt;/a&gt;
  &lt;/ul&gt;
  Alternatively, upgrade to the Mellblom Browser.
 &lt;/object&gt;
 I'm quite proud of it.
&lt;/section&gt;</pre>

   <p>There are five paragraphs:</p>

   <ol class=brief><li>The paragraph that says "You can play with my cat
    simulator. <i title="">object</i> I'm quite proud of it.", where
    <i title="">object</i> is the <code><a href=#the-object-element>object</a></code> element.</li>

    <li>The paragraph that says "To see the cat simulator, use one of
    the following links:".</li>

    <li>The paragraph that says "Download simulator file".</li>

    <li>The paragraph that says "Use online simulator".</li>

    <li>The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".</li>

   </ol><p>The first paragraph is overlapped by the other four. A user
   agent that supports the "cats.sim" resource will only show the
   first one, but a user agent that shows the fallback will
   confusingly show the first sentence of the first paragraph as
   if it was in the same paragraph as the second one, and will show
   the last paragraph as if it was at the start of the second sentence
   of the first paragraph.</p>

   <p>To avoid this confusion, explicit <code><a href=#the-p-element>p</a></code> elements can be
   used.</p>

  </div>



  <h4 id=annotations-for-assistive-technology-products-(aria)><span class=secno>3.2.6 </span><dfn>Annotations for assistive technology products</dfn> (ARIA)</h4>

  <p>Authors may use the ARIA <code title=attr-aria-role>role</code>
  and <code title=attr-aria-*>aria-*</code> attributes on <a href=#html-elements>HTML
  elements</a>, in accordance with the requirements described in
  the ARIA specifications, except where these conflict with the
  <span>strong native semantics</span> described below. These
  exceptions are intended to prevent authors from making assistive
  technology products report nonsensical states that do not represent
  the actual state of the document. <a href=#refsARIA>[ARIA]</a></p>

  <div class=impl>

  <p>User agents are required to implement ARIA semantics on all
  <a href=#html-elements>HTML elements</a>, as defined in the ARIA
  specifications. The <span>implicit ARIA semantics</span> defined
  below must be recognized by implementations. <a href=#refsARIAIMPL>[ARIAIMPL]</a></p>

  </div>

  <p>The following table defines the <span>strong native
  semantics</span> <span class=impl>and corresponding <span>implicit
  ARIA semantics</span></span> that apply to <a href=#html-elements>HTML
  elements</a>. Each language feature (element or attribute) in a
  cell in the first column implies the ARIA semantics (role, states,
  and/or properties) given in the cell in the second column of the
  same row. Authors must not set the ARIA <code title=attr-aria-role>role</code> and <code title=attr-aria-*>aria-*</code> attributes in a manner that
  conflicts with the semantics described in the following table. <span class=impl>When multiple rows apply to an element, the role from
  the last row to define a role must be applied, and the states and
  properties from all the rows must be combined.</span></p>

  <table><thead><tr><th>Language feature
     <th>Strong native semantics <span class=impl>and implied ARIA semantics</span>

   <tbody><tr><td><code><a href=#the-a-element>a</a></code> element that represents a <a href=#hyperlink>hyperlink</a>
     <td><code title=attr-aria-role-link>link</code> role

    <tr><td><code><a href=#the-area-element>area</a></code> element that represents a <a href=#hyperlink>hyperlink</a>
     <td><code title=attr-aria-role-link>link</code> role

    <tr><td><code><a href=#the-button-element>button</a></code> element
     <td><code title=attr-aria-role-button>button</code> role

    <tr><td><code><a href=#the-datalist-element>datalist</a></code> element
     <td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"

    <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
     <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

    <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
     <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

    <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
     <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

    <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
     <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

    <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
     <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

    <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
     <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

    <tr><td><code><a href=#the-hgroup-element>hgroup</a></code> element
     <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

    <tr><td><code><a href=#the-hr-element>hr</a></code> element
     <td><code title=attr-aria-role-separator>separator</code> role

    <tr><td><code><a href=#the-img-element>img</a></code> element whose <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute's value is empty
     <td><code title=attr-aria-role-presentation>presentation</code> role

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#button-state title=attr-input-type-button>Button</a> state
     <td><code title=attr-aria-role-button>button</code> role

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state
     <td><code title=attr-aria-role-checkbox>checkbox</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "mixed" if the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute is true, or "true" if the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is true, or "false" otherwise

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#color-state title=attr-input-type-color>Color</a> state
     <td>No role

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#date-state title=attr-input-type-date>Date</a> state
     <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a> state
     <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a> state
     <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#e-mail-state title=attr-input-type-email>E-mail</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
     <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state
     <td><code title=attr-aria-role-button>button</code> role

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state
     <td>No role

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
     <td><code title=attr-aria-role-button>button</code> role

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#month-state title=attr-input-type-month>Month</a> state
     <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#number-state title=attr-input-type-number>Number</a> state
     <td><code title=attr-aria-role-spinbutton>spinbutton</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute, the <code title=attr-aria-valuemax>aria-valuemax</code> property set to the element's <a href=#concept-input-max title=concept-input-max>maximum</a>, the <code title=attr-aria-valuemin>aria-valuemin</code> property set to the element's <a href=#concept-input-min title=concept-input-min>minimum</a>, and, if the result of applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a> to the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is a number, with the <code title=attr-aria-valuenow>aria-valuenow</code> property set to that number

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#password-state title=attr-input-type-password>Password</a> state
     <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state
     <td><code title=attr-aria-role-radio>radio</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is true, or "false" otherwise

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#range-state title=attr-input-type-range>Range</a> state
     <td><code title=attr-aria-role-slider>slider</code> role, with the <code title=attr-aria-valuemax>aria-valuemax</code> property set to the element's <a href=#concept-input-max title=concept-input-max>maximum</a>, the <code title=attr-aria-valuemin>aria-valuemin</code> property set to the element's <a href=#concept-input-min title=concept-input-min>minimum</a>, and the <code title=attr-aria-valuenow>aria-valuenow</code> property set to the result of applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a> to the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, if that that results in a number, or the <a href=#concept-input-value-default-range title=concept-input-value-default-range>default value</a> otherwise

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a> state
     <td><code title=attr-aria-role-button>button</code> role

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#text-state-and-search-state title=attr-input-type-search>Search</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
     <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> state
     <td><code title=attr-aria-role-button>button</code> role

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#telephone-state title=attr-input-type-tel>Telephone</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
     <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
     <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#telephone-state title=attr-input-type-tel>Telephone</a>, <a href=#url-state title=attr-input-type-url>URL</a>, or <a href=#e-mail-state title=attr-input-type-email>E-mail</a> states with a <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
     <td><code title=attr-aria-role-combobox>combobox</code> role, with the <code title=attr-aria-owns>aria-owns</code> property set to the same value as the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute, and the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#time-state title=attr-input-type-time>Time</a> state
     <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#url-state title=attr-input-type-url>URL</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
     <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#week-state title=attr-input-type-week>Week</a> state
     <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-link-element>link</a></code> element that represents a <a href=#hyperlink>hyperlink</a>
     <td><code title=attr-aria-role-link>link</code> role

    <tr><td><code><a href=#menus>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#context-menu-state title="context menu state">context menu</a> state
     <td>No role

    <tr><td><code><a href=#menus>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
     <td><code title=attr-aria-role-menu>menu</code> role

    <tr><td><code><a href=#menus>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state
     <td><code title=attr-aria-role-toolbar>toolbar</code> role

    <tr><td><code><a href=#the-nav-element>nav</a></code> element
     <td><code title=attr-aria-role-navigation>navigation</code> role

    <tr><td><code><a href=#the-option-element>option</a></code> element that is in a <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> or that represents a suggestion in a <code><a href=#the-datalist-element>datalist</a></code> element
     <td><code title=attr-aria-role-option>option</code> role, with the <code title=attr-aria-selected>aria-selected</code> state set to "true" if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, or "false" otherwise.

    <tr><td><code><a href=#the-progress-element>progress</a></code> element
     <td><code title=attr-aria-role-progressbar>progressbar</code> role, with, if the progress bar is determinate, the <code title=attr-aria-valuemax>aria-valuemax</code> property set to the maximum value of the progress bar, the <code title=attr-aria-valuemin>aria-valuemin</code> property set to zero, and the <code title=attr-aria-valuenow>aria-valuenow</code> property set to the current value of the progress bar

    <tr><td><code><a href=#the-select-element>select</a></code> element with a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute
     <td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "true"

    <tr><td><code><a href=#the-select-element>select</a></code> element with no <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute
     <td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"

    <tr><td><code><a href=#the-td-element>td</a></code> element
     <td><code title=attr-aria-role-gridcell>gridcell</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any

    <tr><td><code><a href=#the-textarea-element>textarea</a></code> element
     <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=attr-aria-multiline>aria-multiline</code> property set to "true", and the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute

    <tr><td><code><a href=#the-th-element>th</a></code> element that is neither a <a href=#column-header>column header</a> nor a <a href=#row-header>row header</a>
     <td><code title=attr-aria-role-gridcell>gridcell</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any

    <tr><td><code><a href=#the-th-element>th</a></code> element that is a <a href=#column-header>column header</a>
     <td><code title=attr-aria-role-columnheader>columnheader</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any

    <tr><td><code><a href=#the-th-element>th</a></code> element that is a <a href=#row-header>row header</a>
     <td><code title=attr-aria-role-rowheader>rowheader</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any

    <tr><td><code><a href=#the-tr-element>tr</a></code> element
     <td><code title=attr-aria-role-row>row</code> role

    <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "checkbox", and that is a descendant of a <code><a href=#menus>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
     <td><code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise

    <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "command", and that is a descendant of a <code><a href=#menus>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
     <td><code title=attr-aria-role-menuitem>menuitem</code> role

    <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "radio", and that is a descendant of a <code><a href=#menus>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
     <td><code title=attr-aria-role-menuitemradio>menuitemradio</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise

    <tr><td>Elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>
     <td>The <code title=title-aria-disabled>aria-disabled</code> state set to "true"

    <tr><td>Elements that are <a href=#concept-input-required title=concept-input-required>required</a>
     <td>The <code title=title-aria-required>aria-required</code> state set to "true"

  </table><p>Some <a href=#html-elements>HTML elements</a> have native semantics that can be
  overridden. The following table lists these elements<span class=impl> and their <span>implicit ARIA semantics</span></span>,
  along with the restrictions that apply to those elements. Each
  language feature (element or attribute) in a cell in the first
  column implies, unless otherwise overriden, the ARIA semantic (role,
  state, or property) given in the cell in the second column of the
  same row, but this semantic may be overridden under the conditions
  listed in the cell in the third column of that row.</p>

  <table><thead><tr><th>Language feature
     <th>Default implied ARIA semantic
     <th>Restrictions

   <tbody><tr><td><code><a href=#the-address-element>address</a></code> element
     <td>No role
     <td>If specified, role must be <code title=attr-aria-role-contentinfo>contentinfo</code> (ARIA restricts usage of this role to one per page)

    <tr><td><code><a href=#the-article-element>article</a></code> element
     <td><code title=attr-aria-role-article>article</code> role
     <td>Role must be either <code title=attr-aria-role-article>article</code>, <code title=attr-aria-role-document>document</code>, <code title=attr-aria-role-application>application</code>, or <code title=attr-aria-role-main>main</code> (ARIA restricts usage of this role to one per page)

    <tr><td><code><a href=#the-aside-element>aside</a></code> element
     <td><code title=attr-aria-role-note>note</code> role
     <td>Role must be either <code title=attr-aria-role-note>note</code>, <code title=attr-aria-role-complementary>complementary</code>, or <code title=attr-aria-role-search>search</code>

    <tr><td><code><a href=#the-footer-element>footer</a></code> element
     <td>No role
     <td>If specified, role must be <code title=attr-aria-role-contentinfo>contentinfo</code> (ARIA restricts usage of this role to one per page)

    <tr><td><code><a href=#the-header-element>header</a></code> element
     <td>No role
     <td>If specified, role must be <code title=attr-aria-role-banner>banner</code> (ARIA restricts usage of this role to one per page)

    <tr><td><code><a href=#the-li-element>li</a></code> element whose parent is an <code><a href=#the-ol-element>ol</a></code> or <code><a href=#the-ul-element>ul</a></code> element
     <td><code title=attr-aria-role-listitem>listitem</code> role
     <td>Role must be either <code title=attr-aria-role-listitem>listitem</code> or <code title=attr-aria-role-treeitem>treeitem</code>

    <tr><td><code><a href=#the-ol-element>ol</a></code> element
     <td><code title=attr-aria-role-list>list</code> role
     <td>Role must be either <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-tree>tree</code>, or <code title=attr-aria-role-directory>directory</code>

    <tr><td><code><a href=#the-output-element>output</a></code> element
     <td><code title=attr-aria-role-status>status</code> role
     <td>No restrictions

    <tr><td><code><a href=#the-section-element>section</a></code> element
     <td><code title=attr-aria-role-region>region</code> role
     <td>Role must be either <code title=attr-aria-role-region>region</code>, <code title=attr-aria-role-document>document</code>, <code title=attr-aria-role-application>application</code>, <code title=attr-aria-role-contentinfo>contentinfo</code> (ARIA restricts usage of this role to one per page), <code title=attr-aria-role-main>main</code> (ARIA restricts usage of this role to one per page), <code title=attr-aria-role-search>search</code>, <code title=attr-aria-role-alert>alert</code>, <code title=attr-aria-role-dialog>dialog</code>, <code title=attr-aria-role-alertdialog>alertdialog</code>, <code title=attr-aria-role-status>status</code>, or <code title=attr-aria-role-log>log</code>

    <tr><td><code><a href=#the-table-element>table</a></code> element
     <td><code title=attr-aria-role-grid>grid</code> role
     <td>Role must be either <code title=attr-aria-role-grid>grid</code> or <code title=attr-aria-role-treegrid>treegrid</code>

    <tr><td><code><a href=#the-ul-element>ul</a></code> element
     <td><code title=attr-aria-role-list>list</code> role
     <td>Role must be either <code title=attr-aria-role-list>list</code> or <code title=attr-aria-role-tree>tree</code>, or <code title=attr-aria-role-directory>directory</code>

    <tr><td><a href=#the-body-element>The body element</a>
     <td><code title=attr-aria-role-document>document</code> role
     <td>Role must be either <code title=attr-aria-role-document>document</code> or <code title=attr-aria-role-application>application</code>

  </table><div class=impl>

  <p>User agents may apply different defaults than those described in
  this section in order to expose the semantics of <a href=#html-elements>HTML
  elements</a> in a manner more fine-grained than possible with the
  above definitions.</p>

  <p>Conformance checkers are encouraged to phrase errors such that
  authors are encouraged to use more appropriate elements rather than
  remove accessibility annotations. For example, if an <code><a href=#the-a-element>a</a></code>
  element is marked as having the <code title=attr-aria-role-button>button</code> role, a conformance
  checker could say "Either a <code><a href=#the-button-element>button</a></code> element or an
  <code><a href=#the-input-element>input</a></code> element is required when using the <code title=attr-aria-role-button>button</code> role" rather than "The
  <code title=attr-aria-role-button>button</code> role cannot be
  used with <code><a href=#the-a-element>a</a></code> elements".</p>

  </div>


  <h3 id=apis-in-html-documents><span class=secno>3.3 </span>APIs in HTML documents</h3>

  <p>For <a href=#html-documents>HTML documents</a>, and for <a href=#html-elements>HTML
  elements</a> in <a href=#html-documents>HTML documents</a>, certain APIs defined
  in DOM Core become case-insensitive or case-changing, as sometimes
  defined in DOM Core, and as summarized <span class=impl>or
  required</span> below. <a href=#refsDOMCORE>[DOMCORE]</a></p>

  <p>This does not apply to <a href=#xml-documents>XML documents</a> or to elements
  that are not in the <a href=#html-namespace-0>HTML namespace</a> despite being in
  <a href=#html-documents>HTML documents</a>.</p>

  <dl><dt><code title=dom-Element-tagName><a href=#dom-element-tagname>Element.tagName</a></code> and <code title=dom-Node-nodeName>Node.nodeName</code></dt>

   <dd>

    <p>These attributes <span class=impl>must</span> return element
    names <a href=#converted-to-ascii-uppercase>converted to ASCII uppercase</a>, regardless of the case
    with which they were created.</p>

   </dd>


   <dt><code title=dom-Document-createElement>Document.createElement()</code></dt>

   <dd>

    <p>The canonical form of HTML markup is all-lowercase; thus, this
    method will <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">lowercase</a>
    the argument before creating the requisite element. <span class=impl>Also, the element created must be in the <a href=#html-namespace-0>HTML
    namespace</a></span>.</p>

    <p class=note>This doesn't apply to <code title="">Document.createElementNS()</code>. Thus, it is possible,
    by passing this last method a tag name in the wrong case, to
    create an element that appears to have the same tag name as that
    of an element defined in this specification when its <code title=dom-Element-tagName><a href=#dom-element-tagname>tagName</a></code> attribute is examined, but that
    doesn't support the corresponding interfaces. The "real" element
    name (unaffected by case conversions) can be obtained from the
    <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> attribute.</p>

   </dd>


   <dt><code title=dom-Element-setAttribute>Element.setAttribute()</code></dt>
   <dt><code title=dom-Element-setAttributeNode>Element.setAttributeNode()</code></dt>

   <dd>

    <p>Attribute names are <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</p>

    <div class=impl>

     <p>Specifically: when an attribute is set on an <a href=#html-elements title="HTML
     elements">HTML element</a> using <code title="">Element.setAttribute()</code>, the name argument must be
     <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> before the element is
     affected; and when an <code><a href=#attr>Attr</a></code> node is set on an <a href=#html-elements title="HTML elements">HTML element</a> using <code title="">Element.setAttributeNode()</code>, it must have its name
     <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> before the element is
     affected.</p>

    </div>

    <p class=note>This doesn't apply to <code title="">Element.setAttributeNS()</code> and <code title="">Element.setAttributeNodeNS()</code>.</p>

   </dd>


   <dt><code title=dom-Element-getAttribute>Element.getAttribute()</code></dt>
   <dt><code title=dom-Element-getAttributeNode>Element.getAttributeNode()</code></dt>

   <dd>

    <p>Attribute names are <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</p>

    <div class=impl>

     <p>Specifically: When the <code title="">Element.getAttribute()</code> method or the <code title="">Element.getAttributeNode()</code> method is invoked on
     an <a href=#html-elements title="HTML elements">HTML element</a>, the name
     argument must be <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> before the
     element's attributes are examined.</p>

    </div>

    <p class=note>This doesn't apply to <code title="">Element.getAttributeNS()</code> and <code title="">Element.getAttributeNodeNS()</code>.</p>

   </dd>


   <dt><code title=dom-Document-getElementsByTagName>Document.getElementsByTagName()</code></dt>
   <dt><code title=dom-Element-getElementsByTagName>Element.getElementsByTagName()</code></dt>

   <dd>

    <p>HTML elements match by lower-casing the argument before
    comparison, elements from other namespaces are treated as in XML
    (case-sensitively).</p>

    <div class=impl>

    <p>Specifically, these methods (but not their namespaced
    counterparts) must compare the given argument in a
    <a href=#case-sensitive>case-sensitive</a> manner, but when looking at <a href=#html-elements title="HTML elements">HTML elements</a>, the argument must
    first be <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</p>

    </div>

    <p class=note>Thus, in an <a href=#html-documents title="HTML documents">HTML
    document</a> with nodes in multiple namespaces, these methods
    will effectively be both case-sensitive and case-insensitive at
    the same time.</p>

   </dd>


  </dl><div class=impl>

  <h3 id=interactions-with-xpath-and-xslt><span class=secno>3.4 </span>Interactions with XPath and XSLT</h3>

  <p id=xpath-1.0-processors>Implementations of XPath 1.0 that
  operate on HTML documents parsed or created in the manners described
  in this specification (e.g. as part of the <code title="">document.evaluate()</code> API) must act as if the
  following edit was applied to the XPath 1.0 specification.</p>

  <p>First, remove this paragraph:</p>

  <blockquote cite=http://www.w3.org/TR/1999/REC-xpath-19991116#node-tests>

   <p>A <a href=http://www.w3.org/TR/REC-xml-names#NT-QName>QName</a> in the
   node test is expanded into an <a href=http://www.w3.org/TR/1999/REC-xpath-19991116#dt-expanded-name>expanded-name</a>
   using the namespace declarations from the expression context.  This
   is the same way expansion is done for element type names in start
   and end-tags except that the default namespace declared with <code title="">xmlns</code> is not used: if the <a href=http://www.w3.org/TR/REC-xml-names#NT-QName>QName</a> does
   not have a prefix, then the namespace URI is null (this is the same
   way attribute names are expanded).  It is an error if the <a href=http://www.w3.org/TR/REC-xml-names#NT-QName>QName</a> has a
   prefix for which there is no namespace declaration in the
   expression context.</p>

  </blockquote>

  <p>Then, insert in its place the following:</p>

  <blockquote cite="http://www.w3.org/Bugs/Public/show_bug.cgi?id=7059#c37">

   <p>A QName in the node test is expanded into an expanded-name using
   the namespace declarations from the expression context. If the
   QName has a prefix, then there must be a<!-- added 2009-10-27 -
   http://www.w3.org/Bugs/Public/show_bug.cgi?id=8062 --> namespace
   declaration for this prefix in the expression context, and the
   corresponding<!-- typo fixed 2009-10-27 -
   http://www.w3.org/Bugs/Public/show_bug.cgi?id=8063 --> namespace
   URI is the one that is associated with this prefix.  It is an error
   if the QName has a prefix for which there is no namespace
   declaration in the expression context. </p>

   <p>If the QName has no prefix and the principal node type of the
   axis is element, then the default element namespace is
   used. Otherwise if the QName has no prefix, the namespace URI is
   null. The default element namespace is a member of the context for
   the XPath expression. The value of the default element namespace
   when executing an XPath expression through the DOM3 XPath API is
   determined in the following way:</p>

   <ol><li>If the context node is from an HTML DOM, the default element
    namespace is "http://www.w3.org/1999/xhtml".</li>

    <li>Otherwise, the default element namespace URI is null.</li>

   </ol><p class=note>This is equivalent to adding the default element
   namespace feature of XPath 2.0 to XPath 1.0, and using the HTML
   namespace as the default element namespace for HTML documents. It
   is motivated by the desire to have implementations be compatible
   with legacy HTML content while still supporting the changes that
   this specification introduces to HTML regarding the namespace used
   for HTML elements, and by the desire to use XPath 1.0 rather than
   XPath 2.0.</p>

  </blockquote>

  <p class=note>This change is a <a href=#willful-violation>willful violation</a> of
  the XPath 1.0 specification, motivated by desire to have
  implementations be compatible with legacy content while still
  supporting the changes that this specification introduces to HTML
  regarding which namespace is used for HTML elements. <a href=#refsXPATH10>[XPATH10]</a></p> <!-- note: version matters for
  this ref -->

  <hr><p id=dom-based-xslt-1.0-processors>XSLT 1.0 processors outputting
  to a DOM when the output method is "html" (either explicitly or via
  the defaulting rule in XSLT 1.0) are affected as follows:</p>

  <p>If the transformation program outputs an element in no namespace,
  the processor must, prior to constructing the corresponding DOM
  element node, change the namespace of the element to the <a href=#html-namespace-0>HTML
  namespace</a>, <a href=#converted-to-ascii-lowercase title="converted to ASCII
  lowercase">ASCII-lowercase</a> the element's local name, and
  <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">ASCII-lowercase</a>
  the names of any non-namespaced attributes on the element.</p>

  <p class=note>This requirement is a <a href=#willful-violation>willful violation</a>
  of the XSLT 1.0 specification, required because this specification
  changes the namespaces and case-sensitivity rules of HTML in a
  manner that would otherwise be incompatible with DOM-based XSLT
  transformations. (Processors that serialize the output are
  unaffected.) <a href=#refsXSLT10>[XSLT10]</a></p> <!-- note:
  version matters for this ref -->

  </div>



  <h3 id=dynamic-markup-insertion><span class=secno>3.5 </span><dfn>Dynamic markup insertion</dfn></h3>

  <p class=note>APIs for dynamically inserting markup into the
  document interact with the parser, and thus their behavior varies
  depending on whether they are used with <a href=#html-documents>HTML documents</a>
  (and the <a href=#html-parser>HTML parser</a>) or XHTML in <a href=#xml-documents>XML
  documents</a> (and the <a href=#xml-parser>XML parser</a>).</p>



  <h4 id=opening-the-input-stream><span class=secno>3.5.1 </span>Opening the input stream</h4>

  <p>The <dfn id=dom-document-open title=dom-document-open><code>open()</code></dfn>
  method comes in several variants with different numbers of
  arguments.</p>

  <dl class=domintro><dt><var title="">document</var> = <var title="">document</var> . <code title=dom-document-open><a href=#dom-document-open>open</a></code>( [ <var title="">type</var> [, <var title="">replace</var> ] ] )</dt>

   <dd>

    <p>Causes the <code><a href=#document>Document</a></code> to be replaced in-place, as if
    it was a new <code><a href=#document>Document</a></code> object, but reusing the
    previous object, which is then returned.</p>

    <p>If the <var title="">type</var> argument is omitted or has the
    value "<code><a href=#text/html>text/html</a></code>", then the resulting
    <code><a href=#document>Document</a></code> has an HTML parser associated with it, which
    can be given data to parse using <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code>. Otherwise, all
    content passed to <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> will be parsed
    as plain text.</p>

    <p>If the <var title="">replace</var> argument is present and has
    the value "<code title="">replace</code>", the existing entries in
    the session history for the <code><a href=#document>Document</a></code> object are
    removed.</p>

    <p>The method has no effect if the <code><a href=#document>Document</a></code> is still
    being parsed.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
    <code><a href=#document>Document</a></code> is an <a href=#xml-documents title="XML documents">XML
    document</a>.</p>

   </dd>

   <dt><var title="">window</var> = <var title="">document</var> . <code title=dom-document-open><a href=#dom-document-open>open</a></code>( <var title="">url</var>, <var title="">name</var>, <var title="">features</var> [, <var title="">replace</var> ] )</dt>

   <dd>

    <p>Works like the <code title=dom-open><a href=#dom-open>window.open()</a></code>
    method.</p>

   </dd>

  </dl><div class=impl>

  <p>When called with two or fewer arguments, the method must act as
  follows:</p>

  <ol><li>If the <code><a href=#document>Document</a></code> object is not flagged as an <a href=#html-documents title="HTML documents">HTML document</a>, throw an
   <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
   steps.</li>

   <li><p>Let <var title="">type</var> be the value of the first
   argument, if there is one, or "<code><a href=#text/html>text/html</a></code>"
   otherwise.</li>

   <li><p>Let <var title="">replace</var> be true if there is a second
   argument and it is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
   the value "replace", and false otherwise.</li>

   <li>

    <p>If the document has an <a href=#active-parser>active parser</a> that isn't a
    <a href=#script-created-parser>script-created parser</a>, and the <a href=#insertion-point>insertion
    point</a> associated with that parser's <a href=#the-input-stream>input
    stream</a> is not undefined (that is, it <em>does</em> point to
    somewhere in the input stream), then the method does
    nothing. Abort these steps and return the <code><a href=#document>Document</a></code>
    object on which the method was invoked.</p>

    <p class=note>This basically causes <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> to be ignored
    when it's called in an inline script found during the parsing of
    data sent over the network, while still letting it have an effect
    when called asynchronously or on a document that is itself being
    spoon-fed using these APIs.</p>

   </li>

   <li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>

   <li><p><a href=#prompt-to-unload-a-document title="prompt to unload a document">Prompt to
   unload</a> the <code><a href=#document>Document</a></code> object. If the user
   <a href=#refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be unloaded</a>, then
   these steps must be aborted.</li>

   <li><p><a href=#unload-a-document title="unload a document">Unload</a> the
   <code><a href=#document>Document</a></code> object, with the <var title="">recycle</var>
   parameter set to true.</li>

   <li><p>If the document has an <a href=#active-parser>active parser</a>, then
   <a href=#abort-an-html-parser title="abort an HTML parser">abort that
   parser</a>.</li>

   <li><p>Unregister all event listeners registered on the
   <code><a href=#document>Document</a></code> node and its descendants.</p>

   <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a>
   associated with the <code><a href=#document>Document</a></code> in any <a href=#task-source>task
   source</a>.</li> <!-- removes callbacks that fired between
   this algorithm starting and the times and databases being aborted
   in the "unload" step above -->

   <li><p>Remove all child nodes of the document, without firing any
   mutation events.</li> <!-- as of 2009-03-30, only WebKit fired
   mutation events here. -->

   <li><p>Replace the <code><a href=#document>Document</a></code>'s singleton objects with
   new instances of those objects. (This includes in particular the
   <code><a href=#window>Window</a></code>, <code><a href=#location>Location</a></code>, <code><a href=#history-0>History</a></code>,
   <code><a href=#applicationcache>ApplicationCache</a></code>, <code><a href=#undomanager>UndoManager</a></code>,
   <code><a href=#navigator>Navigator</a></code>, and <code><a href=#selection-0>Selection</a></code> objects, the
   various <code><a href=#barprop>BarProp</a></code> objects, the two <code>Storage</code>
   objects, and the various <code><a href=#htmlcollection>HTMLCollection</a></code> objects. It
   also includes all the Web IDL prototypes in the JavaScript binding,
   including the <code><a href=#document>Document</a></code> object's prototype.)</li>

   <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%20src%3D%22document%22%3E%3C%2Fiframe%3E%0A%3Cscript%3Eonload%20%3D%20function%20()%20%7B%20f%20%3D%20document.getElementsByTagName('iframe')%5B0%5D%3B%20d%20%3D%20f.contentWindow.document%3B%20%7D%3C%2Fscript%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22w(d.documentElement.innerHTML)%22%20value%3D%22dump%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.open()%3B%20d.write('%3Cscript%3Evar%20x%20%3D%20new%20XMLHttpRequest()%3Bx.open(%26quot%3BGET%26quot%3B%2C%20%26quot%3BGET%26quot%3B)%3Bx.onreadystatechange%3Dfunction()%20%7B%20alert(x.readyState)%3B%20%7D%3Bx.send(null)%3B%3C%2Fscript%3E')%3Bd.close()%3B%20setTimeout(function()%20%7B%20d.open()%3B%20d.write('%3Cp%3Etest%3C%2Fp%3E')%3B%20d.close()%20%7D%2C%200)%3B%22%20value%3D%22xhr%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.onclick%20%3D%20function()%20%7B%20w('click')%20%7D%22%20value%3D%22add%20click%20handler%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.open()%3B%20d.write('%3Cp%3Etest%3C%2Fp%3E')%3B%20d.close()%22%20value%3D%22replace%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.open()%3B%20d.write('%3Cp%3E%3Cscript%3Ei%20%3D%200%3B%20setTimeout(%26quot%3Bparent.w(i%2B%2B)%26quot%3B%2C%202000)%3C%2Fscript%3E%3C%2Fp%3E')%3B%20d.close()%22%20value%3D%22replace%20with%20timer%22%3E -->
   <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A...%3Ciframe%3E%3C%2Fiframe%3E%0D%0A%3Cscript%3E%0D%0Aonload%20%3D%20function%20()%20%7B%0D%0A%20frames%5B0%5D.test%20%3D%201%0D%0A%20w(frames%5B0%5D.test)%3B%0D%0A%20var%20a%20%3D%20frames%5B0%5D.document.location.assign%3B%0D%0A%20w(a)%3B%0D%0A%20w(frames%5B0%5D.document.location.assign%20%3D%3D%3D%20a)%3B%0D%0A%20frames%5B0%5D.document.open()%3B%0D%0A%20frames%5B0%5D.document.write('%3Cscript%3Edocument.write(test)%3C%5C%2Fscript%3E')%3B%0D%0A%20frames%5B0%5D.document.close()%3B%0D%0A%20w(frames%5B0%5D.test)%3B%0D%0A%20w(frames%5B0%5D.document.location.assign%20%3D%3D%3D%20a)%3B%0D%0A%7D%0D%0A%3C%2Fscript%3E -->

   <li><p>Change the <a href="#document's-character-encoding">document's character encoding</a> to
   UTF-16.</li>

   <li><p>Change <a href="#the-document's-address">the document's address</a> to the
   <a href=#entry-script>entry script</a>'s <a href="#script's-document" title="script's
   document">document</a>'s <a href="#the-document's-address" title="the document's
   address">address</a>.</li>

   <li><p>Create a new <a href=#html-parser>HTML parser</a> and associate it with
   the document. This is a <dfn id=script-created-parser>script-created parser</dfn> (meaning
   that it can be closed by the <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> and <code title=dom-document-close><a href=#dom-document-close>document.close()</a></code> methods, and
   that the tokenizer will wait for an explicit call to <code title=dom-document-close><a href=#dom-document-close>document.close()</a></code> before emitting
   an end-of-file token). The encoding <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is
   <i>irrelevant</i>.</li>

   <li>

    <!-- text/plain handling -->

    <p>If the <var title="">type</var> string contains a U+003B
    SEMICOLON character (;), remove the first such character and all
    characters from it up to the end of the string.</p>

    <p>Strip all leading and trailing <a href=#space-character title="space
    character">space characters</a> from <var title="">type</var>.</p>

    <p>If <var title="">type</var> is <em>not</em> now an <a href=#ascii-case-insensitive>ASCII
    case-insensitive</a> match for the string
    "<code><a href=#text/html>text/html</a></code>", then act as if the tokenizer had emitted
    a start tag token with the tag name "pre", then switch the
    <a href=#html-parser>HTML parser</a>'s tokenizer to the <a href=#plaintext-state>PLAINTEXT
    state</a>.</p>

    <!--
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20%7B%20%0D%0A%20%20var%20d%20%3D%20document.getElementsByTagName('iframe')%5B0%5D.contentDocument%3B%0D%0A%20%20d.open('image%2Fsvg%2Bxml')%3B%0D%0A%20%20d.write(%22%3Cinput%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%20value%3D'(x)html'%2F%3E%22)%3B%0D%0A%20%20d.close()%3B%0D%0A%7D%3B%3C%2Fscript%3E
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20%7B%20%0D%0A%20%20var%20d%20%3D%20document.getElementsByTagName('iframe')%5B0%5D.contentDocument%3B%0D%0A%20%20d.open('image%2Fgif')%3B%0D%0A%20%20var%20a%20%3D%20%5B%200x47%2C%200x49%2C%200x46%2C%200x38%2C%200x39%2C%200x61%2C%200x01%2C%200x00%2C%200x01%2C%200x00%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200x80%2C%200xff%2C%200x00%2C%200xc0%2C%200xc0%2C%200xc0%2C%200x00%2C%200x00%2C%200x00%2C%200x21%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200xf9%2C%200x04%2C%200x01%2C%200x00%2C%200x00%2C%200x00%2C%200x00%2C%200x2c%2C%200x00%2C%200x00%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200x00%2C%200x00%2C%200x01%2C%200x00%2C%200x01%2C%200x00%2C%200x00%2C%200x02%2C%200x02%2C%200x44%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200x01%2C%200x00%2C%200x3b%20%5D%3B%0D%0A%20%20var%20s%20%3D%20%22%22%3B%0D%0A%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20a.length%3B%20i%20%2B%3D%201)%0D%0A%20%20%20%20s%20%2B%3D%20String.fromCharCode(a%5Bi%5D)%3B%0D%0A%20%20d.write(s)%3B%0D%0A%20%20d.close()%3B%0D%0A%7D%3B%3C%2Fscript%3E
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20{%20%0A%20%20var%20d%20%3D%20document.getElementsByTagName(%27iframe%27)[0].contentDocument%3B%0A%20%20d.open(%27Text%2Fplain%27)%3B%0A%20%20d.write(%27%3Cb%3Etest%27)%3B%0A%20%20d.close()%3B%0A}%3B%3C%2Fscript%3E
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20{%20%0A%20%20var%20d%20%3D%20document.getElementsByTagName(%27iframe%27)[0].contentDocument%3B%0A%20%20d.open(%27%20text%2Fplain%27)%3B%0A%20%20d.write(%27%3Cb%3Etest%27)%3B%0A%20%20d.close()%3B%0A}%3B%3C%2Fscript%3E
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20{%20%0A%20%20var%20d%20%3D%20document.getElementsByTagName(%27iframe%27)[0].contentDocument%3B%0A%20%20d.open(%27text%2Fplain%3B%27)%3B%0A%20%20d.write(%27%3Cb%3Etest%27)%3B%0A%20%20d.close()%3B%0A}%3B%3C%2Fscript%3E
    -->

   </li>

   <li>

    <p>Remove all the entries in the <a href=#browsing-context>browsing context</a>'s
    <a href=#session-history>session history</a> after the <a href=#current-entry>current
    entry</a>. If the <a href=#current-entry>current entry</a> is the last entry
    in the session history, then no entries are removed.</p>

    <p class=note>This <a href=#history-notes>doesn't necessarily
    have to affect</a> the user agent's user interface.</p>

   </li>

   <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a> queued by
   the <a href=#history-traversal-task-source>history traversal task source</a>.</li>

   <li>Remove any earlier entries that share the same
   <code><a href=#document>Document</a></code>.</li>

   <li><p>If <var title="">replace</var> is false, then add a new
   entry, just before the last entry, and associate with the new entry
   the text that was parsed by the previous parser associated with the
   <code><a href=#document>Document</a></code> object, as well as the state of the document
   at the start of these steps. (This allows the user to step
   backwards in the session history to see the page before it was
   blown away by the <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> call.)</li>

   <li><p>Finally, set the <a href=#insertion-point>insertion point</a> to point at
   just before the end of the <a href=#the-input-stream>input stream</a> (which at this
   point will be empty).</li>

   <li><p>Return the <code><a href=#document>Document</a></code> on which the method was
   invoked.</li>

  </ol><p>When called with three or more arguments, the <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method on the
  <code><a href=#htmldocument>HTMLDocument</a></code> object must call the <code title=dom-open><a href=#dom-open>open()</a></code> method on the <code><a href=#window>Window</a></code>
  object of the <code><a href=#htmldocument>HTMLDocument</a></code> object, with the same
  arguments as the original call to the <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method, and return whatever
  that method returned. If the <code><a href=#htmldocument>HTMLDocument</a></code> object has no
  <code><a href=#window>Window</a></code> object, then the method must raise an
  <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception.</p>

  </div>



  <h4 id=closing-the-input-stream><span class=secno>3.5.2 </span>Closing the input stream</h4>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-close><a href=#dom-document-close>close</a></code>()</dt>

   <dd>

    <p>Closes the input stream that was opened by the <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> method.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
    <code><a href=#document>Document</a></code> is an <a href=#xml-documents title="XML documents">XML
    document</a>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-close title=dom-document-close><code>close()</code></dfn>
  method must run the following steps:</p>

  <ol><li><p>If the <code><a href=#document>Document</a></code> object is not flagged as an
   <a href=#html-documents title="HTML documents">HTML document</a>, throw an
   <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
   steps.</li>

   <li><p>If there is no <a href=#script-created-parser>script-created parser</a> associated
   with the document, then abort these steps.</li>

   <li><p>Insert an <a href=#explicit-eof-character>explicit "EOF" character</a> at the end
   of the parser's <a href=#the-input-stream>input stream</a>.</li>

   <li><p>If there is a <a href=#pending-parsing-blocking-script>pending parsing-blocking script</a>,
   then abort these steps.</li>

   <li><p>Run the tokenizer, processing resulting tokens as they are
   emitted, and stopping when the tokenizer reaches the <a href=#explicit-eof-character>explicit
   "EOF" character</a> or <a href=#spin-the-event-loop title="spin the event loop">spins
   the event loop</a>.</li>

  </ol></div>



  <h4 id=document.write()><span class=secno>3.5.3 </span><code title=dom-document-write><a href=#dom-document-write>document.write()</a></code></h4>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-write><a href=#dom-document-write>write</a></code>(<var title="">text</var>...)</dt>

   <dd>

    <p>Adds the given string(s) to the <code><a href=#document>Document</a></code>'s input
    stream. If necessary, calls the <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method implicitly
    first.</p>

    <p>This method throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception
    when invoked on <a href=#xml-documents>XML documents</a>.</p>

    <p>Unless called from the body of a <code><a href=#script>script</a></code> element
    while the document is being parsed, or called on a script-created
    document, calling this method will clear the current page first,
    as if <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> had
    been called.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-write title=dom-document-write><code>document.write(...)</code></dfn>
  method must act as follows:</p>

  <ol><li>

    <p>If the method was invoked on an <a href=#xml-documents title="XML documents">XML
    document</a>, throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
    exception and abort these steps.</p>

    <!--
    Where would document.write() insert?
    Consider: data:text/xml,<script xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ document.write('<foo>Test</foo>'); ]]></script>
    -->

   </li>

   <li>

    <p>If the <a href=#insertion-point>insertion point</a> is undefined, the <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method must be called
    (with no arguments) on the <code title=Document><a href=#document>document</a></code>
    object. If the user <a href=#refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be
    unloaded</a>, then these steps must be aborted. Otherwise, the
    <a href=#insertion-point>insertion point</a> will point at just before the end of
    the (empty) <a href=#the-input-stream>input stream</a>.</p>

   </li>

   <li>

    <p>The string consisting of the concatenation of all the arguments
    to the method must be inserted into the <a href=#the-input-stream>input stream</a>
    just before the <a href=#insertion-point>insertion point</a>.</p>

   </li>

   <li>

    <p>If there is a <a href=#pending-parsing-blocking-script>pending parsing-blocking script</a>, then the
    method must now return without further processing of the
    <a href=#the-input-stream>input stream</a>.</p>

   </li>

   <li>

    <p>Otherwise, the tokenizer must process the characters that were
    inserted, one at a time, processing resulting tokens as they are
    emitted, and stopping when the tokenizer reaches the insertion
    point or when the processing of the tokenizer is aborted by the
    tree construction stage (this can happen if a <code><a href=#script>script</a></code>
    end tag token is emitted by the tokenizer).

    <p class=note>If the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> method was
    called from script executing inline (i.e. executing because the
    parser parsed a set of <code><a href=#script>script</a></code> tags), then this is a
    <a href=#nestedParsing>reentrant invocation of the
    parser</a>.</p>

   </li>

   <li>

    <p>Finally, the method must return.</p>

   </li>

  </ol></div>


  <h4 id=document.writeln()><span class=secno>3.5.4 </span><code title=dom-document-writeln><a href=#dom-document-writeln>document.writeln()</a></code></h4>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-writeln><a href=#dom-document-writeln>writeln</a></code>(<var title="">text</var>...)</dt>

   <dd>

    <p>Adds the given string(s) to the <code><a href=#document>Document</a></code>'s input
    stream, followed by a newline character. If necessary, calls the
    <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method implicitly
    first.</p>

    <p>This method throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception
    when invoked on <a href=#xml-documents>XML documents</a>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-writeln title=dom-document-writeln><code>document.writeln(...)</code></dfn>
  method, when invoked, must act as if the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> method had been
  invoked with the same argument(s), plus an extra argument consisting
  of a string containing a single line feed character (U+000A).</p>

  </div>



  <h4 id=innerhtml><span class=secno>3.5.5 </span><code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code></h4>

  <p>The <dfn id=dom-innerhtml title=dom-innerHTML><code>innerHTML</code></dfn> IDL
  attribute represents the markup of the node's contents.</p>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a fragment of HTML or XML that represents the
    <code><a href=#document>Document</a></code>.</p>

    <p>Can be set, to replace the <code><a href=#document>Document</a></code>'s contents
    with the result of parsing the given string.</p>

    <p>In the case of <a href=#xml-documents>XML documents</a>, will throw an
    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the <code><a href=#document>Document</a></code> cannot
    be serialized to XML, and a <code><a href=#syntax_err>SYNTAX_ERR</a></code> if the given
    string is not well-formed.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a fragment of HTML or XML that represents the element's
    contents.</p>

    <p>Can be set, to replace the contents of the element with nodes
    parsed from the given string.</p>

    <p>In the case of <a href=#xml-documents>XML documents</a>, will throw an
    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the element cannot be serialized
    to XML, and a <code><a href=#syntax_err>SYNTAX_ERR</a></code> if the given string is not
    well-formed.</p>

   </dd>

  </dl><div class=impl>

  <p>On getting, if the node's document is an <a href=#html-documents title="HTML
  documents">HTML document</a>, then the attribute must return the
  result of running the <a href=#html-fragment-serialization-algorithm>HTML fragment serialization
  algorithm</a> on the node; otherwise, the node's document is an
  <a href=#xml-documents title="XML documents">XML document</a>, and the attribute
  must return the result of running the <a href=#xml-fragment-serialization-algorithm>XML fragment
  serialization algorithm</a> on the node instead (this might raise
  an exception instead of returning a string).</p>

  <p>On setting, the following steps must be run:</p>

  <ol><li>

    <p>If the node's document is an <a href=#html-documents title="HTML documents">HTML
    document</a>: Invoke the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing
    algorithm</a>.</p>

    <p>If the node's document is an <a href=#xml-documents title="XML documents">XML
    document</a>: Invoke the <a href=#xml-fragment-parsing-algorithm>XML fragment parsing
    algorithm</a>.</p>

    <p>In either case, the algorithm must be invoked with the string
    being assigned into the <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> attribute as the <var title="">input</var>. If the node is an <code><a href=#element>Element</a></code>
    node, then, in addition, that element must be passed as the <var title="">context</var> element.</p>

    <p>If this raises an exception, then abort these steps.</p>

    <p>Otherwise, let <var title="">new children</var> be the nodes
    returned.</p>

   </li>

   <li>

    <p>If the attribute is being set on a <code><a href=#document>Document</a></code> node,
    and that document has an <a href=#active-parser>active parser</a>, then abort
    that parser.</p>

   </li>

   <li>

    <p>Remove the child nodes of the node whose <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> attribute is being set,
    firing appropriate mutation events.</p>

   </li>

   <li>

    <p>If the attribute is being set on a <code><a href=#document>Document</a></code>
    node, let <var title="">target document</var> be that
    <code><a href=#document>Document</a></code> node. Otherwise, the attribute is being
    set on an <code><a href=#element>Element</a></code> node; let <var title="">target
    document</var> be the <code title="">ownerDocument</code> of
    that <code><a href=#element>Element</a></code>.</p>

   </li>

   <li>

    <p>Set the <code title="">ownerDocument</code> of all the nodes in
    <var title="">new children</var> to the <var title="">target
    document</var>.</p>

   </li>

   <li>

    <p>Append all the <var title="">new children</var> nodes to the
    node whose <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> attribute
    is being set, preserving their order, and firing mutation events
    as if a <code><a href=#documentfragment>DocumentFragment</a></code> containing the <var title="">new children</var> had been inserted.</p>

   </li>

  </ol></div>



  <h4 id=outerhtml><span class=secno>3.5.6 </span><code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code></h4>

  <p>The <dfn id=dom-outerhtml title=dom-outerHTML><code>outerHTML</code></dfn> IDL
  attribute represents the markup of the element and its contents.</p>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a fragment of HTML or XML that represents the element
    and its contents.</p>

    <p>Can be set, to replace the element with nodes parsed from the
    given string.</p>

    <p>In the case of <a href=#xml-documents>XML documents</a>, will throw an
    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the element cannot be serialized
    to XML, and a <code><a href=#syntax_err>SYNTAX_ERR</a></code> if the given string is not
    well-formed.</p>

    <p>Throws a <code><a href=#no_modification_allowed_err>NO_MODIFICATION_ALLOWED_ERR</a></code> exception if
    the parent of the element is the <code><a href=#document>Document</a></code>
    node.</p>

   </dd>

  </dl><div class=impl>

  <p>On getting, if the node's document is an <a href=#html-documents title="HTML
  documents">HTML document</a>, then the attribute must return the
  result of running the <a href=#html-fragment-serialization-algorithm>HTML fragment serialization
  algorithm</a> on a fictional node whose only child is the node on
  which the attribute was invoked; otherwise, the node's document is
  an <a href=#xml-documents title="XML documents">XML document</a>, and the
  attribute must return the result of running the <a href=#xml-fragment-serialization-algorithm>XML fragment
  serialization algorithm</a> on that fictional node instead (this
  might raise an exception instead of returning a string).</p>

  <p>On setting, the following steps must be run:</p>

  <ol><li>

    <p>Let <var title="">target</var> be the element whose <code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code> attribute is being
    set.</p>

   </li>

   <li>

    <p>If <var title="">target</var> has no parent node, then abort
    these steps. There would be no way to obtain a reference to the
    nodes created even if the remaining steps were run.</p>

   </li>

   <li>

    <p>If <var title="">target</var>'s parent node is a
    <code><a href=#document>Document</a></code> object, throw a
    <code><a href=#no_modification_allowed_err>NO_MODIFICATION_ALLOWED_ERR</a></code> exception and abort these
    steps.</p>

   </li>

   <li>

    <p>Let <var title="">parent</var> be <var title="">target</var>'s
    parent node, unless that is a <code><a href=#documentfragment>DocumentFragment</a></code> node,
    in which case let <var title="">parent</var> be an arbitrary
    <code><a href=#the-body-element-0>body</a></code> element.</p>

   </li>

   <li>

    <p>If <var title="">target</var>'s document is an <a href=#html-documents title="HTML documents">HTML document</a>: Invoke the <a href=#html-fragment-parsing-algorithm>HTML
    fragment parsing algorithm</a>.</p>

    <p>If <var title="">target</var>'s document is an <a href=#xml-documents title="XML
    documents">XML document</a>: Invoke the <a href=#xml-fragment-parsing-algorithm>XML fragment
    parsing algorithm</a>.</p>

    <p>In either case, the algorithm must be invoked with the string
    being assigned into the <code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code> attribute as the <var title="">input</var>, and <var title="">parent</var> as the <var title="">context</var> element.</p>

    <p>If this raises an exception, then abort these steps.</p>

    <p>Otherwise, let <var title="">new children</var> be the nodes
    returned.</p>

   </li>

   <li>

    <p>Set the <code title="">ownerDocument</code> of all the nodes in
    <var title="">new children</var> to <var title="">target</var>'s
    document.</p>

   </li>

   <li>

    <p>Remove <var title="">target</var> from its parent node, firing
    mutation events as appropriate, and then insert in its place all
    the <var title="">new children</var> nodes, preserving their
    order, and again firing mutation events as if a
    <code><a href=#documentfragment>DocumentFragment</a></code> containing the <var title="">new
    children</var> had been inserted.</p>

   </li>

  </ol></div>



  <h4 id=insertadjacenthtml()><span class=secno>3.5.7 </span><code title=dom-insertAdjacentHTML><a href=#dom-insertadjacenthtml>insertAdjacentHTML()</a></code></h4>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-insertAdjacentHTML><a href=#dom-insertadjacenthtml>insertAdjacentHTML</a></code>(<var title="">position</var>, <var title="">text</var>)</dt>

   <dd>

    <p>Parses the given string <var title="">text</var> as HTML or XML
    and inserts the resulting nodes into the tree in the position
    given by the <var title="">position</var> argument, as
    follows:</p>

    <dl><dt>"beforebegin"</dt>
     <dd>Before the element itself.</dd>
     <dt>"afterbegin"</dt>
     <dd>Just inside the element, before its first child.</dd>
     <dt>"beforeend"</dt>
     <dd>Just inside the element, after its last child.</dd>
     <dt>"afterend"</dt>
     <dd>After the element itself.</dd>
    </dl><p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the arguments
    have invalid values (e.g., in the case of <a href=#xml-documents>XML
    documents</a>, if the given string is not well-formed).</p>

    <p>Throws a <code><a href=#no_modification_allowed_err>NO_MODIFICATION_ALLOWED_ERR</a></code> exception if
    the given position isn't possible (e.g. inserting elements after
    the root element of a <code><a href=#document>Document</a></code>).</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-insertadjacenthtml title=dom-insertAdjacentHTML><code>insertAdjacentHTML(<var title="">position</var>, <var title="">text</var>)</code></dfn>
  method, when invoked, must run the following algorithm:</p>

  <ol><li>

    <p>Let <var title="">position</var> and <var title="">text</var>
    be the method's first and second arguments, respectively.</p>

   </li>

   <li>

    <p>Let <var title="">target</var> be the element on which the
    method was invoked.</p>

   </li>

   <li>

    <p>Use the first matching item from this list:</p>

    <dl><dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "beforebegin"</dt>
     <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "afterend"</dt>

     <dd>

      <p>If <var title="">target</var> has no parent node, then abort
      these steps.</p>

      <p>If <var title="">target</var>'s parent node is a
      <code><a href=#document>Document</a></code> object, then throw a
      <code><a href=#no_modification_allowed_err>NO_MODIFICATION_ALLOWED_ERR</a></code> exception and abort
      these steps.

      <p>Otherwise, let <var title="">context</var> be the parent node
      of <var title="">target</var>.</p>

     </dd>

     <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "afterbegin"</dt>
     <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "beforeend"</dt>

     <dd>

      <p>Let <var title="">context</var> be the same as <var title="">target</var>.</p>

     </dd>

     <dt>Otherwise</dt>

     <dd>

      <p>Throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception.</p>

     </dd>

    </dl></li>

   <li>

    <p>If <var title="">target</var>'s document is an <a href=#html-documents title="HTML documents">HTML document</a>: Invoke the <a href=#html-fragment-parsing-algorithm>HTML
    fragment parsing algorithm</a>.</p>

    <p>If <var title="">target</var>'s document is an <a href=#xml-documents title="XML
    documents">XML document</a>: Invoke the <a href=#xml-fragment-parsing-algorithm>XML fragment
    parsing algorithm</a>.</p>

    <p>In either case, the algorithm must be invoked with <var title="">text</var> as the <var title="">input</var>, and the
    element selected in by the previous step as the <var title="">context</var> element.</p>

    <p>If this raises an exception, then abort these steps.</p>

    <p>Otherwise, let <var title="">new children</var> be the nodes
    returned.</p>

   </li>

   <li>

    <p>Set the <code title="">ownerDocument</code> of all the nodes in
    <var title="">new children</var> to <var title="">target</var>'s
    document.</p>

   </li>

   <li>

    <p>Use the first matching item from this list:</p>

    <dl><dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "beforebegin"</dt>

     <dd>

      <p>Insert all the <var title="">new children</var> nodes
      immediately before <var title="">target</var>.</p>

     </dd>

     <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "afterbegin"</dt>

     <dd>

      <p>Insert all the <var title="">new children</var> nodes before
      the first child of <var title="">target</var>, if there is
      one. If there is no such child, append them all to <var title="">target</var>.</p>

     </dd>

     <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "beforeend"</dt>

     <dd>

      <p>Append all the <var title="">new children</var> nodes to <var title="">target</var>.</p>

     </dd>

     <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "afterend"</dt>

     <dd>

      <p>Insert all the <var title="">new children</var> nodes
      immediately after <var title="">target</var>.</p>

     </dd>

    </dl><p>The <var title="">new children</var> nodes must be inserted in
    a manner that preserves their order and fires mutation events as
    if a <code><a href=#documentfragment>DocumentFragment</a></code> containing the <var title="">new children</var> had been inserted.</p>

   </li>

  </ol></div>



  <h2 id=semantics><span class=secno>4 </span>The elements of HTML</h2>

  <h3 id=the-root-element><span class=secno>4.1 </span>The root element</h3>

  <h4 id=the-html-element-0><span class=secno>4.1.1 </span>The <dfn><code>html</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As the root element of a document.</dd>
   <dd>Wherever a subdocument fragment is allowed in a compound document.</dd>
   <dt>Content model:</dt>
   <dd>A <code><a href=#the-head-element-0>head</a></code> element followed by a <code><a href=#the-body-element-0>body</a></code> element.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlhtmlelement>HTMLHtmlElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-html-element-0>html</a></code> element <a href=#represents>represents</a> the root of
  an HTML document.</p>

  <p>The <dfn id=attr-html-manifest title=attr-html-manifest><code>manifest</code></dfn>
  attribute gives the address of the document's <a href=#application-cache>application
  cache</a> <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>, if there is
  one. If the attribute is present, the attribute's value must be a
  <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a>.</p>

  <p>The <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute
  only <a href=#concept-appcache-init title=concept-appcache-init>has an effect</a> during
  the early stages of document load. Changing the attribute
  dynamically thus has no effect (and thus, no DOM API is provided for
  this attribute).</p>

  <p class=note>For the purposes of <a href=#concept-appcache-init title=concept-appcache-init>application cache selection</a>,
  later <code><a href=#the-base-element>base</a></code> elements cannot affect the <a href=#resolve-a-url title="resolve a url">resolving of relative URLs</a> in <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attributes, as the
  attributes are processed before those elements are seen.</p>

  <p class=note>The <code title=dom-applicationCache><a href=#dom-applicationcache>window.applicationCache</a></code> IDL
  attribute provides scripted access to the offline <a href=#application-cache>application
  cache</a> mechanism.</p>

  <div class=example>

   <p>The <code><a href=#the-html-element-0>html</a></code> element in the following example declares
   that the document's language is English.</p>

   <pre>&lt;!DOCTYPE html&gt;
<strong>&lt;html lang="en"&gt;</strong>
&lt;head&gt;
&lt;title&gt;Swapping Songs&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Swapping Songs&lt;/h1&gt;
&lt;p&gt;Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.&lt;/p&gt;
&lt;/body&gt;
<strong>&lt;/html&gt;</strong></pre>

  </div>




  <h3 id=document-metadata><span class=secno>4.2 </span>Document metadata</h3>

  <h4 id=the-head-element-0><span class=secno>4.2.1 </span>The <dfn><code>head</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As the first element in an <code><a href=#the-html-element-0>html</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>If the document is <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a> or if title information is available from a higher-level protocol: Zero or more elements of <a href=#metadata-content>metadata content</a>.</dd>
   <dd>Otherwise: One or more elements of <a href=#metadata-content>metadata content</a>, of which exactly one is a <code><a href=#the-title-element-0>title</a></code> element.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlheadelement>HTMLHeadElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-head-element-0>head</a></code> element <a href=#represents>represents</a> a
  collection of metadata for the <code><a href=#document>Document</a></code>.</p>

  <div class=example>

   <p>The collection of metadata in a <code><a href=#the-head-element-0>head</a></code> element can be
   large or small. Here is an example of a very short one:</p>

   <pre>&lt;!doctype html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;A document with a short head&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 ...</pre>

   <p>Here is an example of a longer one:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;
 &lt;HEAD&gt;
  &lt;META CHARSET="UTF-8"&gt;
  &lt;BASE HREF="http://www.example.com/"&gt;
  &lt;TITLE&gt;An application with a long head&lt;/TITLE&gt;
  &lt;LINK REL="STYLESHEET" HREF="default.css"&gt;
  &lt;LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"&gt;
  &lt;SCRIPT SRC="support.js"&gt;&lt;/SCRIPT&gt;
  &lt;META NAME="APPLICATION-NAME" CONTENT="Long headed application"&gt;
 &lt;/HEAD&gt;
 &lt;BODY&gt;
 ...</pre>

  </div>

  <p class=note>The <code><a href=#the-title-element-0>title</a></code> element is a required child
  in most situations, but when a higher-level protocol provides title
  information, e.g. in the Subject line of an e-mail when HTML is used
  as an e-mail authoring format, the <code><a href=#the-title-element-0>title</a></code> element can be
  omitted.</p>



  <h4 id=the-title-element-0><span class=secno>4.2.2 </span>The <dfn><code>title</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#metadata-content>Metadata content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>In a <code><a href=#the-head-element-0>head</a></code> element containing no other <code><a href=#the-title-element-0>title</a></code> elements.</dd>
   <dt>Content model:</dt>
   <dd><a href=#text-content title="text content">Text</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmltitleelement>HTMLTitleElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-title-text title=dom-title-text>text</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-title-element-0>title</a></code> element <a href=#represents>represents</a> the
  document's title or name. Authors should use titles that identify
  their documents even when they are used out of context, for example
  in a user's history or bookmarks, or in search results. The
  document's title is often different from its first heading, since the
  first heading does not have to stand alone when taken out of
  context.</p>

  <p>There must be no more than one <code><a href=#the-title-element-0>title</a></code> element per
  document.</p>

  <dl class=domintro><dt><var title="">title</var> . <code title=dom-title-text><a href=#dom-title-text>text</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the contents of the element, ignoring child nodes that
    aren't <a href=#text-node title="text node">text nodes</a>.</p>

    <p>Can be set, to replace the element's children with the given
    value.</p>

   </dd>

  </dl><div class=impl>

  <p>The IDL attribute <dfn id=dom-title-text title=dom-title-text><code>text</code></dfn> must return a
  concatenation of the contents of all the <a href=#text-node title="text
  node">text nodes</a> that are direct children of the
  <code><a href=#the-title-element-0>title</a></code> element (ignoring any other nodes such as
  comments or elements), in tree order. On setting, it must act the
  same way as the <code><a href=#textcontent>textContent</a></code> IDL attribute.</p>

  </div>

  <div class=example>

   <p>Here are some examples of appropriate titles, contrasted with
   the top-level headings that might be used on those same pages.</p>

   <pre>  &lt;title&gt;Introduction to The Mating Rituals of Bees&lt;/title&gt;
    ...
  &lt;h1&gt;Introduction&lt;/h1&gt;
  &lt;p&gt;This companion guide to the highly successful
  &lt;cite&gt;Introduction to Medieval Bee-Keeping&lt;/cite&gt; book is...</pre>

   <p>The next page might be a part of the same site. Note how the
   title describes the subject matter unambiguously, while the first
   heading assumes the reader knows what the context is and therefore
   won't wonder if the dances are Salsa or Waltz:</p>

   <pre>  &lt;title&gt;Dances used during bee mating rituals&lt;/title&gt;
    ...
  &lt;h1&gt;The Dances&lt;/h1&gt;</pre>

  </div>

  <p>The string to use as the document's title is given by the <code title=dom-document-title><a href=#document.title>document.title</a></code> IDL
  attribute. <span class=impl>User agents should use the document's
  title when referring to the document in their user
  interface.</span></p>


  <h4 id=the-base-element><span class=secno>4.2.3 </span>The <dfn><code>base</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#metadata-content>Metadata content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>In a <code><a href=#the-head-element-0>head</a></code> element containing no other <code><a href=#the-base-element>base</a></code> elements.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-base-href><a href=#attr-base-href>href</a></code></dd>
   <dd><code title=attr-base-target><a href=#attr-base-target>target</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlbaseelement>HTMLBaseElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-base-href title=dom-base-href>href</a>;
           attribute DOMString <a href=#dom-base-target title=dom-base-target>target</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-base-element>base</a></code> element allows authors to specify the
  <a href=#document-base-url>document base URL</a> for the purposes of <a href=#resolve-a-url title="resolve a url">resolving relative URLs</a>, and the name
  of the default <a href=#browsing-context>browsing context</a> for the purposes of
  <a href=#following-hyperlinks>following hyperlinks</a>. The element does not <a href=#represents title=represents>represent</a> any content beyond this
  information.</p>

  <p>There must be no more than one <code><a href=#the-base-element>base</a></code> element per
  document.</p>

  <p>A <code><a href=#the-base-element>base</a></code> element must have either an <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute, a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute, or both.</p>

  <p>The <dfn id=attr-base-href title=attr-base-href><code>href</code></dfn> content
  attribute, if specified, must contain a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially
  surrounded by spaces</a>.</p>

  <p>A <code><a href=#the-base-element>base</a></code> element, if it has an <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute, must come before any
  other elements in the tree that have attributes defined as taking
  <a href=#url title=URL>URLs</a>, except the <code><a href=#the-html-element-0>html</a></code> element
  (its <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute
  isn't affected by <code><a href=#the-base-element>base</a></code> elements).</p>

  <div class=impl>

  <p class=note>If there are multiple <code><a href=#the-base-element>base</a></code> elements
  with <code title=attr-base-href><a href=#attr-base-href>href</a></code> attributes, all but the
  first are ignored.</p>

  </div>

  <p>The <dfn id=attr-base-target title=attr-base-target><code>target</code></dfn>
  attribute, if specified, must contain a <a href=#valid-browsing-context-name-or-keyword>valid browsing context
  name or keyword</a>, which specifies which <a href=#browsing-context>browsing
  context</a> is to be used as the default when <a href=#hyperlink title=hyperlink>hyperlinks</a> and <a href=#the-form-element title=form>forms</a> in the <code><a href=#document>Document</a></code> cause <a href=#navigate title=navigate>navigation</a>.</p>

  <p>A <code><a href=#the-base-element>base</a></code> element, if it has a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute, must come before
  any elements in the tree that represent <a href=#hyperlink title=hyperlink>hyperlinks</a>.</p>

  <div class=impl>

  <p class=note>If there are multiple <code><a href=#the-base-element>base</a></code> elements
  with <code title=attr-base-target><a href=#attr-base-target>target</a></code> attributes, all but
  the first are ignored.</p>

  <p>The <dfn id=dom-base-href title=dom-base-href><code>href</code></dfn> and <dfn id=dom-base-target title=dom-base-target><code>target</code></dfn> IDL attributes
  must <a href=#reflect>reflect</a> the respective content attributes of the
  same name.</p>

  </div>

  <div class=example>

   <p>In this example, a <code><a href=#the-base-element>base</a></code> element is used to set the
   <a href=#document-base-url>document base URL</a>:</p>

   <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;This is an example for the &amp;lt;base&amp;gt; element&lt;/title&gt;
        &lt;base href="http://www.example.com/news/index.html"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Visit the &lt;a href="archives.html"&gt;archives&lt;/a&gt;.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre>

   <p>The link in the above example would be a link to "<code title="">http://www.example.com/news/archives.html</code>".</p>

  </div>




  <h4 id=the-link-element><span class=secno>4.2.4 </span>The <dfn><code>link</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#metadata-content>Metadata content</a>.</dd>

   <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a href=#flow-content>flow content</a>.</dd>
   <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a href=#phrasing-content>phrasing content</a>.</dd>

   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#metadata-content>metadata content</a> is expected.</dd>
   <dd>In a <code><a href=#the-noscript-element>noscript</a></code> element that is a child of a <code><a href=#the-head-element-0>head</a></code> element.</dd>

   <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a href=#phrasing-content>phrasing content</a> is expected.</dd>

   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-link-href><a href=#attr-link-href>href</a></code></dd>
   <dd><code title=attr-link-rel><a href=#attr-link-rel>rel</a></code></dd>
   <dd><code title=attr-link-media><a href=#attr-link-media>media</a></code></dd>
   <dd><code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code></dd>
   <dd><code title=attr-link-type><a href=#attr-link-type>type</a></code></dd>
   <dd><code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code></dd>
   <dd>Also, the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute has special semantics on this element.</dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmllinkelement>HTMLLinkElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-link-disabled title=dom-link-disabled>disabled</a>;
           attribute DOMString <a href=#dom-link-href title=dom-link-href>href</a>;
           attribute DOMString <a href=#dom-link-rel title=dom-link-rel>rel</a>;
  readonly attribute <a href=#domtokenlist>DOMTokenList</a> <a href=#dom-link-rellist title=dom-link-relList>relList</a>;
           attribute DOMString <a href=#dom-link-media title=dom-link-media>media</a>;
           attribute DOMString <a href=#dom-link-hreflang title=dom-link-hreflang>hreflang</a>;
           attribute DOMString <a href=#dom-link-type title=dom-link-type>type</a>;
  [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-link-sizes title=dom-link-sizes>sizes</a>;
};
<a href=#htmllinkelement>HTMLLinkElement</a> implements <span>LinkStyle</span>;</pre>
   </dd>
  </dl><p>The <code><a href=#the-link-element>link</a></code> element allows authors to link their
  document to other resources.</p>

  <p>The destination of the link(s) is given by the <dfn id=attr-link-href title=attr-link-href><code>href</code></dfn> attribute, which must
  be present and must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
  surrounded by spaces</a>. <span class=impl>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute is absent, then the
  element does not define a link.</span></p>


  <p>A <code><a href=#the-link-element>link</a></code> element must have either a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute, or an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, or both.</p>

  <p>The types of link indicated (the relationships) are given by the
  value of the <dfn id=attr-link-rel title=attr-link-rel><code>rel</code></dfn>
  attribute, which, if present, must have a value that is a <a href=#set-of-space-separated-tokens>set
  of space-separated tokens</a>. The <a href=#linkTypes>allowed
  values and their meanings</a> are defined in a later section. <span class=impl>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute
  is absent, or if none of the values used are allowed according to
  the definitions in this specification, then the element does not
  define a link.</span></p>

  <p>Two categories of links can be created using the
  <code><a href=#the-link-element>link</a></code> element. <dfn id=external-resource-link title="external resource link">Links
  to external resources</dfn> are links to resources that are to be
  used to augment the current document, and <dfn id=hyperlink-link title="hyperlink
  link">hyperlink links</dfn> are <a href=#hyperlink title=hyperlink>links to
  other documents</a>. The <a href=#linkTypes>link types
  section</a> defines whether a particular link type is an external
  resource or a hyperlink. One element can create multiple links (of
  which some might be external resource links and some might be
  hyperlinks); exactly which and how many links are created depends on
  the keywords given in the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code>
  attribute. User agents must process the links on a per-link basis,
  not a per-element basis.</p>

  <p class=note>Each link is handled separately. For instance, if
  there are two <code><a href=#the-link-element>link</a></code> elements with <code title="">rel="stylesheet"</code>, they each count as a separate
  external resource, and each is affected by its own attributes
  independently.</p>

  <p>The exact behavior for links to external resources depends on the
  exact relationship, as defined for the relevant link type. Some of
  the attributes control whether or not the external resource is to be
  applied (as defined below).</p>

  <div class=impl>

  <p>For external resources that are represented in the
  DOM (for example, style sheets), the DOM representation must be made
  available even if the resource is not applied. To <dfn id=concept-link-obtain title=concept-link-obtain>obtain the resource</dfn>, the user
  agent must run the following steps:</p>

  <ol><li><p>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute's
   value is the empty string, then abort these steps.</li>

   <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the
   <a href=#url>URL</a> given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute, relative to the
   element.</li>

   <li><p>If the previous step fails, then abort these steps.</li>

   <li><p><a href=#fetch>Fetch</a> the resulting <a href=#absolute-url>absolute
   URL</a>.</li> <!-- http-origin privacy sensitive -->

  </ol><p>User agents may opt to only try to obtain such resources when
  they are needed, instead of pro-actively <a href=#fetch title=fetch>fetching</a> all the external resources that are
  not applied.</p>

  <p>The semantics of the protocol used (e.g. HTTP) must be followed
  when fetching external resources. (For example, redirects will be
  followed and 404 responses will cause the external resource to not
  be applied.)</p>

  <!-- the next few paragraph are similar to text in the <style> section -->
  <p>Once the attempts to obtain the resource and its <a href=#critical-subresources>critical
  subresources</a> are complete, the user agent must, if the loads
  were successful, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> named <code title=event-load>load</code> at the
  <code><a href=#the-link-element>link</a></code> element, or, if the resource or one of its
  <a href=#critical-subresources>critical subresources</a> failed to completely load for any
  reason (e.g. DNS error, HTTP 404 response, a connection being
  prematurely closed, unsupported Content-Type), <a href=#queue-a-task>queue a
  task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <code><a href=#the-link-element>link</a></code>
  element. Non-network errors in processing the resource or its
  subresources (e.g. CSS parse errors, PNG decoding errors) are not
  failures for the purposes of this paragraph.</p>

  <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation task
  source</a>.</p>

  <p>The element must <a href=#delay-the-load-event>delay the load event</a> of the
  element's document until all the attempts to obtain the resource and
  its <a href=#critical-subresources>critical subresources</a> are complete. (Resources that
  the user agent has not yet attempted to obtain, e.g. because it is
  waiting for the resource to be needed, do not <a href=#delay-the-load-event>delay the load
  event</a>.)</p>

  <hr><p id=linkui>Interactive user agents may provide users with a
  means to <a href=#following-hyperlinks title="following hyperlinks">follow the
  hyperlinks</a> created using the <code><a href=#the-link-element>link</a></code> element,
  somewhere within their user interface. The exact interface is not
  defined by this specification, but it could include the following
  information (obtained from the element's attributes, again as
  defined below), in some form or another (possibly simplified), for
  each hyperlink created with each <code><a href=#the-link-element>link</a></code> element in the
  document:</p>

  <ul><!-- the order here is the order that makes most sense for a UI --><li>The relationship between this document and the resource (given
   by the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute)</li>

   <li>The title of the resource (given by the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute).</li>

   <li>The address of the resource (given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute).</li>

   <li>The language of the resource (given by the <code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code> attribute).</li>

   <li>The optimum media for the resource (given by the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute).</li>

  </ul><p>User agents could also include other information, such as the
  type of the resource (as given by the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute).</p>

  </div>

  <p class=note>Hyperlinks created with the <code><a href=#the-link-element>link</a></code>
  element and its <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute
  apply to the whole page. This contrasts with the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute of <code><a href=#the-a-element>a</a></code>
  and <code><a href=#the-area-element>area</a></code> elements, which indicates the type of a link
  whose context is given by the link's location within the
  document.</p>

  <p>The <dfn id=attr-link-media title=attr-link-media><code>media</code></dfn>
  attribute says which media the resource applies to. The value must
  be a <a href=#valid-media-query>valid media query</a>.</p>

  <div class=impl>

  <p>If the link is a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>
  then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is
  purely advisory, and describes for which media the document in
  question was designed.</p>

  <p>However, if the link is an <a href=#external-resource-link>external resource link</a>,
  then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is
  prescriptive. The user agent must apply the external resource when
  the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute's value
  <a href=#matches-the-environment>matches the environment</a> and the other relevant
  conditions apply, and must not apply it otherwise.</p><!-- note
  similar text in <style> section -->

  <p class=note>The external resource might have further
  restrictions defined within that limit its applicability. For
  example, a CSS style sheet might have some <code title="">@media</code> blocks. This specification does not override
  such further restrictions or requirements.</p><!-- note similar text
  in <style> section -->

  </div>

  <p id=default-media>The default, if the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is omitted, is "<code title="">all</code>", meaning that by default links apply to all
  media.</p>

  <p>The <dfn id=attr-link-hreflang title=attr-link-hreflang><code>hreflang</code></dfn>
  attribute on the <code><a href=#the-link-element>link</a></code> element has the same semantics as
  the <a href=#attr-hyperlink-hreflang title=attr-hyperlink-hreflang><code>hreflang</code>
  attribute on hyperlink elements</a>.</p>

  <p>The <dfn id=attr-link-type title=attr-link-type><code>type</code></dfn> attribute
  gives the <a href=#mime-type>MIME type</a> of the linked resource. It is
  purely advisory.  The value must be a <a href=#valid-mime-type>valid MIME
  type</a>.</p>

  <p>For <a href=#external-resource-link title="external resource link">external resource
  links</a>, the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute
  is used as a hint to user agents so that they can avoid fetching
  resources they do not support. <span class=impl>If the attribute
  is present, then the user agent must assume that the resource is of
  the given type (even if that is not a <a href=#valid-mime-type>valid MIME type</a>,
  e.g. the empty string). If the attribute is omitted, but the
  external resource link type has a default type defined, then the
  user agent must assume that the resource is of that type. If the UA
  does not support the given <a href=#mime-type>MIME type</a> for the given link
  relationship, then the UA should not <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource; if the UA
  does support the given <a href=#mime-type>MIME type</a> for the given link
  relationship, then the UA should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource. If the
  attribute is omitted, and the external resource link type does not
  have a default type defined, but the user agent would <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource if the type
  was known and supported, then the user agent should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource under the
  assumption that it will be supported.</span></p>

  <div class=impl>

  <p>User agents must not consider the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute authoritative &mdash;
  upon fetching the resource, user agents must not use the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute to determine its actual
  type. Only the actual type (as defined in the next paragraph) is
  used to determine whether to <em>apply</em> the resource, not the
  aforementioned assumed type.</p>

  <p id=concept-link-type-sniffing>If the external resource link
  type defines rules for processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, then those rules
  apply. Otherwise, if the resource is expected to be an image, user
  agents may apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing:
  image">image sniffing rules</a>, with the <var title="">official
  type</var> being the type determined from the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, and use the
  resulting sniffed type of the resource as if it was the actual
  type. Otherwise, if neither of these conditions apply or if the user
  agent opts not to apply the image sniffing rules, then the user
  agent must use the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a> to determine the
  type of the resource. If there is no type metadata, but the external
  resource link type has a default type defined, then the user agent
  must assume that the resource is of that type.</p>

  <p class=note>The <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code>
  link type defines rules for processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>.</p>

  <p>Once the user agent has established the type of the resource, the
  user agent must apply the resource if it is of a supported type and
  the other relevant conditions apply, and must ignore the resource
  otherwise.</p>

  <div class=example>

   <p>If a document contains style sheet links labeled as follows:</p>

   <pre>&lt;link rel="stylesheet" href="A" type="text/plain"&gt;
&lt;link rel="stylesheet" href="B" type="text/css"&gt;
&lt;link rel="stylesheet" href="C"&gt;</pre>

   <p>...then a compliant UA that supported only CSS style sheets
   would fetch the B and C files, and skip the A file (since
   <code>text/plain</code> is not the <a href=#mime-type>MIME type</a> for CSS style
   sheets).</p>

   <p>For files B and C, it would then check the actual types returned
   by the server. For those that are sent as <code>text/css</code>, it
   would apply the styles, but for those labeled as
   <code>text/plain</code>, or any other type, it would not.</p>

   <p>If one of the two files was returned without a
   <a href=#content-type>Content-Type</a> metadata, or with a syntactically
   incorrect type like <code title="">Content-Type:&nbsp;"null"</code>, then the default type
   for <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> links would kick
   in. Since that default type is <code title="">text/css</code>, the
   style sheet <em>would</em> nonetheless be applied.</p>

  </div>

  </div>

  <p>The <dfn id=attr-link-title title=attr-link-title><code>title</code></dfn>
  attribute gives the title of the link. With one exception, it is
  purely advisory. The value is text. The exception is for style sheet
  links, where the <code title=attr-link-title><a href=#attr-link-title>title</a></code>
  attribute defines <span>alternative style sheet sets</span>.</p>

  <p class=note>The <code title=attr-link-title><a href=#attr-link-title>title</a></code>
  attribute on <code><a href=#the-link-element>link</a></code> elements differs from the global
  <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute of most other
  elements in that a link without a title does not inherit the title
  of the parent element: it merely has no title.</p>

  <p>The <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attribute is used
  with the <code title=rel-icon><a href=#rel-icon>icon</a></code> link type. The attribute
  must not be specified on <code><a href=#the-link-element>link</a></code> elements that do not have
  a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute that specifies
  the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword.</p>

  <div class=impl>

  <p>Some versions of HTTP defined a <code title="">Link:</code>
  header, to be processed like a series of <code><a href=#the-link-element>link</a></code> elements.
  If supported, for the purposes of ordering links defined by HTTP
  headers must be assumed to come before any links in the document, in
  the order that they were given in the HTTP entity header. (URIs in
  these headers are to be processed and resolved according to the
  rules given in HTTP; the rules of <em>this</em> specification don't
  apply.) <a href=#refsHTTP>[HTTP]</a> <a href=#refsWEBLINK>[WEBLINK]</a></p> <!-- WEBLINK is ref for Link: header -->

  <p>The IDL attributes <dfn id=dom-link-href title=dom-link-href><code>href</code></dfn>, <dfn id=dom-link-rel title=dom-link-rel><code>rel</code></dfn>, <dfn id=dom-link-media title=dom-link-media><code>media</code></dfn>, <dfn id=dom-link-hreflang title=dom-link-hreflang><code>hreflang</code></dfn>, and <dfn id=dom-link-type title=dom-link-type><code>type</code></dfn>, and <dfn id=dom-link-sizes title=dom-link-sizes><code>sizes</code></dfn> each must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  <p>The IDL attribute <dfn id=dom-link-rellist title=dom-link-rellist><code>relList</code></dfn> <span class=impl>must</span> <a href=#reflect title=reflect>reflect</a> the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> content attribute.</p>

  </div>

  <p>The IDL attribute <dfn id=dom-link-disabled title=dom-link-disabled><code>disabled</code></dfn> only applies
  to style sheet links. When the <code><a href=#the-link-element>link</a></code> element defines a
  style sheet link, then the <code title=dom-link-disabled><a href=#dom-link-disabled>disabled</a></code> attribute behaves as
  defined <a href=#dom-linkstyle-disabled title=dom-linkstyle-disabled>for the alternative
  style sheets DOM</a>. For all other <code><a href=#the-link-element>link</a></code> elements it
  always return false and does nothing on setting.</p> <!-- that is
  normatively required in the definition of dom-linkstyle-disabled -->

  <p>The <code>LinkStyle</code> interface is also implemented by
  this element; the <a href=#styling>styling processing model</a> defines
  how. <a href=#refsCSSOM>[CSSOM]</a></p>

  <div class=example>

   <p>Here, a set of <code><a href=#the-link-element>link</a></code> elements provide some style
   sheets:</p>

   <pre>&lt;!-- a persistent style sheet --&gt;
&lt;link rel="stylesheet" href="default.css"&gt;

&lt;!-- the preferred alternate style sheet --&gt;
&lt;link rel="stylesheet" href="green.css" title="Green styles"&gt;

&lt;!-- some alternate style sheets --&gt;
&lt;link rel="alternate stylesheet" href="contrast.css" title="High contrast"&gt;
&lt;link rel="alternate stylesheet" href="big.css" title="Big fonts"&gt;
&lt;link rel="alternate stylesheet" href="wide.css" title="Wide screen"&gt;</pre>

  </div>

  <div class=example>

   <p>The following example shows how you can specify versions of the
   page that use alternative formats, are aimed at other languages,
   and that are intended for other media:</p>

   <pre>&lt;link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML"&gt;
&lt;link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML"&gt;
&lt;link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)"&gt;
&lt;link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"&gt;
&lt;link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF"&gt;
&lt;link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"&gt;</pre>

  </div>





  <h4 id=meta><span class=secno>4.2.5 </span>The <dfn><code>meta</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#metadata-content>Metadata content</a>.</dd>

   <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a href=#flow-content>flow content</a>.</dd>
   <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a href=#phrasing-content>phrasing content</a>.</dd>

   <dt>Contexts in which this element may be used:</dt>
   <dd>If the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute is present, or if the element's <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is in the <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration state</a>: in a <code><a href=#the-head-element-0>head</a></code> element.</dd>
   <dd>If the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is present but not in the <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration state</a>: in a <code><a href=#the-head-element-0>head</a></code> element.</dd>
   <dd>If the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is present but not in the <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration state</a>: in a <code><a href=#the-noscript-element>noscript</a></code> element that is a child of a <code><a href=#the-head-element-0>head</a></code> element.</dd>
   <dd>If the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute is present: where <a href=#metadata-content>metadata content</a> is expected.</dd>

   <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a href=#metadata-content>metadata content</a> is expected.</dd>
   <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a href=#phrasing-content>phrasing content</a> is expected.</dd>

   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-meta-name><a href=#attr-meta-name>name</a></code></dd>
   <dd><code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code></dd>
   <dd><code title=attr-meta-content><a href=#attr-meta-content>content</a></code></dd>
   <dd><code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlmetaelement>HTMLMetaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-meta-name title=dom-meta-name>name</a>;
           attribute DOMString <a href=#dom-meta-httpequiv title=dom-meta-httpEquiv>httpEquiv</a>;
           attribute DOMString <a href=#dom-meta-content title=dom-meta-content>content</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#meta>meta</a></code> element <a href=#represents>represents</a> various
  kinds of metadata that cannot be expressed using the
  <code><a href=#the-title-element-0>title</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-link-element>link</a></code>,
  <code><a href=#the-style-element>style</a></code>, and <code><a href=#script>script</a></code> elements.</p>

  <p>The <code><a href=#meta>meta</a></code> element can represent document-level
  metadata with the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>
  attribute, pragma directives with the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute, and the
  file's <a href=#character-encoding-declaration>character encoding declaration</a> when an HTML
  document is serialized to string form (e.g. for transmission over
  the network or for disk storage) with the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute.</p>


  <p>Exactly one of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>,
  <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>, and <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attributes must be
  specified.</p>

  <p>If either <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>, <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, or <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> is specified, then the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must also be
  specified. Otherwise, it must be omitted.</p>

  <p>The <dfn id=attr-meta-charset title=attr-meta-charset><code>charset</code></dfn>
  attribute specifies the character encoding used by the
  document. This is a <a href=#character-encoding-declaration>character encoding declaration</a>. If
  the attribute is present in an <a href=#xml-documents title="XML documents">XML
  document</a>, its value must be an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> match for the string "<code title="">UTF-8</code>" (and the document is therefore forced to use
  UTF-8 as its encoding).</p>

  <p class=note>The <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>
  attribute on the <code><a href=#meta>meta</a></code> element has no effect in XML
  documents, and is only allowed in order to facilitate migration to
  and from XHTML.</p>

  <p>There must not be more than one <code><a href=#meta>meta</a></code> element with a
  <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute per
  document.</p>

  <p>The <dfn id=attr-meta-content title=attr-meta-content><code>content</code></dfn>
  attribute gives the value of the document metadata or pragma
  directive when the element is used for those purposes. The allowed
  values depend on the exact context, as described in subsequent
  sections of this specification.</p>

  <p>If a <code><a href=#meta>meta</a></code> element has a <dfn id=attr-meta-name title=attr-meta-name><code>name</code></dfn> attribute, it sets
  document metadata. Document metadata is expressed in terms of
  name/value pairs, the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>
  attribute on the <code><a href=#meta>meta</a></code> element giving the name, and the
  <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute on the same
  element giving the value. The name specifies what aspect of metadata
  is being set; valid names and the meaning of their values are
  described in the following sections. If a <code><a href=#meta>meta</a></code> element
  has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute,
  then the value part of the metadata name/value pair is the empty
  string.</p>

  <div class=impl>

  <p>The <dfn id=dom-meta-name title=dom-meta-name><code>name</code></dfn> and <dfn id=dom-meta-content title=dom-meta-content><code>content</code></dfn> IDL attributes
  must <a href=#reflect>reflect</a> the respective content attributes of the
  same name. The IDL attribute <dfn id=dom-meta-httpequiv title=dom-meta-httpEquiv><code>httpEquiv</code></dfn> must
  <a href=#reflect>reflect</a> the content attribute <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>.</p>

  </div>


  <h5 id=standard-metadata-names><span class=secno>4.2.5.1 </span>Standard metadata names</h5>

  <p>This specification defines a few names for the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute of the
  <code><a href=#meta>meta</a></code> element.</p>

  <p>Names are case-insensitive<span class=impl>, and must be compared
  in an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> manner</span>.</p>

  <dl><dt><dfn id=meta-application-name title=meta-application-name><code>application-name</code></dfn></dt>

   <dd><p>The value must be a short free-form string giving the name
   of the Web application that the page represents. If the page is not
   a Web application, the <code title=meta-application-name><a href=#meta-application-name>application-name</a></code> metadata name
   must not be used. There must not be more than one <code><a href=#meta>meta</a></code>
   element with its <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute
   set to the value <code title=meta-application-name><a href=#meta-application-name>application-name</a></code> per
   document. <span class=impl>User agents may use the application
   name in UI in preference to the page's <code><a href=#the-title-element-0>title</a></code>, since
   the title might include status messages and the like relevant to
   the status of the page at a particular moment in time instead of
   just being the name of the application.</span></dd>

   <dt><dfn id=meta-author title=meta-author><code>author</code></dfn></dt>

   <dd><p>The value must be a free-form string giving the name of one
   of the page's authors.</dd>

   <dt><dfn id=meta-description title=meta-description><code>description</code></dfn></dt>

   <dd><p>The value must be a free-form string that describes the
   page. The value must be appropriate for use in a directory of
   pages, e.g. in a search engine. There must not be more than one
   <code><a href=#meta>meta</a></code> element with its <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute set to the value <code title=meta-description><a href=#meta-description>description</a></code> per document.</dd>

   <dt><dfn id=meta-generator title=meta-generator><code>generator</code></dfn></dt>

   <dd>

    <p>The value must be a free-form string that identifies one of the
    software packages used to generate the document. This value must
    not be used on hand-authored pages.</p>

    <div class=example>

     <p>Here is what a tool called "Frontweaver" could include in its
     output, in the page's <code><a href=#the-head-element-0>head</a></code> element, to identify
     itself as the tool used to generate the page:</p>

     <pre>&lt;meta name=generator content="Frontweaver 8.2"&gt;</pre>

    </div>

   </dd>

   <dt><dfn id=meta-keywords title=meta-keywords><code>keywords</code></dfn></dt>

   <dd>

    <p>The value must be a <a href=#set-of-comma-separated-tokens>set of comma-separated tokens</a>,
    each of which is a keyword relevant to the page.</p>

    <div class=example>

     <p>This page about typefaces on British motorways uses a
     <code><a href=#meta>meta</a></code> element to specify some keywords that users
     might use to look for the page:</p>

     <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Typefaces on UK motorways&lt;/title&gt;
  &lt;meta name="keywords" content="british,type face,font,fonts,highway,highways"&gt;
 &lt;/head&gt;
 &lt;body&gt;
  ...</pre>

    </div>

    <p class=note>Many search engines do not consider such keywords,
    because this feature has historically been used unreliably and
    even misleadingly as a way to spam search engine results in a way
    that is not helpful for users.</p>

    <div class=impl>

    <p>To obtain the list of keywords that the author has specified as
    applicable to the page, the user agent must run the following
    steps:</p>

    <ol><li><p>Let <var title="">keywords</var> be an empty
     list.</li>

     <li>

      <p>For each <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute and a <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute and whose
      <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute's value is
      <code title=meta-keywords><a href=#meta-keywords>keywords</a></code>, run the following
      substeps:</p>

      <ol><li><p><a href=#split-a-string-on-commas title="split a string on commas">Split the value
       of the element's <code title=attr-meta-content>content</code>
       attribute on commas</a>.</li>

       <li><p>Add the resulting tokens, if any, to <var title="">keywords</var>.</li>

      </ol></li>

     <li><p>Remove any duplicates from <var title="">keywords</var>.</li>

     <li><p>Return <var title="">keywords</var>. This is the list of
     keywords that the author has specified as applicable to the
     page.</li>

    </ol><p>User agents should not use this information when there is
    insufficient confidence in the reliability of the value.</p>

    <p class=example>For instance, it would be reasonable for a
    content management system to use the keyword information of pages
    within the system to populate the index of a site-specific search
    engine, but a large-scale content aggregator that used this
    information would likely find that certain users would try to game
    its ranking mechanism through the use of inappropriate
    keywords.</p>

    </div>

   </dd>

  </dl><h5 id=other-metadata-names><span class=secno>4.2.5.2 </span>Other metadata names</h5>

  <p><dfn id=concept-meta-extensions title=concept-meta-extensions>Extensions to the predefined
  set of metadata names</dfn> may be registered in the <a href=http://wiki.whatwg.org/wiki/MetaExtensions>WHATWG Wiki
  MetaExtensions page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>

  <p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any
  time to add a type. These new names must be specified with the
  following information:</p>

  <dl><dt>Keyword</dt>

   <dd><p>The actual name being defined. The name should not be
   confusingly similar to any other defined name (e.g. differing only
   in case).</dd>


   <dt>Brief description</dt>

   <dd><p>A short non-normative description of what the metadata
   name's meaning is, including the format the value is required to be
   in.</dd>


   <dt>Specification</dt>

   <dd>A link to a more detailed description of the metadata name's
   semantics and requirements. It could be another page on the Wiki,
   or a link to an external page.</dd>


   <dt>Synonyms</dt>

   <dd><p>A list of other names that have exactly the same processing
   requirements. Authors should not use the names defined to be
   synonyms, they are only intended to allow user agents to support
   legacy content. Anyone may remove synonyms that are not used in
   practice; only names that need to be processed as synonyms for
   compatibility with legacy content are to be registered in this
   way.</dd>


   <dt>Status</dt>

   <dd>

    <p>One of the following:</p>

    <dl><dt>Proposed</dt>

     <dd>The name has not received wide peer review and
     approval. Someone has proposed it and is, or soon will be, using
     it.</dd>

     <dt>Ratified</dt>

     <dd>The name has received wide peer review and approval. It has a
     specification that unambiguously defines how to handle pages that
     use the name, including when they use it in incorrect ways.</dd>

     <dt>Discontinued</dt>

     <dd>The metadata name has received wide peer review and it has
     been found wanting. Existing pages are using this metadata name,
     but new pages should avoid it. The "brief description" and
     "specification" entries will give details of what authors should
     use instead, if anything.</dd>

    </dl><p>If a metadata name is found to be redundant with existing
    values, it should be removed and listed as a synonym for the
    existing value.</p>

    <p>If a metadata name is registered in the "proposed" state for a
    period of a month or more without being used or specified, then it
    may be removed from the registry.</p>

    <p>If a metadata name is added with the "proposed" status and
    found to be redundant with existing values, it should be removed
    and listed as a synonym for the existing value. If a metadata name
    is added with the "proposed" status and found to be harmful, then
    it should be changed to "discontinued" status.</p>

    <p>Anyone can change the status at any time, but should only do so
    in accordance with the definitions above.</p>

   </dd>

  </dl><div class=impl>

  <p>Conformance checkers must use the information given on the WHATWG
  Wiki MetaExtensions page to establish if a value is allowed or not:
  values defined in this specification or marked as "proposed" or
  "ratified" must be accepted, whereas values marked as "discontinued"
  or not listed in either this specification or on the aforementioned
  page must be rejected as invalid. Conformance checkers may cache
  this information (e.g. for performance reasons or to avoid the use
  of unreliable network connectivity).</p>

  <p>When an author uses a new metadata name not defined by either
  this specification or the Wiki page, conformance checkers should
  offer to add the value to the Wiki, with the details described
  above, with the "proposed" status.</p>

  </div>

  <p>Metadata names whose values are to be <a href=#url title=URL>URLs</a> must not be proposed or accepted. Links must
  be represented using the <code><a href=#the-link-element>link</a></code> element, not the
  <code><a href=#meta>meta</a></code> element.</p>



  <h5 id=pragma-directives><span class=secno>4.2.5.3 </span>Pragma directives</h5>

  <p>When the <dfn id=attr-meta-http-equiv title=attr-meta-http-equiv><code>http-equiv</code></dfn> attribute
  is specified on a <code><a href=#meta>meta</a></code> element, the element is a pragma
  directive.</p>

  <p>The <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
  table lists the keywords defined for this attribute. The states
  given in the first cell of the rows with keywords give the states to
  which those keywords map. <!--<span class="impl">Some of the
  keywords are non-conforming, as noted in the last
  column.</span>--></p>

<!-- things that are neither conforming nor do anything are commented out -->
<!-- if you add something non-conforming, uncomment out the last sentence above -->
  <table><thead><tr><th>State
     <th>Keywords
     <th>Notes
   <tbody><tr><td><a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content Language</a>
     <td><code title="">content-language</code>
     <td>Conformance checkers will include a warning
    <tr><td><a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration</a>
     <td><code title="">content-type</code>
     <td>
<!--
    <tr class="impl">
     <td><span title="attr-meta-http-equiv-content-script-type">Content-Script-Type</span>
     <td><code title="">Content-Script-Type</code>
     <td>Non-conforming
    <tr class="impl">
     <td><span title="attr-meta-http-equiv-content-style-type">Content-Style-Type</span>
     <td><code title="">Content-Style-Type</code>
     <td>Non-conforming
-->
    <tr><td><a href=#attr-meta-http-equiv-default-style title=attr-meta-http-equiv-default-style>Default style</a>
     <td><code title="">default-style</code>
     <td>
    <tr><td><a href=#attr-meta-http-equiv-refresh title=attr-meta-http-equiv-refresh>Refresh</a>
     <td><code title="">refresh</code>
     <td>
  </table><!--
DATA: According to Henri's validator stats, here are common
non-conforming values used by people who validate (sample of 400
pages):

COUNT ERROR
   20 Bad value "Content-Language" for attribute "http-equiv" on element "meta".
   17 Bad value "Content-Style-Type" for attribute "http-equiv" on element "meta".
   12 Bad value "Expires" for attribute "http-equiv" on element "meta".
   11 Bad value "Pragma" for attribute "http-equiv" on element "meta".
   11 Bad value "imagetoolbar" for attribute "http-equiv" on element "meta".
   10 Bad value "Content-Script-Type" for attribute "http-equiv" on element "meta".
   10 Bad value "content-language" for attribute "http-equiv" on element "meta".
 [...]
http://hsivonen.iki.fi/test/moz/analysis.txt

Here's some more data, this time from Philip`, on a sample of 15k pages.

  COUNT VALUE
   1181 Content-Language
    430 Content-Style-Type
    342 imagetoolbar
    276 content-language
    269 Pragma
    260 expires
    227 Expires
    211 pragma
    146 Content-Script-Type
    132 keywords
    119 Page-Enter
    116 description
    106 reply-to
    102 Cache-Control
   [...]
http://philip.html5.org/data/meta-http-equiv.txt

These numbers are low; further study is required to establish what
people expect to have work and what is necessary.
--><div class=impl>

  <p>When a <code><a href=#meta>meta</a></code> element is <a href=#insert-an-element-into-a-document title="insert an
  element into a document">inserted into the document</a>, if its
  <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is
  present and represents one of the above states, then the user agent
  must run the algorithm appropriate for that state, as described in
  the following list:</p>

  </div>

  <dl><dt><dfn id=attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content language state</dfn> (<code title="">http-equiv="content-language"</code>)

   <dd>

    <p>This pragma sets the <dfn id=pragma-set-default-language>pragma-set default
    language</dfn>. Until the pragma is successfully processed, there
    is no <a href=#pragma-set-default-language>pragma-set default language</a>.</p>

    <p class=note>Conformance checkers will include a warning if
    this pragma is used. Authors are encouraged to use the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute instead.</p>

    <div class=impl>

    <ol><li><p>If another <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
     <a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content
     Language state</a> has already been successfully processed
     (i.e. when it was inserted the user agent processed it and
     reached the last step of this list of steps), then abort these
     steps.</li>

     <li><p>If the <code><a href=#meta>meta</a></code> element has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, or if that
     attribute's value is the empty string, then abort these
     steps.</li>

     <li><p>If the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute contains a
     U+002C COMMA character (,) then abort these steps.</li><!--
     if you remove this, un-comment-out the corresponding bits in the
     step below. -->

     <li><p>Let <var title="">input</var> be the value of the
     element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code>
     attribute.</li>

     <li><p>Let <var title="">position</var> point at the first
     character of <var title="">input</var>.</li>

     <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

     <li><p><a href=#collect-a-sequence-of-characters title="collect a sequence of characters">Collect a
     sequence of characters</a> that are not<!--neither--> <a href=#space-character title="space character">space characters</a><!-- nor a U+002C
     COMMA character (,)-->.</li>

     <li><p>Let the <a href=#pragma-set-default-language>pragma-set default language</a> be the
     string that resulted from the previous step.</li>

    </ol></div>

    <p>For <code><a href=#meta>meta</a></code> elements with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
    <a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content
    Language state</a>, the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must have a
    value consisting of a valid BCP 47 language tag. <a href=#refsBCP47>[BCP47]</a></p>

    <p class=note>This pragma is not exactly equivalent to the HTTP
    <code>Content-Language</code> header, for instance it only
    supports one language. <a href=#refsHTTP>[HTTP]</a></p>

   </dd>

   <dt><dfn id=attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration state</dfn> (<code title="">http-equiv="content-type"</code>)

   <dd>

    <p>The <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding
    declaration state</a> is just an alternative form of setting
    the <code title=meta-charset>charset</code> attribute: it is a
    <a href=#character-encoding-declaration>character encoding declaration</a>. <span class=impl>This state's user agent requirements are all handled
    by the parsing section of the specification.</span></p>

    <p>For <code><a href=#meta>meta</a></code> elements with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
    <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding
    declaration state</a>, the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must have a
    value that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for a
    string that consists of: the literal string "<code title="">text/html;</code>", optionally followed by any number of
    <a href=#space-character title="space character">space characters</a>, followed by
    the literal string "<code title="">charset=</code>", followed by
    the character encoding name of the <a href=#character-encoding-declaration>character encoding
    declaration</a>.</p>

    <p>If the document contains a <code><a href=#meta>meta</a></code> element with an
    <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in
    the <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding
    declaration state</a>, then the document must not contain a
    <code><a href=#meta>meta</a></code> element with the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute present.</p>

    <p>The <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding
    declaration state</a> may be used in <a href=#html-documents>HTML
    documents</a>, but elements with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in that
    state must not be used in <a href=#xml-documents>XML documents</a>.</p>

   </dd>

   <dt><dfn id=attr-meta-http-equiv-default-style title=attr-meta-http-equiv-default-style>Default style state</dfn> (<code title="">http-equiv="default-style"</code>)

   <dd>

    <p>This pragma sets the name of the default <span title="alternative style sheet sets">alternative style sheet
    set</span>.</p>

    <div class=impl>

    <ol><li><p>If the <code><a href=#meta>meta</a></code> element has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, or if that
     attribute's value is the empty string, then abort these
     steps.</li>

     <li><p>Set the <span>preferred style sheet set</span> to the
     value of the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute. <a href=#refsCSSOM>[CSSOM]</a></li>

    </ol></div>

   </dd>

   <dt><dfn id=attr-meta-http-equiv-refresh title=attr-meta-http-equiv-refresh>Refresh state</dfn> (<code title="">http-equiv="refresh"</code>)

   <dd>

    <p>This pragma acts as timed redirect.</p>

    <div class=impl>

    <ol><!-- TESTS: http://www.hixie.ch/tests/adhoc/html/meta/refresh/ --><li><p>If another <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
     <a href=#attr-meta-http-equiv-refresh title=attr-meta-http-equiv-refresh>Refresh state</a>
     has already been successfully processed (i.e. when it was
     inserted the user agent processed it and reached the last step of
     this list of steps), then abort these steps.</li>

     <li><p>If the <code><a href=#meta>meta</a></code> element has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, or if that
     attribute's value is the empty string, then abort these
     steps.</li>

     <li><p>Let <var title="">input</var> be the value of the
     element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code>
     attribute.</li>

     <li><p>Let <var title="">position</var> point at the first
     character of <var title="">input</var>.</li>

     <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

     <li><p><a href=#collect-a-sequence-of-characters title="collect a sequence of characters">Collect a
     sequence of characters</a> in the range U+0030 DIGIT ZERO (0)
     to U+0039 DIGIT NINE (9), and parse the resulting string using
     the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>. If the
     sequence of characters collected is the empty string, then no
     number will have been parsed; abort these steps. Otherwise, let
     <var title="">time</var> be the parsed number.</li>

     <li><p><a href=#collect-a-sequence-of-characters title="collect a sequence of characters">Collect a
     sequence of characters</a> in the range U+0030 DIGIT ZERO (0) to
     U+0039 DIGIT NINE (9) and U+002E FULL STOP (.). Ignore any collected
     characters.</li>

     <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

     <li><p>Let <var title="">url</var> be the address of the current
     page.</li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is a U+003B SEMICOLON ("<code title="">;</code>"), then advance <var title="">position</var> to
     the next character. Otherwise, jump to the last step.</li>

     <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is a U+0055 LATIN CAPITAL LETTER
     U character (U) or a U+0075 LATIN SMALL LETTER U character (u),
     then advance <var title="">position</var> to the next
     character. Otherwise, jump to the last step.</li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is a U+0052 LATIN CAPITAL LETTER
     R character (R) or a U+0072 LATIN SMALL LETTER R character (r),
     then advance <var title="">position</var> to the next
     character. Otherwise, jump to the last step.</li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is s U+004C LATIN CAPITAL LETTER
     L character (L) or a U+006C LATIN SMALL LETTER L character (l),
     then advance <var title="">position</var> to the next
     character. Otherwise, jump to the last step.</li>

     <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is a U+003D EQUALS SIGN ("<code title="">=</code>"), then advance <var title="">position</var> to
     the next character. Otherwise, jump to the last step.</li>

     <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is either a U+0027 APOSTROPHE
     character (') or U+0022 QUOTATION MARK character ("), then let
     <var title="">quote</var> be that character, and advance <var title="">position</var> to the next character. Otherwise, let
     <var title="">quote</var> be the empty string.</li>

     <li><p>Let <var title="">url</var> be equal to the substring of
     <var title="">input</var> from the character at <var title="">position</var> to the end of the string.</li>

     <li><p>If <var title="">quote</var> is not the empty string, and
     there is a character in <var title="">url</var> equal to <var title="">quote</var>, then truncate <var title="">url</var> at
     that character, so that it and all subsequent characters are
     removed.</p>

     <li><p>Strip any trailing <a href=#space-character title="space character">space
     characters</a> from the end of <var title="">url</var>.</li>

     <li><p>Strip any U+0009 CHARACTER TABULATION, U+000A LINE FEED
     (LF), and U+000D CARRIAGE RETURN (CR) characters from <var title="">url</var>.</li>

     <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the <var title="">url</var> value to an <a href=#absolute-url>absolute URL</a>,
     relative to the <code><a href=#meta>meta</a></code> element. If this fails, abort
     these steps.</li>

     <li>

      <p>Perform one or more of the following steps:</p>

      <ul><li><p>Set a timer so that in <var title="">time</var> seconds,
       adjusted to take into account user or user agent preferences,
       if the user has not canceled the redirect and if the
       <code><a href=#meta>meta</a></code> element's <code><a href=#document>Document</a></code>'s
       <a href=#browsing-context>browsing context</a> did not have the <a href=#sandboxed-automatic-features-browsing-context-flag>sandboxed
       automatic features browsing context flag</a> set when the
       <code><a href=#document>Document</a></code> was created, the user agent <a href=#navigate title=navigate>navigates</a> the <code><a href=#document>Document</a></code>'s
       <a href=#browsing-context>browsing context</a> to <var title="">url</var>, with
       <a href=#replacement-enabled>replacement enabled</a>, and with the
       <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> as the
       <a href=#source-browsing-context>source browsing context</a>.</li>

       <li><p>Provide the user with an interface that, when selected,
       <a href=#navigate title=navigate>navigates</a> a <a href=#browsing-context>browsing
       context</a> to <var title="">url</var>, with the document's
       browsing context as the <a href=#source-browsing-context>source browsing
       context</a>.</li>

       <li><p>Do nothing.</li>

      </ul><p>In addition, the user agent may, as with anything, inform the
      user of any and all aspects of its operation, including the
      state of any timers, the destinations of any timed redirects,
      and so forth.</p>

     </li>

    </ol></div>

    <p>For <code><a href=#meta>meta</a></code> elements with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
    <a href=#attr-meta-http-equiv-refresh title=attr-meta-http-equiv-refresh>Refresh state</a>,
    the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must
    have a value consisting either of:</p>

    <ul><li> just a <a href=#valid-non-negative-integer>valid non-negative integer</a>, or</li>

     <li> a <a href=#valid-non-negative-integer>valid non-negative integer</a>, followed by a
     U+003B SEMICOLON character (;), followed by one or more <a href=#space-character title="space character">space characters</a>, followed by
     either a U+0055 LATIN CAPITAL LETTER U character (U) or a U+0075
     LATIN SMALL LETTER U character (u), a U+0052 LATIN CAPITAL LETTER
     R character (R) or a U+0072 LATIN SMALL LETTER R character (r), a
     U+004C LATIN CAPITAL LETTER L character (L) or a U+006C LATIN
     SMALL LETTER L character (l), a U+003D EQUALS SIGN character (=),
     and then a <a href=#valid-url>valid URL</a>.</li>

    </ul><p>In the former case, the integer represents a number of seconds
    before the page is to be reloaded; in the latter case the integer
    represents a number of seconds before the page is to be replaced
    by the page at the given <a href=#url>URL</a>.</p>

    <div class=example>

     <p>A news organization's front page could include the following
     markup in the page's <code><a href=#the-head-element-0>head</a></code> element, to ensure that
     the page automatically reloads from the server every five
     minutes:</p>

     <pre>&lt;meta http-equiv="Refresh" content="300"&gt;</pre>

    </div>

    <div class=example>

     <p>A sequence of pages could be used as an automated slide show
     by making each page refresh to the next page in the sequence,
     using markup such as the following:</p>

     <pre>&lt;meta http-equiv="Refresh" content="20; URL=page4.html"&gt;</pre>

    </div>

   </dd>

  </dl><p>There must not be more than one <code><a href=#meta>meta</a></code> element with
  any particular state in the document at a time.</p>


  <h5 id=other-pragma-directives><span class=secno>4.2.5.4 </span>Other pragma directives</h5>

  <p><dfn id=concept-http-equiv-extensions title=concept-http-equiv-extensions>Extensions to the
  predefined set of pragma directives</dfn> may, under certain
  conditions, be registered in the <a href=http://wiki.whatwg.org/wiki/PragmaExtensions>WHATWG Wiki
  PragmaExtensions page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>

  <p>Such extensions must use a name that is identical to an HTTP
  header registered in the Permanent Message Header Field Registry,
  and must have behavior identical to that described for the HTTP
  header. <a href=#refsIANAPERMHEADERS>[IANAPERMHEADERS]</a></p>

  <p>Pragma directives corresponding to headers describing metadata,
  or not requiring specific user agent processing, must not be
  registered; instead, use <a href=#concept-meta-extensions title=concept-meta-extensions>metadata names</a>. Pragma
  directives corresponding to headers that affect the HTTP processing
  model (e.g. caching) must not be registered, as they would result in
  HTTP-level behavior being different for user agents that implement
  HTML than for user agents that do not.</p>

  <p>Anyone is free to edit the WHATWG Wiki PragmaExtensions page at
  any time to add a pragma directive satisfying these conditions. Such
  registrations must specify the following information:</p>

  <dl><dt>Keyword</dt>

   <dd><p>The actual name being defined. The name must match a
   previously-registered HTTP name with the same
   requirements.</dd>


   <dt>Brief description</dt>

   <dd><p>A short non-normative description of the purpose of the
   pragma directive.</dd>


   <dt>Specification</dt>

   <dd>A link to the specification defining the corresponding HTTP
   header.</dd>

  </dl><div class=impl>

  <p>Conformance checkers must use the information given on the WHATWG
  Wiki PragmaExtensions page to establish if a value is allowed or
  not: values defined in this specification or listed on the
  aforementioned page must be accepted, whereas values not listed in
  either this specification or on the aforementioned page must be
  rejected as invalid. Conformance checkers may cache this information
  (e.g. for performance reasons or to avoid the use of unreliable
  network connectivity).</p>

  </div>




  <h5 id=charset><span class=secno>4.2.5.5 </span>Specifying the document's character encoding</h5>

  <!-- READ ME WHEN EDITING: if we ever move this to the "writing
  HTML" section, then we have to duplicate the requirements in the
  parsing section for conformance checkers, and we have to make sure
  that the requirements for charset="" apply even in XML, for the
   polyglot hack. -->

  <p>A <dfn id=character-encoding-declaration>character encoding declaration</dfn> is a mechanism by
  which the character encoding used to store or transmit a document is
  specified.</p>

  <p>The following restrictions apply to character encoding
  declarations:</p>

  <ul><li>The character encoding name given must be the name of the
   character encoding used to serialize the file.</li>

   <li>The value must be a valid character encoding name, and must be
   an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
   <a href=#preferred-mime-name>preferred MIME name</a> for that encoding. <a href=#refsIANACHARSET>[IANACHARSET]</a></li>

   <li>The character encoding declaration must be serialized without
   the use of <a href=#syntax-charref title=syntax-charref>character references</a>
   or character escapes of any kind.</li>

   <li id=charset512>The element containing the character encoding
   declaration must be serialized completely within the first 512
   bytes of the document.</li>

   <li>There can only be one character encoding declaration in the
   document.</li> <!-- conformance criteria for this one are given in
   the XML spec, the <meta> section just after defining charset="",
   and the character encoding pragma section. And actually this
   statement isn't quite true, since you can have an XML one and an
   HTML one at the same time if they match. -->

  </ul><p>If an <a href=#html-documents title="HTML documents">HTML document</a> does not
  start with a BOM, and if its encoding is not explicitly given by
  <a href=#content-type title=Content-Type>Content-Type metadata</a>, and the
  document is not <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a>, then the
  character encoding used must be an <a href=#ascii-compatible-character-encoding>ASCII-compatible character
  encoding</a>, and, in addition, if that encoding isn't US-ASCII
  itself, then the encoding must be specified using a
  <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute or a
  <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
  <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration
  state</a>.</p>

  <p>If the document is <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a>, the
  document must not have a <a href=#character-encoding-declaration>character encoding
  declaration</a>. (In this case, the source is already decoded,
  since it is part of the document that contained the
  <code><a href=#the-iframe-element>iframe</a></code>.)</p>

  <p>If an <a href=#html-documents title="HTML documents">HTML document</a> contains
  a <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute or a
  <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
  <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration
  state</a>, then the character encoding used must be an
  <a href=#ascii-compatible-character-encoding>ASCII-compatible character encoding</a>.</p>

  <p>Authors are encouraged to use UTF-8. Conformance checkers may
  advise authors against using legacy encodings.</p>

  <div class=impl>

  <p>Authoring tools should default to using UTF-8 for newly-created
  documents.</p>

  </div>

  <p>Encodings in which a series of bytes in the range 0x20 to 0x7E
  can encode characters other than the corresponding characters in the
  range U+0020 to U+007E represent a potential security vulnerability:
  a user agent that does not support the encoding (or does not support
  the label used to declare the encoding, or does not use the same
  mechanism to detect the encoding of unlabelled content as another
  user agent) might end up interpreting technically benign plain text
  content as HTML tags and JavaScript. For example, this applies to
  encodings in which the bytes corresponding to "<code title="">&lt;script&gt;</code>" in ASCII can encode a different
  string. Authors should not use such encodings, which are known to
  include JIS_C6226-1983<!-- aka JIS-X-0208, x-JIS0208 -->,
  JIS_X0212-1990<!-- aka JIS-X-0212 -->, HZ-GB-2312<!-- has crazy
  handling of ASCII "~" -->, JOHAB <!-- a supplementary encoding in KS
  C 5601-1992 Annex 3 (= KS X 1001:1998 Annex 3) --> (Windows code
  page 1361), encodings based on ISO-2022<!--
  http://krijnhoetmer.nl/irc-logs/whatwg/20090628#l-422 and
  http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-October/023797.html
  -->, and encodings based on EBCDIC. Furthermore, authors must not
  use the CESU-8, UTF-7, BOCU-1 and SCSU encodings, which also fall
  into this category, because these encodings were never intended for
  use for Web content.
  <a href=#refsRFC1345>[RFC1345]</a><!-- for the JIS types -->
  <a href=#refsRFC1842>[RFC1842]</a><!-- HZ-GB-2312 -->
  <a href=#refsRFC1468>[RFC1468]</a><!-- ISO-2022-JP -->
  <a href=#refsRFC2237>[RFC2237]</a><!-- ISO-2022-JP-1 -->
  <a href=#refsRFC1554>[RFC1554]</a><!-- ISO-2022-JP-2 -->
  <a href=#refsRFC1922>[RFC1922]</a><!-- ISO-2022-CN and ISO-2022-CN-EXT -->
  <a href=#refsRFC1557>[RFC1557]</a><!-- ISO-2022-KR -->
  <a href=#refsCESU8>[CESU8]</a>
  <a href=#refsUTF7>[UTF7]</a>
  <a href=#refsBOCU1>[BOCU1]</a>
  <a href=#refsSCSU>[SCSU]</a>
  <!-- no idea what to reference for JOHAB or EBCDIC, so... -->
  </p>

  <p>Authors should not use UTF-32, as the encoding detection
  algorithms described in this specification intentionally do not
  distinguish it from UTF-16. <a href=#refsUNICODE>[UNICODE]</a></p>

  <p class=note>Using non-UTF-8 encodings can have unexpected
  results on form submission and URL encodings, which use the
  <a href="#document's-character-encoding">document's character encoding</a> by default.</p>

  <p>In XHTML, the XML declaration should be used for inline character
  encoding information, if necessary.</p>

  <div class=example>

   <p>In HTML, to declare that the character encoding is UTF-8, the
   author could include the following markup near the top of the
   document (in the <code><a href=#the-head-element-0>head</a></code> element):</p>

   <pre>&lt;meta charset="utf-8"&gt;</pre>

   <p>In XML, the XML declaration would be used instead, at the very
   top of the markup:</p>

   <pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;</pre>

  </div>


  <h4 id=the-style-element><span class=secno>4.2.6 </span>The <dfn><code>style</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#metadata-content>Metadata content</a>.</dd>
   <dd>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is present: <a href=#flow-content>flow content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is absent: where <a href=#metadata-content>metadata content</a> is expected.</dd>
   <dd>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is absent: in a <code><a href=#the-noscript-element>noscript</a></code> element that is a child of a <code><a href=#the-head-element-0>head</a></code> element.</dd>
   <dd>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is present: where <a href=#flow-content>flow content</a> is expected, but before any other <a href=#flow-content>flow content</a> other than other <code><a href=#the-style-element>style</a></code> elements and <a href=#inter-element-whitespace>inter-element whitespace</a>.</dd>
   <dt>Content model:</dt>
   <dd>Depends on the value of the <code title=attr-style-type><a href=#attr-style-type>type</a></code> attribute, but must match requirements described in prose below.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-style-media><a href=#attr-style-media>media</a></code></dd>
   <dd><code title=attr-style-type><a href=#attr-style-type>type</a></code></dd>
   <dd><code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code></dd>
   <dd>Also, the <code title=attr-style-title><a href=#attr-style-title>title</a></code> attribute has special semantics on this element.</dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlstyleelement>HTMLStyleElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-style-disabled title=dom-style-disabled>disabled</a>;
           attribute DOMString <a href=#dom-style-media title=dom-style-media>media</a>;
           attribute DOMString <a href=#dom-style-type title=dom-style-type>type</a>;
           attribute boolean <a href=#dom-style-scoped title=dom-style-scoped>scoped</a>;
};
<a href=#htmlstyleelement>HTMLStyleElement</a> implements <span>LinkStyle</span>;</pre>
   </dd>
  </dl><p>The <code><a href=#the-style-element>style</a></code> element allows authors to embed style
  information in their documents. The <code><a href=#the-style-element>style</a></code> element is
  one of several inputs to the <a href=#styling>styling processing
  model</a>. The element does not <a href=#represents title=represents>represent</a> content for the user.</p>

  <p>The <dfn id=attr-style-type title=attr-style-type><code>type</code></dfn>
  attribute gives the styling language. If the attribute is present,
  its value must be a <a href=#valid-mime-type>valid MIME type</a> that designates a
  styling language. The <code title="">charset</code> parameter must
  not be specified. The default, which is used if the attribute is
  absent, is "<code title="">text/css</code>". <a href=#refsRFC2318>[RFC2318]</a></p>

  <div class=impl>

  <!-- this paragraph is also present in the <script> section -->
  <p>When examining types to determine if they support the language,
  user agents must not ignore unknown MIME parameters &mdash; types
  with unknown parameters must be assumed to be unsupported. The <code title="">charset</code> parameter must be treated as an unknown
  parameter for the purpose of comparing <a href=#mime-type title="MIME type">MIME
  types</a> here.</p>

  </div>

  <p>The <dfn id=attr-style-media title=attr-style-media><code>media</code></dfn>
  attribute says which media the styles apply to. The value must be a
  <a href=#valid-media-query>valid media query</a>.  <span class=impl>The user agent
  must apply the styles when the <code title=attr-style-media><a href=#attr-style-media>media</a></code> attribute's value
  <a href=#matches-the-environment>matches the environment</a> and the other relevant
  conditions apply, and must not apply them otherwise.</span></p><!--
  note similar text in <link> section -->

  <div class=impl>

  <p class=note>The styles might be further limited in scope,
  e.g. in CSS with the use of <code title="">@media</code>
  blocks. This specification does not override such further
  restrictions or requirements.</p><!-- note similar text in <link>
  section -->

  </div>

  <p id=style-default-media>The default, if the <code title=attr-style-media><a href=#attr-style-media>media</a></code> attribute is omitted, is
  "<code title="">all</code>", meaning that by default styles apply to
  all media.</p>

  <p>The <dfn id=attr-style-scoped title=attr-style-scoped><code>scoped</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>. If set, it indicates
  that the styles are intended just for the subtree rooted at the
  <code><a href=#the-style-element>style</a></code> element's parent element, as opposed to the whole
  <code><a href=#document>Document</a></code>.</p>

  <div class=impl>

  <p>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is
  present, then the user agent must apply the specified style
  information only to the <code><a href=#the-style-element>style</a></code> element's parent element
  (if any), and that element's child nodes. Otherwise, the specified
  styles must, if applied, be applied to the entire document.</p>

  </div>

  <p id=title-on-style>The <dfn id=attr-style-title title=attr-style-title><code>title</code></dfn> attribute on
  <code><a href=#the-style-element>style</a></code> elements defines <span>alternative style sheet
  sets</span>. If the <code><a href=#the-style-element>style</a></code> element has no <code title=attr-style-title><a href=#attr-style-title>title</a></code> attribute, then it has no
  title; the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute of
  ancestors does not apply to the <code><a href=#the-style-element>style</a></code> element. <a href=#refsCSSOM>[CSSOM]</a></p>

  <p class=note>The <code title=attr-style-title><a href=#attr-style-title>title</a></code>
  attribute on <code><a href=#the-style-element>style</a></code> elements, like the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute on <code><a href=#the-link-element>link</a></code>
  elements, differs from the global <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute in that a
  <code><a href=#the-style-element>style</a></code> block without a title does not inherit the title
  of the parent element: it merely has no title.</p>

  <p>The <code><a href=#textcontent>textContent</a></code> of a <code><a href=#the-style-element>style</a></code> element must
  match the <code title="">style</code> production in the following
  ABNF, the character set for which is Unicode. <a href=#refsABNF>[ABNF]</a></p>

  <pre>style         = no-c-start *( c-start no-c-end c-end no-c-start )
no-c-start    = &lt;any string that doesn't contain a substring that matches c-start &gt;
c-start       = "&lt;!--"
no-c-end      = &lt;any string that doesn't contain a substring that matches c-end &gt;
c-end         = "--&gt;"</pre>

  <!-- Unmatched comment-like syntax is invalid on a temporary basis,
       waiting for IE, WebKit, and Opera to fix their parsing bug
       whereby such comments trigger a weird escape in which </style>
       is ignored. Otherwise, parsing behaviour in those browsers
       could differ substantially from the parsing behaviour of HTML5.
       Once everyone follows the HTML5 spec, we can drop this
       requirement.
  -->

  <div class=impl>

  <p>All descendant elements must be processed, according to their
  semantics, before the <code><a href=#the-style-element>style</a></code> element itself is
  evaluated. For styling languages that consist of pure text, user
  agents must evaluate <code><a href=#the-style-element>style</a></code> elements by passing the
  concatenation of the contents of all the <a href=#text-node title="text
  node">text nodes</a> that are direct children of the
  <code><a href=#the-style-element>style</a></code> element (not any other nodes such as comments or
  elements), in <a href=#tree-order>tree order</a>, to the style system. For
  XML-based styling languages, user agents must pass all the child
  nodes of the <code><a href=#the-style-element>style</a></code> element to the style system.</p>

  <p>All <a href=#url title=URL>URLs</a> found by the styling language's
  processor must be <a href=#resolve-a-url title="resolve a url">resolved</a>,
  relative to the element (or as defined by the styling language),
  when the processor is invoked.<!-- so dynamic changes to the base
  URL don't affect the CSS --></p>

  <!-- the next few paragraph are similar to text in the <style> section -->
  <p>Once the attempts to obtain the style sheet's <a href=#critical-subresources>critical
  subresources</a>, if any, are complete, or, if the style sheet
  has no <a href=#critical-subresources>critical subresources</a>, once the style sheet has
  been parsed and processed, the user agent must, if the loads were
  successful or there were none, <a href=#queue-a-task>queue a task</a> to
  <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load>load</code> at the <code><a href=#the-style-element>style</a></code> element,
  or, if one of the style sheet's <a href=#critical-subresources>critical subresources</a>
  failed to completely load for any reason (e.g. DNS error, HTTP 404
  response, a connection being prematurely closed, unsupported
  Content-Type), <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> named <code title=event-error>error</code> at the
  <code><a href=#the-style-element>style</a></code> element. Non-network errors in processing the
  style sheet or its subresources (e.g. CSS parse errors, PNG decoding
  errors) are not failures for the purposes of this paragraph.</p>

  <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation task
  source</a>.</p>

  <p>The element must <a href=#delay-the-load-event>delay the load event</a> of the
  element's document until all the attempts to obtain the style
  sheet's <a href=#critical-subresources>critical subresources</a>, if any, are
  complete.</p>

  </div>

  <p class=note>This specification does not specify a style system,
  but CSS is expected to be supported by most Web browsers. <a href=#refsCSS>[CSS]</a></p>

  <div class=impl>

  <p>The <dfn id=dom-style-media title=dom-style-media><code>media</code></dfn>, <dfn id=dom-style-type title=dom-style-type><code>type</code></dfn> and <dfn id=dom-style-scoped title=dom-style-scoped><code>scoped</code></dfn> IDL attributes
  must <a href=#reflect>reflect</a> the respective content attributes of the
  same name.</p>

  </div>

  <p>The <dfn id=dom-style-disabled title=dom-style-disabled><code>disabled</code></dfn>
  IDL attribute behaves as defined <a href=#dom-linkstyle-disabled title=dom-linkstyle-disabled>for the alternative style sheets
  DOM</a>.</p>

  <p>The <code>LinkStyle</code> interface is also implemented by
  this element; the <a href=#styling>styling processing model</a> defines
  how. <a href=#refsCSSOM>[CSSOM]</a></p>

  <div class=example>

   <p>The following document has its emphasis styled as bright red
   text rather than italics text, while leaving titles of works and
   Latin words in their default italics. It shows how using
   appropriate elements enables easier restyling of documents.</p>

   <pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en-US"&gt;
 &lt;head&gt;
  &lt;title&gt;My favorite book&lt;/title&gt;
  &lt;style&gt;
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;My &lt;em&gt;favorite&lt;/em&gt; book of all time has &lt;em&gt;got&lt;/em&gt; to be
  &lt;cite&gt;A Cat's Life&lt;/cite&gt;. It is a book by P. Rahmel that talks
  about the &lt;i lang="la"&gt;Felis Catus&lt;/i&gt; in modern human society.&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>




  <h4 id=styling><span class=secno>4.2.7 </span><dfn title="styling processing model">Styling</dfn></h4>

  <p>The <code><a href=#the-link-element>link</a></code> and <code><a href=#the-style-element>style</a></code> elements can provide
  styling information for the user agent to use when rendering the
  document. The DOM Styling specification specifies what styling
  information is to be used by the user agent and how it is to be
  used. <a href=#refsCSSOM>[CSSOM]</a></p>

  <p>The <code><a href=#the-style-element>style</a></code> and <code><a href=#the-link-element>link</a></code> elements implement
  the <code>LinkStyle</code> interface. <a href=#refsCSSOM>[CSSOM]</a></p>

  <div class=impl>

  <p>For <code><a href=#the-style-element>style</a></code> elements, if the user agent does not
  support the specified styling language, then the <code title=dom-LinkStyle-sheet>sheet</code> attribute of the element's
  <code>LinkStyle</code> interface must return null. Similarly,
  <code><a href=#the-link-element>link</a></code> elements that do not represent <a href=#link-type-stylesheet title=rel-stylesheet>external resource links that contribute to
  the styling processing model</a> (i.e. that do not have a <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword in their <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute), and <code><a href=#the-link-element>link</a></code>
  elements whose specified resource has not yet been fetched, or is
  not in a supported styling language, must have their
  <code>LinkStyle</code> interface's <code title=dom-LinkStyle-sheet>sheet</code> attribute return null.</p>

  <p>Otherwise, the <code>LinkStyle</code> interface's <code title=dom-LinkStyle-sheet>sheet</code> attribute must return a
  <code>StyleSheet</code> object with the following properties: <a href=#refsCSSOM>[CSSOM]</a></p>

  <dl><dt>The style sheet type</dt>

   <dd><p>The style sheet type must be the same as the style's specified
   type. For <code><a href=#the-style-element>style</a></code> elements, this is the same as the
   <code title=attr-style-type><a href=#attr-style-type>type</a></code> content attribute's
   value, or <code title="">text/css</code> if that is omitted. For
   <code><a href=#the-link-element>link</a></code> elements, this is the <a href=#content-type title=Content-Type>Content-Type metadata of the specified
   resource</a>.</dd>

   <dt>The style sheet location</dt>

   <dd><p>For <code><a href=#the-link-element>link</a></code> elements, the location must be the
   result of <a href=#resolve-a-url title="resolve a url">resolving</a> the
   <a href=#url>URL</a> given by the element's <code title=attr-link-href><a href=#attr-link-href>href</a></code> content attribute, relative to
   the element, or the empty string if that fails. For
   <code><a href=#the-style-element>style</a></code> elements, there is no location.</dd> <!--
   note that this might not match the style sheet URL, if the base URL
   has changed for instance -->

   <dt>The style sheet media</dt>

   <dd><p>The media must be the same as the value of the element's
   <code title="">media</code> content attribute, or the empty string,
   if the attribute is omitted.</dd>

   <dt>The style sheet title</dt>

   <dd><p>The title must be the same as the value of the element's
   <code title=dom-title><a href=#dom-title>title</a></code> content attribute, if the
   attribute is present and has a non-empty value. If the attribute is
   absent or its value is the empty string, then the style sheet does
   not have a title (it is the empty string). The title is used for
   defining <span>alternative style sheet sets</span>.</dd>

   <dt>The style sheet alternate flag</dt>

   <dd><p>For <code><a href=#the-link-element>link</a></code> elements, true if <a href=#the-link-is-an-alternative-stylesheet>the link is an
   alternative stylesheet</a>. In all other cases, false.</dd>

<!--
   <dt>The style sheet disabled flag</dt>
   (not included, because I assume CSSOM will change to not require
   this spec to initialise the value, but will instead initialise it
   based on the other values)
-->

  </dl><p>The same object must be returned each time.</p>

  <p>The <dfn id=dom-linkstyle-disabled title=dom-LinkStyle-disabled><code>disabled</code></dfn> IDL
  attribute on <code><a href=#the-link-element>link</a></code> and <code><a href=#the-style-element>style</a></code> elements must
  return false and do nothing on setting, if the <code title=dom-linkstyle-sheet>sheet</code> attribute of their
  <code>LinkStyle</code> interface is null. Otherwise, it must return
  the value of the <code>StyleSheet</code> interface's <code title=dom-stylesheet-disabled>disabled</code> attribute on
  getting, and forward the new value to that same attribute on
  setting.</p>

  <!-- [CSSOM] covers the following: the term "alternative style sheet
  sets", the term "default style sheet set", preferred stylesheets,
  alternative stylesheets, persistent stylesheets, ordering of
  stylesheets, dynamic additions/removals, window.styleSheets, style
  sheets given by HTTP Link: headers, and the alternative style sheet
  API -->

  <p id=alternate-style-sheets>The rules for handling alternative
  style sheets are defined in the CSS object model specification. <a href=#refsCSSOM>[CSSOM]</a></p>

  <hr><p>Style sheets, whether added by a <code><a href=#the-link-element>link</a></code> element, a
  <code><a href=#the-style-element>style</a></code> element, an <code>&lt;?xml-stylesheet&gt;</code> PI,
  an HTTP <code title=http-link>Link:</code> header, or some other
  mechanism, have a <dfn id=style-sheet-ready>style sheet ready</dfn> flag, which is
  initially unset.</p>

  <p>When a style sheet is ready to be applied, its <a href=#style-sheet-ready>style sheet
  ready</a> flag must be set. If the style sheet referenced no
  other resources (e.g. it was an internal style sheet given by a
  <code><a href=#the-style-element>style</a></code> element with no <code title="">@import</code>
  rules), then the style rules must be synchronously made available to
  script; otherwise, the style rules must only be made available to
  script once the <a href=#event-loop>event loop</a> reaches its "update the
  rendering" step.</p>

  <p>A style sheet in the context of the <code><a href=#document>Document</a></code> of an
  <a href=#html-parser>HTML parser</a> or <a href=#xml-parser>XML parser</a> is said to be
  <dfn id=a-style-sheet-blocking-scripts>a style sheet blocking scripts</dfn> if the element was created
  by that <code><a href=#document>Document</a></code>'s parser, and the element is either a
  <code><a href=#the-style-element>style</a></code> element or a <code><a href=#the-link-element>link</a></code> element that was
  an <a href=#link-type-stylesheet title=rel-stylesheet>external resource link that
  contributes to the styling processing model</a> when the element
  was created by the parser, and the element's style sheet was enabled
  when the element was created by the parser, and the element's
  <a href=#style-sheet-ready>style sheet ready</a> flag is not yet set, and, the last
  time the <a href=#event-loop>event loop</a> reached step 1, the element was
  <a href=#in-a-document title="in a document">in that <code>Document</code></a>,
  and the user agent hasn't given up on that particular style sheet
  yet. A user agent may give up on a style sheet at any time.</p>

  </div>



  <h3 id=scripting-1><span class=secno>4.3 </span>Scripting</h3>

  <p>Scripts allow authors to add interactivity to their documents.</p>

  <p>Authors are encouraged to use declarative alternatives to
  scripting where possible, as declarative mechanisms are often more
  maintainable, and many users disable scripting.</p>

  <div class=example>
   <p>For example, instead of using script to show or hide a section
   to show more details, the <code><a href=#the-details-element>details</a></code> element could be
   used.</p>
  </div>

  <p>Authors are also encouraged to make their applications degrade
  gracefully in the absence of scripting support.</p>

  <div class=example>
   <p>For example, if an author provides a link in a table header to
   dynamically resort the table, the link could also be made to
   function without scripts by requesting the sorted table from the
   server.</p>
  </div>


  <h4 id=script><span class=secno>4.3.1 </span>The <dfn><code>script</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#metadata-content>Metadata content</a>.</dd>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#metadata-content>metadata content</a> is expected.</dd>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>If there is no <code title=attr-script-src><a href=#attr-script-src>src</a></code>
   attribute, depends on the value of the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute, but must match
   <a href=#restrictions-for-contents-of-script-elements>script content restrictions</a>.</dd>
   <dd>If there <em>is</em> a <code title=attr-script-src><a href=#attr-script-src>src</a></code>
   attribute, the element must be either empty or contain only
   <a href=#inline-documentation-for-external-scripts>script documentation</a> that also matches <a href=#restrictions-for-contents-of-script-elements>script
   content restrictions</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-script-src><a href=#attr-script-src>src</a></code></dd>
   <dd><code title=attr-script-async><a href=#attr-script-async>async</a></code></dd>
   <dd><code title=attr-script-defer><a href=#attr-script-defer>defer</a></code></dd>
   <dd><code title=attr-script-type><a href=#attr-script-type>type</a></code></dd>
   <dd><code title=attr-script-charset><a href=#attr-script-charset>charset</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlscriptelement>HTMLScriptElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-script-src title=dom-script-src>src</a>;
           attribute boolean <a href=#dom-script-async title=dom-script-async>async</a>;
           attribute boolean <a href=#dom-script-defer title=dom-script-defer>defer</a>;
           attribute DOMString <a href=#dom-script-type title=dom-script-type>type</a>;
           attribute DOMString <a href=#dom-script-charset title=dom-script-charset>charset</a>;
           attribute DOMString <a href=#dom-script-text title=dom-script-text>text</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#script>script</a></code> element allows authors to include dynamic
  script and data blocks in their documents. The element does not
  <a href=#represents title=represents>represent</a> content for the user.</p>

  <p>When used to include dynamic scripts, the scripts may either be
  embedded inline or may be imported from an external file using the
  <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute. If the language
  is not that described by "<code title="">text/javascript</code>",
  then the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute must
  be present, as described below.</p>

  <p>When used to include data blocks (as opposed to scripts), the
  data must be embedded inline, the format of the data must be given
  using the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute, and
  the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute must not be
  specified.</p>

  <p>The <dfn id=attr-script-type title=attr-script-type><code>type</code></dfn>
  attribute gives the language of the script or format of the data. If
  the attribute is present, its value must be a <a href=#valid-mime-type>valid MIME
  type</a>. The <code title="">charset</code> parameter must not be
  specified. The default, which is used if the attribute is absent,
  is "<code title="">text/javascript</code>".</p>

  <p>The <dfn id=attr-script-src title=attr-script-src><code>src</code></dfn>
  attribute, if specified, gives the address of the external script
  resource to use. The value of the attribute must be a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid
  non-empty URL potentially surrounded by spaces</a> identifying a
  script resource of the type given by the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute, if the attribute is
  present, or of the type "<code title="">text/javascript</code>", if
  the attribute is absent. A resource is a script resource of a given
  type if that type identifies a scripting language and the resource
  conforms with the requirements of that language's specification.</p>

  <p>The <dfn id=attr-script-charset title=attr-script-charset><code>charset</code></dfn>
  attribute gives the character encoding of the external script
  resource. The attribute must not be specified if the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute is not present. If the
  attribute is set, its value must be a valid character encoding name,
  must be an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
  <a href=#preferred-mime-name>preferred MIME name</a> for that encoding, and must match
  the encoding given in the <code title="">charset</code> parameter of
  the <a href=#content-type title=Content-Type>Content-Type metadata</a> of the
  external file, if any. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>

  <p>The <dfn id=attr-script-async title=attr-script-async><code>async</code></dfn> and
  <dfn id=attr-script-defer title=attr-script-defer><code>defer</code></dfn> attributes
  are <a href=#boolean-attribute title="boolean attribute">boolean attributes</a> that
  indicate how the script should be executed. The <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> and <code title=attr-script-async><a href=#attr-script-async>async</a></code> attributes must not be
  specified if the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute
  is not present.</p>

  <p>There are three possible modes that can be selected using these
  attributes. If the <code title=attr-script-async><a href=#attr-script-async>async</a></code>
  attribute is present, then the script will be executed
  asynchronously, as soon as it is available. If the <code title=attr-script-async><a href=#attr-script-async>async</a></code> attribute is not present but
  the <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> attribute is
  present, then the script is executed when the page has finished
  parsing. If neither attribute is present, then the script is
  fetched and executed immediately, before the user agent continues
  parsing the page.</p>

  <p class=note>The exact processing details for these attributes
  are, for mostly historical reasons, somewhat non-trivial, involving
  a number of aspects of HTML. The implementation requirements are
  therefore by necessity scattered throughout the specification. The
  algorithms below (in this section) describe the core of this
  processing, but these algorithms reference and are referenced by the
  parsing rules for <code><a href=#script>script</a></code> <a href=#scriptTag>start</a>
  and <a href=#scriptEndTag>end</a> tags in HTML, <a href=#scriptForeignEndTag>in foreign content</a>, and <a href=#scriptTagXML>in XML</a>, the rules for the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> method, the
  handling of <a href=#scripting>scripting</a>, etc.</p>

  <p>The <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> attribute may be
  specified even if the <code title=attr-script-async><a href=#attr-script-async>async</a></code>
  attribute is specified, to cause legacy Web browsers that only
  support <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> (and not <code title=attr-script-async><a href=#attr-script-async>async</a></code>) to fall back to the <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> behavior instead of the
  synchronous blocking behavior that is the default.</p>

  <p>Changing the <code title=attr-script-src><a href=#attr-script-src>src</a></code>, <code title=attr-script-type><a href=#attr-script-type>type</a></code>, <code title=attr-script-charset><a href=#attr-script-charset>charset</a></code>, <code title=attr-script-async><a href=#attr-script-async>async</a></code>, and <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> attributes dynamically has no
  direct effect; these attribute are only used at specific times
  described below.</p> <!-- by implication, changes to the base URL
  also have no effect -->

  <div class=impl>

  <p>A <code><a href=#script>script</a></code> element has several associated pieces of
  state.</p>

  <p>The first is a flag indicating whether or not the script block
  has been <dfn id=already-started>"already started"</dfn>. Initially,
  <code><a href=#script>script</a></code> elements must have this flag unset (script
  blocks, when created, are not "already started"). When a
  <code><a href=#script>script</a></code> element is cloned, the "already started" flag,
  if set, must be propagated to the clone when it is created.</p>

  <p>The second is a flag indicating whether the element was
  <dfn id=parser-inserted>"parser-inserted"</dfn>. Initially, <code><a href=#script>script</a></code>
  elements must have this flag unset. It is set by the <a href=#html-parser>HTML
  parser</a> and the <a href=#xml-parser>XML parser</a> on <code><a href=#script>script</a></code>
  elements they insert and affects the processing of those
  elements.</p>

  <p>The third is a flag indicating whether or not the script block is
  <dfn id=ready-to-be-parser-executed>"ready to be parser-executed"</dfn>. Initially,
  <code><a href=#script>script</a></code> elements must have this flag unset (script
  blocks, when created, are not "ready to be parser-executed"). This
  flag is used only for elements that are also
  <a href=#parser-inserted>"parser-inserted"</a>, to let the parser know when to
  execute the script.</p>

  <p>The fourth and fifth pieces of state are <dfn id="the-script-block's-type"><var>the script
  block's type</var></dfn> and <dfn id="the-script-block's-character-encoding"><var>the script block's character
  encoding</var></dfn>. They are determined when the script is run,
  based on the attributes on the element at that time.</p>

  <p>When a <code><a href=#script>script</a></code> element that is neither marked as
  having <a href=#already-started>"already started"</a> nor marked as being
  <a href=#parser-inserted>"parser-inserted"</a> experiences one of the events listed
  in the following list, the user agent must synchronously <a href=#running-a-script title="running a script">run</a> the <code><a href=#script>script</a></code>
  element:</p>

  <ul><li>The <code><a href=#script>script</a></code> element gets <a href=#insert-an-element-into-a-document title="insert an
   element into a document">inserted into a document</a>.</li>

   <li>The <code><a href=#script>script</a></code> element is <a href=#in-a-document>in a
   <code>Document</code></a> and its child nodes are changed.</li>

   <li>The <code><a href=#script>script</a></code> element is <a href=#in-a-document>in a
   <code>Document</code></a> and has a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute set where previously
   the element had no such attribute.</li>

  </ul><p><dfn id=running-a-script title="running a script">Running a script</dfn>: When a
  <code><a href=#script>script</a></code> element is to be run, the user agent must act as
  follows:</p>

  <ol><li id=script-processing-prepare>

    <p>If either:</p>

    <ul class=brief><li>the <code><a href=#script>script</a></code> element has a <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute and its value is
     the empty string, or</li>

     <li>the <code><a href=#script>script</a></code> element has no <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute but it has a <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute and
     <em>that</em> attribute's value is the empty string, or</li>

     <li>the <code><a href=#script>script</a></code> element has neither a <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute nor a <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute, then</li>

    </ul><p>...let <var><a href="#the-script-block's-type">the script block's type</a></var> for this
    <code><a href=#script>script</a></code> element be "<code title="">text/javascript</code>".</p>

    <p>Otherwise, if the <code><a href=#script>script</a></code> element has a <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute, let <var><a href="#the-script-block's-type">the
    script block's type</a></var> for this <code><a href=#script>script</a></code> element be
    the value of that attribute with any leading or trailing sequences
    of <a href=#space-character title="space character">space characters</a>
    removed.</p>

    <p>Otherwise, the element has a non-empty <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute; let
    <var><a href="#the-script-block's-type">the script block's type</a></var> for this <code><a href=#script>script</a></code>
    element be the concatenation of the string "<code title="">text/</code>" followed by the value of the <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute.</p> <!--
    user agents already support, e.g., type="text/javascript1.3", so
    we don't have to support that separately. -->

    <p class=note>The <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute is never
    conforming, and is always ignored if there is a <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute present.</p>

   </li>

   <li id=script-processing-encoding>

    <p>If the <code><a href=#script>script</a></code> element has a <code title=attr-script-charset><a href=#attr-script-charset>charset</a></code> attribute, then let
    <var><a href="#the-script-block's-character-encoding">the script block's character encoding</a></var> for this
    <code><a href=#script>script</a></code> element be the encoding given by the <code title=attr-script-charset><a href=#attr-script-charset>charset</a></code> attribute.</p>

    <p>Otherwise, let <var><a href="#the-script-block's-character-encoding">the script block's character encoding</a></var>
    for this <code><a href=#script>script</a></code> element be the same as <a href="#document's-character-encoding" title="document's character encoding">the encoding of the document
    itself</a>.</p>

   </li>

   <li id=script-processing-for>

    <p>If the <code><a href=#script>script</a></code> element has an <code title=attr-script-event><a href=#attr-script-event>event</a></code> attribute and a <code title=attr-script-for><a href=#attr-script-for>for</a></code> attribute, then run these
    substeps:</p>

    <ol><li><p>Let <var title="">for</var> be the value of the <code title=attr-script-for><a href=#attr-script-for>for</a></code> attribute.</li>

     <li><p>Let <var title="">event</var> be the value of the <code title=attr-script-event><a href=#attr-script-event>event</a></code> attribute.</li>

     <li><p><a href=#strip-leading-and-trailing-whitespace>Strip leading and trailing whitespace</a> from
     <var title="">event</var> and <var title="">for</var>.</li>

     <li><p>If <var title="">for</var> is not an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "<code title="">window</code>", then the user agent must abort these
     steps at this point. The script is not executed.</li>

     <li><p>If <var title="">event</var> is not an <a href=#ascii-case-insensitive>ASCII
     case-insensitive</a> match for either the string "<code title="">onload</code>" or the string "<code title="">onload()</code>", then the user agent must abort these
     steps at this point. The script is not executed.</li>

    </ol></li>

   <li id=script-processing-noscript>

    <p>If <a href=#concept-n-noscript title=concept-n-noscript>scripting is
    disabled</a> for the <code><a href=#script>script</a></code> element, or if the
    user agent does not <a href=#support-the-scripting-language>support the scripting language</a>
    given by <var><a href="#the-script-block's-type">the script block's type</a></var> for this
    <code><a href=#script>script</a></code> element, then the user agent must abort these
    steps at this point. The script is not executed.</p>

   </li>

   <li id=script-processing-empty>

    <p>If the element has no <code title=attr-script-src><a href=#attr-script-src>src</a></code>
    attribute, and its child nodes consist only of comment nodes and
    empty <a href=#text-node title="text node">text nodes</a>, then the user
    agent must abort these steps at this point. The script is not
    executed.</p>

   </li>

   <li id=script-processing-start>

    <p>The user agent must set the element's <a href=#already-started>"already
    started"</a> flag.</p>

   </li>

   <li id=script-processing-src-prepare>

    <p>If the element has a <code title=attr-script-src><a href=#attr-script-src>src</a></code>
    attribute whose value is not the empty string, then the value of
    that attribute must be <a href=#resolve-a-url title="resolve a url">resolved</a>
    relative to the element, and if that is successful, the specified
    resource must then be <a href=#fetch title=fetch>fetched</a>, from the
    <a href=#origin>origin</a> of the element's <code><a href=#document>Document</a></code>.</p>
    <!-- not http-origin privacy sensitive -->

    <p>If the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute's
    value is the empty string or if it could not be resolved, then the
    user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
    event</a> named <code title=event-error>error</code> at the
    element, and abort these steps.</p>

    <p>For historical reasons, if the <a href=#url>URL</a> is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code>
    URL</a>, then the user agent must not, despite the requirements
    in the definition of the <a href=#fetch title=fetch>fetching</a>
    algorithm, actually execute the script in the URL; instead the
    user agent must act as if it had received an empty HTTP 400
    response.</p>

    <p>Once the resource's <a href=#content-type title=Content-Type>Content Type
    metadata</a> is available, if it ever is, apply the
    <a href=#algorithm-for-extracting-an-encoding-from-a-content-type>algorithm for extracting an encoding from a
    Content-Type</a> to it. If this returns an encoding, and the
    user agent supports that encoding, then let <var><a href="#the-script-block's-character-encoding">the script
    block's character encoding</a></var> be that encoding.</p>

    <p>For performance reasons, user agents may start fetching the
    script as soon as the attribute is set, instead, in the hope that
    the element will be inserted into the document. Either way, once
    the element is <a href=#insert-an-element-into-a-document title="insert an element into a
    document">inserted into the document</a>, the load must have
    started. If the UA performs such prefetching, but the element is
    never inserted in the document, or the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute is dynamically
    changed,<!-- or the base URL is dynamically changed,--> then the
    user agent will not execute the script, and the fetching process
    will have been effectively wasted.</p>

   </li>

   <li>

    <p>Then, the first of the following options that describes the
    situation must be followed:</p>

    <dl class=switch><dt id=script-processing-defer>If the element has a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute, and the element has
     a <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> attribute, and the
     element has been flagged as <a href=#parser-inserted>"parser-inserted"</a>, and
     the element does not have an <code title=attr-script-async><a href=#attr-script-async>async</a></code> attribute</dt>

     <dd>

      <p>The element must be added to the end of the <dfn id=list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of
      scripts that will execute when the document has finished
      parsing</dfn>.</p>

      <p>The <a href=#concept-task title=concept-task>task</a> that the
      <a href=#networking-task-source>networking task source</a> places on the <a href=#task-queue>task
      queue</a> once the <a href=#fetch title=fetch>fetching
      algorithm</a> has completed must set the element's
      <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag. The parser will
      handle executing the script.</p>

     </dd>


     <dt id=script-processing-parser-inserted>If the element has a
     <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute, and the
     element has been flagged as <a href=#parser-inserted>"parser-inserted"</a>, and
     the element does not have an <code title=attr-script-async><a href=#attr-script-async>async</a></code> attribute</dt>

     <dd>

      <p>The element is the <a href=#pending-parsing-blocking-script>pending parsing-blocking
      script</a>. (There can only be one such script at a
      time.)</p>

      <p>The <a href=#concept-task title=concept-task>task</a> that the
      <a href=#networking-task-source>networking task source</a> places on the <a href=#task-queue>task
      queue</a> once the <a href=#fetch title=fetch>fetching
      algorithm</a> has completed must set the element's
      <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag. The parser will
      handle executing the script.</p>

     </dd>


     <dt id=script-processing-style-delayed>If the element does not
     have a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute, but
     there is <a href=#a-style-sheet-blocking-scripts>a style sheet blocking scripts</a>, and the
     element has been flagged as <a href=#parser-inserted>"parser-inserted"</a></dt>

     <dd>

      <p>The element is the <a href=#pending-parsing-blocking-script>pending parsing-blocking
      script</a>. (There can only be one such script at a
      time.)</p>

      <p>Set the element's <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a>
      flag. The parser will handle executing the script.</p>

     </dd>


     <dt id=script-processing-src>If the element has a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute</dt>

     <dd>

      <p>The element must be added to the <dfn id=set-of-scripts-that-will-execute-as-soon-as-possible>set of scripts that
      will execute as soon as possible</dfn>.</p>

      <p>The <a href=#concept-task title=concept-task>task</a> that the
      <a href=#networking-task-source>networking task source</a> places on the <a href=#task-queue>task
      queue</a> once the <a href=#fetch title=fetch>fetching
      algorithm</a> has completed must <a href=#executing-a-script-block title="executing a
      script block">execute the script block</a> and then remove
      the element from the <a href=#set-of-scripts-that-will-execute-as-soon-as-possible>set of scripts that will execute as
      soon as possible</a>.</p>

     </dd>


     <dt id=script-processing-inline>Otherwise</dt>

     <dd>The user agent must immediately <a href=#executing-a-script-block title="executing a
     script block">execute the script block</a>, even if other
     scripts are already executing.</dd>

    </dl></li>

  </ol><!-- similar text in various places --><p>Fetching an external script must <a href=#delay-the-load-event>delay the load
  event</a> of the element's document until the <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
  task">queued</a> by the <a href=#networking-task-source>networking task source</a> once
  the resource has been <a href=#fetch title=fetch>fetched</a> (defined
  above) has been run.</p>

  <p>The <dfn id=pending-parsing-blocking-script>pending parsing-blocking script</dfn> is used by the
  parser.</p>

  <p><dfn id=executing-a-script-block title="executing a script block">Executing a script
  block</dfn>: When the steps above require that the script block be
  executed, the user agent must act as follows:</p>

  <dl class=switch><dt>If the load resulted in an error (for example a DNS error, or
   an HTTP 404 error)</dt>

   <dd><p>Executing the script block must just consist of <a href=#fire-a-simple-event title="fire a simple event">firing a simple event</a> named
   <code title=event-error>error</code> at the element.</dd>

   <dt>If the load was successful</dt>

   <!-- SCRIPT EXEC -->
   <dd>

    <ol><li>

      <p>Initialize <dfn id="the-script-block's-source"><var>the script block's source</var></dfn> as
      follows:</p>

      <dl class=switch><dt>If the script is from an external file and <var><a href="#the-script-block's-type">the script block's type</a></var> is a text-based language</dt>

       <dd>

        <p>The contents of that file, interpreted as string of
        Unicode characters, are the script source.</p>

        <p>For each of the rows in the following table, starting with
        the first one and going down, if the file has as many or more
        bytes available than the number of bytes in the first column,
        and the first bytes of the file match the bytes given in the
        first column, then set <var><a href="#the-script-block's-character-encoding">the script block's character
        encoding</a></var> to the encoding given in the cell in the second
        column of that row, irrespective of any previous value:</p>

        <!-- this table is present in several forms in this file; keep them in sync -->
        <table><thead><tr><th>Bytes in Hexadecimal
           <th>Encoding
         <tbody><!-- nobody uses this
          <tr>
           <td>00 00 FE FF
           <td>UTF-32BE
          <tr>
           <td>FF FE 00 00
           <td>UTF-32LE
--><tr><td>FE FF
           <td>UTF-16BE
          <tr><td>FF FE
           <td>UTF-16LE
          <tr><td>EF BB BF
           <td>UTF-8
<!-- nobody uses this
          <tr>
           <td>DD 73 66 73
           <td>UTF-EBCDIC
-->
        </table><p class=note>This step looks for Unicode Byte Order Marks
        (BOMs).</p>

        <p>The file must then be converted to Unicode using the
        character encoding given by <var><a href="#the-script-block's-character-encoding">the script block's character
        encoding</a></var>.</p>

       </dd>

       <dt>If the script is from an external file and <var><a href="#the-script-block's-type">the script block's type</a></var> is an XML-based language</dt>

       <dd>

        <p>The external file is the script source. When it is later
        executed, it must be interpreted in a manner consistent with
        the specification defining the language given by <var><a href="#the-script-block's-type">the
        script block's type</a></var>.</p>

       </dd>

       <dt>If the script is inline and <var><a href="#the-script-block's-type">the script block's type</a></var> is a text-based language</dt>

       <dd>

        <p>The value of the <code title=dom-script-text><a href=#dom-script-text>text</a></code>
        IDL attribute at the time the element's <a href=#already-started>"already
        started"</a> flag was set is the script source.</p>

       </dd>

       <dt>If the script is inline and <var><a href="#the-script-block's-type">the script block's type</a></var> is an XML-based language</dt>

       <dd>

        <p>The child nodes of the <code><a href=#script>script</a></code> element at the
        time the element's <a href=#already-started>"already started"</a> flag was set
        are the script source.</p>

       </dd>

      </dl></li>

     <li>

      <p><a href=#create-a-script-from-a-node title="create a script from a node">Create a
      script</a> from the <code><a href=#script>script</a></code> element node, using
      <var><a href="#the-script-block's-source">the script block's source</a></var> and <var><a href="#the-script-block's-type">the script
      block's type</a></var>.</p>

      <p class=note>This is where the script is compiled and
      actually executed.</p>

     </li>

     <li>

      <p>If the script is from an external file, <a href=#fire-a-simple-event>fire a simple
      event</a> named <code title=event-load>load</code> at the
      <code><a href=#script>script</a></code> element.</p>

      <p>Otherwise, the script is internal; <a href=#queue-a-task>queue a task</a>
      to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load>load</code> at the <code><a href=#script>script</a></code>
      element.</p>

     </li>

    </ol></dd>

  </dl><p>The IDL attributes <dfn id=dom-script-src title=dom-script-src><code>src</code></dfn>, <dfn id=dom-script-type title=dom-script-type><code>type</code></dfn>, <dfn id=dom-script-charset title=dom-script-charset><code>charset</code></dfn>, <dfn id=dom-script-async title=dom-script-async><code>async</code></dfn>, and <dfn id=dom-script-defer title=dom-script-defer><code>defer</code></dfn>, each must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  </div>

  <dl class=domintro><dt><var title="">script</var> . <code title=dom-script-text><a href=#dom-script-text>text</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the contents of the element, ignoring child nodes that
    aren't <a href=#text-node title="text node">text nodes</a>.</p>

    <p>Can be set, to replace the element's children with the given
    value.</p>

   </dd>

  </dl><div class=impl>

  <p>The IDL attribute <dfn id=dom-script-text title=dom-script-text><code>text</code></dfn> must return a
  concatenation of the contents of all the <a href=#text-node title="text
  node">text nodes</a> that are direct children of the
  <code><a href=#script>script</a></code> element (ignoring any other nodes such as
  comments or elements), in tree order. On setting, it must act the
  same way as the <code><a href=#textcontent>textContent</a></code> IDL attribute.</p>

  </div>

  <p class=note>When inserted using the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> method,
  <code><a href=#script>script</a></code> elements execute (typically synchronously), but
  when inserted using <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> and <code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code> attributes, they do not
  execute at all.</p>

  <div class=example>

   <p>In this example, two <code><a href=#script>script</a></code> elements are used. One
   embeds an external script, and the other includes some data.</p>

   <pre>&lt;script src="game-engine.js"&gt;&lt;/script&gt;
&lt;script type="text/x-game-map"&gt;
........U.........e
o............A....e
.....A.....AAA....e
.A..AAA...AAAAA...e
&lt;/script&gt;</pre>

   <p>The data in this case might be used by the script to generate
   the map of a video game. The data doesn't have to be used that way,
   though; maybe the map data is actually embedded in other parts of
   the page's markup, and the data block here is just used by the
   site's search engine to help users who are looking for particular
   features in their game maps.</p>

  </div>

  <div class=example>

   <p>The following sample shows how a script element can be used to
   define a function that is then used by other parts of the
   document. It also shows how a <code><a href=#script>script</a></code> element can be
   used to invoke script while the document is being parsed, in this
   case to initialize the form's output.</p>

   <pre>&lt;script&gt;
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
&lt;/script&gt;
&lt;form name="pricecalc" onsubmit="return false"&gt;
 &lt;fieldset&gt;
  &lt;legend&gt;Work out the price of your car&lt;/legend&gt;
  &lt;p&gt;Base cost: &pound;52000.&lt;/p&gt;
  &lt;p&gt;Select additional options:&lt;/p&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=brakes&gt; Ceramic brakes (&pound;1000)&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=radio&gt; Satellite radio (&pound;2500)&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=turbo&gt; Turbo charger (&pound;5000)&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=sticker&gt; "XZ" sticker (&pound;250)&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Total: &pound;&lt;output name=result onformchange="calculate(form)"&gt;&lt;/output&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;script&gt;
  document.forms.pricecalc.dispatchFormChange();
 &lt;/script&gt;
&lt;/form&gt;</pre>

  </div>



  <h5 id=scriptingLanguages><span class=secno>4.3.1.1 </span>Scripting languages</h5>

  <div class=impl>

  <p>A user agent is said to <dfn id=support-the-scripting-language>support the scripting language</dfn>
  if <var><a href="#the-script-block's-type">the script block's type</a></var> is an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> match for the <a href=#mime-type>MIME type</a> string
  of a scripting language that the user agent implements.</p>

  </div>

  <p>The following lists some <a href=#mime-type>MIME type</a> strings and the
  languages to which they refer:</p>

  <dl><dt>"<code>application/ecmascript</code>"</dt>
   <dt>"<code>application/javascript</code>"</dt>
   <dt>"<code>application/x-ecmascript</code>"</dt>
   <dt>"<code>application/x-javascript</code>"</dt>
   <dt>"<code>text/ecmascript</code>"</dt>
   <dt>"<code>text/javascript</code>"</dt>
   <dt>"<code>text/javascript1.0</code>"</dt>
   <dt>"<code>text/javascript1.1</code>"</dt>
   <dt>"<code>text/javascript1.2</code>"</dt>
   <dt>"<code>text/javascript1.3</code>"</dt>
   <dt>"<code>text/javascript1.4</code>"</dt>
   <dt>"<code>text/javascript1.5</code>"</dt>
   <dt>"<code>text/jscript</code>"</dt>
   <dt>"<code>text/livescript</code>"</dt>
   <dt>"<code>text/x-ecmascript</code>"</dt>
   <dt>"<code>text/x-javascript</code>"</dt>
   <dd>JavaScript. <a href=#refsECMA262>[ECMA262]</a></dd>

   <dt>"<code>text/javascript;e4x=1</code>"</dt>
   <dd>JavaScript with ECMAScript for XML. <a href=#refsECMA357>[ECMA357]</a></dd>

  </dl><div class=impl>

  <p>User agents may support other <a href=#mime-type title="MIME type">MIME
  types</a> and other languages.</p>

  <!-- this paragraph is also present in the <style> section -->
  <p>When examining types to determine if they support the language,
  user agents must not ignore unknown MIME parameters &mdash; types
  with unknown parameters must be assumed to be unsupported. The <code title="">charset</code> parameter must be treated as an unknown
  parameter for the purpose of comparing <a href=#mime-type title="MIME type">MIME
  types</a> here.</p>

  </div>


  <h5 id=restrictions-for-contents-of-script-elements><span class=secno>4.3.1.2 </span><dfn title="script content restrictions">Restrictions for contents of <code>script</code> elements</dfn></h5>

  <p>The <code><a href=#textcontent>textContent</a></code> of a <code><a href=#script>script</a></code> element must match the
  <code title="">script</code> production in the following ABNF, the
  character set for which is Unicode. <a href=#refsABNF>[ABNF]</a></p>

  <pre>script        = data1 *( escape [ script-start data3 ] "--&gt;" data1 ) [ escape ]
escape        = "&lt;!--" data2 *( script-start data3 script-end data2 )

data1         = &lt;any string that doesn't contain a substring that matches not-data1&gt;
not-data1     = <!-- script-end / -->"&lt;!--"             <!-- the script-end is redundant here since it would close the element -->

data2         = &lt;any string that doesn't contain a substring that matches not-data2&gt;
not-data2     = <!-- script-end / -->script-start / "--&gt;"  <!-- the script-end is redundant here since it would close the element -->

data3         = &lt;any string that doesn't contain a substring that matches not-data3&gt;
not-data3     = script-end / "--&gt;"

script-start  = lt       s c r i p t tag-end
script-end    = lt slash s c r i p t tag-end

lt            =  %x003C ; U+003C LESS-THAN SIGN character (&lt;)
slash         =  %x002F ; U+002F SOLIDUS character (/)

s             =  %x0053 ; U+0053 LATIN CAPITAL LETTER S
s             =/ %x0073 ; U+0073 LATIN SMALL LETTER S
c             =  %x0043 ; U+0043 LATIN CAPITAL LETTER C
c             =/ %x0063 ; U+0063 LATIN SMALL LETTER C
r             =  %x0052 ; U+0052 LATIN CAPITAL LETTER R
r             =/ %x0072 ; U+0072 LATIN SMALL LETTER R
i             =  %x0049 ; U+0049 LATIN CAPITAL LETTER I
i             =/ %x0069 ; U+0069 LATIN SMALL LETTER I
p             =  %x0050 ; U+0050 LATIN CAPITAL LETTER P
p             =/ %x0070 ; U+0070 LATIN SMALL LETTER P
t             =  %x0054 ; U+0054 LATIN CAPITAL LETTER T
t             =/ %x0074 ; U+0074 LATIN SMALL LETTER T

tag-end       =  %x0009 ; U+0009 CHARACTER TABULATION
tag-end       =/ %x000A ; U+000A LINE FEED (LF)
tag-end       =/ %x000C ; U+000C FORM FEED (FF)
tag-end       =/ %x0020 ; U+0020 SPACE
tag-end       =/ %x002F ; U+002F SOLIDUS (/)
tag-end       =/ %x003E ; U+003E GREATER-THAN SIGN (&gt;)</pre>

  <p>When a <code><a href=#script>script</a></code> element contains <a href=#inline-documentation-for-external-scripts>script
  documentation</a>, there are further restrictions on the contents
  of the element, as described in the section below.</p>


  <h5 id=inline-documentation-for-external-scripts><span class=secno>4.3.1.3 </span><dfn title="script documentation">Inline documentation for external scripts</dfn></h5>

  <p>If a <code><a href=#script>script</a></code> element's <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute is specified, then the
  contents of the <code><a href=#script>script</a></code> element, if any, must be such
  that the value of the <code title=dom-script-text><a href=#dom-script-text>text</a></code> IDL
  attribute, which is derived from the element's contents, matches the
  <code title="">documentation</code> production in the following
  ABNF, the character set for which is Unicode. <a href=#refsABNF>[ABNF]</a></p>

  <pre>documentation = *( *( space / tab / comment ) [ line-comment ] newline )
comment       = slash star *( not-star / star not-slash ) 1*star slash
line-comment  = slash slash *not-newline

; characters
tab           = %x0009 ; U+0009 TAB
newline       = %x000A ; U+000A LINE FEED (LF)
space         = %x0020 ; U+0020 SPACE
star          = %x002A ; U+002A ASTERISK (*)
slash         = %x002F ; U+002F SOLIDUS (/)
not-newline   = %x0000-0009 / %x000B-10FFFF
                ; a Unicode character other than U+000A LINE FEED (LF)
not-star      = %x0000-0029 / %x002B-10FFFF
                ; a Unicode character other than U+002A ASTERISK (*)
not-slash     = %x0000-002E / %x0030-10FFFF
                ; a Unicode character other than U+002F SOLIDUS (/)</pre>

  <p class=note>This corresponds to putting the contents of the
  element in JavaScript comments.</p>

  <p class=note>This requirement is in addition to the earlier
  restrictions on the syntax of contents of <code><a href=#script>script</a></code>
  elements.</p>

  <div class=example>

   <p>This allows authors to include documentation, such as license
   information or API information, inside their documents while still
   referring to external script files. The syntax is constrained so
   that authors don't accidentally include what looks like valid
   script while also providing a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute.</p>

   <pre>&lt;script src="cool-effects.js"&gt;
 // create new instances using:
 //    var e = new Effect();
 // start the effect using .play, stop using .stop:
 //    e.play();
 //    e.stop();
&lt;/script&gt;</pre>

  </div>



  <h4 id=the-noscript-element><span class=secno>4.3.2 </span>The <dfn><code>noscript</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#metadata-content>Metadata content</a>.</dd>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>In a <code><a href=#the-head-element-0>head</a></code> element of an <a href=#html-documents title="HTML documents">HTML document</a>, if there are no ancestor <code><a href=#the-noscript-element>noscript</a></code> elements.</dd>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected in <a href=#html-documents>HTML documents</a>, if there are no ancestor <code><a href=#the-noscript-element>noscript</a></code> elements.</dd>
   <dt>Content model:</dt>
   <dd>When <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a>, in a <code><a href=#the-head-element-0>head</a></code> element: in any order, zero or more <code><a href=#the-link-element>link</a></code> elements, zero or more <code><a href=#the-style-element>style</a></code> elements, and zero or more <code><a href=#meta>meta</a></code> elements.</dd>
   <dd>When <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a>, not in a <code><a href=#the-head-element-0>head</a></code> element: <a href=#transparent>transparent</a>, but there must be no <code><a href=#the-noscript-element>noscript</a></code> element descendants.</dd>
   <dd>Otherwise: text that conforms to the requirements given in the prose.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-noscript-element>noscript</a></code> element <a href=#represents>represents</a> nothing
  if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a>, and
  <a href=#represents>represents</a> its children if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a>. It is used
  to present different markup to user agents that support scripting
  and those that don't support scripting, by affecting how the
  document is parsed.</p>

  <p>When used in <a href=#html-documents>HTML documents</a>, the allowed content
  model is as follows:</p>

  <dl><dt>In a <code><a href=#the-head-element-0>head</a></code> element, if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a> for the
   <code><a href=#the-noscript-element>noscript</a></code> element</dt>

   <dd><p>The <code><a href=#the-noscript-element>noscript</a></code> element must contain only
   <code><a href=#the-link-element>link</a></code>, <code><a href=#the-style-element>style</a></code>, and <code><a href=#meta>meta</a></code>
   elements.</dd>

   <dt>In a <code><a href=#the-head-element-0>head</a></code> element, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for the
   <code><a href=#the-noscript-element>noscript</a></code> element</dt>

   <dd><p>The <code><a href=#the-noscript-element>noscript</a></code> element must contain only text,
   except that invoking the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing
   algorithm</a> <!-- (which disables <script> execution) --> with
   the <code><a href=#the-noscript-element>noscript</a></code> element as the <var title="">context</var> element and the text contents as the <var title="">input</var> must result in a list of nodes that consists
   only of <code><a href=#the-link-element>link</a></code>, <code><a href=#the-style-element>style</a></code>, and
   <code><a href=#meta>meta</a></code> elements that would be conforming if they were
   children of the <code><a href=#the-noscript-element>noscript</a></code> element, and no <a href=#parse-error title="parse error">parse errors</a>.</dd>

   <dt>Outside of <code><a href=#the-head-element-0>head</a></code> elements, if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a> for the
   <code><a href=#the-noscript-element>noscript</a></code> element</dt>

   <dd><p>The <code><a href=#the-noscript-element>noscript</a></code> element's content model is
   <a href=#transparent>transparent</a>, with the additional restriction that a
   <code><a href=#the-noscript-element>noscript</a></code> element must not have a <code><a href=#the-noscript-element>noscript</a></code>
   element as an ancestor (that is, <code><a href=#the-noscript-element>noscript</a></code> can't be
   nested).</dd>

   <dt>Outside of <code><a href=#the-head-element-0>head</a></code> elements, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for the
   <code><a href=#the-noscript-element>noscript</a></code> element</dt>

   <dd>

    <p>The <code><a href=#the-noscript-element>noscript</a></code> element must contain only text,
    except that the text must be such that running the following
    algorithm results in a conforming document with no
    <code><a href=#the-noscript-element>noscript</a></code> elements and no <code><a href=#script>script</a></code>
    elements, and such that no step in the algorithm causes an
    <a href=#html-parser>HTML parser</a> to flag a <a href=#parse-error>parse error</a>:</p>

    <ol><li>Remove every <code><a href=#script>script</a></code> element from the
     document.</li>

     <li>Make a list of every <code><a href=#the-noscript-element>noscript</a></code> element in the
     document. For every <code><a href=#the-noscript-element>noscript</a></code> element in that list,
     perform the following steps:

      <ol><li>Let the <var title="">parent element</var> be the parent
       element of the <code><a href=#the-noscript-element>noscript</a></code> element.</li>

       <li>Take all the children of the <var title="">parent element</var>
       that come before the <code><a href=#the-noscript-element>noscript</a></code> element, and call these
       elements <var title="">the before children</var>.</li>

       <li>Take all the children of the <var title="">parent element</var>
       that come <em>after</em> the <code><a href=#the-noscript-element>noscript</a></code> element, and
       call these elements <var title="">the after children</var>.</li>

       <li>Let <var title="">s</var> be the concatenation of all the
       <a href=#text-node>text node</a> children of the <code><a href=#the-noscript-element>noscript</a></code>
       element.</li>

       <li>Set the <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code>
       attribute of the <var title="">parent element</var> to the value
       of <var title="">s</var>. (This, as a side-effect, causes the
       <code><a href=#the-noscript-element>noscript</a></code> element to be removed from the
       document.)</li>

       <li>Insert <var title="">the before children</var> at the start of
       the <var title="">parent element</var>, preserving their original
       relative order.</li>

       <li>Insert <var title="">the after children</var> at the end of the
       <var title="">parent element</var>, preserving their original
       relative order.</li>

      </ol></li>

    </ol></dd>

  </dl><p class=note>All these contortions are required because, for
  historical reasons, the <code><a href=#the-noscript-element>noscript</a></code> element is handled
  differently by the <a href=#html-parser>HTML parser</a> based on whether <a href=#scripting-flag title="scripting flag">scripting was enabled or not</a> when the
  parser was invoked.</p>

  <p>The <code><a href=#the-noscript-element>noscript</a></code> element must not be used in <a href=#xml-documents>XML
  documents</a>.</p>

  <p class=note><strong>The <code><a href=#the-noscript-element>noscript</a></code> element is only
  effective in <a href=#syntax>the HTML syntax</a>, it has no effect in
  <a href=#the-xhtml-syntax>the XHTML syntax</a>.</strong></p>

  <div class=impl>

  <p>The <code><a href=#the-noscript-element>noscript</a></code> element has no other requirements. In
  particular, children of the <code><a href=#the-noscript-element>noscript</a></code> element are not
  exempt from <a href=#form-submission>form submission</a>, scripting, and so forth,
  even when <a href=#concept-n-script title=concept-n-script>scripting is enabled</a>
  for the element.</p>

  </div>

  <div class=example>

   <p>In the following example, a <code><a href=#the-noscript-element>noscript</a></code> element is
   used to provide fallback for a script.</p>

   <pre>&lt;form action="calcSquare.php"&gt;
 &lt;p&gt;
  &lt;label for=x&gt;Number&lt;/label&gt;:
  &lt;input id="x" name="x" type="number"&gt;
 &lt;/p&gt;
 &lt;script&gt;
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
 &lt;/script&gt;
 &lt;noscript&gt;
  &lt;input type=submit value="Calculate Square"&gt;
 &lt;/noscript&gt;
&lt;/form&gt;</pre>

   <p>When script is disabled, a button appears to do the calculation
   on the server side. When script is enabled, the value is computed
   on-the-fly instead.</p>

   <p>The <code><a href=#the-noscript-element>noscript</a></code> element is a blunt
   instrument. Sometimes, scripts might be enabled, but for some
   reason the page's script might fail. For this reason, it's
   generally better to avoid using <code><a href=#the-noscript-element>noscript</a></code>, and to
   instead design the script to change the page from being a
   scriptless page to a scripted page on the fly, as in the next
   example:</p>

   <pre>&lt;form action="calcSquare.php"&gt;
 &lt;p&gt;
  &lt;label for=x&gt;Number&lt;/label&gt;:
  &lt;input id="x" name="x" type="number"&gt;
 &lt;/p&gt;
 <strong>&lt;input id="submit" type=submit value="Calculate Square"&gt;</strong>
 &lt;script&gt;
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
<strong>  var submit = document.getElementById('submit');
  submit.parentNode.removeChild(submit);</strong>
 &lt;/script&gt;
&lt;/form&gt;</pre>

   <p>The above technique is also useful in XHTML, since
   <code><a href=#the-noscript-element>noscript</a></code> is not supported in <a href=#the-xhtml-syntax>the XHTML
   syntax</a>.</p>

  </div>



  <h3 id=sections><span class=secno>4.4 </span>Sections</h3>

  <h4 id=the-body-element-0><span class=secno>4.4.1 </span>The <dfn><code>body</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As the second element in an <code><a href=#the-html-element-0>html</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=handler-window-onafterprint><a href=#handler-window-onafterprint>onafterprint</a></code></dd>
   <dd><code title=handler-window-onbeforeprint><a href=#handler-window-onbeforeprint>onbeforeprint</a></code></dd>
   <dd><code title=handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>onbeforeunload</a></code></dd>
   <dd><code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code></dd>
   <dd><code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code></dd>
   <dd><code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code></dd>
   <dd><code title=handler-window-onhashchange><a href=#handler-window-onhashchange>onhashchange</a></code></dd>
   <dd><code title=handler-window-onload><a href=#handler-window-onload>onload</a></code></dd>
   <dd><code title=handler-window-onmessage><a href=#handler-window-onmessage>onmessage</a></code></dd>
   <dd><code title=handler-window-onoffline><a href=#handler-window-onoffline>onoffline</a></code></dd>
   <dd><code title=handler-window-ononline><a href=#handler-window-ononline>ononline</a></code></dd>
   <dd><code title=handler-window-onpagehide><a href=#handler-window-onpagehide>onpagehide</a></code></dd>
   <dd><code title=handler-window-onpageshow><a href=#handler-window-onpageshow>onpageshow</a></code></dd>
   <dd><code title=handler-window-onpopstate><a href=#handler-window-onpopstate>onpopstate</a></code></dd>
   <dd><code title=handler-window-onredo><a href=#handler-window-onredo>onredo</a></code></dd>
   <dd><code title=handler-window-onresize><a href=#handler-window-onresize>onresize</a></code></dd>
   <dd><code title=handler-window-onstorage><a href=#handler-window-onstorage>onstorage</a></code></dd>
   <dd><code title=handler-window-onundo><a href=#handler-window-onundo>onundo</a></code></dd>
   <dd><code title=handler-window-onunload><a href=#handler-window-onunload>onunload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlbodyelement>HTMLBodyElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute <a href=#function>Function</a> <a href=#handler-window-onafterprint title=handler-window-onafterprint>onafterprint</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeprint title=handler-window-onbeforeprint>onbeforeprint</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeunload title=handler-window-onbeforeunload>onbeforeunload</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onblur title=handler-window-onblur>onblur</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onerror title=handler-window-onerror>onerror</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onfocus title=handler-window-onfocus>onfocus</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onhashchange title=handler-window-onhashchange>onhashchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onload title=handler-window-onload>onload</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onmessage title=handler-window-onmessage>onmessage</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onoffline title=handler-window-onoffline>onoffline</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-ononline title=handler-window-ononline>ononline</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onpopstate title=handler-window-onpopstate>onpopstate</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onpagehide title=handler-window-onpagehide>onpagehide</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onpageshow title=handler-window-onpageshow>onpageshow</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onredo title=handler-window-onredo>onredo</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onresize title=handler-window-onresize>onresize</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onstorage title=handler-window-onstorage>onstorage</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onundo title=handler-window-onundo>onundo</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onunload title=handler-window-onunload>onunload</a>;
};</pre>
</dd>
  </dl><p>The <code><a href=#the-body-element-0>body</a></code> element <a href=#represents>represents</a> the main
  content of the document.</p>

  <p>In conforming documents, there is only one <code><a href=#the-body-element-0>body</a></code>
  element. The <code title=dom-document-body><a href=#dom-document-body>document.body</a></code>
  IDL attribute provides scripts with easy access to a document's
  <code><a href=#the-body-element-0>body</a></code> element.</p>

  <div class=impl>

  <p class=note>Some DOM operations (for example, parts of the
  <a href=#dnd>drag and drop</a> model) are defined in terms of "<a href=#the-body-element>the
  body element</a>". This refers to a particular element in the
  DOM, as per the definition of the term, and not any arbitrary
  <code><a href=#the-body-element-0>body</a></code> element.</p>

  </div>

  <p>The <code><a href=#the-body-element-0>body</a></code> element exposes as <a href=#event-handler-content-attributes>event handler
  content attributes</a> a number of the <a href=#event-handlers>event
  handlers</a> of the <code><a href=#window>Window</a></code> object. It also mirrors
  their <a href=#event-handler-idl-attributes>event handler IDL attributes</a>.</p>

  <p>The <code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code>, <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code>, <code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code>, and <code title=handler-window-onload><a href=#handler-window-onload>onload</a></code> <a href=#event-handlers>event
  handlers</a> of the <code><a href=#window>Window</a></code> object, exposed on the
  <code><a href=#the-body-element-0>body</a></code> element, shadow the generic <a href=#event-handlers>event
  handlers</a> with the same names normally supported by <a href=#html-elements>HTML
  elements</a>.</p>

  <p class=example>Thus, for example, a bubbling <code title=event-error>error</code> event fired on a child of <a href=#the-body-element>the
  body element</a> of a <code><a href=#document>Document</a></code> would first trigger
  the <code title=handler-onerror><a href=#handler-onerror>onerror</a></code> <a href=#event-handler-content-attributes>event handler
  content attributes</a> of that element, then that of the root
  <code><a href=#the-html-element-0>html</a></code> element, and only <em>then</em> would it trigger
  the <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code> <a href=#event-handler-content-attributes title="event handler content attributes">event handler content
  attribute</a> on the <code><a href=#the-body-element-0>body</a></code> element. This is because
  the event would bubble from the target, to the <code><a href=#the-body-element-0>body</a></code>, to
  the <code><a href=#the-html-element-0>html</a></code>, to the <code><a href=#document>Document</a></code>, to the
  <code><a href=#window>Window</a></code>, and the <a href=#event-handlers title="event handlers">event
  handler</a> on the <code><a href=#the-body-element-0>body</a></code> is watching the
  <code><a href=#window>Window</a></code> not the <code><a href=#the-body-element-0>body</a></code>. A regular event
  listener attached to the <code><a href=#the-body-element-0>body</a></code> using <code title="">addEventListener()</code>, however, would fire when the
  event bubbled through the <code><a href=#the-body-element-0>body</a></code> and not when it reaches
  the <code><a href=#window>Window</a></code> object.</p>

  <div class=example>

   <p>This page updates an indicator to show whether or not the user
   is online:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Online or offline?&lt;/title&gt;
  &lt;script&gt;
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)"&gt;
  &lt;p&gt;You are: &lt;span id="status"&gt;(Unknown)&lt;/span&gt;&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>



  <h4 id=the-section-element><span class=secno>4.4.2 </span>The <dfn><code>section</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-section-element>section</a></code> element <a href=#represents>represents</a> a
  generic section of a document or application. A section, in this
  context, is a thematic grouping of content, typically with a
  heading.</p>

  <p class=example>Examples of sections would be chapters, the
  various tabbed pages in a tabbed dialog box, or the numbered
  sections of a thesis. A Web site's home page could be split into
  sections for an introduction, news items, contact information.</p>

  <p class=note>Authors are encouraged to use the
  <code><a href=#the-article-element>article</a></code> element instead of the <code><a href=#the-section-element>section</a></code>
  element when it would make sense to syndicate the contents of the
  element.</p>

  <p class=note id=use-div-for-wrappers>The <code><a href=#the-section-element>section</a></code>
  element is not a generic container element. When an element is
  needed for styling purposes or as a convenience for scripting,
  authors are encouraged to use the <code><a href=#the-div-element>div</a></code> element
  instead. A general rule is that the <code><a href=#the-section-element>section</a></code> element is
  appropriate only if the element's contents would be listed
  explicitly in the document's <a href=#outline>outline</a>.</p>

  <div class=example>

   <p>In the following example, we see an article (part of a larger
   Web page) about apples, containing two short sections.</p>

   <pre>&lt;article&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;Apples&lt;/h1&gt;
  &lt;h2&gt;Tasty, delicious fruit!&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;
 &lt;section&gt;
  &lt;h1&gt;Red Delicious&lt;/h1&gt;
  &lt;p&gt;These bright red apples are the most common found in many
  supermarkets.&lt;/p&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Granny Smith&lt;/h1&gt;
  &lt;p&gt;These juicy, green apples make a great filling for
  apple pies.&lt;/p&gt;
 &lt;/section&gt;
&lt;/article&gt;</pre>

   <p>Notice how the use of <code><a href=#the-section-element>section</a></code> means that the author
   can use <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements throughout, without having to
   worry about whether a particular section is at the top level, the
   second level, the third level, and so on.</p>

  </div>

  <div class=example>

   <p>Here is a graduation programme with two sections, one for the
   list of people graduating, and one for the description of the
   ceremony.</p>

   <pre>&lt;!DOCTYPE Html&gt;
&lt;Html
 &gt;&lt;Head
   &gt;&lt;Title
     &gt;Graduation Ceremony Summer 2022&lt;/Title
   &gt;&lt;/Head
 &gt;&lt;Body
   &gt;&lt;H1
     &gt;Graduation&lt;/H1
   &gt;&lt;Section
     &gt;&lt;H1
       &gt;Ceremony&lt;/H1
     &gt;&lt;P
       &gt;Opening Procession&lt;/P
     &gt;&lt;P
       &gt;Speech by Validactorian&lt;/P
     &gt;&lt;P
       &gt;Speech by Class President&lt;/P
     &gt;&lt;P
       &gt;Presentation of Diplomas&lt;/P
     &gt;&lt;P
       &gt;Closing Speech by Headmaster&lt;/P
   &gt;&lt;/Section
   &gt;&lt;Section
     &gt;&lt;H1
       &gt;Graduates&lt;/H1
     &gt;&lt;Ul
       &gt;&lt;Li
         &gt;Molly Carpenter&lt;/Li
       &gt;&lt;Li
         &gt;Anastasia Luccio&lt;/Li
       &gt;&lt;Li
         &gt;Ebenezar McCoy&lt;/Li
       &gt;&lt;Li
         &gt;Karrin Murphy&lt;/Li
       &gt;&lt;Li
         &gt;Thomas Raith&lt;/Li
       &gt;&lt;Li
         &gt;Susan Rodriguez&lt;/Li
     &gt;&lt;/Ul
   &gt;&lt;/Section
 &gt;&lt;/Body
&gt;&lt;/Html&gt;</pre>

  </div>



  <h4 id=the-nav-element><span class=secno>4.4.3 </span>The <dfn><code>nav</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-nav-element>nav</a></code> element <a href=#represents>represents</a> a section of
  a page that links to other pages or to parts within the page: a
  section with navigation links.</p>

  <p>Not all groups of links on a page need to be in a
  <code><a href=#the-nav-element>nav</a></code> element &mdash; only sections that consist of major
  navigation blocks are appropriate for the <code><a href=#the-nav-element>nav</a></code>
  element. In particular, it is common for footers to have a short
  list of links to various pages of a site, such as the terms of
  service, the home page, and a copyright page. The
  <code><a href=#the-footer-element>footer</a></code> element alone is sufficient for such cases,
  without a <code><a href=#the-nav-element>nav</a></code> element.</p>

  <p class=note>User agents (such as screen readers) that are
  targeted at users who can benefit from navigation information being
  omitted in the initial rendering, or who can benefit from navigation
  information being immediately available, can use this element as a
  way to determine what content on the page to initially skip and/or
  provide on request.</p>

  <div class=example>

   <p>In the following example, the page has several places where
   links are present, but only one of those places is considered a
   navigation section.</p>

   <pre>&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;Wake up sheeple!&lt;/h1&gt;
  &lt;p&gt;&lt;a href="news.html"&gt;News&lt;/a&gt; -
     &lt;a href="blog.html"&gt;Blog&lt;/a&gt; -
     &lt;a href="forums.html"&gt;Forums&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Last Modified: &lt;time&gt;2009-04-01&lt;/time&gt;&lt;/p&gt;
  &lt;nav&gt;
   &lt;h1&gt;Navigation&lt;/h1&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="articles.html"&gt;Index of all articles&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="today.html"&gt;Things sheeple need to wake up for today&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="successes.html"&gt;Sheeple we have managed to wake&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
 &lt;/header&gt;
 &lt;div&gt;
  &lt;article&gt;
   &lt;header&gt;
    &lt;h1&gt;My Day at the Beach&lt;/h1&gt;
   &lt;/header&gt;
   &lt;div&gt;
    &lt;p&gt;Today I went to the beach and had a lot of fun.&lt;/p&gt;
    <em>...more content...</em>
   &lt;/div&gt;
   &lt;footer&gt;
    &lt;p&gt;Posted &lt;time pubdate datetime="2009-10-10T14:36-08:00"&gt;Thursday&lt;/time&gt;.&lt;/p&gt;
   &lt;/footer&gt;
  &lt;/article&gt;
  <em>...more blog posts...</em>
 &lt;/div&gt;
 &lt;footer&gt;
  &lt;p&gt;Copyright &copy; 2006 The Example Company&lt;/p&gt;
  &lt;p&gt;&lt;a href="about.html"&gt;About&lt;/a&gt; -
     &lt;a href="policy.html"&gt;Privacy Policy&lt;/a&gt; -
     &lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

   <p>Notice the <code><a href=#the-div-element>div</a></code> elements being used to wrap all the
   contents of the page other than the header and footer, and all the
   contents of the blog entry other than its header and footer.</p>

  </div>

  <div class=example>

   <p>In the following example, there are two <code><a href=#the-nav-element>nav</a></code>
   elements, one for primary navigation around the site, and one for
   secondary navigation around the page itself.</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;The Wiki Center Of Exampland&lt;/h1&gt;
 &lt;nav&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="/events"&gt;Current Events&lt;/a&gt;&lt;/li&gt;
   <em>...more...</em>
  &lt;/ul&gt;
 &lt;/nav&gt;
 &lt;article&gt;
  &lt;header&gt;
   &lt;h1&gt;Demos in Exampland&lt;/h1&gt;
   &lt;p&gt;Written by A. N. Other.&lt;/p&gt;
  &lt;/header&gt;
  &lt;nav&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#public"&gt;Public demonstrations&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#destroy"&gt;Demolitions&lt;/a&gt;&lt;/li&gt;
    <em>...more...</em>
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div&gt;
   &lt;section id="public"&gt;
    &lt;h1&gt;Public demonstrations&lt;/h1&gt;
    &lt;p&gt;<em>...more...</em>&lt;/p&gt;
   &lt;/section&gt;
   &lt;section id="destroy"&gt;
    &lt;h1&gt;Demolitions&lt;/h1&gt;
    &lt;p&gt;<em>...more...</em>&lt;/p&gt;
   &lt;/section&gt;
   <em>...more...</em>
  &lt;/div&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="?edit"&gt;Edit&lt;/a&gt; | &lt;a href="?delete"&gt;Delete&lt;/a&gt; | &lt;a href="?Rename"&gt;Rename&lt;/a&gt;&lt;/p&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;footer&gt;
  &lt;p&gt;&lt;small&gt;&copy; copyright 1998 Exampland Emperor&lt;/small&gt;&lt;/p&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

  </div>


  <h4 id=the-article-element><span class=secno>4.4.4 </span>The <dfn><code>article</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-article-element>article</a></code> element <a href=#represents>represents</a> a
  self-contained composition in a document, page, application, or site
  and that is intended to be independently distributable or reusable,
  e.g. in syndication. This could be a forum post, a magazine or
  newspaper article, a blog entry, a user-submitted comment, an
  interactive widget or gadget, or any other independent item of
  content.</p>

  <p>When <code><a href=#the-article-element>article</a></code> elements are nested, the inner
  <code><a href=#the-article-element>article</a></code> elements represent articles that are in
  principle related to the contents of the outer article. For
  instance, a blog entry on a site that accepts user-submitted
  comments could represent the comments as <code><a href=#the-article-element>article</a></code>
  elements nested within the <code><a href=#the-article-element>article</a></code> element for the blog
  entry.</p>

  <p>Author information associated with an <code><a href=#the-article-element>article</a></code>
  element (q.v. the <code><a href=#the-address-element>address</a></code> element) does not apply to
  nested <code><a href=#the-article-element>article</a></code> elements.</p>

  <p class=note>When used specifically with content to be
  redistributed in syndication, the <code><a href=#the-article-element>article</a></code> element is
  similar in purpose to the <code title="">entry</code> element in
  Atom. <a href=#refsATOM>[ATOM]</a>

  <p class=note>The <code><a href=#the-time-element>time</a></code> element's <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute can be used to
  provide the publication date for an <code><a href=#the-article-element>article</a></code>
  element.</p>

  <div class=example id=article-example>

   <p>This example shows a blog post using the <code><a href=#the-article-element>article</a></code>
   element:</p>

   <pre>&lt;article&gt;
 &lt;header&gt;
  &lt;h1&gt;The Very First Rule of Life&lt;/h1&gt;
  &lt;p&gt;&lt;time pubdate datetime="2009-10-09T14:28-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
 &lt;/header&gt;
 &lt;p&gt;If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.&lt;/p&gt;
 &lt;p&gt;<em>...</em>&lt;/p&gt;
 &lt;footer&gt;
  &lt;a href="?comments=1"&gt;Show comments...&lt;/a&gt;
 &lt;/footer&gt;
&lt;/article&gt;</pre>

   <p>Here is that same blog post, but showing some of the comments:</p>

   <pre>&lt;article&gt;
 &lt;header&gt;
  &lt;h1&gt;The Very First Rule of Life&lt;/h1&gt;
  &lt;p&gt;&lt;time pubdate datetime="2009-10-09T14:28-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
 &lt;/header&gt;
 &lt;p&gt;If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.&lt;/p&gt;
 &lt;p&gt;<em>...</em>&lt;/p&gt;
 &lt;section&gt;
  &lt;h1&gt;Comments&lt;/h1&gt;
  &lt;article&gt;
   &lt;footer&gt;
    &lt;p&gt;Posted by: George Washington&lt;/p&gt;
    &lt;p&gt;&lt;time pubdate datetime="2009-10-10T19:10-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
   &lt;/footer&gt;
   &lt;p&gt;Yeah! Especially when talking about your lobbyist friends!&lt;/p&gt;
  &lt;/article&gt;
  &lt;article&gt;
   &lt;footer&gt;
    &lt;p&gt;Posted by: George Hammond&lt;/p&gt;
    &lt;p&gt;&lt;time pubdate datetime="2009-10-10T19:15-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
   &lt;/footer&gt;
   &lt;p&gt;Hey, you have the same first name as me.&lt;/p&gt;
  &lt;/article&gt;
 &lt;/section&gt;
&lt;/article&gt;</pre>

   <p>Notice the use of <code><a href=#the-footer-element>footer</a></code> to give the information
   each comment (such as who wrote it and when): the
   <code><a href=#the-footer-element>footer</a></code> element <em>can</em> appear at the start of its
   section when appropriate, such as in this case. (Using
   <code><a href=#the-header-element>header</a></code> in this case wouldn't be wrong either; it's
   mostly a matter of authoring preference.)</p>

  </div>




  <h4 id=the-aside-element><span class=secno>4.4.5 </span>The <dfn><code>aside</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-aside-element>aside</a></code> element <a href=#represents>represents</a> a section
  of a page that consists of content that is tangentially related to
  the content around the <code><a href=#the-aside-element>aside</a></code> element, and which could
  be considered separate from that content. Such sections are often
  represented as sidebars in printed typography.</p>

  <p>The element can be used for typographical effects like pull
  quotes or sidebars, for advertising, for groups of <code><a href=#the-nav-element>nav</a></code>
  elements, and for other content that is considered separate from the
  main content of the page.</p>

  <p class=note>It's not appropriate to use the <code><a href=#the-aside-element>aside</a></code>
  element just for parentheticals, since those are part of the main
  flow of the document.</p>

  <div class=example>

   <p>The following example shows how an aside is used to mark up
   background material on Switzerland in a much longer news story on
   Europe.</p>

   <pre>&lt;aside&gt;
 &lt;h1&gt;Switzerland&lt;/h1&gt;
 &lt;p&gt;Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.&lt;/p&gt;
&lt;/aside&gt;</pre>

  </div>

  <div class=example>

   <p>The following example shows how an aside is used to mark up
   a pull quote in a longer article.</p>

   <pre>...

&lt;p&gt;He later joined a large company, continuing on the same work.
&lt;q&gt;I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.&lt;/q&gt;&lt;/p&gt;

&lt;aside&gt;
 &lt;q&gt; People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer. &lt;/q&gt;
&lt;/aside&gt;

&lt;p&gt;Of course his work &mdash; or should that be hobby? &mdash;
isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;

...</pre>

  </div>

  <div class=example>

   <p>The following extract shows how <code><a href=#the-aside-element>aside</a></code> can be used
   for blogrolls and other side content on a blog:</p>

   <pre>&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;My wonderful blog&lt;/h1&gt;
  &lt;p&gt;My tagline&lt;/p&gt;
 &lt;/header&gt;
 &lt;aside&gt;
  &lt;!-- <em>this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog</em> --&gt;
  &lt;nav&gt;
   &lt;h1&gt;My blogroll&lt;/h1&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="http://blog.example.com/"&gt;Example Blog&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;nav&gt;
   &lt;h1&gt;Archives&lt;/h1&gt;
   &lt;ol reversed&gt;
    &lt;li&gt;&lt;a href="/last-post"&gt;My last post&lt;/a&gt;
    &lt;li&gt;&lt;a href="/first-post"&gt;My first post&lt;/a&gt;
   &lt;/ol&gt;
  &lt;/nav&gt;
 &lt;/aside&gt;
 &lt;aside&gt;
  &lt;!-- <em>this aside is tangentially related to the page also, it
  contains twitter messages from the blog author</em> --&gt;
  &lt;h1&gt;Twitter Feed&lt;/h1&gt;
  &lt;blockquote cite="http://twitter.example.net/t31351234"&gt;
   I'm on vacation, writing my blog.
  &lt;/blockquote&gt;
  &lt;blockquote cite="http://twitter.example.net/t31219752"&gt;
   I'm going to go on vacation soon.
  &lt;/blockquote&gt;
 &lt;/aside&gt;
 &lt;article&gt;
  &lt;!-- <em>this is a blog post</em> --&gt;
  &lt;h1&gt;My last post&lt;/h1&gt;
  &lt;p&gt;This is my last post.&lt;/p&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="/last-post" rel=bookmark&gt;Permalink&lt;/a&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;article&gt;
  &lt;!-- <em>this is also a blog post</em> --&gt;
  &lt;h1&gt;My first post&lt;/h1&gt;
  &lt;p&gt;This is my first post.&lt;/p&gt;
  &lt;aside&gt;
   &lt;!-- <em>this aside is about the blog post, since it's inside the
   &lt;article&gt; element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole</em> --&gt;
   &lt;h1&gt;Posting&lt;/h1&gt;
   &lt;p&gt;While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="/first-post" rel=bookmark&gt;Permalink&lt;/a&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;footer&gt;
  &lt;nav&gt;
   &lt;a href="/archives"&gt;Archives&lt;/a&gt; &mdash;
   &lt;a href="/about"&gt;About me&lt;/a&gt; &mdash;
   &lt;a href="/copyright"&gt;Copyright&lt;/a&gt;
  &lt;/nav&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

  </div>



  <h4 id=the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><span class=secno>4.4.6 </span>The <dfn><code>h1</code></dfn>, <dfn><code>h2</code></dfn>,
  <dfn><code>h3</code></dfn>, <dfn><code>h4</code></dfn>,
  <dfn><code>h5</code></dfn>, and <dfn><code>h6</code></dfn>
  elements</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#heading-content>Heading content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of an <code><a href=#the-hgroup-element>hgroup</a></code> element.</dd>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlheadingelement>HTMLHeadingElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>These elements <a href=#represents title=represents>represent</a> headings
  for their sections.</p>

  <p>The semantics and meaning of these elements are defined in the
  section on <a href=#headings-and-sections>headings and sections</a>.</p>

  <p>These elements have a <dfn id=rank>rank</dfn> given by the number in
  their name. The <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element is said to have the highest
  rank, the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element has the lowest rank, and two
  elements with the same name have equal rank.</p>

  <div class=example>

   <p>These two snippets are equivalent:</p>

   <pre>&lt;body&gt;
&lt;h1&gt;Let's call it a draw(ing surface)&lt;/h1&gt;
&lt;h2&gt;Diving in&lt;/h2&gt;
&lt;h2&gt;Simple shapes&lt;/h2&gt;
&lt;h2&gt;Canvas coordinates&lt;/h2&gt;
&lt;h3&gt;Canvas coordinates diagram&lt;/h3&gt;
&lt;h2&gt;Paths&lt;/h2&gt;
&lt;/body&gt;</pre>

   <pre>&lt;body&gt;
 &lt;h1&gt;Let's call it a draw(ing surface)&lt;/h1&gt;
 &lt;section&gt;
  &lt;h1&gt;Diving in&lt;/h1&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Simple shapes&lt;/h1&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Canvas coordinates&lt;/h1&gt;
  &lt;section&gt;
   &lt;h1&gt;Canvas coordinates diagram&lt;/h1&gt;
  &lt;/section&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Paths&lt;/h1&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

  </div>




  <h4 id=the-hgroup-element><span class=secno>4.4.7 </span>The <dfn><code>hgroup</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#heading-content>Heading content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>One or more <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, and/or <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-hgroup-element>hgroup</a></code> element <a href=#represents>represents</a> the
  heading of a section. The element is used to group a set of
  <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements when the heading has
  multiple levels, such as subheadings, alternative titles, or
  taglines.</p>

  <p>For the purposes of document summaries, outlines, and the like,
  the text of <code><a href=#the-hgroup-element>hgroup</a></code> elements is defined to be the text
  of the highest <a href=#rank title=rank>ranked</a>
  <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element descendant of the
  <code><a href=#the-hgroup-element>hgroup</a></code> element, if there are any such elements, and the
  first such element if there are multiple elements with that
  <a href=#rank>rank</a>. If there are no such elements, then the text of
  the <code><a href=#the-hgroup-element>hgroup</a></code> element is the empty string.</p>

  <p>Other elements of <a href=#heading-content>heading content</a> in the
  <code><a href=#the-hgroup-element>hgroup</a></code> element indicate subheadings or subtitles.</p>

  <p>The <a href=#rank>rank</a> of an <code><a href=#the-hgroup-element>hgroup</a></code> element is the
  rank of the highest-ranked <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>
  element descendant of the <code><a href=#the-hgroup-element>hgroup</a></code> element, if there are
  any such elements, or otherwise the same as for an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>
  element (the highest rank).</p>

  <p>The section on <a href=#headings-and-sections>headings and sections</a>
  defines how <code><a href=#the-hgroup-element>hgroup</a></code> elements are assigned to individual
  sections.</p>

  <div class=example>

   <p>Here are some examples of valid headings. In each case, the
   emphasized text represents the text that would be used as the
   heading in an application extracting heading data and ignoring
   subheadings.</p>

   <pre>&lt;hgroup&gt;
 &lt;h1&gt;<strong>The reality dysfunction</strong>&lt;/h1&gt;
 &lt;h2&gt;Space is not the only void&lt;/h2&gt;
&lt;/hgroup&gt;</pre>

   <pre>&lt;hgroup&gt;
 &lt;h1&gt;<strong>Dr. Strangelove</strong>&lt;/h1&gt;
 &lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
&lt;/hgroup&gt;</pre>

  <p>The point of using <code><a href=#the-hgroup-element>hgroup</a></code> in these examples is to
  mask the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element (which acts as a secondary title)
  from the <a href=#outline>outline</a> algorithm.</p><!--
  http://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895
  -->

  </div>


  <h4 id=the-header-element><span class=secno>4.4.8 </span>The <dfn><code>header</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>, but with no <code><a href=#the-header-element>header</a></code> or
   <code><a href=#the-footer-element>footer</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-header-element>header</a></code> element <a href=#represents>represents</a> a group
  of introductory or navigational aids.</p>

  <p class=note>A <code><a href=#the-header-element>header</a></code> element is intended to usually
  contain the section's heading (an
  <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element or an
  <code><a href=#the-hgroup-element>hgroup</a></code> element), but this is not required. The
  <code><a href=#the-header-element>header</a></code> element can also be used to wrap a section's
  table of contents, a search form, or any relevant logos.</p>

  <div class=example>

  <p>Here are some sample headers. This first one is for a game:</p>

   <pre>&lt;header&gt;
 &lt;p&gt;Welcome to...&lt;/p&gt;
 &lt;h1&gt;Voidwars!&lt;/h1&gt;
&lt;/header&gt;</pre>

   <p>The following snippet shows how the element can be used to mark
   up a specification's header:</p>

   <pre>&lt;header&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;Scalable Vector Graphics (SVG) 1.2&lt;/h1&gt;
  &lt;h2&gt;W3C Working Draft 27 October 2004&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;dl&gt;
  &lt;dt&gt;This version:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20041027/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Previous version:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20040510/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Latest version of SVG 1.2:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG12/"&gt;http://www.w3.org/TR/SVG12/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Latest SVG Recommendation:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG/"&gt;http://www.w3.org/TR/SVG/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Editor:&lt;/dt&gt;
  &lt;dd&gt;Dean Jackson, W3C, &lt;a href="mailto:dean@w3.org"&gt;dean@w3.org&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Authors:&lt;/dt&gt;
  &lt;dd&gt;See &lt;a href="#authors"&gt;Author List&lt;/a&gt;&lt;/dd&gt;
 &lt;/dl&gt;
 &lt;p class="copyright"&gt;&lt;a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em>
&lt;/header&gt;</pre>

  </div>

  <p class=note>The <code><a href=#the-header-element>header</a></code> element is not
  <a href=#sectioning-content>sectioning content</a>; it doesn't introduce a new
  section.</p>

  <div class=example>

  <p>In this example, the page has a page heading given by the
  <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element, and two subsections whose headings are
  given by <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> elements. The content after the
  <code><a href=#the-header-element>header</a></code> element is still part of the last subsection
  started in the <code><a href=#the-header-element>header</a></code> element, because the
  <code><a href=#the-header-element>header</a></code> element doesn't take part in the
  <a href=#outline>outline</a> algorithm.</p>

   <pre>&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;Little Green Guys With Guns&lt;/h1&gt;
  &lt;nav&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="/games"&gt;Games&lt;/a&gt;
    &lt;li&gt;&lt;a href="/forum"&gt;Forum&lt;/a&gt;
    &lt;li&gt;&lt;a href="/download"&gt;Download&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;h2&gt;Important News&lt;/h2&gt; &lt;!-- this starts a second subsection --&gt;
  &lt;!-- this is part of the subsection entitled "Important News" --&gt;
  &lt;p&gt;To play today's games you will need to update your client.&lt;/p&gt;
  &lt;h2&gt;Games&lt;/h2&gt; &lt;!-- this starts a third subsection --&gt;
 &lt;/header&gt;
 &lt;p&gt;You have three active games:&lt;/p&gt;
 &lt;!-- this is still part of the subsection entitled "Games" --&gt;
 ...</pre>

  </div>




  <h4 id=the-footer-element><span class=secno>4.4.9 </span>The <dfn><code>footer</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>, but with no <code><a href=#the-header-element>header</a></code> or
   <code><a href=#the-footer-element>footer</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-footer-element>footer</a></code> element <a href=#represents>represents</a> a footer
  for its nearest ancestor <a href=#sectioning-content>sectioning content</a> or
  <a href=#sectioning-root>sectioning root</a> element. A footer typically contains
  information about its section such as who wrote it, links to related
  documents, copyright data, and the like.</p>

  <p class=note>Contact information for the author or editor of a
  section belongs in an <code><a href=#the-address-element>address</a></code> element, possibly itself
  inside a <code><a href=#the-footer-element>footer</a></code>.</p>

  <p>Footers don't necessarily have to appear at the <em>end</em> of a
  section, though they usually do.</p>

  <p>When the <code><a href=#the-footer-element>footer</a></code> element contains entire sections,
  they <a href=#represents title=represents>represent</a> appendices, indexes,
  long colophons, verbose license agreements, and other such
  content.</p>

  <p class=note>The <code><a href=#the-footer-element>footer</a></code> element is not
  <a href=#sectioning-content>sectioning content</a>; it doesn't introduce a new
  section.</p>

  <p>When the nearest ancestor <a href=#sectioning-content>sectioning content</a> or
  <a href=#sectioning-root>sectioning root</a> element is <a href=#the-body-element>the body
  element</a>, then it applies to the whole page.</p>

  <div class=example>

   <p>Here is a page with two footers, one at the top and one at the
   bottom, with the same content:</p>

   <pre>&lt;body&gt;
 &lt;footer&gt;&lt;a href="../"&gt;Back to index...&lt;/a&gt;&lt;/footer&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
  &lt;h2&gt;The ipsum of all lorems&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;p&gt;A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
 &lt;footer&gt;&lt;a href="../"&gt;Back to index...&lt;/a&gt;&lt;/footer&gt;
&lt;/body&gt;</pre>

  </div>

  <div class=example>

   <p>Here is an example which shows the <code><a href=#the-footer-element>footer</a></code> element
   being used both for a site-wide footer and for a section
   footer.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;&lt;HEAD&gt;
&lt;TITLE&gt;The Ramblings of a Scientist&lt;/TITLE&gt;
&lt;BODY&gt;
&lt;H1&gt;The Ramblings of a Scientist&lt;/H1&gt;
&lt;ARTICLE&gt;
 &lt;H1&gt;Episode 15&lt;/H1&gt;
 &lt;VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD&gt;
  &lt;P&gt;&lt;A HREF="/fm/015.ogv"&gt;Download video&lt;/A&gt;.&lt;/P&gt;
 &lt;/VIDEO&gt;
 &lt;FOOTER&gt; &lt;!-- footer for article --&gt;
  &lt;P&gt;Published &lt;TIME PUBDATE DATETIME="2009-10-21T18:26-07:00"&gt;&lt;/TIME&gt;&lt;/P&gt;
 &lt;/FOOTER&gt;
&lt;/ARTICLE&gt;
&lt;ARTICLE&gt;
 &lt;H1&gt;My Favorite Trains&lt;/H1&gt;
 &lt;P&gt;I love my trains. My favorite train of all time is a K&ouml;f.&lt;/P&gt;
 &lt;P&gt;It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.&lt;/P&gt;
 &lt;FOOTER&gt; &lt;!-- footer for article --&gt;
  &lt;P&gt;Published &lt;TIME PUBDATE DATETIME="2009-09-15T14:54-07:00"&gt;&lt;/TIME&gt;&lt;/P&gt;
 &lt;/FOOTER&gt;
&lt;/ARTICLE&gt;
&lt;FOOTER&gt; &lt;!-- site wide footer --&gt;
 &lt;NAV&gt;
  &lt;P&gt;&lt;A HREF="/credits.html"&gt;Credits&lt;/A&gt; &mdash;
     &lt;A HREF="/tos.html"&gt;Terms of Service&lt;/A&gt; &mdash;
     &lt;A HREF="/index.html"&gt;Blog Index&lt;/A&gt;&lt;/P&gt;
 &lt;/NAV&gt;
 &lt;P&gt;Copyright &copy; 2009 Gordon Freeman&lt;/P&gt;
&lt;/FOOTER&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;</pre>

  </div>


  <h4 id=the-address-element><span class=secno>4.4.10 </span>The <dfn><code>address</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>, but with no <a href=#heading-content>heading
   content</a> descendants, no <a href=#sectioning-content>sectioning content</a>
   descendants, and no <code><a href=#the-header-element>header</a></code>, <code><a href=#the-footer-element>footer</a></code>, or
   <code><a href=#the-address-element>address</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-address-element>address</a></code> element <a href=#represents>represents</a> the
  contact information for its nearest <code><a href=#the-article-element>article</a></code> or
  <code><a href=#the-body-element-0>body</a></code> element ancestor. If that is <a href=#the-body-element>the body
  element</a>, then the contact information applies to the document
  as a whole.</p>

  <div class=example>
   <p>For example, a page at the W3C Web site related to HTML might
   include the following contact information:</p>
   <pre>&lt;ADDRESS&gt;
 &lt;A href="../People/Raggett/"&gt;Dave Raggett&lt;/A&gt;,
 &lt;A href="../People/Arnaud/"&gt;Arnaud Le Hors&lt;/A&gt;,
 contact persons for the &lt;A href="Activity"&gt;W3C HTML Activity&lt;/A&gt;
&lt;/ADDRESS&gt;</pre>
  </div>

  <p>The <code><a href=#the-address-element>address</a></code> element must not be used to represent
  arbitrary addresses (e.g. postal addresses), unless those addresses
  are in fact the relevant contact information. (The <code><a href=#the-p-element>p</a></code>
  element is the appropriate element for marking up postal addresses
  in general.)</p>

  <p>The <code><a href=#the-address-element>address</a></code> element must not contain information
  other than contact information.</p>

  <div class=example>
   <p>For example, the following is non-conforming use of the
   <code><a href=#the-address-element>address</a></code> element:</p>
   <pre class=bad>&lt;ADDRESS&gt;Last Modified: 1999/12/24 23:37:50&lt;/ADDRESS&gt;</pre>
  </div>

  <p>Typically, the <code><a href=#the-address-element>address</a></code> element would be included
  along with other information in a <code><a href=#the-footer-element>footer</a></code> element.</p>

  <div class=impl>

  <p>The contact information for a node <var title="">node</var> is a
  collection of <code><a href=#the-address-element>address</a></code> elements defined by the first
  applicable entry from the following list:</p>

  <dl class=switch><dt>If <var title="">node</var> is an <code><a href=#the-article-element>article</a></code> element</dt>
   <dt>If <var title="">node</var> is a <code><a href=#the-body-element-0>body</a></code> element</dt>

   <dd>

    <p>The contact information consists of all the
    <code><a href=#the-address-element>address</a></code> elements that have <var title="">node</var>
    as an ancestor and do not have another <code><a href=#the-body-element-0>body</a></code> or
    <code><a href=#the-article-element>article</a></code> element ancestor that is a descendant of <var title="">node</var>.</p>

   </dd>

   <dt>If <var title="">node</var> has an ancestor element that is an <code><a href=#the-article-element>article</a></code> element</dt>
   <dt>If <var title="">node</var> has an ancestor element that is a <code><a href=#the-body-element-0>body</a></code> element</dt>

   <dd>

    <p>The contact information of <var title="">node</var> is the same
    as the contact information of the nearest <code><a href=#the-article-element>article</a></code> or
    <code><a href=#the-body-element-0>body</a></code> element ancestor, whichever is nearest.</p>

   </dd>

   <dt>If <var title="">node</var>'s <code><a href=#document>Document</a></code> has <a href=#the-body-element title="the body element">a body element</a></dt>

   <dd>

    <p>The contact information of <var title="">node</var> is the same
    as the contact information <a href=#the-body-element>the body element</a> of the
    <code><a href=#document>Document</a></code>.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>There is no contact information for <var title="">node</var>.</p>

   </dd>

  </dl><p>User agents may expose the contact information of a node to the
  user, or use it for other purposes, such as indexing sections based
  on the sections' contact information.</p>

  </div>



  <h4 id=headings-and-sections><span class=secno>4.4.11 </span><dfn>Headings and sections</dfn></h4>

  <p>The <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements and the
  <code><a href=#the-hgroup-element>hgroup</a></code> element are headings.</p>

  <p>The first element of <a href=#heading-content>heading content</a> in an element
  of <a href=#sectioning-content>sectioning content</a> <a href=#represents>represents</a> the
  heading for that section. Subsequent headings of equal or higher
  <a href=#rank>rank</a> start new (implied) sections, headings of lower
  <a href=#rank>rank</a> start implied subsections that are part of the
  previous one. In both cases, the element <a href=#represents>represents</a> the
  heading of the implied section.</p>

  <p>Certain elements are said to be <dfn id=sectioning-root title="sectioning
  root">sectioning roots</dfn>, including <code><a href=#the-blockquote-element>blockquote</a></code> and
  <code><a href=#the-td-element>td</a></code> elements. These elements can have their own
  outlines, but the sections and headings inside these elements do not
  contribute to the outlines of their ancestors.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href=#the-blockquote-element>blockquote</a></code></li>
   <li><code><a href=#the-body-element-0>body</a></code></li>
<!-- v2DATAGRID   <li><code>datagrid</code></li> -->
   <li><code><a href=#the-details-element>details</a></code></li>
   <li><code><a href=#the-fieldset-element>fieldset</a></code></li>
   <li><code><a href=#the-figure-element>figure</a></code></li>
   <li><code><a href=#the-td-element>td</a></code></li>
  </ul><!-- a root element isn't a sectioning root. This means, for
  instance, that you don't get an outline if you just have a random
  XML file with <html:h1> elements in it. Other vocabs need to define
  what their sectioning root is. --><p><a href=#sectioning-content>Sectioning content</a> elements are always considered
  subsections of their nearest ancestor <a href=#sectioning-root>sectioning root</a>
  or their nearest ancestor element of <a href=#sectioning-content>sectioning
  content</a>, whichever is nearest, regardless of what implied
  sections other headings may have created.</p>

  <div class=example>
   <p>For the following fragment:</p>
   <pre>&lt;body&gt;
 &lt;h1&gt;Foo&lt;/h1&gt;
 &lt;h2&gt;Bar&lt;/h2&gt;
 &lt;blockquote&gt;
  &lt;h3&gt;Bla&lt;/h3&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Baz&lt;/p&gt;
 &lt;h2&gt;Quux&lt;/h2&gt;
 &lt;section&gt;
  &lt;h3&gt;Thud&lt;/h3&gt;
 &lt;/section&gt;
 &lt;p&gt;Grunt&lt;/p&gt;
&lt;/body&gt;</pre>
   <p>...the structure would be:</p>
   <ol><li>
     Foo (heading of explicit <code><a href=#the-body-element-0>body</a></code> section, containing the "Grunt" paragraph)
     <ol><li>
       Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)
      </li>
      <li>
       Quux (heading starting implied section with no content other than the heading itself)
      </li>
      <li>
       Thud (heading of explicit <code><a href=#the-section-element>section</a></code> section)
      </li>
     </ol></li>
   </ol><p>Notice how the <code><a href=#the-section-element>section</a></code> ends the earlier implicit
   section so that a later paragraph ("Grunt") is back at the top
   level.</p>
  </div>

  <p>Sections may contain headings of any <a href=#rank>rank</a>, but
  authors are strongly encouraged to either use only <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>
  elements, or to use elements of the appropriate <a href=#rank>rank</a>
  for the section's nesting level.</p>

  <p>Authors are also encouraged to explicitly wrap sections in
  elements of <a href=#sectioning-content>sectioning content</a>, instead of relying on
  the implicit sections generated by having multiple headings in one
  element of <a href=#sectioning-content>sectioning content</a>.</p>

  <div class=example>
   <p>For example, the following is correct:</p>

   <pre>&lt;body&gt;
 &lt;h4&gt;Apples&lt;/h4&gt;
 &lt;p&gt;Apples are fruit.&lt;/p&gt;
 &lt;section&gt;
  &lt;h2&gt;Taste&lt;/h2&gt;
  &lt;p&gt;They taste lovely.&lt;/p&gt;
  &lt;h6&gt;Sweet&lt;/h6&gt;
  &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
  &lt;h1&gt;Color&lt;/h1&gt;
  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

   <p>However, the same document would be more clearly expressed
   as:</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;Apples&lt;/h1&gt;
 &lt;p&gt;Apples are fruit.&lt;/p&gt;
 &lt;section&gt;
  &lt;h2&gt;Taste&lt;/h2&gt;
  &lt;p&gt;They taste lovely.&lt;/p&gt;
  &lt;section&gt;
   &lt;h3&gt;Sweet&lt;/h3&gt;
   &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h2&gt;Color&lt;/h2&gt;
  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

   <p>Both of the documents above are semantically identical and would
   produce the same outline in compliant user agents.</p>

  </div>


  <h5 id=outlines><span class=secno>4.4.11.1 </span>Creating an outline</h5>

  <div class=impl>

  <!-- v2 idea: It would be nice if there was a way to use this to
  autogenerate a table of contents or some such -->

  <p>This section defines an algorithm for creating an outline for a
  <a href=#sectioning-content>sectioning content</a> element or a <a href=#sectioning-root>sectioning
  root</a> element. It is defined in terms of a walk over the nodes
  of a DOM tree, in tree order, with each node being visited when it
  is <i>entered</i> and when it is <i>exited</i> during the walk.</p>

  </div>

  <p>The <dfn id=outline>outline</dfn> for a <a href=#sectioning-content>sectioning content</a>
  element or a <a href=#sectioning-root>sectioning root</a> element consists of a list
  of one or more potentially nested <a href=#concept-section title=concept-section>sections</a>. A <dfn id=concept-section title=concept-section>section</dfn> is a container that
  corresponds to some nodes in the original DOM tree. Each section can
  have one heading associated with it, and can contain any number of
  further nested sections. <span class=impl>The algorithm for the
  outline also associates each node in the DOM tree with a particular
  section and potentially a heading.</span> (The sections in the
  outline aren't <code><a href=#the-section-element>section</a></code> elements, though some may
  correspond to such elements &mdash; they are merely conceptual
  sections.)</p>

  <div class=example>

   <p>The following markup fragment:</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;A&lt;/h1&gt;
 &lt;p&gt;B&lt;/p&gt;
 &lt;h2&gt;C&lt;/h2&gt;
 &lt;p&gt;D&lt;/p&gt;
 &lt;h2&gt;E&lt;/h2&gt;
 &lt;p&gt;F&lt;/p&gt;
&lt;/body&gt;</pre>

   <p>...results in the following outline being created for the
   <code><a href=#the-body-element-0>body</a></code> node (and thus the entire document):</p>

   <ol class=brief><li>
     <p>Section created for <code><a href=#the-body-element-0>body</a></code> node.</p>
     <p>Associated with heading "A".</p>
     <p>Also associated with paragraph "B".</p>
     <p>Nested sections:</p>
     <ol class=brief><li>
       <p>Section implied for first <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element.</p>
       <p>Associated with heading "C".</p>
       <p>Also associated with paragraph "D".</p>
       <p>No nested sections.</p>
      </li>
      <li>
       <p>Section implied for second <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element.</p>
       <p>Associated with heading "E".</p>
       <p>Also associated with paragraph "F".</p>
       <p>No nested sections.</p>
      </li>
     </ol></li>
   </ol></div>

  <div class=impl>

  <p>The algorithm that must be followed during a walk of a DOM
  subtree rooted at a <a href=#sectioning-content>sectioning content</a> element or a
  <a href=#sectioning-root>sectioning root</a> element to determine that element's
  <a href=#outline>outline</a> is as follows:</p>

  <ol><li><p>Let <var title="">current outlinee</var> be null. (It holds
   the element whose <a href=#outline>outline</a> is being created.)</li>

   <li><p>Let <var title="">current section</var> be null. (It holds a
   pointer to a <a href=#concept-section title=concept-section>section</a>, so that
   elements in the DOM can all be associated with a section.)</li>

   <li><p>Create a stack to hold elements, which is used to handle
   nesting. Initialize this stack to empty.</li>

   <li>

    <p>As you walk over the DOM in <a href=#tree-order>tree order</a>, trigger
    the first relevant step below for each element as you enter and
    exit it.</p>

    <dl class=switch><dt>If the top of the stack is an element, and you are exiting
     that element</dt>

     <dd>

      <p class=note>The element being exited is a <a href=#heading-content>heading
      content</a> element.</p>

      <p>Pop that element from the stack.</p>

     </dd>


     <dt>If the top of the stack is a <a href=#heading-content>heading content</a>
     element</dt>

     <dd><p>Do nothing.</dd>


     <dt>When entering a <a href=#sectioning-content>sectioning content</a> element or a
     <a href=#sectioning-root>sectioning root</a> element</dt>

     <dd>

      <p>If <var title="">current outlinee</var> is not null, and the
      <var title="">current section</var> has no heading, create an
      implied heading and let that be the heading for the <var title="">current section</var>.</p>

      <p>If <var title="">current outlinee</var> is not null, push
      <var title="">current outlinee</var> onto the stack.</p>

      <p>Let <var title="">current outlinee</var> be the element
      that is being entered.</p>

      <p>Let <var title="">current section</var> be a newly created
      <a href=#concept-section title=concept-section>section</a> for the <var title="">current outlinee</var> element.</p>

      <p>Let there be a new <a href=#outline>outline</a> for the new <var title="">current outlinee</var>, initialized with just the new
      <var title="">current section</var> as the only <a href=#concept-section title=concept-section>section</a> in the outline.</p>

     </dd>


     <dt>When exiting a <a href=#sectioning-content>sectioning content</a> element, if
     the stack is not empty</dt>

     <dd>

      <p>Pop the top element from the stack, and let the <var title="">current outlinee</var> be that element.</p>

      <p>Let <var title="">current section</var> be the last section
      in the <a href=#outline>outline</a> of the <var title="">current
      outlinee</var> element.</p>

      <p>Append the <a href=#outline>outline</a> of the <a href=#sectioning-content>sectioning
      content</a> element being exited to the <var title="">current
      section</var>. (This does not change which section is the last
      section in the <a href=#outline>outline</a>.)</p>

     </dd>


     <dt>When exiting a <a href=#sectioning-root>sectioning root</a> element, if the
     stack is not empty</dt>

     <dd>

      <p>Run these steps:</p>

      <ol><li><p>Pop the top element from the stack, and let the <var title="">current outlinee</var> be that element.</li>

       <li><p>Let <var title="">current section</var> be the last
       section in the <a href=#outline>outline</a> of the <var title="">current
       outlinee</var> element.</li>

       <li><p><i>Finding the deepest child</i>: If <var title="">current section</var> has no child sections, stop
       these steps.</li>

       <li><p>Let <var title="">current section</var> be the last
       child <a href=#concept-section title=concept-section>section</a> of the
       current <var title="">current section</var>.</li>

       <li><p>Go back to the substep labeled <i>finding the deepest
       child</i>.</li>

      </ol></dd>


     <dt>When exiting a <a href=#sectioning-content>sectioning content</a> element or a
     <a href=#sectioning-root>sectioning root</a> element</dt>

     <dd>

      <p class=note>The <var title="">current outlinee</var> is
      the element being exited.</p>

      <p>Let <var title="">current section</var> be the first <a href=#concept-section title=concept-section>section</a> in the
      <a href=#outline>outline</a> of the <var title="">current outlinee</var>
      element.</p>

      <p>Skip to the next step in the overall set of steps. (The walk
      is over.)</p>

     </dd>


     <dt>If the <var title="">current outlinee</var> is null</dt>

     <dd><p>Do nothing.</dd>


     <dt>When entering a <a href=#heading-content>heading content</a> element</dt>

     <dd>

      <p>If the <var title="">current section</var> has no heading,
      let the element being entered be the heading for the <var title="">current section</var>.</p>

      <p>Otherwise, if the element being entered has a
      <a href=#rank>rank</a> equal to or greater than the heading of the
      last section of the <a href=#outline>outline</a> of the <var title="">current outlinee</var>, then create a new <a href=#concept-section title=concept-section>section</a> and append it to the
      <a href=#outline>outline</a> of the <var title="">current outlinee</var>
      element, so that this new section is the new last section of
      that outline. Let <var title="">current section</var> be that
      new section. Let the element being entered be the new heading
      for the <var title="">current section</var>.</p>

      <p>Otherwise, run these substeps:</p>

      <ol><li><p>Let <var title="">candidate section</var> be <var title="">current section</var>.</li>

       <li><p>If the element being entered has a <a href=#rank>rank</a>
       lower than the <a href=#rank>rank</a> of the heading of the <var title="">candidate section</var>, then create a new <a href=#concept-section title=concept-section>section</a>, and append it to <var title="">candidate section</var>. (This does not change which
       section is the last section in the outline.) Let <var title="">current section</var> be this new section. Let the
       element being entered be the new heading for the <var title="">current section</var>. Abort these substeps.</p>

       <li><p>Let <var title="">new candidate section</var> be the
       <a href=#concept-section title=concept-section>section</a> that contains <var title="">candidate section</var> in the <a href=#outline>outline</a> of
       <var title="">current outlinee</var>.</li>

       <li><p>Let <var title="">candidate section</var> be <var title="">new candidate section</var>.</li>

       <li><p>Return to step 2.</li>

      </ol><p>Push the element being entered onto the stack. (This causes
      the algorithm to skip any descendants of the element.)</p>

      <p class=note>Recall that <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> has the
      <em>highest</em> rank, and <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> has the lowest
      rank.</p>

     </dd>


     <dt>Otherwise</dt>

     <dd><p>Do nothing.</dd>

    </dl><p id=associatedSection>In addition, whenever you exit a node,
    after doing the steps above, if <var title="">current
    section</var> is not null, associate the node with the <a href=#concept-section title=concept-section>section</a> <var title="">current
    section</var>.</p>

   </li>

   <li><p>If the <var title="">current outlinee</var> is null,
   then there was no <a href=#sectioning-content>sectioning content</a> element or
   <a href=#sectioning-root>sectioning root</a> element in the DOM. There is no
   <a href=#outline>outline</a>. Abort these steps.</li>

   <li><p>Associate any nodes that were not associated with a <a href=#concept-section title=concept-section>section</a> in the steps above with <var title="">current outlinee</var> as their section.</li>

   <li><p>Associate all nodes with the heading of the <a href=#concept-section title=concept-section>section</a> with which they are
   associated, if any.</li>

   <li><p>If <var title="">current outlinee</var> is <a href=#the-body-element>the body
   element</a>, then the outline created for that element is the
   <a href=#outline>outline</a> of the entire document.</li>

  </ol><p>The tree of sections created by the algorithm above, or a proper
  subset thereof, must be used when generating document outlines, for
  example when generating tables of contents.</p>

  <p>When creating an interactive table of contents, entries should
  jump the user to the relevant <a href=#sectioning-content>sectioning content</a>
  element, if the <a href=#concept-section title=concept-section>section</a> was
  created for a real element in the original document, or to the
  relevant <a href=#heading-content>heading content</a> element, if the <a href=#concept-section title=concept-section>section</a> in the tree was generated for
  a heading in the above process.</p>

  <p class=note>Selecting the first <a href=#concept-section title=concept-section>section</a> of the document therefore
  always takes the user to the top of the document, regardless of
  where the first heading in the <code><a href=#the-body-element-0>body</a></code> is to be found.</p>

  <p>The <dfn id=outline-depth>outline depth</dfn> of a <a href=#heading-content>heading content</a>
  element associated with a <a href=#concept-section title=concept-section>section</a> <var title="">section</var>
  is the number of <a href=#concept-section title=concept-section>sections</a> that
  are ancestors of <var title="">section</var> in the
  <a href=#outline>outline</a> that <var title="">section</var> finds itself
  in when the <a href=#outline title=outline>outlines</a> of its
  <code><a href=#document>Document</a></code>'s elements are created, plus 1. The
  <a href=#outline-depth>outline depth</a> of a <a href=#heading-content>heading content</a> element
  not associated with a <a href=#concept-section title=concept-section>section</a>
  is 1.</p>

  <p>User agents should provide default headings for sections that do
  not have explicit section headings.</p>

  <div class=example>

   <p>Consider the following snippet:</p>

   <pre>&lt;body&gt;
 &lt;nav&gt;
  &lt;p&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/p&gt;
 &lt;/nav&gt;
 &lt;p&gt;Hello world.&lt;/p&gt;
 &lt;aside&gt;
  &lt;p&gt;My cat is cute.&lt;/p&gt;
 &lt;/aside&gt;
&lt;/body&gt;</pre>

   <p>Although it contains no headings, this snippet has three
   sections: a document (the <code><a href=#the-body-element-0>body</a></code>) with two subsections
   (a <code><a href=#the-nav-element>nav</a></code> and an <code><a href=#the-aside-element>aside</a></code>). A user agent could
   present the outline as follows:</p>

   <ol class=brief><li>Untitled document
     <ol><li>Navigation</li>
      <li>Sidebar</li>
     </ol></li>
   </ol><p>These default headings ("Untitled document", "Navigation",
   "Sidebar") are not specified by this specification, and might vary
   with the user's language, the page's language, the user's
   preferences, the user agent implementor's preferences, etc.</p>

  </div>

  <div class=note>

   <p>The following JavaScript function shows how the tree walk could
   be implemented. The <var title="">root</var> argument is the root
   of the tree to walk, and the <var title="">enter</var> and <var title="">exit</var> arguments are callbacks that are called with
   the nodes as they are entered and exited. <a href=#refsECMA262>[ECMA262]</a></p>

   <pre>function (root, enter, exit) {
  var node = root;
  start: while (node) {
    enter(node);
    if (node.firstChild) {
      node = node.firstChild;
      continue start;
    }
    while (node) {
      exit(node);
      if (node.nextSibling) {
        node = node.nextSibling;
        continue start;
      }
      if (node == root)
        node = null;
      else
        node = node.parentNode;
    }
  }
}</pre>

  </div>

  </div>



  <h3 id=grouping-content><span class=secno>4.5 </span>Grouping content</h3>

  <h4 id=the-p-element><span class=secno>4.5.1 </span>The <dfn><code>p</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlparagraphelement>HTMLParagraphElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-p-element>p</a></code> element <a href=#represents>represents</a> a
  <a href=#paragraph>paragraph</a>.</p>

  <div class=example>
   <p>The following examples are conforming HTML fragments:</p>
   <pre>&lt;p&gt;The little kitten gently seated himself on a piece of
carpet. Later in his life, this would be referred to as the time the
cat sat on the mat.&lt;/p&gt;</pre>
   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Personal information&lt;/legend&gt;
 &lt;p&gt;
   &lt;label&gt;Name: &lt;input name="n"&gt;&lt;/label&gt;
   &lt;label&gt;&lt;input name="anon" type="checkbox"&gt; Hide from other users&lt;/label&gt;
 &lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Address: &lt;textarea name="a"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;</pre>
   <pre>&lt;p&gt;There was once an example from Femley,&lt;br&gt;
Whose markup was of dubious quality.&lt;br&gt;
The validator complained,&lt;br&gt;
So the author was pained,&lt;br&gt;
To move the error from the markup to the rhyming.&lt;/p&gt;</pre>
  </div>

  <p>The <code><a href=#the-p-element>p</a></code> element should not be used when a more
  specific element is more appropriate.</p>

  <div class=example>

   <p>The following example is technically correct:</p>

<pre>&lt;section&gt;
 &lt;!-- ... --&gt;
 &lt;p&gt;Last modified: 2001-04-23&lt;/p&gt;
 &lt;p&gt;Author: fred@example.com&lt;/p&gt;
&lt;/section&gt;</pre>

   <p>However, it would be better marked-up as:</p>

<pre>&lt;section&gt;
 &lt;!-- ... --&gt;
 &lt;footer&gt;Last modified: 2001-04-23&lt;/footer&gt;
 &lt;address&gt;Author: fred@example.com&lt;/address&gt;
&lt;/section&gt;</pre>

   <p>Or:</p>

<pre>&lt;section&gt;
 &lt;!-- ... --&gt;
 &lt;footer&gt;
  &lt;p&gt;Last modified: 2001-04-23&lt;/p&gt;
  &lt;address&gt;Author: fred@example.com&lt;/address&gt;
 &lt;/footer&gt;
&lt;/section&gt;</pre>

  </div>


  <h4 id=the-hr-element><span class=secno>4.5.2 </span>The <dfn><code>hr</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlhrelement>HTMLHRElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-hr-element>hr</a></code> element <a href=#represents>represents</a> a
  <a href=#paragraph>paragraph</a>-level thematic break, e.g. a scene change in
  a story, or a transition to another topic within a section of a
  reference book.</p>

  <div class=example>

   <p>The following fictional extract from a project manual shows two
   sections that use the <code><a href=#the-hr-element>hr</a></code> element to separate topics
   within the section.</p>

   <pre>&lt;section&gt;
 &lt;h1&gt;Communication&lt;/h1&gt;
 &lt;p&gt;There are various methods of communication. This section
 covers a few of the important ones used by the project.&lt;/p&gt;
 <strong>&lt;hr&gt;</strong>
 &lt;p&gt;Communication stones seem to come in pairs and have mysterious
 properties:&lt;/p&gt;
 &lt;ul&gt;
  &lt;li&gt;They can transfer thoughts in two directions once activated
  if used alone.&lt;/li&gt;
  &lt;li&gt;If used with another device, they can transfer one's
  consciousness to another body.&lt;/li&gt;
  &lt;li&gt;If both stones are used with another device, the
  consciousnesses switch bodies.&lt;/li&gt;
 &lt;/ul&gt;
 <strong>&lt;hr&gt;</strong>
 &lt;p&gt;Radios use the electromagnetic spectrum in the meter range and
 longer.&lt;/p&gt;
 <strong>&lt;hr&gt;</strong>
 &lt;p&gt;Signal flares use the electromagnetic spectrum in the
 nanometer range.&lt;/p&gt;
&lt;/section&gt;
&lt;section&gt;
 &lt;h1&gt;Food&lt;/h1&gt;
 &lt;p&gt;All food at the project is rationed:&lt;/p&gt;
 &lt;dl&gt;
  &lt;dt&gt;Potatoes&lt;/dt&gt;
  &lt;dd&gt;Two per day&lt;/dd&gt;
  &lt;dt&gt;Soup&lt;/dt&gt;
  &lt;dd&gt;One bowl per day&lt;/dd&gt;
 &lt;/dl&gt;
 <strong>&lt;hr&gt;</strong>
 &lt;p&gt;Cooking is done by the chefs on a set rotation.&lt;/p&gt;
&lt;/section&gt;</pre>

   <p>There is no need for an <code><a href=#the-hr-element>hr</a></code> element between the
   sections themselves, since the <code><a href=#the-section-element>section</a></code> elements and
   the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements imply thematic changes themselves.</p>

  </div>

  <div class=example>

   <p>The following extract from <cite>Pandora's Star</cite> by Peter
   F. Hamilton shows two paragraphs that precede a scene change and
   the paragraph that follows it. The scene change, represented in the
   printed book by a gap containing a solitary centered star between
   the second and third paragraphs, is here represented using the
   <code><a href=#the-hr-element>hr</a></code> element.</p>

   <!-- ISBN 1-4050-0020-1; bottom of page 14 -->

   <pre lang=en-GB>&lt;p&gt;Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwearth could be
appallingly backward at times, not to mention cruel.&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Maybe it won't be that bad&lt;/i&gt;, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.&lt;/p&gt;
<strong>&lt;hr&gt;</strong>
&lt;p&gt;The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.&lt;/p&gt;</pre>

  </div>

  <p class=note>The <code><a href=#the-hr-element>hr</a></code> element does not affect the
  document's <a href=#outline>outline</a>.</p>


  <h4 id=the-pre-element><span class=secno>4.5.3 </span>The <dfn><code>pre</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlpreelement>HTMLPreElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-pre-element>pre</a></code> element <a href=#represents>represents</a> a block of
  preformatted text, in which structure is represented by typographic
  conventions rather than by elements.</p>

  <p class=note>In <a href=#syntax>the HTML syntax</a>, a leading
  newline character immediately following the <code><a href=#the-pre-element>pre</a></code> element
  start tag is stripped.</p>

  <p>Some examples of cases where the <code><a href=#the-pre-element>pre</a></code> element could
  be used:</p>

  <ul><li>Including an e-mail, with paragraphs indicated by blank lines,
   lists indicated by lines prefixed with a bullet, and so on.</li>

   <li>Including fragments of computer code, with structure indicated
   according to the conventions of that language.</li>

   <li>Displaying ASCII art.</li>

  </ul><p class=note>Authors are encouraged to consider how preformatted
  text will be experienced when the formatting is lost, as will be the
  case for users of speech synthesizers, braille displays, and the
  like. For cases like ASCII art, it is likely that an alternative
  presentation, such as a textual description, would be more
  universally accessible to the readers of the document.</p>

  <p>To represent a block of computer code, the <code><a href=#the-pre-element>pre</a></code>
  element can be used with a <code><a href=#the-code-element>code</a></code> element; to represent a
  block of computer output the <code><a href=#the-pre-element>pre</a></code> element can be used
  with a <code><a href=#the-samp-element>samp</a></code> element. Similarly, the <code><a href=#the-kbd-element>kbd</a></code>
  element can be used within a <code><a href=#the-pre-element>pre</a></code> element to indicate
  text that the user is to enter.</p>

  <div class=example>

   <p>In the following snippet, a sample of computer code is
   presented.</p>

   <pre>&lt;p&gt;This is the &lt;code&gt;Panel&lt;/code&gt; constructor:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}&lt;/code&gt;&lt;/pre&gt;</pre>

  </div>

  <div class=example>

   <p>In the following snippet, <code><a href=#the-samp-element>samp</a></code> and <code><a href=#the-kbd-element>kbd</a></code>
   elements are mixed in the contents of a <code><a href=#the-pre-element>pre</a></code> element to
   show a session of Zork I.</p>

   <pre>&lt;pre&gt;&lt;samp&gt;You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

&gt;&lt;/samp&gt; &lt;kbd&gt;open mailbox&lt;/kbd&gt;

&lt;samp&gt;Opening the mailbox reveals:
A leaflet.

&gt;&lt;/samp&gt;&lt;/pre&gt;</pre>

  </div>

  <div class=example>

   <p>The following shows a contemporary poem that uses the
   <code><a href=#the-pre-element>pre</a></code> element to preserve its unusual formatting, which
   forms an intrinsic part of the poem itself.</p>

   <pre>&lt;pre&gt;                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07&lt;/pre&gt;</pre>

  </div>



  <h4 id=the-blockquote-element><span class=secno>4.5.4 </span>The <dfn><code>blockquote</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-blockquote-cite><a href=#attr-blockquote-cite>cite</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlquoteelement>HTMLQuoteElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-quote-cite title=dom-quote-cite>cite</a>;
};</pre>
    <p class=note>The <code><a href=#htmlquoteelement>HTMLQuoteElement</a></code> interface is
    also used by the <code><a href=#the-q-element>q</a></code> element.</p>
   </dd>
  </dl><p>The <code><a href=#the-blockquote-element>blockquote</a></code> element <a href=#represents>represents</a> a
  section that is quoted from another source.</p>

  <p>Content inside a <code><a href=#the-blockquote-element>blockquote</a></code> must be quoted from
  another source, whose address, if it has one, may be cited in the
  <dfn id=attr-blockquote-cite title=attr-blockquote-cite><code>cite</code></dfn>
  attribute.</p>

  <p>If the <code title=attr-blockquote-cite><a href=#attr-blockquote-cite>cite</a></code> attribute
  is present, it must be a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
  spaces</a>. <span class=impl>To obtain the corresponding
  citation link, the value of the attribute must be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element. User
  agents should allow users to follow such citation links.</span></p>

  <div class=impl>

  <p>The <dfn id=dom-quote-cite title=dom-quote-cite><code>cite</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the element's <code title="">cite</code> content attribute.</p>

  </div>

  <div class=example>

   <p>This next example shows the use of <code><a href=#the-cite-element>cite</a></code> alongside
   <code><a href=#the-blockquote-element>blockquote</a></code>:</p>

   <pre>&lt;p&gt;His next piece was the aptly named &lt;cite&gt;Sonnet 130&lt;/cite&gt;:&lt;/p&gt;
&lt;blockquote cite="http://quotes.example.org/s/sonnet130.html"&gt;
  &lt;p&gt;My mistress' eyes are nothing like the sun,&lt;br&gt;
  Coral is far more red, than her lips red,&lt;br&gt;
  ...</pre>

  </div>

  <div class=example>

   <p>This example shows how a forum post could use
   <code><a href=#the-blockquote-element>blockquote</a></code> to show what post a user is replying
   to. The <code><a href=#the-article-element>article</a></code> element is used for each post, to mark
   up the threading.</p>

   <pre>&lt;article&gt;
 &lt;h1&gt;&lt;a href="http://bacon.example.com/?blog=109431"&gt;Bacon on a crowbar&lt;/a&gt;&lt;/h1&gt;
 &lt;article&gt;
  &lt;header&gt;&lt;strong&gt;t3yw&lt;/strong&gt; 12 points 1 hour ago&lt;/header&gt;
  &lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;
  &lt;footer&gt;&lt;a href="?pid=29578"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
  &lt;article&gt;
   &lt;header&gt;&lt;strong&gt;greg&lt;/strong&gt; 8 points 1 hour ago&lt;/header&gt;
   &lt;blockquote&gt;&lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;&lt;/blockquote&gt;
   &lt;p&gt;Dude narwhals don't eat bacon.&lt;/p&gt;
   &lt;footer&gt;&lt;a href="?pid=29579"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
   &lt;article&gt;
    &lt;header&gt;&lt;strong&gt;t3yw&lt;/strong&gt; 15 points 1 hour ago&lt;/header&gt;
    &lt;blockquote&gt;
     &lt;blockquote&gt;&lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;&lt;/blockquote&gt;
     &lt;p&gt;Dude narwhals don't eat bacon.&lt;/p&gt;
    &lt;/blockquote&gt;
    &lt;p&gt;Next thing you'll be saying they don't get capes and wizard
    hats either!&lt;/p&gt;
    &lt;footer&gt;&lt;a href="?pid=29580"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
    &lt;article&gt;
     &lt;article&gt;
      &lt;header&gt;&lt;strong&gt;boing&lt;/strong&gt; -5 points 1 hour ago&lt;/header&gt;
      &lt;p&gt;narwhals are worse than ceiling cat&lt;/p&gt;
      &lt;footer&gt;&lt;a href="?pid=29581"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
     &lt;/article&gt;
    &lt;/article&gt;
   &lt;/article&gt;
  &lt;/article&gt;
  &lt;article&gt;
   &lt;header&gt;&lt;strong&gt;fred&lt;/strong&gt; 1 points 23 minutes ago&lt;/header&gt;
   &lt;blockquote&gt;&lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;&lt;/blockquote&gt;
   &lt;p&gt;I bet they'd love to peel a banana too.&lt;/p&gt;
   &lt;footer&gt;&lt;a href="?pid=29582"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
  &lt;/article&gt;
 &lt;/article&gt;
&lt;/article&gt;</pre>

  </div>

  <p class=note><a href=#conversations>Examples of how to
  represent a conversation</a> are shown in a later section; it is not
  appropriate to use the <code><a href=#the-cite-element>cite</a></code> and <code><a href=#the-blockquote-element>blockquote</a></code>
  elements for this purpose.</p>



  <h4 id=the-ol-element><span class=secno>4.5.5 </span>The <dfn><code>ol</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href=#the-li-element>li</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code></dd>
   <dd><code title=attr-ol-start><a href=#attr-ol-start>start</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlolistelement>HTMLOListElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-ol-reversed title=dom-ol-reversed>reversed</a>;
           attribute long <a href=#dom-ol-start title=dom-ol-start>start</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-ol-element>ol</a></code> element <a href=#represents>represents</a> a list of
  items, where the items have been intentionally ordered, such that
  changing the order would change the meaning of the document.</p>

  <p>The items of the list are the <code><a href=#the-li-element>li</a></code> element child nodes
  of the <code><a href=#the-ol-element>ol</a></code> element, in <a href=#tree-order>tree order</a>.</p>

  <p>The <dfn id=attr-ol-reversed title=attr-ol-reversed><code>reversed</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
  indicates that the list is a descending list (..., 3, 2, 1). If the
  attribute is omitted, the list is an ascending list (1, 2, 3,
  ...).</p>

  <p>The <dfn id=attr-ol-start title=attr-ol-start><code>start</code></dfn>
  attribute, if present, must be a <a href=#valid-integer>valid integer</a> giving
  the ordinal value of the first list item.</p>

  <div class=impl>

  <p>If the <code title=attr-ol-start><a href=#attr-ol-start>start</a></code> attribute is
  present, user agents must <a href=#rules-for-parsing-integers title="rules for parsing
  integers">parse it as an integer</a>, in order to determine the
  attribute's value. The default value, used if the attribute is
  missing or if the value cannot be converted to a number according to
  the referenced algorithm, is 1 if the element has no <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> attribute, and is the
  number of child <code><a href=#the-li-element>li</a></code> elements otherwise.</p>

  <p>The first item in the list has the ordinal value given by the
  <code><a href=#the-ol-element>ol</a></code> element's <code title=attr-ol-start><a href=#attr-ol-start>start</a></code>
  attribute, unless that <code><a href=#the-li-element>li</a></code> element has a <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute with a value that can
  be successfully parsed, in which case it has the ordinal value given
  by that <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute.</p>

  <p>Each subsequent item in the list has the ordinal value given by
  its <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute, if it has
  one, or, if it doesn't, the ordinal value of the previous item, plus
  one if the <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> is absent,
  or minus one if it is present.</p>

  <p>The <dfn id=dom-ol-reversed title=dom-ol-reversed><code>reversed</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the value of the <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> content attribute.</p>

  <p>The <dfn id=dom-ol-start title=dom-ol-start><code>start</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the value of the <code title=attr-ol-start><a href=#attr-ol-start>start</a></code> content attribute.</p>

  </div>

  <!-- v2: resuming numbering of lists from previous lists? -->

  <div class=example>

   <p>The following markup shows a list where the order matters, and
   where the <code><a href=#the-ol-element>ol</a></code> element is therefore appropriate. Compare
   this list to the equivalent list in the <code><a href=#the-ul-element>ul</a></code> section to
   see an example of the same items using the <code><a href=#the-ul-element>ul</a></code>
   element.</p>

   <pre>&lt;p&gt;I have lived in the following countries (given in the order of when
I first lived there):&lt;/p&gt;
&lt;ol&gt;
 &lt;li&gt;Switzerland
 &lt;li&gt;United Kingdom
 &lt;li&gt;United States
 &lt;li&gt;Norway
&lt;/ol&gt;</pre>

   <p>Note how changing the order of the list changes the meaning of
   the document. In the following example, changing the relative order
   of the first two items has changed the birthplace of the
   author:</p>

   <pre>&lt;p&gt;I have lived in the following countries (given in the order of when
I first lived there):&lt;/p&gt;
&lt;ol&gt;
 &lt;li&gt;United Kingdom
 &lt;li&gt;Switzerland
 &lt;li&gt;United States
 &lt;li&gt;Norway
&lt;/ol&gt;</pre>

  </div>


  <h4 id=the-ul-element><span class=secno>4.5.6 </span>The <dfn><code>ul</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href=#the-li-element>li</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlulistelement>HTMLUListElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-ul-element>ul</a></code> element <a href=#represents>represents</a> a list of
  items, where the order of the items is not important &mdash; that
  is, where changing the order would not materially change the meaning
  of the document.</p>

  <p>The items of the list are the <code><a href=#the-li-element>li</a></code> element child nodes
  of the <code><a href=#the-ul-element>ul</a></code> element.</p>

  <div class=example>

   <p>The following markup shows a list where the order does not
   matter, and where the <code><a href=#the-ul-element>ul</a></code> element is therefore
   appropriate. Compare this list to the equivalent list in the
   <code><a href=#the-ol-element>ol</a></code> section to see an example of the same items using
   the <code><a href=#the-ol-element>ol</a></code> element.</p>

   <pre>&lt;p&gt;I have lived in the following countries:&lt;/p&gt;
&lt;ul&gt;
 &lt;li&gt;Norway
 &lt;li&gt;Switzerland
 &lt;li&gt;United Kingdom
 &lt;li&gt;United States
&lt;/ul&gt;</pre>

   <p>Note that changing the order of the list does not change the
   meaning of the document. The items in the snippet above are given
   in alphabetical order, but in the snippet below they are given in
   order of the size of their current account balance in 2007, without
   changing the meaning of the document whatsoever:</p>

   <pre>&lt;p&gt;I have lived in the following countries:&lt;/p&gt;
&lt;ul&gt;
 &lt;li&gt;Switzerland
 &lt;li&gt;Norway
 &lt;li&gt;United Kingdom
 &lt;li&gt;United States
&lt;/ul&gt;</pre>

  </div>


  <h4 id=the-li-element><span class=secno>4.5.7 </span>The <dfn><code>li</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Inside <code><a href=#the-ol-element>ol</a></code> elements.</dd>
   <dd>Inside <code><a href=#the-ul-element>ul</a></code> elements.</dd>
   <dd>Inside <code><a href=#menus>menu</a></code> elements.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd>If the element is a child of an <code><a href=#the-ol-element>ol</a></code> element: <code title=attr-li-value><a href=#attr-li-value>value</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmllielement>HTMLLIElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute long <a href=#dom-li-value title=dom-li-value>value</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-li-element>li</a></code> element <a href=#represents>represents</a> a list
  item. If its parent element is an <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-ul-element>ul</a></code>,
  or <code><a href=#menus>menu</a></code> element, then the element is an item of the
  parent element's list, as defined for those elements. Otherwise, the
  list item has no defined list-related relationship to any other
  <code><a href=#the-li-element>li</a></code> element.</p>

  <p>The <dfn id=attr-li-value title=attr-li-value><code>value</code></dfn>
  attribute, if present, must be a <a href=#valid-integer>valid integer</a> giving
  the ordinal value of the list item.</p>

  <div class=impl>

  <p>If the <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute is
  present, user agents must <a href=#rules-for-parsing-integers title="rules for parsing
  integers">parse it as an integer</a>, in order to determine the
  attribute's value. If the attribute's value cannot be converted to a
  number, the attribute must be treated as if it was absent. The
  attribute has no default value.</p>

  <p>The <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute is
  processed relative to the element's parent <code><a href=#the-ol-element>ol</a></code> element
  (q.v.), if there is one. If there is not, the attribute has no
  effect.</p>

  <p>The <dfn id=dom-li-value title=dom-li-value><code>value</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the value of the <code title=dom-li-value><a href=#dom-li-value>value</a></code> content attribute.</p>

  </div>

  <div class=example>
   <p>The following example, the top ten movies are listed (in reverse
   order). Note the way the list is given a title by using a
   <code><a href=#the-figure-element>figure</a></code> element and its <code><a href=#the-figcaption-element>figcaption</a></code>
   element.</p>
   <pre>&lt;figure&gt;
 &lt;figcaption&gt;The top 10 movies of all time&lt;/figcaption&gt;
 &lt;ol&gt;
  &lt;li value="10"&gt;&lt;cite&gt;Josie and the Pussycats&lt;/cite&gt;, 2001&lt;/li&gt;
  &lt;li value="9"&gt;&lt;cite lang="sh"&gt;&#1062;&#1088;&#1085;&#1072; &#1084;&#1072;&#1095;&#1082;&#1072;, &#1073;&#1077;&#1083;&#1080; &#1084;&#1072;&#1095;&#1086;&#1088;&lt;/cite&gt;, 1998&lt;/li&gt;
  &lt;li value="8"&gt;&lt;cite&gt;A Bug's Life&lt;/cite&gt;, 1998&lt;/li&gt;
  &lt;li value="7"&gt;&lt;cite&gt;Toy Story&lt;/cite&gt;, 1995&lt;/li&gt;
  &lt;li value="6"&gt;&lt;cite&gt;Monsters, Inc&lt;/cite&gt;, 2001&lt;/li&gt;
  &lt;li value="5"&gt;&lt;cite&gt;Cars&lt;/cite&gt;, 2006&lt;/li&gt;
  &lt;li value="4"&gt;&lt;cite&gt;Toy Story 2&lt;/cite&gt;, 1999&lt;/li&gt;
  &lt;li value="3"&gt;&lt;cite&gt;Finding Nemo&lt;/cite&gt;, 2003&lt;/li&gt;
  &lt;li value="2"&gt;&lt;cite&gt;The Incredibles&lt;/cite&gt;, 2004&lt;/li&gt;
  &lt;li value="1"&gt;&lt;cite&gt;Ratatouille&lt;/cite&gt;, 2007&lt;/li&gt;
 &lt;/ol&gt;
&lt;/figure&gt;</pre>

   <p>The markup could also be written as follows, using the <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> attribute on the
   <code><a href=#the-ol-element>ol</a></code> element:</p>

   <pre>&lt;figure&gt;
 &lt;figcaption&gt;The top 10 movies of all time&lt;/figcaption&gt;
 &lt;ol reversed&gt;
  &lt;li&gt;&lt;cite&gt;Josie and the Pussycats&lt;/cite&gt;, 2001&lt;/li&gt;
  &lt;li&gt;&lt;cite lang="sh"&gt;&#1062;&#1088;&#1085;&#1072; &#1084;&#1072;&#1095;&#1082;&#1072;, &#1073;&#1077;&#1083;&#1080; &#1084;&#1072;&#1095;&#1086;&#1088;&lt;/cite&gt;, 1998&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;A Bug's Life&lt;/cite&gt;, 1998&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Toy Story&lt;/cite&gt;, 1995&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Monsters, Inc&lt;/cite&gt;, 2001&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Cars&lt;/cite&gt;, 2006&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Toy Story 2&lt;/cite&gt;, 1999&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Finding Nemo&lt;/cite&gt;, 2003&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;The Incredibles&lt;/cite&gt;, 2004&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Ratatouille&lt;/cite&gt;, 2007&lt;/li&gt;
 &lt;/ol&gt;
&lt;/figure&gt;</pre>
  </div>

  <p class=note>If the <code><a href=#the-li-element>li</a></code> element is the child of a
  <code><a href=#menus>menu</a></code> element and itself has a child that defines a
  <a href=#concept-command title=concept-command>command</a>, then the
  <code><a href=#the-li-element>li</a></code> element will match the <code title=selector-enabled><a href=#selector-enabled>:enabled</a></code> and <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-classes in the
  same way as the first such child element does.</p>



  <h4 id=the-dl-element><span class=secno>4.5.8 </span>The <dfn><code>dl</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more groups each consisting of one or more
   <code><a href=#the-dt-element>dt</a></code> elements followed by one or more <code><a href=#the-dd-element>dd</a></code>
   elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmldlistelement>HTMLDListElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-dl-element>dl</a></code> element <a href=#represents>represents</a> an
  association list consisting of zero or more name-value groups (a
  description list). Each group must consist of one or more names
  (<code><a href=#the-dt-element>dt</a></code> elements) followed by one or more values
  (<code><a href=#the-dd-element>dd</a></code> elements). Within a single <code><a href=#the-dl-element>dl</a></code> element,
  there should not be more than one <code><a href=#the-dt-element>dt</a></code> element for each
  name.</p>

  <p>Name-value groups may be terms and definitions, metadata topics
  and values, or any other groups of name-value data.</p>

  <p>The values within a group are alternatives; multiple paragraphs
  forming part of the same value must all be given within the same
  <code><a href=#the-dd-element>dd</a></code> element.</p>

  <p>The order of the list of groups, and of the names and values
  within each group, may be significant.</p>

  <div class=impl>

  <p>If a <code><a href=#the-dl-element>dl</a></code> element is empty, it contains no groups.</p>

  <p>If a <code><a href=#the-dl-element>dl</a></code> element contains non-<a href=#inter-element-whitespace title="inter-element whitespace">whitespace</a> <a href=#text-node title="text
  node">text nodes</a>, or elements other than <code><a href=#the-dt-element>dt</a></code> and
  <code><a href=#the-dd-element>dd</a></code>, then those elements or <a href=#text-node title="text node">text
  nodes</a> do not form part of any groups in that
  <code><a href=#the-dl-element>dl</a></code>.</p>

  <p>If a <code><a href=#the-dl-element>dl</a></code> element contains only <code><a href=#the-dt-element>dt</a></code>
  elements, then it consists of one group with names but no
  values.</p>

  <p>If a <code><a href=#the-dl-element>dl</a></code> element contains only <code><a href=#the-dd-element>dd</a></code>
  elements, then it consists of one group with values but no
  names.</p>

  <p>If a <code><a href=#the-dl-element>dl</a></code> element starts with one or more
  <code><a href=#the-dd-element>dd</a></code> elements, then the first group has no associated
  name.</p>

  <p>If a <code><a href=#the-dl-element>dl</a></code> element ends with one or more
  <code><a href=#the-dt-element>dt</a></code> elements, then the last group has no associated
  value.</p>

  <p class=note>When a <code><a href=#the-dl-element>dl</a></code> element doesn't match its
  content model, it is often due to accidentally using <code><a href=#the-dd-element>dd</a></code>
  elements in the place of <code><a href=#the-dt-element>dt</a></code> elements and vice
  versa. Conformance checkers can spot such mistakes and might be able
  to advise authors how to correctly use the markup.</p>

  </div>

  <div class=example>
   <p>In the following example, one entry ("Authors") is linked to two
   values ("John" and "Luke").</p>
   <pre>&lt;dl&gt;
 &lt;dt&gt; Authors
 &lt;dd&gt; John
 &lt;dd&gt; Luke
 &lt;dt&gt; Editor
 &lt;dd&gt; Frank
&lt;/dl&gt;</pre>
  </div>

  <div class=example>
   <p>In the following example, one definition is linked to two
   terms.</p>
   <pre>&lt;dl&gt;
 &lt;dt lang="en-US"&gt; &lt;dfn&gt;color&lt;/dfn&gt; &lt;/dt&gt;
 &lt;dt lang="en-GB"&gt; &lt;dfn&gt;colour&lt;/dfn&gt; &lt;/dt&gt;
 &lt;dd&gt; A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. &lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>

  <div class=example>
   <p>The following example illustrates the use of the <code><a href=#the-dl-element>dl</a></code>
   element to mark up metadata of sorts. At the end of the example,
   one group has two metadata labels ("Authors" and "Editors") and two
   values ("Robert Rothman" and "Daniel Jackson").</p>
   <pre>&lt;dl&gt;
 &lt;dt&gt; Last modified time &lt;/dt&gt;
 &lt;dd&gt; 2004-12-23T23:33Z &lt;/dd&gt;
 &lt;dt&gt; Recommended update interval &lt;/dt&gt;
 &lt;dd&gt; 60s &lt;/dd&gt;
 &lt;dt&gt; Authors &lt;/dt&gt;
 &lt;dt&gt; Editors &lt;/dt&gt;
 &lt;dd&gt; Robert Rothman &lt;/dd&gt;
 &lt;dd&gt; Daniel Jackson &lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>

  <div class=example>

   <p>The following example shows the <code><a href=#the-dl-element>dl</a></code> element used to
   give a set of instructions. The order of the instructions here is
   important (in the other examples, the order of the blocks was not
   important).</p>

   <pre>&lt;p&gt;Determine the victory points as follows (use the
first matching case):&lt;/p&gt;
&lt;dl&gt;
 &lt;dt&gt; If you have exactly five gold coins &lt;/dt&gt;
 &lt;dd&gt; You get five victory points &lt;/dd&gt;
 &lt;dt&gt; If you have one or more gold coins, and you have one or more silver coins &lt;/dt&gt;
 &lt;dd&gt; You get two victory points &lt;/dd&gt;
 &lt;dt&gt; If you have one or more silver coins &lt;/dt&gt;
 &lt;dd&gt; You get one victory point &lt;/dd&gt;
 &lt;dt&gt; Otherwise &lt;/dt&gt;
 &lt;dd&gt; You get no victory points &lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>

  <div class=example>
   <p>The following snippet shows a <code><a href=#the-dl-element>dl</a></code> element being used
   as a glossary. Note the use of <code><a href=#the-dfn-element>dfn</a></code> to indicate the
   word being defined.</p>
   <pre>&lt;dl&gt;
 &lt;dt&gt;&lt;dfn&gt;Apartment&lt;/dfn&gt;, n.&lt;/dt&gt;
 &lt;dd&gt;An execution context grouping one or more threads with one or
 more COM objects.&lt;/dd&gt;
 &lt;dt&gt;&lt;dfn&gt;Flat&lt;/dfn&gt;, n.&lt;/dt&gt;
 &lt;dd&gt;A deflated tire.&lt;/dd&gt;
 &lt;dt&gt;&lt;dfn&gt;Home&lt;/dfn&gt;, n.&lt;/dt&gt;
 &lt;dd&gt;The user's login directory.&lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>

  <p class=note>The <code><a href=#the-dl-element>dl</a></code> element is inappropriate for
  marking up dialogue. <a href=#conversations>Examples of how to
  mark up dialogue</a> are shown below.</p>



  <h4 id=the-dt-element><span class=secno>4.5.9 </span>The <dfn><code>dt</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Before <code><a href=#the-dd-element>dd</a></code> or <code><a href=#the-dt-element>dt</a></code> elements inside <code><a href=#the-dl-element>dl</a></code> elements.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-dt-element>dt</a></code> element <a href=#represents>represents</a> the term, or
  name, part of a term-description group in a description list
  (<code><a href=#the-dl-element>dl</a></code> element).</p>

  <p class=note>The <code><a href=#the-dt-element>dt</a></code> element itself, when used in a
  <code><a href=#the-dl-element>dl</a></code> element, does not indicate that its contents are a
  term being defined, but this can be indicated using the
  <code><a href=#the-dfn-element>dfn</a></code> element.</p>

  <div class=example>

   <p>This example shows a list of frequently asked questions (a FAQ)
   marked up using the <code><a href=#the-dt-element>dt</a></code> element for questions and the
   <code><a href=#the-dd-element>dd</a></code> element for answers.</p>

   <pre>&lt;article&gt;
 &lt;h1&gt;FAQ&lt;/h1&gt;
 &lt;dl&gt;
  &lt;dt&gt;What do we want?&lt;/dt&gt;
  &lt;dd&gt;Our data.&lt;/dd&gt;
  &lt;dt&gt;When do we want it?&lt;/dt&gt;
  &lt;dd&gt;Now.&lt;/dd&gt;
  &lt;dt&gt;Where is it?&lt;/dt&gt;
  &lt;dd&gt;We are not sure.&lt;/dd&gt;
 &lt;/dl&gt;
&lt;/article&gt;</pre>

  </div>



  <h4 id=the-dd-element><span class=secno>4.5.10 </span>The <dfn><code>dd</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>After <code><a href=#the-dt-element>dt</a></code> or <code><a href=#the-dd-element>dd</a></code> elements inside <code><a href=#the-dl-element>dl</a></code> elements.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-dd-element>dd</a></code> element <a href=#represents>represents</a> the
  description, definition, or value, part of a term-description group
  in a description list (<code><a href=#the-dl-element>dl</a></code> element).</p>

  <div class=example>

   <p>A <code><a href=#the-dl-element>dl</a></code> can be used to define a vocabulary list, like
   in a dictionary. In the following example, each entry, given by a
   <code><a href=#the-dt-element>dt</a></code> with a <code><a href=#the-dfn-element>dfn</a></code>, has several
   <code><a href=#the-dd-element>dd</a></code>s, showing the various parts of the definition.</p>

   <!-- the actual pronunciations below are nonsense. -->
   <pre>&lt;dl&gt;
 &lt;dt&gt;&lt;dfn&gt;happiness&lt;/dfn&gt;&lt;/dt&gt;
 &lt;dd class="pronunciation"&gt;/'h&aelig; p. nes/&lt;/dd&gt;
 &lt;dd class="part-of-speech"&gt;&lt;i&gt;&lt;abbr&gt;n.&lt;/abbr&gt;&lt;/i&gt;&lt;/dd&gt;
 &lt;dd&gt;The state of being happy.&lt;/dd&gt;
 &lt;dd&gt;Good fortune; success. &lt;q&gt;Oh &lt;b&gt;happiness&lt;/b&gt;! It worked!&lt;/q&gt;&lt;/dd&gt;
 &lt;dt&gt;&lt;dfn&gt;rejoice&lt;/dfn&gt;&lt;/dt&gt;
 &lt;dd class="pronunciation"&gt;/ri jois'/&lt;/dd&gt;
 &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.intr.&lt;/abbr&gt;&lt;/i&gt; To be delighted oneself.&lt;/dd&gt;
 &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.tr.&lt;/abbr&gt;&lt;/i&gt; To cause one to be delighted.&lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>


  <h4 id=the-figure-element><span class=secno>4.5.11 </span>The <dfn><code>figure</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Either: One <code><a href=#the-figcaption-element>figcaption</a></code> element followed by <a href=#flow-content>flow content</a>.</dd>
   <dd>Or: <a href=#flow-content>Flow content</a> followed by one <code><a href=#the-figcaption-element>figcaption</a></code> element.</dd>
   <dd>Or: <a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><!-- v2: Add a <credit> element for photo credits --><p>The <code><a href=#the-figure-element>figure</a></code> element <a href=#represents>represents</a> some
  <a href=#flow-content>flow content</a>, optionally with a caption, that is
  self-contained and is typically referenced as a single unit from the
  main flow of the document.</p>

  <p>The element can thus be used to annotate illustrations, diagrams,
  photos, code listings, etc, that are referred to from the main
  content of the document, but that could, without affecting the flow
  of the document, be moved away from that primary content, e.g. to
  the side of the page, to dedicated pages, or to an appendix.</p>

  <p>The <span class=impl>first</span> <code><a href=#the-figcaption-element>figcaption</a></code>
  element child of the element, if any, represents the caption of the
  <code><a href=#the-figure-element>figure</a></code> element's contents. If there is no child
  <code><a href=#the-figcaption-element>figcaption</a></code> element, then there is no caption.</p>

  <div class=example>

   <p>This example shows the <code><a href=#the-figure-element>figure</a></code> element to mark up a
   code listing.</p>

   <pre>&lt;p&gt;In &lt;a href="#l4"&gt;listing 4&lt;/a&gt; we see the primary core interface
API declaration.&lt;/p&gt;
&lt;figure id="l4"&gt;
 &lt;figcaption&gt;Listing 4. The primary core interface API declaration.&lt;/figcaption&gt;
 &lt;pre&gt;&lt;code&gt;interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&amp;lt;byte&gt; data);
 void initSelfDestruct();
}&lt;/code&gt;&lt;/pre&gt;
&lt;/figure&gt;
&lt;p&gt;The API is designed to use UTF-8.&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>Here we see a <code><a href=#the-figure-element>figure</a></code> element to mark up a
   photo.</p>

   <pre>&lt;figure&gt;
 &lt;img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently."&gt;
 &lt;figcaption&gt;Bubbles at work&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

  </div>

  <div class=example>

   <p>In this example, we see an image that is <em>not</em>
   a figure, as well as an image and a video that are.</p>

   <pre>&lt;h2&gt;Malinko's comics&lt;/h2&gt;

&lt;p&gt;This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

&lt;blockquote&gt;
 &lt;img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!"&gt;
&lt;/blockquote&gt;

&lt;p&gt;...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

&lt;figure&gt;
 &lt;img src="ex-a.png" alt="Two squiggles on a dirty piece of paper."&gt;
 &lt;figcaption&gt;Exhibit A. The alleged &lt;cite&gt;rough copy&lt;/cite&gt; comic.&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;
 &lt;video src="ex-b.mov"&gt;&lt;/video&gt;
 &lt;figcaption&gt;Exhibit B. The &lt;cite&gt;Rough Copy&lt;/cite&gt; trailer.&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;The case was resolved out of court.</pre>

  </div>

  <div class=example>

   <p>Here, a part of a poem is marked up using
   <code><a href=#the-figure-element>figure</a></code>.</p>

   <pre>&lt;figure&gt;
 &lt;p&gt;'Twas brillig, and the slithy toves&lt;br&gt;
 Did gyre and gimble in the wabe;&lt;br&gt;
 All mimsy were the borogoves,&lt;br&gt;
 And the mome raths outgrabe.&lt;/p&gt;
 &lt;figcaption&gt;&lt;cite&gt;Jabberwocky&lt;/cite&gt; (first verse). Lewis Carroll, 1832-98&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

  </div>

  <div class=example>

   <p>In this example, which could be part of a much larger work
   discussing a castle, the figure has three images in it.</p>

   <pre>&lt;figure&gt;
 &lt;img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it."&gt;
 &lt;img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls."&gt;
 &lt;img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece."&gt;
 &lt;figcaption&gt;The castle through the ages: 1423, 1858, and 1999 respectively.&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

  </div>


  <h4 id=the-figcaption-element><span class=secno>4.5.12 </span>The <dfn><code>figcaption</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As the first or last child of a <code><a href=#the-figure-element>figure</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-figcaption-element>figcaption</a></code> element <a href=#represents>represents</a> a
  caption or legend for the rest of the contents of the
  <code><a href=#the-figcaption-element>figcaption</a></code> element's parent <code><a href=#the-figure-element>figure</a></code>
  element<span class=impl>, if any</span>.</p>



  <h4 id=the-div-element><span class=secno>4.5.13 </span>The <dfn><code>div</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmldivelement>HTMLDivElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-div-element>div</a></code> element has no special meaning at all. It
  <a href=#represents>represents</a> its children. It can be used with the <code title=attr-class><a href=#classes>class</a></code>, <code title=attr-lang><a href=#attr-lang>lang</a></code>, and <code title=attr-title><a href=#the-title-attribute>title</a></code> attributes to mark up semantics
  common to a group of consecutive elements.</p>

  <p class=note>Authors are strongly encouraged to view the
  <code><a href=#the-div-element>div</a></code> element as an element of last resort, for when no
  other element is suitable. Use of the <code><a href=#the-div-element>div</a></code> element
  instead of more appropriate elements leads to poor accessibility for
  readers and poor maintainability for authors.</p>

  <div class=example>

   <p>For example, a blog post would be marked up using
   <code><a href=#the-article-element>article</a></code>, a chapter using <code><a href=#the-section-element>section</a></code>, a
   page's navigation aids using <code><a href=#the-nav-element>nav</a></code>, and a group of form
   controls using <code><a href=#the-fieldset-element>fieldset</a></code>.</p>

   <p>On the other hand, <code><a href=#the-div-element>div</a></code> elements can be useful for
   stylistic purposes or to wrap multiple paragraphs within a section
   that are all to be annotated in a similar way. In the following
   example, we see <code><a href=#the-div-element>div</a></code> elements used as a way to set the
   language of two paragraphs at once, instead of setting the language
   on the two paragraph elements separately:</p>

   <pre>&lt;article lang="en-US"&gt;
 &lt;h1&gt;My use of language and my cats&lt;/h1&gt;
 &lt;p&gt;My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.&lt;/p&gt;
 &lt;div lang="en-GB"&gt;
  &lt;p&gt;My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.&lt;/p&gt;
  &lt;p&gt;Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...&lt;/p&gt;
 &lt;/div&gt;
 &lt;p&gt;I should say "sidewalk" and "apartment" and "color"!&lt;/p&gt;
&lt;/article&gt;</pre>

  </div>


  <h3 id=text-level-semantics><span class=secno>4.6 </span>Text-level semantics</h3>

  <h4 id=the-a-element><span class=secno>4.6.1 </span>The <dfn><code>a</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd>When the element only contains <a href=#phrasing-content>phrasing content</a>: <a href=#phrasing-content>phrasing content</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#transparent>Transparent</a>, but there must be no <a href=#interactive-content>interactive content</a> descendant.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dd>
   <dd><code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code></dd>
<!--PING-->
   <dd><code title=attr-hyperlink-ping><a href=#ping>ping</a></code></dd>
<!--PING-->
   <dd><code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code></dd>
   <dd><code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code></dd>
   <dd><code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code></dd>
   <dd><code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlanchorelement>HTMLAnchorElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
  stringifier attribute DOMString <a href=#dom-a-href title=dom-a-href>href</a>;
           attribute DOMString <a href=#dom-a-target title=dom-a-target>target</a>;
<!--PING-->
           attribute DOMString <a href=#dom-a-ping title=dom-a-ping>ping</a>;
<!--PING-->
           attribute DOMString <a href=#dom-a-rel title=dom-a-rel>rel</a>;
  readonly attribute <a href=#domtokenlist>DOMTokenList</a> <a href=#dom-a-rellist title=dom-a-relList>relList</a>;
           attribute DOMString <a href=#dom-a-media title=dom-a-media>media</a>;
           attribute DOMString <a href=#dom-a-hreflang title=dom-a-hreflang>hreflang</a>;
           attribute DOMString <a href=#dom-a-type title=dom-a-type>type</a>;

           attribute DOMString <a href=#dom-a-text title=dom-a-text>text</a>;

  // <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a>
           attribute DOMString <a href=#dom-a-protocol title=dom-a-protocol>protocol</a>;
           attribute DOMString <a href=#dom-a-host title=dom-a-host>host</a>;
           attribute DOMString <a href=#dom-a-hostname title=dom-a-hostname>hostname</a>;
           attribute DOMString <a href=#dom-a-port title=dom-a-port>port</a>;
           attribute DOMString <a href=#dom-a-pathname title=dom-a-pathname>pathname</a>;
           attribute DOMString <a href=#dom-a-search title=dom-a-search>search</a>;
           attribute DOMString <a href=#dom-a-hash title=dom-a-hash>hash</a>;
};</pre>
   </dd>
  </dl><p>If the <code><a href=#the-a-element>a</a></code> element has an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, then it
  <a href=#represents>represents</a> a <a href=#hyperlink>hyperlink</a> (a hypertext
  anchor).</p>

  <!-- v2: Eric Meyer requests the ability to nest links so that a big
  hyperlink, e.g. representing a calendar event, can be clickable,
  while within it there are subareas that represent links to distinct
  areas, e.g. a link to see photos of the event, or to edit the event,
  or some such. -->

  <p>If the <code><a href=#the-a-element>a</a></code> element has no <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, then the element
  <a href=#represents>represents</a> a placeholder for where a link might
  otherwise have been placed, if it had been relevant.</p>

  <p>The <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>,
<!--PING-->
  <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>,
<!--PING-->
  <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>, <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes must be omitted
  if the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute is
  not present.</p>

  <div class=example>
   <p>If a site uses a consistent navigation toolbar on every page,
   then the link that would normally link to the page itself could be
   marked up using an <code><a href=#the-a-element>a</a></code> element:</p>
   <pre>&lt;nav&gt;
 &lt;ul&gt;
  &lt;li&gt; &lt;a href="/"&gt;Home&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="/news"&gt;News&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a&gt;Examples&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="/legal"&gt;Legal&lt;/a&gt; &lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;</pre>
  </div>

  <div class=impl>

  <p>The <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>, <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>
<!--PING-->
  and <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>
<!--PING-->
  attributes affect what
  happens when users <a href=#following-hyperlinks title="following hyperlinks">follow
  hyperlinks</a> created using the <code><a href=#the-a-element>a</a></code> element.  The
  <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>, <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes may be used to
  indicate to the user the likely nature of the target resource before
  the user follows the link.</p>

  <p>The <a href=#activation-behavior>activation behavior</a> of <code><a href=#the-a-element>a</a></code> elements
  that represent <a href=#hyperlink title=hyperlink>hyperlinks</a> is to run
  the following steps:</p>

  <ol><li><p>If the <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code>
   event in question is not <a href=#concept-events-trusted title=concept-events-trusted>trusted</a> (i.e. a <code title=dom-click><a href=#dom-click>click()</a></code> method call was the reason for the
   event being dispatched), and the <code><a href=#the-a-element>a</a></code> element's <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute is such that
   applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for choosing a browsing context given a
   browsing context name</a>, using the value of the <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute as the
   browsing context name, would result in there not being a chosen
   browsing context, then raise an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code>
   exception and abort these steps.</li>

   <li><p>If the target of the <code title=event-click><a href=#event-click>click</a></code>
   event is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> attribute specified, then
   server-side image map processing must be performed, as follows:</p>

    <ol><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A...%3Ca%20href%3D%22%23%22%3E%3Cimg%20ismap%20usemap%3D%22%23a%22%20src%3D/resources/images/smallcats%3E%3C/a%3E%0A%3Cmap%20name%3Da%3E%3Carea%20shape%3Drect%20coords%3D0%2C0%2C50%2C50%20href%3Db%3E%3C/map%3E --><li>If the <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code>
     event was dispatched as the result of a real
     pointing-device-triggered <code title=event-click><a href=#event-click>click</a></code>
     event on the <code><a href=#the-img-element>img</a></code> element, then let <var title="">x</var> be the distance in CSS pixels from the left edge
     of the image's left border, if it has one, or the left edge of
     the image otherwise, to the location of the click, and let <var title="">y</var> be the distance in CSS pixels from the top edge
     of the image's top border, if it has one, or the top edge of the
     image otherwise, to the location of the click. Otherwise, let
     <var title="">x</var> and <var title="">y</var> be zero.</li>

     <li>Let the <dfn id=hyperlink-suffix><var>hyperlink suffix</var></dfn> be a U+003F
     QUESTION MARK character, the value of <var title="">x</var>
     expressed as a base-ten integer using ASCII digits, a U+002C
     COMMA character (,), and the value of <var title="">y</var>
     expressed as a base-ten integer using ASCII digits. ASCII digits
     are the characters in the range U+0030 DIGIT ZERO (0) to U+0039
     DIGIT NINE (9).</li>

    </ol></li>

   <li><p>Finally, the user agent must <a href=#following-hyperlinks title="following
   hyperlinks">follow the hyperlink</a> defined by the
   <code><a href=#the-a-element>a</a></code> element. If the steps above defined a <var><a href=#hyperlink-suffix>hyperlink
   suffix</a></var>, then take that into account when following the
   hyperlink.</li>

  </ol></div>

  <dl class=domintro><dt><var title="">a</var> . <code title=dom-a-text><a href=#dom-a-text>text</a></code></dt>

   <dd>

    <p>Same as <code><a href=#textcontent>textContent</a></code>.</p>

   </dd>

  </dl><div class=impl>

  <p>The IDL attributes <dfn id=dom-a-href title=dom-a-href><code>href</code></dfn>,
<!--PING-->
  <dfn id=dom-a-ping title=dom-a-ping><code>ping</code></dfn>,
<!--PING-->
  <dfn id=dom-a-target title=dom-a-target><code>target</code></dfn>, <dfn id=dom-a-rel title=dom-a-rel><code>rel</code></dfn>, <dfn id=dom-a-media title=dom-a-media><code>media</code></dfn>, <dfn id=dom-a-hreflang title=dom-a-hreflang><code>hreflang</code></dfn>, and <dfn id=dom-a-type title=dom-a-type><code>type</code></dfn>, must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  <p>The IDL attribute <dfn id=dom-a-rellist title=dom-a-rellist><code>relList</code></dfn> must
  <a href=#reflect>reflect</a> the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>
  content attribute.</p>

  <p>The <dfn id=dom-a-text title=dom-a-text><code>text</code></dfn> IDL
  attribute, on getting, must return the same value as the
  <code><a href=#textcontent>textContent</a></code> IDL attribute on the element, and on
  setting, must act as if the <code><a href=#textcontent>textContent</a></code> IDL attribute
  on the element had been set to the new value.</p>

  <p>The <code><a href=#the-a-element>a</a></code> element also supports the complement of
  <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a>, <dfn id=dom-a-protocol title=dom-a-protocol><code>protocol</code></dfn>, <dfn id=dom-a-host title=dom-a-host><code>host</code></dfn>, <dfn id=dom-a-port title=dom-a-port><code>port</code></dfn>, <dfn id=dom-a-hostname title=dom-a-hostname><code>hostname</code></dfn>, <dfn id=dom-a-pathname title=dom-a-pathname><code>pathname</code></dfn>, <dfn id=dom-a-search title=dom-a-search><code>search</code></dfn>, and <dfn id=dom-a-hash title=dom-a-hash><code>hash</code></dfn>. These must follow the
  rules given for URL decomposition IDL attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a> being the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute relative to the
  element, if there is such an attribute and resolving it is
  successful, or the empty string otherwise; and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
  same as setting the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute to the new output
  value.</p>

  </div>

  <div class=example>

   <p>The <code><a href=#the-a-element>a</a></code> element may be wrapped around entire
   paragraphs, lists, tables, and so forth, even entire sections, so
   long as there is no interactive content within (e.g. buttons or
   other links). This example shows how this can be used to make an
   entire advertising block into a link:</p>

   <pre>&lt;aside class="advertising"&gt;
 &lt;h1&gt;Advertising&lt;/h1&gt;
 &lt;a href="http://ad.example.com/?adid=1929&amp;amp;pubid=1422"&gt;
  &lt;section&gt;
   &lt;h1&gt;Mellblomatic 9000!&lt;/h1&gt;
   &lt;p&gt;Turn all your widgets into mellbloms!&lt;/p&gt;
   &lt;p&gt;Only $9.99 plus shipping and handling.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/a&gt;
 &lt;a href="http://ad.example.com/?adid=375&amp;amp;pubid=1422"&gt;
  &lt;section&gt;
   &lt;h1&gt;The Mellblom Browser&lt;/h1&gt;
   &lt;p&gt;Web browsing at the speed of light.&lt;/p&gt;
   &lt;p&gt;No other browser goes faster!&lt;/p&gt;
  &lt;/section&gt;
 &lt;/a&gt;
&lt;/aside&gt;</pre>

  </div>


  <h4 id=the-em-element><span class=secno>4.6.2 </span>The <dfn><code>em</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-em-element>em</a></code> element <a href=#represents>represents</a> stress
  emphasis of its contents.</p>

  <p>The level of emphasis that a particular piece of content has is
  given by its number of ancestor <code><a href=#the-em-element>em</a></code> elements.</p>

  <p>The placement of emphasis changes the meaning of the sentence.
  The element thus forms an integral part of the content. The precise
  way in which emphasis is used in this way depends on the
  language.</p>

  <div class=example>

   <p>These examples show how changing the emphasis changes the
   meaning. First, a general statement of fact, with no emphasis:</p>

   <pre>&lt;p&gt;Cats are cute animals.&lt;/p&gt;</pre>

   <p>By emphasizing the first word, the statement implies that the
   kind of animal under discussion is in question (maybe someone is
   asserting that dogs are cute):</p>

   <pre>&lt;p&gt;&lt;em&gt;Cats&lt;/em&gt; are cute animals.&lt;/p&gt;</pre>

   <p>Moving the emphasis to the verb, one highlights that the truth
   of the entire sentence is in question (maybe someone is saying cats
   are not cute):</p>

   <pre>&lt;p&gt;Cats &lt;em&gt;are&lt;/em&gt; cute animals.&lt;/p&gt;</pre>

   <p>By moving it to the adjective, the exact nature of the cats
   is reasserted (maybe someone suggested cats were <em>mean</em>
   animals):</p>

   <pre>&lt;p&gt;Cats are &lt;em&gt;cute&lt;/em&gt; animals.&lt;/p&gt;</pre>

   <p>Similarly, if someone asserted that cats were vegetables,
   someone correcting this might emphasize the last word:</p>

   <pre>&lt;p&gt;Cats are cute &lt;em&gt;animals&lt;/em&gt;.&lt;/p&gt;</pre>

   <p>By emphasizing the entire sentence, it becomes clear that the
   speaker is fighting hard to get the point across. This kind of
   emphasis also typically affects the punctuation, hence the
   exclamation mark here.</p>

   <pre>&lt;p&gt;&lt;em&gt;Cats are cute animals!&lt;/em&gt;&lt;/p&gt;</pre>

   <p>Anger mixed with emphasizing the cuteness could lead to markup
   such as:</p>

   <pre>&lt;p&gt;&lt;em&gt;Cats are &lt;em&gt;cute&lt;/em&gt; animals!&lt;/em&gt;&lt;/p&gt;</pre>

  </div>

  <div class=note>

   <p>The <code><a href=#the-em-element>em</a></code> element isn't a generic "italics"
   element. Sometimes, text is intended to stand out from the rest of
   the paragraph, as if it was in a different mood or voice. For this,
   the <code><a href=#the-i-element>i</a></code> element is more appropriate.</p>

   <p>The <code><a href=#the-em-element>em</a></code> element also isn't intended to convey
   importance; for that purpose, the <code><a href=#the-strong-element>strong</a></code> element is
   more appropriate.</p>

   <!--

    Thus the following is a bad use of <em>:

      <p><em>Note</em>: ...</p>

    You should use <strong> or <i> for this instead (depending on
    exactly what you're doing).

   -->

  </div>



  <h4 id=the-strong-element><span class=secno>4.6.3 </span>The <dfn><code>strong</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-strong-element>strong</a></code> element <a href=#represents>represents</a> strong
  importance for its contents.</p>

  <p>The relative level of importance of a piece of content is given
  by its number of ancestor <code><a href=#the-strong-element>strong</a></code> elements; each
  <code><a href=#the-strong-element>strong</a></code> element increases the importance of its
  contents.</p>

  <p>Changing the importance of a piece of text with the
  <code><a href=#the-strong-element>strong</a></code> element does not change the meaning of the
  sentence.</p>

  <div class=example>
   <p>Here is an example of a warning notice in a game, with the
   various parts marked up according to how important they are:</p>
   <!-- DO NOT REFLOW THIS EXAMPLE it has been carefully balanced -->
   <pre>&lt;p&gt;&lt;strong&gt;Warning.&lt;/strong&gt; This dungeon is dangerous.
&lt;strong&gt;Avoid the ducks.&lt;/strong&gt; Take any gold you find.
&lt;strong&gt;&lt;strong&gt;Do not take any of the diamonds&lt;/strong&gt;,
they are explosive and &lt;strong&gt;will destroy anything within
ten meters.&lt;/strong&gt;&lt;/strong&gt; You have been warned.&lt;/p&gt;</pre>
  </div>


  <h4 id=the-small-element><span class=secno>4.6.4 </span>The <dfn><code>small</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-small-element>small</a></code> element <a href=#represents>represents</a> side
  comments such as small print.</p>

  <p class=note>Small print typically features disclaimers, caveats,
  legal restrictions, or copyrights. Small print is also sometimes
  used for attribution, or for satisfying licensing requirements.</p>

  <p class=note>The <code><a href=#the-small-element>small</a></code> element does not
  "de-emphasize" or lower the importance of text emphasized by the
  <code><a href=#the-em-element>em</a></code> element or marked as important with the
  <code><a href=#the-strong-element>strong</a></code> element. To mark text as not emphasized or
  important, simply do not mark it up with the <code><a href=#the-em-element>em</a></code> or
  <code><a href=#the-strong-element>strong</a></code> elements respectively.</p>

  <p>The <code><a href=#the-small-element>small</a></code> element should not be used for extended
  spans of text, such as multiple paragraphs, lists, or sections of
  text. It is only intended for short runs of text. The text of a page
  listing terms of use, for instance, would not be a suitable
  candidate for the <code><a href=#the-small-element>small</a></code> element: in such a case, the
  text is not a side comment, it is the main content of the page.</p>

  <div class=example>

   <p>In this example the footer contains contact information and a
   copyright notice.</p>

   <pre>&lt;footer&gt;
 &lt;address&gt;
  For more details, contact
  &lt;a href="mailto:js@example.com"&gt;John Smith&lt;/a&gt;.
 &lt;/address&gt;
 &lt;p&gt;&lt;small&gt;&copy; copyright 2038 Example Corp.&lt;/small&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>

  </div>

  <div class=example>

   <p>In this second example, the <code><a href=#the-small-element>small</a></code> element is used
   for a side comment in an article.</p>

   <pre>&lt;p&gt;Example Corp today announced record profits for the
second quarter &lt;small&gt;(Full Disclosure: Foo News is a subsidiary of
Example Corp)&lt;/small&gt;, leading to speculation about a third quarter
merger with Demo Group.&lt;/p&gt;</pre>

   <p>This is distinct from a sidebar, which might be multiple
   paragraphs long and is removed from the main flow of text. In the
   following example, we see a sidebar from the same article. This
   sidebar also has small print, indicating the source of the
   information in the sidebar.</p>

   <pre>&lt;aside&gt;
 &lt;h1&gt;Example Corp&lt;/h1&gt;
 &lt;p&gt;This company mostly creates small software and Web
 sites.&lt;/p&gt;
 &lt;p&gt;The Example Corp company mission is "To provide entertainment
 and news on a sample basis".&lt;/p&gt;
 &lt;p&gt;&lt;small&gt;Information obtained from &lt;a
 href="http://example.com/about.html"&gt;example.com&lt;/a&gt; home
 page.&lt;/small&gt;&lt;/p&gt;
&lt;/aside&gt;</pre>

  </div>

  <div class=example>

   <p>In this last example, the <code><a href=#the-small-element>small</a></code> element is marked
   as being <em>important</em> small print.</p>

   <pre>&lt;p&gt;&lt;strong&gt;&lt;small&gt;Continued use of this service will result in a kiss.&lt;/small&gt;&lt;/strong&gt;&lt;/p&gt;</pre>

  </div>


  <h4 id=the-cite-element><span class=secno>4.6.5 </span>The <dfn><code>cite</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-cite-element>cite</a></code> element <a href=#represents>represents</a> 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). This can be a work that is being quoted or
  referenced in detail (i.e. a citation), or it can just be a work
  that is mentioned in passing.</p>

  <p>A person's name is not the title of a work &mdash; even if people
  call that person a piece of work &mdash; and the element must
  therefore not be used to mark up people's names. (In some cases, the
  <code><a href=#the-b-element>b</a></code> element might be appropriate for names; e.g. in a
  gossip article where the names of famous people are keywords
  rendered with a different style to draw attention to them. In other
  cases, if an element is <em>really</em> needed, the
  <code><a href=#the-span-element>span</a></code> element can be used.)</p>

<!--(some people argue a ship is a work)
  <p>A ship is similarly not a work, and the element must not be used
  to mark up ship names (the <code>i</code> element can be used for
  that purpose).</p>
-->

  <div class=example>

   <p>This next example shows a typical use of the <code><a href=#the-cite-element>cite</a></code>
   element:</p>

   <pre>&lt;p&gt;My favorite book is &lt;cite&gt;The Reality Dysfunction&lt;/cite&gt; by
Peter F. Hamilton. My favorite comic is &lt;cite&gt;Pearls Before
Swine&lt;/cite&gt; by Stephan Pastis. My favorite track is &lt;cite&gt;Jive
Samba&lt;/cite&gt; by the Cannonball Adderley Sextet.&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>This is correct usage:</p>

   <pre>&lt;p&gt;According to the Wikipedia article &lt;cite&gt;HTML&lt;/cite&gt;, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.&lt;/p&gt;</pre>

   <p>The following, however, is incorrect usage, as the
   <code><a href=#the-cite-element>cite</a></code> element here is containing far more than the
   title of the work:</p>

   <pre class=bad>&lt;!-- do not copy this example, it is an example of bad usage! --&gt;
&lt;p&gt;According to &lt;cite&gt;the Wikipedia article on HTML&lt;/cite&gt;, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>The <code><a href=#the-cite-element>cite</a></code> element is obviously a key part of any
   citation in a bibliography, but it is only used to mark the
   title:</p>

   <pre>&lt;p&gt;&lt;cite&gt;Universal Declaration of Human Rights&lt;/cite&gt;, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).&lt;/p&gt;</pre>

  </div>

  <p class=note>A <em>citation</em> is not a <em>quote</em> (for
  which the <code><a href=#the-q-element>q</a></code> element is appropriate).</p>

  <div class=example>

   <p>This is incorrect usage, because <code><a href=#the-cite-element>cite</a></code> is not for
   quotes:</p>

   <pre>&lt;p&gt;&lt;cite&gt;This is wrong!&lt;/cite&gt;, said Ian.&lt;/p&gt;</pre>

   <p>This is also incorrect usage, because a person is not a
   work:</p>

   <pre>&lt;p&gt;&lt;q&gt;This is still wrong!&lt;/q&gt;, said &lt;cite&gt;Ian&lt;/cite&gt;.&lt;/p&gt;</pre>

   <p>The correct usage does not use a <code><a href=#the-cite-element>cite</a></code> element:</p>

   <pre>&lt;p&gt;&lt;q&gt;This is correct&lt;/q&gt;, said Ian.&lt;/p&gt;</pre>

   <p>As mentioned above, the <code><a href=#the-b-element>b</a></code> element might be relevant
   for marking names as being keywords in certain kinds of
   documents:</p>

   <pre>&lt;p&gt;And then &lt;b&gt;Ian&lt;/b&gt; said &lt;q&gt;this might be right, in a
gossip column, maybe!&lt;/q&gt;.&lt;/p&gt;</pre>

  </div>



  <h4 id=the-q-element><span class=secno>4.6.6 </span>The <dfn><code>q</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-q-cite><a href=#attr-q-cite>cite</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlquoteelement>HTMLQuoteElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-q-element>q</a></code> element <a href=#represents>represents</a> some <a href=#phrasing-content title="phrasing content">phrasing content</a> quoted from another
  source.</p>

  <p>Quotation punctuation (such as quotation marks) that is quoting
  the contents of the element must not appear immediately before,
  after, or inside <code><a href=#the-q-element>q</a></code> elements; they will be inserted into
  the rendering by the user agent.</p>

  <p>Content inside a <code><a href=#the-q-element>q</a></code> element must be quoted from
  another source, whose address, if it has one, may be cited in the
  <dfn id=attr-q-cite title=attr-q-cite><code>cite</code></dfn> attribute. The
  source may be fictional, as when quoting characters in a novel or
  screenplay.</p>

  <p>If the <code title=attr-q-cite><a href=#attr-q-cite>cite</a></code> attribute is
  present, it must be a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
  spaces</a>. <span class=impl>To obtain the corresponding
  citation link, the value of the attribute must be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element. User
  agents should allow users to follow such citation links.</span></p>

  <p>The <code><a href=#the-q-element>q</a></code> element must not be used in place of quotation
  marks that do not represent quotes; for example, it is inappropriate
  to use the <code><a href=#the-q-element>q</a></code> element for marking up sarcastic
  statements.</p>

  <p>The use of <code><a href=#the-q-element>q</a></code> elements to mark up quotations is
  entirely optional; using explicit quotation punctuation without
  <code><a href=#the-q-element>q</a></code> elements is just as correct.</p>

  <div class=example>

   <p>Here is a simple example of the use of the <code><a href=#the-q-element>q</a></code>
   element:</p>

   <pre>&lt;p&gt;The man said &lt;q&gt;Things that are impossible just take
longer&lt;/q&gt;. I disagreed with him.&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>Here is an example with both an explicit citation link in the
   <code><a href=#the-q-element>q</a></code> element, and an explicit citation outside:</p>

   <pre>&lt;p&gt;The W3C page &lt;cite&gt;About W3C&lt;/cite&gt; says the W3C's
mission is &lt;q cite="http://www.w3.org/Consortium/"&gt;To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web&lt;/q&gt;. I
disagree with this mission.&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>In the following example, the quotation itself contains a
   quotation:</p>

   <pre>&lt;p&gt;In &lt;cite&gt;Example One&lt;/cite&gt;, he writes &lt;q&gt;The man
said &lt;q&gt;Things that are impossible just take longer&lt;/q&gt;. I
disagreed with him&lt;/q&gt;. Well, I disagree even more!&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>In the following example, quotation marks are used instead of
   the <code><a href=#the-q-element>q</a></code> element:</p>

   <pre>&lt;p&gt;His best argument was &#10077;I disagree&#10078;, which
I thought was laughable.&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>In the following example, there is no quote &mdash; the
   quotation marks are used to name a word. Use of the <code><a href=#the-q-element>q</a></code>
   element in this case would be inappropriate.</p>

   <pre>&lt;p&gt;The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.&lt;/p&gt;</pre>

  </div>


  <h4 id=the-dfn-element><span class=secno>4.6.7 </span>The <dfn><code>dfn</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-dfn-element>dfn</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd>Also, the <code title=attr-dfn-title><a href=#attr-dfn-title>title</a></code> attribute has special semantics on this element.</dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-dfn-element>dfn</a></code> element <a href=#represents>represents</a> the defining
  instance of a term. The <a href=#paragraph title=paragraph>paragraph</a>,
  <a href=#the-dl-element title=dl>description list group</a>, or <a href=#sectioning-content title="sectioning content">section</a> that is the nearest
  ancestor of the <code><a href=#the-dfn-element>dfn</a></code> element must also contain the
  definition(s) for the <a href=#defining-term title="defining term">term</a> given
  by the <code><a href=#the-dfn-element>dfn</a></code> element.</p>

  <p><dfn id=defining-term>Defining term</dfn>: If the <code><a href=#the-dfn-element>dfn</a></code> element has a
  <dfn id=attr-dfn-title title=attr-dfn-title><code>title</code></dfn> attribute, then
  the exact value of that attribute is the term being defined.
  Otherwise, if it contains exactly one element child node and no
  child <a href=#text-node title="text node">text nodes</a>, and that child
  element is an <code><a href=#the-abbr-element>abbr</a></code> element with a <code title=attr-abbr-title><a href=#attr-abbr-title>title</a></code> attribute, then the exact value
  of <em>that</em> attribute is the term being defined. Otherwise, it
  is the exact <code><a href=#textcontent>textContent</a></code> of the <code><a href=#the-dfn-element>dfn</a></code>
  element that gives the term being defined.</p>

  <!-- note that this means <dfn>x \n x</dfn> won't match <span>x x</span> -->

  <p>If the <code title=attr-dfn-title><a href=#attr-dfn-title>title</a></code> attribute of the
  <code><a href=#the-dfn-element>dfn</a></code> element is present, then it must contain only the
  term being defined.</p>

  <p class=note>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
  of ancestor elements does not affect <code><a href=#the-dfn-element>dfn</a></code> elements.</p>

  <p>An <code><a href=#the-a-element>a</a></code> element that links to a <code><a href=#the-dfn-element>dfn</a></code>
  element represents an instance of the term defined by the
  <code><a href=#the-dfn-element>dfn</a></code> element.</p>

  <div class=example>

   <p>In the following fragment, the term "GDO" is first defined in
   the first paragraph, then used in the second.</p>

   <pre>&lt;p&gt;The &lt;dfn&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt;
is a device that allows off-world teams to open the iris.&lt;/p&gt;
&lt;!-- ... later in the document: --&gt;
&lt;p&gt;Teal'c activated his &lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;
and so Hammond ordered the iris to be opened.&lt;/p&gt;</pre>

   <p>With the addition of an <code><a href=#the-a-element>a</a></code> element, the reference
   can be made explicit:</p>

   <pre>&lt;p&gt;The &lt;dfn id=gdo&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt;
is a device that allows off-world teams to open the iris.&lt;/p&gt;
&lt;!-- ... later in the document: --&gt;
&lt;p&gt;Teal'c activated his &lt;a href=#gdo&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/a&gt;
and so Hammond ordered the iris to be opened.&lt;/p&gt;</pre>

  </div>



  <h4 id=the-abbr-element><span class=secno>4.6.8 </span>The <dfn><code>abbr</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd>Also, the <code title=attr-abbr-title><a href=#attr-abbr-title>title</a></code> attribute has special semantics on this element.</dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-abbr-element>abbr</a></code> element <a href=#represents>represents</a> an
  abbreviation or acronym, optionally with its expansion. The <dfn id=attr-abbr-title title=attr-abbr-title><code>title</code></dfn> attribute may be
  used to provide an expansion of the abbreviation. The attribute, if
  specified, must contain an expansion of the abbreviation, and
  nothing else.</p>

  <div class=example>
   <p>The paragraph below contains an abbreviation marked up with the
   <code><a href=#the-abbr-element>abbr</a></code> element. This paragraph <a href=#defining-term title="defining
   term">defines the term</a> "Web Hypertext Application Technology
   Working Group".</p>
   <pre>&lt;p&gt;The &lt;dfn id=whatwg&gt;&lt;abbr
title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;&lt;/dfn&gt;
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.&lt;/p&gt;</pre>
   <p>An alternative way to write this would be:</p>
   <pre>&lt;p&gt;The &lt;dfn id=whatwg&gt;Web Hypertext Application Technology
Working Group&lt;/dfn&gt; (&lt;abbr
title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;)
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.&lt;/p&gt;</pre>
  </div>

  <div class=example>
   <p>This paragraph has two abbreviations. Notice how only one is
   defined; the other, with no expansion associated with it, does not
   use the <code><a href=#the-abbr-element>abbr</a></code> element.</p>
   <pre>&lt;p&gt;The
&lt;abbr title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;
started working on HTML5 in 2004.&lt;/p&gt;</pre>
  </div>

  <div class=example>
   <p>This paragraph links an abbreviation to its definition.</p>
   <pre>&lt;p&gt;The &lt;a href="#whatwg"&gt;&lt;abbr
title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;&lt;/a&gt;
community does not have much representation from Asia.&lt;/p&gt;</pre>
  </div>

  <div class=example>
   <p>This paragraph marks up an abbreviation without giving an
   expansion, possibly as a hook to apply styles for abbreviations
   (e.g. smallcaps).</p>
   <pre>&lt;p&gt;Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the &lt;abbr&gt;WHATWG&lt;/abbr&gt; issue graph.&lt;/p&gt;</pre>
  </div>

  <p>If an abbreviation is pluralized, the expansion's grammatical
  number (plural vs singular) must match the grammatical number of the
  contents of the element.</p>

  <div class=example>

   <p>Here the plural is outside the element, so the expansion is in
   the singular:</p>

   <pre>&lt;p&gt;Two &lt;abbr title="Working Group"&gt;WG&lt;/abbr&gt;s worked on
this specification: the &lt;abbr&gt;WHATWG&lt;/abbr&gt; and the
&lt;abbr&gt;HTMLWG&lt;/abbr&gt;.&lt;/p&gt;</pre>

   <p>Here the plural is inside the element, so the expansion is in
   the plural:</p>

   <pre>&lt;p&gt;Two &lt;abbr title="Working Groups"&gt;WGs&lt;/abbr&gt; worked on
this specification: the &lt;abbr&gt;WHATWG&lt;/abbr&gt; and the
&lt;abbr&gt;HTMLWG&lt;/abbr&gt;.&lt;/p&gt;</pre>

  </div>

  <p>Abbreviations do not have to be marked up using this element. It
  is expected to be useful in the following cases:</p>

  <ul><li>Abbreviations for which the author wants to give expansions,
   where using the <code><a href=#the-abbr-element>abbr</a></code> element with a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is an alternative to
   including the expansion inline (e.g. in parentheses).</li>

   <li>Abbreviations that are likely to be unfamiliar to the
   document's readers, for which authors are encouraged to either mark
   up the abbreviation using a <code><a href=#the-abbr-element>abbr</a></code> element with a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute or include the expansion
   inline in the text the first time the abbreviation is used.</li>

   <li>Abbreviations whose presence needs to be semantically
   annotated, e.g. so that they can be identified from a style sheet
   and given specific styles, for which the <code><a href=#the-abbr-element>abbr</a></code> element
   can be used without a <code title=attr-title><a href=#the-title-attribute>title</a></code>
   attribute.</li>

  </ul><p title=note>Providing an expansion in a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute once will not necessarily
  cause other <code><a href=#the-abbr-element>abbr</a></code> elements in the same document with the
  same contents but without a <code title=attr-title><a href=#the-title-attribute>title</a></code>
  attribute to behave as if they had the same expansion. Every
  <code><a href=#the-abbr-element>abbr</a></code> element is independent.</p>




  <h4 id=the-time-element><span class=secno>4.6.9 </span>The <dfn><code>time</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-time-element>time</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code></dd>
   <dd><code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmltimeelement>HTMLTimeElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-time-datetime title=dom-time-datetime>dateTime</a>;
           attribute boolean <a href=#dom-time-pubdate title=dom-time-pubDate>pubDate</a>;
  readonly attribute <span>Date</span> <a href=#dom-time-valueasdate title=dom-time-valueAsDate>valueAsDate</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-time-element>time</a></code> element <a href=#represents>represents</a> either a
  time on a 24 hour clock, or a precise date in the proleptic
  Gregorian calendar, optionally with a time and a time-zone
  offset. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>

  <p>This element is intended as a way to encode modern dates and
  times in a machine-readable way so that, for example, user agents
  can offer to add birthday reminders or scheduled events to the
  user's calendar.</p>

  <!-- it's also intended for restyling to local conventions
  (2000-12-31 vs 31-12-2000 vs 12-31-2000), but CSS doesn't support
  that yet. -->

  <div class=note>

   <p>The <code><a href=#the-time-element>time</a></code> element is not intended for encoding times
   for which a precise date or time cannot be established. For
   example, it would be inappropriate for encoding times like "one
   millisecond after the big bang", "the early part of the Jurassic
   period", or "a winter around 250 BCE".</p>

   <p>For dates before the introduction of the Gregorian calendar,
   authors are encouraged to not use the <code><a href=#the-time-element>time</a></code> element, or
   else to be very careful about converting dates and times from the
   period to the Gregorian calendar. This is complicated by the manner
   in which the Gregorian calendar was phased in, which occurred at
   different times in different countries, ranging from partway
   through the 16th century all the way to early in the 20th.</p>

  </div>

  <p>The <dfn id=attr-time-pubdate title=attr-time-pubdate><code>pubdate</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>. If specified, it
  indicates that the date and time given by the element is the
  publication date and time of the nearest ancestor
  <code><a href=#the-article-element>article</a></code> element, or, if the element has no ancestor
  <code><a href=#the-article-element>article</a></code> element, of the document as a whole. If the
  element has a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code>
  attribute specified, then the element <dfn id=needs-a-date>needs a date</dfn>. For
  each <code><a href=#the-article-element>article</a></code> element, there must no more than one
  <code><a href=#the-time-element>time</a></code> element with a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute whose nearest
  ancestor is that <code><a href=#the-article-element>article</a></code> element. Furthermore, for each
  <code><a href=#document>Document</a></code>, there must be no more than one
  <code><a href=#the-time-element>time</a></code> element with a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute that does not
  have an ancestor <code><a href=#the-article-element>article</a></code> element.</p>

  <p>The <dfn id=attr-time-datetime title=attr-time-datetime><code>datetime</code></dfn>
  attribute, if present, gives the date or time being
  specified. Otherwise, the date or time is given by the element's
  contents.</p>

  <p>If the element <i><a href=#needs-a-date>needs a date</a></i>, and the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute is present,
  then the attribute's value must be a <a href=#valid-date-string-with-optional-time>valid date string with
  optional time</a>.</p>

  <p>If the element <i><a href=#needs-a-date>needs a date</a></i>, but the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute is not present,
  then the element's <code><a href=#textcontent>textContent</a></code> must be a <a href=#valid-date-string-in-content-with-optional-time>valid
  date string in content with optional time</a>.</p>

  <p>If the element does not <i>need a date</i>, and the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute is present,
  then the attribute's value must be a <a href=#valid-date-or-time-string>valid date or time
  string</a>.</p>

  <p>If the element does not <i>need a date</i>, but the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute is not present,
  then the element's <code><a href=#textcontent>textContent</a></code> must be a <a href=#valid-date-or-time-string-in-content>valid
  date or time string in content</a>.</p>

  <p>The date, if any, must be expressed using the Gregorian
  calendar.</p>

  <div class=impl>

  <p>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute
  is present, the user agent should convey the attribute's value to
  the user when rendering the element.</p>

  </div>

  <div class=example>

   <p>The <code><a href=#the-time-element>time</a></code> element can be used to encode dates, for
   example in Microformats. The following shows a hypothetical way of
   encoding an event using a variant on hCalendar that uses the
   <code><a href=#the-time-element>time</a></code> element:</p>

   <pre>&lt;div class="vevent"&gt;
 &lt;a class="url" href="http://www.web2con.com/"&gt;http://www.web2con.com/&lt;/a&gt;
  &lt;span class="summary"&gt;Web 2.0 Conference&lt;/span&gt;:
  &lt;time class="dtstart" datetime="2007-10-05"&gt;October 5&lt;/time&gt; -
  &lt;time class="dtend" datetime="2007-10-20"&gt;19&lt;/time&gt;,
  at the &lt;span class="location"&gt;Argent Hotel, San Francisco, CA&lt;/span&gt;
 &lt;/div&gt;</pre>

   <p>(The end date is encoded as one day after the last date of the
   event because in the iCalendar format, end dates are
   <em>exclusive</em>, not inclusive.)</p>

  </div>

  <div class=example>

   <p>The <code><a href=#the-time-element>time</a></code> element is not necessary for encoding
   dates or times. In the following snippet, the time is encoded using
   <code><a href=#the-time-element>time</a></code>, so that it can be restyled (e.g. using XBL2) to
   match local conventions, while the year is not marked up at all,
   since marking it up would not be particularly useful.</p>

   <pre>&lt;p&gt;I usually have a snack at &lt;time&gt;16:00&lt;/time&gt;.&lt;/p&gt;
&lt;p&gt;I've liked model trains since at least 1983.&lt;/p&gt;</pre>

   <p>Using a styling technology that supports restyling times, the
   first paragraph from the above snippet could be rendered as follows:</p>

   <blockquote><p>I usually have a snack at 4pm.</blockquote>

   <p>Or it could be rendered as follows:</p>

   <blockquote><p>I usually have a snack at 16h00.</blockquote>

  </div>

  <div class=impl>

  <p>The <dfn id=dom-time-datetime title=dom-time-datetime><code>dateTime</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> content attribute.</p>

  <p>The <dfn id=dom-time-pubdate title=dom-time-pubDate><code>pubDate</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> content attribute.</p>

  <p>User agents, to obtain the <dfn id=concept-time-date title=concept-time-date>date</dfn>, <dfn id=concept-time-time title=concept-time-time>time</dfn>, and <dfn id=concept-time-timezone title=concept-time-timezone>time-zone offset</dfn> represented by
  a <code><a href=#the-time-element>time</a></code> element, must follow these steps:</p>

  <ol><li>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code>
   attribute is present, then use the rules to <a href=#parse-a-date-or-time-string>parse a date or
   time string</a> with the flag <i>in attribute</i> from the value
   of that attribute, and let the result be <var title="">result</var>.</li>

   <li>Otherwise, use the rules to <a href=#parse-a-date-or-time-string>parse a date or time
   string</a> with the flag <i>in content</i> from the element's
   <code><a href=#textcontent>textContent</a></code>, and let the result be <var title="">result</var>.</li>

   <li>If <var title="">result</var> is empty (because the parsing
   failed), then the <a href=#concept-time-date title=concept-time-date>date</a> is
   unknown, the <a href=#concept-time-time title=concept-time-time>time</a> is
   unknown, and the <a href=#concept-time-timezone title=concept-time-timezone>time-zone
   offset</a> is unknown.</li>

   <li>Otherwise: if <var title="">result</var> contains a date, then
   that is the <a href=#concept-time-date title=concept-time-date>date</a>; if <var title="">result</var> contains a time, then that is the <a href=#concept-time-time title=concept-time-time>time</a>; and if <var title="">result</var> contains a time-zone offset, then the
   time-zone offset is the element's <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a>. (A time-zone
   offset can only be present if both a date and a time are also
   present.)</li>

  </ol></div>

  <dl class=domintro><dt><var title="">time</var> . <code title=dom-time-valueAsDate><a href=#dom-time-valueasdate>valueAsDate</a></code></dt>

   <dd>

    <p>Returns a <code>Date</code> object representing the specified date and time.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-time-valueasdate title=dom-time-valueAsDate><code>valueAsDate</code></dfn> IDL
  attribute must return either null or a new <code>Date</code> object
  initialised to the relevant value as defined by the following
  list:</p>

  <dl><dt>If the <a href=#concept-time-date title=concept-time-date>date</a> is known but
   the <a href=#concept-time-time title=concept-time-time>time</a> is not</dt>

   <dd>The time corresponding to midnight UTC (i.e. the first second)
   of the given <a href=#concept-time-date title=concept-time-date>date</a>.</dd>

   <dt>If the <a href=#concept-time-time title=concept-time-time>time</a> is known but
   the <a href=#concept-time-date title=concept-time-date>date</a> is not</dt>

   <dd>The time corresponding to the given <a href=#concept-time-time title=concept-time-time>time</a> of 1970-01-01, with the time
   zone UTC.</dd>

   <dt>If both the <a href=#concept-time-date title=concept-time-date>date</a> and the
   <a href=#concept-time-time title=concept-time-time>time</a> are known</dt>

   <dd>The time corresponding to the <a href=#concept-time-date title=concept-time-date>date</a> and <a href=#concept-time-time title=concept-time-time>time</a>, with the given <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a>.</dd>

   <dt>If neither the <a href=#concept-time-date title=concept-time-date>date</a> nor
   the <a href=#concept-time-time title=concept-time-time>time</a> are known</dt>

   <dd>The null value.</dd>

  </dl><p>When a <code>Date</code> object is to be returned, a new one must
  be constructed.</p> <!-- yes, this means .valueAsDate !=
  .valueAsDate, but the object is mutable, so it'd be weird if we
  didn't do that -->

  </div>

  <div class=example>

   <p>In the following snippet:</p>

   <pre>&lt;p&gt;Our first date was &lt;time datetime="2006-09-23"&gt;a Saturday&lt;/time&gt;.&lt;/p&gt;</pre>

   <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-valueAsDate><a href=#dom-time-valueasdate>valueAsDate</a></code> attribute would
   have the value 1,158,969,600,000ms.</p>

  </div>

  <!-- <pre>&lt;p>We stopped talking at &lt;time datetime="2006-09-24T05:00-07:00">5am the next morning&lt;/time>.&lt;/p></pre> -->

  <div class=example>

   <p>In the following snippet:</p>

   <pre>&lt;p&gt;Many people get up at &lt;time&gt;08:00&lt;/time&gt;.&lt;/p&gt;</pre>

   <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-valueAsDate><a href=#dom-time-valueasdate>valueAsDate</a></code> attribute would
   have the value 28,800,000ms.</p>

  </div>

  <div class=example>

   <p>In this example, an article's publication date is marked up
   using <code><a href=#the-time-element>time</a></code>:</p>

   <pre>&lt;article&gt;
 &lt;h1&gt;Small tasks&lt;/h1&gt;
 &lt;footer&gt;Published &lt;time pubdate&gt;2009-08-30&lt;/time&gt;.&lt;/footer&gt;
 &lt;p&gt;I put a bike bell on his bike.&lt;/p&gt;
&lt;/article&gt;</pre>

   <p>Here is another way that could be marked up. In this example,
   legacy user agents would say "today", while newer user agents would
   render the time in a locale-specific manner based on the value of
   the attribute.</p>

   <pre>&lt;article&gt;
 &lt;h1&gt;Small tasks&lt;/h1&gt;
 &lt;footer&gt;Published &lt;time pubdate datetime="2009-08-30"&gt;today&lt;/time&gt;.&lt;/footer&gt;
 &lt;p&gt;I put a bike bell on his bike.&lt;/p&gt;
&lt;/article&gt;</pre>

   <p>Here is the same thing but with the time included only. Because
   the element is empty, legacy user agents will not show anything
   useful; user agents that implement this specification, on the other
   hand, would show the date and time in a locale-specific manner.</p>

   <pre>&lt;article&gt;
 &lt;h1&gt;Small tasks&lt;/h1&gt;
 &lt;footer&gt;Published &lt;time pubdate datetime="2009-08-30T07:13Z"&gt;&lt;/time&gt;.&lt;/footer&gt;
 &lt;p&gt;I put a bike bell on his bike.&lt;/p&gt;
&lt;/article&gt;</pre>

  </div>



  <h4 id=the-code-element><span class=secno>4.6.10 </span>The <dfn><code>code</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-code-element>code</a></code> element <a href=#represents>represents</a> a fragment
  of computer code. This could be an XML element name, a filename, a
  computer program, or any other string that a computer would
  recognize.</p>

  <p>Although there is no formal way to indicate the language of
  computer code being marked up, authors who wish to mark
  <code><a href=#the-code-element>code</a></code> elements with the language used, e.g. so that
  syntax highlighting scripts can use the right rules, may do so by
  adding a class prefixed with "<code title="">language-</code>" to
  the element.</p>

  <div class=example>

   <p>The following example shows how the element can be used in a
   paragraph to mark up element names and computer code, including
   punctuation.</p>

   <pre>&lt;p&gt;The &lt;code&gt;code&lt;/code&gt; element represents a fragment of computer
code.&lt;/p&gt;

&lt;p&gt;When you call the &lt;code&gt;activate()&lt;/code&gt; method on the
&lt;code&gt;robotSnowman&lt;/code&gt; object, the eyes glow.&lt;/p&gt;

&lt;p&gt;The example below uses the &lt;code&gt;begin&lt;/code&gt; keyword to indicate
the start of a statement block. It is paired with an &lt;code&gt;end&lt;/code&gt;
keyword, which is followed by the &lt;code&gt;.&lt;/code&gt; punctuation character
(full stop) to indicate the end of the program.&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>The following example shows how a block of code could be marked
   up using the <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-code-element>code</a></code> elements.</p>

   <pre>&lt;pre&gt;&lt;code class="language-pascal"&gt;var i: Integer;
begin
   i := 1;
end.&lt;/code&gt;&lt;/pre&gt;</pre>

   <p>A class is used in that example to indicate the language
   used.</p>

  </div>

  <p class=note>See the <code><a href=#the-pre-element>pre</a></code> element for more details.</p>


  <h4 id=the-var-element><span class=secno>4.6.11 </span>The <dfn><code>var</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-var-element>var</a></code> element <a href=#represents>represents</a> a
  variable. This could be an actual variable in a mathematical
  expression or programming context, or it could just be a term used
  as a placeholder in prose.</p>

  <div class=example>
   <p>In the paragraph below, the letter "n" is being used as a
   variable in prose:</p>
   <pre>&lt;p&gt;If there are &lt;var&gt;n&lt;/var&gt; pipes leading to the ice
cream factory then I expect at &lt;em&gt;least&lt;/em&gt; &lt;var&gt;n&lt;/var&gt;
flavors of ice cream to be available for purchase!&lt;/p&gt;</pre>
  </div>

  <p>For mathematics, in particular for anything beyond the simplest
  of expressions, MathML is more appropriate. However, the
  <code><a href=#the-var-element>var</a></code> element can still be used to refer to specific
  variables that are then mentioned in MathML expressions.</p>

  <div class=example>

   <p>In this example, an equation is shown, with a legend that
   references the variables in the equation. The expression itself is
   marked up with MathML, but the variables are mentioned in the
   figure's legend using <code><a href=#the-var-element>var</a></code>.</p>

   <pre>&lt;figure&gt;
 &lt;math&gt;
  &lt;mi&gt;a&lt;/mi&gt;
  &lt;mo&gt;=&lt;/mo&gt;
  &lt;msqrt&gt;
   &lt;msup&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
   &lt;mi&gt;+&lt;/mi&gt;
   &lt;msup&gt;&lt;mi&gt;c&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
  &lt;/msqrt&gt;
 &lt;/math&gt;
 &lt;figcaption&gt;
  Using Pythagoras' theorem to solve for the hypotenuse &lt;var&gt;a&lt;/var&gt; of
  a triangle with sides &lt;var&gt;b&lt;/var&gt; and &lt;var&gt;c&lt;/var&gt;
 &lt;/figcaption&gt;
&lt;/figure&gt;</pre>

  </div>


  <h4 id=the-samp-element><span class=secno>4.6.12 </span>The <dfn><code>samp</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-samp-element>samp</a></code> element <a href=#represents>represents</a> (sample)
  output from a program or computing system.</p>

  <p class=note>See the <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-kbd-element>kbd</a></code>
  elements for more details.</p>

  <div class=example>
   <p>This example shows the <code><a href=#the-samp-element>samp</a></code> element being used
   inline:</p>
   <pre>&lt;p&gt;The computer said &lt;samp&gt;Too much cheese in tray
two&lt;/samp&gt; but I didn't know what that meant.&lt;/p&gt;</pre>

   <p>This second example shows a block of sample output. Nested
   <code><a href=#the-samp-element>samp</a></code> and <code><a href=#the-kbd-element>kbd</a></code> elements allow for the
   styling of specific elements of the sample output using a
   style sheet.</p>

   <pre>&lt;pre&gt;&lt;samp&gt;&lt;span class="prompt"&gt;jdoe@mowmow:~$&lt;/span&gt; &lt;kbd&gt;ssh demo.example.com&lt;/kbd&gt;
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

&lt;span class="prompt"&gt;jdoe@demo:~$&lt;/span&gt; &lt;span class="cursor"&gt;_&lt;/span&gt;&lt;/samp&gt;&lt;/pre&gt;</pre>
  </div>


  <h4 id=the-kbd-element><span class=secno>4.6.13 </span>The <dfn><code>kbd</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-kbd-element>kbd</a></code> element <a href=#represents>represents</a> user input
  (typically keyboard input, although it may also be used to represent
  other input, such as voice commands).</p>

  <p>When the <code><a href=#the-kbd-element>kbd</a></code> element is nested inside a
  <code><a href=#the-samp-element>samp</a></code> element, it represents the input as it was echoed
  by the system.</p>

  <p>When the <code><a href=#the-kbd-element>kbd</a></code> element <em>contains</em> a
  <code><a href=#the-samp-element>samp</a></code> element, it represents input based on system
  output, for example invoking a menu item.</p>

  <p>When the <code><a href=#the-kbd-element>kbd</a></code> element is nested inside another
  <code><a href=#the-kbd-element>kbd</a></code> element, it represents an actual key or other
  single unit of input as appropriate for the input mechanism.</p>

  <div class=example>
   <p>Here the <code><a href=#the-kbd-element>kbd</a></code> element is used to indicate keys to press:</p>
   <pre>&lt;p&gt;To make George eat an apple, press &lt;kbd&gt;&lt;kbd&gt;Shift&lt;/kbd&gt;+&lt;kbd&gt;F3&lt;/kbd&gt;&lt;/kbd&gt;&lt;/p&gt;</pre>

   <p>In this second example, the user is told to pick a particular
   menu item. The outer <code><a href=#the-kbd-element>kbd</a></code> element marks up a block of
   input, with the inner <code><a href=#the-kbd-element>kbd</a></code> elements representing each
   individual step of the input, and the <code><a href=#the-samp-element>samp</a></code> elements
   inside them indicating that the steps are input based on something
   being displayed by the system, in this case menu labels:</p>

   <pre>&lt;p&gt;To make George eat an apple, select
    &lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;File&lt;/samp&gt;&lt;/kbd&gt;|&lt;kbd&gt;&lt;samp&gt;Eat Apple...&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt;
&lt;/p&gt;</pre>

   <p>Such precision isn't necessary; the following is equally fine:</p>

   <pre>&lt;p&gt;To make George eat an apple, select &lt;kbd&gt;File | Eat Apple...&lt;/kbd&gt;&lt;/p&gt;</pre>

  </div>


  <h4 id=the-sub-and-sup-elements><span class=secno>4.6.14 </span>The <dfn><code>sub</code></dfn> and <dfn><code>sup</code></dfn> elements</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which these elements may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Use <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-sub-and-sup-elements>sup</a></code> element <a href=#represents>represents</a> a
  superscript and the <code><a href=#the-sub-and-sup-elements>sub</a></code> element <a href=#represents>represents</a>
  a subscript.</p>

  <p>These elements must be used only to mark up typographical
  conventions with specific meanings, not for typographical
  presentation for presentation's sake. For example, it would be
  inappropriate for the <code><a href=#the-sub-and-sup-elements>sub</a></code> and <code><a href=#the-sub-and-sup-elements>sup</a></code> elements
  to be used in the name of the LaTeX document preparation system. In
  general, authors should use these elements only if the
  <em>absence</em> of those elements would change the meaning of the
  content.</p>

  <p>In certain languages, superscripts are part of the typographical
  conventions for some abbreviations.</p>

  <div class=example>
   <pre>&lt;p&gt;The most beautiful women are
&lt;span lang="fr"&gt;&lt;abbr&gt;M&lt;sup&gt;lle&lt;/sup&gt;&lt;/abbr&gt; Gwendoline&lt;/span&gt; and
&lt;span lang="fr"&gt;&lt;abbr&gt;M&lt;sup&gt;me&lt;/sup&gt;&lt;/abbr&gt; Denise&lt;/span&gt;.&lt;/p&gt;</pre>
  </div>

  <p>The <code><a href=#the-sub-and-sup-elements>sub</a></code> element can be used inside a
  <code><a href=#the-var-element>var</a></code> element, for variables that have subscripts.</p>

  <div class=example>

   <p>Here, the <code><a href=#the-sub-and-sup-elements>sub</a></code> element is used to represents the
   subscript that identifies the variable in a family of
   variables:</p>

   <pre>&lt;p&gt;The coordinate of the &lt;var&gt;i&lt;/var&gt;th point is
(&lt;var&gt;x&lt;sub&gt;&lt;var&gt;i&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;, &lt;var&gt;y&lt;sub&gt;&lt;var&gt;i&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;).
For example, the 10th point has coordinate
(&lt;var&gt;x&lt;sub&gt;10&lt;/sub&gt;&lt;/var&gt;, &lt;var&gt;y&lt;sub&gt;10&lt;/sub&gt;&lt;/var&gt;).&lt;/p&gt;</pre>
  </div>

  <p>Mathematical expressions often use subscripts and superscripts.
  Authors are encouraged to use MathML for marking up mathematics, but
  authors may opt to use <code><a href=#the-sub-and-sup-elements>sub</a></code> and <code><a href=#the-sub-and-sup-elements>sup</a></code> if
  detailed mathematical markup is not desired. <a href=#refsMATHML>[MATHML]</a></p>

  <div class=example>
   <pre>&lt;var&gt;E&lt;/var&gt;=&lt;var&gt;m&lt;/var&gt;&lt;var&gt;c&lt;/var&gt;&lt;sup&gt;2&lt;/sup&gt;</pre>
   <pre>f(&lt;var&gt;x&lt;/var&gt;, &lt;var&gt;n&lt;/var&gt;) = log&lt;sub&gt;4&lt;/sub&gt;&lt;var&gt;x&lt;/var&gt;&lt;sup&gt;&lt;var&gt;n&lt;/var&gt;&lt;/sup&gt;</pre>
  </div>



  <h4 id=the-i-element><span class=secno>4.6.15 </span>The <dfn><code>i</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-i-element>i</a></code> element <a href=#represents>represents</a> a span of text
  in an alternate voice or mood, or otherwise offset from the normal
  prose, such as a taxonomic designation, a technical term, an
  idiomatic phrase from another language, a thought, a ship name, or
  some other prose whose typical typographic presentation is
  italicized.</p>

  <p>Terms in languages different from the main text should be
  annotated with <code title=attr-lang><a href=#attr-lang>lang</a></code> attributes (or,
  in XML, <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code>
  attributes in the <span>XML namespace</span></a>).</p>

  <div class=example>
   <p>The examples below show uses of the <code><a href=#the-i-element>i</a></code> element:</p>
   <pre>&lt;p&gt;The &lt;i class="taxonomy"&gt;Felis silvestris catus&lt;/i&gt; is cute.&lt;/p&gt;
&lt;p&gt;The term &lt;i&gt;prose content&lt;/i&gt; is defined above.&lt;/p&gt;
&lt;p&gt;There is a certain &lt;i lang="fr"&gt;je ne sais quoi&lt;/i&gt; in the air.&lt;/p&gt;</pre>
   <p>In the following example, a dream sequence is marked up using
   <code><a href=#the-i-element>i</a></code> elements.</p>
   <pre>&lt;p&gt;Raymond tried to sleep.&lt;/p&gt;
&lt;p&gt;&lt;i&gt;The ship sailed away on Thursday&lt;/i&gt;, he
dreamt. &lt;i&gt;The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Finally one night he picked up the courage to speak with
her&mdash;&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;Raymond woke with a start as the fire alarm rang out.&lt;/p&gt;</pre>
  </div>

  <p>Authors are encouraged to use the <code title=attr-class><a href=#classes>class</a></code> attribute on the <code><a href=#the-i-element>i</a></code>
  element to identify why the element is being used, so that if the
  style of a particular use (e.g. dream sequences as opposed to
  taxonomic terms) is to be changed at a later date, the author
  doesn't have to go through the entire document (or series of related
  documents) annotating each use. Similarly, authors are encouraged to
  consider whether other elements might be more applicable than the
  <code><a href=#the-i-element>i</a></code> element, for instance the <code><a href=#the-em-element>em</a></code> element for
  marking up stress emphasis, or the <code><a href=#the-dfn-element>dfn</a></code> element to mark
  up the defining instance of a term.</p>

  <p class=note>Style sheets can be used to format <code><a href=#the-i-element>i</a></code>
  elements, just like any other element can be restyled. Thus, it is
  not the case that content in <code><a href=#the-i-element>i</a></code> elements will
  necessarily be italicized.</p>


  <h4 id=the-b-element><span class=secno>4.6.16 </span>The <dfn><code>b</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-b-element>b</a></code> element <a href=#represents>represents</a> a span of text
  to be stylistically offset from the normal prose without conveying
  any extra importance, such as key words in a document abstract,
  product names in a review, or other spans of text whose typical
  typographic presentation is boldened.</p>

  <div class=example>
   <p>The following example shows a use of the <code><a href=#the-b-element>b</a></code> element
   to highlight key words without marking them up as important:</p>
   <pre>&lt;p&gt;The &lt;b&gt;frobonitor&lt;/b&gt; and &lt;b&gt;barbinator&lt;/b&gt; components are fried.&lt;/p&gt;</pre>
  </div>

  <div class=example>
   <p>In the following example, objects in a text adventure are
   highlighted as being special by use of the <code><a href=#the-b-element>b</a></code>
   element.</p>
   <pre>&lt;p&gt;You enter a small room. Your &lt;b&gt;sword&lt;/b&gt; glows
brighter. A &lt;b&gt;rat&lt;/b&gt; scurries past the corner wall.&lt;/p&gt;</pre>
  </div>

  <div class=example>
   <p>Another case where the <code><a href=#the-b-element>b</a></code> element is appropriate is
   in marking up the lede (or lead) sentence or paragraph. The
   following example shows how a <a href=http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm>BBC
   article about kittens adopting a rabbit as their own</a> could be
   marked up:</p>
   <pre>&lt;article&gt;
 &lt;h2&gt;Kittens 'adopted' by pet rabbit&lt;/h2&gt;
 &lt;p&gt;&lt;b class="lede"&gt;Six abandoned kittens have found an
 unexpected new mother figure &mdash; a pet rabbit.&lt;/b&gt;&lt;/p&gt;
 &lt;p&gt;Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.&lt;/p&gt;
<i>[...]</i></pre>
  </div>

  <p>As with the <code><a href=#the-i-element>i</a></code> element, authors are encouraged to use
  the <code title=attr-class><a href=#classes>class</a></code> attribute on the
  <code><a href=#the-b-element>b</a></code> element to identify why the element is being used, so
  that if the style of a particular use is to be changed at a later
  date, the author doesn't have to go through annotating each use.</p>

  <p>The <code><a href=#the-b-element>b</a></code> element should be used as a last resort when
  no other element is more appropriate. In particular, headings should
  use the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> to <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements, stress emphasis
  should use the <code><a href=#the-em-element>em</a></code> element, importance should be denoted
  with the <code><a href=#the-strong-element>strong</a></code> element, and text marked or highlighted
  should use the <code><a href=#the-mark-element>mark</a></code> element.</p>

  <div class=example>
   <p>The following would be <em>incorrect</em> usage:</p>
   <pre class=bad>&lt;p&gt;&lt;b&gt;WARNING!&lt;/b&gt; Do not frob the barbinator!&lt;/p&gt;</pre>
   <p>In the previous example, the correct element to use would have
   been <code><a href=#the-strong-element>strong</a></code>, not <code><a href=#the-b-element>b</a></code>.</p>
  </div>

  <p class=note>Style sheets can be used to format <code><a href=#the-b-element>b</a></code>
  elements, just like any other element can be restyled. Thus, it is
  not the case that content in <code><a href=#the-b-element>b</a></code> elements will
  necessarily be boldened.</p>



  <h4 id=the-mark-element><span class=secno>4.6.17 </span>The <dfn><code>mark</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><!-- v2: attribute that means "highlight this on the scrollbar" --><p>The <code><a href=#the-mark-element>mark</a></code> element <a href=#represents>represents</a> a run of
  text in one document marked or highlighted for reference purposes,
  due to its relevance in another context. When used in a quotation or
  other block of text referred to from the prose, it indicates a
  highlight that was not originally present but which has been added
  to bring the reader's attention to a part of the text that might not
  have been considered important by the original author when the block
  was originally written, but which is now under previously unexpected
  scrutiny. When used in the main prose of a document, it indicates a
  part of the document that has been highlighted due to its likely
  relevance to the user's current activity.</p>

  <div class=example>
   <p>This example shows how the <code><a href=#the-mark-element>mark</a></code> element can be used
   to bring attention to a particular part of a quotation:</p>
   <pre>&lt;p lang="en-US"&gt;Consider the following quote:&lt;/p&gt;
&lt;blockquote lang="en-GB"&gt;
 &lt;p&gt;Look around and you will find, no-one's really
 &lt;mark&gt;colour&lt;/mark&gt; blind.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p lang="en-US"&gt;As we can tell from the &lt;em&gt;spelling&lt;/em&gt; of the word,
the person writing this quote is clearly not American.&lt;/p&gt;</pre>
  </div>

  <div class=example>

   <p>Another example of the <code><a href=#the-mark-element>mark</a></code> element is highlighting
   parts of a document that are matching some search string. If
   someone looked at a document, and the server knew that the user was
   searching for the word "kitten", then the server might return the
   document with one paragraph modified as follows:</p>

   <pre>&lt;p&gt;I also have some &lt;mark&gt;kitten&lt;/mark&gt;s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a &lt;mark&gt;kitten&lt;/mark&gt;.&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>In the following snippet, a paragraph of text refers to a
   specific part of a code fragment.</p>

   <pre>&lt;p&gt;The highlighted part below is where the error lies:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;var i: Integer;
begin
   i := &lt;mark&gt;1.1&lt;/mark&gt;;
end.&lt;/code&gt;&lt;/pre&gt;</pre>

   <p>This is separate from <em>syntax highlighting</em>, for which
   <code><a href=#the-span-element>span</a></code> is more appropriate. Combining both, one would
   get:</p>

   <pre>&lt;p&gt;The highlighted part below is where the error lies:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;span class=keyword&gt;var&lt;/span&gt; &lt;span class=ident&gt;i&lt;/span&gt;: &lt;span class=type&gt;Integer&lt;/span&gt;;
&lt;span class=keyword&gt;begin&lt;/span&gt;
   &lt;span class=ident&gt;i&lt;/span&gt; := &lt;span class=literal&gt;&lt;mark&gt;1.1&lt;/mark&gt;&lt;/span&gt;;
&lt;span class=keyword&gt;end&lt;/span&gt;.&lt;/code&gt;&lt;/pre&gt;</pre>

  </div>

  <div class=example>

   <p>This is another example showing the use of <code><a href=#the-mark-element>mark</a></code> to
   highlight a part of quoted text that was originally not
   emphasized. In this example, common typographic conventions have
   led the author to explicitly style <code><a href=#the-mark-element>mark</a></code> elements in
   quotes to render in italics.</p>

   <pre>&lt;article&gt;
 &lt;style scoped&gt;
  blockquote mark, q mark {
    font: inherit; font-style: italic;
    text-decoration: none;
    background: transparent; color: inherit;
  }
  .bubble em {
    font: inherit; font-size: larger;
    text-decoration: underline;
  }
 &lt;/style&gt;
 &lt;h1&gt;She knew&lt;/h1&gt;
 &lt;p&gt;Did you notice the subtle joke in the joke on panel 4?&lt;/p&gt;
 &lt;blockquote&gt;
  &lt;p class="bubble"&gt;I didn't &lt;em&gt;want&lt;/em&gt; to believe. &lt;mark&gt;Of course
  on some level I realized it was a known-plaintext attack.&lt;/mark&gt; But I
  couldn't admit it until I saw for myself.&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.&lt;/p&gt;
&lt;/article&gt;</pre>

   <p>Note, incidentally, the distinction between the <code><a href=#the-em-element>em</a></code>
   element in this example, which is part of the original text being
   quoted, and the <code><a href=#the-mark-element>mark</a></code> element, which is highlighting a
   part for comment.</p>

  </div>

  <div class=example>

   <p>The following example shows the difference between denoting the
   <em>importance</em> of a span of text (<code><a href=#the-strong-element>strong</a></code>) as
   opposed to denoting the <em>relevance</em> of a span of text
   (<code><a href=#the-mark-element>mark</a></code>). It is an extract from a textbook, where the
   extract has had the parts relevant to the exam highlighted. The
   safety warnings, important though they may be, are apparently not
   relevant to the exam.</p>

   <pre>&lt;h3&gt;Wormhole Physics Introduction&lt;/h3&gt;

&lt;p&gt;&lt;mark&gt;A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.&lt;/mark&gt; Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).&lt;/p&gt;

&lt;p&gt;&lt;mark&gt;Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.&lt;/mark&gt;&lt;/p&gt;

&lt;p&gt;When a wormhole is created, a vortex normally forms.
&lt;strong&gt;Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.&lt;/strong&gt; Vortexes can be avoided when
using sufficiently advanced dialing technology.&lt;/p&gt;

&lt;p&gt;&lt;mark&gt;An obstruction in a gate will prevent it from accepting a
wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>

  </div>


  <h4 id=the-ruby-element><span class=secno>4.6.18 </span>The <dfn><code>ruby</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>One or more groups of: <a href=#phrasing-content>phrasing content</a> followed either by a single <code><a href=#the-rt-element>rt</a></code> element, or an <code><a href=#the-rp-element>rp</a></code> element, an <code><a href=#the-rt-element>rt</a></code> element, and another <code><a href=#the-rp-element>rp</a></code> element.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-ruby-element>ruby</a></code> element allows one or more spans of
  phrasing content to be marked with ruby annotations. Ruby
  annotations are short runs of text presented alongside base text,
  primarily used in East Asian typography as a guide for
  pronunciation or to include other annotations. In Japanese, this
  form of typography is also known as <i>furigana</i>.</p>

  <p>A <code><a href=#the-ruby-element>ruby</a></code> element <a href=#represents>represents</a> the spans of
  phrasing content it contains, ignoring all the child <code><a href=#the-rt-element>rt</a></code>
  and <code><a href=#the-rp-element>rp</a></code> elements and their descendants. Those spans of
  phrasing content have associated annotations created using the
  <code><a href=#the-rt-element>rt</a></code> element.</p>

  <div class=example>

   <!-- this is the hiragana for the word "kanji" ("chinese character") in japanese -->
   <!-- in japanese, ruby-like typography is called "furigana" -->

   <p>In this example, each ideograph in the Japanese text <span lang=ja title="">&#28450;&#23383;</span> is annotated with its
   reading in hiragana.</p>

   <pre lang=ja>...
&lt;ruby&gt;
 &#28450; &lt;rt&gt; &#12363;&#12435; &lt;/rt&gt;
 &#23383; &lt;rt&gt; &#12376;&#12288; &lt;/rt&gt;
&lt;/ruby&gt;
...</pre>

   <p>This might be rendered as:</p>

   <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." src=images/sample-ruby-ja.png></p>

  </div>

  <div class=example>

   <!-- this is the bopomofo for the word "hanzi" ("chinese character") in traditional chinese, as used in taiwan -->

   <p>In this example, each ideograph in the traditional Chinese text
   <span lang=zh-TW title="">&#28450;&#23383;</span> is annotated
   with its bopomofo reading.</p>

   <pre lang=zh-TW>&lt;ruby&gt;
 &#28450; &lt;rt&gt; &#12559;&#12578;&#715; &lt;/rt&gt;
 &#23383; &lt;rt&gt; &#12567;&#715;&#12288; &lt;/rt&gt;
&lt;/ruby&gt;</pre>

   <p>This might be rendered as:</p>

   <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." src=images/sample-ruby-bopomofo.png></p>

  </div>

  <div class=example>

   <!-- this is the pinyin for the word "hanzi" ("chinese character") in simplified chinese, as used in mainland china -->

   <p>In this example, each ideograph in the simplified Chinese text
   <span lang=zh-CN title="">&#27721;&#23383;</span> is annotated
   with its pinyin reading.</p>

   <pre lang=zh-CN>...
&lt;ruby&gt;
 &#27721; &lt;rt&gt; h&agrave;n &lt;/rt&gt;
 &#23383; &lt;rt&gt; z&igrave;&nbsp; &lt;/rt&gt;
&lt;/ruby&gt;
...</pre>

   <p>This might be rendered as:</p>

   <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." src=images/sample-ruby-pinyin.png></p>

  </div>

  <!-- Note: Examples are 32px/16px Stone Sans Sem ITC TT -->


  <h4 id=the-rt-element><span class=secno>4.6.19 </span>The <dfn><code>rt</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-ruby-element>ruby</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-rt-element>rt</a></code> element marks the ruby text component of a
  ruby annotation.</p>

  <p>An <code><a href=#the-rt-element>rt</a></code> element <span class=impl>that is a child of
  a <code><a href=#the-ruby-element>ruby</a></code> element</span> <a href=#represents>represents</a> an
  annotation (given by its children) for the zero or more nodes of
  phrasing content that immediately precedes it in the
  <code><a href=#the-ruby-element>ruby</a></code> element, ignoring <code><a href=#the-rp-element>rp</a></code> elements.</p>

  <div class=impl>

  <p>An <code><a href=#the-rt-element>rt</a></code> element that is not a child of a
  <code><a href=#the-ruby-element>ruby</a></code> element represents the same thing as its
  children.</p>

  </div>


  <h4 id=the-rp-element><span class=secno>4.6.20 </span>The <dfn><code>rp</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-ruby-element>ruby</a></code> element, either immediately before or immediately after an <code><a href=#the-rt-element>rt</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<!--
   <dd>If the <code>rp</code> element is immediately after an <code>rt</code> element that is immediately preceded by another <code>rp</code> element: a single character from Unicode character class Pe.</dd>
   <dd>Otherwise: a single character from Unicode character class Ps.</dd>
-->
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-rp-element>rp</a></code> element can be used to provide parentheses
  around a ruby text component of a ruby annotation, to be shown by
  user agents that don't support ruby annotations.</p>

  <p>An <code><a href=#the-rp-element>rp</a></code> element <span class=impl>that is a child of
  a <code><a href=#the-ruby-element>ruby</a></code> element</span> <a href=#represents>represents</a>
  nothing<span class=impl> and its contents must be
  ignored</span>. <span class=impl>An <code><a href=#the-rp-element>rp</a></code> element whose
  parent element is not a <code><a href=#the-ruby-element>ruby</a></code> element
  <a href=#represents>represents</a> its children.</span></p>

  <div class=example>

   <p>The example above, in which each ideograph in the text <span lang=ja title="">&#28450;&#23383;</span> is annotated with its
   phonetic reading, could be expanded to use <code><a href=#the-rp-element>rp</a></code> so that in
   legacy user agents the readings are in parentheses:</p>

   <pre lang=ja>...
&lt;ruby&gt;
 &#28450; &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;&#12363;&#12435;&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
 &#23383; &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;&#12376;&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
&lt;/ruby&gt;
...</pre>

   <p>In conforming user agents the rendering would be as above, but
   in user agents that do not support ruby, the rendering would
   be:</p>

   <pre lang=ja>... &#28450; (&#12363;&#12435;) &#23383; (&#12376;) ...</pre>

  </div>


  <h4 id=the-bdo-element><span class=secno>4.6.21 </span>The <dfn><code>bdo</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd>Also, the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> global attribute has special semantics on this element.</dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-bdo-element>bdo</a></code> element <a href=#represents>represents</a> explicit
  text directionality formatting control for its children. It allows
  authors to override the Unicode bidirectional algorithm by
  explicitly specifying a direction override. <a href=#refsBIDI>[BIDI]</a></p>

  <p>Authors must specify the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>
  attribute on this element, with the value <code>ltr</code> to
  specify a left-to-right override and with the value <code>rtl</code>
  to specify a right-to-left override.</p>

  <div class=impl>

  <p>If the element has the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>
  attribute set to the exact value <code>ltr</code>, then for the
  purposes of the bidi algorithm, the user agent must act as if there
  was a U+202D LEFT-TO-RIGHT OVERRIDE character at the start of the
  element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the
  element.</p>

  <p>If the element has the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>
  attribute set to the exact value <code>rtl</code>, then for the
  purposes of the bidi algorithm, the user agent must act as if there
  was a U+202E RIGHT-TO-LEFT OVERRIDE character at the start of the
  element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the
  element.</p>

  <p>The requirements on handling the <code><a href=#the-bdo-element>bdo</a></code> element for the
  bidi algorithm may be implemented indirectly through the style
  layer. For example, an HTML+CSS user agent should implement these
  requirements by implementing the CSS 'unicode-bidi' property. <a href=#refsCSS>[CSS]</a></p>

  </div>



  <h4 id=the-span-element><span class=secno>4.6.22 </span>The <dfn><code>span</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlspanelement>HTMLSpanElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-span-element>span</a></code> element doesn't mean anything on its own,
  but can be useful when used together with other attributes,
  e.g. <code title=attr-class><a href=#classes>class</a></code>, <code title=attr-lang><a href=#attr-lang>lang</a></code>, or <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>. It <a href=#represents>represents</a> its
  children.</p>

  <div class=example>

   <p>In this example, a code fragment is marked up using
   <code><a href=#the-span-element>span</a></code> elements and <code title=attr-class><a href=#classes>class</a></code> attributes so that its keywords and
   identifiers can be color-coded from CSS:</p>

   <!-- extract from http://www.cs.cmu.edu/~dst/DeCSS/Gallery/vlc-dvd_css-c.txt -->

   <pre>&lt;pre&gt;&lt;code class="lang-c"&gt;&lt;span class="keyword"&gt;for&lt;/span&gt; (&lt;span class="ident"&gt;j&lt;/span&gt; = 0; &lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt; 256; &lt;span class="ident"&gt;j&lt;/span&gt;++) {
  &lt;span class="ident"&gt;i_t3&lt;/span&gt; = (&lt;span class="ident"&gt;i_t3&lt;/span&gt; &amp; 0x1ffff) | (&lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt;&amp;lt; 17);
  &lt;span class="ident"&gt;i_t6&lt;/span&gt; = (((((((&lt;span class="ident"&gt;i_t3&lt;/span&gt; &gt;&gt; 3) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 1) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 8) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 5) &amp; 0xff;
  &lt;span class="keyword"&gt;if&lt;/span&gt; (&lt;span class="ident"&gt;i_t6&lt;/span&gt; == &lt;span class="ident"&gt;i_t1&lt;/span&gt;)
    &lt;span class="keyword"&gt;break&lt;/span&gt;;
}&lt;/code&gt;&lt;/pre&gt;</pre>

  </div>



  <h4 id=the-br-element><span class=secno>4.6.23 </span>The <dfn><code>br</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlbrelement>HTMLBRElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-br-element>br</a></code> element <a href=#represents>represents</a> a line
  break.</p>

  <p><code><a href=#the-br-element>br</a></code> elements must be used only for line breaks that
  are actually part of the content, as in poems or addresses.</p>

  <div class=example>

  <p>The following example is correct usage of the <code><a href=#the-br-element>br</a></code>
  element:</p>

   <pre>&lt;p&gt;P. Sherman&lt;br&gt;
42 Wallaby Way&lt;br&gt;
Sydney&lt;/p&gt;</pre>

  </div>

  <p><code><a href=#the-br-element>br</a></code> elements must not be used for separating thematic
  groups in a paragraph.</p>

  <div class=example>

   <p>The following examples are non-conforming, as they abuse the
   <code><a href=#the-br-element>br</a></code> element:</p>

   <pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;br&gt;
&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

   <pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;br&gt;
&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

   <p>Here are alternatives to the above, which are correct:</p>

   <pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

   <pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

  </div>

  <p>If a <a href=#paragraph>paragraph</a> consists of nothing but a single
  <code><a href=#the-br-element>br</a></code> element, it represents a placeholder blank line
  (e.g. as in a template). Such blank lines must not be used for
  presentation purposes.</p>

  <div class=impl>

  <p>Any content inside <code><a href=#the-br-element>br</a></code> elements must not be
  considered part of the surrounding text.</p>

  <p>A <code><a href=#the-br-element>br</a></code> element does not separate paragraphs for the
  purposes of the Unicode bidirectional algorithm. <a href=#refsBIDI>[BIDI]</a></p>

  </div>


  <h4 id=the-wbr-element><span class=secno>4.6.24 </span>The <dfn><code>wbr</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-wbr-element>wbr</a></code> element <a href=#represents>represents</a> a line break
  opportunity.</p>

  <div class=example>

   <p>In the following example, someone is quoted as saying something
   which, for effect, is written as one long word. However, to ensure
   that the text can be wrapped in a readable fashion, the individual
   words in the quote are separated using a <code><a href=#the-wbr-element>wbr</a></code>
   element.</p>

   <pre>&lt;p&gt;So then he pointed at the tiger and screamed
"there&lt;wbr&gt;is&lt;wbr&gt;no&lt;wbr&gt;way&lt;wbr&gt;you&lt;wbr&gt;are&lt;wbr&gt;ever&lt;wbr&gt;going&lt;wbr&gt;to&lt;wbr&gt;catch&lt;wbr&gt;me"!&lt;/p&gt;</pre>

  </div>

  <div class=impl>

  <p>Any content inside <code><a href=#the-wbr-element>wbr</a></code> elements must not be
  considered part of the surrounding text.</p>

  </div>



  <h4 id=usage-summary><span class=secno>4.6.25 </span>Usage summary</h4>

  <p><i>This section is non-normative.</i></p>

  <table><thead><tr><th>Element
     <th>Purpose
     <th>Example
   <tbody><tr><td><code><a href=#the-a-element>a</a></code>
     <td>Hyperlinks
     <td><pre class=example>Visit my <strong>&lt;a href="drinks.html"&gt;drinks&lt;/a&gt;</strong> page.</pre>

    <tr><td><code><a href=#the-em-element>em</a></code>
     <td>Stress emphasis
     <td><pre class=example>I must say I <strong>&lt;em&gt;adore&lt;/em&gt;</strong> lemonade.</pre>

    <tr><td><code><a href=#the-strong-element>strong</a></code>
     <td>Importance
     <td><pre class=example>This tea is <strong>&lt;strong&gt;very hot&lt;/strong&gt;</strong>.</pre>

    <tr><td><code><a href=#the-small-element>small</a></code>
     <td>Side comments
     <td><pre class=example>These grapes are made into wine. <strong>&lt;small&gt;Alcohol is addictive.&lt;/small&gt;</strong></pre>

    <tr><td><code><a href=#the-cite-element>cite</a></code>
     <td>Titles of works
     <td><pre class=example>The case <strong>&lt;cite&gt;Hugo v. Danielle&lt;/cite&gt;</strong> is relevant here.</pre>

    <tr><td><code><a href=#the-q-element>q</a></code>
     <td>Quotations
     <td><pre class=example>The judge said <strong>&lt;q&gt;You can drink water from the fish tank&lt;/q&gt;</strong> but advised against it.</pre>

    <tr><td><code><a href=#the-dfn-element>dfn</a></code>
     <td>Defining instance
     <td><pre class=example>The term <strong>&lt;dfn&gt;organic food&lt;/dfn&gt;</strong> refers to food produced without synthetic chemicals.</pre>

    <tr><td><code><a href=#the-abbr-element>abbr</a></code>
     <td>Abbreviations
     <td><pre class=example>Organic food in Ireland is certified by the <strong>&lt;abbr title="Irish Organic Farmers and Growers Association"&gt;IOFGA&lt;/abbr&gt;</strong>.</pre>

    <tr><td><code><a href=#the-time-element>time</a></code>
     <td>Date and/or time
     <td><pre class=example>Published <strong>&lt;time&gt;2009-10-21&lt;/time&gt;</strong>.</pre>

    <tr><td><code><a href=#the-code-element>code</a></code>
     <td>Computer code
     <td><pre class=example>The <strong>&lt;code&gt;fruitdb&lt;/code&gt;</strong> program can be used for tracking fruit production.</pre>

    <tr><td><code><a href=#the-var-element>var</a></code>
     <td>Variables
     <td><pre class=example>If there are <strong>&lt;var&gt;n&lt;/var&gt;</strong> fruit in the bowl, at least <strong>&lt;var&gt;n&lt;/var&gt;</strong>&divide;2 will be ripe.</pre>

    <tr><td><code><a href=#the-samp-element>samp</a></code>
     <td>Computer output
     <td><pre class=example>The computer said <strong>&lt;samp&gt;Unknown error -3&lt;/samp&gt;</strong>.</pre>

    <tr><td><code><a href=#the-kbd-element>kbd</a></code>
     <td>User input
     <td><pre class=example>Hit <strong>&lt;kbd&gt;F1&lt;/kbd&gt;</strong> to continue.</pre>

    <tr><td><code><a href=#the-sub-and-sup-elements>sub</a></code>
     <td>Subscripts
     <td><pre class=example>Water is H<strong>&lt;sub&gt;2&lt;/sub&gt;</strong>O.</pre>

    <tr><td><code><a href=#the-sub-and-sup-elements>sup</a></code>
     <td>Superscripts
     <td><pre class=example>The Hydrogen in heavy water is usually <strong>&lt;sup&gt;2&lt;/sup&gt;</strong>H.</pre>

    <tr><td><code><a href=#the-i-element>i</a></code>
     <td>Alternative voice
     <td><pre class=example>Lemonade consists primarily of <strong>&lt;i&gt;Citrus limon&lt;/i&gt;</strong>.</pre>

    <tr><td><code><a href=#the-b-element>b</a></code>
     <td>Keywords
     <td><pre class=example>Take a <strong>&lt;b&gt;lemon&lt;/b&gt;</strong> and squeeze it with a <strong>&lt;b&gt;juicer&lt;/b&gt;</strong>.</pre>

    <tr><td><code><a href=#the-mark-element>mark</a></code>
     <td>Highlight
     <td><pre class=example>Elderflower cordial, with one <strong>&lt;mark&gt;part&lt;/mark&gt;</strong> cordial to ten <strong>&lt;mark&gt;part&lt;/mark&gt;</strong>s water, stands a<strong>&lt;mark&gt;part&lt;/mark&gt;</strong> from the rest.</pre>

    <tr><td><code><a href=#the-ruby-element>ruby</a></code>, <code><a href=#the-rt-element>rt</a></code>, <code><a href=#the-rp-element>rp</a></code>
     <td>Ruby annotations
     <td><pre class=example><strong>&lt;ruby&gt; OJ &lt;rp&gt;(&lt;rt&gt;Orange Juice&lt;rp&gt;)&lt;/ruby&gt;</strong></pre>

    <tr><td><code><a href=#the-bdo-element>bdo</a></code>
     <td>Text directionality formatting
     <td><pre class=example>The proposal is to write English, but in reverse order. "Juice" would become "<strong>&lt;bdo dir=rtl&gt;Juice&lt;/bdo&gt;</strong>"</pre>

    <tr><td><code><a href=#the-span-element>span</a></code>
     <td>Other
     <td><pre class=example>In French we call it <strong>&lt;span lang="fr"&gt;sirop de sureau&lt;/span&gt;</strong>.</pre>

    <tr><td><code><a href=#the-br-element>br</a></code>
     <td>Line break
     <td><pre class=example>Simply Orange Juice Company<strong>&lt;br&gt;</strong>Apopka, FL 32703<strong>&lt;br&gt;</strong>U.S.A.</pre>

    <tr><td><code><a href=#the-wbr-element>wbr</a></code>
     <td>Line breaking opportunity
     <td><pre class=example>www.simply<strong>&lt;wbr&gt;</strong>orange<strong>&lt;wbr&gt;</strong>juice.com</pre>

  </table><h3 id=edits><span class=secno>4.7 </span>Edits</h3>

  <p>The <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements represent
  edits to the document.</p>


  <h4 id=the-ins-element><span class=secno>4.7.1 </span>The <dfn><code>ins</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd>When the element only contains <a href=#phrasing-content>phrasing content</a>: <a href=#phrasing-content>phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#transparent>Transparent</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code></dd>
   <dd><code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>Uses the <code><a href=#htmlmodelement>HTMLModElement</a></code> interface.</dd>
  </dl><p>The <code><a href=#the-ins-element>ins</a></code> element <a href=#represents>represents</a> an addition
  to the document.</p>

  <div class=example>

   <p>The following represents the addition of a single paragraph:</p>

   <pre>&lt;aside&gt;
 &lt;ins&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
 &lt;/ins&gt;
&lt;/aside&gt;</pre>

   <p>As does this, because everything in the <code><a href=#the-aside-element>aside</a></code>
   element here counts as <a href=#phrasing-content>phrasing content</a> and therefore
   there is just one <a href=#paragraph>paragraph</a>:</p>

   <pre>&lt;aside&gt;
 &lt;ins&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
 &lt;/ins&gt;
 &lt;ins&gt;
  So are pears.
 &lt;/ins&gt;
&lt;/aside&gt;</pre>

  </div>

  <p><code><a href=#the-ins-element>ins</a></code> elements should not cross <a href=#paragraph title=paragraph>implied paragraph</a> boundaries.</p>

  <div class=example>

   <p>The following example represents the addition of two paragraphs,
   the second of which was inserted in two parts. The first
   <code><a href=#the-ins-element>ins</a></code> element in this example thus crosses a paragraph
   boundary, which is considered poor form.</p>

   <pre class=bad>&lt;aside&gt;
 &lt;!-- don't do this --&gt;
 &lt;ins datetime="2005-03-16T00:00Z"&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
 &lt;/ins&gt;
 &lt;ins datetime="2007-12-19T00:00Z"&gt;
  So are pears.
 &lt;/ins&gt;
&lt;/aside&gt;</pre>

   <p>Here is a better way of marking this up. It uses more elements,
   but none of the elements cross implied paragraph boundaries.</p>

   <pre>&lt;aside&gt;
 &lt;ins datetime="2005-03-16T00:00Z"&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
 &lt;/ins&gt;
 &lt;ins datetime="2005-03-16T00:00Z"&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
 &lt;/ins&gt;
 &lt;ins datetime="2007-12-19T00:00Z"&gt;
  So are pears.
 &lt;/ins&gt;
&lt;/aside&gt;</pre>

   <!-- Those dates aren't random. They're the start and end of
   something. Can you guess what? -->

  </div>


  <h4 id=the-del-element><span class=secno>4.7.2 </span>The <dfn><code>del</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd>When the element only contains <a href=#phrasing-content>phrasing content</a>: <a href=#phrasing-content>phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#transparent>Transparent</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code></dd>
   <dd><code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>Uses the <code><a href=#htmlmodelement>HTMLModElement</a></code> interface.</dd>
  </dl><p>The <code><a href=#the-del-element>del</a></code> element <a href=#represents>represents</a> a removal
  from the document.</p>

  <p><code><a href=#the-del-element>del</a></code> elements should not cross <a href=#paragraph title=paragraph>implied paragraph</a> boundaries.</p>

  <div class=example>

   <p>The following shows a "to do" list where items that have been
   done are crossed-off with the date and time of their
   completion.</p>

   <pre>&lt;h1&gt;To Do&lt;/h1&gt;
&lt;ul&gt;
 &lt;li&gt;Empty the dishwasher&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2009-10-11T01:25-07:00"&gt;Watch Walter Lewin's lectures&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2009-10-10T23:38-07:00"&gt;Download more tracks&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;Buy a printer&lt;/li&gt;
&lt;/ul&gt;</pre>

  </div>



  <h4 id=attributes-common-to-ins-and-del-elements><span class=secno>4.7.3 </span>Attributes common to <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements</h4>

  <p>The <dfn id=attr-mod-cite title=attr-mod-cite><code>cite</code></dfn> attribute
  may be used to specify the address of a document that explains the
  change. When that document is long, for instance the minutes of a
  meeting, authors are encouraged to include a fragment identifier
  pointing to the specific part of that document that discusses the
  change.</p>

  <p>If the <code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code> attribute is
  present, it must be a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
  spaces</a> that explains the change. <span class=impl>To obtain
  the corresponding citation link, the value of the attribute must be
  <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the
  element. User agents should allow users to follow such citation
  links.</span></p>


  <p>The <dfn id=attr-mod-datetime title=attr-mod-datetime><code>datetime</code></dfn>
  attribute may be used to specify the time and date of the change.</p>

  <p>If present, the <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code>
  attribute must be a <a href=#valid-global-date-and-time-string>valid global date and time string</a>
  value.</p>

  <div class=impl>

  <p>User agents must parse the <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code> attribute according to the
  <a href=#parse-a-global-date-and-time-string>parse a global date and time string</a> algorithm. If that
  doesn't return a time, then the modification has no associated
  timestamp (the value is non-conforming; it is not a <a href=#valid-global-date-and-time-string>valid
  global date and time string</a>). Otherwise, the modification is
  marked as having been made at the given datetime. User agents should
  use the associated time-zone offset information to determine which
  time zone to present the given datetime in.</p>

  </div>

  <p>The <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements <span class=impl>must</span> implement the <code><a href=#htmlmodelement>HTMLModElement</a></code>
  interface:</p>

  <pre class=idl>interface <dfn id=htmlmodelement>HTMLModElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-mod-cite title=dom-mod-cite>cite</a>;
           attribute DOMString <a href=#dom-mod-datetime title=dom-mod-datetime>dateTime</a>;
};</pre>

  <div class=impl>

  <p>The <dfn id=dom-mod-cite title=dom-mod-cite><code>cite</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the element's <code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code> content attribute. The <dfn id=dom-mod-datetime title=dom-mod-datetime><code>dateTime</code></dfn> IDL attribute
  must <a href=#reflect>reflect</a> the element's <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code> content attribute.</p>

  </div>



  <h4 id=edits-and-paragraphs><span class=secno>4.7.4 </span>Edits and paragraphs</h4>

  <p><i>This section is non-normative.</i></p>

  <p>Since the <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements do not
  affect <a href=#paragraph title=paragraph>paragraphing</a>, it is possible,
  in some cases where paragraphs are <a href=#paragraph title=paragraph>implied</a> (without explicit <code><a href=#the-p-element>p</a></code>
  elements), for an <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> element to
  span both an entire paragraph or other non-<a href=#phrasing-content>phrasing
  content</a> elements and part of another paragraph. For
  example:</p>

  <pre>&lt;section&gt;
 &lt;ins&gt;
  &lt;p&gt;
   This is a paragraph that was inserted.
  &lt;/p&gt;
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 &lt;/ins&gt;
 This is a second sentence, which was there all along.
&lt;/section&gt;</pre>

  <p>By only wrapping some paragraphs in <code><a href=#the-p-element>p</a></code> elements, one
  can even get the end of one paragraph, a whole second paragraph,
  and the start of a third paragraph to be covered by the same
  <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> element (though this is very
  confusing, and not considered good practice):</p>

  <pre class=bad>&lt;section&gt;
 This is the first paragraph. &lt;ins&gt;This sentence was
 inserted.
 &lt;p&gt;This second paragraph was inserted.&lt;/p&gt;
 This sentence was inserted too.&lt;/ins&gt; This is the
 third paragraph in this example.
 &lt;!-- (don't do this) --&gt;
&lt;/section&gt;</pre>

  <p>However, due to the way <a href=#paragraph title=paragraph>implied
  paragraphs</a> are defined, it is not possible to mark up the
  end of one paragraph and the start of the very next one using the
  same <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> element. You instead have
  to use one (or two) <code><a href=#the-p-element>p</a></code> element(s) and two
  <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> elements, as for example:</p>

  <pre>&lt;section&gt;
 &lt;p&gt;This is the first paragraph. &lt;del&gt;This sentence was
 deleted.&lt;/del&gt;&lt;/p&gt;
 &lt;p&gt;&lt;del&gt;This sentence was deleted too.&lt;/del&gt; That
 sentence needed a separate &amp;lt;del&amp;gt; element.&lt;/p&gt;
&lt;/section&gt;</pre>

  <p>Partly because of the confusion described above, authors are
  strongly encouraged to always mark up all paragraphs with the
  <code><a href=#the-p-element>p</a></code> element, instead of having <code><a href=#the-ins-element>ins</a></code> or
  <code><a href=#the-del-element>del</a></code> elements that cross <a href=#paragraph title=paragraph>implied
  paragraphs</a> boundaries.</p>


  <h4 id=edits-and-lists><span class=secno>4.7.5 </span>Edits and lists</h4>

  <p><i>This section is non-normative.</i></p>

  <p>The content models of the <code><a href=#the-ol-element>ol</a></code> and <code><a href=#the-ul-element>ul</a></code>
  elements do not allow <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements
  as children. Lists always represent all their items, including items
  that would otherwise have been marked as deleted.</p>

  <p>To indicate that an item is inserted or deleted, an
  <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> element can be wrapped around
  the contents of the <code><a href=#the-li-element>li</a></code> element. To indicate that an
  item has been replaced by another, a single <code><a href=#the-li-element>li</a></code> element
  can have one or more <code><a href=#the-del-element>del</a></code> elements followed by one or
  more <code><a href=#the-ins-element>ins</a></code> elements.</p>

  <div class=example>

   <p>In the following example, a list that started empty had items
   added and removed from it over time. The bits in the example that
   have been emphasized show the parts that are the "current" state of
   the list. The list item numbers don't take into account the edits,
   though.</p>

   <pre>&lt;h1&gt;Stop-ship bugs&lt;/h1&gt;
&lt;ol&gt;
 &lt;li&gt;&lt;ins datetime="2008-02-12T15:20Z"&gt;<em>Bug 225:
 Rain detector doesn't work in snow</em>&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2008-03-01T20:22Z"&gt;&lt;ins datetime="2008-02-14T12:02Z"&gt;Bug 228:
 Water buffer overflows in April&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;&lt;ins datetime="2008-02-16T13:50Z"&gt;<em>Bug 230:
 Water heater doesn't use renewable fuels</em>&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2008-02-20T21:15Z"&gt;&lt;ins datetime="2008-02-16T14:25Z"&gt;Bug 232:
 Carbon dioxide emissions detected after startup&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;
&lt;/ol&gt;</pre>

  </div>

  <div class=example>

   <p>In the following example, a list that started with just fruit
   was replaced by a list with just colors.</p>

   <pre>&lt;h1&gt;List of &lt;del&gt;fruits&lt;/del&gt;&lt;ins&gt;colors&lt;/ins&gt;&lt;/h1&gt;
&lt;ul&gt;
 &lt;li&gt;&lt;del&gt;Lime&lt;/del&gt;&lt;ins&gt;Green&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del&gt;Apple&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;Orange&lt;/li&gt;
 &lt;li&gt;&lt;del&gt;Pear&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;&lt;ins&gt;Teal&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del&gt;Lemon&lt;/del&gt;&lt;ins&gt;Yellow&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;Olive&lt;/li&gt;
 &lt;li&gt;&lt;ins&gt;Purple&lt;/ins&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

  </div>




  <h3 id=embedded-content-1><span class=secno>4.8 </span>Embedded content</h3>


  <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#embedded-content>Embedded content</a>.</dd>
   <dd>If the element has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-img-alt><a href=#attr-img-alt>alt</a></code></dd>
   <dd><code title=attr-img-src><a href=#attr-img-src>src</a></code></dd>
   <dd><code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code></dd>
   <dd><code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code></dd>
   <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>[NamedConstructor=<a href=#dom-image title=dom-image>Image</a>(),
 NamedConstructor=<a href=#dom-image-w title=dom-image-w>Image</a>(in unsigned long width),
 NamedConstructor=<a href=#dom-image-wh title=dom-image-wh>Image</a>(in unsigned long width, in unsigned long height)]
interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-img-alt title=dom-img-alt>alt</a>;
           attribute DOMString <a href=#dom-img-src title=dom-img-src>src</a>;
           attribute DOMString <a href=#dom-img-usemap title=dom-img-useMap>useMap</a>;
           attribute boolean <a href=#dom-img-ismap title=dom-img-isMap>isMap</a>;
           attribute unsigned long <a href=#dom-img-width title=dom-img-width>width</a>;
           attribute unsigned long <a href=#dom-img-height title=dom-img-height>height</a>;
  readonly attribute unsigned long <a href=#dom-img-naturalwidth title=dom-img-naturalWidth>naturalWidth</a>;
  readonly attribute unsigned long <a href=#dom-img-naturalheight title=dom-img-naturalHeight>naturalHeight</a>;
  readonly attribute boolean <a href=#dom-img-complete title=dom-img-complete>complete</a>;
};</pre>
   </dd>
  </dl><p>An <code><a href=#the-img-element>img</a></code> element represents an image.</p>

  <!-- v2 ideas for <img>:

     * Maps sites would like to know which images are already cached,
       so that they can use images that are vaguely suitable while
       they wait for the most appropriate image to download.

       Almost like lowsrc="", except that many images might be
       appropriate.

       Slight hitch: their images are at a different origin, and we
       don't want to allow arbitrary cross-origin inspection (privacy
       leak risk).

     * See note at rel=noreferrer.

  -->

  <p>The image given by the <dfn id=attr-img-src title=attr-img-src><code>src</code></dfn> attribute is the
  embedded content, and the value of the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute is the
  <code><a href=#the-img-element>img</a></code> element's <a href=#fallback-content>fallback content</a>.</p>

  <p>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute must be
  present, and must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
  surrounded by spaces</a> referencing a non-interactive,
  optionally animated, image resource that is neither paged nor
  scripted.</p>

  <p class=note>Images can thus be static bitmaps (e.g. PNGs, GIFs,
  JPEGs), single-page vector documents (single-page PDFs, XML files
  with an SVG root element), animated bitmaps (APNGs, animated GIFs),
  animated vector graphics (XML files with an SVG root element that
  use declarative SMIL animation), and so forth. However, this also
  precludes SVG files with script, multipage PDF files, interactive
  MNG files, HTML documents, plain text documents, and so forth.</p>

  <p>The requirements on the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
  attribute's value are described <a href=#alt>in the next
  section</a>.
  </p>

  <p>The <code><a href=#the-img-element>img</a></code> must not be used as a layout tool. In
  particular, <code><a href=#the-img-element>img</a></code> elements should not be used to display
  transparent images, as they rarely convey meaning and rarely add
  anything useful to the document.</p>

  <div class=impl>

  <hr><p>Unless the user agent cannot support images, or its support for
  images has been disabled, or the user agent only fetches elements on
  demand, then, when an <code><a href=#the-img-element>img</a></code> is created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and whenever the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set subsequently, the
  user agent must run the following steps:</p> <!-- Note how this does
  NOT happen when the base URL changes. -->

  <ol><li><p>If the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
   attribute's value is the empty string, then <a href=#queue-a-task>queue a
   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <code><a href=#the-img-element>img</a></code> element,
   and abort these steps.</li>

   <li>

    <p>Otherwise, <a href=#resolve-a-url title="resolve a url">resolve</a> the value
    of that attribute, relative to the element, and if that is
    successful must then <a href=#fetch>fetch</a> that resource.</p> <!--
    http-origin privacy sensitive -->

    <!-- same text in <input type=image> section and similar text
    elsewhere --> <p>Fetching the image must <a href=#delay-the-load-event>delay the load
    event</a> of the element's document until the <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
    task">queued</a> by the <a href=#networking-task-source>networking task source</a>
    once the resource has been <a href=#fetch title=fetch>fetched</a> (<a href=#img-load>defined below</a>) has been run.</p>

    <p class=warning>This, unfortunately, can be used to perform a
    rudimentary port scan of the user's local network (especially in
    conjunction with scripting, though scripting isn't actually
    necessary to carry out such an attack). User agents may implement
    <a href=#origin title=origin>cross-origin</a> access control policies
    that mitigate this attack.</p>

   </li>

  </ol><p>If the image is in a supported image type and its dimensions are
  known, then the image is said to be <dfn id=img-available title=img-available><i>available</i></dfn> (this affects exactly
  what the element represents, as defined below). This can be true
  even before the image is completely downloaded, if the user agent
  supports incremental rendering of images; in such cases, each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
  task">queued</a> by the <a href=#networking-task-source>networking task source</a> while
  the image is being <a href=#fetch title=fetch>fetched</a> must update
  the presentation of the image appropriately. It can also stop being
  true, e.g. if the user agent finds, after obtaining the image's
  dimensions, that the image data is actually fatally corrupted.</p>

  <p>If the image was not fetched (e.g. because the UA's image support
  is disabled, or because the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
  attribute's value is the empty string, or if the conditions in the
  previous paragraph are not met, then the image is <em>not</em> <i title=img-available><a href=#img-available>available</a></i>.</p>

  <p>Whether the image is fetched successfully or not (e.g. whether
  the response code was a 2xx code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>) must be
  ignored when determining the image's type and whether it is a valid
  image.</p>

  <p class=note>This allows servers to return images with error
  responses, and have them displayed.</p>

  <p>The user agents should apply the <a href=#content-type-sniffing:-image title="Content-Type
  sniffing: image">image sniffing rules</a> to determine the type
  of the image, with the image's <a href=#content-type title=Content-Type>associated
  Content-Type headers</a> giving the <var title="">official
  type</var>. If these rules are not applied, then the type of the
  image must be the type given by the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a>.</p>

  <p>User agents must not support non-image resources with the
  <code><a href=#the-img-element>img</a></code> element (e.g. XML files whose root element is an
  HTML element). User agents must not run executable code
  (e.g. scripts) embedded in the image resource. User agents must only
  display the first page of a multipage resource (e.g. a PDF
  file). User agents must not allow the resource to act in an
  interactive fashion, but should honor any animation in the
  resource.</p>

  <p>This specification does not specify which image types are to be
  supported.</p>

  <p id=img-load>The <a href=#concept-task title=concept-task>task</a> that is
  <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking
  task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a>, must act as appropriate given the
  following alternatives:</p>

  <dl class=switch><dt>If the download was successful and the image is <i title=img-available><a href=#img-available>available</a></i></dt>

   <dd><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code>
   element (this happens after <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> starts returning
   true).</dd>

   <dt>Otherwise (the fetching process failed without a response from
   the remote server, or completed but the image is not a supported
   image)</dt>

   <dd><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   named <code title=event-error>error</code> on the
   <code><a href=#the-img-element>img</a></code> element.</dd>

  </dl><p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation
  task source</a>.</p>

  <hr><p>What an <code><a href=#the-img-element>img</a></code> element represents depends on the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>

  <dl class=switch><dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
   and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to
   the empty string</dt>

   <dd>

    <p>The image is either decorative or supplemental to the rest of
    the content, redundant with some other information in the
    document.</p>

    <p>If the image is <i title=img-available><a href=#img-available>available</a></i> and the
    user agent is configured to display that image, then the element
    <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>

    <p>Otherwise, the element <a href=#represents>represents</a> nothing, and may
    be omitted completely from the rendering. User agents may provide
    the user with a notification that an image is present but has been
    omitted from the rendering.</p>

   </dd>

   <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
   and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to a
   value that isn't empty</dt>

   <dd>

    <p>The image is a key part of the content; the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute gives a textual
    equivalent or replacement for the image.</p>

    <p>If the image is <i title=img-available><a href=#img-available>available</a></i> and the
    user agent is configured to display that image, then the element
    <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>

    <p>Otherwise, the element <a href=#represents>represents</a> the text given
    by the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute. User
    agents may provide the user with a notification that an image is
    present but has been omitted from the rendering.</p>

   </dd>

   <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
   and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not</dt>

   <dd>

    <p>The image might be a key part of the content, and there is no
    textual equivalent of the image available.</p>

    <p class=note>In a conforming document, the absence of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute indicates that the image
    is a key part of the content but that a textual replacement for
    the image was not available when the image was generated.</p>

    <p>If the image is <i title=img-available><a href=#img-available>available</a></i>, the
    element <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>

    <p>If the image is not <i title=img-available><a href=#img-available>available</a></i> or
    if the user agent is not configured to display the image, then the
    user agent should display some sort of indicator that there is an
    image that is not being rendered, and may, if requested by the
    user, or if so configured, or when required to provide contextual
    information in response to navigation, provide caption information
    for the image, derived as follows:</p>

    <ol><!-- when editing this list, search for the two other occurrences
     of 'critical-no-alt' --><li><p>If the image has a <code title=attr-title><a href=#the-title-attribute>title</a></code>
     attribute whose value is not the empty string, then the value of
     that attribute is the caption information; abort these
     steps.</li>

     <li><p>If the image is the child of a <code><a href=#the-figure-element>figure</a></code> element
     that has a child <code><a href=#the-figcaption-element>figcaption</a></code> element, then the
     contents of the first such <code><a href=#the-figcaption-element>figcaption</a></code> element are
     the caption information; abort these steps.</li>

    </ol></dd>

   <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is not
   set and either the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
   is set to the empty string or the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not set at all</dt>

   <dd>

    <p>The element <a href=#represents>represents</a> nothing.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>The element <a href=#represents>represents</a> the text given by the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>

   </dd>

  </dl><p>The <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute does not
  represent advisory information. User agents must not present the
  contents of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute in
  the same way as content of the <code title=attr-title><a href=#the-title-attribute>title</a></code>
  attribute.</p>

  <p>User agents may always provide the user with the option to
  display any image, or to prevent any image from being
  displayed. User agents may also apply heuristics to help the user
  make use of the image when the user is unable to see it, e.g. due to
  a visual disability or because they are using a text terminal with
  no graphics capabilities. Such heuristics could include, for
  instance, optical character recognition (OCR) of text found within
  the image.</p>

  <p class=warning>While user agents are encouraged to repair cases
  of missing <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes, authors
  must not rely on such behavior. <a href=#alt>Requirements for
  providing text to act as an alternative for images</a> are described
  in detail below.</p>

  <p>The <em>contents</em> of <code><a href=#the-img-element>img</a></code> elements, if any, are
  ignored for the purposes of rendering.</p>

  </div>

  <hr><p>The <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute,
  if present, can indicate that the image has an associated
  <a href=#image-map>image map</a>.</p>

  <p>The <dfn id=attr-img-ismap title=attr-img-ismap><code>ismap</code></dfn>
  attribute, when used on an element that is a descendant of an
  <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, indicates by its
  presence that the element provides access to a server-side image
  map. This affects how events are handled on the corresponding
  <code><a href=#the-a-element>a</a></code> element.</p>

  <p>The <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> attribute is a
  <a href=#boolean-attribute>boolean attribute</a>. The attribute must not be specified
  on an element that does not have an ancestor <code><a href=#the-a-element>a</a></code> element
  with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute.</p>

  <p>The <code><a href=#the-img-element>img</a></code> element supports <a href=#dimension-attributes>dimension
  attributes</a>.</p>

  <div class=impl>

  <p>The IDL attributes <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn>, <dfn id=dom-img-src title=dom-img-src><code>src</code></dfn>, <dfn id=dom-img-usemap title=dom-img-useMap><code>useMap</code></dfn>, and <dfn id=dom-img-ismap title=dom-img-isMap><code>isMap</code></dfn> each must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  </div>

  <dl class=domintro><dt><var title="">image</var> . <code title=dom-img-width><a href=#dom-img-width>width</a></code> [ = <var title="">value</var> ]</dt>
   <dt><var title="">image</var> . <code title=dom-img-height><a href=#dom-img-height>height</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>These attributes return the actual rendered dimensions of the
    image, or zero if the dimensions are not known.</p>

    <p>They can be set, to change the corresponding content
    attributes.</p>

   </dd>

   <dt><var title="">image</var> . <code title=dom-img-naturalWidth><a href=#dom-img-naturalwidth>naturalWidth</a></code></dt>
   <dt><var title="">image</var> . <code title=dom-img-naturalHeight><a href=#dom-img-naturalheight>naturalHeight</a></code></dt>

   <dd>

    <p>These attributes return the intrinsic dimensions of the image,
    or zero if the dimensions are not known.</p>

   </dd>

   <dt><var title="">image</var> . <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code></dt>

   <dd>

    <p>Returns true if the image has been downloaded, decoded, and
    found to be valid; otherwise, returns false.</p>

   </dd>

   <dt><var title="">image</var> = new <code title=dom-image><a href=#dom-image>Image</a></code>( [ <var title="">width</var> [, <var title="">height</var> ] ] )</dt>

   <dd>

    <p>Returns a new <code><a href=#the-img-element>img</a></code> element, with the <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes set to the values
    passed in the relevant arguments, if applicable.</p>

   </dd>

  </dl><div class=impl>

  <p>The IDL attributes <dfn id=dom-img-width title=dom-img-width><code>width</code></dfn> and <dfn id=dom-img-height title=dom-img-height><code>height</code></dfn> must return the
  rendered width and height of the image, in CSS pixels, if the image
  is <a href=#being-rendered>being rendered</a>, and is being rendered to a visual
  medium; or else the intrinsic width and height of the image, in CSS
  pixels, if the image is <i title=img-available><a href=#img-available>available</a></i> but
  not being rendered to a visual medium; or else 0, if the image is
  not <i title=img-available><a href=#img-available>available</a></i>. <a href=#refsCSS>[CSS]</a></p>

  <p>On setting, they must act as if they <a href=#reflect title=reflect>reflected</a> the respective content attributes
  of the same name.</p>

  <p>The IDL attributes <dfn id=dom-img-naturalwidth title=dom-img-naturalWidth><code>naturalWidth</code></dfn> and
  <dfn id=dom-img-naturalheight title=dom-img-naturalHeight><code>naturalHeight</code></dfn>
  must return the intrinsic width and height of the image, in CSS
  pixels, if the image is <i title=img-available><a href=#img-available>available</a></i>, or
  else 0. <a href=#refsCSS>[CSS]</a></p>

  <p>The IDL attribute <dfn id=dom-img-complete title=dom-img-complete><code>complete</code></dfn> must return
  true if the user agent has fetched the image specified in the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and it is in a supported
  image type (i.e. it was decoded without fatal errors), even if the
  final <a href=#concept-task title=concept-task>task</a> queued by the
  <a href=#networking-task-source>networking task source</a> for the <a href=#fetch title=fetch>fetching</a> of the image resource has not yet been
  processed. Otherwise, the attribute must return false.</p>

  <p class=note>The value of <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> can thus change while a
  <a href=#concept-script title=concept-script>script</a> is executing.</p>

  <p>Three constructors are provided for creating
  <code><a href=#htmlimageelement>HTMLImageElement</a></code> objects (in addition to the factory
  methods from DOM Core such as <code title="">createElement()</code>): <dfn id=dom-image title=dom-image><code>Image()</code></dfn>, <dfn id=dom-image-w title=dom-image-w><code>Image(<var title="">width</var>)</code></dfn>, and <dfn id=dom-image-wh title=dom-image-wh><code>Image(<var title="">width</var>, <var title="">height</var>)</code></dfn>. When invoked as constructors,
  these must return a new <code><a href=#htmlimageelement>HTMLImageElement</a></code> object (a new
  <code><a href=#the-img-element>img</a></code> element). If the <var title="">width</var> argument
  is present, the new object's <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> content attribute must be set to
  <var title="">width</var>. If the <var title="">height</var>
  argument is also present, the new object's <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> content attribute must be set
  to <var title="">height</var>. The element's document must be the
  <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing context</a> of
  the <code><a href=#window>Window</a></code> object on which the interface object of the
  invoked constructor is found.</p>

  </div>

  <div class=example>

   <p>A single image can have different appropriate alternative text
   depending on the context.</p>

   <p>In each of the following cases, the same image is used, yet the
   <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> text is different each
   time. The image is the coat of arms of the Carouge municipality in
   the canton Geneva in Switzerland.</p>

   <p>Here it is used as a supplementary icon:</p>
   <pre>&lt;p&gt;I lived in &lt;img src="carouge.svg" alt=""&gt; Carouge.&lt;/p&gt;</pre>

   <p>Here it is used as an icon representing the town:</p>
   <pre>&lt;p&gt;Home town: &lt;img src="carouge.svg" alt="Carouge"&gt;&lt;/p&gt;</pre>

   <p>Here it is used as part of a text on the town:</p>

   <pre>&lt;p&gt;Carouge has a coat of arms.&lt;/p&gt;
&lt;p&gt;&lt;img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."&gt;&lt;/p&gt;
&lt;p&gt;It is used as decoration all over the town.&lt;/p&gt;</pre>

   <p>Here it is used as a way to support a similar text where the
   description is given as well as, instead of as an alternative to,
   the image:</p>

   <pre>&lt;p&gt;Carouge has a coat of arms.&lt;/p&gt;
&lt;p&gt;&lt;img src="carouge.svg" alt=""&gt;&lt;/p&gt;
&lt;p&gt;The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.&lt;/p&gt;</pre>

   <p>Here it is used as part of a story:</p>

   <pre>&lt;p&gt;He picked up the folder and a piece of paper fell out.&lt;/p&gt;
&lt;p&gt;&lt;img src="carouge.svg" alt="Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S."&gt;&lt;/p&gt;
&lt;p&gt;He stared at the folder. S! The answer he had been looking for all
this time was simply the letter S! How had he not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Marco had stuck his tongue out...&lt;/p&gt;</pre>

   <p>Here it is not known at the time of publication what the image
   will be, only that it will be a coat of arms of some kind, and thus
   no replacement text can be provided, and instead only a brief
   caption for the image is provided, in the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute:</p>

   <pre>&lt;p&gt;The last user to have uploaded a coat of arms uploaded this one:&lt;/p&gt;
&lt;p&gt;&lt;img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."&gt;&lt;/p&gt;</pre>

   <p>Ideally, the author would find a way to provide real replacement
   text even in this case, e.g. by asking the previous user. Not
   providing replacement text makes the document more difficult to use
   for people who are unable to view images, e.g. blind users, or
   users or very low-bandwidth connections or who pay by the byte, or
   users who are forced to use a text-only Web browser.</p>

  </div>

  <div class=example>

   <p>Here are some more examples showing the same picture used in
   different contexts, with different appropriate alternate texts each
   time.</p>

   <pre>&lt;article&gt;
 &lt;h1&gt;My cats&lt;/h1&gt;
 &lt;h2&gt;Fluffy&lt;/h2&gt;
 &lt;p&gt;Fluffy is my favorite.&lt;/p&gt;
 &lt;img src="fluffy.jpg" alt="She likes playing with a ball of yarn."&gt;
 &lt;p&gt;She's just too cute.&lt;/p&gt;
 &lt;h2&gt;Miles&lt;/h2&gt;
 &lt;p&gt;My other cat, Miles just eats and sleeps.&lt;/p&gt;
&lt;/article&gt;</pre>

   <pre>&lt;article&gt;
 &lt;h1&gt;Photography&lt;/h1&gt;
 &lt;h2&gt;Shooting moving targets indoors&lt;/h2&gt;
 &lt;p&gt;The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.&lt;/p&gt;
 &lt;img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
 photographed quite nicely using this technique."&gt;
 &lt;h2&gt;Nature by night&lt;/h2&gt;
 &lt;p&gt;To achieve this, you'll need either an extremely sensitive film, or
 immense flash lights.&lt;/p&gt;
&lt;/article&gt;</pre>

   <pre>&lt;article&gt;
 &lt;h1&gt;About me&lt;/h1&gt;
 &lt;h2&gt;My pets&lt;/h2&gt;
 &lt;p&gt;I've got a cat named Fluffy and a dog named Miles.&lt;/p&gt;
 &lt;img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy."&gt;
 &lt;p&gt;My dog Miles and I like go on long walks together.&lt;/p&gt;
 &lt;h2&gt;music&lt;/h2&gt;
 &lt;p&gt;After our walks, having emptied my mind, I like listening to Bach.&lt;/p&gt;
&lt;/article&gt;</pre>

   <pre>&lt;article&gt;
 &lt;h1&gt;Fluffy and the Yarn&lt;/h1&gt;
 &lt;p&gt;Fluffy was a cat who liked to play with yarn. He also liked to jump.&lt;/p&gt;
 &lt;aside&gt;&lt;img src="fluffy.jpg" alt="" title="Fluffy"&gt;&lt;/aside&gt;
 &lt;p&gt;He would play in the morning, he would play in the evening.&lt;/p&gt;
&lt;/article&gt;</pre>

  </div>



  <h5 id=alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</h5>

  <p>Except where otherwise specified, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be specified and its
  value must not be empty; the value must be an appropriate
  replacement for the image. The specific requirements for the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute depend on what the image
  is intended to represent, as described in the following
  sections.</p>


  <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</h6>

  <p>When an <a href=#the-a-element>a</a> element that is a <a href=#hyperlink>hyperlink</a>,
  or a <code><a href=#the-button-element>button</a></code> element, has no textual content but
  contains one or more images, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes must contain text that
  together convey the purpose of the link or button.</p>

  <div class=example>

   <p>In this example, a user is asked to pick his preferred color
   from a list of three. Each color is given by an image, but for
   users who have configured their user agent not to display images,
   the color names are used instead:</p>

   <pre>&lt;h1&gt;Pick your color&lt;/h1&gt;
&lt;ul&gt;
 &lt;li&gt;&lt;a href="green.html"&gt;<strong>&lt;img src="green.jpeg" alt="Green"&gt;</strong>&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="blue.html"&gt;<strong>&lt;img src="blue.jpeg" alt="Blue"&gt;</strong>&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="red.html"&gt;<strong>&lt;img src="red.jpeg" alt="Red"&gt;</strong>&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

  </div>

  <div class=example>

   <p>In this example, each button has a set of images to indicate the
   kind of color output desired by the user. The first image is used
   in each case to give the alternative text.</p>

   <pre>&lt;button name="rgb"&gt;<strong>&lt;img src="red" alt="RGB"&gt;&lt;img src="green" alt=""&gt;&lt;img src="blue" alt=""&gt;</strong>&lt;/button&gt;
&lt;button name="cmyk"&gt;<strong>&lt;img src="cyan" alt="CMYK"&gt;&lt;img src="magenta" alt=""&gt;&lt;img src="yellow" alt=""&gt;&lt;img src="black" alt=""&gt;</strong>&lt;/button&gt;</pre>

   <p>Since each image represents one part of the text, it could also
   be written like this:</p>

   <pre>&lt;button name="rgb"&gt;<strong>&lt;img src="red" alt="R"&gt;&lt;img src="green" alt="G"&gt;&lt;img src="blue" alt="B"&gt;</strong>&lt;/button&gt;
&lt;button name="cmyk"&gt;<strong>&lt;img src="cyan" alt="C"&gt;&lt;img src="magenta" alt="M"&gt;&lt;img src="yellow" alt="Y"&gt;&lt;img src="black" alt="K"&gt;</strong>&lt;/button&gt;</pre>

   <p>However, with other alternative text, this might not work, and
   putting all the alternative text into one image in each case might
   make more sense:</p>

   <pre>&lt;button name="rgb"&gt;<strong>&lt;img src="red" alt="sRGB profile"&gt;&lt;img src="green" alt=""&gt;&lt;img src="blue" alt=""&gt;</strong>&lt;/button&gt;
&lt;button name="cmyk"&gt;<strong>&lt;img src="cyan" alt="CMYK profile"&gt;&lt;img src="magenta" alt=""&gt;&lt;img src="yellow" alt=""&gt;&lt;img src="black" alt=""&gt;</strong>&lt;/button&gt;</pre>

  </div>



  <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>

  <p>Sometimes something can be more clearly stated in graphical
  form, for example as a flowchart, a diagram, a graph, or a simple
  map showing directions. In such cases, an image can be given using
  the <code><a href=#the-img-element>img</a></code> element, but the lesser textual version must
  still be given, so that users who are unable to view the image
  (e.g. because they have a very slow connection, or because they
  are using a text-only browser, or because they are listening to
  the page being read out by a hands-free automobile voice Web
  browser, or simply because they are blind) are still able to
  understand the message being conveyed.</p>

  <p>The text must be given in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute, and must convey the
  same message as the image specified in the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>

  <p>It is important to realize that the alternative text is a
  <em>replacement</em> for the image, not a description of the
  image.</p>

  <div class=example>

   <p>In the following example we have <a href=images/parsing-model-overview.png>a flowchart</a> in image
   form, with text in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   attribute rephrasing the flowchart in prose form:</p>

   <pre>&lt;p&gt;In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.&lt;/p&gt;
&lt;p&gt;<strong>&lt;img src="images/parsing-model-overview.png" alt="The network
passes data to the Tokenizer stage, which passes data to the Tree
Construction stage. From there, data goes to both the DOM and to
Script Execution. Script Execution is linked to the DOM, and, using
document.write(), passes data to the Tokenizer."&gt;</strong>&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>Here's another example, showing a good solution and a bad
   solution to the problem of including an image in a
   description.</p>

   <p>First, here's the good solution. This sample shows how the
   alternative text should just be what you would have put in the
   prose if the image had never existed.</p>

   <pre>&lt;!-- This is the correct way to do things. --&gt;
&lt;p&gt;
 You are standing in an open field west of a house.
 <strong>&lt;img src="house.jpeg" alt="The house is white, with a boarded front door."&gt;</strong>
 There is a small mailbox here.
&lt;/p&gt;</pre>

   <p>Second, here's the bad solution. In this incorrect way of
   doing things, the alternative text is simply a description of the
   image, instead of a textual replacement for the image. It's bad
   because when the image isn't shown, the text doesn't flow as well
   as in the first example.</p>

   <pre class=bad>&lt;!-- <em>This is the wrong way to do things.</em> --&gt;
&lt;p&gt;
 You are standing in an open field west of a house.
 &lt;img src="house.jpeg" alt="A white house, with a boarded front door."&gt;
 There is a small mailbox here.
&lt;/p&gt;</pre>

   <p>Text such as "Photo of white house with boarded door" would be
   equally bad alternative text (though it could be suitable for the
   <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute or in the
   <code><a href=#the-figcaption-element>figcaption</a></code> element of a <code><a href=#the-figure-element>figure</a></code> with this
   image).</p>

  </div>


  <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>

  <p>A document can contain information in iconic form. The icon is
  intended to help users of visual browsers to recognize features at
  a glance.</p>

  <p>In some cases, the icon is supplemental to a text label
  conveying the same meaning. In those cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be present but must
  be empty.</p>

  <div class=example>

   <p>Here the icons are next to text that conveys the same meaning,
   so they have an empty <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   attribute:</p>

   <pre>&lt;nav&gt;
 &lt;p&gt;&lt;a href="/help/"&gt;<strong>&lt;img src="/icons/help.png" alt=""&gt;</strong> Help&lt;/a&gt;&lt;/p&gt;
 &lt;p&gt;&lt;a href="/configure/"&gt;<strong>&lt;img src="/icons/configuration.png" alt=""&gt;</strong>
 Configuration Tools&lt;/a&gt;&lt;/p&gt;
&lt;/nav&gt;</pre>

  </div>

  <p>In other cases, the icon has no text next to it describing what
  it means; the icon is supposed to be self-explanatory. In those
  cases, an equivalent textual label must be given in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>

  <div class=example>

   <p>Here, posts on a news site are labeled with an icon
   indicating their topic.</p>

   <pre>&lt;body&gt;
 &lt;article&gt;
  &lt;header&gt;
   &lt;h1&gt;Ratatouille wins &lt;i&gt;Best Movie of the Year&lt;/i&gt; award&lt;/h1&gt;
   &lt;p&gt;<strong>&lt;img src="movies.png" alt="Movies"&gt;</strong>&lt;/p&gt;
  &lt;/header&gt;
  &lt;p&gt;Pixar has won yet another &lt;i&gt;Best Movie of the Year&lt;/i&gt; award,
  making this its 8th win in the last 12 years.&lt;/p&gt;
 &lt;/article&gt;
 &lt;article&gt;
  &lt;header&gt;
   &lt;h1&gt;Latest TWiT episode is online&lt;/h1&gt;
   &lt;p&gt;<strong>&lt;img src="podcasts.png" alt="Podcasts"&gt;</strong>&lt;/p&gt;
  &lt;/header&gt;
  &lt;p&gt;The latest TWiT episode has been posted, in which we hear
  several tech news stories as well as learning much more about the
  iPhone. This week, the panelists compare how reflective their
  iPhones' Apple logos are.&lt;/p&gt;
 &lt;/article&gt;
&lt;/body&gt;</pre>

  </div>

  <p>Many pages include logos, insignia, flags, or emblems, which
  stand for a particular entity such as a company, organization,
  project, band, software package, country, or some such.</p>

  <p>If the logo is being used to represent the entity, e.g. as a page
  heading, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must
  contain the name of the entity being represented by the logo. The
  <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must <em>not</em>
  contain text like the word "logo", as it is not the fact that it is
  a logo that is being conveyed, it's the entity itself.</p>

  <p>If the logo is being used next to the name of the entity that
  it represents, then the logo is supplemental, and its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must instead be
  empty.</p>

  <p>If the logo is merely used as decorative material (as branding,
  or, for example, as a side image in an article that mentions the
  entity to which the logo belongs), then the entry below on purely
  decorative images applies. If the logo is actually being
  discussed, then it is being used as a phrase or paragraph (the
  description of the logo) with an alternative graphical
  representation (the logo itself), and the first entry above
  applies.</p>

  <div class=example>

   <p>In the following snippets, all four of the above cases are
   present. First, we see a logo used to represent a company:</p>

   <pre>&lt;h1&gt;<strong>&lt;img src="XYZ.gif" alt="The XYZ company"&gt;</strong>&lt;/h1&gt;</pre>

   <p>Next, we see a paragraph which uses a logo right next to the
   company name, and so doesn't have any alternative text:

   <pre>&lt;article&gt;
 &lt;h2&gt;News&lt;/h2&gt;
 &lt;p&gt;We have recently been looking at buying the <strong>&lt;img src="alpha.gif"
 alt=""&gt; &Alpha;&Beta;&Gamma; company</strong>, a small Greek company
 specializing in our type of product.&lt;/p&gt;</pre>

   <p>In this third snippet, we have a logo being used in an aside,
   as part of the larger article discussing the acquisition:</p>

<pre> <strong>&lt;aside&gt;&lt;p&gt;&lt;img src="alpha-large.gif" alt=""&gt;&lt;/p&gt;&lt;/aside&gt;</strong>
 &lt;p&gt;The &Alpha;&Beta;&Gamma; company has had a good quarter, and our
 pie chart studies of their accounts suggest a much bigger blue slice
 than its green and orange slices, which is always a good sign.&lt;/p&gt;
&lt;/article&gt;</pre>

   <p>Finally, we have an opinion piece talking about a logo, and
   the logo is therefore described in detail in the alternative
   text.</p>

   <pre>&lt;p&gt;Consider for a moment their logo:&lt;/p&gt;

<strong>&lt;p&gt;&lt;img src="/images/logo" alt="It consists of a green circle with a
green question mark centered inside it."&gt;&lt;/p&gt;</strong>

&lt;p&gt;How unoriginal can you get? I mean, oooooh, a question mark, how
&lt;em&gt;revolutionary&lt;/em&gt;, how utterly &lt;em&gt;ground-breaking&lt;/em&gt;, I'm
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don't know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.&lt;/p&gt;</pre>

   <p>This example shows how the alternative text should be written
   such that if the image isn't <i title=img-available><a href=#img-available>available</a></i>, and the text is used instead,
   the text flows seamlessly into the surrounding text, as if the
   image had never been there in the first place.</p>

  </div>


  <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>

  <p>Sometimes, an image just consists of text, and the purpose of the
  image is not to highlight the actual typographic effects used to
  render the text, but just to convey the text itself.</p>

  <p>In such cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
  attribute must be present but must consist of the same text as
  written in the image itself.</p>

  <div class=example>

   <p>Consider a graphic containing the text "Earth Day", but with the
   letters all decorated with flowers and plants. If the text is
   merely being used as a heading, to spice up the page for graphical
   users, then the correct alternative text is just the same text
   "Earth Day", and no mention need be made of the decorations:</p>

   <pre>&lt;h1&gt;<strong>&lt;img src="earthdayheading.png" alt="Earth Day"&gt;</strong>&lt;/h1&gt;</pre>

  </div>



  <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</h6>

  <p>In many cases, the image is actually just supplementary, and
  its presence merely reinforces the surrounding text. In these
  cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be
  present but its value must be the empty string.</p>

  <p>In general, an image falls into this category if removing the
  image doesn't make the page any less useful, but including the
  image makes it a lot easier for users of visual browsers to
  understand the concept.</p>

  <div class=example>

   <p>A flowchart that repeats the previous paragraph in graphical form:</p>

   <pre>&lt;p&gt;The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.&lt;/p&gt;
<strong>&lt;p&gt;&lt;img src="images/parsing-model-overview.png" alt=""&gt;&lt;/p&gt;</strong></pre>

   <p>In these cases, it would be wrong to include alternative text
   that consists of just a caption. If a caption is to be included,
   then either the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute can
   be used, or the <code><a href=#the-figure-element>figure</a></code> and <code><a href=#the-figcaption-element>figcaption</a></code>
   elements can be used. In the latter case, the image would in fact
   be a phrase or paragraph with an alternative graphical
   representation, and would thus require alternative text.</p>

   <pre>&lt;!-- Using the title="" attribute --&gt;
&lt;p&gt;The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.&lt;/p&gt;
&lt;p&gt;<strong>&lt;img src="images/parsing-model-overview.png" alt=""
        title="Flowchart representation of the parsing model."&gt;</strong>&lt;/p&gt;</pre>

   <pre>&lt;!-- Using &lt;figure&gt; and &lt;figcaption&gt; --&gt;
&lt;p&gt;The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.&lt;/p&gt;
&lt;figure&gt;
 <strong>&lt;img src="images/parsing-model-overview.png" alt="The Network leads
 to the Tokenizer, which leads to the Tree Construction. The Tree
 Construction leads to two items. The first is Script Execution, which
 leads via document.write() back to the Tokenizer. The second item
 from which Tree Construction leads is the DOM. The DOM is related to
 the Script Execution."&gt;</strong>
 &lt;figcaption&gt;Flowchart representation of the parsing model.&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

   <pre class=bad>&lt;!-- This is WRONG. Do not do this. Instead, do what the above examples do. --&gt;
&lt;p&gt;The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.&lt;/p&gt;
&lt;p&gt;&lt;img src="images/parsing-model-overview.png"
        alt="Flowchart representation of the parsing model."&gt;&lt;/p&gt;
&lt;!-- Never put the image's caption in the alt="" attribute! --&gt;</pre>

  </div>

  <div class=example>

   <p>A graph that repeats the previous paragraph in graphical form:</p>

   <pre>&lt;p&gt;According to a study covering several billion pages,
about 62% of documents on the Web in 2007 triggered the Quirks
rendering mode of Web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.&lt;/p&gt;
<strong>&lt;p&gt;&lt;img src="rendering-mode-pie-chart.png" alt=""&gt;&lt;/p&gt;</strong></pre>

  </div>



  <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</h6>

  <p>In general, if an image is decorative but isn't especially
  page-specific, for example an image that forms part of a site-wide
  design scheme, the image should be specified in the site's CSS,
  not in the markup of the document.</p>

  <p>However, a decorative image that isn't discussed by the
  surrounding text but still has some relevance can be included in a page
  using the <code><a href=#the-img-element>img</a></code> element. Such images are decorative, but
  still form part of the content. In these cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be present but its
  value must be the empty string.</p>

  <div class=example>

   <p>Examples where the image is purely decorative despite being
   relevant would include things like a photo of the Black Rock City
   landscape in a blog post about an event at Burning Man, or an
   image of a painting inspired by a poem, on a page reciting that
   poem. The following snippet shows an example of the latter
   case (only the first verse is included in this snippet):</p>

   <pre>&lt;h1&gt;The Lady of Shalott&lt;/h1&gt;
<strong>&lt;p&gt;&lt;img src="shalott.jpeg" alt=""&gt;&lt;/p&gt;</strong>
&lt;p&gt;On either side the river lie&lt;br&gt;
Long fields of barley and of rye,&lt;br&gt;
That clothe the wold and meet the sky;&lt;br&gt;
And through the field the road run by&lt;br&gt;
To many-tower'd Camelot;&lt;br&gt;
And up and down the people go,&lt;br&gt;
Gazing where the lilies blow&lt;br&gt;
Round an island there below,&lt;br&gt;
The island of Shalott.&lt;/p&gt;</pre>

  </div>



  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</h6>

  <p>When a picture has been sliced into smaller image files that are
  then displayed together to form the complete picture again, one of
  the images must have its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
  attribute set as per the relevant rules that would be appropriate
  for the picture as a whole, and then all the remaining images must
  have their <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute set to
  the empty string.</p>

  <div class=example>

   <p>In the following example, a picture representing a company logo
   for <span title="">XYZ Corp</span> has been split into two pieces,
   the first containing the letters "XYZ" and the second with the word
   "Corp". The alternative text ("XYZ Corp") is all in the first
   image.</p>

   <pre>&lt;h1&gt;<strong>&lt;img src="logo1.png" alt="XYZ Corp"&gt;&lt;img src="logo2.png" alt=""&gt;</strong>&lt;/h1&gt;</pre>

  </div>

  <div class=example>

   <p>In the following example, a rating is shown as three filled
   stars and two empty stars. While the alternative text could have
   been "&#9733;&#9733;&#9733;&#9734;&#9734;", the author has
   instead decided to more helpfully give the rating in the form "3
   out of 5". That is the alternative text of the first image, and the
   rest have blank alternative text.</p>

   <pre>&lt;p&gt;Rating: &lt;meter max=5 value=3&gt;<strong>&lt;img src="1" alt="3 out of 5"
  &gt;&lt;img src="1" alt=""&gt;&lt;img src="1" alt=""&gt;&lt;img src="0" alt=""
  &gt;&lt;img src="0" alt=""&gt;</strong>&lt;/meter&gt;&lt;/p&gt;</pre>

  </div>



  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</h6>

  <p>Generally, <a href=#image-map title="image map">image maps</a> should be
  used instead of slicing an image for links.</p>

  <p>However, if an image is indeed sliced and any of the components
  of the sliced picture are the sole contents of links, then one image
  per link must have alternative text in its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute representing the purpose
  of the link.</p>

  <div class=example>

   <p>In the following example, a picture representing the flying
   spaghetti monster emblem, with each of the left noodly appendages
   and the right noodly appendages in different images, so that the
   user can pick the left side or the right side in an adventure.</p>

   <pre>&lt;h1&gt;The Church&lt;/h1&gt;
&lt;p&gt;You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?&lt;/p&gt;
<strong>&lt;p&gt;&lt;a href="?go=left" &gt;&lt;img src="fsm-left.png"  alt="Left side. "&gt;&lt;/a
  &gt;&lt;img src="fsm-middle.png" alt=""
  &gt;&lt;a href="?go=right"&gt;&lt;img src="fsm-right.png" alt="Right side."&gt;&lt;/a&gt;&lt;/p&gt;</strong></pre>

  </div>



  <h6 id=a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</h6>

  <p>In some cases, the image is a critical part of the
  content. This could be the case, for instance, on a page that is
  part of a photo gallery. The image is the whole <em>point</em> of
  the page containing it.</p>

  <p>How to provide alternative text for an image that is a key part
  of the content depends on the image's provenance.</p>

  <dl><dt>The general case</dt>

   <dd>

    <p>When it is possible for detailed alternative text to be
    provided, for example if the image is part of a series of
    screenshots in a magazine review, or part of a comic strip, or is
    a photograph in a blog entry about that photograph, text that can
    serve as a substitute for the image must be given as the contents
    of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>

    <div class=example>

     <p>A screenshot in a gallery of screenshots for a new OS, with
     some alternative text:</p>

     <pre>&lt;figure&gt;
 <strong>&lt;img src="KDE%20Light%20desktop.png"
      alt="The desktop is blue, with icons along the left hand side in
           two columns, reading System, Home, K-Mail, etc. A window is
           open showing that menus wrap to a second line if they
           cannot fit in the window. The window has a list of icons
           along the top, with an address bar below it, a list of
           icons for tabs along the left edge, a status bar on the
           bottom, and two panes in the middle. The desktop has a bar
           at the bottom of the screen with a few buttons, a pager, a
           list of open applications, and a clock."&gt;</strong>
 &lt;figcaption&gt;Screenshot of a KDE desktop.&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

    </div>

    <div class=example>

     <p>A graph in a financial report:</p>

     <pre><strong>&lt;img src="sales.gif"
     title="Sales graph"
     alt="From 1998 to 2005, sales increased by the following percentages
     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%"&gt;</strong></pre>

     <p>Note that "sales graph" would be inadequate alternative text
     for a sales graph. Text that would be a good <em>caption</em> is
     not generally suitable as replacement text.</p>

    </div>

   </dd>


   <dt>Images that defy a complete description</dt>

   <dd>

    <p>In certain cases, the nature of the image might be such that
    providing thorough alternative text is impractical. For example,
    the image could be indistinct, or could be a complex fractal, or
    could be a detailed topographical map.</p>

    <p>In these cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
    attribute must contain some suitable alternative text, but it may
    be somewhat brief.</p>

    <div class=example>

     <p>Sometimes there simply is no text that can do justice to an
     image. For example, there is little that can be said to usefully
     describe a Rorschach inkblot test. However, a description, even
     if brief, is still better than nothing:</p>

     <pre>&lt;figure&gt;
 <strong>&lt;img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
 symmetry with indistinct edges, with a small gap in the center, two
 larger gaps offset slightly from the center, with two similar gaps
 under them. The outline is wider in the top half than the bottom
 half, with the sides extending upwards higher than the center, and
 the center extending below the sides."&gt;</strong>
 &lt;figcaption&gt;A black outline of the first of the ten cards
 in the Rorschach inkblot test.&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

     <p>Note that the following would be a very bad use of alternative
     text:</p>

     <pre class=bad>&lt;!-- This example is wrong. Do not copy it. --&gt;
&lt;figure&gt;
 &lt;img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
 of the first of the ten cards in the Rorschach inkblot test."&gt;
 &lt;figcaption&gt;A black outline of the first of the ten cards
 in the Rorschach inkblot test.&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

     <p>Including the caption in the alternative text like this isn't
     useful because it effectively duplicates the caption for users
     who don't have images, taunting them twice yet not helping them
     any more than if they had only read or heard the caption
     once.</p>

    </div>

    <div class=example>

     <p>Another example of an image that defies full description is a
     fractal, which, by definition, is infinite in detail.</p>

     <p>The following example shows one possible way of providing
     alternative text for the full view of an image of the Mandelbrot
     set.</p>

     <pre><strong>&lt;img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
its cusp on the real axis in the positive direction, with a smaller
bulb aligned along the same center line, touching it in the negative
direction, and with these two shapes being surrounded by smaller bulbs
of various sizes."&gt;</strong></pre>

    </div>

   </dd>


   <dt id=unknown-images>Images whose contents are not known</dt>

   <dd>

    <p>In some unfortunate cases, there might be no alternative text
    available at all, either because the image is obtained in some
    automated fashion without any associated alternative text (e.g. a
    Webcam), or because the page is being generated by a script using
    user-provided images where the user did not provide suitable or
    usable alternative text (e.g. photograph sharing sites), or
    because the author does not himself know what the images represent
    (e.g. a blind photographer sharing an image on his blog).</p>

    <p>In such cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
    attribute's value may be omitted, but one of the following
    conditions must be met as well:</p>

    <ul><!-- when editing this list, search for the two other occurrences
     of 'critical-no-alt' --><li>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is
     present and has a non-empty value.</li>

     <li>The <code><a href=#the-img-element>img</a></code> element is in a <code><a href=#the-figure-element>figure</a></code>
     element that contains a <code><a href=#the-figcaption-element>figcaption</a></code> element that
     contains content other than <a href=#inter-element-whitespace>inter-element
     whitespace</a>.</li>

    </ul><p class=note>Such cases are to be kept to an absolute
    minimum. If there is even the slightest possibility of the author
    having the ability to provide real alternative text, then it would
    not be acceptable to omit the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
    attribute.</p>

    <div class=example>

     <p>A photo on a photo-sharing site, if the site received the
     image with no metadata other than the caption, could be marked up
     as follows:</p>

     <pre>&lt;figure&gt;
 <strong>&lt;img src="1100670787_6a7c664aef.jpg"&gt;</strong>
 &lt;figcaption&gt;Bubbles traveled everywhere with us.&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

     <p>It would be better, however, if a detailed description of the
     important parts of the image obtained from the user and included
     on the page.</p>

    </div>

    <div class=example>

     <p>A blind user's blog in which a photo taken by the user is
     shown. Initially, the user might not have any idea what the photo
     he took shows:</p>

     <pre>&lt;article&gt;
 &lt;h1&gt;I took a photo&lt;/h1&gt;
 &lt;p&gt;I went out today and took a photo!&lt;/p&gt;
 &lt;figure&gt;
  <strong>&lt;img src="photo2.jpeg"&gt;</strong>
  &lt;figcaption&gt;A photograph taken blindly from my front porch.&lt;/figcaption&gt;
 &lt;/figure&gt;
&lt;/article&gt;</pre>

     <p>Eventually though, the user might obtain a description of the
     image from his friends and could then include alternative text:</p>

     <pre>&lt;article&gt;
 &lt;h1&gt;I took a photo&lt;/h1&gt;
 &lt;p&gt;I went out today and took a photo!&lt;/p&gt;
 &lt;figure&gt;
  <strong>&lt;img src="photo2.jpeg" alt="The photograph shows my hummingbird
  feeder hanging from the edge of my roof. It is half full, but there
  are no birds around. In the background, out-of-focus trees fill the
  shot. The feeder is made of wood with a metal grate, and it contains
  peanuts. The edge of the roof is wooden too, and is painted white
  with light blue streaks."&gt;</strong>
  &lt;figcaption&gt;A photograph taken blindly from my front porch.&lt;/figcaption&gt;
 &lt;/figure&gt;
&lt;/article&gt;</pre>

    </div>

    <div class=example>

     <p>Sometimes the entire point of the image is that a textual
     description is not available, and the user is to provide the
     description. For instance, the point of a CAPTCHA image is to see
     if the user can literally read the graphic. Here is one way to
     mark up a CAPTCHA (note the <code title=attr-title><a href=#the-title-attribute>title</a></code>
     attribute):</p>

     <pre>&lt;p&gt;&lt;label&gt;What does this image say?
<strong>&lt;img src="captcha.cgi?id=8934" title="CAPTCHA"&gt;</strong>
&lt;input type=text name=captcha&gt;&lt;/label&gt;
(If you cannot see the image, you can use an &lt;a
href="?audio"&gt;audio&lt;/a&gt; test instead.)&lt;/p&gt;</pre>

     <p>Another example would be software that displays images and
     asks for alternative text precisely for the purpose of then
     writing a page with correct alternative text. Such a page could
     have a table of images, like this:</p>

     <pre>&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt; &lt;th&gt; Image &lt;th&gt; Description
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt; <strong>&lt;img src="2421.png" title="Image 640 by 100, filename 'banner.gif'"&gt;</strong>
   &lt;td&gt; &lt;input name="alt2421"&gt;
  &lt;tr&gt;
   &lt;td&gt; <strong>&lt;img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'"&gt;</strong>
   &lt;td&gt; &lt;input name="alt2422"&gt;
&lt;/table&gt;</pre>

     <p>Notice that even in this example, as much useful information
     as possible is still included in the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute.</p>

    </div>

    <p class=note>Since some users cannot use images at all
    (e.g. because they have a very slow connection, or because they
    are using a text-only browser, or because they are listening to
    the page being read out by a hands-free automobile voice Web
    browser, or simply because they are blind), the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is only allowed to be
    omitted rather than being provided with replacement text when no
    alternative text is available and none can be made available, as
    in the above examples. Lack of effort from the part of the author
    is not an acceptable reason for omitting the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>

   </dd>

  </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</h6>

  <p>Generally authors should avoid using <code><a href=#the-img-element>img</a></code> elements
  for purposes other than showing images.</p>

  <p>If an <code><a href=#the-img-element>img</a></code> element is being used for purposes other
  than showing an image, e.g. as part of a service to count page
  views, then the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must
  be the empty string.</p>

  <p>In such cases, the <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and
  <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes should both
  be set to zero.</p>



  <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>

  <p><i>This section does not apply to documents that are publicly
  accessible, or whose target audience is not necessarily personally
  known to the author, such as documents on a Web site, e-mails sent
  to public mailing lists, or software documentation.</i></p>

  <p>When an image is included in a private communication (such as an
  HTML e-mail) aimed at a specific person who is known to be able to
  view images, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute may
  be omitted. However, even in such cases it is strongly recommended
  that alternative text be included (as appropriate according to the
  kind of image involved, as described in the above entries), so that
  the e-mail is still usable should the user use a mail client that
  does not support images, or should the document be forwarded on to
  other users whose abilities might not include easily seeing
  images.</p>



  <h6 id=general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</h6>

  <p>The most general rule to consider when writing alternative text
  is the following: <strong>the intent is that replacing every image
  with the text of its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
  not change the meaning of the page</strong>.</p>

  <p>So, in general, alternative text can be written by considering
  what one would have written had one not been able to include the
  image.</p>

  <p>A corollary to this is that the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute's value should never
  contain text that could be considered the image's <em>caption</em>,
  <em>title</em>, or <em>legend</em>. It is supposed to contain
  replacement text that could be used by users <em>instead</em> of the
  image; it is not meant to supplement the image. The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute can be used for
  supplemental information.</p>

  <p class=note>One way to think of alternative text is to think
  about how you would read the page containing the image to someone
  over the phone, without mentioning that there is an image
  present. Whatever you say instead of the image is typically a good
  start for writing the alternative text.</p>


  <div class=impl>

  <h6 id=guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</h6>

  <p>Markup generators (such as WYSIWYG authoring tools) should,
  wherever possible, obtain alternative text from their
  users. However, it is recognized that in many cases, this will not
  be possible.</p>

  <p>For images that are the sole contents of links, markup generators
  should examine the link target to determine the title of the target,
  or the URL of the target, and use information obtained in this
  manner as the alternative text.</p>

  <p>As a last resort, implementors should either set the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute to the empty string, under
  the assumption that the image is a purely decorative image that
  doesn't add any information but is still specific to the surrounding
  content, or omit the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
  altogether, under the assumption that the image is a key part of the
  content.</p>

  <p>Markup generators should generally avoid using the image's own
  file name as the alternative text. Similarly, markup generators
  should avoid generating alternative text from any content that will
  be equally available to presentation user agents (e.g. Web
  browsers).</p>

  <p class=note>This is because once a page is generated, it will
  typically not be updated, whereas the browsers that later read the
  page can be updated by the user, therefore the browser is likely to
  have more up-to-date and finely-tuned heuristics than the markup
  generator did when generating the page.</p>

  </div>

  <div class=impl>

  <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</h6>

  <p>A conformance checker must report the lack of an <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute as an error unless one of
  the conditions listed below applies:</p>

  <ul><!-- when editing this list, search for the two other occurrences
   of 'critical-no-alt' --><li>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is present
   and has a non-empty value (as <a href=#unknown-images>described
   above</a>).</li>

   <li>The <code><a href=#the-img-element>img</a></code> element is in a <code><a href=#the-figure-element>figure</a></code>
   element that contains a <code><a href=#the-figcaption-element>figcaption</a></code> element that
   contains content other than <a href=#inter-element-whitespace>inter-element whitespace</a>
   (as <a href=#unknown-images>described above</a>).</li>

   <!-- the following are additional entries not included in the
   aforementioned list, as they apply only to conformance checkers -->

   <li>The conformance checker has been configured to assume that the
   document is an e-mail or document intended for a specific person
   who is known to be able to view images.</li>

   <li>The document has a <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute whose value is an
   <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title=meta-generator><a href=#meta-generator>generator</a></code>". (This case does not
   represent a case where the document is conforming, only that the
   generator could not determine appropriate alternative text &mdash;
   validators are required to not show an error in this case to
   discourage markup generators from including bogus alternative text
   purely in an attempt to silence validators.)</li>

  </ul></div>



  <h4 id=the-iframe-element><span class=secno>4.8.2 </span>The <dfn><code>iframe</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#embedded-content>Embedded content</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Text that conforms to the requirements given in the prose.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code></dd>
   <dd><code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code></dd>
   <dd><code title=attr-iframe-name><a href=#attr-iframe-name>name</a></code></dd>
   <dd><code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code></dd>
   <dd><code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code></dd>
   <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmliframeelement>HTMLIFrameElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-iframe-src title=dom-iframe-src>src</a>;
           attribute DOMString <a href=#dom-iframe-srcdoc title=dom-iframe-srcdoc>srcdoc</a>;
           attribute DOMString <a href=#dom-iframe-name title=dom-iframe-name>name</a>;
  [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-iframe-sandbox title=dom-iframe-sandbox>sandbox</a>;
           attribute boolean <a href=#dom-iframe-seamless title=dom-iframe-seamless>seamless</a>;
           attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;
           attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
  readonly attribute Document <a href=#dom-iframe-contentdocument title=dom-iframe-contentDocument>contentDocument</a>;
  readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-iframe-contentwindow title=dom-iframe-contentWindow>contentWindow</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-iframe-element>iframe</a></code> element <a href=#represents>represents</a> a
  <a href=#nested-browsing-context>nested browsing context</a>.</p>

  <p>The <dfn id=attr-iframe-src title=attr-iframe-src><code>src</code></dfn> attribute
  gives the address of a page that the <a href=#nested-browsing-context>nested browsing
  context</a> is to contain. The attribute, if present, must be a
  <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a>.</p>

  <p>The <dfn id=attr-iframe-srcdoc title=attr-iframe-srcdoc><code>srcdoc</code></dfn>
  attribute gives the content of the page that the <a href=#nested-browsing-context>nested
  browsing context</a> is to contain.  The value of the attribute
  in is <dfn id=an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</dfn>.</p>

  <p>For <code><a href=#the-iframe-element>iframe</a></code> elements in <a href=#html-documents>HTML documents</a>,
  the attribute, if present, must have a value using <a href=#syntax>the HTML
  syntax</a> that consists of the following syntactic components,
  in the given order:</p>

  <ol><li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   <a href=#space-character title="space character">space characters</a>.</li>

   <li>Optionally, a <a href=#syntax-doctype title=syntax-doctype>DOCTYPE</a>.

   <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   <a href=#space-character title="space character">space characters</a>.</li>

   <li>The root element, in the form of an <code><a href=#the-html-element-0>html</a></code> <a href=#syntax-elements title=syntax-elements>element</a>.</li>

   <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   <a href=#space-character title="space character">space characters</a>.</li>

  </ol><p>For <code><a href=#the-iframe-element>iframe</a></code> elements in <a href=#xml-documents>XML documents</a>,
  the attribute, if present, must have a value that matches the
  production labeled <code><a href=#document>document</a></code> in the XML
  specification. <a href=#refsXML>[XML]</a></p>

  <p>If the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute and the
  <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute are both
  specified together, the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code>
  attribute takes priority. This allows authors to provide a fallback
  <a href=#url>URL</a> for legacy user agents that do not support the
  <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute.</p>

  <div class=impl>

  <p>When an <code><a href=#the-iframe-element>iframe</a></code> element is first <a href=#insert-an-element-into-a-document title="insert
  an element into a document">inserted into a document</a>, the
  user agent must create a <a href=#nested-browsing-context>nested browsing context</a>, and
  then <a href=#process-the-iframe-attributes>process the <code>iframe</code> attributes</a> for the
  first time.</p>

  <p>Whenever an <code><a href=#the-iframe-element>iframe</a></code> element with a <a href=#nested-browsing-context>nested
  browsing context</a> has its <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute set or changed,
  the user agent must <a href=#process-the-iframe-attributes>process the <code>iframe</code>
  attributes</a>.</p>

  <p>Similarly, whenever an <code><a href=#the-iframe-element>iframe</a></code> element with a
  <a href=#nested-browsing-context>nested browsing context</a> but with no <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute specified has its
  <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute set or changed,
  the user agent must <a href=#process-the-iframe-attributes>process the <code>iframe</code>
  attributes</a>.</p> <!-- It doesn't happen when the base URL is
  changed, though. -->

  <p>When the user agent is to <dfn id=process-the-iframe-attributes>process the <code>iframe</code>
  attributes</dfn>, it must run the first appropriate steps from the
  following list:</p>

  <dl class=switch><dt>If the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute
   is specified</dt>

   <dd><p><a href=#navigate>Navigate</a> the element's <a href=#browsing-context>browsing
   context</a> to a resource whose <a href=#content-type>Content-Type</a> is
   <code><a href=#text/html>text/html</a></code>, whose <a href=#url>URL</a> is
   <code><a href=#about:srcdoc>about:srcdoc</a></code>, and whose data consists of the value of
   the attribute.</dd>

   <dt>If the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code>
   attribute is specified but the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute is not</dt>

   <dd>

    <ol><li><p>If the value of the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute is the empty string,
     jump to the <i title="">empty</i> step below.</li>

     <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the value of
     the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute, relative
     to the <code><a href=#the-iframe-element>iframe</a></code> element.</li>

     <li><p>If that is not successful, then jump to the <i title="">empty</i> step below.</li>

     <li><p>If the resulting <a href=#absolute-url>absolute URL</a> is an
     <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
     "<code><a href=#about:blank>about:blank</a></code>", and the user agent is processing this
     <code><a href=#the-iframe-element>iframe</a></code>'s attributes for the first time, then jump to
     the <i title="">empty</i> step below. (In cases other than the
     first time, <code><a href=#about:blank>about:blank</a></code> is loaded
     normally.)</li>

     <li><p><a href=#navigate>Navigate</a> the element's <a href=#browsing-context>browsing
     context</a> to the resulting <a href=#absolute-url>absolute
     URL</a>.</li>

    </ol><p><i>Empty</i>: When the steps above require the user agent to
    jump to the <i title="">empty</i> step, if the user agent is
    processing this <code><a href=#the-iframe-element>iframe</a></code>'s attributes for the first
    time, then the user agent must <a href=#queue-a-task>queue a task</a> to
    <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load>load</code> at the <code><a href=#the-iframe-element>iframe</a></code>
    element. (After jumping to this step, the above steps are not
    resumed.)</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
    named <code title=event-load>load</code> at the
    <code><a href=#the-iframe-element>iframe</a></code> element.</p>

   </dd>

  </dl><p>Any <a href=#navigate title=navigate>navigation</a> required of the user
  agent in the <a href=#process-the-iframe-attributes>process the <code>iframe</code> attributes</a>
  algorithm must be completed with the <code><a href=#the-iframe-element>iframe</a></code> element's
  document's <a href=#browsing-context>browsing context</a> as the <a href=#source-browsing-context>source
  browsing context</a>.</p>

  <p>Furthermore, if the <a href=#process-the-iframe-attributes>process the <code>iframe</code>
  attributes</a> algorithm was invoked for the first time for this
  element (i.e. as a result of the element being <a href=#insert-an-element-into-a-document title="insert
  an element into a document">inserted into a document</a>), then
  any <a href=#navigate title=navigate>navigation</a> required of the user
  agent in that algorithm must be completed with <a href=#replacement-enabled>replacement
  enabled</a>.</p>

  </div>

  <p class=note>If, when the element is created, the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute is not set, and
  the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute is either
  also not set or set but its value cannot be <a href=#resolve-a-url title="resolve a
  url">resolved</a>, the browsing context will remain at the
  initial <code><a href=#about:blank>about:blank</a></code> page.</p>

  <p class=note>If the user <a href=#navigate title=navigate>navigates</a>
  away from this page, the <code><a href=#the-iframe-element>iframe</a></code>'s corresponding
  <code><a href=#windowproxy>WindowProxy</a></code> object will proxy new <code><a href=#window>Window</a></code>
  objects for new <code><a href=#document>Document</a></code> objects, but the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute will not change.</p>

  <div class=example>

   <p>Here a blog uses the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute in conjunction
   with the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> and <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> attributes described
   below to provide users of user agents that support this feature
   with an extra layer of protection from script injection in the blog
   post comments:</p>

   <pre>&lt;article&gt;
 &lt;h1&gt;I got my own magazine!&lt;/h1&gt;
 &lt;p&gt;After much effort, I've finally found a publisher, and so now I
 have my own magazine! Isn't that awesome?! The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it's going to be great!&lt;/p&gt;
 &lt;footer&gt;
  &lt;p&gt;Written by &lt;a href="/users/cap"&gt;cap&lt;/a&gt;.
  &lt;time pubdate&gt;2009-08-21T23:32Z&lt;/time&gt;&lt;/p&gt;
 &lt;/footer&gt;
 &lt;article&gt;
  &lt;footer&gt; At &lt;time pubdate&gt;2009-08-21T23:35Z&lt;/time&gt;, &lt;a href="/users/ch"&gt;ch&lt;/a&gt; writes: &lt;/footer&gt;
  &lt;iframe seamless sandbox="allow-same-origin" srcdoc="&lt;p&gt;did you get a cover picture yet?"&gt;&lt;/iframe&gt;
 &lt;/article&gt;
 &lt;article&gt;
  &lt;footer&gt; At &lt;time pubdate&gt;2009-08-21T23:44Z&lt;/time&gt;, &lt;a href="/users/cap"&gt;cap&lt;/a&gt; writes: &lt;/footer&gt;
  &lt;iframe seamless sandbox="allow-same-origin" srcdoc="&lt;p&gt;Yeah, you can see it &lt;a href=&amp;quot;/gallery?mode=cover&amp;amp;amp;page=1&amp;quot;&gt;in my gallery&lt;/a&gt;."&gt;&lt;/iframe&gt;
 &lt;/article&gt;
 &lt;article&gt;
  &lt;footer&gt; At &lt;time pubdate&gt;2009-08-21T23:58Z&lt;/time&gt;, &lt;a href="/users/ch"&gt;ch&lt;/a&gt; writes: &lt;/footer&gt;
  &lt;iframe seamless sandbox="allow-same-origin" srcdoc="&lt;p&gt;hey that's earl's table.
&lt;p&gt;you should get earl&amp;amp;amp;me on the next cover."&gt;&lt;/iframe&gt;
 &lt;/article&gt;</pre>

   <p>Notice the way that quotes have to be escaped (otherwise the
   <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute would
   end prematurely), and the way raw ampersands (e.g. in URLs or in
   prose) mentioned in the sandboxed content have to be
   <em>doubly</em> escaped &mdash; once so that the ampersand is
   preserved when originally parsing the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, and once more
   to prevent the ampersand from being misinterpreted when parsing the
   sandboxed content.</p>

  </div>

  <p class=note>In <a href=#syntax>the HTML syntax</a>, authors need only
  remember to use U+0022 QUOTATION MARK characters (") to wrap the
  attribute contents and then to escape all U+0022 QUOTATION MARK (")
  and U+0026 AMPERSAND (&amp;) characters, and to specify the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, to ensure safe
  embedding of content.</p>

  <p class=note>Due to restrictions of <span>the XML syntax</span>,
  in XML a number of other characters need to be escaped also to
  ensure correctness.</p>

  <hr><p>The <dfn id=attr-iframe-name title=attr-iframe-name><code>name</code></dfn>
  attribute, if present, must be a <a href=#valid-browsing-context-name>valid browsing context
  name</a>. The given value is used to name the <a href=#nested-browsing-context>nested
  browsing context</a>. <span class=impl>When the browsing
  context is created, if the attribute is present, the <a href=#browsing-context-name>browsing
  context name</a> must be set to the value of this attribute;
  otherwise, the <a href=#browsing-context-name>browsing context name</a> must be set to the
  empty string.</span></p>

  <div class=impl>

  <p>Whenever the <code title=attr-iframe-name><a href=#attr-iframe-name>name</a></code> attribute
  is set, the nested <a href=#browsing-context>browsing context</a>'s <a href=#browsing-context-name title="browsing context name">name</a> must be changed to the new
  value. If the attribute is removed, the <a href=#browsing-context-name>browsing context
  name</a> must be set to the empty string.</p>

  <p>When content loads in an <code><a href=#the-iframe-element>iframe</a></code>, after any <code title=event-load>load</code> events are fired within the content
  itself, the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
  a simple event</a> named <code title=event-load>load</code> at
  the <code><a href=#the-iframe-element>iframe</a></code> element. When content whose <a href=#url>URL</a>
  has the <a href=#same-origin>same origin</a> as the <code><a href=#the-iframe-element>iframe</a></code>
  element's <code><a href=#document>Document</a></code> fails to load (e.g. due to a DNS
  error, network error, or if the server returned a 4xx or 5xx status
  code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or
  equivalent</a>), then the user agent must <a href=#queue-a-task>queue a
  task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the element instead. (This event
  does not fire for <a href=#parse-error title="parse error">parse errors</a>,
  script errors, or any errors for cross-origin resources.)</p>

  <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation
  task source</a>.</p>

  <p class=note>A <code title=event-load>load</code> event is also
  fired at the <code><a href=#the-iframe-element>iframe</a></code> element when it is created if no
  other data is loaded in it.</p>

  <p>When there is an <a href=#active-parser>active parser</a> in the
  <code><a href=#the-iframe-element>iframe</a></code>, and when anything in the <code><a href=#the-iframe-element>iframe</a></code> is
  <a href=#delay-the-load-event title="delay the load event">delaying the load event</a> of
  the <code><a href=#the-iframe-element>iframe</a></code>'s <a href=#browsing-context>browsing context</a>'s
  <a href=#active-document>active document</a>, the <code><a href=#the-iframe-element>iframe</a></code> must
  <a href=#delay-the-load-event>delay the load event</a> of its document.</p>

  <p class=note>If, during the handling of the <code title=event-load>load</code> event, the <a href=#browsing-context>browsing
  context</a> in the <code><a href=#the-iframe-element>iframe</a></code> is again <a href=#navigate title=navigate>navigated</a>, that will further <a href=#delay-the-load-event>delay the
  load event</a>.</p>

  </div>

  <hr><p>The <dfn id=attr-iframe-sandbox title=attr-iframe-sandbox><code>sandbox</code></dfn>
  attribute, when specified, enables a set of extra restrictions on
  any content hosted by the <code><a href=#the-iframe-element>iframe</a></code>. Its value must be an
  <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>. The
  allowed values are <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>,
  <code title=attr-iframe-sandbox-allow-top-navigation><a href=#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code>,
  <code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code>,
  and <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>. When
  the attribute is set, the content is treated as being from a unique
  <a href=#origin>origin</a>, forms and scripts are disabled, links are
  prevented from targeting other <a href=#browsing-context title="browsing
  context">browsing contexts</a>, and plugins are disabled. The
  <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
  keyword allows the content to be treated as being from the same
  origin instead of forcing it into a unique origin, the <code title=attr-iframe-sandbox-allow-top-navigation><a href=#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code>
  keyword allows the content to <a href=#navigate>navigate</a> its
  <a href=#top-level-browsing-context>top-level browsing context</a>, and the <code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code> and <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>
  keywords re-enable forms and scripts respectively (though scripts
  are still prevented from creating popups).</p>

  <p class=warning>Setting both the <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code> and
  <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
  keywords together when the embedded page has the <a href=#same-origin>same
  origin</a> as the page containing the <code><a href=#the-iframe-element>iframe</a></code> allows
  the embedded page to simply remove the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute.</p>

  <p class=warning>Sandboxing hostile content is of minimal help if
  an attacker can convince the user to just visit the hostile content
  directly, rather than in the <code><a href=#the-iframe-element>iframe</a></code>. To limit the
  damage that can be caused by hostile HTML content, it should be
  served using the <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> MIME type.</p>

  <div class=impl>

  <!-- v2: Add a new attribute that enables new restrictions, e.g.:
       - disallow cross-origin loads of any kind (networking
         override that only allows same-origin URLs or about:,
         javascript:, data:)
       - block access to 'parent.frames' from sandbox
  -->

  <p>While the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code>
  attribute is specified, the <code><a href=#the-iframe-element>iframe</a></code> element's
  <a href=#nested-browsing-context>nested browsing context</a> must have the flags given in
  the following list set.  In addition, any browsing contexts <a href=#nested-browsing-context title="nested browsing context">nested</a> within an
  <code><a href=#the-iframe-element>iframe</a></code>, either directly or indirectly, must have all
  the flags set on them as were set on the <code><a href=#the-iframe-element>iframe</a></code>'s
  <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> when the
  <code><a href=#the-iframe-element>iframe</a></code>'s <code><a href=#document>Document</a></code> was created.</p>

  <dl><dt>The <dfn id=sandboxed-navigation-browsing-context-flag>sandboxed navigation browsing context flag</dfn></dt>

   <dd>

    <p>This flag <a href=#sandboxLinks>prevents content from
    navigating browsing contexts other than the sandboxed browsing
    context itself</a> (or browsing contexts further nested inside
    it), and the <a href=#top-level-browsing-context>top-level browsing context</a> (which is
    protected by the <a href=#sandboxed-top-level-navigation-browsing-context-flag>sandboxed top-level navigation browsing
    context flag</a> defined next).</p>

    <p>This flag also <a href=#sandboxWindowOpen>prevents content
    from creating new auxiliary browsing contexts</a>, e.g. using the
    <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute or the
    <code title=dom-open><a href=#dom-open>window.open()</a></code> method.</p>

   </dd>


   <dt>The <dfn id=sandboxed-top-level-navigation-browsing-context-flag>sandboxed top-level navigation browsing context
   flag</dfn>, unless the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's value, when
   <a href=#split-a-string-on-spaces title="split a string on spaces">split on spaces</a>, is
   found to have the <dfn id=attr-iframe-sandbox-allow-top-navigation title=attr-iframe-sandbox-allow-top-navigation><code>allow-top-navigation</code></dfn>
   keyword set</dt>

   <dd>

    <p>This flag <a href=#sandboxLinks>prevents content from
    navigating their <span>top-level browsing context</span></a>.</p>

    <p>When the <code title=attr-iframe-sandbox-allow-top-navigation><a href=#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code>
    is set, content can navigate its <a href=#top-level-browsing-context>top-level browsing
    context</a>, but other <a href=#browsing-context title="browsing context">browsing
    contexts</a> are still protected by the <a href=#sandboxed-navigation-browsing-context-flag>sandboxed
    navigation browsing context flag</a> defined above.</p>

   </dd>


   <dt>The <dfn id=sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</dfn></dt>

   <dd>

    <p>This flag prevents content from instantiating <a href=#plugin title=plugin>plugins</a>, whether using <a href=#sandboxPluginEmbed>the <code>embed</code> element</a>, <a href=#sandboxPluginObject>the <code>object</code> element</a>,
    <a href=#sandboxPluginApplet>the <code>applet</code>
    element</a>, or through <a href=#sandboxPluginNavigate>navigation</a> of a <a href=#nested-browsing-context>nested
    browsing context</a>.</p>

   </dd>


   <dt>The <dfn id=sandboxed-seamless-iframes-flag>sandboxed seamless iframes flag</dfn></dt>

   <dd>

    <p>This flag prevents content from using the <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> attribute on
    descendant <code><a href=#the-iframe-element>iframe</a></code> elements.</p>

    <p class=note>This prevents a page inserted using the <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
    keyword from using a CSS-selector-based method of probing the DOM
    of other pages on the same site (in particular, pages that contain
    user-sensitive information).</p>

    <!-- http://lists.w3.org/Archives/Public/public-web-security/2009Dec/thread.html#msg51 -->

   </dd>


   <dt>The <dfn id=sandboxed-origin-browsing-context-flag>sandboxed origin browsing context flag</dfn>, unless
   the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's
   value, when <a href=#split-a-string-on-spaces title="split a string on spaces">split on
   spaces</a>, is found to have the <dfn id=attr-iframe-sandbox-allow-same-origin title=attr-iframe-sandbox-allow-same-origin><code>allow-same-origin</code></dfn>
   keyword set</dt>

   <dd>

    <p>This flag <a href=#sandboxOrigin>forces content into a unique
    origin</a>, thus preventing it from accessing other content from
    the same <a href=#origin>origin</a>.</p>

    <p>This flag also <a href=#sandboxCookies>prevents script from
    reading from or writing to the <code title=dom-document-cookie>document.cookie</code> IDL
    attribute</a>, and blocks access to <code title=dom-localStorage>localStorage</code> and <code title=dom-opendatabase>openDatabase()</code>.
    
    <a href=#refsWEBSTORAGE>[WEBSTORAGE]</a>
    
    <a href=#refsWEBSQL>[WEBSQL]</a>
    </p>

    <div class=note>

     <p>The <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
     attribute is intended for two cases.</p>

     <p>First, it can be used to allow content from the same site to
     be sandboxed to disable scripting, while still allowing access to
     the DOM of the sandboxed content.</p>

     <p>Second, it can be used to embed content from a third-party
     site, sandboxed to prevent that site from opening popup windows,
     etc, without preventing the embedded page from communicating back
     to its originating site, using the database APIs to store data,
     etc.</p>

    </div>

   </dd>


   <dt>The <dfn id=sandboxed-forms-browsing-context-flag>sandboxed forms browsing context flag</dfn>, unless
   the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's
   value, when <a href=#split-a-string-on-spaces title="split a string on spaces">split on
   spaces</a>, is found to have the <dfn id=attr-iframe-sandbox-allow-forms title=attr-iframe-sandbox-allow-forms><code>allow-forms</code></dfn>
   keyword set</dt>

   <dd>

    <p>This flag <a href=#sandboxSubmitBlocked>blocks form
    submission</a>.</p>

   </dd>


   <dt>The <dfn id=sandboxed-scripts-browsing-context-flag>sandboxed scripts browsing context flag</dfn>, unless
   the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's
   value, when <a href=#split-a-string-on-spaces title="split a string on spaces">split on
   spaces</a>, is found to have the <dfn id=attr-iframe-sandbox-allow-scripts title=attr-iframe-sandbox-allow-scripts><code>allow-scripts</code></dfn>
   keyword set</dt>

   <dd>

    <p>This flag <a href=#sandboxScriptBlocked>blocks script
    execution</a>.</p>

   </dd>


   <dt>The <dfn id=sandboxed-automatic-features-browsing-context-flag>sandboxed automatic features browsing context
   flag</dfn>, unless the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's value, when
   <a href=#split-a-string-on-spaces title="split a string on spaces">split on spaces</a>, is
   found to have the <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>
   keyword (defined above) set</dt>

   <dd>

    <p>This flag blocks features that trigger automatically, such as
    <a href=#attr-media-autoplay title=attr-media-autoplay>automatically playing a
    video</a> or <a href=#attr-fe-autofocus title=attr-fe-autofocus>automatically
    focusing a form control</a>. It is relaxed by the same flag as
    scripts, because when scripts are enabled these features are
    trivially possible anyway, and it would be unfortunate to force
    authors to use script to do them when sandboxed rather than
    allowing them to use the declarative features.</p>

   </dd>

  </dl><p>These flags must not be set unless the conditions listed above
  define them as being set.</p>

  <p class=warning>These flags only take effect when the
  <a href=#nested-browsing-context>nested browsing context</a> of the <code><a href=#the-iframe-element>iframe</a></code> is
  <a href=#navigate title=navigate>navigated</a>. Removing then, or removing
  the entire <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code>
  attribute, has no effect on an already-loaded page.</p>

  </div>

  <div class=example>

   <p>In this example, some completely-unknown, potentially hostile,
   user-provided HTML content is embedded in a page. Because it is
   sandboxed, it is treated by the user agent as being from a unique
   origin, despite the content being served from the same site. Thus
   it is affected by all the normal cross-site restrictions. In
   addition, the embedded page has scripting disabled, plugins
   disabled, forms disabled, and it cannot navigate any frames or
   windows other than itself (or any frames or windows it itself
   embeds).</p>

   <pre>&lt;p&gt;We're not scared of you! Here is your content, unedited:&lt;/p&gt;
&lt;iframe sandbox src="getusercontent.cgi?id=12193"&gt;&lt;/iframe&gt;</pre>

   <p>Note that cookies are still sent to the server in the <code title="">getusercontent.cgi</code> request, though they are not
   visible in the <code title=dom-document-cookie><a href=#dom-document-cookie>document.cookie</a></code> IDL
   attribute.</p>

   <p class=warning>It is important that the server serve the
   user-provided HTML using the <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> MIME
   type so that if the attacker convinces the user to visit that page
   directly, the page doesn't run in the context of the site's origin,
   which would make the user vulnerable to any attack found in the
   page.</p>

  </div>

  <div class=example>

   <p>In this example, a gadget from another site is embedded. The
   gadget has scripting and forms enabled, and the origin sandbox
   restrictions are lifted, allowing the gadget to communicate with
   its originating server. The sandbox is still useful, however, as it
   disables plugins and popups, thus reducing the risk of the user
   being exposed to malware and other annoyances.</p>

   <pre>&lt;iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html"&gt;&lt;/iframe&gt;</pre>

  </div>

  <div class=example>

   <p>Suppose a file A contained the following fragment:</p>

   <pre>&lt;iframe sandbox="allow-same-origin allow-forms" src=B&gt;&lt;/iframe&gt;</pre>

   <p>Suppose that file B contained an iframe also:</p>

   <pre>&lt;iframe sandbox="allow-scripts" src=C&gt;&lt;/iframe&gt;</pre>

   <p>Further, suppose that file C contained a link:</p>

   <pre>&lt;a href=D&gt;Link&lt;/a&gt;</pre>

   <p>For this example, suppose all the files were served as
   <code><a href=#text/html>text/html</a></code>.</p>

   <p>Page C in this scenario has all the sandboxing flags
   set. Scripts are disabled, because the <code><a href=#the-iframe-element>iframe</a></code> in A has
   scripts disabled, and this overrides the <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>
   keyword set on the <code><a href=#the-iframe-element>iframe</a></code> in B. Forms are also
   disabled, because the inner <code><a href=#the-iframe-element>iframe</a></code> (in B) does not
   have the <code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code> keyword
   set.</p>

   <p>Suppose now that a script in A removes all the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attributes in A and
   B. This would change nothing immediately. If the user clicked the
   link in C, loading page D into the <code><a href=#the-iframe-element>iframe</a></code> in B, page D
   would now act as if the <code><a href=#the-iframe-element>iframe</a></code> in B had the <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
   and <code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code> keywords
   set, because that was the state of the <a href=#nested-browsing-context>nested browsing
   context</a> in the <code><a href=#the-iframe-element>iframe</a></code> in A when page B was
   loaded.</p>

   <p>Generally speaking, dynamically removing or changing the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute is
   ill-advised, because it can make it quite hard to reason about what
   will be allowed and what will not.</p>

  </div>

  <p class=note>Potentially hostile files can be served from the
  same server as the file containing the <code><a href=#the-iframe-element>iframe</a></code> element
  by labeling them as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> instead of
  <code><a href=#text/html>text/html</a></code>. This ensures that scripts in the files are
  unable to attack the site (as if they were actually served from
  another server), even if the user is tricked into visiting those
  pages directly, without the protection of the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute.</p>

  <p class=warning>If the <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>
  keyword is set along with <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
  keyword, and the file is from the <a href=#same-origin>same origin</a> as the
  <code><a href=#the-iframe-element>iframe</a></code>'s <code><a href=#document>Document</a></code>, then a script in the
  "sandboxed" iframe could just reach out, remove the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, and then
  reload itself, effectively breaking out of the sandbox
  altogether.</p>


  <hr><!-- v2: Might be interesting to have a value on seamless that
  allowed event propagation of some sort, maybe based on the WICD
  work: http://www.w3.org/TR/WICD/ --><p>The <dfn id=attr-iframe-seamless title=attr-iframe-seamless><code>seamless</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, it
  indicates that the <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#browsing-context>browsing
  context</a> is to be rendered in a manner that makes it appear to
  be part of the containing document (seamlessly included in the
  parent document). <span class=impl>Specifically, when the
  attribute is set on an <code><a href=#the-iframe-element>iframe</a></code> element whose owner
  <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> did not have
  the <a href=#sandboxed-seamless-iframes-flag>sandboxed seamless iframes flag</a> set when that
  <code><a href=#document>Document</a></code> was created, and while either the
  <a href=#browsing-context>browsing context</a>'s <a href=#active-document>active document</a> has the
  <a href=#same-origin>same origin</a> as the <code><a href=#the-iframe-element>iframe</a></code> element's
  document, or the <a href=#browsing-context>browsing context</a>'s <a href=#active-document>active
  document</a>'s <em><a href="#the-document's-address" title="the document's
  address">address</a></em> has the <a href=#same-origin>same origin</a> as the
  <code><a href=#the-iframe-element>iframe</a></code> element's document, the following requirements
  apply:</span></p>

  <div class=impl>

  <ul><li><p>The user agent must set the <dfn id=seamless-browsing-context-flag>seamless browsing
   context flag</dfn> to true for that <a href=#browsing-context>browsing
   context</a>. This will <a href=#seamlessLinks>cause links to
   open in the parent browsing context</a>.</li>

   <li><p>In a CSS-supporting user agent: the user agent must add all
   the style sheets that apply to the <code><a href=#the-iframe-element>iframe</a></code> element to
   the cascade of the <a href=#active-document>active document</a> of the
   <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#nested-browsing-context>nested browsing context</a>,
   at the appropriate cascade levels, before any style sheets
   specified by the document itself.</li>

   <li><p>In a CSS-supporting user agent: the user agent must, for the
   purpose of CSS property inheritance only, treat the root element of
   the <a href=#active-document>active document</a> of the <code><a href=#the-iframe-element>iframe</a></code>
   element's <a href=#nested-browsing-context>nested browsing context</a> as being a child of
   the <code><a href=#the-iframe-element>iframe</a></code> element. (Thus inherited properties on the
   root element of the document in the <code><a href=#the-iframe-element>iframe</a></code> will
   inherit the computed values of those properties on the
   <code><a href=#the-iframe-element>iframe</a></code> element instead of taking their initial
   values.)</li>

   <li><p>In visual media, in a CSS-supporting user agent: the user agent
   should set the intrinsic width of the <code><a href=#the-iframe-element>iframe</a></code> to the
   width that the element would have if it was a non-replaced
   block-level element with 'width: auto'.</li>

   <li><p>In visual media, in a CSS-supporting user agent: the user
   agent should set the intrinsic height of the <code><a href=#the-iframe-element>iframe</a></code> to
   the height of the bounding box around the content rendered in the
   <code><a href=#the-iframe-element>iframe</a></code> at its current width (as given in the previous
   bullet point), as it would be if the scrolling position was such
   that the top of the viewport for the content rendered in the
   <code><a href=#the-iframe-element>iframe</a></code> was aligned with the origin of that content's
   canvas.</li>

   <li>

    <p>In visual media, in a CSS-supporting user agent: the user agent
    must force the height of the initial containing block of the
    <a href=#active-document>active document</a> of the <a href=#nested-browsing-context>nested browsing
    context</a> of the <code><a href=#the-iframe-element>iframe</a></code> to zero.</p>

    <p class=note>This is intended to get around the otherwise
    circular dependency of percentage dimensions that depend on the
    height of the containing block, thus affecting the height of the
    document's bounding box, thus affecting the height of the
    viewport, thus affecting the size of the initial containing
    block.</p>

   </li>

   <li><p>In speech media, the user agent should render the <a href=#nested-browsing-context>nested
   browsing context</a> without announcing that it is a separate
   document.</li>

   <li>

    <p>User agents should, in general, act as if the <a href=#active-document>active
    document</a> of the <code><a href=#the-iframe-element>iframe</a></code>'s <a href=#nested-browsing-context>nested browsing
    context</a> was part of the document that the
    <code><a href=#the-iframe-element>iframe</a></code> is in.</p>

    <p class=example>For example if the user agent supports listing
    all the links in a document, links in "seamlessly" nested
    documents would be included in that list without being
    significantly distinguished from links in the document itself.</p>

   </li>

  </ul><p>If the attribute is not specified, or if the <a href=#origin>origin</a>
  conditions listed above are not met, then the user agent should
  render the <a href=#nested-browsing-context>nested browsing context</a> in a manner that is
  clearly distinguishable as a separate <a href=#browsing-context>browsing context</a>,
  and the <a href=#seamless-browsing-context-flag>seamless browsing context flag</a> must be set to
  false for that <a href=#browsing-context>browsing context</a>.</p>

  <p class=warning>It is important that user agents recheck the
  above conditions whenever the <a href=#active-document>active document</a> of the
  <a href=#nested-browsing-context>nested browsing context</a> of the <code><a href=#the-iframe-element>iframe</a></code>
  changes, such that the <a href=#seamless-browsing-context-flag>seamless browsing context flag</a>
  gets unset if the <a href=#nested-browsing-context>nested browsing context</a> is <a href=#navigate title=navigate>navigated</a> to another origin.</p>

  </div>

  <p class=note>The attribute can be set or removed dynamically,
  with the rendering updating in tandem.</p>

  <div class=example>

   <p>In this example, the site's navigation is embedded using a
   client-side include using an <code><a href=#the-iframe-element>iframe</a></code>. Any links in the
   <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be automatically
   opened in the <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for
   legacy user agents, the site could also include a <code><a href=#the-base-element>base</a></code>
   element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code>
   attribute with the value <code title="">_parent</code>. Similarly,
   in new user agents the styles of the parent page will be
   automatically applied to the contents of the frame, but to support
   legacy user agents authors might wish to include the styles
   explicitly.</p>

   <pre>&lt;nav&gt;&lt;iframe seamless src="nav.include.html"&gt;&lt;/iframe&gt;&lt;/nav&gt;</pre>

  </div>


  <hr><p>The <code><a href=#the-iframe-element>iframe</a></code> element supports <a href=#dimension-attributes>dimension
  attributes</a> for cases where the embedded content has specific
  dimensions (e.g. ad units have well-defined dimensions).</p>

  <p>An <code><a href=#the-iframe-element>iframe</a></code> element never has <a href=#fallback-content>fallback
  content</a>, as it will always create a nested <a href=#browsing-context>browsing
  context</a>, regardless of whether the specified initial contents
  are successfully used.</p>

  <p>Descendants of <code><a href=#the-iframe-element>iframe</a></code> elements represent
  nothing. (In legacy user agents that do not support
  <code><a href=#the-iframe-element>iframe</a></code> elements, the contents would be parsed as markup
  that could act as fallback content.)</p>

  <p>When used in <a href=#html-documents>HTML documents</a>, the allowed content
  model of <code><a href=#the-iframe-element>iframe</a></code> elements is text, except that invoking
  the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing algorithm</a> with the
  <code><a href=#the-iframe-element>iframe</a></code> element as the <var title="">context</var>
  element and the text contents as the <var title="">input</var> must
  result in a list of nodes that are all <a href=#phrasing-content>phrasing
  content</a>, with no <a href=#parse-error title="parse error">parse
  errors</a> having occurred, with no <code><a href=#script>script</a></code> elements
  being anywhere in the list or as descendants of elements in the
  list, and with all the elements in the list (including their
  descendants) being themselves conforming.</p>

  <p>The <code><a href=#the-iframe-element>iframe</a></code> element must be empty in <a href=#xml-documents>XML
  documents</a>.</p>

  <p class=note>The <a href=#html-parser>HTML parser</a> treats markup inside
  <code><a href=#the-iframe-element>iframe</a></code> elements as text.</p>

  <div class=impl>

  <p>The IDL attributes <dfn id=dom-iframe-src title=dom-iframe-src><code>src</code></dfn>, <dfn id=dom-iframe-srcdoc title=dom-iframe-srcdoc><code>srcdoc</code></dfn>, <dfn id=dom-iframe-name title=dom-iframe-name><code>name</code></dfn>, <dfn id=dom-iframe-sandbox title=dom-iframe-sandbox><code>sandbox</code></dfn>, and <dfn id=dom-iframe-seamless title=dom-iframe-seamless><code>seamless</code></dfn> must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  <p>The <dfn id=dom-iframe-contentdocument title=dom-iframe-contentDocument><code>contentDocument</code></dfn>
  IDL attribute must return the <code><a href=#document>Document</a></code> object of the
  <a href=#active-document>active document</a> of the <code><a href=#the-iframe-element>iframe</a></code> element's
  <a href=#nested-browsing-context>nested browsing context</a>.</p>

  <p>The <dfn id=dom-iframe-contentwindow title=dom-iframe-contentWindow><code>contentWindow</code></dfn>
  IDL attribute must return the <code><a href=#windowproxy>WindowProxy</a></code> object of the
  <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#nested-browsing-context>nested browsing
  context</a>.</p>

  </div>

  <div class=example>

   <p>Here is an example of a page using an <code><a href=#the-iframe-element>iframe</a></code> to
   include advertising from an advertising broker:</p>

   <pre>&lt;iframe src="http://ads.example.com/?customerid=923513721&amp;amp;format=banner"
        width="468" height="60"&gt;&lt;/iframe&gt;</pre>

  </div>




  <h4 id=the-embed-element><span class=secno>4.8.3 </span>The <dfn><code>embed</code></dfn> element</h4>

<!-- (v2?)
 we have all kinds of quirks we should define if they come up during
 testing, as e.g. shown in:
 http://mxr.mozilla.org/mozilla-central/source/layout/generic/nsObjectFrame.cpp
 http://trac.webkit.org/browser/trunk/WebCore/html/HTMLEmbedElement.cpp
 http://trac.webkit.org/browser/trunk/WebCore/rendering/RenderPartObject.cpp (updateWidget)
 e.g. - 240x200 default
      - the attributes/params are sent in a name/value pair list as follows (for Gecko):
         + attributes of the element, in source order
         + a synthesised 'src' attribute, if there was no 'src' but
           there was a 'data', with the value of the 'data' attribute
         + the params, in source order
        (WebKit does something different still)
      - the HIDDEN attribute (might be moot now)
-->

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#embedded-content>Embedded content</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-embed-src><a href=#attr-embed-src>src</a></code></dd>
   <dd><code title=attr-embed-type><a href=#attr-embed-type>type</a></code></dd>
   <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   <dd>Any other attribute that has no namespace (see prose).</dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlembedelement>HTMLEmbedElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-embed-src title=dom-embed-src>src</a>;
           attribute DOMString <a href=#dom-embed-type title=dom-embed-type>type</a>;
           attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;
           attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
};</pre>
    <div class=impl>
    <p>Depending on the type of content instantiated by the
    <code><a href=#the-embed-element>embed</a></code> element, the node may also support other
    interfaces.</p>
    </div>
   </dd>
  </dl><p>The <code><a href=#the-embed-element>embed</a></code> element <a href=#represents>represents</a> an
  integration point for an external (typically non-HTML) application
  or interactive content.</p>

  <p>The <dfn id=attr-embed-src title=attr-embed-src><code>src</code></dfn> attribute
  gives the address of the resource being embedded. The attribute, if
  present, must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
  surrounded by spaces</a>.</p>

  <p>The <dfn id=attr-embed-type title=attr-embed-type><code>type</code></dfn>
  attribute, if present, gives the <a href=#mime-type>MIME type</a> by which the
  plugin to instantiate is selected. The value must be a <a href=#valid-mime-type>valid
  MIME type</a>. If both the <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute and the <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute are present, then the
  <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute must specify the
  same type as the <a href=#content-type title=Content-Type>explicit Content-Type
  metadata</a> of the resource given by the <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute.</p>

  <div class=impl>

  <p>When the element is created with neither a <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute nor a <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute, and when attributes
  are removed such that neither attribute is present on the element
  anymore, and when the element has a <a href=#media-element>media element</a>
  ancestor, and when the element has an ancestor <code><a href=#the-object-element>object</a></code>
  element that is <em>not</em> showing its <a href=#fallback-content>fallback
  content</a>, any plugins instantiated for the element must be
  removed, and the <code><a href=#the-embed-element>embed</a></code> element represents nothing.</p>

  <p id=sandboxPluginEmbed>If either:

  <ul><li>the <a href=#sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</a> was
   set on the <a href=#browsing-context>browsing context</a> for which the
   <code><a href=#the-embed-element>embed</a></code> element's <code><a href=#document>Document</a></code> is the
   <a href=#active-document>active document</a> when that <code><a href=#document>Document</a></code> was
   created, or</li>

   <li>the <code><a href=#the-embed-element>embed</a></code> element's <code><a href=#document>Document</a></code> was
   parsed from a resource whose <a href=#content-type-sniffing-0 title="Content-Type
   sniffing">sniffed type</a> as determined during <a href=#navigate title=navigate>navigation</a> is
   <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code></li>

  </ul><p>...then the user agent must render the <code><a href=#the-embed-element>embed</a></code> element
  in a manner that conveys that the <a href=#plugin>plugin</a> was
  disabled. The user agent may offer the user the option to override
  the sandbox and instantiate the <a href=#plugin>plugin</a> anyway; if the
  user invokes such an option, the user agent must act as if the
  conditions above did not apply for the purposes of this element.</p>

  <p class=warning>Plugins are disabled in sandboxed browsing
  contexts because they might not honor the restrictions imposed by
  the sandbox (e.g. they might allow scripting even when scripting in
  the sandbox is disabled). User agents should convey the danger of
  overriding the sandbox to the user if an option to do so is
  provided.</p>

  <p>An <code><a href=#the-embed-element>embed</a></code> element is said to be <dfn id=concept-embed-active title=concept-embed-active>potentially active</dfn> when the
  following conditions are all met simultaneously:</p>

  <ul class=brief><li>The element is <a href=#in-a-document title="in a document">in a <code>Document</code></a>.</li>
   <li>The element's <code><a href=#document>Document</a></code> is <a href=#fully-active>fully active</a>.</li>
   <li>The element has either a <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute set or a <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute set (or both).</li>
   <li>The element's <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute is either absent or its value is the empty string.</li>
   <li>The element is not in a <code><a href=#document>Document</a></code> whose <a href=#browsing-context>browsing context</a> had the <a href=#sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</a> set when the <code><a href=#document>Document</a></code> was created (unless this has been overridden as described above).</li>
   <li>The element's <code><a href=#document>Document</a></code> was not parsed from a resource whose <a href=#content-type-sniffing-0 title="Content-Type sniffing">sniffed type</a> as determined during <a href=#navigate title=navigate>navigation</a> is <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> (unless this has been overridden as described above).</li>
   <li>The element is not a descendant of a <a href=#media-element>media element</a>.</li>
   <li>The element is not a descendant of an <code><a href=#the-object-element>object</a></code> element that is not showing its <a href=#fallback-content>fallback content</a>.</li>
  </ul><p>Whenever an <code><a href=#the-embed-element>embed</a></code> element that was not <a href=#concept-embed-active title=concept-embed-active>potentially active</a> becomes <a href=#concept-embed-active title=concept-embed-active>potentially active</a>, and whenever
  a <a href=#concept-embed-active title=concept-embed-active>potentially active</a>
  <code><a href=#the-embed-element>embed</a></code> element's <code title=attr-embed-type><a href=#attr-embed-type>src</a></code> attribute is set, changed, or
  removed, and whenever a <a href=#concept-embed-active title=concept-embed-active>potentially active</a>
  <code><a href=#the-embed-element>embed</a></code> element's <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute is set, changed, or
  removed, the appropriate set of steps from the following is then
  applied:</p>

  <dl class=switch><dt>If the element has a <code title=attr-embed-src><a href=#attr-embed-src>src</a></code>
   attribute set</dt>

   <dd>

    <p>The user agent must <a href=#resolve-a-url title="resolve a url">resolve</a>
    the value of the element's <code title=attr-embed-src><a href=#attr-embed-src>src</a></code>
    attribute, relative to the element. If that is successful, the
    user agent should <a href=#fetch>fetch</a> the resulting <a href=#absolute-url>absolute
    URL</a>, from the element's <a href=#browsing-context-scope-origin>browsing context scope
    origin</a> if it has one<!-- potentially http-origin privacy
    sensitive -->. The <a href=#concept-task title=concept-task>task</a> that is
    <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking
    task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> must find and instantiate an
    appropriate <a href=#plugin>plugin</a> based on the <a href=#concept-embed-type title=concept-embed-type>content's type</a>, and hand that
    <a href=#plugin>plugin</a> the content of the resource, replacing any
    previously instantiated plugin for the element.</p> <!-- Note that
    this doesn't happen when the base URL changes. -->

    <p>Fetching the resource must <a href=#delay-the-load-event>delay the load event</a> of
    the element's document.</p>
    <!-- if we add load/error events, then replace the previous
    paragraph with the text one: -->
    <!-- similar text in various places -->
    <!--<p>Fetching the resource must <span>delay the load
    event</span> of the element's document until the final <span
    title="concept-task">task</span> that is <span title="queue a
    task">queued</span> by the <span>networking task source</span>
    once the resource has been <span title="fetch">fetched</span> has
    been run.</p>-->

   </dd>

   <dt>If the element has no <code title=attr-embed-src><a href=#attr-embed-src>src</a></code>
   attribute set</dt>

   <dd><p>The user agent should find and instantiate an appropriate
   <a href=#plugin>plugin</a> based on the value of the <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute.</p>

  </dl><p>Whenever an <code><a href=#the-embed-element>embed</a></code> element that was <a href=#concept-embed-active title=concept-embed-active>potentially active</a> stops being
  <a href=#concept-embed-active title=concept-embed-active>potentially active</a>, any
  <a href=#plugin>plugin</a> that had been instantiated for that element must
  be unloaded.</p>

  <p class=note>The <code><a href=#the-embed-element>embed</a></code> element is unaffected by the
  CSS 'display' property. The selected plugin is instantiated even if
  the element is hidden with a 'display:none' CSS style.</p>

  <p>The <dfn id=concept-embed-type title=concept-embed-type>type of the content</dfn>
  being embedded is defined as follows:</p>

  <ol><li><p>If the element has a <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute, and that attribute's
   value is a type that a <a href=#plugin>plugin</a> supports, then the value
   of the <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute is the
   <a href=#concept-embed-type title=concept-embed-type>content's type</a>.</li>

   <li>

    <!-- if we get to this point we know we can successfully parsed
    the URL, since this algorithm is only used after fetching the
    resource in the steps above -->

    <p>Otherwise, if the <a href=#url-path title=url-path>&lt;path&gt;</a>
    component of the <a href=#url>URL</a> of the specified resource (after
    any redirects) matches a pattern that a <a href=#plugin>plugin</a>
    supports, then the <a href=#concept-embed-type title=concept-embed-type>content's
    type</a> is the type that that plugin can handle.</p>

    <p class=example>For example, a plugin might say that it can
    handle resources with <a href=#url-path title=url-path>&lt;path&gt;</a>
    components that end with the four character string "<code title="">.swf</code>".</p>

    <!-- it's sad that we have to do extension sniffing. sigh. -->
    <!-- see also <object> which has a similar step -->

   </li>

   <li><p>Otherwise, if the specified resource has <a href=#content-type title=Content-Type>explicit Content-Type metadata</a>, then
   that is the <a href=#concept-embed-type title=concept-embed-type>content's
   type</a>.</li>

   <li><p>Otherwise, the content has no type and there can be no
   appropriate <a href=#plugin>plugin</a> for it.</li>

   <!-- This algorithm is a monument to bad design. Go legacy! -->

  </ol><p>The <code><a href=#the-embed-element>embed</a></code> element has no <a href=#fallback-content>fallback
  content</a>. If the user agent can't find a suitable plugin, then
  the user agent must use a default plugin. (This default could be as
  simple as saying "Unsupported Format".)</p>

  <p>Whether the resource is fetched successfully or not (e.g. whether
  the response code was a 2xx code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>) must be
  ignored when determining the resource's type and when handing the
  resource to the plugin.</p>

  <p class=note>This allows servers to return data for plugins even
  with error responses (e.g. HTTP 500 Internal Server Error codes can
  still contain plugin data).</p>

  </div>

  <p>Any namespace-less attribute other than <code title=attr-embed-name><a href=#attr-embed-name>name</a></code>, <code title=attr-embed-align><a href=#attr-embed-align>align</a></code>, <code title=attr-embed-hspace><a href=#attr-embed-hspace>hspace</a></code>, and <code title=attr-embed-vspace><a href=#attr-embed-vspace>vspace</a></code> <!-- when editing, see also
  note below --> may be specified on the <code><a href=#the-embed-element>embed</a></code> element,
  so long as its name is <a href=#xml-compatible>XML-compatible</a> and contains no
  characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to
  LATIN CAPITAL LETTER Z). These attributes are then passed as
  parameters to the <a href=#plugin>plugin</a>.</p>

  <p class=note>All attributes in <a href=#html-documents>HTML documents</a> get
  lowercased automatically, so the restriction on uppercase letters
  doesn't affect such documents.</p>

  <p class=note>The four exceptions are to exclude legacy attributes
  that have side-effects beyond just sending parameters to the
  <a href=#plugin>plugin</a>.</p>

  <div class=impl>

  <p>The user agent should pass the names and values of all the
  attributes of the <code><a href=#the-embed-element>embed</a></code> element that have no namespace
  to the <a href=#plugin>plugin</a> used, when it is instantiated.</p>

  <p>If the <a href=#plugin>plugin</a> instantiated for the
  <code><a href=#the-embed-element>embed</a></code> element supports a scriptable interface, the
  <code><a href=#htmlembedelement>HTMLEmbedElement</a></code> object representing the element should
  expose that interface while the element is instantiated.</p>

  </div>

  <p>The <code><a href=#the-embed-element>embed</a></code> element supports <a href=#dimension-attributes>dimension
  attributes</a>.</p>

  <div class=impl>

  <p>The IDL attributes <dfn id=dom-embed-src title=dom-embed-src><code>src</code></dfn> and <dfn id=dom-embed-type title=dom-embed-type><code>type</code></dfn> each must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  </div>

  <div class=example>

   <p>Here's a way to embed a resource that requires a proprietary
   plug-in, like Flash:</p>

   <pre>&lt;embed src="catgame.swf"&gt;</pre>

   <p>If the user does not have the plug-in (for example if the
   plug-in vendor doesn't support the user's platform), then the user
   will be unable to use the resource.</p>

   <p>To pass the plugin a parameter "quality" with the value "high",
   an attribute can be specified:</p>

   <pre>&lt;embed src="catgame.swf" quality="high"&gt;</pre>

   <p>This would be equivalent to the following, when using an
   <code><a href=#the-object-element>object</a></code> element instead:</p>

   <pre>&lt;object data="catgame.swf"&gt;
 &lt;param name="quality" value="high"&gt;
&lt;/object&gt;</pre>

  </div>




  <h4 id=the-object-element><span class=secno>4.8.4 </span>The <dfn><code>object</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#embedded-content>Embedded content</a>.</dd>
   <dd>If the element has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd> <!-- also when showing a plugin or a nested browsing context, but checking that statically is hard...) -->
   <dd><a href=#category-listed title=category-listed>Listed</a>,  <a href=#category-submit title=category-submit>submittable</a>, <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href=#the-param-element>param</a></code> elements, then, <a href=#transparent>transparent</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-object-data><a href=#attr-object-data>data</a></code></dd>
   <dd><code title=attr-object-type><a href=#attr-object-type>type</a></code></dd>
   <dd><code title=attr-object-name><a href=#attr-object-name>name</a></code></dd>
   <dd><code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlobjectelement>HTMLObjectElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-object-data title=dom-object-data>data</a>;
           attribute DOMString <a href=#dom-object-type title=dom-object-type>type</a>;
           attribute DOMString <a href=#dom-object-name title=dom-object-name>name</a>;
           attribute DOMString <a href=#dom-object-usemap title=dom-object-useMap>useMap</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
           attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;
           attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
  readonly attribute Document <a href=#dom-object-contentdocument title=dom-object-contentDocument>contentDocument</a>;
  readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-object-contentwindow title=dom-object-contentWindow>contentWindow</a>;

  readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
  readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
  readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
  boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
  void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
};</pre>
    <div class=impl>
    <p>Depending on the type of content instantiated by the
    <code><a href=#the-object-element>object</a></code> element, the node also supports other
    interfaces.</p>
    </div>
   </dd>
  </dl><p>The <code><a href=#the-object-element>object</a></code> element can represent an external
  resource, which, depending on the type of the resource, will either
  be treated as an image, as a <a href=#nested-browsing-context>nested browsing context</a>,
  or as an external resource to be processed by a
  <a href=#plugin>plugin</a>.</p>

  <p>The <dfn id=attr-object-data title=attr-object-data><code>data</code></dfn>
  attribute, if present, specifies the address of the resource. If
  present, the attribute must be a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty
  URL potentially surrounded by spaces</a>.</p>

  <p>The <dfn id=attr-object-type title=attr-object-type><code>type</code></dfn>
  attribute, if present, specifies the type of the resource. If
  present, the attribute must be a <a href=#valid-mime-type>valid MIME type</a>.</p>

  <p>At least one of either the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute or the <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute must be present.</p>

  <p>The <dfn id=attr-object-name title=attr-object-name><code>name</code></dfn>
  attribute, if present, must be a <a href=#valid-browsing-context-name>valid browsing context
  name</a>. The given value is used to name the <a href=#nested-browsing-context>nested
  browsing context</a>, if applicable.</p>

  <div class=impl>

  <p>When the element is created, when it is popped off the
  <a href=#stack-of-open-elements>stack of open elements</a> of an <a href=#html-parser>HTML parser</a>
  or <a href=#xml-parser>XML parser</a>, and subsequently whenever the element is
  <a href=#insert-an-element-into-a-document title="insert an element into a document">inserted into a
  document</a> or <a href=#remove-an-element-from-a-document title="remove an element from a
  document">removed from a document</a>; and whenever the element's
  <code><a href=#document>Document</a></code> changes whether it is <a href=#fully-active>fully
  active</a>; and whenever an ancestor <code><a href=#the-object-element>object</a></code> element
  changes to or from showing its <a href=#fallback-content>fallback content</a>; and
  whenever the element's <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code> attribute is set,
  changed, or removed; and, when its <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code> attribute is not present,
  whenever its <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute is
  set, changed, or removed; and, when neither its <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code> attribute nor its <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute are present, whenever
  its <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute is set,
  changed, or removed: the user agent must <a href=#queue-a-task>queue a task</a>
  to run the following steps to (re)determine what the
  <code><a href=#the-object-element>object</a></code> element represents. The <a href=#task-source>task source</a>
  for this <a href=#concept-task title=concept-task>task</a> is the <a href=#dom-manipulation-task-source>DOM
  manipulation task source</a>.</p> <!-- Changing the base URL
  doesn't trigger this. -->

  <ol><li>

    <p>If the user has indicated a preference that this
    <code><a href=#the-object-element>object</a></code> element's <a href=#fallback-content>fallback content</a> be
    shown instead of the element's usual behavior, then jump to the
    last step in the overall set of steps (fallback).</p>

    <p class=note>For example, a user could ask for the element's
    <a href=#fallback-content>fallback content</a> to be shown because that content
    uses a format that the user finds more accessible.</p>

   </li>

   <li>

    <p>If the element has an ancestor <a href=#media-element>media element</a>, or
    has an ancestor <code><a href=#the-object-element>object</a></code> element that is <em>not</em>
    showing its <a href=#fallback-content>fallback content</a>, or if the element is
    not <a href=#in-a-document title="in a document">in a <code>Document</code></a>
    with a <a href=#browsing-context>browsing context</a>, or if the element's
    <code><a href=#document>Document</a></code> is not <a href=#fully-active>fully active</a>, or if the
    element is still in the <a href=#stack-of-open-elements>stack of open elements</a> of an
    <a href=#html-parser>HTML parser</a> or <a href=#xml-parser>XML parser</a>, then jump to
    the last step in the overall set of steps (fallback).</p>

   </li>

   <li>

    <!-- what if it's not in the document? if that should prevent
    plugin instantiation, then here just skip to the last step -->

    <p>If the <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code>
    attribute is present, and has a value that isn't the empty string,
    then: if the user agent can find a <a href=#plugin>plugin</a> suitable
    according to the value of the <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code> attribute, and <a href=#sandboxPluginObject>plugins aren't being sandboxed</a>,
    then that <a href=#plugin>plugin</a> <a href=#object-plugin>should be
    used</a>, and the value of the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute, if any, should be
    passed to the <a href=#plugin>plugin</a>. If no suitable
    <a href=#plugin>plugin</a> can be found, or if the <a href=#plugin>plugin</a>
    reports an error, jump to the last step in the overall set of
    steps (fallback).</p>

    <!--
     case insensitive:
      is "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" -> application/x-shockwave-flash
      is "clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa" -> audio/x-pn-realaudio-plugin
      is "clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" -> video/quicktime
      is "clsid:166b1bca-3f9c-11cf-8075-444553540000" -> application/x-director
      is "clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" -> application/x-mplayer2
      starts with "java:"                             -> application/x-java-vm
      starts with "clsid:"                            -> application/x-oleobject
    -->

   </li>

   <!-- (v2?)
   we may have to define magic fallback to <param> if it turns out to
   be needed in testing:
   <hyatt> apparently your url can come from <param>
   <hyatt> not just the data attribute
   <hyatt> our code looks for params with "src", "movie", "code" and "url"
   <hyatt> and also tries to find the type on a param
   <Hixie> oh that's you trying to have hacky activex support
   <Hixie> opera does that too
   <hyatt> yeah we support activex versions of plugins that are common
   <hyatt> like flash and quicktime and realaudio
   <Hixie> that would be a step 1b. if no data attribute, then look for a <param> to get you a URL instead.
   <Hixie> and if you find one, carry on as if that was your data="".
   -->

   <li><p>If the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute
   is present and its value is not the empty string, then:</p>

    <ol><li><p>If the <code title=attr-object-type><a href=#attr-object-type>type</a></code>
     attribute is present and its value is not a type that the user
     agent supports, and is not a type that the user agent can find a
     <a href=#plugin>plugin</a> for, then the user agent may jump to the last
     step in the overall set of steps (fallback) without fetching the
     content to examine its real type.</li>

     <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the
     <a href=#url>URL</a> specified by the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute, relative to the
     element.</li>

     <li><p>If that failed, <a href=#fire-a-simple-event>fire a simple event</a> named
     <code title=event-error>error</code> at the element, then jump
     to the last step in the overall set of steps (fallback).</li>

     <li>

      <p><a href=#fetch>Fetch</a> the resulting <a href=#absolute-url>absolute URL</a>,
      from the element's <a href=#browsing-context-scope-origin>browsing context scope origin</a> if
      it has one<!-- potentially http-origin privacy sensitive
      -->.</p>

      <!-- similar text in various places --> <p>Fetching the resource
      must <a href=#delay-the-load-event>delay the load event</a> of the element's document
      until the <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task
      source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> (defined next) has been run.</p>

     </li>

     <li><p>If the resource is not yet available (e.g. because the
     resource was not available in the cache, so that loading the
     resource required making a request over the network), then jump
     to the last step in the overall set of steps (fallback). The
     <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue
     a task">queued</a> by the <a href=#networking-task-source>networking task source</a>
     once the resource is available must restart this algorithm from
     this step. Resources can load incrementally; user agents may opt
     to consider a resource "available" whenever enough data has been
     obtained to begin processing the resource.</li>

     <li><p>If the load failed (e.g. there was an HTTP 404 error,
     there was a DNS error), <a href=#fire-a-simple-event>fire a simple event</a> named
     <code title=event-error>error</code> at the element, then jump
     to the last step in the overall set of steps (fallback).</li>

     <li id=object-type-detection>

      <p>Determine the <var title="">resource type</var>, as follows:</p>

<!-- Hopefully this step is exactly equivalent to the following:

 START
   |
   V
 Is there a Content-Type and is the UA going to obey it blindly?
   |                   |
   | YES               | NO
   |                   V                                                          YES
   |                 Is there a type="" attribute whose value is a plugin type? ============================================-.
   |                   |                                                                                                     |
   |                   | NO                                                                                                  |
   |                   V                        NO                                       YES                                 |
   |                 Is there a Content type? ========-> Is there a type="" attribute? ==========> Let TYPE be type=""       |
   |                   |                                                           |               attribute value           |
   |                   | YES                                                       | NO                    |                 |
   V            NO     V                                                           |                       V                 |
   +-<============== Is it text/plain or application/octet-stream?                 `==> Let TYPE be  =====>+                 |
   |                   |                                     |                          Sniffed type       |                 |
   |                   | text/plain                          | octet-stream                                V                 |
   |                   V                              YES    V                                          Is TYPE              |
   |                 Does the page sniff as binary? ======> Is there a type="" attribute?       application/octet-stream?    |
   |                   |                                     |              |                      |                |        |
   |                   | NO                                  | YES          | NO                   | YES            | NO     |
   |                   |                                     |       YES    V                      V                |        |
   |                   |                  application/octet-stream? =====> Extension that is plugin type?           |        |
   |                   |                                     |                          |          |                |        |
   |                   |                                     | NO                       | NO       | YES            |        |
   |                   |                                     V                          |          |                |        |
   |                   |                           Type attribute is XML or     YES     V          |                |        |
   |                   |                           doesn't start with image/* ======> FALLBACK     |                |        |
   |                   |                           and is not a plugin type?                       |                |        |
   |                   |                                          |                                |                |        |
   |                   |                                          | NO                             |                |        V
   V                   V                                          V                                V                V       Use
  Use                 Use                                        Use it (will be                  Use              Use      type=""
  Content-Type        text/plain                                 bitmap or plugin)                extension        TYPE     attribute
   |                   |                                          |                                |                |        |
   |                   V                                          V                                V                V        |
   `================->-+========================================>-+==============>-+-<============-+-<==============+-<======'
                                                                                   |
                                                                                   V
                                                                  Continue following rules in the spec, which might
                                                                  result in a plugin, a browsing context, an image,
                                                                  or using fallback, depending on the UA and the type.


   "Extension that is plugin type?" means "Is there an extension that matches one that a plugin supports?".
   Plugins are not allowed to register text/plain or application/octet-stream.

-->

      <ol><li>

        <p>Let the <var title="">resource type</var> be unknown.</p>

       </li>

       <li>

        <!-- by request: http://www.w3.org/Bugs/Public/show_bug.cgi?id=8479 -->

        <p>If the user agent is configured to strictly obey
        Content-Type headers for this resource, and the resource has
        <a href=#content-type title=Content-Type>associated Content-Type
        metadata</a>, then let the <var title="">resource
        type</var> be the type specified in <a href=#content-type title=Content-Type>the resource's Content-Type
        metadata</a>, and jump to the step below labeled
        <i>handler</i>.</p>

       </li>

       <li>

        <p>If there is a <code title=attr-object-type><a href=#attr-object-type>type</a></code>
        attribute present on the <code><a href=#the-object-element>object</a></code> element, and that
        attribute's value is not a type that the user agent supports,
        but it <em>is</em> a type that a <a href=#plugin>plugin</a> supports,
        then let the <var title="">resource type</var> be the type
        specified in that <code title=attr-object-type><a href=#attr-object-type>type</a></code>
        attribute, and jump to the step below labeled
        <i>handler</i>.</p>

       </li>

       <li>

        <p>Run the approprate set of steps from the following
        list:</p>

        <dl class=switch><dt>The resource has <a href=#content-type title=Content-Type>associated
         Content-Type metadata</a></dt>

         <dd>

          <ol><li>

            <p>Let <var title="">binary</var> be false.</p>

           </li>

           <li>

            <p>If the type specified in <a href=#content-type title=Content-Type>the
            resource's Content-Type metadata</a> is
            "<code>text/plain</code>", and the result of applying the
            <a href=#content-type-sniffing:-text-or-binary title="Content-Type sniffing: text or binary">rules
            for distingushing if a resource is text or binary</a>
            to the resource is that the resource is not
            <code>text/plain</code>, then set <var title="">binary</var> to true.</p>

           </li>

           <li>

            <p>If the type specified in <a href=#content-type title=Content-Type>the
            resource's Content-Type metadata</a> is
            "<code>application/octet-stream</code>", then set <var title="">binary</var> to true.</p>

           </li>

           <li>

            <p>If <var title="">binary</var> is false, then let the
            <var title="">resource type</var> be the type specified in
            <a href=#content-type title=Content-Type>the resource's Content-Type
            metadata</a>, and jump to the step below labeled
            <i>handler</i>.</p>

           </li>

           <li>

            <p>If there is a <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute present on
            the <code><a href=#the-object-element>object</a></code> element, and its value is not
            <code>application/octet-stream</code>, then run the
            following steps:</p>

            <ol><li>

              <p>If the attribute's value is a type that a <a href=#plugin>plugin</a> supports, or
              the attribute's value is a type that starts with "<code>image/</code>" that is not also an <a href=#xml-mime-type>XML MIME type</a>,
              then let the <var title="">resource type</var> be the type specified in that <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute.</p>

             </li>

             <li>

              <p>Jump to the step below labeled <i>handler</i>.</p>

             </li>

            </ol></li>

          </ol></dd>

         <dt>The resource does not have <a href=#content-type title=Content-Type>associated Content-Type
         metadata</a></dt>

         <dd>

          <ol><li>

            <p>If there is a <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute present on
            the <code><a href=#the-object-element>object</a></code> element, then let the <var title="">tentative type</var> be the type specified in that
            <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute.</p>

            <p>Otherwise, let <var title="">tentative type</var> be the
            <a href=#content-type-sniffing-0 title="content-type sniffing">sniffed type of the
            resource</a>.</p>

           </li>

           <li>

            <p>If <var title="">tentative type</var> is <em>not</em>
            <code>application/octet-stream</code>, then let <var title="">resource type</var> be <var title="">tentative
            type</var> and jump to the step below labeled
            <i>handler</i>.</p>

           </li>

          </ol></dd>

        </dl></li>

       <li>

        <!-- if we get to this point we know we can successfully
        parsed the URL, since this algorithm is only used after
        fetching the resource in the steps above -->

        <p>If the <a href=#url-path title=url-path>&lt;path&gt;</a> component
        of the <a href=#url>URL</a> of the specified resource (after any
        redirects) matches a pattern that a <a href=#plugin>plugin</a>
        supports, then let <var title="">resource type</var> be the
        type that that plugin can handle.</p>

        <p class=example>For example, a plugin might say that it can
        handle resources with <a href=#url-path title=url-path>&lt;path&gt;</a> components that end with
        the four character string "<code title="">.swf</code>".</p>

        <!-- it's sad that we have to do extension sniffing. sigh. -->
        <!-- see also <embed> which has a similar step -->

       </li>

      </ol><p class=note>It is possible for this step to finish with <var title="">resource type</var> still being unknown, or for one of
      the substeps above to jump straight to the next step. In both
      cases, the next step will trigger fallback.</p>

     </li>

     <li><p><i>Handler</i>: Handle the content as given by the first
     of the following cases that matches:</p>

      <dl class=switch><dt>If the <var title="">resource type</var> is not a type that
       the user agent supports, but it <em>is</em> a type that a
       <a href=#plugin>plugin</a> supports</dt>

       <dd>

        <p>If <a href=#sandboxPluginObject>plugins are being
        sandboxed</a>, jump to the last step in the overall set of
        steps (fallback).</p>

        <p>Otherwise, the user agent should <a href=#object-plugin>use the plugin that supports <var title="">resource type</var></a> and pass the content of the
        resource to that <a href=#plugin>plugin</a>. If the
        <a href=#plugin>plugin</a> reports an error, then jump to the last
        step in the overall set of steps (fallback).</p>

       </dd>


       <dt>If the <var title="">resource type</var> is an <a href=#xml-mime-type>XML MIME
       type</a>, or
       <!-- (redundant with the next one) if the <var title="">resource type</var> is HTML, or -->
       if the <var title="">resource type</var> does not start with
       "<code>image/</code>"</dt>

       <dd>

        <p>The <code><a href=#the-object-element>object</a></code> element must be associated with a
        newly created <a href=#nested-browsing-context>nested browsing context</a>, if it does
        not already have one.</p>

        <p>If the <a href=#url>URL</a> of the given resource is not
        <code><a href=#about:blank>about:blank</a></code>, the element's <a href=#nested-browsing-context>nested browsing
        context</a> must then be <a href=#navigate title=navigate>navigated</a> to that resource, with
        <a href=#replacement-enabled>replacement enabled</a>, and with the
        <code><a href=#the-object-element>object</a></code> element's document's <a href=#browsing-context>browsing
        context</a> as the <a href=#source-browsing-context>source browsing
        context</a>. (The <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute of the
        <code><a href=#the-object-element>object</a></code> element doesn't get updated if the
        browsing context gets further navigated to other
        locations.)</p>

        <p>If the <a href=#url>URL</a> of the given resource <em>is</em>
        <code><a href=#about:blank>about:blank</a></code>, then, instead, the user agent must
        <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
        named <code title=event-load>load</code> at the
        <code><a href=#the-object-element>object</a></code> element.</p>

        <p>The <code><a href=#the-object-element>object</a></code> element <a href=#represents>represents</a> the
        <a href=#nested-browsing-context>nested browsing context</a>.</p>

        <p>If the <code title=attr-object-name><a href=#attr-object-name>name</a></code> attribute
        is present, the <a href=#browsing-context-name>browsing context name</a> must be set
        to the value of this attribute; otherwise, the <a href=#browsing-context-name>browsing
        context name</a> must be set to the empty string.</p>

        <p class=note>It's possible that the <a href=#navigate title=navigate>navigation</a> of the <a href=#browsing-context>browsing
        context</a> will actually obtain the resource from a
        different <a href=#application-cache>application cache</a>. Even if the resource
        is then found to have a different type, it is still used as
        part of a <a href=#nested-browsing-context>nested browsing context</a>; this algorithm
        doesn't restart with the new resource.</p>

        <!-- note that malformed XML files don't cause fallback -->

       </dd>


       <dt>If the <var title="">resource type</var> starts with
       "<code>image/</code>", and support for images has not been
       disabled</dt>

       <dd>

        <p>Apply the <a href=#content-type-sniffing:-image title="content-type sniffing: image">image
        sniffing</a> rules to determine the type of the image.</p>

        <p>The <code><a href=#the-object-element>object</a></code> element <a href=#represents>represents</a> the
        specified image. The image is not a <a href=#nested-browsing-context>nested browsing
        context</a>.</p>

        <p>If the image cannot be rendered, e.g. because it is
        malformed or in an unsupported format, jump to the last step
        in the overall set of steps (fallback).</p>

       </dd>


       <dt>Otherwise</dt>

       <dd>

        <p>The given <var title="">resource type</var> is not
        supported. Jump to the last step in the overall set of steps
        (fallback).</p>

        <p class=note>If the previous step ended with the <var title="">resource type</var> being unknown, this is the case
        that is triggered.</p>

       </dd>

      </dl></li>

     <li><p>The element's contents are not part of what the
     <code><a href=#the-object-element>object</a></code> element represents.</p>

     <li>

      <p>Once the resource is completely loaded, <a href=#queue-a-task>queue a
      task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load>load</code> at the element.</p>

      <p>The <a href=#task-source>task source</a> for this task<!--tasks mentioned
      in this section--> is the <a href=#dom-manipulation-task-source>DOM manipulation task
      source</a>.</p>

     </li>

    </ol></li>

   <li><p>If the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute
   is absent but the <code title=attr-object-type><a href=#attr-object-type>type</a></code>
   attribute is present, <a href=#sandboxPluginObject>plugins aren't
   being sandboxed</a>, and the user agent can find a
   <a href=#plugin>plugin</a> suitable according to the value of the <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute, then that
   <a href=#plugin>plugin</a> <a href=#object-plugin>should be used</a>. If
   no suitable <a href=#plugin>plugin</a> can be found, or if the
   <a href=#plugin>plugin</a> reports an error, jump to the next step
   (fallback).</li>

   <li><p>(Fallback.) The <code><a href=#the-object-element>object</a></code> element
   <a href=#represents>represents</a> the element's children, ignoring any
   leading <code><a href=#the-param-element>param</a></code> element children. This is the element's
   <a href=#fallback-content>fallback content</a>. If the element has an instantiated
   <a href=#plugin>plugin</a>, then unload it.</li>

  </ol><p id=object-plugin>When the algorithm above instantiates a
  <a href=#plugin>plugin</a>, the user agent should pass to the
  <a href=#plugin>plugin</a> used the names and values of all the attributes
  on the element, in the order they were added to the element, with
  the attributes added by the parser being ordered in source order,
  followed by a parameter named "PARAM" whose value is null,
  followed by all the names and values of <a href=#concept-param-parameter title=concept-param-parameter>parameters</a> given by
  <code><a href=#the-param-element>param</a></code> elements that are children of the
  <code><a href=#the-object-element>object</a></code> element, in <a href=#tree-order>tree order</a>. If the
  <a href=#plugin>plugin</a> supports a scriptable interface, the
  <code><a href=#htmlobjectelement>HTMLObjectElement</a></code> object representing the element
  should expose that interface. The <code><a href=#the-object-element>object</a></code> element
  <a href=#represents>represents</a> the <a href=#plugin>plugin</a>. The
  <a href=#plugin>plugin</a> is not a nested <a href=#browsing-context>browsing
  context</a>.</p>

  <p id=sandboxPluginObject>If either:</p>

  <ul><li>the <a href=#sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</a> was
   set on the <code><a href=#the-object-element>object</a></code> element's <code><a href=#document>Document</a></code>'s
   <a href=#browsing-context>browsing context</a> when the <code><a href=#document>Document</a></code> was
   created, or</li>

   <li>the <code><a href=#the-object-element>object</a></code> element's <code><a href=#document>Document</a></code> was
   parsed from a resource whose <a href=#content-type-sniffing-0 title="Content-Type
   sniffing">sniffed type</a> as determined during <a href=#navigate title=navigate>navigation</a> is
   <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code></li>

  </ul><p>...then the steps above must always act as if they had failed to
  find a <a href=#plugin>plugin</a>, even if one would otherwise have been
  used.</p>

  <p class=note>The above algorithm is independent of CSS properties
  (including 'display', 'overflow', and 'visibility'). For example, it
  runs even if the element is hidden with a 'display:none' CSS style,
  and does not run <em>again</em> if the element's visibility
  changes.</p>

  <p>Due to the algorithm above, the contents of <code><a href=#the-object-element>object</a></code>
  elements act as <a href=#fallback-content>fallback content</a>, used only when
  referenced resources can't be shown (e.g. because it returned a 404
  error). This allows multiple <code><a href=#the-object-element>object</a></code> elements to be
  nested inside each other, targeting multiple user agents with
  different capabilities, with the user agent picking the first one it
  supports.</p>

  <p>Whenever the <code title=attr-object-name><a href=#attr-object-name>name</a></code> attribute
  is set, if the <code><a href=#the-object-element>object</a></code> element has a nested
  <a href=#browsing-context>browsing context</a>, its <a href=#browsing-context-name title="browsing context
  name">name</a> must be changed to the new value. If the attribute
  is removed, if the <code><a href=#the-object-element>object</a></code> element has a <a href=#browsing-context>browsing
  context</a>, the <a href=#browsing-context-name>browsing context name</a> must be set
  to the empty string.</p>

  </div>

  <p>The <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute,
  if present while the <code><a href=#the-object-element>object</a></code> element represents an
  image, can indicate that the object has an associated <a href=#image-map>image
  map</a>. <span class=impl>The attribute must be ignored if the
  <code><a href=#the-object-element>object</a></code> element doesn't represent an image.</span></p>

  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-object-element>object</a></code> element with its
  <a href=#form-owner>form owner</a>.</p>

  <div class=impl>

  <p><strong>Constraint validation</strong>: <code><a href=#the-object-element>object</a></code>
  elements are always <a href=#barred-from-constraint-validation>barred from constraint
  validation</a>.</p>

  </div>

  <p>The <code><a href=#the-object-element>object</a></code> element supports <a href=#dimension-attributes>dimension
  attributes</a>.</p>

  <div class=impl>

  <p>The IDL attributes <dfn id=dom-object-data title=dom-object-data><code>data</code></dfn>, <dfn id=dom-object-type title=dom-object-type><code>type</code></dfn>, <dfn id=dom-object-name title=dom-object-name><code>name</code></dfn>, and <dfn id=dom-object-usemap title=dom-object-useMap><code>useMap</code></dfn> each must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  <p>The <dfn id=dom-object-contentdocument title=dom-object-contentDocument><code>contentDocument</code></dfn>
  IDL attribute must return the <code><a href=#document>Document</a></code> object of the
  <a href=#active-document>active document</a> of the <code><a href=#the-object-element>object</a></code> element's
  <a href=#nested-browsing-context>nested browsing context</a>, if it has one; otherwise, it
  must return null.</p>

  <p>The <dfn id=dom-object-contentwindow title=dom-object-contentWindow><code>contentWindow</code></dfn>
  IDL attribute must return the <code><a href=#windowproxy>WindowProxy</a></code> object of the
  <code><a href=#the-object-element>object</a></code> element's <a href=#nested-browsing-context>nested browsing context</a>,
  if it has one; otherwise, it must return null.</p>

  <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
  attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
  methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
  <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute is part of the
  element's forms API.</p>

  </div>

  <div class=example>

   <p>In the following example, a Java applet is embedded in a page
   using the <code><a href=#the-object-element>object</a></code> element. (Generally speaking, it is
   better to avoid using applets like these and instead use native
   JavaScript and HTML to provide the functionality, since that way
   the application will work on all Web browsers without requiring a
   third-party plugin. Many devices, especially embedded devices, do
   not support third-party technologies like Java.)</p>

   <pre>&lt;figure&gt;
 &lt;object type="application/x-java-applet"&gt;
  &lt;param name="code" value="MyJavaClass"&gt;
  &lt;p&gt;You do not have Java available, or it is disabled.&lt;/p&gt;
 &lt;/object&gt;
 &lt;figcaption&gt;My Java Clock&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

  </div>

  <div class=example>

   <p>In this example, an HTML page is embedded in another using the
   <code><a href=#the-object-element>object</a></code> element.</p>

   <pre>&lt;figure&gt;
 &lt;object data="clock.html"&gt;&lt;/object&gt;
 &lt;figcaption&gt;My HTML Clock&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

  </div>

  <div class=example>

   <p>The following example shows how a plugin can be used in HTML (in
   this case the Flash plugin, to show a video file). Fallback is
   provided for users who do not have Flash enabled, in this case
   using the <code><a href=#video>video</a></code> element to show the video for those
   using user agents that support <code><a href=#video>video</a></code>, and finally
   providing a link to the video for those who have neither Flash nor
   a <code><a href=#video>video</a></code>-capable browser.</p>

   <pre>&lt;p&gt;Look at my video:
 &lt;object type="application/x-shockwave-flash"&gt;
  &lt;param name=movie value="http://video.example.com/library/watch.swf"&gt;
  &lt;param name=allowfullscreen value=true&gt;
  &lt;param name=flashvars value="http://video.example.com/vids/315981"&gt;
  &lt;video controls src="http://video.example.com/vids/315981"&gt;
   &lt;a href="http://video.example.com/vids/315981"&gt;View video&lt;/a&gt;.
  &lt;/video&gt;
 &lt;/object&gt;
&lt;/p&gt;</pre>

  </div>



  <h4 id=the-param-element><span class=secno>4.8.5 </span>The <dfn><code>param</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of an <code><a href=#the-object-element>object</a></code> element, before any <a href=#flow-content>flow content</a>.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-param-name><a href=#attr-param-name>name</a></code></dd>
   <dd><code title=attr-param-value><a href=#attr-param-value>value</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlparamelement>HTMLParamElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-param-name title=dom-param-name>name</a>;
           attribute DOMString <a href=#dom-param-value title=dom-param-value>value</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-param-element>param</a></code> element defines parameters for plugins
  invoked by <code><a href=#the-object-element>object</a></code> elements. It does not <a href=#represents title=represents>represent</a> anything on its own.</p>

  <p>The <dfn id=attr-param-name title=attr-param-name><code>name</code></dfn>
  attribute gives the name of the parameter.</p>

  <p>The <dfn id=attr-param-value title=attr-param-value><code>value</code></dfn>
  attribute gives the value of the parameter.</p>

  <p>Both attributes must be present. They may have any value.</p>

  <div class=impl>

  <p>If both attributes are present, and if the parent element of the
  <code><a href=#the-param-element>param</a></code> is an <code><a href=#the-object-element>object</a></code> element, then the
  element defines a <dfn id=concept-param-parameter title=concept-param-parameter>parameter</dfn> with the given
  name/value pair.</p>

  <p>The IDL attributes <dfn id=dom-param-name title=dom-param-name><code>name</code></dfn> and <dfn id=dom-param-value title=dom-param-value><code>value</code></dfn> must both
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  </div>

  <div class=example>

   <p>The following example shows how the <code><a href=#the-param-element>param</a></code> element
   can be used to pass a parameter to a plugin, in this case the O3D
   plugin.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
  &lt;title&gt;O3D test page&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;
   &lt;object type="application/vnd.o3d.auto"&gt;
    <strong>&lt;param name="o3d_features" value="FloatingPointTextures"&gt;</strong>
    This page requires the use of a proprietary technology. Since you
    have not installed the software product required to view this
    page, you should try visiting another site that instead uses open
    vendor-neutral technologies.
   &lt;/object&gt;
   &lt;script src="o3dtest.js"&gt;&lt;/script&gt;
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>


  <h4 id=video><span class=secno>4.8.6 </span>The <dfn><code>video</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#embedded-content>Embedded content</a>.</dd>
   <dd>If the element has a <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute:
<!--TT-->
 zero or more <code><a href=#the-track-element>track</a></code> elements, then
<!--TT-->
 <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then
<!--TT-->
 zero or more <code><a href=#the-track-element>track</a></code> elements, then
<!--TT-->
 <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-media-src><a href=#attr-media-src>src</a></code></dd>
   <dd><code title=attr-video-poster><a href=#attr-video-poster>poster</a></code></dd>
   <dd><code title=attr-media-preload><a href=#attr-media-preload>preload</a></code></dd>
   <dd><code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code></dd>
   <dd><code title=attr-media-loop><a href=#attr-media-loop>loop</a></code></dd>
   <dd><code title=attr-media-controls><a href=#attr-media-controls>controls</a></code></dd>
   <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlvideoelement>HTMLVideoElement</dfn> : <a href=#htmlmediaelement>HTMLMediaElement</a> {
           attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;
           attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
  readonly attribute unsigned long <a href=#dom-video-videowidth title=dom-video-videoWidth>videoWidth</a>;
  readonly attribute unsigned long <a href=#dom-video-videoheight title=dom-video-videoHeight>videoHeight</a>;
           attribute DOMString <a href=#dom-video-poster title=dom-video-poster>poster</a>;
};</pre>
   </dd>
  </dl><p>A <code><a href=#video>video</a></code> element is used for playing videos or
  movies.</p>

  <p>Content may be provided inside the <code><a href=#video>video</a></code>
  element<span class=impl>. User agents should not show this content
  to the user</span>; it is intended for older Web browsers which do
  not support <code><a href=#video>video</a></code>, so that legacy video plugins can be
  tried, or to show text to the users of these older browsers informing
  them of how to access the video contents.</p>

  <p class=note>In particular, this content is not intended to
  address accessibility concerns. To make video content accessible to
  the blind, deaf, and those with other physical or cognitive
  disabilities, authors are expected to provide alternative media
  streams and/or to embed accessibility aids (such as caption or
  subtitle tracks, audio description tracks, or sign-language
  overlays) into their media streams.</p>

  <p>The <code><a href=#video>video</a></code> element is a <a href=#media-element>media element</a>
  whose <a href=#media-data>media data</a> is ostensibly video data, possibly
  with associated audio data.</p>

  <p>The <code title=attr-media-src><a href=#attr-media-src>src</a></code>, <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>, <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>, <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>, and <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attributes are <a href=#media-element-attributes title="media element attributes">the attributes common to all media
  elements</a>.</p>

  <p>The <dfn id=attr-video-poster title=attr-video-poster><code>poster</code></dfn>
  attribute gives the address of an image file that the user agent can
  show while no video data is available. The attribute, if present,
  must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a>. <span class=impl>If the specified resource is to be
  used, then, when the element is created or when the <code title=attr-video-poster><a href=#attr-video-poster>poster</a></code> attribute is set, if its
  value is not the empty string, its value must be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element, and
  if that is successful, the resulting <a href=#absolute-url>absolute URL</a> must
  be <a href=#fetch title=fetch>fetched</a>, from the element's
  <code><a href=#document>Document</a></code>'s <a href=#origin>origin</a>; this must <a href=#delay-the-load-event>delay
  the load event</a> of the element's document. The <dfn id=poster-frame>poster
  frame</dfn> is then the image obtained from that resource, if
  any.</span></p> <!-- thus it is unaffected by changes to the base
  URL. -->

  <p class=note>The image given by the <code title=attr-video-poster><a href=#attr-video-poster>poster</a></code> attribute, the <i><a href=#poster-frame>poster
  frame</a></i>, is intended to be a representative frame of the video
  (typically one of the first non-blank frames) that gives the user an
  idea of what the video is like.</p>

  <div class=impl>

  <p>The <dfn id=dom-video-poster title=dom-video-poster><code>poster</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-video-poster><a href=#attr-video-poster>poster</a></code> content attribute.</p>

  <hr><p>When no video data is available (the element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
  <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> but no video
  data has yet been obtained at all), the <code><a href=#video>video</a></code> element
  <a href=#represents>represents</a> either the <a href=#poster-frame>poster frame</a>, or
  nothing.</p>

  <p>When a <code><a href=#video>video</a></code> element is <a href=#dom-media-paused title=dom-media-paused>paused</a> and the <a href=#current-playback-position title="current
  playback position">current playback position</a> is the first
  frame of video, the element <a href=#represents>represents</a> either the frame
  of video corresponding to the <a href=#current-playback-position title="current playback
  position">current playback position</a> or the <a href=#poster-frame>poster
  frame</a>, at the discretion of the user agent.</p>

  <p>Notwithstanding the above, the <a href=#poster-frame>poster frame</a> should
  be preferred over nothing, but the <a href=#poster-frame>poster frame</a> should
  not be shown again after a frame of video has been shown.</p>

  <p>When a <code><a href=#video>video</a></code> element is <a href=#dom-media-paused title=dom-media-paused>paused</a> at any other position, the
  element <a href=#represents>represents</a> the frame of video corresponding to
  the <a href=#current-playback-position title="current playback position">current playback
  position</a>, or, if that is not yet available (e.g. because the
  video is seeking or buffering), the last frame of the video to have
  been rendered.</p>

  <p>When a <code><a href=#video>video</a></code> element is <a href=#potentially-playing>potentially
  playing</a>, it <a href=#represents>represents</a> the frame of video at the
  continuously increasing <a href=#current-playback-position title="current playback
  position">"current" position</a>. When the <a href=#current-playback-position>current playback
  position</a> changes such that the last frame rendered is no
  longer the frame corresponding to the <a href=#current-playback-position>current playback
  position</a> in the video, the new frame must be
  rendered. Similarly, any audio associated with the video must, if
  played, be played synchronized with the <a href=#current-playback-position>current playback
  position</a>, at the specified <a href=#dom-media-volume title=dom-media-volume>volume</a> with the specified <a href=#dom-media-muted title=dom-media-muted>mute state</a>.</p>

  <p>When a <code><a href=#video>video</a></code> element is neither <a href=#potentially-playing>potentially
  playing</a> nor <a href=#dom-media-paused title=dom-media-paused>paused</a>
  (e.g. when seeking or stalled), the element <a href=#represents>represents</a>
  the last frame of the video to have been rendered.</p>

  <p class=note>Which frame in a video stream corresponds to a
  particular playback position is defined by the video stream's
  format.</p>

  <p>In addition to the above, the user agent may provide messages to
  the user (such as "buffering", "no video loaded", "error", or more
  detailed information) by overlaying text or icons on the video or
  other areas of the element's playback area, or in another
  appropriate manner.</p>

  <p>User agents that cannot render the video may instead make the
  element <a href=#represents title=represents>represent</a> a link to an
  external video playback utility or to the video data itself.</p>

  <hr></div>

  <dl class=domintro><dt><var title="">video</var> . <code title=dom-video-videoWidth><a href=#dom-video-videowidth>videoWidth</a></code></dt>
   <dt><var title="">video</var> . <code title=dom-video-videoHeight><a href=#dom-video-videoheight>videoHeight</a></code></dt>

   <dd>

    <p>These attributes return the intrinsic dimensions of the video,
    or zero if the dimensions are not known.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic
  width</dfn> and <dfn id=concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</dfn> of the
  <a href=#media-resource>media resource</a> are the dimensions of the resource in
  CSS pixels after taking into account the resource's dimensions,
  aspect ratio, clean aperture, resolution, and so forth, as defined
  for the format used by the resource. If an anamorphic format does
  not define how to apply the aspect ratio to the video data's
  dimensions to obtain the "correct" dimensions, then the user agent
  must apply the ratio by increasing one dimension and leaving the
  other unchanged.</p>

  <p>The <dfn id=dom-video-videowidth title=dom-video-videoWidth><code>videoWidth</code></dfn> IDL
  attribute must return the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> of the
  video in CSS pixels. The <dfn id=dom-video-videoheight title=dom-video-videoHeight><code>videoHeight</code></dfn> IDL
  attribute must return the <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a> of
  the video in CSS pixels. If the element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, then the
  attributes must return 0.</p>

  </div>

  <p>The <code><a href=#video>video</a></code> element supports <a href=#dimension-attributes>dimension
  attributes</a>.</p>

  <div class=impl>

  <p>Video content should be rendered inside the element's playback
  area such that the video content is shown centered in the playback
  area at the largest possible size that fits completely within it,
  with the video content's aspect ratio being preserved. Thus, if the
  aspect ratio of the playback area does not match the aspect ratio of
  the video, the video will be shown letterboxed or pillarboxed. Areas
  of the element's playback area that do not contain the video
  represent nothing.</p>

  <p>The intrinsic width of a <code><a href=#video>video</a></code> element's playback
  area is the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic
  width</a> of the video resource, if that is available; otherwise
  it is the intrinsic width of the <a href=#poster-frame>poster frame</a>, if that
  is available; otherwise it is 300 CSS pixels.</p>

  <p>The intrinsic height of a <code><a href=#video>video</a></code> element's playback
  area is the <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic
  height</a> of the video resource, if that is available; otherwise
  it is the intrinsic height of the <a href=#poster-frame>poster frame</a>, if that
  is available; otherwise it is 150 CSS pixels.</p>

  <hr><p>User agents should provide controls to enable or disable the
  display of closed captions, audio description tracks, and other
  additional data associated with the video stream, though such
  features should, again, not interfere with the page's normal
  rendering.</p>

  <p>User agents may allow users to view the video content in manners
  more suitable to the user (e.g. full-screen or in an independent
  resizable window). As for the other user interface features,
  controls to enable this should not interfere with the page's normal
  rendering unless the user agent is <a href=#expose-a-user-interface-to-the-user title="expose a user
  interface to the user">exposing a user interface</a>. In such an
  independent context, however, user agents may make full user
  interfaces visible, with, e.g., play, pause, seeking, and volume
  controls, even if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is absent.</p>

  <p>User agents may allow video playback to affect system features
  that could interfere with the user's experience; for example, user
  agents could disable screensavers while video playback is in
  progress.</p>

  <p class=warning>User agents should not provide a public API to
  cause videos to be shown full-screen. A script, combined with a
  carefully crafted video file, could trick the user into thinking a
  system-modal dialog had been shown, and prompt the user for a
  password. There is also the danger of "mere" annoyance, with pages
  launching full-screen videos when links are clicked or pages
  navigated. Instead, user-agent-specific interface features may be
  provided to easily allow the user to obtain a full-screen playback
  mode.</p>

  </div>

  <div class=example>

   <p>This example shows how to detect when a video has failed to play
   correctly:</p>

   <pre>&lt;script&gt;
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
&lt;/script&gt;
&lt;p&gt;&lt;video src="tgif.vid" autoplay controls onerror="failed(event)"&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="tgif.vid"&gt;Download the video file&lt;/a&gt;.&lt;/p&gt;</pre>

  </div>




  <!--CODECS

  <div class="impl">

  <h5>Video and audio codecs for <code>video</code> elements</h5>

  <p>User agents may support any video and audio codecs and container
  formats.</p>

  <p class="note">Certain user agents might support no codecs at all,
  e.g. text browsers running over SSH connections.</p>

  <!- - similar note in audio codecs section - ->
  <p class="note">Implementations are free to implement support for
  video codecs either natively, or using platform-specific APIs, or
  using plugins: this specification does not specify how codecs are to
  be implemented.</p>

  </div>

  (when replacing this text, also fix "- -" nested comments)-->





  <h4 id=audio><span class=secno>4.8.7 </span>The <dfn><code>audio</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#embedded-content>Embedded content</a>.</dd>
   <dd>If the element has a <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: 
<!--TT-->
zero or more <code><a href=#the-track-element>track</a></code> elements, then 
<!--TT-->
<a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then
<!--TT-->
 zero or more <code><a href=#the-track-element>track</a></code> elements, then
<!--TT-->
 <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-media-src><a href=#attr-media-src>src</a></code></dd>
   <dd><code title=attr-media-preload><a href=#attr-media-preload>preload</a></code></dd>
   <dd><code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code></dd>
   <dd><code title=attr-media-loop><a href=#attr-media-loop>loop</a></code></dd>
   <dd><code title=attr-media-controls><a href=#attr-media-controls>controls</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>[NamedConstructor=<a href=#dom-audio title=dom-Audio>Audio</a>(),
 NamedConstructor=<a href=#dom-audio-s title=dom-Audio-s>Audio</a>(in DOMString src)]
interface <dfn id=htmlaudioelement>HTMLAudioElement</dfn> : <a href=#htmlmediaelement>HTMLMediaElement</a> {};</pre>
   </dd>
  </dl><p>An <code><a href=#audio>audio</a></code> element <a href=#represents>represents</a> a sound or
  audio stream.</p>

  <!-- v2 (actually v3) suggestions:
    * Audio syntesis. Use cases from Charles Pritchard:
      > Use a sound of varying pitch to hint to a user the location of their
      > mouse (is it hovering over a button, is it x/y pixels away from the edge
      > of the screen, how close is it to the center).
      >
      > Alter the pitch of a sound to make a very cheap midi instrument.
      >
      > Pre-mix a few generated sounds, because the client processor is slow.
      >
      > Alter the pitch of an actual audio recording, and pre-mix it, to give
      > different sounding voices to pre-recorded readings of a single text. As
      > has been tried for "male" "female" sound fonts.
      >
      > Support very simple audio codecs, and programmable synthesizers.
  -->

  <p>Content may be provided inside the <code><a href=#audio>audio</a></code>
  element<span class=impl>. User agents should not show this content
  to the user</span>; it is intended for older Web browsers which do
  not support <code><a href=#audio>audio</a></code>, so that legacy audio plugins can be
  tried, or to show text to the users of these older browsers informing
  them of how to access the audio contents.</p>

  <p class=note>In particular, this content is not intended to
  address accessibility concerns. To make audio content accessible to
  the deaf or to those with other physical or cognitive disabilities,
  authors are expected to provide alternative media streams and/or to
  embed accessibility aids (such as transcriptions) into their media
  streams.</p>

  <p>The <code><a href=#audio>audio</a></code> element is a <a href=#media-element>media element</a>
  whose <a href=#media-data>media data</a> is ostensibly audio data.</p>

  <p>The <code title=attr-media-src><a href=#attr-media-src>src</a></code>, <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>, <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>, <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>, and <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attributes are <a href=#media-element-attributes title="media element attributes">the attributes common to all media
  elements</a>.</p>

  <div class=impl>

  <p>When an <code><a href=#audio>audio</a></code> element is <a href=#potentially-playing>potentially
  playing</a>, it must have its audio data played synchronized with
  the <a href=#current-playback-position>current playback position</a>, at the specified <a href=#dom-media-volume title=dom-media-volume>volume</a> with the specified <a href=#dom-media-muted title=dom-media-muted>mute state</a>.</p>

  <p>When an <code><a href=#audio>audio</a></code> element is not <a href=#potentially-playing>potentially
  playing</a>, audio must not play for the element.</p>

  </div>

  <dl class=domintro><dt><var title="">audio</var> = new <code title=dom-Audio><a href=#dom-audio>Audio</a></code>( [ <var title="">url</var> ] )</dt>

   <dd>

    <p>Returns a new <code><a href=#audio>audio</a></code> element, with the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute set to the value
    passed in the argument, if applicable.</p>

   </dd>

  </dl><div class=impl>

  <p>Two constructors are provided for creating
  <code><a href=#htmlaudioelement>HTMLAudioElement</a></code> objects (in addition to the factory
  methods from DOM Core such as <code title="">createElement()</code>): <dfn id=dom-audio title=dom-Audio><code>Audio()</code></dfn> and <dfn id=dom-audio-s title=dom-Audio-s><code>Audio(<var title="">src</var>)</code></dfn>. When invoked as constructors,
  these must return a new <code><a href=#htmlaudioelement>HTMLAudioElement</a></code> object (a new
  <code><a href=#audio>audio</a></code> element). The element must have its <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute set to the
  literal value "<code title=attr-media-preload-auto><a href=#attr-media-preload-auto>auto</a></code>". If the <var title="">src</var> argument is present, the object created must have
  its <code title=attr-media-src><a href=#attr-media-src>src</a></code> content attribute set to
  the provided value, and the user agent must invoke the object's
  <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
  algorithm</a> before returning. The element's document must be
  the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
  context</a> of the <code><a href=#window>Window</a></code> object on which the
  interface object of the invoked constructor is found.</p>

  </div>



  <!--CODECS

  <div class="impl">

  <h5>Audio codecs for <code>audio</code> elements</h5>

  <p>User agents may support any audio codecs and container
  formats.</p>

  <p>User agents must support the WAVE container format with audio
  encoded using the 16 bit PCM (LE) codec, at sampling frequencies of
  11.025kHz, 22.050kHz, and 44.100kHz, and for both mono and
  stereo. <a href="#- -refsWAVE">[WAVE]</a></p>

  <!- -
   <dt id="- -refsWAVE">WAVE</dt>
   <dd>http://en.wikipedia.org/wiki/WAV? </dd>
  - ->

  <!- - similar note in video codecs section - ->
  <p class="note">Implementations are free to implement support for
  audio codecs either natively, or using platform-specific APIs, or
  using plugins: this specification does not specify how codecs are to
  be implemented.</p>

  </div>

  (when replacing this text, also fix "- -" nested comments)-->



  <h4 id=the-source-element><span class=secno>4.8.8 </span>The <dfn><code>source</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a>
<!--TT-->
 or <code><a href=#the-track-element>track</a></code> elements.</dd>
<!--TT-->
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-source-src><a href=#attr-source-src>src</a></code></dd>
   <dd><code title=attr-source-type><a href=#attr-source-type>type</a></code></dd>
   <dd><code title=attr-source-media><a href=#attr-source-media>media</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlsourceelement>HTMLSourceElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-source-src title=dom-source-src>src</a>;
           attribute DOMString <a href=#dom-source-type title=dom-source-type>type</a>;
           attribute DOMString <a href=#dom-source-media title=dom-source-media>media</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-source-element>source</a></code> element allows authors to specify
  multiple alternative <a href=#media-resource title="media resource">media
  resources</a> for <a href=#media-element title="media element">media
  elements</a>. It does not <a href=#represents title=represents>represent</a> anything on its own.</p>

  <p>The <dfn id=attr-source-src title=attr-source-src><code>src</code></dfn> attribute
  gives the address of the <a href=#media-resource>media resource</a>. The value must
  be a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a>. This attribute must be present.</p>

  <p>The <dfn id=attr-source-type title=attr-source-type><code>type</code></dfn>
  attribute gives the type of the <a href=#media-resource>media resource</a>, to help
  the user agent determine if it can play this <a href=#media-resource>media
  resource</a> before fetching it. If specified, its value must be
  a <a href=#valid-mime-type>valid MIME type</a>. The <code title="">codecs</code>
  parameter may be specified and might be necessary to specify exactly
  how the resource is encoded. <a href=#refsRFC4281>[RFC4281]</a></p>

  <div class=example>

   <p>The following list shows some examples of how to use the <code title="">codecs=</code> MIME parameter in the <code title=attr-source-type><a href=#attr-source-type>type</a></code> attribute.</p>

   <dl><dt>H.264 Simple baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;</pre></dd>

    <dt>H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'&gt;</pre></dd>

    <dt>H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'&gt;</pre></dd>

    <dt>H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'&gt;</pre></dd>


    <dt>MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'&gt;</pre></dd>

    <dt>MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'&gt;</pre></dd>

    <dt>MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container</dt>
    <dd><pre>&lt;source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;</pre></dd>


    <dt>Theora video and Vorbis audio in Ogg container</dt>
    <dd><pre>&lt;source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'&gt;</pre></dd>

    <dt>Theora video and Speex audio in Ogg container</dt>
    <dd><pre>&lt;source src='video.ogv' type='video/ogg; codecs="theora, speex"'&gt;</pre></dd>

    <dt>Vorbis audio alone in Ogg container</dt>
    <dd><pre>&lt;source src='audio.ogg' type='audio/ogg; codecs=vorbis'&gt;</pre></dd>

    <dt>Speex audio alone in Ogg container</dt>
    <dd><pre>&lt;source src='audio.spx' type='audio/ogg; codecs=speex'&gt;</pre></dd>

    <dt>FLAC audio alone in Ogg container</dt>
    <dd><pre>&lt;source src='audio.oga' type='audio/ogg; codecs=flac'&gt;</pre></dd>

    <dt>Dirac video and Vorbis audio in Ogg container</dt>
    <dd><pre>&lt;source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'&gt;</pre></dd>

    <dt>Theora video and Vorbis audio in Matroska container</dt>
    <dd><pre>&lt;source src='video.mkv' type='video/x-matroska; codecs="theora, vorbis"'&gt;</pre></dd>

<!-- awaiting definition by the Ogg or BBC guys:
    <dt>Dirac video and Vorbis audio in Matroska container</dt>
    <dd><pre>&lt;source src='video.mkv' type='video/x-matroska; codecs='></pre></dd>
-->


<!-- awaiting definition by the Microsoft guys:

    <dt>WMV9 video and WMA 2 audio in ASF container</dt>
    <dd><pre>&lt;source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd>

    <dt>WMV8 video and WMA 2 audio in ASF container</dt>
    <dd><pre>&lt;source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd>

    <dt>VC-1 video and WMA 10 Pro audio in ASF container</dt>
    <dd><pre>&lt;source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd>

    <dt>XviD video and MP3 audio in AVI container</dt>
    <dd><pre>&lt;source src='video.avi' type='video/x-msvideo; codecs='></pre></dd>

    <dt>Motion-JPEG video and uncompressed PCM audio in AVI container</dt>
    <dd><pre>&lt;source src='video.avi' type='video/x-msvideo; codecs='></pre></dd>

-->


<!-- awaiting definition by Real:
    <dt>Real Video 10 video and High-Efficiency AAC audio in Real Media container</dt>
    <dd><pre>&lt;source src='video.rm' type='application/vnd.rn-realmedia; codecs='></pre></dd>
-->


<!--  undefined:
    <dt>MPEG-1 video and MPEG-1 Audio Layer II audio in MPEG-1 program stream</dt>
    <dd><pre>&lt;source src='video.mpg' type='video/mpeg; codecs='></pre></dd>
-->

   </dl></div>

  <p>The <dfn id=attr-source-media title=attr-source-media><code>media</code></dfn>
  attribute gives the intended media type of the <a href=#media-resource>media
  resource</a>, to help the user agent determine if this
  <a href=#media-resource>media resource</a> is useful to the user before fetching
  it. Its value must be a <a href=#valid-media-query>valid media query</a>.</p>

  <p id=source-default-media>The default, if the <code title=attr-srouce-media>media</code> attribute is omitted, is
  "<code title="">all</code>", meaning that by default the <a href=#media-resource>media
  resource</a> is suitable for all media.</p>

  <div class=impl>

  <p>If a <code><a href=#the-source-element>source</a></code> element is inserted as a child of a
  <a href=#media-element>media element</a> that has no <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute and whose <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> has the value
  <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, the user
  agent must invoke the <a href=#media-element>media element</a>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
  algorithm</a>.</p>

  <p>The IDL attributes <dfn id=dom-source-src title=dom-source-src><code>src</code></dfn>, <dfn id=dom-source-type title=dom-source-type><code>type</code></dfn>, and <dfn id=dom-source-media title=dom-source-media><code>media</code></dfn> must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  </div>

  <div class=example>

   <p>If the author isn't sure if the user agents will all be able to
   render the media resources provided, the author can listen to the
   <code title=event-error>error</code> event on the last
   <code><a href=#the-source-element>source</a></code> element and trigger fallback behavior:</p>

   <pre>&lt;script&gt;
 function fallback(video) {
   // replace &lt;video&gt; with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
&lt;/script&gt;
&lt;video controls autoplay&gt;
 &lt;source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
 &lt;source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)"&gt;
 ...
&lt;/video&gt;</pre>

  </div>



<!--TT-->

  <h4 id=the-track-element><span class=secno>4.8.9 </span>The <dfn><code>track</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a>.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-track-kind><a href=#attr-track-kind>kind</a></code></dd>
   <dd><code title=attr-track-label><a href=#attr-track-label>label</a></code></dd>
   <dd><code title=attr-track-src><a href=#attr-track-src>src</a></code></dd>
   <dd><code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmltrackelement>HTMLTrackElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-track-kind title=dom-track-kind>kind</a>;
           attribute DOMString <a href=#dom-track-label title=dom-track-label>label</a>;
           attribute DOMString <a href=#dom-track-src title=dom-track-src>src</a>;
           attribute DOMString <a href=#dom-track-srclang title=dom-track-srclang>srclang</a>;

  readonly attribute <a href=#timedtrack>TimedTrack</a> <a href=#dom-track-track title=dom-track-track>track</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-track-element>track</a></code> element allows authors to specify explicit
  external <a href=#timed-track title="timed track">timed tracks</a> for <a href=#media-element title="media element">media elements</a>. It does not <a href=#represents title=represents>represent</a> anything on its own.</p>

  <p>The <dfn id=attr-track-kind title=attr-track-kind><code>kind</code></dfn>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
  table lists the keywords defined for this attribute. The keyword
  given in the first cell of each row maps to the state given in the
  second cell.</p>

  <table><thead><tr><th>Keywords
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn id=attr-track-kind-keyword-subtitles title=attr-track-kind-keyword-subtitles><code>subtitles</code></dfn>
     <td><dfn id=attr-track-kind-subtitles title=attr-track-kind-subtitles>Subtitles</dfn>
     <td>Translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <a href=#media-resource>media resource</a>'s soundtrack).
    <tr><td><dfn id=attr-track-kind-keyword-captions title=attr-track-kind-keyword-captions><code>captions</code></dfn>
     <td><dfn id=attr-track-kind-captions title=attr-track-kind-captions>Captions</dfn>
     <td>Transcription of the dialogue, suitable for when the soundtrack is unavailable (e.g. because it is muted or because the user is deaf). 
    <tr><td><dfn id=attr-track-kind-keyword-descriptions title=attr-track-kind-keyword-descriptions><code>descriptions</code></dfn>
     <td><dfn id=attr-track-kind-descriptions title=attr-track-kind-descriptions>Descriptions</dfn>
     <td>Textual descriptions of the video component of the <a href=#media-resource>media resource</a>, intended for audio synthesis when the visual component is unavailable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
    <tr><td><dfn id=attr-track-kind-keyword-chapters title=attr-track-kind-keyword-chapters><code>chapters</code></dfn>
     <td><dfn id=attr-track-kind-chapters title=attr-track-kind-chapters>Chapters</dfn>
     <td>Chapter titles, intended to be used for navigating the <a href=#media-resource>media resource</a>.
    <tr><td><dfn id=attr-track-kind-keyword-metadata title=attr-track-kind-keyword-metadata><code>metadata</code></dfn>
     <td><dfn id=attr-track-kind-metadata title=attr-track-kind-metadata>Metadata</dfn>
     <td>Tracks intended for use from script.
  </table><p>The attribute may be omitted. The <i>missing value default</i> is
  the <a href=#attr-track-kind-captions title=attr-track-kind-captions>captions</a> state.</p>

  <p>The <dfn id=attr-track-src title=attr-track-src><code>src</code></dfn> attribute
  gives the address of the time track data. The value must be a
  <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a>. This attribute must be present.</p>

  <div class=impl>

  <p>If the element has a <code title=attr-track-src><a href=#attr-track-src>src</a></code>
  attribute whose value is not the empty string and whose value, when
  the attribute was set, could be successfully <a href=#resolve-a-url title="resolve a
  url">resolved</a> relative to the element, then the element's
  <dfn id=track-url>track URL</dfn> is the resulting <a href=#absolute-url>absolute
  URL</a>. Otherwise, the element's <a href=#track-url>track URL</a> is the
  empty string.</p>

  </div>

  <p>The <dfn id=attr-track-srclang title=attr-track-srclang><code>srclang</code></dfn>
  attribute gives the language of the time track data. The value must
  be a valid BCP 47 language tag. This attribute must be present if
  the element's <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attribute is
  in the <a href=#attr-track-kind-subtitles title=attr-track-kind-subtitles>subtitles</a>
  state. <a href=#refsBCP47>[BCP47]</a></p>

  <div class=impl>

  <p>If the element has a <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code> attribute whose value is
  not the empty string, then the element's <dfn id=track-language>track language</dfn>
  is the value of the attribute. Otherwise, the element has no
  <a href=#track-language>track language</a>.</p>

  </div>

  <p>The <dfn id=attr-track-label title=attr-track-label><code>label</code></dfn>
  attribute gives a user-readable title for the track.</p>

  <p>The value of the <code title=attr-track-label><a href=#attr-track-label>label</a></code>
  attribute, if the attribute is present, must not be the empty
  string. Furthermore, there must not be two <code><a href=#the-track-element>track</a></code>
  element children of the same <a href=#media-element>media element</a> whose <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attributes are in the same
  state, whose <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code>
  attributes are both missing or have values that represent the same
  language, and whose <code title=attr-track-label><a href=#attr-track-label>label</a></code>
  attributes are again both missing or both have the same value.</p>

  <div class=impl>

  <p>If the element has a <code title=attr-track-label><a href=#attr-track-label>label</a></code>
  attribute whose value is not the empty string, then the element's
  <dfn id=track-label>track label</dfn> is the value of the attribute. Otherwise, the
  element's <a href=#track-label>track label</a> is a user-agent defined string
  (e.g. the string "untitled" in the user's locale, or a value
  automatically generated from the other attributes).</p>

  </div>

  <dl class=domintro><dt><var title="">track</var> . <code title=dom-track-track><a href=#dom-track-track>track</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#timedtrack>TimedTrack</a></code> object corresponding to the <a href=#timed-track>timed track</a> of the <code><a href=#the-track-element>track</a></code> element.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-track-track title=dom-track-track><code>track</code></dfn> IDL
  attribute must, on getting, return the <code><a href=#the-track-element>track</a></code> element's
  <a href=#timed-track>timed track</a>'s corresponding <code><a href=#timedtrack>TimedTrack</a></code>
  object.</p>

  <p>The IDL attributes <dfn id=dom-track-kind title=dom-track-kind><code>kind</code></dfn>, <dfn id=dom-track-label title=dom-track-label><code>label</code></dfn>, <dfn id=dom-track-src title=dom-track-src><code>src</code></dfn>, and <dfn id=dom-track-srclang title=dom-track-srclang><code>srclang</code></dfn> must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  </div>

<!--TT-->


  <h4 id=media-elements><span class=secno>4.8.10 </span>Media elements</h4>

  <p><dfn id=media-element title="media element">Media elements</dfn> implement the
  following interface:</p>

  <pre class=idl>interface <dfn id=htmlmediaelement>HTMLMediaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {

  // error state
  readonly attribute <a href=#mediaerror>MediaError</a> <a href=#dom-media-error title=dom-media-error>error</a>;

  // network state
           attribute DOMString <a href=#dom-media-src title=dom-media-src>src</a>;
  readonly attribute DOMString <a href=#dom-media-currentsrc title=dom-media-currentSrc>currentSrc</a>;
  const unsigned short <a href=#dom-media-network_empty title=dom-media-NETWORK_EMPTY>NETWORK_EMPTY</a> = 0;
  const unsigned short <a href=#dom-media-network_idle title=dom-media-NETWORK_IDLE>NETWORK_IDLE</a> = 1;
  const unsigned short <a href=#dom-media-network_loading title=dom-media-NETWORK_LOADING>NETWORK_LOADING</a> = 2;
  const unsigned short <a href=#dom-media-network_no_source title=dom-media-NETWORK_NO_SOURCE>NETWORK_NO_SOURCE</a> = 3;
  readonly attribute unsigned short <a href=#dom-media-networkstate title=dom-media-networkState>networkState</a>;
           attribute DOMString <a href=#dom-media-preload title=dom-media-preload>preload</a>;
<!--v3BUF  readonly attribute float <span title="dom-media-bufferingRate">bufferingRate</span>;
  readonly attribute boolean <span title="dom-media-bufferingThrottled">bufferingThrottled</span>;
-->  readonly attribute <a href=#timeranges>TimeRanges</a> <a href=#dom-media-buffered title=dom-media-buffered>buffered</a>;
  void <a href=#dom-media-load title=dom-media-load>load</a>();
  DOMString <a href=#dom-navigator-canplaytype title=dom-navigator-canPlayType>canPlayType</a>(in DOMString type);

  // ready state
  const unsigned short <a href=#dom-media-have_nothing title=dom-media-HAVE_NOTHING>HAVE_NOTHING</a> = 0;
  const unsigned short <a href=#dom-media-have_metadata title=dom-media-HAVE_METADATA>HAVE_METADATA</a> = 1;
  const unsigned short <a href=#dom-media-have_current_data title=dom-media-HAVE_CURRENT_DATA>HAVE_CURRENT_DATA</a> = 2;
  const unsigned short <a href=#dom-media-have_future_data title=dom-media-HAVE_FUTURE_DATA>HAVE_FUTURE_DATA</a> = 3;
  const unsigned short <a href=#dom-media-have_enough_data title=dom-media-HAVE_ENOUGH_DATA>HAVE_ENOUGH_DATA</a> = 4;
  readonly attribute unsigned short <a href=#dom-media-readystate title=dom-media-readyState>readyState</a>;
  readonly attribute boolean <a href=#dom-media-seeking title=dom-media-seeking>seeking</a>;

  // playback state
           attribute float <a href=#dom-media-currenttime title=dom-media-currentTime>currentTime</a>;
  readonly attribute float <a href=#dom-media-starttime title=dom-media-startTime>startTime</a>;
  readonly attribute float <a href=#dom-media-duration title=dom-media-duration>duration</a>;
  readonly attribute boolean <a href=#dom-media-paused title=dom-media-paused>paused</a>;
           attribute float <a href=#dom-media-defaultplaybackrate title=dom-media-defaultPlaybackRate>defaultPlaybackRate</a>;
           attribute float <a href=#dom-media-playbackrate title=dom-media-playbackRate>playbackRate</a>;
  readonly attribute <a href=#timeranges>TimeRanges</a> <a href=#dom-media-played title=dom-media-played>played</a>;
  readonly attribute <a href=#timeranges>TimeRanges</a> <a href=#dom-media-seekable title=dom-media-seekable>seekable</a>;
  readonly attribute boolean <a href=#dom-media-ended title=dom-media-ended>ended</a>;
           attribute boolean <a href=#dom-media-autoplay title=dom-media-autoplay>autoplay</a>;
           attribute boolean <a href=#dom-media-loop title=dom-media-loop>loop</a>;
  void <a href=#dom-media-play title=dom-media-play>play</a>();
  void <a href=#dom-media-pause title=dom-media-pause>pause</a>();

  // controls
           attribute boolean <a href=#dom-media-controls title=dom-media-controls>controls</a>;
           attribute float <a href=#dom-media-volume title=dom-media-volume>volume</a>;
           attribute boolean <a href=#dom-media-muted title=dom-media-muted>muted</a>;
<!--TT-->
  // timed tracks
  readonly attribute <a href=#timedtrack>TimedTrack</a>[] <span title=dom-media-tracks>tracks</span>;
  <a href=#mutabletimedtrack>MutableTimedTrack</a> <span title=dom-media-addTrack>addTrack</span>(in DOMString label, in DOMString kind, in DOMString language);
<!--TT-->
};</pre>

  <p>The <dfn id=media-element-attributes>media element attributes</dfn>, <code title=attr-media-src><a href=#attr-media-src>src</a></code>, <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>, <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>, <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>, and <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code>, apply to all <a href=#media-element title="media element">media elements</a>. They are defined in
  this section.</p>

  <!-- proposed v2 (actually v3!) features:
    * frame forward / backwards / step(n) while paused
    * hasAudio, hasVideo, hasCaptions, etc
    * per-frame control: get current frame; set current frame
    * queue of content
      - pause current stream and insert content at front of queue to play immediately
      - pre-download another stream
      - add stream(s) to play at end of current stream
      - pause playback upon reaching a certain time
      - playlists, with the ability to get metadata out of them (e.g. xspf)
    * general meta data, implemented as getters (don't expose the whole thing)
      - getMetadata(key: string, language: string) => HTMLImageElement or string
      - onmetadatachanged (no context info)
      - general custom metadata store (ratings, etc.)
    * video: applying CSS filters
    * an event to notify people of when the video size changes
      (e.g. for chained Ogg streams of multiple independent videos)
    * balance and 3D position audio
    * audio filters
    * audio synthesis (see <audio> section for use cases)
    * feedback to the script on how well the video is playing
       - frames per second?
       - skipped frames per second?
       - an event that reports playback difficulties?
       - an arbitrary quality metric?
    * bufferingRate/bufferingThrottled (see v3BUF)
    * events for when the user agent's controls get shown or hidden
      so that the author's controls can get away of the UA's
  -->

  <!-- v2 features that already have experimental implementations:
    * webkitPreservesPitch (for when playbackRate != 1.0)
  -->

  <p><a href=#media-element title="media element">Media elements</a> are used to
  present audio data, or video and audio data, to the user. This is
  referred to as <dfn id=media-data>media data</dfn> in this section, since this
  section applies equally to <a href=#media-element title="media element">media
  elements</a> for audio or for video. The term <dfn id=media-resource>media
  resource</dfn> is used to refer to the complete set of media data,
  e.g. the complete video file, or complete audio file.</p>

  <div class=impl>

  <p>Except where otherwise specified, the <a href=#task-source>task source</a>
  for all the tasks <a href=#queue-a-task title="queue a task">queued</a> in this
  section and its subsections is the <dfn id=media-element-event-task-source>media element event task
  source</dfn>.</p>

  </div>



  <h5 id=error-codes><span class=secno>4.8.10.1 </span>Error codes</h5>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>

   <dd>

    <p>Returns a <code><a href=#mediaerror>MediaError</a></code> object representing the
    current error state of the element.</p>

    <p>Returns null if there is no error.</p>

   </dd>

  </dl><div class=impl>

  <p>All <a href=#media-element title="media element">media elements</a> have an
  associated error status, which records the last error the element
  encountered since its <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
  algorithm</a> was last invoked. The <dfn id=dom-media-error title=dom-media-error><code>error</code></dfn> attribute, on
  getting, must return the <code><a href=#mediaerror>MediaError</a></code> object created for
  this last error, or null if there has not been an error.</p>

  </div>

  <pre class=idl>interface <dfn id=mediaerror>MediaError</dfn> {
  const unsigned short <a href=#dom-mediaerror-media_err_aborted title=dom-MediaError-MEDIA_ERR_ABORTED>MEDIA_ERR_ABORTED</a> = 1;
  const unsigned short <a href=#dom-mediaerror-media_err_network title=dom-MediaError-MEDIA_ERR_NETWORK>MEDIA_ERR_NETWORK</a> = 2;
  const unsigned short <a href=#dom-mediaerror-media_err_decode title=dom-MediaError-MEDIA_ERR_DECODE>MEDIA_ERR_DECODE</a> = 3;
  const unsigned short <a href=#dom-mediaerror-media_err_src_not_supported title=dom-MediaError-MEDIA_ERR_SRC_NOT_SUPPORTED>MEDIA_ERR_SRC_NOT_SUPPORTED</a> = 4;
  readonly attribute unsigned short <a href=#dom-mediaerror-code title=dom-MediaError-code>code</a>;
};</pre>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code> . <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code></dt>

   <dd>

    <p>Returns the current error's error code, from the list below.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-mediaerror-code title=dom-MediaError-code><code>code</code></dfn>
  attribute of a <code><a href=#mediaerror>MediaError</a></code> object must return the code
  for the error, which must be one of the following:</p>

  </div>

  <dl><dt><dfn id=dom-mediaerror-media_err_aborted title=dom-MediaError-MEDIA_ERR_ABORTED><code>MEDIA_ERR_ABORTED</code></dfn> (numeric value 1)</dt>

   <dd>The fetching process for the <a href=#media-resource>media resource</a> was
   aborted by the user agent at the user's request.</dd>

   <dt><dfn id=dom-mediaerror-media_err_network title=dom-MediaError-MEDIA_ERR_NETWORK><code>MEDIA_ERR_NETWORK</code></dfn> (numeric value 2)</dt>

   <dd>A network error of some description caused the user agent to
   stop fetching the <a href=#media-resource>media resource</a>, after the resource
   was established to be usable.</dd>

   <dt><dfn id=dom-mediaerror-media_err_decode title=dom-MediaError-MEDIA_ERR_DECODE><code>MEDIA_ERR_DECODE</code></dfn> (numeric value 3)</dt>

   <dd>An error of some description occurred while decoding the
   <a href=#media-resource>media resource</a>, after the resource was established to
   be usable.</dd>

   <dt><dfn id=dom-mediaerror-media_err_src_not_supported title=dom-MediaError-MEDIA_ERR_SRC_NOT_SUPPORTED><code>MEDIA_ERR_SRC_NOT_SUPPORTED</code></dfn> (numeric value 4)</dt>

   <dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was not suitable.</dd>

  </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</h5>

  <p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content
  attribute on <a href=#media-element title="media element">media elements</a> gives
  the address of the media resource (video, audio) to show. The
  attribute, if present, must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty
  URL potentially surrounded by spaces</a>.</p>

  <div class=impl>

  <p>If a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute of a
  <a href=#media-element>media element</a> is set or changed, the user agent must
  invoke the <a href=#media-element>media element</a>'s <a href=#media-element-load-algorithm>media element load
  algorithm</a>. (<em>Removing</em> the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute does not do this, even
  if there are <code><a href=#the-source-element>source</a></code> elements present.)</p>

  <p>The <dfn id=dom-media-src title=dom-media-src><code>src</code></dfn> IDL
  attribute on <a href=#media-element title="media element">media elements</a> must
  <a href=#reflect>reflect</a> the content attribute of the same name.</p>

  </div>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code></dt>

   <dd>

    <p>Returns the address of the current <a href=#media-resource>media resource</a>.</p>

    <p>Returns the empty string when there is no <a href=#media-resource>media resource</a>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-media-currentsrc title=dom-media-currentSrc><code>currentSrc</code></dfn> IDL
  attribute is initially the empty string. Its value is changed by the
  <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
  algorithm</a> defined below.</p>

  </div>

  <p class=note>There are two ways to specify a <a href=#media-resource>media
  resource</a>, the <code title=attr-media-src><a href=#attr-media-src>src</a></code>
  attribute, or <code><a href=#the-source-element>source</a></code> elements. The attribute overrides
  the elements.</p>



  <h5 id=mime-types><span class=secno>4.8.10.3 </span>MIME types</h5>

  <p>A <a href=#media-resource>media resource</a> can be described in terms of its
  <em>type</em>, specifically a <a href=#mime-type>MIME type</a>, optionally
  with a <code title="">codecs</code> parameter. <a href=#refsRFC4281>[RFC4281]</a></p>

  <p>Types are usually somewhat incomplete descriptions; for example
  "<code title="">video/mpeg</code>" doesn't say anything except what
  the container type is, and even a type like "<code title="">video/mp4; codecs="avc1.42E01E,
  mp4a.40.2"</code>" doesn't include information like the actual
  bitrate (only the maximum bitrate). Thus, given a type, a user agent
  can often only know whether it <em>might</em> be able to play
  media of that type (with varying levels of confidence), or whether
  it definitely <em>cannot</em> play media of that type.</p>

  <p><dfn id=a-type-that-the-user-agent-knows-it-cannot-render>A type that the user agent knows it cannot render</dfn> is
  one that describes a resource that the user agent definitely does
  not support, for example because it doesn't recognize the container
  type, or it doesn't support the listed codecs.</p>

  <p>The <a href=#mime-type>MIME type</a> "<code title="">application/octet-stream</code>" with no parameters is
  never <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot
  render</a>. User agents must treat that type as equivalent to the
  lack of any explicit <a href=#content-type title=Content-Type>Content-Type
  metadata</a> when it is used to label a potential <a href=#media-resource>media
  resource</a>.</p>

  <p class=note>In the absence of a <!-- pretty crazy -->
  specification to the contrary, the <a href=#mime-type>MIME type</a> "<code title="">application/octet-stream</code>" when used <em>with</em>
  parameters, e.g. "<code title="">application/octet-stream;codecs=theora</code>", <em>is</em>
  <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot render</a>.</p>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-navigator-canPlayType><a href=#dom-navigator-canplaytype>canPlayType</a></code>(<var title="">type</var>)</dt>

   <dd>

    <p>Returns the empty string (a negative response), "maybe", or
    "probably" based on how confident the user agent is that it can
    play media resources of the given type.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-navigator-canplaytype title=dom-navigator-canPlayType><code>canPlayType(<var title="">type</var>)</code></dfn> method must return the empty
  string if <var title="">type</var> is <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user
  agent knows it cannot render</a>; it must return "<code title="">probably</code>" if the user agent is confident that the
  type represents a <a href=#media-resource>media resource</a> that it can render if
  used in with this <code><a href=#audio>audio</a></code> or <code><a href=#video>video</a></code> element;
  and it must return "<code title="">maybe</code>"
  otherwise. Implementors are encouraged to return "<code title="">maybe</code>" unless the type can be confidently
  established as being supported or not. Generally, a user agent
  should never return "<code title="">probably</code>" if the type
  doesn't have a <code title="">codecs</code> parameter.</p>

  </div>

  <div class=example>

   <p>This script tests to see if the user agent supports a
   (fictional) new format to dynamically decide whether to use a
   <code><a href=#video>video</a></code> element or a plugin:</p>

   <pre>&lt;section id="video"&gt;
 &lt;p&gt;&lt;a href="playing-cats.nfv"&gt;Download video&lt;/a&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;script&gt;
 var videoSection = document.getElementById('video');
 var videoElement = document.createElement('video');
 var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
 if (support != "probably" &amp;&amp; "New Fictional Video Plug-in" in navigator.plugins) {
   // not confident of browser support
   // but we have a plugin
   // so use plugin instead
   videoElement = document.createElement("embed");
 } else if (support == "") {
   // no support from browser and no plugin
   // do nothing
   videoElement = null;
 }
 if (videoElement) {
   while (videoSection.hasChildNodes())
     videoSection.removeChild(videoSection.firstChild);
   videoElement.setAttribute("src", "playing-cats.nfv");
   videoSection.appendChild(videoElement);
 }
&lt;/script&gt;</pre>

  </div>

  <p class=note>The <code title=attr-source-type><a href=#attr-source-type>type</a></code>
  attribute of the <code><a href=#the-source-element>source</a></code> element allows the user agent
  to avoid downloading resources that use formats it cannot
  render.</p>


  <h5 id=network-states><span class=secno>4.8.10.4 </span>Network states</h5>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>

   <dd>

    <p>Returns the current state of network activity for the element,
    from the codes in the list below.</p>

   </dd>

  </dl><div class=impl>

  <p>As <a href=#media-element title="media element">media elements</a> interact
  with the network, their current network activity is represented by
  the <dfn id=dom-media-networkstate title=dom-media-networkState><code>networkState</code></dfn>
  attribute. On getting, it must return the current network state of
  the element, which must be one of the following values:</p>

  </div>

  <dl><dt><dfn id=dom-media-network_empty title=dom-media-NETWORK_EMPTY><code>NETWORK_EMPTY</code></dfn> (numeric value 0)</dt>

   <dd>The element has not yet been initialized. All attributes are in
   their initial states.</dd>

   <dt><dfn id=dom-media-network_idle title=dom-media-NETWORK_IDLE><code>NETWORK_IDLE</code></dfn> (numeric value 1)</dt>

   <dd>The element<span class=impl>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   algorithm</a> is active and</span> has selected a <a href=#media-resource title="media resource">resource</a>, but it is not actually
   using the network at this time.</dd>

   <dt><dfn id=dom-media-network_loading title=dom-media-NETWORK_LOADING><code>NETWORK_LOADING</code></dfn> (numeric value 2)</dt>

   <dd>The user agent is actively trying to download data.</dd>

   <dt><dfn id=dom-media-network_no_source title=dom-media-NETWORK_NO_SOURCE><code>NETWORK_NO_SOURCE</code></dfn> (numeric value 3)</dt>

   <dd>The element<span class=impl>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   algorithm</a> is active, but it</span> has failed to find a
   <a href=#media-resource title="media resource">resource</a> to use.</dd>

  </dl><div class=impl>

  <p>The <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
  algorithm</a> defined below describes exactly when the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute changes
  value and what events fire to indicate changes in this state.</p>

  </div>




  <h5 id=loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</h5>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>

   <dd>

    <p>Causes the element to reset and start selecting and loading a
    new <a href=#media-resource>media resource</a> from scratch.</p>

   </dd>

  </dl><div class=impl>

  <p>All <a href=#media-element title="media element">media elements</a> have an
  <dfn id=autoplaying-flag>autoplaying flag</dfn>, which must begin in the true state, and
  a <dfn id=delaying-the-load-event-flag>delaying-the-load-event flag</dfn>, which must begin in the
  false state. While the <a href=#delaying-the-load-event-flag>delaying-the-load-event flag</a> is
  true, the element must <a href=#delay-the-load-event>delay the load event</a> of its
  document.</p>

  <p>When the <dfn id=dom-media-load title=dom-media-load><code>load()</code></dfn>
  method on a <a href=#media-element>media element</a> is invoked, the user agent
  must run the <a href=#media-element-load-algorithm>media element load algorithm</a>.</p>

  <p>The <dfn id=media-element-load-algorithm>media element load algorithm</dfn> consists of the
  following steps.</p>

  <ol><li><p>Abort any already-running instance of the <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   algorithm</a> for this element.</li>

   <li>

    <p>If there are any <a href=#concept-task title=concept-task>tasks</a> from
    the <a href=#media-element>media element</a>'s <a href=#media-element-event-task-source>media element event task
    source</a> in one of the <a href=#task-queue title="task queue">task
    queues</a>, then remove those tasks.</p>

    <p class=note>Basically, pending events and callbacks for the
    media element are discarded when the media element starts loading
    a new resource.</p>

   </li>

   <li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is set to <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code> or <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, <a href=#queue-a-task>queue a
   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-abort><a href=#event-media-abort>abort</a></code> at the <a href=#media-element>media
   element</a>.</li>

   <li>

    <p>If the <a href=#media-element>media element</a>'s <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is not set to
    <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, then
    run these substeps:</p>

    <ol><li><p>If a fetching process is in progress for the <a href=#media-element>media
     element</a>, the user agent should stop it.</li>

     <li><p>Set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
     <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>.</li>

<!--TT-->
     <li><p><a href="#forget-the-media-element's-media-resource-specific-timed-tracks">Forget the media element's media-resource-specific
     timed tracks</a>.</li>
<!--TT-->

     <li><p>If <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is
     not set to <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, then set it
     to that state.</li>

     <li><p>If the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code>
     attribute is false, then set to true.</li>

     <li><p>If <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> is true,
     set it to false.</li>

     <li><p>Set the <a href=#current-playback-position>current playback position</a> to
     0.</li>

     <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
     event</a> named <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code> at the <a href=#media-element>media
     element</a>.</li>

    </ol></li>

   <li><p>Set the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> attribute to the
   value of the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code>
   attribute.</li>

   <li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code> attribute
   to null and the <a href=#autoplaying-flag>autoplaying flag</a> to true.</li>

   <li><p>Invoke the <a href=#media-element>media element</a>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   algorithm</a>.</li>

   <li>

    <p class=note>Playback of any previously playing <a href=#media-resource>media
    resource</a> for this element stops.</p>

   </li>

  </ol><p>The <dfn id=concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
  algorithm</dfn> for a <a href=#media-element>media element</a> is as follows. This
  algorithm is always invoked synchronously, but one of the first
  steps in the algorithm is to return and continue running the
  remaining steps asynchronously, meaning that it runs in the
  background with scripts and other <a href=#concept-task title=concept-task>tasks</a> running in parallel. In addition,
  this algorithm interacts closely with the <a href=#event-loop>event loop</a>
  mechanism; in particular, it has <a href=#synchronous-section title="synchronous
  section">synchronous sections</a> (which are triggered as part of
  the <a href=#event-loop>event loop</a> algorithm). Steps in such sections are
  marked with &#8987;.</p>

  <ol><!-- precondition: networkState == NETWORK_EMPTY at this point --><li><p>Set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to <code title=dom-media-NETWORK_NO_SOURCE><a href=#dom-media-network_no_source>NETWORK_NO_SOURCE</a></code>.</li>

   <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing
   the <a href=#concept-task title=concept-task>task</a> that invoked this
   algorithm to continue. The <a href=#synchronous-section>synchronous section</a>
   consists of all the remaining steps of this algorithm until the
   algorithm says the <a href=#synchronous-section>synchronous section</a> has
   ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous
   sections</a> are marked with &#8987;.)</li>

   <li>

    <p>&#8987; If the <a href=#media-element>media element</a> has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute, then let <var title="">mode</var> be <i title="">attribute</i>.</p>

    <p>&#8987; Otherwise, if the <a href=#media-element>media element</a> does not
    have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute but has a
    <code><a href=#the-source-element>source</a></code> element child, then let <var title="">mode</var> be <i title="">children</i> and let <var title="">candidate</var> be the first such <code><a href=#the-source-element>source</a></code>
    element child in <a href=#tree-order>tree order</a>.</p>

    <p>&#8987; Otherwise the <a href=#media-element>media element</a> has neither a
    <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute nor a
    <code><a href=#the-source-element>source</a></code> element child: set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, and abort
    these steps; the <a href=#synchronous-section>synchronous section</a> ends.</p>

   </li>

   <li><p>&#8987; Set the <a href=#media-element>media element</a>'s
   <a href=#delaying-the-load-event-flag>delaying-the-load-event flag</a> to true (this <a href=#delay-the-load-event title="delay the load event">delays the load event</a>), and set
   its <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to
   <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.</li>

   <li><p>&#8987; <a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   event</a> named <code title=event-media-loadstart><a href=#event-media-loadstart>loadstart</a></code> at the <a href=#media-element>media
   element</a>.</li>

   <li>

    <p>If <var title="">mode</var> is <i title="">attribute</i>, then
    run these substeps:</p>

    <ol><li><p>&#8987; <i>Process candidate</i>: If the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute's value is the empty
     string, then end the <a href=#synchronous-section>synchronous section</a>, and jump
     down to the <i title="">failed</i> step below.</li>

     <li><p>&#8987; Let <var title="">absolute URL</var> be the
     <a href=#absolute-url>absolute URL</a> that would have resulted from <a href=#resolve-a-url title="resolve a url">resolving</a> the <a href=#url>URL</a>
     specified by the <code title=attr-media-src><a href=#attr-media-src>src</a></code>
     attribute's value relative to the <a href=#media-element>media element</a> when
     the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was last
     changed.</p> <!-- i.e. changing xml:base or <base> after src=""
     has no effect -->

     <li><p>&#8987; If <var title="">absolute URL</var> was obtained
     successfully, set the <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code> attribute to <var title="">absolute URL</var>.</li>

     <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the
     remaining steps asynchronously.</li>

     <li><p>If <var title="">absolute URL</var> was obtained
     successfully, run the <a href=#concept-media-load-resource title=concept-media-load-resource>resource fetch
     algorithm</a> with <var title="">absolute URL</var>. If that
     algorithm returns without aborting <em>this</em> one, then the
     load failed.</li>

     <li>

      <p><i>Failed</i>: Reaching this step indicates that the media
      resource failed to load or that the given <a href=#url>URL</a> could
      not be <a href=#resolve-a-url title="resolve a url">resolved</a>. In one
      atomic operation, run the following steps:</p>

      <ol><li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code>
       attribute to a new <code><a href=#mediaerror>MediaError</a></code> object whose <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code> attribute is set to
       <code title=dom-MediaError-MEDIA_ERR_SRC_NOT_SUPPORTED><a href=#dom-mediaerror-media_err_src_not_supported>MEDIA_ERR_SRC_NOT_SUPPORTED</a></code>.</li>

<!--TT-->
       <li><p><a href="#forget-the-media-element's-media-resource-specific-timed-tracks">Forget the media element's media-resource-specific
       timed tracks</a>.</li>
<!--TT-->

       <li><p>Set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
       the <a href=#dom-media-network_no_source title=dom-media-NETWORK_NO_SOURCE>NETWORK_NO_SOURCE</a>
       value.</li>

      </ol></li>

     <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
     event</a> named <code title=event-media-error><a href=#event-media-error>error</a></code>
     at the <a href=#media-element>media element</a>.</li>

     <li><p>Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event flag</a>
     to false. This stops <a href=#delay-the-load-event title="delay the load event">delaying
     the load event</a>.</li>

     <li><p>Abort these steps. Until the <code title=dom-media-load><a href=#dom-media-load>load()</a></code> method is invoked or the
     <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute is changed, the
     element won't attempt to load another resource.</li>
     <!-- it took its ball and went home, sulking. -->

    </ol><p>Otherwise, the <code><a href=#the-source-element>source</a></code> elements will be used; run
    these substeps:</p>

    <ol><li>

      <p>&#8987; Let <var title="">pointer</var> be a position
      defined by two adjacent nodes in the <a href=#media-element>media
      element</a>'s child list, treating the start of the list
      (before the first child in the list, if any) and end of the list
      (after the last child in the list, if any) as nodes in their own
      right. One node is the node before <var title="">pointer</var>,
      and the other node is the node after <var title="">pointer</var>. Initially, let <var title="">pointer</var> be the position between the <var title="">candidate</var> node and the next node, if there are
      any, or the end of the list, if it is the last node.</p>

      <p>As nodes are inserted and removed into the <a href=#media-element>media
      element</a>, <var title="">pointer</var> must be updated as
      follows:</p>

      <dl><dt>If a new node is inserted between the two nodes that
       define <var title="">pointer</var></dt>

       <dd>Let <var title="">pointer</var> be the point between the
       node before <var title="">pointer</var> and the new node. In
       other words, insertions at <var title="">pointer</var> go after
       <var title="">pointer</var>.</dd>

       <dt>If the node before <var title="">pointer</var> is removed</dt>

       <dd>Let <var title="">pointer</var> be the point between the
       node after <var title="">pointer</var> and the node before the
       node after <var title="">pointer</var>. In other words, <var title="">pointer</var> doesn't move relative to the remaining
       nodes.</dd>

       <dt>If the node after <var title="">pointer</var> is removed</dt>

       <dd>Let <var title="">pointer</var> be the point between the
       node before <var title="">pointer</var> and the node after the
       node before <var title="">pointer</var>. Just as with the
       previous case, <var title="">pointer</var> doesn't move
       relative to the remaining nodes.</dd>

      </dl><p>Other changes don't affect <var title="">pointer</var>.</p>

     </li>

     <li><p>&#8987; <i>Process candidate</i>: If <var title="">candidate</var> does not have a <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute, or if its <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute's value is the empty
     string, then end the <a href=#synchronous-section>synchronous section</a>, and jump
     down to the <i title="">failed</i> step below.</li>

     <li><p>&#8987; Let <var title="">absolute URL</var> be the
     <a href=#absolute-url>absolute URL</a> that would have resulted from <a href=#resolve-a-url title="resolve a url">resolving</a> the <a href=#url>URL</a>
     specified by <var title="">candidate</var>'s <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute's value relative to
     the <var title="">candidate</var> when the <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute was last
     changed.</p> <!-- i.e. changing xml:base or <base> after src=""
     has no effect -->

     <li><p>&#8987; If <var title="">absolute URL</var> was not
     obtained successfully, then end the <a href=#synchronous-section>synchronous
     section</a>, and jump down to the <i title="">failed</i> step
     below.</li>

     <li><p>&#8987; If <var title="">candidate</var> has a <code title=attr-source-type><a href=#attr-source-type>type</a></code> attribute whose value, when
     parsed as a <a href=#mime-type>MIME type</a> (including any codecs
     described by the <code title="">codecs</code> parameter),
     represents <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot
     render</a>, then end the <a href=#synchronous-section>synchronous section</a>, and
     jump down to the <i title="">failed</i> step below.</li>

     <li><p>&#8987; If <var title="">candidate</var> has a <code title=attr-source-media><a href=#attr-source-media>media</a></code> attribute whose value does
     not <a href=#matches-the-environment title="matches the environment">match the
     environment</a>, then end the <a href=#synchronous-section>synchronous
     section</a>, and jump down to the <i title="">failed</i> step
     below.</li>

     <li><p>&#8987; Set the <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code> attribute to <var title="">absolute URL</var>.</li>

     <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the
     remaining steps asynchronously.</li>

     <li><p>Run the <a href=#concept-media-load-resource title=concept-media-load-resource>resource
     fetch algorithm</a> with <var title="">absolute URL</var>. If
     that algorithm returns without aborting <em>this</em> one, then
     the load failed.</li>

     <li><p><i title="">Failed</i>: <a href=#queue-a-task>Queue a task</a> to
     <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <var title="">candidate</var> element, in the context of the <a href=#fetch title=fetch>fetching process</a> that was used to try to
     obtain <var title="">candidate</var>'s corresponding <a href=#media-resource>media
     resource</a> in the <a href=#concept-media-load-resource title=concept-media-load-resource>resource fetch
     algorithm</a>.</li>

     <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>. The
     <a href=#synchronous-section>synchronous section</a> consists of all the remaining
     steps of this algorithm until the algorithm says the
     <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous sections</a> are
     marked with &#8987;.)</li>

<!--TT-->
     <li><p>&#8987; <a href="#forget-the-media-element's-media-resource-specific-timed-tracks">Forget the media element's
     media-resource-specific timed tracks</a>.</li>
<!--TT-->

     <li><p>&#8987; <i title="">Find next candidate</i>: Let <var title="">candidate</var> be null.</li>

     <li><p>&#8987; <i title="">Search loop</i>: If the node after
     <var title="">pointer</var> is the end of the list, then jump to
     the <i title="">waiting</i> step below.</li>

     <li><p>&#8987; If the node after <var title="">pointer</var> is
     a <code><a href=#the-source-element>source</a></code> element, let <var title="">candidate</var>
     be that element.</li>

     <li><p>&#8987; Advance <var title="">pointer</var> so that the
     node before <var title="">pointer</var> is now the node that was
     after <var title="">pointer</var>, and the node after <var title="">pointer</var> is the node after the node that used to be
     after <var title="">pointer</var>, if any.</li>

     <li><p>&#8987; If <var title="">candidate</var> is null, jump
     back to the <i title="">search loop</i> step. Otherwise, jump
     back to the <i title="">process candidate</i> step.</li>

     <li><p>&#8987; <i title="">Waiting</i>: Set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
     the <a href=#dom-media-network_no_source title=dom-media-NETWORK_NO_SOURCE>NETWORK_NO_SOURCE</a>
     value.</li>

     <li><p>&#8987; Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
     flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
     event">delaying the load event</a>.</li>

     <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the
     remaining steps asynchronously.</li>

     <li><p>Wait until the node after <var title="">pointer</var> is a
     node other than the end of the list. (This step might wait
     forever.)</li>

     <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>. The
     <a href=#synchronous-section>synchronous section</a> consists of all the remaining
     steps of this algorithm until the algorithm says the
     <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous sections</a> are
     marked with &#8987;.)</li>

     <li><p>&#8987; Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
     flag</a> back to true (this <a href=#delay-the-load-event title="delay the load
     event">delays the load event</a> again, in case it hasn't been
     fired yet).</p>

     <li><p>&#8987; Set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> back to <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.</li>

     <li><p>&#8987; Jump back to the <i title="">find next
     candidate</i> step above.</li>

    </ol></li>

  </ol><p>The <dfn id=concept-media-load-resource title=concept-media-load-resource>resource fetch
  algorithm</dfn> for a <a href=#media-element>media element</a> and a given
  <a href=#absolute-url>absolute URL</a> is as follows:</p>

  <ol><li><p>Let the <var title="">current media resource</var> be the
   resource given by the <a href=#absolute-url>absolute URL</a> passed to this
   algorithm. This is now the element's <a href=#media-resource>media
   resource</a>.</li>

   <li>

    <p>Begin to <a href=#fetch>fetch</a> the <var title="">current media
    resource</var>, from the <a href=#media-element>media element</a>'s
    <code><a href=#document>Document</a></code>'s <a href=#origin>origin</a>.</p> <!-- not
    http-origin privacy sensitive (looking forward to CORS here) -->

    <p>Every 350ms (&plusmn;200ms) or for every byte received, whichever
    is <em>least</em> frequent, <a href=#queue-a-task>queue a task</a> to
    <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-progress><a href=#event-media-progress>progress</a></code> at the element.</p>

    <p>If at any point the user agent has received no data for more
    than about three seconds, then <a href=#queue-a-task>queue a task</a> to
    <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-stalled><a href=#event-media-stalled>stalled</a></code> at the element.</p>

    <p>User agents may allow users to selectively block or slow
    <a href=#media-data>media data</a> downloads. When a <a href=#media-element>media
    element</a>'s download has been blocked altogether, the user
    agent must act as if it was stalled (as opposed to acting as if
    the connection was closed). The rate of the download may also be
    throttled automatically by the user agent, e.g. to balance the
    download with other connections sharing the same bandwidth.</p>

    <p>User agents may decide to not download more content at any
    time, e.g. after buffering five minutes of a one hour media
    resource, while waiting for the user to decide whether to play the
    resource or not, or while waiting for user input in an interactive
    resource. When a <a href=#media-element>media element</a>'s download has been
    suspended, the user agent must set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> and <a href=#queue-a-task>queue
    a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-suspend><a href=#event-media-suspend>suspend</a></code> at the element. If and
    when downloading of the resource resumes, the user agent must set
    the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to
    <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.</p>

    <p class=note>The <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute provides a
    hint regarding how much buffering the author thinks is advisable,
    even in the absence of the <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute.</p>

    <p>When a user agent decides to completely stall a download,
    e.g. if it is waiting until the user starts playback before
    downloading any further content, the element's
    <a href=#delaying-the-load-event-flag>delaying-the-load-event flag</a> must be set to
    false. This stops <a href=#delay-the-load-event title="delay the load event">delaying the
    load event</a>.</p>

    <p>The user agent may use whatever means necessary to fetch the
    resource (within the constraints put forward by this and other
    specifications); for example, reconnecting to the server in the
    face of network errors, using HTTP range retrieval requests, or
    switching to a streaming protocol. The user agent must consider a
    resource erroneous only if it has given up trying to fetch it.</p>

    <p>The <a href=#networking-task-source>networking task source</a> <a href=#concept-task title=concept-task>tasks</a> to process the data as it is
    being fetched must, when appropriate, include the relevant
    substeps from the following list:</p>

    <dl class=switch><dt>If the <a href=#media-data>media data</a> cannot be fetched at all, due
     to network errors, causing the user agent to give up trying to
     fetch the resource</dt>

     <dt>If the <a href=#media-resource>media resource</a> is found to have <a href=#content-type title=Content-Type>Content-Type metadata</a> that, when
     parsed as a <a href=#mime-type>MIME type</a> (including any codecs
     described by the <code title="">codecs</code> parameter),
     represents <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot
     render</a> (even if the actual <a href=#media-data>media data</a> is in a
     supported format)</dt>

     <dt>If the <a href=#media-data>media data</a> can be fetched but is found by
     inspection to be in an unsupported format, or can otherwise not
     be rendered at all</dt>

     <dd>

      <p>DNS errors, HTTP 4xx and 5xx errors (and equivalents in
      other protocols), and other fatal network errors that occur
      before the user agent has established whether the <var title="">current media resource</var> is usable, as well as
      the file using an unsupported container format, or using
      unsupported codecs for all the data, must cause the user agent
      to execute the following steps:</p>

      <ol><li><p>The user agent should cancel the fetching
       process.</li>

       <li><p>Abort this subalgorithm, returning to the <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
       algorithm</a>.</p>

      </ol></dd>


     <!-- insert content sniffing here if we want to define that -->
     <!-- (in practice I don't think that's necessary since it's not
     like you can do anything with the resource if you sniff it as the
     wrong type) -->


     <dt id=getting-media-metadata>Once enough of the <a href=#media-data>media
     data</a> has been fetched to determine the duration of the
     <a href=#media-resource>media resource</a>, its dimensions, and other
     metadata,
<!--TT-->
     and once <a href=#the-timed-tracks-are-ready>the timed tracks are ready</a>
<!--TT-->
     </dt>

     <dd>

      <p>This indicates that the resource is usable. The user agent
      must follow these substeps:</p>

      <ol><li><p>Set the <a href=#current-playback-position>current playback position</a> to the
       <a href=#earliest-possible-position>earliest possible position</a>.</li>

       <li><p>Set the <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute to
       <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>.</li>

       <li><p>For <code><a href=#video>video</a></code> elements, set the <code title=dom-video-videoWidth><a href=#dom-video-videowidth>videoWidth</a></code> and <code title=dom-video-videoHeight><a href=#dom-video-videoheight>videoHeight</a></code>
       attributes.</li>

       <li>

        <p>Set the <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code>
        attribute to the duration of the resource.</p>

        <p class=note>The user agent <a href=#durationChange>will</a> <a href=#queue-a-task>queue a task</a> to
        <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> at the
        element at this point.</p>

       </li>

       <li id=fire-loadedmetadata>

        <p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
        event</a> named <code title=event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code> at the
        element.</p>

        <p class=note>Before this task is run, as part of the event
        loop mechanism, the rendering will have been updated to resize
        the <code><a href=#video>video</a></code> element if appropriate.</p>

       </li>

       <li>

        <p>If either the <a href=#media-resource>media resource</a> or the address
        of the <var title="">current media resource</var> indicate a
        particular start time, then <a href=#dom-media-seek title=dom-media-seek>seek</a> to that time. Ignore any
        resulting exceptions (if the position is out of range, it is
        effectively ignored).</p>

        <p class=example>For example, a fragment identifier could be
        used to indicate a start position.</p>

       </li>

       <li>

        <p>Once the <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute
        reaches <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>,
        <a href=#fire-loadeddata>after the <code title=event-media-loadeddata>loadeddata</code> event has been
        fired</a>, set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
        flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
        event">delaying the load event</a>.</p>

        <p class=note>A user agent that is attempting to reduce
        network usage while still fetching the metadata for each
        <a href=#media-resource>media resource</a> would also stop buffering at this
        point, causing the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute
        to switch to the <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> value.</p>

       </li>

      </ol><p class=note>The user agent is <em>required</em> to
      determine the duration of the <a href=#media-resource>media resource</a> and
      go through this step before playing.</p> <!-- actually defined
      in the 'duration' section -->

     </dd>


     <dt>Once the entire <a href=#media-resource>media resource</a> has been <a href=#fetch title=fetch>fetched</a> (but potentially before any of it
     has been decoded)</dt>

     <dd>

      <p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
      named <code title=event-media-progress><a href=#event-media-progress>progress</a></code> at the
      <a href=#media-element>media element</a>.</p>

     </dd>


     <dt>If the connection is interrupted, causing the user agent to
     give up trying to fetch the resource</dt>

     <dd>

      <p>Fatal network errors that occur after the user agent has
      established whether the <var title="">current media
      resource</var> is usable must cause the user agent to execute
      the following steps:</p>

      <ol><li><p>The user agent should cancel the fetching
       process.</li>

       <li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code>
       attribute to a new <code><a href=#mediaerror>MediaError</a></code> object whose <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code> attribute is set to
       <code title=dom-MediaError-MEDIA_ERR_NETWORK><a href=#dom-mediaerror-media_err_network>MEDIA_ERR_NETWORK</a></code>.</li>

       <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
       event</a> named <code title=event-media-error><a href=#event-media-error>error</a></code>
       at the <a href=#media-element>media element</a>.</li>

       <li><p>Set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
       the <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>
       value and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
       event</a> named <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code> at the
       element.</li> <!-- XXX shouldn't this be _IDLE? see
       aborted-by-user state below -->

       <li><p>Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
       flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
       event">delaying the load event</a>.</li>

       <li><p>Abort the overall <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
       algorithm</a>.</li>

      </ol></dd>


     <dt id=fatal-decode-error>If the <a href=#media-data>media data</a> is
     corrupted</dt>

     <dd>

      <p>Fatal errors in decoding the <a href=#media-data>media data</a> that
      occur after the user agent has established whether the <var title="">current media resource</var> is usable must cause the
      user agent to execute the following steps:</p>

      <ol><li><p>The user agent should cancel the fetching
       process.</li>

       <li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code>
       attribute to a new <code><a href=#mediaerror>MediaError</a></code> object whose <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code> attribute is set to
       <code title=dom-MediaError-MEDIA_ERR_DECODE><a href=#dom-mediaerror-media_err_decode>MEDIA_ERR_DECODE</a></code>.</li>

       <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
       event</a> named <code title=event-media-error><a href=#event-media-error>error</a></code>
       at the <a href=#media-element>media element</a>.</li>

       <li><p>Set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
       the <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>
       value and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
       event</a> named <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code> at the
       element.</li> <!-- XXX shouldn't this be _IDLE? see
       aborted-by-user case below -->

       <li><p>Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
       flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
       event">delaying the load event</a>.</li>

       <li><p>Abort the overall <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
       algorithm</a>.</li>

      </ol></dd>


     <dt>If the <a href=#media-data>media data</a> fetching process is aborted by
     the user</dt>

     <dd>

      <p>The fetching process is aborted by the user, e.g. because the
      user navigated the browsing context to another page, the user
      agent must execute the following steps. These steps are not
      followed if the <code title=dom-media-load><a href=#dom-media-load>load()</a></code>
      method itself is invoked while these steps are running, as the
      steps above handle that particular kind of abort.</p>

      <ol><li><p>The user agent should cancel the fetching
       process.</li>

       <li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code>
       attribute to a new <code><a href=#mediaerror>MediaError</a></code> object whose <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code> attribute is set to
       <code title=dom-MediaError-MEDIA_ERR_ABORTED><a href=#dom-mediaerror-media_err_aborted>MEDIA_ERR_ABORTED</a></code>.</li>

       <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
       event</a> named <code title=event-media-abort><a href=#event-media-abort>abort</a></code>
       at the <a href=#media-element>media element</a>.</li>

       <li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute has a
       value equal to <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, set the
       element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
       the <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>
       value and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
       event</a> named <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code>
       at the element. Otherwise, set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
       the <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>
       value.</li>

       <li><p>Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
       flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
       event">delaying the load event</a>.</li>

       <li><p>Abort the overall <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
       algorithm</a>.</li>

      </ol></dd>


     <dt id=non-fatal-media-error>If the <a href=#media-data>media data</a> can
     be fetched but has non-fatal errors or uses, in part, codecs that
     are unsupported, preventing the user agent from rendering the
     content completely correctly but not preventing playback
     altogether</dt>

     <dd>

      <p>The server returning data that is partially usable but cannot
      be optimally rendered must cause the user agent to render just
      the bits it can handle, and ignore the rest.</p>

      <!-- v2: fire a 'warning' event and set the 'error' flag to 'MEDIA_ERR_SUBOPTIMAL' or something -->

     </dd>


<!--TT-->
     <dt id=found-a-media-resource-specific-timed-track>If the <a href=#media-resource>media resource</a> is found to declare a <a href=#media-resource-specific-timed-track>media-resource-specific timed track</a> that the user agent supports</dt>

     <dd>

      <p>Run the <a href=#steps-to-expose-a-media-resource-specific-timed-track>steps to expose a media-resource-specific timed
      track</a> with the relevant data.</p>

     </dd>
<!--TT-->

    </dl><p>When the <a href=#networking-task-source>networking task source</a> has <a href=#queue-a-task title="queue a task">queued</a> the last <a href=#concept-task title=concept-task>task</a> as part of <a href=#fetch title=fetch>fetching</a> the <a href=#media-resource>media resource</a>
    (i.e. once the download has completed), if the fetching process
    completes without errors, including decoding the media data, and
    if all of the data is available to the user agent without network
    access, then, the user agent must move on to the next step. This
    might never happen, e.g. when streaming an infinite resource such
    as Web radio, or if the resource is longer than the user agent's
    ability to cache data.</p>

    <p>While the user agent might still need network access to obtain
    parts of the <a href=#media-resource>media resource</a>, the user agent must
    remain on this step.</p>

    <p class=example>For example, if the user agent has discarded
    the first half of a video, the user agent will remain at this step
    even once the <a href=#ended-playback title="ended playback">playback has
    ended</a>, because there is always the chance the user will
    seek back to the start. In fact, in this situation, once <a href=#ended-playback title="ended playback">playback has ended</a>, the user agent
    will end up dispatching a <code title=event-media-stalled><a href=#event-media-stalled>stalled</a></code> event, as described
    earlier.</p>

   </li>

   <li><p>If the user agent ever reaches this step (which can only
   happen if the entire resource gets loaded and kept available):
   abort the overall <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   algorithm</a>.</li>

  </ol></div>

  <hr><p>The <dfn id=attr-media-preload title=attr-media-preload><code>preload</code></dfn>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following table
  lists the keywords and states for the attribute &mdash; the keywords
  in the left column map to the states in the cell in the second
  column on the same row as the keyword.</p>

  <table><thead><tr><th> Keyword
     <th> State
     <th> Brief description
   <tbody><tr><td><dfn id=attr-media-preload-none title=attr-media-preload-none><code>none</code></dfn>
     <td><dfn id=attr-media-preload-none-state title=attr-media-preload-none-state>None</dfn>
     <td>Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic.
    <tr><td><dfn id=attr-media-preload-metadata title=attr-media-preload-metadata><code>metadata</code></dfn>
     <td><dfn id=attr-media-preload-metadata-state title=attr-media-preload-metadata-state>Metadata</dfn>
     <td>Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, first frame, track list, duration, etc) is reasonable.
    <tr><td><dfn id=attr-media-preload-auto title=attr-media-preload-auto><code>auto</code></dfn>
     <td><dfn id=attr-media-preload-auto-state title=attr-media-preload-auto-state>Automatic</dfn>
     <td>Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource.
  </table><p>The empty string is also a valid keyword, and maps to the <a href=#attr-media-preload-auto-state title=attr-media-preload-auto-state>Automatic</a> state. The
  attribute's <i>missing value default</i> is user-agent defined,
  though the <a href=#attr-media-preload-auto-state title=attr-media-preload-auto-state>Metadata</a> state is
  suggested as a compromise between reducing server load and providing
  an optimal user experience.</p>

  <div class=impl>

  <p>The <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute is
  intended to provide a hint to the user agent about what the author
  thinks will lead to the best user experience. The attribute may be
  ignored altogether, for example based on explicit user preferences
  or based on the available connectivity.</p>

  <p>The <dfn id=dom-media-preload title=dom-media-preload><code>preload</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  </div>

  <p class=note>The <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute can overrride
  the <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute (since
  if the media plays, it naturally has to buffer first, regardless of
  the hint given by the <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute). Including
  both is not an error, however.</p>

  <hr><!--v3BUF (when readding this, also add a domintro block)
  <p>The <dfn
  title="dom-media-bufferingRate"><code>bufferingRate</code></dfn>
  attribute must return the average number of bits received per second
  for the current download over the past few seconds. If there is no
  download in progress, the attribute must return 0.</p>

  <p>The <dfn
  title="dom-media-bufferingThrottled"><code>bufferingThrottled</code></dfn>
  attribute must return true if the user agent is intentionally
  throttling the bandwidth used by the download (including when
  throttling to zero to pause the download altogether), and false
  otherwise.</p>

  <hr>
--><dl class=domintro><dt><var title="">media</var> . <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code></dt>

   <dd>

    <p>Returns a <code><a href=#timeranges>TimeRanges</a></code> object that represents the
    ranges of the <a href=#media-resource>media resource</a> that the user agent has
    buffered.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-media-buffered title=dom-media-buffered><code>buffered</code></dfn>
  attribute must return a new static <a href=#normalized-timeranges-object>normalized
  <code>TimeRanges</code> object</a> that represents the ranges of
  the <a href=#media-resource>media resource</a>, if any, that the user agent has
  buffered, at the time the attribute is evaluated. Users agents must
  accurately determine the ranges available, even for media streams
  where this can only be determined by tedious inspection.</p>

  <p class=note>Typically this will be a single range anchored at
  the zero point, but if, e.g. the user agent uses HTTP range requests
  in response to seeking, then there could be multiple ranges.</p>

  <p>User agents may discard previously buffered data.</p>

  <p class=note>Thus, a time position included within a range of the
  objects return by the <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code> attribute at one time can
  end up being not included in the range(s) of objects returned by the
  same attribute at later times.</p>

  </div>



  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</h5>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>

   <dd>

    <p>Returns the length of the <a href=#media-resource>media resource</a>, in
    seconds.</p>

    <p>Returns NaN if the duration isn't available.<p>

    <p>Returns Infinity for unbounded streams.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-currentTime><a href=#dom-media-currenttime>currentTime</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the <a href=#current-playback-position>current playback position</a>, in seconds.</p>

    <p>Can be set, to seek to the given time.<p>

    <p>Will throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if there
    is no selected <a href=#media-resource>media resource</a>. Will throw an
    <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the given time is not
    within the ranges to which the user agent can seek.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-startTime><a href=#dom-media-starttime>startTime</a></code></dt>

   <dd>

    <p>Returns the <a href=#earliest-possible-position>earliest possible position</a>, in
    seconds. This is the time for the start of the current clip. It
    might not be zero if the clip's timeline is not zero-based, or if
    the resource is a streaming resource (in which case it gives the
    earliest time that the user agent is able to seek back to).</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-media-duration title=dom-media-duration><code>duration</code></dfn>
  attribute must return the length of the <a href=#media-resource>media resource</a>,
  in seconds. If no <a href=#media-data>media data</a> is available, then the
  attributes must return the Not-a-Number (NaN) value. If the
  <a href=#media-resource>media resource</a> is known to be unbounded (e.g. a
  streaming radio), then the attribute must return the positive
  Infinity value.</p>

  <p>The user agent must determine the duration of the <a href=#media-resource>media
  resource</a> before playing any part of the <a href=#media-data>media
  data</a> and before setting <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> to a value equal to
  or greater than <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, even if doing
  so requires seeking to multiple parts of the resource.</p>

  <p id=durationChange>When the length of the <a href=#media-resource>media
  resource</a> changes (e.g. from being unknown to known, or from a
  previously established length to a new length) the user agent must
  <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named
  <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> at the
  <a href=#media-element>media element</a>.</p>

  <p class=example>If an "infinite" stream ends for some reason,
  then the duration would change from positive Infinity to the time of
  the last frame or sample in the stream, and the <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> event would be
  fired. Similarly, if the user agent initially estimated the
  <a href=#media-resource>media resource</a>'s duration instead of determining it
  precisely, and later revises the estimate based on new information,
  then the duration would change and the <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> event would be
  fired.</p>

  <p><a href=#media-element title="media element">Media elements</a> have a
  <dfn id=current-playback-position>current playback position</dfn>, which must initially be
  zero. The current position is a time.</p>

  <p>The <dfn id=dom-media-currenttime title=dom-media-currentTime><code>currentTime</code></dfn>
  attribute must, on getting, return the <a href=#current-playback-position>current playback
  position</a>, expressed in seconds. On setting, the user agent
  must <a href=#dom-media-seek title=dom-media-seek>seek</a> to the new value
  (which might raise an exception).</p>

  <p>If the <a href=#media-resource>media resource</a> is a streaming resource, then
  the user agent might be unable to obtain certain parts of the
  resource after it has expired from its buffer. Similarly, some <a href=#media-resource title="media resource">media resources</a> might have a timeline
  that doesn't start at zero. The <dfn id=earliest-possible-position>earliest possible
  position</dfn> is the earliest position in the stream or resource
  that the user agent can ever obtain again.</p>

  <p>The <dfn id=dom-media-starttime title=dom-media-startTime><code>startTime</code></dfn>
  attribute must, on getting, return the <a href=#earliest-possible-position>earliest possible
  position</a>, expressed in seconds.</p>

  <p>When the <a href=#earliest-possible-position>earliest possible position</a> changes, then:
  if the <a href=#current-playback-position>current playback position</a> is before the
  <a href=#earliest-possible-position>earliest possible position</a>, the user agent must <a href=#dom-media-seek title=dom-media-seek>seek</a> to the <a href=#earliest-possible-position>earliest possible
  position</a>; otherwise, if the user agent has not fired a <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> event at the
  element in the past 15 to 250ms and is not still running event
  handlers for such an event, then the user agent must <a href=#queue-a-task>queue a
  task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</p>

  <p class=note>Because of the above requirement and the requirement
  in the <a href=#concept-media-load-resource title=concept-media-load-resource>resource fetch
  algorithm</a> that kicks in <a href=#getting-media-metadata>when the metadata of the clip becomes
  known</a>, the <a href=#current-playback-position>current playback position</a> can never be
  less than the <a href=#earliest-possible-position>earliest possible position</a>.</p>

  <p>User agents must act as if the timeline of the <a href=#media-resource>media
  resource</a> increases linearly starting from the <a href=#earliest-possible-position>earliest
  possible position</a>, even if the underlying <a href=#media-data>media
  data</a> has out-of-order or even overlapping time codes.</p>

  <p class=example>For example, if two clips have been concatenated
  into one video file, but the video format exposes the original times
  for the two clips, the video data might expose a timeline that goes,
  say, 00:15..00:29 and then 00:05..00:38. However, the user agent
  would not expose those times; it would instead expose the times as
  00:15..00:29 and 00:29..01:02, as a single video.</p>

  </div>

  <p>The <dfn id=attr-media-loop title=attr-media-loop><code>loop</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a> that, if specified,
  indicates that the <a href=#media-element>media element</a> is to seek back to the
  start of the <a href=#media-resource>media resource</a> upon reaching the end.</p>

  <div class=impl>

  <p>The <dfn id=dom-media-loop title=dom-media-loop><code>loop</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  </div>



  <h5 id=the-ready-states><span class=secno>4.8.10.7 </span>The ready states</h5>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>

   <dd>

    <p>Returns a value that expresses the current state of the element
    with respect to rendering the <a href=#current-playback-position>current playback
    position</a>, from the codes in the list below.</p>

   </dd>

  </dl><div class=impl>

  <p><a href=#media-element title="media element">Media elements</a> have a
  <i>ready state</i>, which describes to what degree they are ready
  to be rendered at the <a href=#current-playback-position>current playback position</a>. The
  possible values are as follows; the ready state of a media element
  at any particular time is the greatest value describing the state of
  the element:</p>

  </div>

  <dl><dt><dfn id=dom-media-have_nothing title=dom-media-HAVE_NOTHING><code>HAVE_NOTHING</code></dfn> (numeric value 0)</dt>

   <dd>No information regarding the <a href=#media-resource>media resource</a> is
   available. No data for the <a href=#current-playback-position>current playback position</a>
   is available. <a href=#media-element title="media element">Media elements</a>
   whose <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code>
   attribute are set to <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> are always in
   the <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>
   state.</dd>

   <dt><dfn id=dom-media-have_metadata title=dom-media-HAVE_METADATA><code>HAVE_METADATA</code></dfn> (numeric value 1)</dt>

   <dd>Enough of the resource has been obtained that the duration of
   the resource is available. In the case of a <code><a href=#video>video</a></code>
   element, the dimensions of the video are also available. The API
   will no longer raise an exception when seeking. No <a href=#media-data>media
   data</a> is available for the immediate <a href=#current-playback-position>current playback
   position</a>.
<!--TT-->
   The <a href=#timed-track title="timed track">timed tracks</a>
   are <a href=#the-timed-tracks-are-ready title="the timed tracks are ready">ready</a>.
<!--TT-->
   </dd>

   <dt><dfn id=dom-media-have_current_data title=dom-media-HAVE_CURRENT_DATA><code>HAVE_CURRENT_DATA</code></dfn> (numeric value 2)</dt>

   <dd>Data for the immediate <a href=#current-playback-position>current playback position</a>
   is available, but either not enough data is available that the user
   agent could successfully advance the <a href=#current-playback-position>current playback
   position</a> in the <a href=#direction-of-playback>direction of playback</a> at all
   without immediately reverting to the <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> state, or
   there is no more data to obtain in the <a href=#direction-of-playback>direction of
   playback</a>. For example, in video this corresponds to the user
   agent having data from the current frame, but not the next frame;
   and to when <a href=#ended-playback title="ended playback">playback has
   ended</a>.</dd>

   <dt><dfn id=dom-media-have_future_data title=dom-media-HAVE_FUTURE_DATA><code>HAVE_FUTURE_DATA</code></dfn> (numeric value 3)</dt>

   <dd>Data for the immediate <a href=#current-playback-position>current playback position</a>
   is available, as well as enough data for the user agent to advance
   the <a href=#current-playback-position>current playback position</a> in the <a href=#direction-of-playback>direction
   of playback</a> at least a little without immediately reverting
   to the <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>
   state. For example, in video this corresponds to the user agent
   having data for at least the current frame and the next frame. The
   user agent cannot be in this state if <a href=#ended-playback title="ended
   playback">playback has ended</a>, as the <a href=#current-playback-position>current playback
   position</a> can never advance in this case.</dd>

   <dt><dfn id=dom-media-have_enough_data title=dom-media-HAVE_ENOUGH_DATA><code>HAVE_ENOUGH_DATA</code></dfn> (numeric value 4)</dt>

   <dd>All the conditions described for the <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> state
   are met, and, in addition, the user agent estimates that data is
   being fetched at a rate where the <a href=#current-playback-position>current playback
   position</a>, if it were to advance at the rate given by the
   <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code>
   attribute, would not overtake the available data before playback
   reaches the end of the <a href=#media-resource>media resource</a>.</dd>

  </dl><div class=impl>

  <p>When the ready state of a <a href=#media-element>media element</a> whose <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is not <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> changes, the
  user agent must follow the steps given below:</p>

  <dl class=switch><!-- going up to metadata --><dt>If the previous ready state was <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, and the new
   ready state is <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code></dt>

   <dd>

    <p class=note>A <code title=event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code> DOM event <a href=#fire-loadedmetadata>will be fired</a> as part of the <code title=dom-media-load><a href=#dom-media-load>load()</a></code> algorithm.</p>

   </dd>

   <!-- going up to current for the first time -->

   <dt id=handling-first-frame-available>If the previous ready state
   was <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> and
   the new ready state is <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or
   greater</dt>

   <dd>

    <p id=fire-loadeddata>If this is the first time this occurs for
    this <a href=#media-element>media element</a> since the <code title=dom-media-load><a href=#dom-media-load>load()</a></code> algorithm was last invoked,
    the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a
    simple event</a> named <code title=event-media-loadeddata><a href=#event-media-loadeddata>loadeddata</a></code> at the element.</p>

    <p>If the new ready state is <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or
    <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>,
    then the relevant steps below must then be run also.</p>

   </dd>

   <!-- going down -->
   <dt>If the previous ready state was <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or more,
   and the new ready state is <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or
   less</dt>

   <dd>

    <p class=note>A <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> DOM
    event <a href=#fire-waiting-when-waiting>can be fired</a>,
    depending on the current state of playback.</p>

   </dd>

   <!-- going up to future -->
   <dt>If the previous ready state was <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or
   less, and the new ready state is <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code></dt>

   <dd>

    <p>The user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a
    simple event</a> named <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code>.</p>

    <p>If the element is <a href=#potentially-playing>potentially playing</a>, the user
    agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
    event</a> named <code title=event-media-playing><a href=#event-media-playing>playing</a></code>.</p>

   </dd>

   <!-- going up to enough -->
   <dt>If the new ready state is <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code></dt>

   <dd>

    <p>If the previous ready state was <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or
    less, the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
    a simple event</a> named <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code>, and, if the element is also
    <a href=#potentially-playing>potentially playing</a>, <a href=#queue-a-task>queue a task</a> to
    <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-playing><a href=#event-media-playing>playing</a></code>.</p>

    <p>If the <a href=#autoplaying-flag>autoplaying flag</a> is true, and the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is true, and the
    <a href=#media-element>media element</a> has an <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute specified,
    and the <a href=#media-element>media element</a> is in a <code><a href=#document>Document</a></code>
    whose <a href=#browsing-context>browsing context</a> did not have the
    <a href=#sandboxed-automatic-features-browsing-context-flag>sandboxed automatic features browsing context flag</a>
    set when the <code><a href=#document>Document</a></code> was created, then the user
    agent may also set the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute to false,
    <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
    named <code title=event-media-play><a href=#event-media-play>play</a></code>, and <a href=#queue-a-task>queue
    a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-playing><a href=#event-media-playing>playing</a></code>.</p>

    <p class=note>User agents are not required to autoplay, and it
    is suggested that user agents honor user preferences on the
    matter. Authors are urged to use the <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute rather than
    using script to force the video to play, so as to allow the user
    to override the behavior if so desired.</p>

    <p>In any case, the user agent must finally <a href=#queue-a-task>queue a
    task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-canplaythrough><a href=#event-media-canplaythrough>canplaythrough</a></code>.</p>

   </dd>

  </dl></div>

  <p class=note>It is possible for the ready state of a media
  element to jump between these states discontinuously. For example,
  the state of a media element can jump straight from <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> to <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code> without
  passing through the <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> and
  <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>
  states.</p>

  <div class=impl>

  <p>The <dfn id=dom-media-readystate title=dom-media-readyState><code>readyState</code></dfn> IDL
  attribute must, on getting, return the value described above that
  describes the current ready state of the <a href=#media-element>media
  element</a>.</p>

  </div>

  <p>The <dfn id=attr-media-autoplay title=attr-media-autoplay><code>autoplay</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>. When present, the
  user agent <span class=impl>(as described in the algorithm
  described herein)</span> will automatically begin playback of the
  <a href=#media-resource>media resource</a> as soon as it can do so without
  stopping.</p>

  <p class=note>Authors are urged to use the <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute rather than
  using script to trigger automatic playback, as this allows the user
  to override the automatic playback when it is not desired, e.g. when
  using a screen reader. Authors are also encouraged to consider not
  using the automatic playback behavior at all, and instead to let the
  user agent wait for the user to start playback explicitly.</p>

  <div class=impl>

  <p>The <dfn id=dom-media-autoplay title=dom-media-autoplay><code>autoplay</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  </div>



  <h5 id=playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</h5>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>

   <dd>

    <p>Returns true if playback is paused; false otherwise.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-ended><a href=#dom-media-ended>ended</a></code></dt>

   <dd>

    <p>Returns true if playback has reached the end of the <a href=#media-resource>media resource</a>.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the default rate of playback, for when the user is not
    fast-forwarding or reversing through the <a href=#media-resource>media
    resource</a>.</p>

    <p>Can be set, to change the default rate of playback.</p>

    <p>The default rate has no direct effect on playback, but if the
    user switches to a fast-forward mode, when they return to the
    normal playback mode, it is expected that the rate of playback
    will be returned to the default rate of playback.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current rate playback, where 1.0 is normal speed.</p>

    <p>Can be set, to change the rate of playback.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-played><a href=#dom-media-played>played</a></code></dt>

   <dd>

    <p>Returns a <code><a href=#timeranges>TimeRanges</a></code> object that represents the
    ranges of the <a href=#media-resource>media resource</a> that the user agent has
    played.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-play><a href=#dom-media-play>play</a></code>()</dt>

   <dd>

    <p>Sets the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute
    to false, loading the <a href=#media-resource>media resource</a> and beginning
    playback if necessary. If the playback had ended, will restart it
    from the start.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-pause><a href=#dom-media-pause>pause</a></code>()</dt>

   <dd>

    <p>Sets the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute
    to true, loading the <a href=#media-resource>media resource</a> if necessary.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-media-paused title=dom-media-paused><code>paused</code></dfn>
  attribute represents whether the <a href=#media-element>media element</a> is
  paused or not. The attribute must initially be true.</p>

  <p>A <a href=#media-element>media element</a> is said to be <dfn id=potentially-playing>potentially
  playing</dfn> when its <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code>
  attribute is false, the <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
  <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or
  <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>,
  the element has not <a href=#ended-playback>ended playback</a>, playback has not
  <a href=#stopped-due-to-errors>stopped due to errors</a>, and the element has not <a href=#paused-for-user-interaction>paused
  for user interaction</a>.</p>

  <p>A <a href=#media-element>media element</a> is said to have <dfn id=ended-playback>ended
  playback</dfn> when the element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater, and
  either the <a href=#current-playback-position>current playback position</a> is the end of the
  <a href=#media-resource>media resource</a> and the <a href=#direction-of-playback>direction of
  playback</a> is forwards and the <a href=#media-element>media element</a> does
  not have a <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code> attribute
  specified, or the <a href=#current-playback-position>current playback position</a> is the
  <a href=#earliest-possible-position>earliest possible position</a> and the <a href=#direction-of-playback>direction of
  playback</a> is backwards.</p>

  <p>The <dfn id=dom-media-ended title=dom-media-ended><code>ended</code></dfn>
  attribute must return true if the <a href=#media-element>media element</a> has
  <a href=#ended-playback>ended playback</a> and the <a href=#direction-of-playback>direction of
  playback</a> is forwards, and false otherwise.</p>

  <p>A <a href=#media-element>media element</a> is said to have <dfn id=stopped-due-to-errors>stopped due to
  errors</dfn> when the element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater, and
  the user agent <a href=#non-fatal-media-error>encounters a
  non-fatal error</a> during the processing of the <a href=#media-data>media
  data</a>, and due to that error, is not able to play the content
  at the <a href=#current-playback-position>current playback position</a>.</p>

  <p>A <a href=#media-element>media element</a> is said to have <dfn id=paused-for-user-interaction>paused for user
  interaction</dfn> when its <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is false, the <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
  <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or
  <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code> and
  the user agent has reached a point in the <a href=#media-resource>media
  resource</a> where the user has to make a selection for the
  resource to continue.</p>

  <p>It is possible for a <a href=#media-element>media element</a> to have both
  <a href=#ended-playback>ended playback</a> and <a href=#paused-for-user-interaction>paused for user
  interaction</a> at the same time.</p>

  <p>When a <a href=#media-element>media element</a> that is <a href=#potentially-playing>potentially
  playing</a> stops playing because it has <a href=#paused-for-user-interaction>paused for user
  interaction</a>, the user agent must <a href=#queue-a-task>queue a task</a> to
  <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</p>

  <p id=fire-waiting-when-waiting>When a <a href=#media-element>media element</a>
  that is <a href=#potentially-playing>potentially playing</a> stops playing because its
  <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute
  changes to a value lower than <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>, without
  the element having <a href=#ended-playback>ended playback</a>, or playback having
  <a href=#stopped-due-to-errors>stopped due to errors</a>, or playback having <a href=#paused-for-user-interaction>paused
  for user interaction</a>, or the <a href=#dom-media-seek title=dom-media-seek>seeking algorithm</a> being invoked, the
  user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code>
  at the element, and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> named <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> at
  the element.</p>

  <p>When the <a href=#current-playback-position>current playback position</a> reaches the end
  of the <a href=#media-resource>media resource</a> when the <a href=#direction-of-playback>direction of
  playback</a> is forwards, then the user agent must follow these
  steps:</p>

  <ol><li><p>If the <a href=#media-element>media element</a> has a <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code> attribute specified, then <a href=#dom-media-seek title=dom-media-seek>seek</a> to the <a href=#earliest-possible-position>earliest possible
   position</a> of the <a href=#media-resource>media resource</a> and abort these
   steps.</li> <!-- v2/v3: We should fire a 'looping' event here
   to explain why this immediately fires a 'playing' event, otherwise
   the 'playing' event that fires from the readyState going from
   HAVE_CURRENT_DATA back to HAVE_FUTURE_DATA will seem inexplicable
   (since the normally matching 'ended' given below event doesn't fire
   in the loop case). -->

   <li><p>Stop playback.<p class=note>The <code title=dom-media-ended><a href=#dom-media-ended>ended</a></code> attribute becomes
   true.</li>

   <li><p>The user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
   a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</li>

   <li><p>The user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
   a simple event</a> named <code title=event-media-ended><a href=#event-media-ended>ended</a></code>
   at the element.</li>

  </ol><p>When the <a href=#current-playback-position>current playback position</a> reaches the
  <a href=#earliest-possible-position>earliest possible position</a> of the <a href=#media-resource>media
  resource</a> when the <a href=#direction-of-playback>direction of playback</a> is
  backwards, then the user agent must follow these steps:</p>

  <ol><li><p>Stop playback.</li>

   <li><p>The user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
   a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</li>

  </ol><p>The <dfn id=dom-media-defaultplaybackrate title=dom-media-defaultPlaybackRate><code>defaultPlaybackRate</code></dfn>
  attribute gives the desired speed at which the <a href=#media-resource>media
  resource</a> is to play, as a multiple of its intrinsic
  speed. The attribute is mutable: on getting it must return the last
  value it was set to, or 1.0 if it hasn't yet been set; on setting
  the attribute must be set to the new value.</p>

  <p>The <dfn id=dom-media-playbackrate title=dom-media-playbackRate><code>playbackRate</code></dfn>
  attribute gives the speed at which the <a href=#media-resource>media resource</a>
  plays, as a multiple of its intrinsic speed. If it is not equal to
  the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code>,
  then the implication is that the user is using a feature such as
  fast forward or slow motion playback. The attribute is mutable: on
  getting it must return the last value it was set to, or 1.0 if it
  hasn't yet been set; on setting the attribute must be set to the new
  value, and the playback must change speed (if the element is
  <a href=#potentially-playing>potentially playing</a>).</p>

  <p>If the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>
  is positive or zero, then the <dfn id=direction-of-playback>direction of playback</dfn> is
  forwards. Otherwise, it is backwards.</p>

  <p>The "play" function in a user agent's interface must set the
  <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> attribute
  to the value of the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code>
  attribute before invoking the <code title=dom-media-play><a href=#dom-media-play>play()</a></code> method's steps. Features such
  as fast-forward or rewind must be implemented by only changing the
  <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>
  attribute.</p>

  <p id=rateUpdate>When the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> or
  <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> attributes
  change value (either by being set by script or by being changed
  directly by the user agent, e.g. in response to user control) the
  user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> named <code title=event-media-ratechange><a href=#event-media-ratechange>ratechange</a></code>
  at the <a href=#media-element>media element</a>.</p>

  <p>The <dfn id=dom-media-played title=dom-media-played><code>played</code></dfn>
  attribute must return a new static <a href=#normalized-timeranges-object>normalized
  <code>TimeRanges</code> object</a> that represents the ranges of
  the <a href=#media-resource>media resource</a>, if any, that the user agent has so
  far rendered, at the time the attribute is evaluated.</p>

  <hr><p>When the <dfn id=dom-media-play title=dom-media-play><code>play()</code></dfn>
  method on a <a href=#media-element>media element</a> is invoked, the user agent
  must run the following steps.</p>

  <ol><li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute has
   the value <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, invoke the
   <a href=#media-element>media element</a>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   algorithm</a>.</li>

   <li>

    <p>If the <a href=#ended-playback title="ended playback">playback has ended</a>
    and the <a href=#direction-of-playback>direction of playback</a> is forwards, <a href=#dom-media-seek title=dom-media-seek>seek</a> to the <a href=#earliest-possible-position>earliest possible
    position</a> of the <a href=#media-resource>media resource</a>.</p>

    <p class=note>This <a href=#seekUpdate>will cause</a> the user
    agent to <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
    event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the <a href=#media-element>media
    element</a>.</p> <!-- if we're already playing at this point,
    it might also fire 'waiting' -->

   </li>

   <li>

    <p>If the <a href=#media-element>media element</a>'s <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is true, run
    the following substeps:</p>

    <ol><li><p>Change the value of <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> to false.</li>

     <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
     named <code title=event-media-play><a href=#event-media-play>play</a></code> at the element.</li>

     <li>

      <p>If the <a href=#media-element>media element</a>'s <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute has the
      value <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>,
      <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, or
      <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>,
      <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
      named <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> at the
      element.</p>

      <p>Otherwise, the <a href=#media-element>media element</a>'s <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute has the
      value <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or
      <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>;
      <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
      named <code title=event-media-playing><a href=#event-media-playing>playing</a></code> at the
      element.</p>

     </li>

    </ol></li>

   <li><p>Set the <a href=#media-element>media element</a>'s <a href=#autoplaying-flag>autoplaying
   flag</a> to false.</li>

  </ol><hr><p>When the <dfn id=dom-media-pause title=dom-media-pause><code>pause()</code></dfn>
  method is invoked, the user agent must run the following steps:</p>

  <ol><li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute has
   the value <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, invoke the
   <a href=#media-element>media element</a>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   algorithm</a>.</li>

   <li><p>Set the <a href=#media-element>media element</a>'s <a href=#autoplaying-flag>autoplaying
   flag</a> to false.</li>

   <li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is false, run the
   following steps:</p>

    <ol><li><p>Change the value of <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> to true.</li>

     <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
     event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the
     element.</li>

     <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
     event</a> named <code title=event-media-pause><a href=#event-media-pause>pause</a></code>
     at the element.</li>

    </ol></li>

  </ol><hr><p id=media-playback>When a <a href=#media-element>media element</a> is
  <a href=#potentially-playing>potentially playing</a> and its <code><a href=#document>Document</a></code> is a
  <a href=#fully-active>fully active</a> <code><a href=#document>Document</a></code>, its <a href=#current-playback-position>current
  playback position</a> must increase monotonically at <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> units of media
  time per unit time of wall clock time.</p>

  <p class=note>This specification doesn't define how the user agent
  achieves the appropriate playback rate &mdash; depending on the
  protocol and media available, it is plausible that the user agent
  could negotiate with the server to have the server provide the media
  data at the appropriate rate, so that (except for the period between
  when the rate is changed and when the server updates the stream's
  playback rate) the client doesn't actually have to drop or
  interpolate any frames.</p>

  <p>When the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>
  is negative (playback is backwards), any corresponding audio must be
  muted. When the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> is so low or so
  high that the user agent cannot play audio usefully, the
  corresponding audio must also be muted. If the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> is not 1.0, the
  user agent may apply pitch adjustments to the audio as necessary to
  render it faithfully.</p>

  <p>The <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> can
  be 0.0, in which case the <a href=#current-playback-position>current playback position</a>
  doesn't move, despite playback not being paused (<code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> doesn't become true, and the
  <code title=event-media-pause><a href=#event-media-pause>pause</a></code> event doesn't fire).</p>

  <p><a href=#media-element title="media element">Media elements</a> that are
  <a href=#potentially-playing>potentially playing</a> while not <a href=#in-a-document>in a
  <code>Document</code></a> must not play any video, but should
  play any audio component. Media elements must not stop playing just
  because all references to them have been removed; only once a media
  element to which no references exist has reached a point where no
  further audio remains to be played for that element (e.g. because
  the element is paused, or because the end of the clip has been
  reached, or because its <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> is 0.0) may the
  element be garbage collected.</p>

  <hr><p>When the <a href=#current-playback-position>current playback position</a> of a <a href=#media-element>media
  element</a> changes (e.g. due to playback or seeking), the user
  agent must run the following steps. If the <a href=#current-playback-position>current playback
  position</a> changes while the steps are running, then the user
  agent must wait for the steps to complete, and then must immediately
  rerun the steps. (These steps are thus run as often as possible or
  needed &mdash; if one iteration takes a long time, this can cause
  certain ranges to be skipped over as the user agent rushes ahead to
  "catch up".)</p>

  <ol><!--XXXTT - the text below is wrong, but we need to do something similar, updating the timed tracks, pausing if necessary (more below)
   <li><p>Let <var title="">current ranges</var> be an ordered list of
   <span title="cue range">cue ranges</span>, initialized to contain
   all the <span title="cue range">cue ranges</span> of the
   <span>media element</span> whose start times are less than or equal
   to the <span>current playback position</span> and whose end times
   are greater than the <span>current playback position</span>, in the
   order they were added to the element.</p></li>

   <li><p>Let <var title="">other ranges</var> be an ordered list of
   <span title="cue range">cue ranges</span>, initialized to contain
   all the <span title="cue range">cue ranges</span> of the
   <span>media element</span> that are not present in <var
   title="">current ranges</var>, in the order they were added to the
   element.</p></li>
--><li><p>If the time was reached through the usual monotonic increase
   of the current playback position during normal playback, and if the
   user agent has not fired a <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> event at the
   element in the past 15 to 250ms and is not still running event
   handlers for such an event, then the user agent must <a href=#queue-a-task>queue a
   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the
   element. (In the other cases, such as explicit seeks, relevant
   events get fired as part of the overall process of changing the
   current playback position.)</p>

   <p class=note>The event thus is not to be fired faster than about
   66Hz or slower than 4Hz (assuming the event handlers don't take
   longer than 250ms to run). User agents are encouraged to vary the
   frequency of the event based on the system load and the average
   cost of processing the event each time, so that the UI updates are
   not any more frequent than the user agent can comfortably handle
   while decoding the video.</li>

<!--XXXTT [beware - - nested comments]
   <li><p>If none of the <span title="cue range">cue ranges</span> in
   <var title="">current ranges</var> have their "active" boolean set
   to "false" (inactive) and none of the <span title="cue range">cue
   ranges</span> in <var title="">other ranges</var> have their
   "active" boolean set to "true" (active), then abort these
   steps.</p></li>

   <li><p>If the time was reached through the usual monotonic increase
   of the current playback position during normal playback, and there
   are <span title="cue range">cue ranges</span> in <var
   title="">other ranges</var> that have both their "active" boolean
   and their "pause" boolean set to "true", then immediately act as if
   the element's <code title="dom-media-pause">pause()</code> method
   had been invoked. <!- - pause() can in theory call load(), but never
   can it do so as part of this invokation, since we wouldn't be in
   this algorithm if the media element was empty. So, no need to couch
   all this in a task. - -> (In the other cases, such as explicit
   seeks, playback is not paused by exiting a cue range, even if that
   cue range has its "pause" boolean set to "true".)</p></li>

   <li><p>For each non-null "exit" callback of the <span
   title="cue range">cue ranges</span> in <var title="">other
   ranges</var> that have their "active" boolean set to "true"
   (active), in list order, <span>queue a task</span> that invokes the
   callback, passing the cue range's identifier as the callback's only
   argument.</p></li>

   <li><p>For each non-null "enter" callback of the <span title="cue
   range">cue ranges</span> in <var title="">current ranges</var> that
   have their "active" boolean set to "false" (inactive), in list
   order, <span>queue a task</span> that invokes the callback, passing
   the cue range's identifier as the callback's only
   argument.</p></li>

   <li><p>Set the "active" boolean of all the <span title="cue
   range">cue ranges</span> in the <var title="">current ranges</var>
   list to "true" (active), and the "active" boolean of all the <span
   title="cue range">cue ranges</span> in the <var title="">other
   ranges</var> list to "false" (inactive).</p></li>
-->
  </ol><p>When a <a href=#media-element>media element</a> is <a href=#remove-an-element-from-a-document title="remove an
  element from a document">removed from a
  <code>Document</code></a>, if the <a href=#media-element>media element</a>'s
  <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute
  has a value other than <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> then the user
  agent must act as if the <code title=dom-media-pause><a href=#dom-media-pause>pause()</a></code> method had been invoked.</p>

  <p class=note>If the <a href=#media-element>media element</a>'s
  <code><a href=#document>Document</a></code> stops being a <a href=#fully-active>fully active</a>
  document, then the playback will <a href=#media-playback>stop</a>
  until the document is active again.</p>

  </div>



  <h5 id=seeking><span class=secno>4.8.10.9 </span>Seeking</h5>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>

   <dd>

    <p>Returns true if the user agent is currently seeking.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code></dt>

   <dd>

    <p>Returns a <code><a href=#timeranges>TimeRanges</a></code> object that represents the
    ranges of the <a href=#media-resource>media resource</a> to which it is possible
    for the user agent to seek.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-media-seeking title=dom-media-seeking><code>seeking</code></dfn>
  attribute must initially have the value false.</p>

  <p>When the user agent is required to <dfn id=dom-media-seek title=dom-media-seek>seek</dfn> to a particular <var title="">new
  playback position</var> in the <a href=#media-resource>media resource</a>, it means
  that the user agent must run the following steps. This algorithm
  interacts closely with the <a href=#event-loop>event loop</a> mechanism; in
  particular, it has a <a href=#synchronous-section>synchronous
  section</a> (which is triggered as part of the <a href=#event-loop>event
  loop</a> algorithm). Steps in that section are marked with
  &#8987;.</p>

  <ol><li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, then raise an
   <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception (if the seek was in
   response to a DOM method call or setting of an IDL attribute), and
   abort these steps.</li>

   <li><p>If the element's <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute is true,
   then another instance of this algorithm is already running. Abort
   that other instance of the algorithm without waiting for the step
   that it is running to complete.</li>

   <li><p>Set the <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL
   attribute to true.</li>

   <li id=seekUpdate><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a
   simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the
   element.</li>

   <li><p>If the seek was in response to a DOM method call or setting
   of an IDL attribute, then continue the script. The remainder of
   these steps must be run asynchronously. With the exception of the
   steps marked with &#8987;, they could be aborted at any time by
   another instance of this algorithm being invoked.</li>

   <li><p>If the <var title="">new playback position</var> is later
   than the end of the <a href=#media-resource>media resource</a>, then let it be the
   end of the <a href=#media-resource>media resource</a> instead.</li>

   <li><p>If the <var title="">new playback position</var> is less
   than the <a href=#earliest-possible-position>earliest possible position</a>, let it be that
   position instead.</li>

   <li><p>If the (possibly now changed) <var title="">new playback
   position</var> is not in one of the ranges given in the <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute, then let it
   be the position in one of the ranges given in the <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute that is the
   nearest to the <var title="">new playback position</var>. If two
   positions both satisfy that constraint (i.e. the <var title="">new
   playback position</var> is exactly in the middle between two ranges
   in the <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute)
   then use the position that is closest to the <a href=#current-playback-position>current playback
   position</a>. If there are no ranges given in the <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute then set the
   <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute to
   false and abort these steps.</li>

   <li><p>Set the <a href=#current-playback-position>current playback position</a> to the given
   <var title="">new playback position</var>.</li>

   <li><p>If the <a href=#media-element>media element</a> was <a href=#potentially-playing>potentially
   playing</a> immediately before it started seeking, but seeking
   caused its <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
   attribute to change to a value lower than <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>, then
   <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named
   <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> at the
   element.</li>

   <li><p>If, when it reaches this step, the user agent has still not
   established whether or not the <a href=#media-data>media data</a> for the <var title="">new playback position</var> is available, and, if it is,
   decoded enough data to play back that position, then <a href=#queue-a-task>queue a
   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-seeking><a href=#event-media-seeking>seeking</a></code> at the element.</li>

   <li><p>Wait until it has established whether or not the <a href=#media-data>media
   data</a> for the <var title="">new playback position</var> is
   available, and, if it is, until it has decoded enough data to play
   back that position.</li>

   <li><p><a href=#await-a-stable-state>Await a stable state</a>. The <a href=#synchronous-section>synchronous
   section</a> consists of all the remaining steps of this
   algorithm. (Steps in the <a href=#synchronous-section>synchronous section</a> are
   marked with &#8987;.)</li>

   <li><p>&#8987; Set the <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute to
   false.</li>

   <li><p>&#8987; <a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   event</a> named <code title=event-media-seeked><a href=#event-media-seeked>seeked</a></code>
   at the element.</li>

  </ol><p>The <dfn id=dom-media-seekable title=dom-media-seekable><code>seekable</code></dfn>
  attribute must return a new static <a href=#normalized-timeranges-object>normalized
  <code>TimeRanges</code> object</a> that represents the ranges of
  the <a href=#media-resource>media resource</a>, if any, that the user agent is able
  to seek to, at the time the attribute is evaluated.</p>

  <p class=note>If the user agent can seek to anywhere in the
  <a href=#media-resource>media resource</a>, e.g. because it a simple movie file and
  the user agent and the server support HTTP Range requests, then the
  attribute would return an object with one range, whose start is the
  time of the first frame (typically zero), and whose end is the same
  as the time of the first frame plus the <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute's value (which
  would equal the time of the last frame).</p>

  <p class=note>The range might be continuously changing, e.g. if
  the user agent is buffering a sliding window on an infinite
  stream. This is the behavior seen with DVRs viewing live TV, for
  instance.</p>

  <p><a href=#media-resource title="media resource">Media resources</a> might be
  internally scripted or interactive. Thus, a <a href=#media-element>media
  element</a> could play in a non-linear fashion. If this happens,
  the user agent must act as if the algorithm for <a href=#dom-media-seek title=dom-media-seek>seeking</a> was used whenever the
  <a href=#current-playback-position>current playback position</a> changes in a discontinuous
  fashion (so that the relevant events fire).</p>

  </div>


<!--TT-->
  <h5 id=timed-tracks><span class=secno>4.8.10.10 </span>Timed tracks</h5>

  <h6 id=timed-track-model><span class=secno>4.8.10.10.1 </span>Timed track model</h6>

  <p>A <a href=#media-element>media element</a> can have a group of associated <dfn id=timed-track title="timed track">timed tracks</dfn>, known as the <a href=#media-element>media
  element</a>'s <dfn id=list-of-timed-tracks>list of timed tracks</dfn>. The <a href=#timed-track title="timed track">timed tracks</a> are sorted as follows:</p>

  <ol class=brief><li>The <a href=#timed-track title="timed track">timed tracks</a> corresponding
   to <code><a href=#the-track-element>track</a></code> element children of the <a href=#media-element>media
   element</a>, in <a href=#tree-order>tree order</a>.</li>

   <li>Any <a href=#timed-track title="timed track">timed tracks</a> added using
   the <code title=dom-media-addTrack>addTrack()</code> method, in
   the order they were added, oldest first.</li>

   <li>Any <a href=#media-resource-specific-timed-track title="media-resource-specific timed
   track">media-resource-specific timed tracks</a> (<a href=#timed-track title="timed track">timed tracks</a> corresponding to data in
   the <a href=#media-resource>media resource</a>), in the order defined by the
   <a href=#media-resource>media resource</a>'s format specification.</li>

  </ol><p>A <a href=#timed-track>timed track</a> consists of:</p>

  <dl><dt><dfn id=timed-track-kind title="timed track kind">The kind of timed track</dfn>

   <dd>

    <p>This decides how the track is handled by the user agent. The
    kind is represented by a string. The possible strings are:</p>

    <ul class=brief><li><dfn id=dom-timedtrack-kind-subtitles title=dom-TimedTrack-kind-subtitles><code>subtitles</code></dfn>
     <li><dfn id=dom-timedtrack-kind-captions title=dom-TimedTrack-kind-captions><code>captions</code></dfn>
     <li><dfn id=dom-timedtrack-kind-descriptions title=dom-TimedTrack-kind-descriptions><code>descriptions</code></dfn>
     <li><dfn id=dom-timedtrack-kind-chapters title=dom-TimedTrack-kind-chapters><code>chapters</code></dfn>
     <li><dfn id=dom-timedtrack-kind-metadata title=dom-TimedTrack-kind-metadata><code>metadata</code></dfn>
    </ul><p>The <a href=#timed-track-kind title="timed track kind">kind of track</a> can
    change dynamically, in the case of a <a href=#timed-track>timed track</a>
    corresponding to a <code><a href=#the-track-element>track</a></code> element.</p>

   </dd>

   <dt><dfn id=timed-track-label title="timed track label">A label</dfn>

   <dd>

    <p>This is a human-readable string intended to identify the track
    for the user. In certain cases, the label might be generated
    automatically.</p>

    <p>The <a href=#timed-track-label title="timed track label">label of a track</a> can
    change dynamically, in the case of a <a href=#timed-track>timed track</a>
    corresponding to a <code><a href=#the-track-element>track</a></code> element or in the case of an
    automatically-generated label whose value depends on variable
    factors such as the user's preferred user interface language.</p>

   </dd>

   <dt><dfn id=timed-track-language title="timed track language">A language</dfn>

   <dd>

    <p>This is a string (a BCP 47 language tag) representing the
    language of the timed track's cues. <a href=#refsBCP47>[BCP47]</a></p>

    <p>The <a href=#timed-track-language title="timed track language">language of a timed
    track</a> can change dynamically, in the case of a <a href=#timed-track>timed
    track</a> corresponding to a <code><a href=#the-track-element>track</a></code> element.</p>

   </dd>

   <dt><dfn id=timed-track-readiness-state title="timed track readiness state">A readiness state</dfn>

   <dd>

    <p>One of the following:</p>

    <dl><dt><dfn id=timed-track-not-loaded title="timed track not loaded">Not loaded</dfn>

     <dd>

      <p>Indicates that the timed track is known to exist (e.g. it has
      been declared with a <code><a href=#the-track-element>track</a></code> element), but its cues
      have not been obtained.</p>

     </dd>

     <dt><dfn id=timed-track-loading title="timed track loading">Loading</dfn>

     <dd>

      <p>Indicates that the timed track is loading and there have been
      no fatal errors encountered so far. Further cues might still be
      added to the track.</p>

     </dd>

     <dt><dfn id=timed-track-loaded title="timed track loaded">Loaded</dfn>

     <dd>

      <p>Indicates that the timed track has been loaded with no fatal
      errors. No new cues will be added to the track except if the
      <a href=#timed-track>timed track</a> corresponds to a
      <code><a href=#mutabletimedtrack>MutableTimedTrack</a></code> object.</p>

     </dd>

     <dt><dfn id=timed-track-failed-to-load title="timed track failed to load">Failed to load</dfn>

     <dd>

      <p>Indicates that the timed track was enabled, but when the user
      agent attempted to obtain it, this failed in some way
      (e.g. <a href=#url>URL</a> could not be <a href=#resolve-a-url title="resolve a
      url">resolved</a>, network error, unknown timed track
      format). Some or all of the cues are likely missing and will not
      be obtained.</p>

     </dd>

    </dl><p>The <a href=#timed-track-readiness-state title="timed track readiness state">readiness
    state</a> of a <a href=#timed-track>timed track</a> changes dynamically as
    the track is obtained.</p>

   </dd>

   <dt><dfn id=timed-track-mode title="timed track mode">A mode</dfn>

   <dd>

    <p>One of the following:</p>

    <dl><dt><dfn id=timed-track-disabled title="timed track disabled">Disabled</dfn>

     <dd>

      <p>Indicates that the timed track is not active. Other than for
      the purposes of exposing the track in the DOM, the user agent is
      ignoring the timed track. No cues are active, no events are
      fired, and the user agent will not attempt to obtain the track's
      cues.</p>

     </dd>

     <dt><dfn id=timed-track-hidden title="timed track hidden">Hidden</dfn>

     <dd>

      <p>Indicates that the timed track is active, but that the user
      agent is not actively displaying the cues. If no attempt has yet
      been made to obtain the track's cues, the user will perform such
      an attempt momentarily. The user agent is maintaining a list of
      which cues are active, and events are being fired
      accordingly.</p>

     </dd>

     <dt><dfn id=timed-track-showing title="timed track showing">Showing</dfn>

     <dd>

      <p>Indicates that the timed track is active. If no attempt has
      yet been made to obtain the track's cues, the user will perform
      such an attempt momentarily. The user agent is maintaining a
      list of which cues are active, and events are being fired
      accordingly. In addition, for timed tracks whose <a href=#timed-track-kind title="timed track kind">kind</a> is <code title=dom-mediatrack-kind-subtitles>subtitles</code> or <code title=dom-mediatrack-kind-captions>captions</code>, the cues
      are being displayed over the video as appropriate; for timed
      tracks whose <a href=#timed-track-kind title="timed track kind">kind</a> is <code title=dom-mediatrack-kind-descriptions>descriptions</code>,
      the user agent is making the cues available to the user in a
      non-visual fashion; and for timed tracks whose <a href=#timed-track-kind title="timed track kind">kind</a> is <code title=dom-mediatrack-kind-chapters>chapters</code>, the user
      agent is making available to the user a mechanism by which the
      user can navigate to any point in the <a href=#media-resource>media
      resource</a> by selecting a cue.</p>

     </dd>

    </dl></dd>

   <dt><dfn id=timed-track-list-of-cues title="timed track list of cues">A list of zero or more cues</dfn>

   <dd>

    <p>A list of <a href=#timed-track-cue title="timed track cue">timed track cues</a>.</p>

    <p>The <a href=#timed-track-list-of-cues title="timed track list of cues">list of cues of a
    timed track</a> can change dynamically, either because the
    <a href=#timed-track>timed track</a> has <a href=#timed-track-not-loaded title="timed track not
    loaded">not yet been loaded</a> or is still <a href=#timed-track-loading title="timed
    track loading">loading</a>, or in the case of a <a href=#timed-track>timed
    track</a> corresponding to a <code><a href=#mutabletimedtrack>MutableTimedTrack</a></code>
    object, where individual cues can be added or removed
    dynamically using the API.</p>

   </dd>

  </dl><p>Each <a href=#timed-track>timed track</a> has a corresponding
  <code><a href=#timedtrack>TimedTrack</a></code> object.</p>

  <p>A <dfn id=timed-track-cue>timed track cue</dfn> is the unit of time-sensitive data
  in a <a href=#timed-track>timed track</a>, corresponding for instance for
  subtitles and captions to the text that appears at a particular time
  and disappears at another time.</p>

  <p>Each <a href=#timed-track-cue>timed track cue</a> consists of:</p>

  <dl><dt><dfn id=timed-track-cue-identifier title="timed track cue identifier">An identifier</dfn>
   <dd>
    <p>An arbitrary string.</p>
   </dd>

   <dt><dfn id=timed-track-cue-start-time title="timed track cue start time">A start time</dfn>
   <dd>
    <p>A time, in seconds and fractions of a second, at which the cue
    becomes relevant.</p>
   </dd>

   <dt><dfn id=timed-track-cue-end-time title="timed track cue end time">An end time</dfn>
   <dd>
    <p>A time, in seconds and fractions of a second, at which the cue
    stops being relevant.</p>
   </dd>

   <dt><dfn id=timed-track-cue-pause-on-exit-flag title="timed track cue pause-on-exit flag">A pause-on-exit flag</dfn>
   <dd>
    <p>A boolean indicating whether playback of the <a href=#media-resource>media
    resource</a> is to pause when the cue stops being relevant.</p>
   </dd>

   <dt><dfn id=timed-track-cue-writing-direction title="timed track cue writing direction">A writing direction</dfn>
   <dd>
    <p>A writing direction, either <dfn id=timed-track-cue-horizontal-writing-direction title="timed track cue
    horizontal writing direction">horizontal</dfn> (a line extends
    horizontally and is positioned vertically, with consecutive lines
    displayed below each other), <dfn id=timed-track-cue-vertical-growing-right-writing-direction title="timed track cue vertical
    growing right writing direction">vertical growing right</dfn> (a
    line extends vertically and is positioned horizontally, with
    consecutive lines displayed to the right of each other<!-- used
    for east asian-->), or <dfn id=timed-track-cue-vertical-growing-left-writing-direction title="timed track cue vertical
    growing left writing direction">vertical growing left</dfn> (a
    line extends vertically and is positioned horizontally, with
    consecutive lines displayed to the left of each other<!-- used for
    mongolian -->).</p>
   </dd>

   <dt><dfn id=timed-track-cue-snap-to-lines-flag title="timed track cue snap-to-lines flag">A snap-to-lines flag</dfn>
   <dd>
    <p>A boolean indicating whether the <a href=#timed-track-cue-line-position title="timed track cue
    line position">line's position</a> is a line position
    (positioned to a multiple of the line dimensions of the first line
    of the cue), or whether it is a percentage of the dimension of the
    video.</p>
   </dd>

   <dt><dfn id=timed-track-cue-line-position title="timed track cue line position">A line position</dfn>
   <dd>
    <p>A number giving the position of the lines of the cue, to be
    interpreted as defined by the <a href=#timed-track-cue-writing-direction title="timed track cue writing
    direction">writing direction</a> and <a href=#timed-track-cue-snap-to-lines-flag title="timed track
    cue snap-to-lines flag">snap-to-lines flag</a> of the cue.</p>
   </dd>

   <dt><dfn id=timed-track-cue-text-position title="timed track cue text position">A text position</dfn>
   <dd>
    <p>A number giving the position of the text of the cue within each
    line, to be interpreted as a percentage of the video, as defined
    by the <a href=#timed-track-cue-writing-direction title="timed track cue writing direction">writing
    direction</a>.</p>
   </dd>

   <dt><dfn id=timed-track-cue-size title="timed track cue size">A size</dfn>
   <dd>
    <p>A number giving the size of the box within which the text of
    each line of the cue is to be aligned, to be interpreted as a
    percentage of the video, as defined by the <a href=#timed-track-cue-writing-direction title="timed
    track cue writing direction">writing direction</a>.</p>
   </dd>

   <dt><dfn id=timed-track-cue-alignment title="timed track cue alignment">An alignment</dfn>
   <dd>
    <p>An alignment for the text of each line of the cue, either <dfn id=timed-track-cue-start-alignment title="timed track cue start alignment">start alignment</dfn> (the
    text is aligned towards its start side), <dfn id=timed-track-cue-middle-alignment title="timed track
    cue middle alignment">middle alignment</dfn> (the text is aligned
    centered between its start and end sides), <dfn id=timed-track-cue-end-alignment title="timed track
    cue end alignment">end alignment</dfn> (the text is aligned
    towards its end side). Which sides are the start and end sides
    depends on the Unicode bidirectional algorithm and the <a href=#timed-track-cue-writing-direction title="timed track cue writing direction">writing
    direction</a>. <a href=#refsBIDI>[BIDI]</a></p>
   </dd>

   <dt><dfn id=timed-track-cue-voice-identifier title="timed track cue voice identifier">A voice identifier</dfn>
   <dd>
    <p>A string identifying the voice with which the cue is associated.</p>
   </dd>

   <dt><dfn id=timed-track-cue-text title="timed track cue text">The text of the cue</dfn>
   <dd>
    <p>The raw text of the cue, and rules for its interpretation,
    allowing the text to be converted to an equivalent fragment of
    HTML.</p>
   </dd>

  </dl><p>A <a href=#timed-track-cue>timed track cue</a> is immutable.</p>

  <p>Each <a href=#timed-track-cue>timed track cue</a> has a corresponding
  <code><a href=#timedtrackcue>TimedTrackCue</a></code> object, and can be associated with a
  particular <a href=#timed-track>timed track</a>. Once a <a href=#timed-track-cue>timed track
  cue</a> is associated with a particular <a href=#timed-track>timed track</a>,
  the association is permanent.</p>

  <p>The <a href=#timed-track title="timed track">timed tracks</a> of a
  <a href=#media-element>media element</a> are <dfn id=the-timed-tracks-are-ready title="the timed tracks are
  ready">ready</dfn> if all the <a href=#timed-track title="timed track">timed
  tracks</a> whose <a href=#timed-track-mode title="timed track mode">mode</a> was
  not in the <a href=#timed-track-disabled title="timed track disabled">disabled</a> state
  when the element's <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
  algorithm</a> last started now have a <a href=#timed-track-readiness-state>timed track readiness
  state</a> of <a href=#timed-track-loaded title="timed track loaded">loaded</a> or
  <a href=#timed-track-failed-to-load title="timed track failed to load">failed to load</a>.</p>


  <h6 id=sourcing-in-band-timed-tracks><span class=secno>4.8.10.10.2 </span>Sourcing in-band timed tracks</h6>

  <p>A <dfn id=media-resource-specific-timed-track>media-resource-specific timed track</dfn> is a <a href=#timed-track>timed
  track</a> that corresponds to data found in the <a href=#media-resource>media
  resource</a>.</p>


  <div class=impl>

  <p>Rules for processing and rendering such data are defined by the
  relevant specifications, e.g. the specification of the video format
  if the <a href=#media-resource>media resource</a> is a video.</p>

  <p>When a <a href=#media-resource>media resource</a> contains data that the user
  agent recognises and supports as being equivalent to a <a href=#timed-track>timed
  track</a>, the user agent <a href=#found-a-media-resource-specific-timed-track>runs</a> the
  <dfn id=steps-to-expose-a-media-resource-specific-timed-track>steps to expose a media-resource-specific timed track</dfn>
  with the relevant data, as follows:</p>

  <ol><li><p>Associate the relevant data with a new <a href=#timed-track>timed
   track</a> and its corresponding new <code><a href=#timedtrack>TimedTrack</a></code>
   object. The <a href=#timed-track>timed track</a> is a
   <a href=#media-resource-specific-timed-track>media-resource-specific timed track</a>.</li>

   <li><p>Set the new <a href=#timed-track>timed track</a>'s <a href=#timed-track-kind title="timed track
   kind">kind</a>, <a href=#timed-track-label title="timed track label">label</a>,
   and <a href=#timed-track-language title="timed track language">language</a> based on the
   semantics of the relevant data, as defined by the relevant
   specification.</li>

   <li><p>Populate the new <a href=#timed-track>timed track</a>'s <a href=#timed-track-list-of-cues title="timed track list of cues">list of cues</a> with the cues
   parsed so far, folllowing the <a href=#guidelines-for-exposing-cues-in-various-formats-as-timed-track-cues>guidelines for exposing
   cues</a>, and begin updating it dynamically as
   necessary.</li>

   <li>

    <p>Set the new <a href=#timed-track>timed track</a>'s <a href=#timed-track-readiness-state title="timed track
    readiness state">readiness state</a> to the value that most
    correctly describes the current state, and begin updating it
    dynamically as necessary.</p>

    <p class=example>For example, if the relevant data in the
    <a href=#media-resource>media resource</a> has been fully parsed and completely
    describes the cues, then the <a href=#timed-track>timed track</a> would be
    <a href=#timed-track-loaded title="timed track loaded">loaded</a>. On the other hand,
    if the data for the cues is interleaved with the <a href=#media-data>media
    data</a>, and the <a href=#media-resource>media resource</a> as a whole is
    still being downloaded, then the <a href=#timed-track-loading title="timed track
    loading">loading</a> state might be more accurate.</p>

   </li>

   <li><p>Set the new <a href=#timed-track>timed track</a>'s <a href=#timed-track-mode title="timed
   track mode">mode</a> to the mode consistent with the user's
   preferences and the requirements of the relevant specification for
   the data.</li>

   <li><p>Add the new <a href=#timed-track>timed track</a> to the <a href=#media-element>media
   element</a>'s <a href=#list-of-timed-tracks>list of timed tracks</a>.</li>

  </ol><p>When a <a href=#media-element>media element</a> is to <dfn id="forget-the-media-element's-media-resource-specific-timed-tracks">forget the media
  element's media-resource-specific timed tracks</dfn>, the user
  agent must remove from the <a href=#media-element>media element</a>'s <a href=#list-of-timed-tracks>list
  of timed tracks</a> all the <a href=#media-resource-specific-timed-track title="media-resource-specific
  timed track">media-resource-specific timed tracks</a>.</p>

  </div>



  <div class=impl>

  <h6 id=sourcing-out-of-band-timed-tracks><span class=secno>4.8.10.10.3 </span>Sourcing out-of-band timed tracks</h6>

  <p>When a <code><a href=#the-track-element>track</a></code> element is created, it must be
  associated with a new <a href=#timed-track>timed track</a> and its corresponding
  new <code><a href=#timedtrack>TimedTrack</a></code> object.</p>

  <p>The <a href=#timed-track-kind>timed track kind</a> is determined from the state of
  the element's <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attribute
  according to the following table; for a state given in a cell of the
  first column, the <a href=#timed-track-kind title="timed track kind">kind</a> is the
  string given in the second column:</p>

  <table><thead><tr><th>State
     <th>String
   <tbody><tr><td><a href=#attr-track-kind-subtitles title=attr-track-kind-subtitles>Subtitles</a>
     <td><code title=dom-track-kind-subtitles>subtitles</code>
    <tr><td><a href=#attr-track-kind-captions title=attr-track-kind-captions>Captions</a>
     <td><code title=dom-track-kind-captions>captions</code>
    <tr><td><a href=#attr-track-kind-descriptions title=attr-track-kind-descriptions>Descriptions</a>
     <td><code title=dom-track-kind-descriptions>descriptions</code>
    <tr><td><a href=#attr-track-kind-chapters title=attr-track-kind-chapters>Chapters</a>
     <td><code title=dom-track-kind-chapters>chapters</code>
    <tr><td><a href=#attr-track-kind-metadata title=attr-track-kind-metadata>Metadata</a>
     <td><code title=dom-track-kind-metadata>metadata</code>
  </table><p>The <a href=#timed-track-label>timed track label</a> is the element's <a href=#track-label>track
  label</a>.</p>

  <p>The <a href=#timed-track-language>timed track language</a> is the element's
  <a href=#track-language>track language</a>, if any, or the empty string
  otherwise.</p>

  <p>As the <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code>, <code title=attr-track-label><a href=#attr-track-label>label</a></code>, and <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code> attributes are added,
  removed, or changed, the <a href=#timed-track>timed track</a> must update
  accordingly, as per the definitions above.</p>

  <p class=note>Changes to the <a href=#track-url>track URL</a> are handled in
  the algorithm below.</p>

  <p class=XXX>...cues...</p>

  <p>When a <code><a href=#the-track-element>track</a></code> element's parent element changes and
  the new parent is a <a href=#media-element>media element</a>, then add the
  <code><a href=#the-track-element>track</a></code> element's corresponding <a href=#timed-track>timed track</a>
  to the <a href=#media-element>media element</a>'s <a href=#list-of-timed-tracks>list of timed
  tracks</a>.</p>

  <p>When a <code><a href=#the-track-element>track</a></code> element's parent element changes and
  the old parent was a <a href=#media-element>media element</a>, then remove the
  <code><a href=#the-track-element>track</a></code> element's corresponding <a href=#timed-track>timed track</a>
  from the <a href=#media-element>media element</a>'s <a href=#list-of-timed-tracks>list of timed
  tracks</a>.</p>

  <p>When a <a href=#timed-track>timed track</a> corresponding to a
  <code><a href=#the-track-element>track</a></code> element is added to a <a href=#media-element>media
  element</a>'s <a href=#list-of-timed-tracks>list of timed tracks</a>, <span class=XXX>update the mode appropriately</span>.</p>

  <p>When a <a href=#timed-track>timed track</a> corresponding to a
  <code><a href=#the-track-element>track</a></code> element is created with <a href=#timed-track-mode>timed track
  mode</a> set to <a href=#timed-track-hidden title="timed track hidden">hidden</a> or
  <a href=#timed-track-showing title="timed track showing">showing</a>, and when a
  <a href=#timed-track>timed track</a> corresponding to a <code><a href=#the-track-element>track</a></code>
  element is created with <a href=#timed-track-mode>timed track mode</a> set to <a href=#timed-track-disabled title="timed track disabled">disabled</a> and subsequently
  changes its <a href=#timed-track-mode>timed track mode</a> to <a href=#timed-track-hidden title="timed
  track hidden">hidden</a> or <a href=#timed-track-showing title="timed track
  showing">showing</a> for the first time, the user agent must
  immediately and synchronously run the 
  following steps:</p>

  <ol><li><p>Set the <a href=#timed-track-readiness-state>timed track readiness state</a> to <a href=#timed-track-loading title="timed track loading">loading</a>.</li>

   <li><p>Let <var title="">URL</var> be the <a href=#track-url>track URL</a> of
   the <code><a href=#the-track-element>track</a></code> element.</li>

   <li><p>Asynchronously run the remaining steps, while continuing
   with whatever task was responsible for creating the <a href=#timed-track>timed
   track</a> or changing the <a href=#timed-track-mode>timed track
   mode</a>.</li>

   <li>

    <p><i>Download</i>: <a href=#fetch>Fetch</a> <var title="">URL</var>, if
    it isn't the empty string.</p><!-- http-origin privacy sensitive
    -->

    <p>The <a href=#concept-task title=concept-task>tasks</a> <a href=#queue-a-task title="queue
    a task">queued</a> by the <a href=#fetch title=fetch>fetching
    algorithm</a> on the <a href=#networking-task-source>networking task source</a> to
    process the data as it is being fetched must <span class=XXX>...this is where cross-origin checks go</span>.</p>

    <p>If the <a href=#fetch title=fetch>fetching algorithm</a> fails for
    any reason (network error, the server returns an error code, the
    cross-origin checks mentioned above fail, etc), or if <var title="">URL</var> is the empty string, then <a href=#queue-a-task>queue a
    task</a> to first change the <a href=#timed-track-readiness-state>timed track readiness state</a>
    to <a href=#timed-track-failed-to-load title="timed track failed to load">failed to load</a>
    and then <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <code><a href=#the-track-element>track</a></code>
    element; and then, once that <a href=#concept-task title=concept-task>task</a> is <a href=#queue-a-task title="queue a
    task">queued</a>, move on to the step below labeled
    <i>monitoring</i>.</p>

    <p>If the <a href=#fetch title=fetch>fetching algorithm</a> does not
    fail, then, when it completes, <a href=#queue-a-task>queue a task</a> to first
    change the <a href=#timed-track-readiness-state>timed track readiness state</a> to <a href=#timed-track-loaded title="timed track loaded">loaded</a> and then <a href=#fire-a-simple-event>fire a
    simple event</a> named <code title=event-load>load</code> at
    the <code><a href=#the-track-element>track</a></code> element; and then, once that <a href=#concept-task title=concept-task>task</a> is <a href=#queue-a-task title="queue a
    task">queued</a>, move on to the step below labeled
    <i>monitoring</i>.</p>

    <p>If, while the <a href=#fetch title=fetch>fetching algorithm</a> is
    active, either:</p>

    <ul><li>the <a href=#track-url>track URL</a> changes so that it is no longer
     equal to <var title="">URL</var>, while the <a href=#timed-track-mode>timed track
     mode</a> is set to <a href=#timed-track-hidden title="timed track
     hidden">hidden</a> or <a href=#timed-track-showing title="timed track
     showing">showing</a>; or</li>

     <li>the <a href=#timed-track-mode>timed track mode</a> changes to <a href=#timed-track-hidden title="timed track hidden">hidden</a> or <a href=#timed-track-showing title="timed
     track showing">showing</a>, while the <a href=#track-url>track URL</a> is
     not equal to <var title="">URL</var></li>

    </ul><p>...then the user agent must run the following steps:</p>

    <ol><li><p>Abort the <a href=#fetch title=fetch>fetching
     algorithm</a>.</li>

     <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
     event</a> named <code title=event-abort>abort</code> at
     the <code><a href=#the-track-element>track</a></code> element.</li>

     <li><p>Let <var title="">URL</var> be the new <a href=#track-url>track
     URL</a>.</li>

     <li><p>Jump back to the top of the step labeled
     <i>download</i>.</li>

    </ol></li>

   <li><p><i>Monitoring</i>: Wait until the <a href=#track-url>track URL</a> is
   no longer equal to <var title="">URL</var>, at the same time as the
   <a href=#timed-track-mode>timed track mode</a> is set to <a href=#timed-track-hidden title="timed track
   hidden">hidden</a> or <a href=#timed-track-showing title="timed track
   showing">showing</a>.</li>

   <li><p>Jump to the step labeled <i>download</i>.</li>

  </ol></div>


  <div class=impl>

  <h6 id=guidelines-for-exposing-cues-in-various-formats-as-timed-track-cues><span class=secno>4.8.10.10.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as
  <a href=#timed-track-cue title="timed track cue">timed track cues</a></h6>

  <p class=XXX>...also, how to handle discarding cues that are
  before startTime, for cues that are in-band</p>

  </div>


  <h6 id=timed-track-api><span class=secno>4.8.10.10.5 </span>Timed track API</h6>

<!--
  // timed tracks
  readonly attribute <span>TimedTrack</span>[] <span title="dom-media-tracks">tracks</span>;
  <span>MutableTimedTrack</span> <span title="dom-media-addTrack">addTrack</span>(in DOMString label, in DOMString kind, in DOMString language);
-->

  <pre class=idl>interface <dfn id=timedtrack>TimedTrack</dfn> {
  readonly attribute DOMString <span title=dom-TimedTrack-kind>kind</span>;
  readonly attribute DOMString <span title=dom-TimedTrack-label>label</span>;
  readonly attribute DOMString <span title=dom-TimedTrack-language>language</span>;

  const unsigned short <span title=dom-TimedTrack-NONE>NONE</span> = 0;
  const unsigned short <span title=dom-TimedTrack-LOADING>LOADING</span> = 1;
  const unsigned short <span title=dom-TimedTrack-LOADED>LOADED</span> = 2;
  const unsigned short <span title=dom-TimedTrack-ERROR>ERROR</span> = 3;
  readonly attribute unsigned short <span title=dom-TimedTrack-readyState>readyState</span>;
  readonly attribute <a href=#function>Function</a> <span title=dom-TimedTrack-onload>onload</span>;
  readonly attribute <a href=#function>Function</a> <span title=dom-TimedTrack-onerror>onerror</span>;

  const unsigned short <span title=dom-TimedTrack-OFF>OFF</span> = 0;
  const unsigned short <span title=dom-TimedTrack-HIDDEN>HIDDEN</span> = 1;
  const unsigned short <span title=dom-TimedTrack-SHOWING>SHOWING</span> = 2;
           attribute unsigned short <span title=dom-TimedTrack-mode>mode</span>;

  readonly attribute <a href=#timedtrackcuelist>TimedTrackCueList</a> <span title=dom-TimedTrack-cues>cues</span>;
  readonly attribute <a href=#timedtrackcuelist>TimedTrackCueList</a> <span title=dom-TimedTrack-activeCues>activeCues</span>;
  readonly attribute <a href=#function>Function</a> <span title=dom-TimedTrack-onentercue>onentercue</span>;
  readonly attribute <a href=#function>Function</a> <span title=dom-TimedTrack-onexitcue>onexitcue</span>;
};

interface <dfn id=mutabletimedtrack>MutableTimedTrack</dfn> : <a href=#timedtrack>TimedTrack</a> {
 void <span title=dom-MutableTimedTrack-addCue>addCue</span>(in <a href=#timedtrackcue>TimedTrackCue</a> cue);
 void <span title=dom-MutableTimedTrack-removeCue>removeCue</span>(in <a href=#timedtrackcue>TimedTrackCue</a> cue);
};

interface <dfn id=timedtrackcuelist>TimedTrackCueList</dfn> {
  readonly attribute unsigned long <span title=dom-TimedTrackCueList-length>length</span>;
  getter <a href=#timedtrackcue>TimedTrackCue</a> (in unsigned long index);
  <a href=#timedtrackcue>TimedTrackCue</a> getCueById(in DOMString id);
};

[Constructor(in DOMString id, in float startTime, in float endTime, in DOMString settings, in DOMString text, in optional boolean pauseOnExit)]
interface <dfn id=timedtrackcue>TimedTrackCue</dfn> {
  readonly attribute <a href=#timedtrack>TimedTrack</a> <span title=dom-TimedTrackCue-track>track</span>;
  readonly attribute DOMString <span title=dom-TimedTrackCue-id>id</span>;

  readonly attribute float <span title=dom-TimedTrackCue-startTime>startTime</span>;
  readonly attribute float <span title=dom-TimedTrackCue-endTime>endTime</span>;
  readonly attribute boolean <span title=dom-TimedTrackCue-pauseOnExit>pauseOnExit</span>;

  readonly attribute DOMString <span title=dom-TimedTrackCue-direction>direction</span>;
  readonly attribute boolean <span title=dom-TimedTrackCue-snapToLines>snapToLines</span>;
  readonly attribute long <span title=dom-TimedTrackCue-linePosition>linePosition</span>;
  readonly attribute long <span title=dom-TimedTrackCue-textPosition>textPosition</span>;
  readonly attribute long <span title=dom-TimedTrackCue-size>size</span>;
  readonly attribute DOMString <span title=dom-TimedTrackCue-alignment>alignment</span>;

  readonly attribute DOMString <span title=dom-TimedTrackCue-voice>voice</span>;
  DOMString <span title=dom-TimedTrackCue-getCueAsSource()>getCueAsSource</span>();
  <a href=#documentfragment>DocumentFragment</a> <span title=dom-TimedTrackCue-getCueAsHTML()>getCueAsHTML</span>();
};</pre>

  <p class=XXX>domintro

  <div class=impl>

  <p class=XXX>...

  <!-- XXX
   Make sure that .cues and .activeCues doesn't change while script is
   running, except for addCue/removeCue and the removal of all cues in
   the face of a dynamic track.src change.
  -->

  </div>


  <h6 id=cue-events><span class=secno>4.8.10.10.6 </span>Event definitions</h6>

  <p class=XXX>...

<!-- XXX
CueEvent
 readonly attribute TimedTrackCue cue;
-->


  <h5 id=websrt><span class=secno>4.8.10.11 </span>WebSRT</h5>

  <p>The WebSRT format (Web Subtitle Resource Tracks) is a format
  intended for marking up external timed track resources.</p>


  <h6 id=syntax-0><span class=secno>4.8.10.11.1 </span>Syntax</h6>

  <p>A <dfn id=websrt-file>WebSRT file</dfn> must consist of a <a href=#websrt-file-body>WebSRT file
  body</a> encoded as UTF-8.</p>

  <p>A <dfn id=websrt-file-body>WebSRT file body</dfn> consists of zero or more <a href=#websrt-cue title="WebSRT cue">WebSRT cues</a> separated from each other by
  two or more <a href=#websrt-line-terminator title="WebSRT line terminator">WebSRT line
  terminators</a>.</p>

  <p>A <dfn id=websrt-cue>WebSRT cue</dfn> consists of the following components, in
  the given order:</p>

  <ol><li>Optionally, a <a href=#websrt-cue-identifier>WebSRT cue identifier</a>.</li>
   <li><a href=#websrt-cue-timings>WebSRT cue timings</a>.</li>
   <li>Optionally, <a href=#websrt-cue-settings>WebSRT cue settings</a>.</li>
   <li>A <a href=#websrt-line-terminator>WebSRT line terminator</a>.</li>
   <li>Optionally, a <a href=#websrt-voice-declaration>WebSRT voice declaration</a>.</li>
   <li>One or more <a href=#websrt-cue-text-line title="WebSRT cue text line">WebSRT cue text lines</a>, each separated from the next by a <a href=#websrt-line-terminator>WebSRT line terminator</a>.</li>
   <li>Zero or more <a href=#websrt-line-terminator title="WebSRT line terminator">WebSRT line terminators</a>.</li>
  </ol><p>A <dfn id=websrt-line-terminator>WebSRT line terminator</dfn> consists of one of the
  following:</p>

  <ul class=brief><li>A U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair.</li>
   <li>A single U+000A LINE FEED (LF) character.</li>
   <li>A single U+000D CARRIAGE RETURN (CR) character.</li>
  </ul><p>A <dfn id=websrt-cue-identifier>WebSRT cue identifier</dfn> is any sequence of one or more
  characters not containing the substring "<code title="">--&gt;</code>"
  (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN
  SIGN).</p>

  <p>The <dfn id=websrt-cue-timings>WebSRT cue timings</dfn> part of a <a href=#websrt-cue>WebSRT
  cue</a> consists of the following components, in the given
  order:</p>

  <ol><li>A <a href=#websrt-timestamp>WebSRT timestamp</a> representing the start time
   offset of the cue.</li>

   <li>Optionally, a U+0020 SPACE character.</li>

   <li>The string "<code title="">--&gt;</code>" (U+002D HYPHEN-MINUS,
   U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).</li>

   <li>Optionally, a U+0020 SPACE character.</li>

   <li>A <a href=#websrt-timestamp>WebSRT timestamp</a> representing the end time
   offset of the cue.</li>

  </ol><p>The <dfn id=websrt-cue-settings>WebSRT cue settings</dfn> part of a <a href=#websrt-cue>WebSRT
  cue</a> consists of the following components, in the given
  order:</p>

  <ol><li class=XXX>...

  </ol><p class=XXX><dfn id=websrt-voice-declaration>WebSRT voice declaration</dfn>; <dfn id=websrt-cue-text-line>WebSRT cue text line</dfn>; <dfn id=websrt-timestamp>WebSRT timestamp</dfn></p>


  <div class=impl>

  <h6 id=parsing-0><span class=secno>4.8.10.11.2 </span>Parsing</h6>

  <p>A <dfn id=websrt-parser>WebSRT parser</dfn>, given an input byte stream and a
  <a href=#timed-track-list-of-cues>timed track list of cues</a> <var title="">output</var>,
  must convert the bytes into a string of Unicode characters by
  interpreting them as UTF-8, and then must parse the resulting string
  according to the <a href=#websrt-parser-algorithm>WebSRT parser algorithm</a> below. A
  <a href=#websrt-parser>WebSRT parser</a>, specifically its conversion and parsing
  steps, is typically run asynchronously, with the input byte stream
  being updated incrementally as the resource is downloaded; this is
  called an <dfn id=incremental-websrt-parser>incremental WebSRT parser</dfn>.</p>

  <p>When convering the bytes into Unicode characters, bytes or
  sequences of bytes that are not valid UTF-8 sequences must be
  interpreted as a U+FFFD REPLACEMENT CHARACTER, and all U+0000 NULL
  characters must be replaced by U+FFFD REPLACEMENT CHARACTERs.</p>

  <p>The <dfn id=websrt-parser-algorithm>WebSRT parser algorithm</dfn> is as follows:</p>

  <ol><li><p>Let <var title="">input</var> be the string being
   parsed.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string. In an <a href=#incremental-websrt-parser>incremental WebSRT parser</a>, when this
   algorithm (or further algorithms that it uses) moves the <var title="">position</var> pointer, the user agent must wait until
   appropriate further characters from the byte stream have been added
   to <var title="">input</var> before moving the pointer, so that the
   algorithm never reads past the end of the <var title="">input</var>
   string. Once the byte stream has ended, and all characters have
   been added to <var title="">input</var>, then the <var title="">position</var> pointer may, when so instructed by the
   algorithms, be moved past the end of <var title="">input</var>.</li>

   <li><p><i>Cue loop</i>: <a href=#collect-a-sequence-of-characters>Collect a sequence of
   characters</a> that are either U+000D CARRIAGE RETURN (CR) or
   U+000A LINE FEED (LF) characters.</li>

   <li><p>Let <var title="">id</var> be the empty string.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
   <em>not</em> U+000D CARRIAGE RETURN (CR) or U+000A LINE FEED (LF)
   characters. Let <var title="">line</var> be those characters, if
   any.</li>

   <li><p>If <var title="">line</var> is the empty string, then jump
   to the step labeled <i>end</i>.</li>

   <li><p>If <var title="">line</var> contains the three-character
   substring "<code title="">--&gt;</code>" (U+002D HYPHEN-MINUS, U+002D
   HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then jump to the step
   labeled <i>timing</i> below.</li>

   <li><p>Let <var title="">id</var> be <var title="">line</var>.<p></li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
   <i>end</i>.</li>

   <li><p>If the character indicated by <var title="">position</var>
   is a U+000D CARRIAGE RETURN (CR) character, advance <var title="">position</var> to the next character in <var title="">input</var>.</li>

   <li><p>If the character indicated by <var title="">position</var>
   is a U+000A LINE FEED (LF) character, advance <var title="">position</var> to the next character in <var title="">input</var>.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
   <em>not</em> U+000D CARRIAGE RETURN (CR) or U+000A LINE FEED (LF)
   characters. Let <var title="">line</var> be those characters, if
   any.</li>

   <li><p>If <var title="">line</var> is the empty string, then jump
   to the step labeled <i>cue loop</i>.</li>

   <li><p><i>Timings</i>: <span class=XXX>...</span></li>

   <li><p><i>End</i>: The file has ended. Abort these steps. The
   <a href=#websrt-parser>WebSRT parser</a> has finished.</li>

  </ol></div>

<!--TT-->


  <h5 id=user-interface><span class=secno>4.8.10.12 </span>User interface</h5>

  <p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
  indicates that the author has not provided a scripted controller and
  would like the user agent to provide its own set of controls.</p>

  <div class=impl>

  <p>If the attribute is present, or if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a> for the
  <a href=#media-element>media element</a>, then the user agent should <dfn id=expose-a-user-interface-to-the-user>expose a
  user interface to the user</dfn>. This user interface should include
  features to begin playback, pause playback, seek to an arbitrary
  position in the content (if the content supports arbitrary seeking),
  change the volume, change the display of closed captions

  <!-- XXX update this to mention timed tracks -->

  or embedded
  sign-language tracks, select different audio tracks or turn on audio
  descriptions, and show the media content in manners more suitable to
  the user (e.g. full-screen video or in an independent resizable
  window). Other controls may also be made available.</p>

  <p>Even when the attribute is absent, however, user agents may
  provide controls to affect playback of the media resource
  (e.g. play, pause, seeking, and volume controls), but such features
  should not interfere with the page's normal rendering. For example,
  such features could be exposed in the <a href=#media-element>media element</a>'s
  context menu.</p>

  <p>Where possible (specifically, for starting, stopping, pausing,
  and unpausing playback, for muting or changing the volume of the
  audio, and for seeking), user interface features exposed by the user
  agent must be implemented in terms of the DOM API described above,
  so that, e.g., all the same events fire.</p>

  <p>The <dfn id=dom-media-controls title=dom-media-controls><code>controls</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  <hr></div>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current playback volume, as a number in the range
    0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest.</p>

    <p>Can be set, to change the volume.</p>

    <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> if the new value is not
    in the range 0.0 .. 1.0.</p>

   </dd>

   <dt><var title="">media</var> . <code title=dom-media-muted><a href=#dom-media-muted>muted</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns true if audio is muted, overriding the <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute, and false if the
    <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute is being
    honored.</p>

    <p>Can be set, to change whether the audio is muted or not.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-media-volume title=dom-media-volume><code>volume</code></dfn>
  attribute must return the playback volume of any audio portions of
  the <a href=#media-element>media element</a>, in the range 0.0 (silent) to 1.0
  (loudest). Initially, the volume must be 1.0, but user agents may
  remember the last set value across sessions, on a per-site basis or
  otherwise, so the volume may start at other values. On setting, if
  the new value is in the range 0.0 to 1.0 inclusive, the attribute
  must be set to the new value and the playback volume must be
  correspondingly adjusted as soon as possible after setting the
  attribute, with 0.0 being silent, and 1.0 being the loudest setting,
  values in between increasing in loudness. The range need not be
  linear. The loudest setting may be lower than the system's loudest
  possible setting; for example the user could have set a maximum
  volume. If the new value is outside the range 0.0 to 1.0 inclusive,
  then, on setting, an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be
  raised instead.</p>

  <p>The <dfn id=dom-media-muted title=dom-media-muted><code>muted</code></dfn>
  attribute must return true if the audio channels are muted and false
  otherwise. Initially, the audio channels should not be muted
  (false), but user agents may remember the last set value across
  sessions, on a per-site basis or otherwise, so the muted state may
  start as muted (true). On setting, the attribute must be set to the
  new value; if the new value is true, audio playback for this
  <a href=#media-resource>media resource</a> must then be muted, and if false, audio
  playback must then be enabled.</p>

  <p>Whenever either the <code title=dom-media-muted><a href=#dom-media-muted>muted</a></code> or
  <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attributes are changed,
  the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> named <code title=event-media-volumechange><a href=#event-media-volumechange>volumechange</a></code> at the <a href=#media-element>media
  element</a>.</p>

  </div>




  <h5 id=time-ranges><span class=secno>4.8.10.13 </span>Time ranges</h5>

  <p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
  represent a list of ranges (periods) of time.</p>

  <pre class=idl>interface <dfn id=timeranges>TimeRanges</dfn> {
  readonly attribute unsigned long <a href=#dom-timeranges-length title=dom-TimeRanges-length>length</a>;
  float <a href=#dom-timeranges-start title=dom-TimeRanges-start>start</a>(in unsigned long index);
  float <a href=#dom-timeranges-end title=dom-TimeRanges-end>end</a>(in unsigned long index);
};</pre>

  <dl class=domintro><dt><var title="">media</var> . <code title=dom-TimeRanges-length><a href=#dom-timeranges-length>length</a></code></dt>

   <dd>

    <p>Returns the number of ranges in the object.</p>

   </dd>

   <dt><var title="">time</var> = <var title="">media</var> . <code title=dom-TimeRanges-start><a href=#dom-timeranges-start>start</a></code>(<var title="">index</var>)</dt>

   <dd>

    <p>Returns the time for the start of the range with the given index.</p>

    <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> if the index is out of range.</p>

   </dd>

   <dt><var title="">time</var> = <var title="">media</var> . <code title=dom-TimeRanges-end><a href=#dom-timeranges-end>end</a></code>(<var title="">index</var>)</dt>

   <dd>

    <p>Returns the time for the end of the range with the given index.</p>

    <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> if the index is out of range.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-timeranges-length title=dom-TimeRanges-length><code>length</code></dfn>
  IDL attribute must return the number of ranges represented by the object.</p>

  <p>The <dfn id=dom-timeranges-start title=dom-TimeRanges-start><code>start(<var title="">index</var>)</code></dfn> method must return the position
  of the start of the <var title="">index</var>th range represented by
  the object, in seconds measured from the start of the timeline that
  the object covers.</p>

  <p>The <dfn id=dom-timeranges-end title=dom-TimeRanges-end><code>end(<var title="">index</var>)</code></dfn> method must return the position
  of the end of the <var title="">index</var>th range represented by
  the object, in seconds measured from the start of the timeline that
  the object covers.</p>

  <p>These methods must raise <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exceptions
  if called with an <var title="">index</var> argument greater than or
  equal to the number of ranges represented by the object.</p>

  <p>When a <code><a href=#timeranges>TimeRanges</a></code> object is said to be a
  <dfn id=normalized-timeranges-object>normalized <code>TimeRanges</code> object</dfn>, the ranges it
  represents must obey the following criteria:</p>

  <ul><li>The start of a range must be greater than the end of all
   earlier ranges.</li>

   <li>The start of a range must be less than the end of that same
   range.</li>

  </ul><p>In other words, the ranges in such an object are ordered, don't
  overlap, aren't empty, and don't touch (adjacent ranges are folded
  into one bigger range).</p>

  <p>The timelines used by the objects returned by the <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code>, <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> and <code title=dom-media-played><a href=#dom-media-played>played</a></code> IDL attributes of <a href=#media-element title="media element">media elements</a> must be the same as that
  element's <a href=#media-resource>media resource</a>'s timeline.</p>

  </div>


  <h5 id=mediaevents><span class=secno>4.8.10.14 </span>Event summary</h5>

  <p><i>This section is non-normative.</i></p>

  <p>The following events fire on <a href=#media-element title="media element">media
  elements</a> as part of the processing model described above:</p>

  <table><thead><tr><th>Event name
     <th>Interface
     <th>Dispatched when...
     <th>Preconditions

   <tbody><tr><td><dfn id=event-media-loadstart title=event-media-loadstart><code>loadstart</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The user agent begins looking for <a href=#media-data>media data</a>, as part of the <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection algorithm</a>.
     <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>
    <tr><td><dfn id=event-media-progress title=event-media-progress><code>progress</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The user agent is fetching <a href=#media-data>media data</a>.
     <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>
    <tr><td><dfn id=event-media-suspend title=event-media-suspend><code>suspend</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The user agent is intentionally not currently fetching <a href=#media-data>media data</a>, but does not have the entire <a href=#media-resource>media resource</a> downloaded.
     <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>
    <tr><td><dfn id=event-media-abort title=event-media-abort><code>abort</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The user agent stops fetching the <a href=#media-data>media data</a> before it is completely downloaded, but not due to an error.
     <td><code title=dom-media-error><a href=#dom-media-error>error</a></code> is an object with the code <code title=dom-MediaError-MEDIA_ERR_ABORTED><a href=#dom-mediaerror-media_err_aborted>MEDIA_ERR_ABORTED</a></code>.
         <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals either <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> or <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, depending on when the download was aborted.
    <tr><td><dfn id=event-media-error title=event-media-error><code>error</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>An error occurs while fetching the <a href=#media-data>media data</a>.
     <td><code title=dom-media-error><a href=#dom-media-error>error</a></code> is an object with the code <code title=dom-MediaError-MEDIA_ERR_NETWORK><a href=#dom-mediaerror-media_err_network>MEDIA_ERR_NETWORK</a></code> or higher.
         <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals either <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> or <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, depending on when the download was aborted.
    <tr><td><dfn id=event-media-emptied title=event-media-emptied><code>emptied</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>A <a href=#media-element>media element</a> whose <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> was previously not in the <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> state has just switched to that state (either because of a fatal error during load that's about to be reported, or because the <code title=dom-media-load><a href=#dom-media-load>load()</a></code> method was invoked while the <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection algorithm</a> was already running).
     <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>; all the IDL attributes are in their initial states.
    <tr><td><dfn id=event-media-stalled title=event-media-stalled><code>stalled</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The user agent is trying to fetch <a href=#media-data>media data</a>, but data is unexpectedly not forthcoming.
     <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.

   <tbody><tr><td><dfn id=event-media-play title=event-media-play><code>play</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>Playback has begun. Fired after the <code title=dom-media-play><a href=#dom-media-play>play()</a></code> method has returned, or when the <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute has caused playback to begin.
     <td><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly false.
    <tr><td><dfn id=event-media-pause title=event-media-pause><code>pause</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>Playback has been paused. Fired after the <code title=dom-media-pause><a href=#dom-media-pause>pause()</a></code> method has returned.
     <td><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly true.

   <tbody><tr><td><dfn id=event-media-loadedmetadata title=event-media-loadedmetadata><code>loadedmetadata</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The user agent has just determined the duration and dimensions of the <a href=#media-resource>media resource</a>
<!--TT-->
 and <a href=#the-timed-tracks-are-ready>the timed tracks are ready</a>.
<!--TT-->
     <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is newly equal to <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater for the first time.
    <tr><td><dfn id=event-media-loadeddata title=event-media-loadeddata><code>loadeddata</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The user agent can render the <a href=#media-data>media data</a> at the <a href=#current-playback-position>current playback position</a> for the first time.
     <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> newly increased to <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or greater for the first time.
    <tr><td><dfn id=event-media-waiting title=event-media-waiting><code>waiting</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course.
     <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is newly equal to or less than <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>, and <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is false. Either <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> is true, or the <a href=#current-playback-position>current playback position</a> is not contained in any of the ranges in <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code>. It is possible for playback to stop for two other reasons without <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> being false, but those two reasons do not fire this event: maybe <a href=#ended-playback title="ended playback">playback ended</a>, or playback <a href=#stopped-due-to-errors>stopped due to errors</a>.
    <tr><td><dfn id=event-media-playing title=event-media-playing><code>playing</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>Playback has started.
     <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is newly equal to or greater than <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>, <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is false, <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> is false, or the <a href=#current-playback-position>current playback position</a> is contained in one of the ranges in <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code>.
    <tr><td><dfn id=event-media-canplay title=event-media-canplay><code>canplay</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The user agent can resume playback of the <a href=#media-data>media data</a>, but estimates that if playback were to be started now, the <a href=#media-resource>media resource</a> could not be rendered at the current playback rate up to its end without having to stop for further buffering of content.
     <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> newly increased to <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or greater.
    <tr><td><dfn id=event-media-canplaythrough title=event-media-canplaythrough><code>canplaythrough</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The user agent estimates that if playback were to be started now, the <a href=#media-resource>media resource</a> could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
     <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is newly equal to <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>.

   <tbody><tr><td><dfn id=event-media-seeking title=event-media-seeking><code>seeking</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.
     <td>
    <tr><td><dfn id=event-media-seeked title=event-media-seeked><code>seeked</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute changed to false.
     <td>
    <tr><td><dfn id=event-media-timeupdate title=event-media-timeupdate><code>timeupdate</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The <a href=#current-playback-position>current playback position</a> changed as part of normal playback or in an especially interesting way, for example discontinuously.
     <td>
    <tr><td><dfn id=event-media-ended title=event-media-ended><code>ended</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>Playback has stopped because the end of the <a href=#media-resource>media resource</a> was reached.
     <td><code title=dom-media-currentTime><a href=#dom-media-currenttime>currentTime</a></code> equals the end of the <a href=#media-resource>media resource</a>; <code title=dom-media-ended><a href=#dom-media-ended>ended</a></code> is true.

   <tbody><tr><td><dfn id=event-media-ratechange title=event-media-ratechange><code>ratechange</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>Either the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> or the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> attribute has just been updated.
     <td>
    <tr><td><dfn id=event-media-durationchange title=event-media-durationchange><code>durationchange</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>The <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute has just been updated.
     <td>
    <tr><td><dfn id=event-media-volumechange title=event-media-volumechange><code>volumechange</code></dfn>
     <td><code><a href=#event>Event</a></code>
     <td>Either the <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute or the <code title=dom-media-muted><a href=#dom-media-muted>muted</a></code> attribute has changed. Fired after the relevant attribute's setter has returned.
     <td>
  </table><div class=impl>

  <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.15 </span>Security and privacy considerations</h5>

  <p>The main security and privacy implications of the
  <code><a href=#video>video</a></code> and <code><a href=#audio>audio</a></code> elements come from the
  ability to embed media cross-origin. There are two directions that
  threats can flow: from hostile content to a victim page, and from a
  hostile page to victim content.</p>

  <hr><p>If a victim page embeds hostile content, the threat is that the
  content might contain scripted code that attempts to interact with
  the <code><a href=#document>Document</a></code> that embeds the content. To avoid this,
  user agents must ensure that there is no access from the content to
  the embedding page. In the case of media content that uses DOM
  concepts, the embedded content must be treated as if it was in its
  own unrelated <a href=#top-level-browsing-context>top-level browsing context</a>.</p>

  <p class=example>For instance, if an SVG animation was embedded in
  a <code><a href=#video>video</a></code> element, the user agent would not give it
  access to the DOM of the outer page. From the perspective of scripts
  in the SVG resource, the SVG file would appear to be in a lone
  top-level browsing context with no parent.</p>

  <hr><p>If a hostile page embeds victim content, the threat is that the
  embedding page could obtain information from the content that it
  would not otherwise have access to. The API does expose some
  information: the existence of the media, its type, its duration, its
  size, and the performance characteristics of its host. Such
  information is already potentially problematic, but in practice the
  same information can more or less be obtained using the
  <code><a href=#the-img-element>img</a></code> element, and so it has been deemed acceptable.</p>

  <p>However, significantly more sensitive information could be
  obtained if the user agent further exposes metadata within the
  content such as subtitles or chapter titles. This version of the API
  does not expose such information. Future extensions to this API will
  likely reuse a mechanism such as CORS to check that the embedded
  content's site has opted in to exposing such information. <a href=#refsCORS>[CORS]</a></p> <!-- v2 -->

  <p class=example>An attacker could trick a user running within a
  corporate network into visiting a site that attempts to load a video
  from a previously leaked location on the corporation's intranet. If
  such a video included confidential plans for a new product, then
  being able to read the subtitles would present a confidentiality
  breach.</p>

  </div>


  <h4 id=the-canvas-element><span class=secno>4.8.11 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#embedded-content>Embedded content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#transparent>Transparent</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code></dd>
   <dd><code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmlcanvaselement>HTMLCanvasElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute unsigned long <a href=#dom-canvas-width title=dom-canvas-width>width</a>;
           attribute unsigned long <a href=#dom-canvas-height title=dom-canvas-height>height</a>;

  DOMString <a href=#dom-canvas-todataurl title=dom-canvas-toDataURL>toDataURL</a>(in optional DOMString type, in any... args);

  object <a href=#dom-canvas-getcontext title=dom-canvas-getContext>getContext</a>(in DOMString contextId);
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-canvas-element>canvas</a></code> element provides scripts with a
  resolution-dependent bitmap canvas, which can be used for rendering
  graphs, game graphics, or other visual images on the fly.</p>

  <p>Authors should not use the <code><a href=#the-canvas-element>canvas</a></code> element in a
  document when a more suitable element is available. For example, it
  is inappropriate to use a <code><a href=#the-canvas-element>canvas</a></code> element to render a
  page heading: if the desired presentation of the heading is
  graphically intense, it should be marked up using appropriate
  elements (typically <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>) and then styled using CSS and
  supporting technologies such as XBL.</p>

  <p>When authors use the <code><a href=#the-canvas-element>canvas</a></code> element, they must also
  provide content that, when presented to the user, conveys
  essentially the same function or purpose as the bitmap canvas. This
  content may be placed as content of the <code><a href=#the-canvas-element>canvas</a></code>
  element. The contents of the <code><a href=#the-canvas-element>canvas</a></code> element, if any,
  are the element's <a href=#fallback-content>fallback content</a>.</p>

  <p>In interactive visual media, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for the
  <code><a href=#the-canvas-element>canvas</a></code> element, and if support for <code><a href=#the-canvas-element>canvas</a></code>
  elements has been enabled, the <code><a href=#the-canvas-element>canvas</a></code> element
  <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> consisting of
  a dynamically created image.</p>

  <p>In non-interactive, static, visual media, if the
  <code><a href=#the-canvas-element>canvas</a></code> element has been previously painted on (e.g. if
  the page was viewed in an interactive visual medium and is now being
  printed, or if some script that ran during the page layout process
  painted on the element), then the <code><a href=#the-canvas-element>canvas</a></code> element
  <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> with the
  current image and size. Otherwise, the element represents its
  <a href=#fallback-content>fallback content</a> instead.</p>

  <p>In non-visual media, and in visual media if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a> for the
  <code><a href=#the-canvas-element>canvas</a></code> element or if support for <code><a href=#the-canvas-element>canvas</a></code>
  elements has been disabled, the <code><a href=#the-canvas-element>canvas</a></code> element
  <a href=#represents>represents</a> its <a href=#fallback-content>fallback content</a>
  instead.</p>

  <!-- CANVAS-FOCUS-FALLBACK -->
  <p>When a <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a>
  <a href=#embedded-content>embedded content</a>, the user can still focus descendants
  of the <code><a href=#the-canvas-element>canvas</a></code> element (in the <a href=#fallback-content>fallback
  content</a>). This allows authors to make an interactive canvas
  keyboard-focusable: authors should have a one-to-one mapping of
  interactive regions to focusable elements in the <a href=#fallback-content>fallback
  content</a>.</p>

  <p>The <code><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the
  size of the coordinate space: <dfn id=attr-canvas-width title=attr-canvas-width><code>width</code></dfn> and <dfn id=attr-canvas-height title=attr-canvas-height><code>height</code></dfn>. These
  attributes, when specified, must have values that are <a href=#valid-non-negative-integer title="valid non-negative integer">valid non-negative
  integers</a>. <span class=impl>The <a href=#rules-for-parsing-non-negative-integers>rules for parsing
  non-negative integers</a> must be used to obtain their numeric
  values. If an attribute is missing, or if parsing its value returns
  an error, then the default value must be used instead.</span> The
  <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> attribute defaults to
  300, and the <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code>
  attribute defaults to 150.</p>

  <p>The intrinsic dimensions of the <code><a href=#the-canvas-element>canvas</a></code> element equal
  the size of the coordinate space, with the numbers interpreted in
  CSS pixels. However, the element can be sized arbitrarily by a
  style sheet. During rendering, the image is scaled to fit this layout
  size.</p>

  <div class=impl>

  <p>The size of the coordinate space does not necessarily represent
  the size of the actual bitmap that the user agent will use
  internally or during rendering. On high-definition displays, for
  instance, the user agent may internally use a bitmap with two device
  pixels per unit in the coordinate space, so that the rendering
  remains at high quality throughout.</p>

  <p>When the <code><a href=#the-canvas-element>canvas</a></code> element is created, and subsequently
  whenever the <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attributes are set (whether
  to a new value or to the previous value), the bitmap and any
  associated contexts must be cleared back to their initial state and
  reinitialized with the newly specified coordinate space
  dimensions.</p>

  <p>When the canvas is initialized, its bitmap must be cleared to
  transparent black.</p>

  <p>The <dfn id=dom-canvas-width title=dom-canvas-width><code>width</code></dfn> and
  <dfn id=dom-canvas-height title=dom-canvas-height><code>height</code></dfn> IDL
  attributes must <a href=#reflect>reflect</a> the respective content
  attributes of the same name.</p>

  </div>

  <div class=example>
   <p>Only one square appears to be drawn in the following example:</p>
   <pre>  // canvas is a reference to a &lt;canvas&gt; element
  var context = canvas.getContext('2d');
  context.fillRect(0,0,50,50);
  canvas.setAttribute('width', '300'); // clears the canvas
  context.fillRect(0,100,50,50);
  canvas.width = canvas.width; // clears the canvas
  context.fillRect(100,0,50,50); // only this square remains</pre>
  </div>

  <p>To draw on the canvas, authors must first obtain a reference to a
  <dfn id=context>context</dfn> using the <dfn id=dom-canvas-getcontext title=dom-canvas-getContext><code>getContext(<var title="">contextId</var>)</code></dfn> method of the
  <code><a href=#the-canvas-element>canvas</a></code> element.</p>

  <dl class=domintro><dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext</a></code>(<var title="">contextId</var>)</dt>

   <dd>

    <p>Returns an object that exposes an API for drawing on the canvas.</p>

    <p>Returns null if the given context ID is not supported.</p>

   </dd>

  </dl><p>This specification only defines one context, with the name "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>". <span class=impl>If <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> is called with
  that exact string for its <var title="">contextId</var> argument,
  then the UA must return a reference to an object implementing
  <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>. Other specifications may
  define their own contexts, which would return different
  objects.</span></p>

  

  <div class=impl>

  <p>Vendors may also define experimental contexts using the syntax
  <code><var title="">vendorname</var>-<var title="">context</var></code>, for example, <code>moz-3d</code>.</p>

  <p>When the UA is passed an empty string or a string specifying a
  context that it does not support, then it must return null. String
  comparisons must be <a href=#case-sensitive>case-sensitive</a>.</p>

  </div>

  <hr><dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ])</dt>

   <dd>

    <p>Returns a <code title="">data:</code> URL for the image in the
    canvas.</p>

    <p>The first argument, if provided, controls the type of the image
    to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
    type isn't supported. The other arguments are specific to the
    type, and control the way that the image is generated, as given in
    the table below.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> method
  must, when called with no arguments, return a <code title="">data:</code> URL containing a representation of the image
  as a PNG file. <a href=#refsPNG>[PNG]</a></p>

  <p>If the canvas has no pixels (i.e. either its horizontal dimension
  or its vertical dimension is zero) then the method must return the
  string "<code title="">data:,</code>". (This is the shortest <code title="">data:</code> URL; it represents the empty string in a <code title="">text/plain</code> resource.)</p>

  <p>When the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL(<var title="">type</var>)</a></code> method is called with one <em>or
  more</em> arguments, it must return a <code title="">data:</code>
  URL containing a representation of the image in the format given by
  <var title="">type</var>. The possible values are <a href=#mime-type title="MIME
  type">MIME types</a> with no parameters, for example
  <code>image/png</code>, <code>image/jpeg</code>, or even maybe
  <code>image/svg+xml</code> if the implementation actually keeps
  enough information to reliably render an SVG image from the
  canvas.</p>

  <p>For image types that do not support an alpha channel, the image
  must be composited onto a solid black background using the
  source-over operator, and the resulting image must be the one used
  to create the <code title="">data:</code> URL.</p>

  <p>Only support for <code>image/png</code> is required. User agents
  may support other types. If the user agent does not support the
  requested type, it must return the image using the PNG format.</p>

  <p>User agents must <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">convert the
  provided type to ASCII lowercase</a> before establishing if they
  support that type and before creating the <code title="">data:</code> URL.</p>

  </div>

  <p class=note>When trying to use types other than
  <code>image/png</code>, authors can check if the image was really
  returned in the requested format by checking to see if the returned
  string starts with one the exact strings "<code title="">data:image/png,</code>" or "<code title="">data:image/png;</code>". If it does, the image is PNG, and
  thus the requested type was not supported. (The one exception to
  this is if the canvas has either no height or no width, in which
  case the result might simply be "<code title="">data:,</code>".)</p>

  <div class=impl>

  <p>If the method is invoked with the first argument giving a type
  corresponding to one of the types given in the first column of the
  following table, and the user agent supports that type, then the
  subsequent arguments, if any, must be treated as described in the
  second cell of that row.</p>

  </div>

  <table><thead><tr><th> Type <th> Other arguments
   <tbody><tr><td> image/jpeg
     <td> The second argument<span class=impl>, if it</span> is a
     number in the range 0.0 to 1.0 inclusive<span class=impl>, must
     be</span> treated as the desired quality level. <span class=impl>If it is not a number or is outside that range, the
     user agent must use its default value, as if the argument had
     been omitted.</span>
  </table><div class=impl>

  <p>For the purposes of these rules, an argument is considered to be
  a number if it is converted to an IDL double value by the rules for
  handling arguments of type <code title="">any</code> in the Web IDL
  specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>

  <p>Other arguments must be ignored and must not cause the user agent
  to raise an exception. A future version of this specification will
  probably define other parameters to be passed to <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> to allow authors to
  more carefully control compression settings, image metadata,
  etc.</p>

  </div>

  

  <div data-component="HTML Canvas 2D Context (editor: Ian Hickson)">

  <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>

  <!-- v2: we're on v4. suggestions for next version are marked v5. -->

  <p>When the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code>
  method of a <code><a href=#the-canvas-element>canvas</a></code> element is invoked with <dfn id=canvas-context-2d title=canvas-context-2d><code>2d</code></dfn> as the argument, a
  <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object is returned.</p>

  

  <div class=impl>


  <p>There is only one <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object
  per canvas, so calling the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method with the
  <code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code> argument a second time
  must return the same object.</p>

  </div>

  <p>The 2D context represents a flat Cartesian surface whose origin
  (0,0) is at the top left corner, with the coordinate space having
  <var title="">x</var> values increasing when going right, and <var title="">y</var> values increasing when going down.</p>

  <pre class=idl>interface <dfn id=canvasrenderingcontext2d>CanvasRenderingContext2D</dfn> {

  // back-reference to the canvas
  readonly attribute <a href=#htmlcanvaselement>HTMLCanvasElement</a> <a href=#dom-context-2d-canvas title=dom-context-2d-canvas>canvas</a>;

  // state
  void <a href=#dom-context-2d-save title=dom-context-2d-save>save</a>(); // push state on state stack
  void <a href=#dom-context-2d-restore title=dom-context-2d-restore>restore</a>(); // pop state stack and restore state
<!--
  // v5 we've also received requests for:
          attribute boolean <span title="dom-context-2d-forceHighQuality">forceHighQuality</span> // (default false)
  // when enabled, it would prevent the UA from falling back on lower-quality but faster rendering routines
  // useful e.g. for when an image manipulation app uses <canvas> both for UI previews and the actual work
-->
  // transformations (default transform is the identity matrix)
  void <a href=#dom-context-2d-scale title=dom-context-2d-scale>scale</a>(in float x, in float y);
  void <a href=#dom-context-2d-rotate title=dom-context-2d-rotate>rotate</a>(in float angle);
  void <a href=#dom-context-2d-translate title=dom-context-2d-translate>translate</a>(in float x, in float y);
  void <a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
  void <a href=#dom-context-2d-settransform title=dom-context-2d-setTransform>setTransform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
<!--
  // v5 we've also received requests for:
  void skew(...);
  void reflect(...); // or mirror(...)
-->
  // compositing
           attribute float <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>globalAlpha</a>; // (default 1.0)
           attribute DOMString <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>globalCompositeOperation</a>; // (default source-over)
<!--
  // v5 we've also received requests for:
  - turning off antialiasing to avoid seams when patterns are painted next to each other
    - might be better to overdraw?
    - might be better to just draw at a higher res then downsample, like for 3d?
  - nested layers
    - the ability to composite an entire set of drawing operations with one shadow all at once
      http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
-->
  // colors and styles
           attribute any <a href=#dom-context-2d-strokestyle title=dom-context-2d-strokeStyle>strokeStyle</a>; // (default black)
           attribute any <a href=#dom-context-2d-fillstyle title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
  <a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient>createLinearGradient</a>(in float x0, in float y0, in float x1, in float y1);
  <a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createradialgradient title=dom-context-2d-createRadialGradient>createRadialGradient</a>(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
  <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>(in <a href=#htmlimageelement>HTMLImageElement</a> image, in DOMString repetition);
  <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>(in <a href=#htmlcanvaselement>HTMLCanvasElement</a> image, in DOMString repetition);
  <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>(in <a href=#htmlvideoelement>HTMLVideoElement</a> image, in DOMString repetition);

  // line caps/joins
           attribute float <a href=#dom-context-2d-linewidth title=dom-context-2d-lineWidth>lineWidth</a>; // (default 1)
           attribute DOMString <a href=#dom-context-2d-linecap title=dom-context-2d-lineCap>lineCap</a>; // "butt", "round", "square" (default "butt")
           attribute DOMString <a href=#dom-context-2d-linejoin title=dom-context-2d-lineJoin>lineJoin</a>; // "round", "bevel", "miter" (default "miter")
           attribute float <a href=#dom-context-2d-miterlimit title=dom-context-2d-miterLimit>miterLimit</a>; // (default 10)

  // shadows
           attribute float <a href=#dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX>shadowOffsetX</a>; // (default 0)
           attribute float <a href=#dom-context-2d-shadowoffsety title=dom-context-2d-shadowOffsetY>shadowOffsetY</a>; // (default 0)
           attribute float <a href=#dom-context-2d-shadowblur title=dom-context-2d-shadowBlur>shadowBlur</a>; // (default 0)
           attribute DOMString <a href=#dom-context-2d-shadowcolor title=dom-context-2d-shadowColor>shadowColor</a>; // (default transparent black)

  // rects
  void <a href=#dom-context-2d-clearrect title=dom-context-2d-clearRect>clearRect</a>(in float x, in float y, in float w, in float h);
  void <a href=#dom-context-2d-fillrect title=dom-context-2d-fillRect>fillRect</a>(in float x, in float y, in float w, in float h);
  void <a href=#dom-context-2d-strokerect title=dom-context-2d-strokeRect>strokeRect</a>(in float x, in float y, in float w, in float h);

  // path API
  void <a href=#dom-context-2d-beginpath title=dom-context-2d-beginPath>beginPath</a>();
  void <a href=#dom-context-2d-closepath title=dom-context-2d-closePath>closePath</a>();
  void <a href=#dom-context-2d-moveto title=dom-context-2d-moveTo>moveTo</a>(in float x, in float y);
  void <a href=#dom-context-2d-lineto title=dom-context-2d-lineTo>lineTo</a>(in float x, in float y);
  void <a href=#dom-context-2d-quadraticcurveto title=dom-context-2d-quadraticCurveTo>quadraticCurveTo</a>(in float cpx, in float cpy, in float x, in float y);
  void <a href=#dom-context-2d-beziercurveto title=dom-context-2d-bezierCurveTo>bezierCurveTo</a>(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
  void <a href=#dom-context-2d-arcto title=dom-context-2d-arcTo>arcTo</a>(in float x1, in float y1, in float x2, in float y2, in float radius);
  void <a href=#dom-context-2d-rect title=dom-context-2d-rect>rect</a>(in float x, in float y, in float w, in float h);
  void <a href=#dom-context-2d-arc title=dom-context-2d-arc>arc</a>(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
  void <a href=#dom-context-2d-fill title=dom-context-2d-fill>fill</a>();
  void <a href=#dom-context-2d-stroke title=dom-context-2d-stroke>stroke</a>();
  void <a href=#dom-context-2d-clip title=dom-context-2d-clip>clip</a>();
  boolean <a href=#dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath>isPointInPath</a>(in float x, in float y);

  // focus management
  boolean <a href=#dom-context-2d-drawfocusring title=dom-context-2d-drawFocusRing>drawFocusRing</a>(in <a href=#element>Element</a> element, in float xCaret, in float yCaret, in optional boolean canDrawCustom);

  // text
           attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
           attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
           attribute DOMString <a href=#dom-context-2d-textbaseline title=dom-context-2d-textBaseline>textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
  void <a href=#dom-context-2d-filltext title=dom-context-2d-fillText>fillText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);
  void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);<!-- v5DVT
  void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight);
  void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight); -->
  <a href=#textmetrics>TextMetrics</a> <a href=#dom-context-2d-measuretext title=dom-context-2d-measureText>measureText</a>(in DOMString text);

  // drawing images
  void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlimageelement>HTMLImageElement</a> image, in float dx, in float dy, in optional float dw, in float dh);
  void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlimageelement>HTMLImageElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
  void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlcanvaselement>HTMLCanvasElement</a> image, in float dx, in float dy, in optional float dw, in float dh);
  void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlcanvaselement>HTMLCanvasElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
  void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlvideoelement>HTMLVideoElement</a> image, in float dx, in float dy, in optional float dw, in float dh);
  void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlvideoelement>HTMLVideoElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

  // pixel manipulation
  <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedata title=dom-context-2d-createImageData>createImageData</a>(in float sw, in float sh);
  <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedata title=dom-context-2d-createImageData>createImageData</a>(in <a href=#imagedata>ImageData</a> imagedata);
  <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-getimagedata title=dom-context-2d-getImageData>getImageData</a>(in float sx, in float sy, in float sw, in float sh);
  void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(in <a href=#imagedata>ImageData</a> imagedata, in float dx, in float dy, in optional float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
};

interface <dfn id=canvasgradient>CanvasGradient</dfn> {
  // opaque object
  void <a href=#dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop>addColorStop</a>(in float offset, in DOMString color);
};

interface <dfn id=canvaspattern>CanvasPattern</dfn> {
  // opaque object
};

interface <dfn id=textmetrics>TextMetrics</dfn> {
  readonly attribute float <a href=#dom-textmetrics-width title=dom-textmetrics-width>width</a>;
};

interface <dfn id=imagedata>ImageData</dfn> {
  readonly attribute unsigned long <a href=#dom-imagedata-width title=dom-imagedata-width>width</a>;
  readonly attribute unsigned long <a href=#dom-imagedata-height title=dom-imagedata-height>height</a>;
  readonly attribute <a href=#canvaspixelarray>CanvasPixelArray</a> <a href=#dom-imagedata-data title=dom-imagedata-data>data</a>;
};

interface <dfn id=canvaspixelarray>CanvasPixelArray</dfn> {
  readonly attribute unsigned long <a href=#dom-canvaspixelarray-length title=dom-canvaspixelarray-length>length</a>;
  <a href=#dom-canvaspixelarray-get title=dom-CanvasPixelArray-get>getter</a> octet (in unsigned long index);
  <a href=#dom-canvaspixelarray-set title=dom-CanvasPixelArray-set>setter</a> void (in unsigned long index, in octet value);
};</pre>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#the-canvas-element>canvas</a></code> element.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-canvas title=dom-context-2d-canvas><code>canvas</code></dfn>
  attribute must return the <code><a href=#the-canvas-element>canvas</a></code> element that the
  context paints on.</p>

  <p>Except where otherwise specified, for the 2D context interface,
  any method call with a numeric argument whose value is infinite or a
  NaN value must be ignored.</p>

  <!--
   Philip Taylor wrote:
   > My experience with some 3d canvas code is that infinities come up in
   > naturally harmless places, e.g. having a function that scales by x then
   > translates by 1/x and wanting it to work when x=0 (which ought to draw
   > nothing, since anything it draws is zero pixels wide), and it's a bit
   > annoying to track down and fix those issues, so I'd probably like it if
   > they were harmless in canvas methods. Opera appears to silently not draw
   > anything if the transformation matrix is not finite, but Firefox throws
   > exceptions when passing in non-finite arguments.
  -->

  <p>Whenever the CSS value <code title="">currentColor</code> is used
  as a color in this API, the "computed value of the 'color' property"
  for the purposes of determining the computed value of the <code title="">currentColor</code> keyword is the computed value of the
  'color' property on the element in question at the time that the
  color is specified (e.g. when the appropriate attribute is set, or
  when the method is called; not when the color is rendered or
  otherwise used). If the computed value of the 'color' property is
  undefined for a particular case (e.g. because the element is not
  <a href=#in-a-document>in a <code>Document</code></a>), then the "computed value
  of the 'color' property" for the purposes of determining the
  computed value of the <code title="">currentColor</code> keyword is
  fully opaque black. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>

  </div>



  <h6 id=the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</h6>

  <p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>

  <ul class=brief><li>The current <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>.</li>
   <li>The current <a href=#clipping-region>clipping region</a>.</li>
   <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>.</li>
  </ul><p class=note>The current path and the current bitmap are not part
  of the drawing state. The current path is persistent, and can only
  be reset using the <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath()</a></code> method. The
  current bitmap is a property of the canvas, not the context.</p>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-save><a href=#dom-context-2d-save>save</a></code>()</dt>

   <dd>

    <p>Pushes the current state onto the stack.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-restore><a href=#dom-context-2d-restore>restore</a></code>()</dt>

   <dd>

    <p>Pops the top state on the stack, restoring the context to that state.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-save title=dom-context-2d-save><code>save()</code></dfn>
  method must push a copy of the current drawing state onto the
  drawing state stack.</p>

  <p>The <dfn id=dom-context-2d-restore title=dom-context-2d-restore><code>restore()</code></dfn> method
  must pop the top entry in the drawing state stack, and reset the
  drawing state it describes. If there is no saved state, the method
  must do nothing.</p>

  <!-- v5
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
>
> save(id)
> restore(id)
>
> If id is not provided, then save() works as defined now. The same for
> restore().
>
> Currently, it's not trivial to save and restore a specific state.
...and from Philip:
> I think a more convenient syntax would be:
>   var state = ctx.save();
>   ctx.restore(state);
> But how would it interact with normal calls to ctx.restore()?
  -->

  </div>


  <h6 id=transformations><span class=secno>4.8.11.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>

  <p>The transformation matrix is applied to coordinates when creating
  shapes and paths.</p> <!-- conformance criteria for actual drawing
  are described in the various sections below -->

  <div class=impl>

  <p>When the context is created, the transformation matrix must
  initially be the identity transform. It may then be adjusted using
  the transformation methods.</p>

  <p>The transformations must be performed in reverse order. For
  instance, if a scale transformation that doubles the width is
  applied, followed by a rotation transformation that rotates drawing
  operations by a quarter turn, and a rectangle twice as wide as it is
  tall is then drawn on the canvas, the actual result will be a
  square.</p>

  </div>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-scale><a href=#dom-context-2d-scale>scale</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>

   <dd>

    <p>Changes the transformation matrix to apply a scaling transformation with the given characteristics.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-rotate><a href=#dom-context-2d-rotate>rotate</a></code>(<var title="">angle</var>)</dt>

   <dd>

    <p>Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-translate><a href=#dom-context-2d-translate>translate</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>

   <dd>

    <p>Changes the transformation matrix to apply a translation transformation with the given characteristics.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-transform><a href=#dom-context-2d-transform>transform</a></code>(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>

   <dd>

    <p>Changes the transformation matrix to apply the matrix given by the arguments as described below.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-setTransform><a href=#dom-context-2d-settransform>setTransform</a></code>(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>

   <dd>

    <p>Changes the transformation matrix <em>to</em> the matrix given by the arguments as described below.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-scale title=dom-context-2d-scale><code>scale(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
  add the scaling transformation described by the arguments to the
  transformation matrix. The <var title="">x</var> argument represents
  the scale factor in the horizontal direction and the <var title="">y</var> argument represents the scale factor in the
  vertical direction. The factors are multiples.</p>

  <p>The <dfn id=dom-context-2d-rotate title=dom-context-2d-rotate><code>rotate(<var title="">angle</var>)</code></dfn> method must add the rotation
  transformation described by the argument to the transformation
  matrix. The <var title="">angle</var> argument represents a
  clockwise rotation angle expressed in radians.</p>

  <p>The <dfn id=dom-context-2d-translate title=dom-context-2d-translate><code>translate(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
  add the translation transformation described by the arguments to the
  transformation matrix. The <var title="">x</var> argument represents
  the translation distance in the horizontal direction and the <var title="">y</var> argument represents the translation distance in the
  vertical direction. The arguments are in coordinate space units.</p>

  <p>The <dfn id=dom-context-2d-transform title=dom-context-2d-transform><code>transform(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
  <var title="">dy</var>)</code></dfn> method must multiply the
  current transformation matrix with the matrix described by:</p>

  </div>

  <table class=matrix><tr><td><var title="">m11</var></td>
    <td><var title="">m21</var></td>
    <td><var title="">dx</var></td>
   <tr><td><var title="">m12</var></td>
    <td><var title="">m22</var></td>
    <td><var title="">dy</var></td>
   <tr><td>0</td>
    <td>0</td>
    <td>1</td>
   </table><div class=impl>

  <p>The <dfn id=dom-context-2d-settransform title=dom-context-2d-setTransform><code>setTransform(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
  <var title="">dy</var>)</code></dfn> method must reset the current
  transform to the identity matrix, and then invoke the <code><a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
  <var title="">dy</var>)</code> method with the same arguments.</p>

  </div>


  <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current alpha value applied to rendering operations.</p>

    <p>Can be set, to change the alpha value. Values outside of the
    range 0.0 .. 1.0 are ignored.</p>

   </dd>


   <dt><var title="">context</var> . <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current composition operation, from the list below.</p>

    <p>Can be set, to change the composition operation. Unknown values
    are ignored.</p>

   </dd>

  </dl><div class=impl>

  <p>All drawing operations are affected by the global compositing
  attributes, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>.</p>

  <!-- conformance criteria for painting are described in the "drawing
  model" section below -->

  <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn>
  attribute gives an alpha value that is applied to shapes and images
  before they are composited onto the canvas. The value must be in the
  range from 0.0 (fully transparent) to 1.0 (no additional
  transparency). If an attempt is made to set the attribute to a value
  outside this range, including Infinity and Not-a-Number (NaN)
  values, the attribute must retain its previous value. When the
  context is created, the <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> attribute must
  initially have the value 1.0.</p>

  <p>The <dfn id=dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation><code>globalCompositeOperation</code></dfn>
  attribute sets how shapes and images are drawn onto the existing
  bitmap, once they have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the
  current transformation matrix applied. It must be set to a value
  from the following list. In the descriptions below, the source
  image, <var title="">A</var>, is the shape or image being rendered,
  and the destination image, <var title="">B</var>, is the current
  state of the bitmap.</p>

  </div>

  <dl><dt><dfn id=gcop-source-atop title=gcop-source-atop><code>source-atop</code></dfn></dt>

   <dd><var title="">A</var> atop <var title="">B</var>. Display the
   source image wherever both images are opaque. Display the
   destination image wherever the destination image is opaque but the
   source image is transparent. Display transparency elsewhere.</dd>

   <dt><dfn id=gcop-source-in title=gcop-source-in><code>source-in</code></dfn></dt>

   <dd><var title="">A</var> in <var title="">B</var>. Display the
   source image wherever both the source image and destination image
   are opaque. Display transparency elsewhere.</dd>

   <dt><dfn id=gcop-source-out title=gcop-source-out><code>source-out</code></dfn></dt>

   <dd><var title="">A</var> out <var title="">B</var>. Display the
   source image wherever the source image is opaque and the
   destination image is transparent. Display transparency
   elsewhere.</dd>

   <dt><dfn id=gcop-source-over title=gcop-source-over><code>source-over</code></dfn> (default)</dt>

   <dd><var title="">A</var> over <var title="">B</var>. Display the
   source image wherever the source image is opaque. Display the
   destination image elsewhere.</dd>


   <dt><dfn id=gcop-destination-atop title=gcop-destination-atop><code>destination-atop</code></dfn></dt>

   <dd><var title="">B</var> atop <var title="">A</var>. Same as <code title=gcop-source-atop><a href=#gcop-source-atop>source-atop</a></code> but using the
   destination image instead of the source image and vice versa.</dd>

   <dt><dfn id=gcop-destination-in title=gcop-destination-in><code>destination-in</code></dfn></dt>

   <dd><var title="">B</var> in <var title="">A</var>. Same as <code title=gcop-source-in><a href=#gcop-source-in>source-in</a></code> but using the destination
   image instead of the source image and vice versa.</dd>

   <dt><dfn id=gcop-destination-out title=gcop-destination-out><code>destination-out</code></dfn></dt>

   <dd><var title="">B</var> out <var title="">A</var>. Same as <code title=gcop-source-out><a href=#gcop-source-out>source-out</a></code> but using the destination
   image instead of the source image and vice versa.</dd>

   <dt><dfn id=gcop-destination-over title=gcop-destination-over><code>destination-over</code></dfn></dt>

   <dd><var title="">B</var> over <var title="">A</var>. Same as <code title=gcop-source-over><a href=#gcop-source-over>source-over</a></code> but using the
   destination image instead of the source image and vice versa.</dd>


<!-- no clear definition of this operator (doesn't correspond to a PorterDuff operator)
   <dt><dfn title="gcop-darker"><code>darker</code></dfn></dt>

   <dd>Display the sum of the source image and destination image,
   with color values approaching 0 as a limit.</dd>
-->

   <dt><dfn id=gcop-lighter title=gcop-lighter><code>lighter</code></dfn></dt>

   <dd><var title="">A</var> plus <var title="">B</var>. Display the
   sum of the source image and destination image, with color values
   approaching 1 as a limit.</dd>


   <dt><dfn id=gcop-copy title=gcop-copy><code>copy</code></dfn></dt>

   <dd><var title="">A</var> (<var title="">B</var> is
   ignored). Display the source image instead of the destination
   image.</dd>


   <dt><dfn id=gcop-xor title=gcop-xor><code>xor</code></dfn></dt>

   <dd><var title="">A</var> xor <var title="">B</var>. Exclusive OR
   of the source image and destination image.</dd>


   <dt class=impl><code><var title="">vendorName</var>-<var title="">operationName</var></code></dt>

   <dd class=impl>Vendor-specific extensions to the list of
   composition operators should use this syntax.</dd>

  </dl><div class=impl>

  <p>These values are all case-sensitive &mdash; they must be used
  exactly as shown. User agents must not recognize values that are not
  a <a href=#case-sensitive>case-sensitive</a> match for one of the values given
  above.</p>

  <p>The operators in the above list must be treated as described by
  the Porter-Duff operator given at the start of their description
  (e.g. <var title="">A</var> over <var title="">B</var>). <a href=#refsPORTERDUFF>[PORTERDUFF]</a></p>

  <p>On setting, if the user agent does not recognize the specified
  value, it must be ignored, leaving the value of <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
  unaffected.</p>

  <p>When the context is created, the <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
  attribute must initially have the value
  <code>source-over</code>.</p>

  </div>


  <h6 id=colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</h6>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current style used for stroking shapes.</p>

    <p>Can be set, to change the stroke style.</p>

    <p>The style can be either a string containing a CSS color, or a
    <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
    object. Invalid values are ignored.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current style used for filling shapes.</p>

    <p>Can be set, to change the fill style.</p>

    <p>The style can be either a string containing a CSS color, or a
    <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
    object. Invalid values are ignored.</p>

   </dd>

  </dl><div class=impl>

  <!-- v5 feature requests:

   * Getting and setting colours by component to bypass the CSS value parsing.

     Either:
        context.fillStyle.red += 1;

     Or:
        var array = context.fillStyle;
        array[1] += 1;
        context.fillStyle = array;

   * A more performant way of setting colours in general, e.g.:

       context.setFillColor(r,g,b,a) // already supported by webkit

     Or:

       context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly

   * fill rule for deciding between winding and even-odd algorithms.
     SVG has fill-rule: nonzero | evenodd
       http://www.w3.org/TR/SVG/painting.html#FillProperties

  -->

  <p>The <dfn id=dom-context-2d-strokestyle title=dom-context-2d-strokeStyle><code>strokeStyle</code></dfn>
  attribute represents the color or style to use for the lines around
  shapes, and the <dfn id=dom-context-2d-fillstyle title=dom-context-2d-fillStyle><code>fillStyle</code></dfn>
  attribute represents the color or style to use inside the
  shapes.</p>

  <p>Both attributes can be either strings,
  <code><a href=#canvasgradient>CanvasGradient</a></code>s, or <code><a href=#canvaspattern>CanvasPattern</a></code>s. On
  setting, strings must be parsed as CSS &lt;color&gt; values and the
  color assigned, and <code><a href=#canvasgradient>CanvasGradient</a></code> and
  <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but
  is not a valid color, or is neither a string, a
  <code><a href=#canvasgradient>CanvasGradient</a></code>, nor a <code><a href=#canvaspattern>CanvasPattern</a></code>, then
  it must be ignored, and the attribute must retain its previous
  value.</p>

  <p>When set to a <code><a href=#canvaspattern>CanvasPattern</a></code> or
  <code><a href=#canvasgradient>CanvasGradient</a></code> object, the assignment is
  <a href=#live>live</a>, meaning that changes made to the object after the
  assignment do affect subsequent stroking or filling of shapes.</p>

  <p>On getting, if the value is a color, then the <a href=#serialization-of-a-color title="serialization of a color">serialization of the color</a>
  must be returned. Otherwise, if it is not a color but a
  <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>, then the
  respective object must be returned. (Such objects are opaque and
  therefore only useful for assigning to other attributes or for
  comparison to other gradients or patterns.)</p>

  <p>The <dfn id=serialization-of-a-color>serialization of a color</dfn> for a color value is a
  string, computed as follows: if it has alpha equal to 1.0, then the
  string is a lowercase six-digit hex value, prefixed with a "#"
  character (U+0023 NUMBER SIGN), with the first two digits
  representing the red component, the next two digits representing the
  green component, and the last two digits representing the blue
  component, the digits being in the range 0-9 a-f (U+0030 to U+0039
  and U+0061 to U+0066). Otherwise, the color value has alpha less
  than 1.0, and the string is the color value in the CSS <code title="">rgba()</code> functional-notation format: the literal
  string <code title="">rgba</code> (U+0072 U+0067 U+0062 U+0061)
  followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the
  range 0-255 representing the red component (using digits 0-9, U+0030
  to U+0039, in the shortest form possible), a literal U+002C COMMA
  and U+0020 SPACE, an integer for the green component, a comma and a
  space, an integer for the blue component, another comma and space, a
  U+0030 DIGIT ZERO, a U+002E FULL STOP (representing the decimal
  point), one or more digits in the range 0-9 (U+0030 to U+0039)
  representing the fractional part of the alpha value, and finally a
  U+0029 RIGHT PARENTHESIS.</p>

  <p>When the context is created, the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attributes must
  initially have the string value <code title="">#000000</code>.</p>

  </div>

  <hr><p>There are two types of gradients, linear gradients and radial
  gradients, both represented by objects implementing the opaque
  <code><a href=#canvasgradient>CanvasGradient</a></code> interface.</p>

  <p id=interpolation>Once a gradient has been created (see below),
  stops are placed along it to define how the colors are distributed
  along the gradient. <span class=impl>The color of the gradient at
  each stop is the color specified for that stop. Between each such
  stop, the colors and the alpha component must be linearly
  interpolated over the RGBA space without premultiplying the alpha
  value to find the color to use at that offset. Before the first
  stop, the color must be the color of the first stop. After the last
  stop, the color must be the color of the last stop. When there are
  no stops, the gradient is transparent black.</span></p>

  <dl class=domintro><dt><var title="">gradient</var> . <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop</a></code>(<var title="">offset</var>, <var title="">color</var>)</dt>

   <dd>

    <p>Adds a color stop with the given color to the gradient at the
    given offset. 0.0 is the offset at one end of the gradient, 1.0 is
    the offset at the other end.</p>

    <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the offset
    is out of range. Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the
    color cannot be parsed.</p>

   </dd>

   <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</dt>

   <dd>

    <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
    linear gradient that paints along the line given by the
    coordinates represented by the arguments.</p>

    <p>If any of the arguments are not finite numbers, throws a
    <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception.</p>

   </dd>

   <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createRadialGradient><a href=#dom-context-2d-createradialgradient>createRadialGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</dt>

   <dd>

    <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
    radial gradient that paints along the cone given by the circles
    represented by the arguments.</p>

    <p>If any of the arguments are not finite numbers, throws a
    <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception. If either of the radii
    are negative, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop><code>addColorStop(<var title="">offset</var>, <var title="">color</var>)</code></dfn>
  method on the <code><a href=#canvasgradient>CanvasGradient</a></code> interface adds a new stop
  to a gradient. If the <var title="">offset</var> is less than 0,
  greater than 1, infinite, or NaN, then an
  <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be raised. If the <var title="">color</var> cannot be parsed as a CSS color, then a
  <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception must be raised. Otherwise, the
  gradient must have a new stop placed, at offset <var title="">offset</var> relative to the whole gradient, and with the
  color obtained by parsing <var title="">color</var> as a CSS
  &lt;color&gt; value. If multiple stops are added at the same offset
  on a gradient, they must be placed in the order added, with the
  first one closest to the start of the gradient, and each subsequent
  one infinitesimally further along towards the end point (in effect
  causing all but the first and last stop added at each point to be
  ignored).</p>

  <p>The <dfn id=dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient><code>createLinearGradient(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>,
  <var title="">y1</var>)</code></dfn> method takes four arguments
  that represent the start point (<var title="">x0</var>, <var title="">y0</var>) and end point (<var title="">x1</var>, <var title="">y1</var>) of the gradient. If any of the arguments to <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient()</a></code>
  are infinite or NaN, the method must raise a
  <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception. Otherwise, the method must
  return a linear <code><a href=#canvasgradient>CanvasGradient</a></code> initialized with the
  specified line.</p>

  <p>Linear gradients must be rendered such that all points on a line
  perpendicular to the line that crosses the start and end points have
  the color at the point where those two lines cross (with the colors
  coming from the <a href=#interpolation>interpolation and
  extrapolation</a> described above). The points in the linear
  gradient must be transformed as described by the <a href=#transformations title=dom-context-2d-transformation>current transformation
  matrix</a> when rendering.</p>

  <p>If <span title=""><var title="">x0</var>&nbsp;=&nbsp;<var title="">x1</var></span> and <span title=""><var title="">y0</var>&nbsp;=&nbsp;<var title="">y1</var></span>, then
  the linear gradient must paint nothing.</p>

  <p>The <dfn id=dom-context-2d-createradialgradient title=dom-context-2d-createRadialGradient><code>createRadialGradient(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>,
  <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</code></dfn> method takes six arguments, the
  first three representing the start circle with origin (<var title="">x0</var>, <var title="">y0</var>) and radius <var title="">r0</var>, and the last three representing the end circle
  with origin (<var title="">x1</var>, <var title="">y1</var>) and
  radius <var title="">r1</var>. The values are in coordinate space
  units. If any of the arguments are infinite or NaN, a
  <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception must be raised. If either
  of <var title="">r0</var> or <var title="">r1</var> are negative, an
  <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be raised. Otherwise,
  the method must return a radial <code><a href=#canvasgradient>CanvasGradient</a></code>
  initialized with the two specified circles.</p>

  <p>Radial gradients must be rendered by following these steps:</p>

  <ol><li><p>If <span title=""><var title="">x<sub>0</sub></var>&nbsp;=&nbsp;<var title="">x<sub>1</sub></var></span> and <span title=""><var title="">y<sub>0</sub></var>&nbsp;=&nbsp;<var title="">y<sub>1</sub></var></span> and <span title=""><var title="">r<sub>0</sub></var>&nbsp;=&nbsp;<var title="">r<sub>1</sub></var></span>, then the radial gradient must
   paint nothing. Abort these steps.</li>

   <li>

    <p>Let <span title="">x(<var title="">&omega;</var>)&nbsp;=&nbsp;(<var title="">x<sub>1</sub></var>-<var title="">x<sub>0</sub></var>)<var title="">&omega;</var>&nbsp;+&nbsp;<var title="">x<sub>0</sub></var></span></p>

    <p>Let <span title="">y(<var title="">&omega;</var>)&nbsp;=&nbsp;(<var title="">y<sub>1</sub></var>-<var title="">y<sub>0</sub></var>)<var title="">&omega;</var>&nbsp;+&nbsp;<var title="">y<sub>0</sub></var></span></p>

    <p>Let <span title="">r(<var title="">&omega;</var>)&nbsp;=&nbsp;(<var title="">r<sub>1</sub></var>-<var title="">r<sub>0</sub></var>)<var title="">&omega;</var>&nbsp;+&nbsp;<var title="">r<sub>0</sub></var></span></p>

    <p>Let the color at <var title="">&omega;</var> be the color at
    that position on the gradient (with the colors coming from the <a href=#interpolation>interpolation and extrapolation</a>
    described above).</p>

   </li>

   <li><p>For all values of <var title="">&omega;</var> where <span title="">r(<var title="">&omega;</var>)&nbsp;&gt;&nbsp;0</span>,
   starting with the value of <var title="">&omega;</var> nearest to
   positive infinity and ending with the value of <var title="">&omega;</var> nearest to negative infinity, draw the
   circumference of the circle with radius <span title="">r(<var title="">&omega;</var>)</span> at position (<span title="">x(<var title="">&omega;</var>)</span>, <span title="">y(<var title="">&omega;</var>)</span>), with the color at <var title="">&omega;</var>, but only painting on the parts of the
   canvas that have not yet been painted on by earlier circles in this
   step for this rendering of the gradient.</li>

  </ol><p class=note>This effectively creates a cone, touched by the two
  circles defined in the creation of the gradient, with the part of
  the cone before the start circle (0.0) using the color of the first
  offset, the part of the cone after the end circle (1.0) using the
  color of the last offset, and areas outside the cone untouched by
  the gradient (transparent black).</p>

  <p>The points in the radial gradient must be transformed as
  described by the <a href=#transformations title=dom-context-2d-transformation>current
  transformation matrix</a> when rendering.</p>

  <p>Gradients must be painted only where the relevant stroking or
  filling effects requires that they be drawn.</p>

<!--
  <p>Support for actually painting gradients is optional. Instead of
  painting the gradients, user agents may instead just paint the first
  stop's color. However, <code
  title="dom-context-2d-createLinearGradient">createLinearGradient()</code>
  and <code
  title="dom-context-2d-createRadialGradient">createRadialGradient()</code>
  must always return objects when passed valid arguments.</p>
-->

  </div>

  <hr><p>Patterns are represented by objects implementing the opaque
  <code><a href=#canvaspattern>CanvasPattern</a></code> interface.</p>

  <dl class=domintro><dt><var title="">pattern</var> = <var title="">context</var> . <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern</a></code>(<var title="">image</var>, <var title="">repetition</var>)</dt>

   <dd>

    <p>Returns a <code><a href=#canvaspattern>CanvasPattern</a></code> object that uses the given image
    and repeats in the direction(s) given by the <var title="">repetition</var> argument.</p>

    <p>The allowed values for <var title="">repetition</var> are <code title="">repeat</code> (both directions), <code title="">repeat-x</code> (horizontal only), <code title="">repeat-y</code> (vertical only), and <code title="">no-repeat</code> (neither). If the <var title="">repetition</var> argument is empty or null, the value
    <code title="">repeat</code> is used.</p>

    <p>If the first argument isn't an <code><a href=#the-img-element>img</a></code>,
    <code><a href=#the-canvas-element>canvas</a></code>, or <code><a href=#video>video</a></code> element, throws a
    <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code> exception. If the image has no
    image data, throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. If
    the second argument isn't one of the allowed values, throws a
    <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception. If the image isn't yet fully
    decoded, then the method returns null.</p>

   </dd>

  </dl><div class=impl>

  <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn>
  method is used. The first argument gives the image to use as the
  pattern (either an <code><a href=#htmlimageelement>HTMLImageElement</a></code>,
  <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
  object). Modifying this image after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
  must not affect the pattern. The second argument must be a string
  with one of the following values: <code title="">repeat</code>,
  <code title="">repeat-x</code>, <code title="">repeat-y</code>,
  <code title="">no-repeat</code>. If the empty string or null is
  specified, <code title="">repeat</code> must be assumed. If an
  unrecognized value is given, then the user agent must raise a
  <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception. User agents must recognize the
  four values described above exactly (e.g. they must not do case
  folding). The method must return a <code><a href=#canvaspattern>CanvasPattern</a></code> object
  suitably initialized.</p>

  <p>The <var title="">image</var> argument is an instance of either
  <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
  <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>. If the <var title="">image</var> is
  null, the implementation must raise a <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code>
  exception.</p> <!-- drawImage() has an equivalent paragraph -->

  <p>If the <var title="">image</var> argument is an
  <code><a href=#htmlimageelement>HTMLImageElement</a></code> object whose <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> attribute is false, or
  if the <var title="">image</var> argument is an
  <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
  <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
  implementation must return null.</p>
  <!-- drawImage() has an equivalent paragraph -->

  <p>If the <var title="">image</var> argument is an
  <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
  dimension or a vertical dimension equal to zero, then the
  implementation must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
  exception.</p>
  <!-- drawImage() has an equivalent paragraph -->

  <p>Patterns must be painted so that the top left of the first image
  is anchored at the origin of the coordinate space, and images are
  then repeated horizontally to the left and right (if the
  <code>repeat-x</code> string was specified) or vertically up and
  down (if the <code>repeat-y</code> string was specified) or in all
  four directions all over the canvas (if the <code>repeat</code>
  string was specified). The images are not scaled by this process;
  one CSS pixel of the image must be painted on one coordinate space
  unit. Of course, patterns must actually be painted only where the
  stroking or filling effect requires that they be drawn, and are
  affected by the current transformation matrix.</p>

  <p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
  is passed an animated image as its <var title="">image</var>
  argument, the user agent must use the poster frame of the animation,
  or, if there is no poster frame, the first frame of the
  animation.</p>
  <!-- drawImage() has an equivalent paragraph -->

  <p>When the <var title="">image</var> argument is an
  <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
  playback position</a> must be used as the source image, and the
  source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
  <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
  of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
  correction has been applied).</p>
  <!-- drawImage() has an equivalent paragraph -->

  <!--
   Requests for v5 features:
    * apply transforms to patterns, so you don't have to create
      transformed patterns manually by rendering them to an off-screen
      canvas then using that canvas as the pattern.
  -->

  </div>



  <h6 id=line-styles><span class=secno>4.8.11.1.5 </span>Line styles</h6>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current line width.</p>

    <p>Can be set, to change the line width. Values that are not
    finite values greater than zero are ignored.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current line cap style.</p>

    <p>Can be set, to change the line cap style.</p>

    <p>The possible line cap styles are <code>butt</code>,
    <code>round</code>, and <code>square</code>. Other values are
    ignored.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current line join style.</p>

    <p>Can be set, to change the line join style.</p>

    <p>The possible line join styles are <code>bevel</code>,
    <code>round</code>, and <code>miter</code>. Other values are
    ignored.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current miter limit ratio.</p>

    <p>Can be set, to change the miter limit ratio. Values that are
    not finite values greater than zero are ignored.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-linewidth title=dom-context-2d-lineWidth><code>lineWidth</code></dfn>
  attribute gives the width of lines, in coordinate space units. On
  getting, it must return the current value. On setting, zero,
  negative, infinite, and NaN values must be ignored, leaving the
  value unchanged; other values must change the current value to the
  new value.</p>

  <p>When the context is created, the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> attribute must
  initially have the value <code>1.0</code>.</p>

  <hr><p>The <dfn id=dom-context-2d-linecap title=dom-context-2d-lineCap><code>lineCap</code></dfn> attribute
  defines the type of endings that UAs will place on the end of
  lines. The three valid values are <code>butt</code>,
  <code>round</code>, and <code>square</code>. The <code>butt</code>
  value means that the end of each line has a flat edge perpendicular
  to the direction of the line (and that no additional line cap is
  added). The <code>round</code> value means that a semi-circle with
  the diameter equal to the width of the line must then be added on to
  the end of the line. The <code>square</code> value means that a
  rectangle with the length of the line width and the width of half
  the line width, placed flat against the edge perpendicular to the
  direction of the line, must be added at the end of each line.</p>

  <p>On getting, it must return the current value. On setting, if the
  new value is one of the literal strings <code>butt</code>,
  <code>round</code>, and <code>square</code>, then the current value
  must be changed to the new value; other values must ignored, leaving
  the value unchanged.</p>

  <p>When the context is created, the <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> attribute must
  initially have the value <code>butt</code>.</p>

  <hr><p>The <dfn id=dom-context-2d-linejoin title=dom-context-2d-lineJoin><code>lineJoin</code></dfn>
  attribute defines the type of corners that UAs will place where two
  lines meet. The three valid values are <code>bevel</code>,
  <code>round</code>, and <code>miter</code>.</p>

  <p>On getting, it must return the current value. On setting, if the
  new value is one of the literal strings <code>bevel</code>,
  <code>round</code>, and <code>miter</code>, then the current value
  must be changed to the new value; other values must be ignored,
  leaving the value unchanged.</p>

  <p>When the context is created, the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute must
  initially have the value <code>miter</code>.</p>

  <hr><p>A join exists at any point in a subpath shared by two consecutive
  lines. When a subpath is closed, then a join also exists at its
  first point (equivalent to its last point) connecting the first and
  last lines in the subpath.</p>

  <p>In addition to the point where the join occurs, two additional
  points are relevant to each join, one for each line: the two corners
  found half the line width away from the join point, one
  perpendicular to each line, each on the side furthest from the other
  line.</p>

  <p>A filled triangle connecting these two opposite corners with a
  straight line, with the third point of the triangle being the join
  point, must be rendered at all joins. The <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute controls
  whether anything else is rendered. The three aforementioned values
  have the following meanings:</p>

  <p>The <code>bevel</code> value means that this is all that is
  rendered at joins.</p>

  <p>The <code>round</code> value means that a filled arc connecting
  the two aforementioned corners of the join, abutting (and not
  overlapping) the aforementioned triangle, with the diameter equal to
  the line width and the origin at the point of the join, must be
  rendered at joins.</p>

  <p>The <code>miter</code> value means that a second filled triangle
  must (if it can given the miter length) be rendered at the join,
  with one line being the line between the two aforementioned corners,
  abutting the first triangle, and the other two being continuations of
  the outside edges of the two joining lines, as long as required to
  intersect without going over the miter length.</p>

  <p>The miter length is the distance from the point where the join
  occurs to the intersection of the line edges on the outside of the
  join. The miter limit ratio is the maximum allowed ratio of the
  miter length to half the line width. If the miter length would cause
  the miter limit ratio to be exceeded, this second triangle must not
  be rendered.</p>

  <p>The miter limit ratio can be explicitly set using the <dfn id=dom-context-2d-miterlimit title=dom-context-2d-miterLimit><code>miterLimit</code></dfn>
  attribute. On getting, it must return the current value. On setting,
  zero, negative, infinite, and NaN values must be ignored, leaving
  the value unchanged; other values must change the current value to
  the new value.</p>

  <p>When the context is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute must
  initially have the value <code>10.0</code>.</p>

  <!--
v5: dashed lines have been requested. Philip Taylor provides these
notes on what would need to be defined for dashed lines:
> I don't think it's entirely trivial to add, to the detail that's
> necessary in a specification. The common graphics APIs (at least
> Cairo, Quartz and java.awt.Graphics, and any SVG implementation) all
> have dashes specified by passing an array of dash lengths (alternating
> on/off), so that should be alright as long as you define what units
> it's measured in and what happens when you specify an odd number of
> values and how errors are handled and what happens if you update the
> array later. But after that, what does it do when stroking multiple
> subpaths, in terms of offsetting the dashes? When you use strokeRect,
> where is offset 0? Does moveTo reset the offset? How does it interact
> with lineCap/lineJoin? All the potential issues need test cases too,
> and the implementations need to make sure they handle any edge cases
> that the underlying graphics library does differently. (SVG Tiny 1.2
> appears to skip some of the problems by leaving things undefined and
> allowing whatever behavior the graphics library has.)

Another request has been for hairline width lines, that remain
hairline width with transform. ack Shaun Morris.
  -->

  </div>


  <h6 id=shadows><span class=secno>4.8.11.1.6 </span><dfn>Shadows</dfn></h6>

  <p>All drawing operations are affected by the four global shadow
  attributes.</p>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current shadow color.</p>

    <p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> [ = <var title="">value</var> ]</dt>
   <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current shadow offset.</p>

    <p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current level of blur applied to shadows.</p>

    <p>Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-shadowcolor title=dom-context-2d-shadowColor><code>shadowColor</code></dfn>
  attribute sets the color of the shadow.</p>

  <p>When the context is created, the <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> attribute
  initially must be fully-transparent black.</p>

  <p>On getting, the <a href=#serialization-of-a-color title="serialization of a
  color">serialization of the color</a> must be returned.</p>

  <p>On setting, the new value must be parsed as a CSS &lt;color&gt;
  value and the color assigned. If the value is not a valid color,
  then it must be ignored, and the attribute must retain its previous
  value. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>

  <p>The <dfn id=dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX><code>shadowOffsetX</code></dfn>
  and <dfn id=dom-context-2d-shadowoffsety title=dom-context-2d-shadowOffsetY><code>shadowOffsetY</code></dfn>
  attributes specify the distance that the shadow will be offset in
  the positive horizontal and positive vertical distance
  respectively. Their values are in coordinate space units. They are
  not affected by the current transformation matrix.</p>

  <p>When the context is created, the shadow offset attributes must
  initially have the value <code>0</code>.</p>

  <p>On getting, they must return their current value. On setting, the
  attribute being set must be set to the new value, except if the
  value is infinite or NaN, in which case the new value must be
  ignored.</p>

  <p>The <dfn id=dom-context-2d-shadowblur title=dom-context-2d-shadowBlur><code>shadowBlur</code></dfn>
  attribute specifies the size of the blurring effect. (The units do
  not map to coordinate space units, and are not affected by the
  current transformation matrix.)</p>

  <p>When the context is created, the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> attribute must
  initially have the value <code>0</code>.</p>

  <p>On getting, the attribute must return its current value. On
  setting the attribute must be set to the new value, except if the
  value is negative, infinite or NaN, in which case the new value must
  be ignored.</p>

  <p><dfn id=when-shadows-are-drawn title="when shadows are drawn">Shadows are only drawn
  if</dfn> the opacity component of the alpha component of the color
  of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> is
  non-zero and either the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is non-zero, or
  the <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>
  is non-zero, or the <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> is
  non-zero.</p>

  <p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, they must be rendered as follows:</p>

  <ol><li> <p>Let <var title="">A</var> be an infinite transparent black
   bitmap on which the source image for which a shadow is being
   created has been rendered.</p> </li>

   <li> <p>Let <var title="">B</var> be an infinite transparent black
   bitmap, with a coordinate space and an origin identical to <var title="">A</var>.</p> </li>

   <li> <p>Copy the alpha channel of <var title="">A</var> to <var title="">B</var>, offset by <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> in the
   positive <var title="">x</var> direction, and <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> in the
   positive <var title="">y</var> direction.</p> </li>

   <li> <p>If <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is greater than
   0:</p>

    <ol><li> <p>If <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is less than
     8, let <var title="">&sigma;</var> be half the value of <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>; otherwise,
     let <var title="">&sigma;</var> be the square root of multiplying
     the value of <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> by
     2.</li>

     <li> <p>Perform a 2D Gaussian Blur on <var title="">B</var>,
     using <var title="">&sigma;</var> as the standard deviation.</p>
     <!-- wish i could find a reference for this --> </li>

    </ol><p>User agents may limit values of <var title="">&sigma;</var> to
    an implementation-specific maximum value to avoid exceeding
    hardware limitations during the Gaussian blur operation.</p>

   </li>

   <li> <p>Set the red, green, and blue components of every pixel in
   <var title="">B</var> to the red, green, and blue components
   (respectively) of the color of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>.</p> </li>

   <li> <p>Multiply the alpha component of every pixel in <var title="">B</var> by the alpha component of the color of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>.</p> </li>

   <li> <p>The shadow is in the bitmap <var title="">B</var>, and is
   rendered as part of the drawing model described below.</p> </li>

  </ol></div>

  <p>If the current composition operation is <code title=gcop-copy><a href=#gcop-copy>copy</a></code>, shadows effectively won't render
  (since the shape will overwrite the shadow).</p>


  <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</h6>

  <p>There are three methods that immediately draw rectangles to the
  bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
  left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
  respectively.</p>

  <div class=impl>

  <p>The <a href=#transformations title=dom-context-2d-transformation>current
  transformation matrix</a> must be applied to the following four
  coordinates, which form the path that must then be closed to get the
  specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
  <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
  <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
  <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>

  <p>Shapes are painted without affecting the current path, and are
  subject to the <a href=#clipping-region title="clipping region">clipping region</a>,
  and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
  operators</a>.</p>

  </div>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>

   <dd>

    <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>

   <dd>

    <p>Paints the given rectangle onto the canvas, using the current fill style.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>

   <dd>

    <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
  specified rectangle that also intersect the current clipping region
  to a fully transparent black, erasing any previous image. If either
  height or width are zero, this method has no effect.</p>

  <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
  rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
  or width are zero, this method has no effect.</p>

  <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
  rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
  appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
  both height and width are zero, this method has no effect, since
  there is no path to stroke (it's a point). If only one of the two is
  zero, then the method will draw a line instead (the path for the
  outline is just a straight line along the non-zero dimension).</p>

  </div>


  <h6 id=complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</h6>

  <p>The context always has a current path. There is only one current
  path, it is not part of the <a href=#drawing-state>drawing state</a>.</p>

  <p>A <dfn id=path>path</dfn> has a list of zero or more subpaths. Each
  subpath consists of a list of one or more points, connected by
  straight or curved lines, and a flag indicating whether the subpath
  is closed or not. A closed subpath is one where the last point of
  the subpath is connected to the first point of the subpath by a
  straight line. Subpaths with fewer than two points are ignored when
  painting the path.</p>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>

   <dd>

    <p>Resets the current path.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>

   <dd>

    <p>Creates a new subpath with the given point.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-closePath><a href=#dom-context-2d-closepath>closePath</a></code>()</dt>

   <dd>

    <p>Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-lineTo><a href=#dom-context-2d-lineto>lineTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>

   <dd>

    <p>Adds the given point to the current subpath, connected to the previous one by a straight line.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-quadraticCurveTo><a href=#dom-context-2d-quadraticcurveto>quadraticCurveTo</a></code>(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</dt>

   <dd>

    <p>Adds the given point to the current path, connected to the previous one by a quadratic B&eacute;zier curve with the given control point.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-bezierCurveTo><a href=#dom-context-2d-beziercurveto>bezierCurveTo</a></code>(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</dt>

   <dd>

    <p>Adds the given point to the current path, connected to the previous one by a cubic B&eacute;zier curve with the given control points.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>

   <dd>

    <p>Adds a point to the current path, connected to the previous one
    by a straight line, then adds a second point to the current path,
    connected to the previous one by an arc whose properties are
    described by the arguments.</p>

    <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the given
    radius is negative.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</dt>

   <dd>

    <p>Adds points to the subpath such that the arc described by the
    circumference of the circle described by the arguments, starting
    at the given start angle and ending at the given end angle, going
    in the given direction, is added to the path, connected to the
    previous point by a straight line.</p>

    <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the given
    radius is negative.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-rect><a href=#dom-context-2d-rect>rect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>

   <dd>

    <p>Adds a new closed subpath to the path, representing the given rectangle.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-fill><a href=#dom-context-2d-fill>fill</a></code>()</dt>

   <dd>

    <p>Fills the subpaths with the current fill style.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-stroke><a href=#dom-context-2d-stroke>stroke</a></code>()</dt>

   <dd>

    <p>Strokes the subpaths with the current stroke style.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-clip><a href=#dom-context-2d-clip>clip</a></code>()</dt>

   <dd>

    <p>Further constrains the clipping region to the given path.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-isPointInPath><a href=#dom-context-2d-ispointinpath>isPointInPath</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>

   <dd>

    <p>Returns true if the given point is in the current path.</p>

   </dd>

  </dl><div class=impl>

  <p>Initially, the context's path must have zero subpaths.</p>

  <p>The points and lines added to the path by these methods must be
  transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
  matrix</a> as they are added.</p>


  <p>The <dfn id=dom-context-2d-beginpath title=dom-context-2d-beginPath><code>beginPath()</code></dfn>
  method must empty the list of subpaths so that the context once
  again has zero subpaths.</p>


  <p>The <dfn id=dom-context-2d-moveto title=dom-context-2d-moveTo><code>moveTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
  create a new subpath with the specified point as its first (and
  only) point.</p>

  <p>When the user agent is to <dfn id=ensure-there-is-a-subpath>ensure there is a subpath</dfn>
  for a coordinate (<var title="">x</var>, <var title="">y</var>), the
  user agent must check to see if the context has any subpaths, and if
  it does not, then the user agent must create a new subpath with the
  point (<var title="">x</var>, <var title="">y</var>) as its first
  (and only) point, as if the <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo()</a></code> method had been
  called.</p>


  <p>The <dfn id=dom-context-2d-closepath title=dom-context-2d-closePath><code>closePath()</code></dfn>
  method must do nothing if the context has no subpaths. Otherwise, it
  must mark the last subpath as closed, create a new subpath whose
  first point is the same as the previous subpath's first point, and
  finally add this new subpath to the path.</p>

  <p class=note>If the last subpath had more than one point in its
  list of points, then this is equivalent to adding a straight line
  connecting the last point back to the first point, thus "closing"
  the shape, and then repeating the last (possibly implied) <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo()</a></code> call.</p>


  <p>New points and the lines connecting them are added to subpaths
  using the methods described below. In all cases, the methods only
  modify the last subpath in the context's paths.</p>


  <p>The <dfn id=dom-context-2d-lineto title=dom-context-2d-lineTo><code>lineTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
  <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">x</var>, <var title="">y</var>)</span> if the context has
  no subpaths. Otherwise, it must connect the last point in the
  subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a straight line, and must then add the given
  point (<var title="">x</var>, <var title="">y</var>) to the
  subpath.</p>


  <p>The <dfn id=dom-context-2d-quadraticcurveto title=dom-context-2d-quadraticCurveTo><code>quadraticCurveTo(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>,
  <var title="">y</var>)</code></dfn> method must <a href=#ensure-there-is-a-subpath>ensure there
  is a subpath</a> for <span title="">(<var title="">cpx</var>,
  <var title="">cpy</var>)</span>, and then must connect the last
  point in the subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a quadratic B&eacute;zier curve with control
  point (<var title="">cpx</var>, <var title="">cpy</var>), and must
  then add the given point (<var title="">x</var>, <var title="">y</var>) to the subpath. <a href=#refsBEZIER>[BEZIER]</a></p>


  <p>The <dfn id=dom-context-2d-beziercurveto title=dom-context-2d-bezierCurveTo><code>bezierCurveTo(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method must
  <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">cp1x</var>, <var title="">cp1y</var>)</span>, and then must
  connect the last point in the subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a cubic B&eacute;zier
  curve with control points (<var title="">cp1x</var>, <var title="">cp1y</var>) and (<var title="">cp2x</var>, <var title="">cp2y</var>). Then, it must add the point (<var title="">x</var>, <var title="">y</var>) to the subpath. <a href=#refsBEZIER>[BEZIER]</a></p>

  <hr><p>The <dfn id=dom-context-2d-arcto title=dom-context-2d-arcTo><code>arcTo(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>,
  <var title="">y2</var>, <var title="">radius</var>)</code></dfn>
  method must first <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">x1</var>, <var title="">y1</var>)</span>. Then, the behavior depends on the
  arguments and the last point in the subpath, as described below.</p>

  <p>Negative values for <var title="">radius</var> must cause the
  implementation to raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
  exception.</p>

  <p>Let the point (<var title="">x0</var>, <var title="">y0</var>) be
  the last point in the subpath.</p>

  <p>If the point (<var title="">x0</var>, <var title="">y0</var>) is
  equal to the point (<var title="">x1</var>, <var title="">y1</var>),
  or if the point (<var title="">x1</var>, <var title="">y1</var>) is
  equal to the point (<var title="">x2</var>, <var title="">y2</var>),
  or if the radius <var title="">radius</var> is zero, then the method
  must add the point (<var title="">x1</var>, <var title="">y1</var>)
  to the subpath, and connect that point to the previous point (<var title="">x0</var>, <var title="">y0</var>) by a straight line.</p>

  <p>Otherwise, if the points (<var title="">x0</var>, <var title="">y0</var>), (<var title="">x1</var>, <var title="">y1</var>), and (<var title="">x2</var>, <var title="">y2</var>) all lie on a single straight line, then the
  method must add the point (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and connect that point to the
  previous point (<var title="">x0</var>, <var title="">y0</var>) by a
  straight line.</p>

  <p>Otherwise, let <var title="">The Arc</var> be the shortest arc
  given by circumference of the circle that has radius <var title="">radius</var>, and that has one point tangent to the
  half-infinite line that crosses the point (<var title="">x0</var>,
  <var title="">y0</var>) and ends at the point (<var title="">x1</var>, <var title="">y1</var>), and that has a different
  point tangent to the half-infinite line that ends at the point (<var title="">x1</var>, <var title="">y1</var>) and crosses the point
  (<var title="">x2</var>, <var title="">y2</var>). The points at
  which this circle touches these two lines are called the start and
  end tangent points respectively. The method must connect the point
  (<var title="">x0</var>, <var title="">y0</var>) to the start
  tangent point by a straight line, adding the start tangent point to
  the subpath, and then must connect the start tangent point to the
  end tangent point by <var title="">The Arc</var>, adding the end
  tangent point to the subpath.</p>

  <hr><p>The <dfn id=dom-context-2d-arc title=dom-context-2d-arc><code>arc(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>,
  <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> method draws an arc. If
  the context has any subpaths, then the method must add a straight
  line from the last point in the subpath to the start point of the
  arc. In any case, it must draw the arc between the start point of
  the arc and the end point of the arc, and add the start and end
  points of the arc to the subpath. The arc and its start and end
  points are defined as follows:</p>

  <p>Consider a circle that has its origin at (<var title="">x</var>,
  <var title="">y</var>) and that has radius <var title="">radius</var>. The points at <var title="">startAngle</var>
  and <var title="">endAngle</var> along this circle's circumference,
  measured in radians clockwise from the positive x-axis, are the
  start and end points respectively.</p>

  <p>If the <var title="">anticlockwise</var> argument is false and
  <span title=""><var title="">endAngle</var>-<var title="">startAngle</var></span> is equal to or greater than
  <span title="">2&pi;</span>, or, if the <var title="">anticlockwise</var>
  argument is <em>true</em> and <span title=""><var title="">startAngle</var>-<var title="">endAngle</var></span> is
  equal to or greater than <span title="">2&pi;</span>, then the arc is the
  whole circumference of this circle.</p>

  <!--alternatively (this is not equivalent, but might make more
  sense, if browsers are willing to change to it: <p>If the absolute
  magnitude of the difference between the <var
  title="">startAngle</var> and <var title="">endAngle</var> angles is
  equal to or greater than <span title="">2&pi;</span>, then the arc is the
  whole circumference of this circle.</p>-->

  <p>Otherwise, the arc is the path along the circumference of this
  circle from the start point to the end point, going anti-clockwise
  if the <var title="">anticlockwise</var> argument is true, and
  clockwise otherwise. Since the points are on the circle, as opposed
  to being simply angles from zero, the arc can never cover an angle
  greater than <span title="">2&pi;</span> radians. If the two points are the
  same, or if the radius is zero, then the arc is defined as being of
  zero length in both directions.</p>

  <p>Negative values for <var title="">radius</var> must cause the
  implementation to raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
  exception.</p>

  <hr><p>The <dfn id=dom-context-2d-rect title=dom-context-2d-rect><code>rect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must create a new subpath
  containing just the four points (<var title="">x</var>, <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>,
  <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>, <var title="">y</var>+<var title="">h</var>),
  (<var title="">x</var>, <var title="">y</var>+<var title="">h</var>), with those four points connected by straight
  lines, and must then mark the subpath as closed. It must then create
  a new subpath with the point (<var title="">x</var>, <var title="">y</var>) as the only point in the subpath.</p>


  <!-- v5 feature request:
        * points as a primitive shape
          http://home.comcast.net/~urbanjost/canvas/vogle4.html
  -->


  <p>The <dfn id=dom-context-2d-fill title=dom-context-2d-fill><code>fill()</code></dfn>
  method must fill all the subpaths of the current path, using
  <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, and using
  the non-zero winding number rule. Open subpaths must be implicitly
  closed when being filled (without affecting the actual
  subpaths).</p>

  <p class=note>Thus, if two overlapping but otherwise independent
  subpaths have opposite windings, they cancel out and result in no
  fill. If they have the same winding, that area just gets painted
  once.</p>

  <p>The <dfn id=dom-context-2d-stroke title=dom-context-2d-stroke><code>stroke()</code></dfn> method
  must calculate the strokes of all the subpaths of the current path,
  using the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>,
  <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
  appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes, and
  then fill the combined stroke area using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>
  attribute.</p>

  <p class=note>Since the subpaths are all stroked as one,
  overlapping parts of the paths in one stroke operation are treated
  as if their union was what was painted.</p>

  <p>Paths, when filled or stroked, must be painted without affecting
  the current path, and must be subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
  operators</a>. (Transformations affect the path when the path is
  created, not when it is painted, though the stroke <em>style</em> is
  still affected by the transformation during painting.)</p>

  <p>Zero-length line segments must be pruned before stroking a
  path. Empty subpaths must be ignored.</p>


  <p>The <dfn id=dom-context-2d-clip title=dom-context-2d-clip><code>clip()</code></dfn>
  method must create a new <dfn id=clipping-region>clipping region</dfn> by calculating
  the intersection of the current clipping region and the area
  described by the current path, using the non-zero winding number
  rule. Open subpaths must be implicitly closed when computing the
  clipping region, without affecting the actual subpaths. The new
  clipping region replaces the current clipping region.</p>

  <p>When the context is initialized, the clipping region must be set
  to the rectangle with the top left corner at (0,0) and the width and
  height of the coordinate space.</p>

  <!-- v5
   Jordan OSETE suggests:
    * support ways of extending the clipping region (union instead of intersection)
       - also "add", "subtract", "replace", "intersect" and "xor"
    * support ways of resetting the clipping region without save/restore
  -->


  <p>The <dfn id=dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath><code>isPointInPath(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
  return true if the point given by the <var title="">x</var> and <var title="">y</var> coordinates passed to the method, when treated as
  coordinates in the canvas coordinate space unaffected by the current
  transformation, is inside the current path as determined by the
  non-zero winding number rule; and must return false
  otherwise. Points on the path itself are considered to be inside the
  path. If either of the arguments is infinite or NaN, then the method
  must return false.</p>

  </div>


  <h6 id=focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</h6> <!-- a v4 feature -->

  <p>When a canvas is interactive, authors should include focusable
  elements in the element's fallback content corresponding to each
  focusable part of the canvas.</p>

  <p>To indicate which focusable part of the canvas is currently
  focused, authors should use the <code title=dom-context-2d-drawFocusRing><a href=#dom-context-2d-drawfocusring>drawFocusRing()</a></code> method,
  passing it the element for which a ring is being drawn. This method
  only draws the focus ring if the element is focused, so that it can
  simply be called whenever drawing the element, without checking
  whether the element is focused or not first. The position of the
  center of the control, or of the editing caret if the control has
  one, should be given in the <var title="">x</var> and <var title="">y</var> arguments.</p>

  <dl class=domintro><dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title=dom-context-2d-drawFocusRing><a href=#dom-context-2d-drawfocusring>drawFocusRing</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, [ <var title="">canDrawCustom</var> ])</dt>

   <dd>

    <p>If the given element is focused, draws a focus ring around the
    current path, following the platform conventions for focus
    rings. The given coordinate is used if the user's attention needs
    to be brought to a particular position (e.g. if a magnifier is
    following the editing caret in a text field).</p>

    <p>If the <var title="">canDrawCustom</var> argument is true, then
    the focus ring is only drawn if the user has configured his system
    to draw focus rings in a particular manner. (For example, high
    contrast focus rings.)</p>

    <p>Returns true if the given element is focused, the <var title="">canDrawCustom</var> argument is true, and the user has
    not configured his system to draw focus rings in a particular
    manner. Otherwise, returns false.</p>

    <p>When the method returns true, the author is expected to
    manually draw a focus ring.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-drawfocusring title=dom-context-2d-drawFocusRing><code>drawFocusRing(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, [<var title="">canDrawCustom</var>])</code></dfn>
  method, when invoked, must run the following steps:</p>

  <ol><li><p>If <var title="">element</var> is not focused or is not a
   descendant of the element with whose context the method is
   associated, then return false and abort these steps.</li>

   <li><p>Transform the given point (<var title="">x</var>, <var title="">y</var>) according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
   matrix</a>.</li>

   <li><p>Optionally, inform the user that the focus is at the given
   (transformed) coordinate on the canvas. (For example, this could
   involve moving the user's magnification tool.)</li>

   <li>

    <p>If the user has requested the use of particular focus rings
    (e.g. high-contrast focus rings), or if the <var title="">canDrawCustom</var> argument is absent or false, then
    draw a focus ring of the appropriate style along the path,
    following platform conventions, return false, and abort these
    steps.</p>

    <p>The focus ring should not be subject to the <a href=#shadows title=shadows>shadow effects</a>, the <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, or the <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
    operators</a>, but <em>should</em> be subject to the <a href=#clipping-region title="clipping region">clipping region</a>.</p>

   </li>

   <li><p>Return true.</li>

  </ol></div>

  <div class=example>

   <p>This <code><a href=#the-canvas-element>canvas</a></code> element has a couple of checkboxes:</p>

   <pre>&lt;canvas height=400 width=750&gt;
 &lt;label&gt;&lt;input type=checkbox id=showA&gt; Show As&lt;/label&gt;
 &lt;label&gt;&lt;input type=checkbox id=showB&gt; Show Bs&lt;/label&gt;
 &lt;!-- ... --&gt;
&lt;/canvas&gt;
&lt;script&gt;
 function drawCheckbox(context, element, x, y) {
   context.save();
   context.font = '10px sans-serif';
   context.textAlign = 'left';
   context.textBaseline = 'middle';
   var metrics = context.measureText(element.labels[0].textContent);
   context.beginPath();
   context.strokeStyle = 'black';
   context.rect(x-5, y-5, 10, 10);
   context.stroke();
   if (element.checked) {
     context.fillStyle = 'black';
     context.fill();
   }
   context.fillText(element.labels[0].textContent, x+5, y);
   context.beginPath();
   context.rect(x-7, y-7, 12 + metrics.width+2, 14);
   if (context.drawFocusRing(element, x, y, true)) {
     context.strokeStyle = 'silver';
     context.stroke();
   }
   context.restore();
 }
 function drawBase() { /* ... */ }
 function drawAs() { /* ... */ }
 function drawBs() { /* ... */ }
 function redraw() {
   var canvas = document.getElementsByTagName('canvas')[0];
   var context = canvas.getContext('2d');
   context.clearRect(0, 0, canvas.width, canvas.height);
   drawCheckbox(context, document.getElementById('showA'), 20, 40);
   drawCheckbox(context, document.getElementById('showB'), 20, 60);
   drawBase();
   if (document.getElementById('showA').checked)
     drawAs();
   if (document.getElementById('showB').checked)
     drawBs();
 }
 function processClick(event) {
   var canvas = document.getElementsByTagName('canvas')[0];
   var context = canvas.getContext('2d');
   var x = event.clientX - canvas.offsetLeft;
   var y = event.clientY - canvas.offsetTop;
   drawCheckbox(context, document.getElementById('showA'), 20, 40);
   if (context.isPointInPath(x, y))
     document.getElementById('showA').checked = !(document.getElementById('showA').checked);
   drawCheckbox(context, document.getElementById('showB'), 20, 60);
   if (context.isPointInPath(x, y))
     document.getElementById('showB').checked = !(document.getElementById('showB').checked);
   redraw();
 }
 document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
 document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
 document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
 document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
 redraw();
&lt;/script&gt;</pre>
<!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/340 -->

  </div>


  <h6 id=text-0><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current font settings.</p>

    <p>Can be set, to change the font. The syntax is the same as for
    the CSS 'font' property; values that cannot be parsed as CSS font
    values are ignored.</p>

    <p>Relative keywords and lengths are computed relative to the font
    of the <code><a href=#the-canvas-element>canvas</a></code> element.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current text alignment settings.</p>

    <p>Can be set, to change the alignment. The possible values are
    <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, and <code title="">center</code>. Other values are ignored. The default is
    <code title="">start</code>.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current baseline alignment settings.</p>

    <p>Can be set, to change the baseline alignment. The possible
    values and their meanings are given below. Other values are
    ignored. The default is <code title="">alphabetic</code>.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
   <dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>

   <dd>

    <p>Fills or strokes (respectively) the given text at the given
    position. If a maximum width is provided, the text will be scaled
    to fit that width if necessary.</p>

   </dd>

   <dt><var title="">metrics</var> = <var title="">context</var> . <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText</a></code>(<var title="">text</var>)</dt>

   <dd>

    <p>Returns a <code><a href=#textmetrics>TextMetrics</a></code> object with the metrics of the given text in the current font.</p>

   </dd>

   <dt><var title="">metrics</var> . <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code></dt>

   <dd>

    <p>Returns the advance width of the text that was passed to the
    <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
    method.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
  attribute, on setting, must be parsed the same way as the 'font'
  property of CSS (but without supporting property-independent style
  sheet syntax like 'inherit'), and the resulting font must be
  assigned to the context, with the 'line-height' component forced to
  'normal', with the 'font-size' component converted to CSS pixels,
  and with system fonts being computed to explicit values. If the new
  value is syntactically incorrect (including using
  property-independent style sheet syntax like 'inherit' or
  'initial'), then it must be ignored, without assigning a new font
  value. <a href=#refsCSS>[CSS]</a></p>

  <p>Font names must be interpreted in the context of the
  <code><a href=#the-canvas-element>canvas</a></code> element's stylesheets; any fonts embedded using
  <code title="">@font-face</code> must therefore be available once
  they are loaded. (If a font is referenced before it is fully loaded,
  then it must be treated as if it was an unknown font, falling back
  to another as described by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>

  <p>Only vector fonts should be used by the user agent; if a user
  agent were to use bitmap fonts then transformations would likely
  make the font look very ugly.</p>

  <p>On getting, the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>
  attribute must return the <span title="serializing a CSS
  value">serialized form</span> of the current font of the context
  (with no 'line-height' component). <a href=#refsCSSOM>[CSSOM]</a></p>

  <div class=example>

   <p>For example, after the following statement:</p>

   <pre>context.font = 'italic 400 12px/2 Unknown Font, sans-serif';</pre>

   <p>...the expression <code title="">context.font</code> would
   evaluate to the string "<code title="">italic&nbsp;12px&nbsp;"Unknown&nbsp;Font",&nbsp;sans-serif</code>". The
   "400" font-weight doesn't appear because that is the default
   value. The line-height doesn't appear because it is forced to
   "normal", the default value.</p>

  </div>

  <p>When the context is created, the font of the context must be set
  to 10px sans-serif. When the 'font-size' component is set to lengths
  using percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
  keywords, these must be interpreted relative to the computed value
  of the 'font-size' property of the corresponding <code><a href=#the-canvas-element>canvas</a></code>
  element at the time that the attribute is set. When the
  'font-weight' component is set to the relative values 'bolder' and
  'lighter', these must be interpreted relative to the computed value
  of the 'font-weight' property of the corresponding
  <code><a href=#the-canvas-element>canvas</a></code> element at the time that the attribute is
  set. If the computed values are undefined for a particular case
  (e.g. because the <code><a href=#the-canvas-element>canvas</a></code> element is not <a href=#in-a-document>in a
  <code>Document</code></a>), then the relative keywords must be
  interpreted relative to the normal-weight 10px sans-serif
  default.</p>

  <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
  attribute, on getting, must return the current value. On setting, if
  the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
  value must be changed to the new value. Otherwise, the new value
  must be ignored. When the context is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
  initially have the value <code title="">start</code>.</p>

  <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
  IDL attribute, on getting, must return the current value. On
  setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>,
  <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
  or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
  then the value must be changed to the new value. Otherwise, the new
  value must be ignored. When the context is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
  must initially have the value <code title="">alphabetic</code>.</p>

  </div>

  <p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
  attribute's allowed keywords correspond to alignment points in the
  font:</p>

  <p><img alt="The top of the em square is
  roughly at the top of the glyphs in a font, the hanging baseline is
  where some glyphs like &#2310; are anchored, the middle is half-way
  between the top of the em square and the bottom of the em square,
  the alphabetic baseline is where characters like &Aacute;, &yuml;,
  f, and &Omega; are anchored, the ideographic baseline is
  where glyphs like &#31169; and &#36948; are anchored, and the bottom
  of the em square is roughly at the bottom of the glyphs in a
  font. The top and bottom of the bounding box can be far from these
  baselines, due to glyphs extending far outside the em square." src=images/baselines.png></p>

  <p>The keywords map to these alignment points as follows:</p>

  <dl><dt><dfn id=dom-context-2d-textbaseline-top title=dom-context-2d-textBaseline-top><code>top</code></dfn>
   <dd>The top of the em square</dd>

   <dt><dfn id=dom-context-2d-textbaseline-hanging title=dom-context-2d-textBaseline-hanging><code>hanging</code></dfn>
   <dd>The hanging baseline</dd>

   <dt><dfn id=dom-context-2d-textbaseline-middle title=dom-context-2d-textBaseline-middle><code>middle</code></dfn>
   <dd>The middle of the em square</dd>

   <dt><dfn id=dom-context-2d-textbaseline-alphabetic title=dom-context-2d-textBaseline-alphabetic><code>alphabetic</code></dfn>
   <dd>The alphabetic baseline</dd>

   <dt><dfn id=dom-context-2d-textbaseline-ideographic title=dom-context-2d-textBaseline-ideographic><code>ideographic</code></dfn>
   <dd>The ideographic baseline</dd>

   <dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
   <dd>The bottom of the em square</dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-filltext title=dom-context-2d-fillText><code>fillText()</code></dfn> and
  <dfn id=dom-context-2d-stroketext title=dom-context-2d-strokeText><code>strokeText()</code></dfn>
  methods take three or four arguments, <var title="">text</var>, <var title="">x</var>, <var title="">y</var>, and optionally <var title="">maxWidth</var>, and render the given <var title="">text</var> at the given (<var title="">x</var>, <var title="">y</var>) coordinates ensuring that the text isn't wider
  than <var title="">maxWidth</var> if specified, using the current
  <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
  values. Specifically, when the methods are called, the user agent
  must run the following steps:</p>

  <ol><li><p>Let <var title="">font</var> be the current font of the
   context, as given by the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute.</li>

   <li><p>Replace all the <a href=#space-character title="space character">space
   characters</a> in <var title="">text</var> with U+0020 SPACE
   characters.</li>

   <li><p>Form a hypothetical infinitely wide CSS line box containing
   a single inline box containing the text <var title="">text</var>,
   with all the properties at their initial values except the 'font'
   property of the inline box set to <var title="">font</var> and the
   'direction' property of the inline box set to <a href=#the-directionality>the
   directionality</a> of the <code><a href=#the-canvas-element>canvas</a></code> element. <a href=#refsCSS>[CSS]</a></li>

   <!-- if you insert a step here, make sure to adjust the next step's
   final words -->

   <li><p>If the <var title="">maxWidth</var> argument was specified
   and the hypothetical width of the inline box in the hypothetical
   line box is greater than <var title="">maxWidth</var> CSS pixels,
   then change <var title="">font</var> to have a more condensed font
   (if one is available or if a reasonably readable one can be
   synthesized by applying a horizontal scale factor to the font) or a
   smaller font, and return to the previous step.</li>

   <li>

    <p>Let the <var title="">anchor point</var> be a point on the
    inline box, determined by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values, as
    follows:</p>

    <p>Horizontal position:</p>

    <dl><dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">left</code></dt>
     <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">start</code> and <a href=#the-directionality>the directionality</a> of the
     <code><a href=#the-canvas-element>canvas</a></code> element is 'ltr'</dt>
     <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">end</code> and <a href=#the-directionality>the directionality</a> of the
     <code><a href=#the-canvas-element>canvas</a></code> element is 'rtl'</dt>

     <dd>Let the <var title="">anchor point</var>'s horizontal
     position be the left edge of the inline box.</dd>


     <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">right</code></dt>
     <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">end</code> and  <a href=#the-directionality>the directionality</a> of the
     <code><a href=#the-canvas-element>canvas</a></code> element is 'ltr'</dt>
     <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">start</code> and <a href=#the-directionality>the directionality</a> of the
     <code><a href=#the-canvas-element>canvas</a></code> element is 'rtl'</dt>

     <dd>Let the <var title="">anchor point</var>'s horizontal
     position be the right edge of the inline box.</dd>


     <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">center</code></dt>

     <dd>Let the <var title="">anchor point</var>'s horizontal
     position be half way between the left and right edges of the
     inline box.</dd>

    </dl><p>Vertical position:</p>

    <dl><dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code></dt>

     <dd>Let the <var title="">anchor point</var>'s vertical position
     be the top of the em box of the first available font of the
     inline box.</dd>


     <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code></dt>

     <dd>Let the <var title="">anchor point</var>'s vertical position
     be the hanging baseline of the first available font of the inline
     box.</dd>


     <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code></dt>

     <dd>Let the <var title="">anchor point</var>'s vertical position
     be half way between the bottom and the top of the em box of the
     first available font of the inline box.</dd>


     <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code></dt>

     <dd>Let the <var title="">anchor point</var>'s vertical position
     be the alphabetic baseline of the first available font of the inline
     box.</dd>


     <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code></dt>

     <dd>Let the <var title="">anchor point</var>'s vertical position
     be the ideographic baseline of the first available font of the inline
     box.</dd>


     <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code></dt>

     <dd>Let the <var title="">anchor point</var>'s vertical position
     be the bottom of the em box of the first available font of the
     inline box.</dd>

    </dl></li>

   <li>

    <p>Paint the hypothetical inline box as the shape given by the
    text's glyphs, as transformed by the <a href=#transformations title=dom-context-2d-transformation>current transformation
    matrix</a>, and anchored and sized so that before applying the
    <a href=#transformations title=dom-context-2d-transformation>current transformation
    matrix</a>, the <var title="">anchor point</var> is at (<var title="">x</var>, <var title="">y</var>) and each CSS pixel is
    mapped to one coordinate space unit.</p>

    <p>For <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code>
    <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
    applied to the glyphs and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
    ignored. For <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> the reverse
    holds and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
    applied to the glyph outlines and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
    ignored.</p>

    <p>Text is painted without affecting the current path, and is
    subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
    operators</a>.</p>

   </li>

  </ol><!--v5DVT - this is commented out until CSS can get its act together
enough to actual specify vertical text rendering (how long have we
been waiting now?)

WHEN EDITING THIS, FIX THE PARTS MARKED "&#x0058;&#x0058;&#x0058;" BELOW

  <p>The <dfn
  title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
  and <dfn
  title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
  methods take three or four arguments, <var title="">text</var>, <var
  title="">x</var>, <var title="">y</var>, and optionally <var
  title="">maxHeight</var>, and render the given <var
  title="">text</var> as vertical text at the given (<var
  title="">x</var>, <var title="">y</var>) coordinates ensuring that
  the text isn't taller than <var title="">maxHeight</var> if
  specified, using the current <code
  title="dom-context-2d-font">font</code> and <code
  title="dom-context-2d-textAlign">textAlign</code>
  values. Specifically, when the methods are called, the user agent
  must run the following steps:</p>

  <ol>

   <li><p>Let <var title="">font</var> be the current font of the
   context, as given by the <code
   title="dom-context-2d-font">font</code> attribute.</p></li>

   <li><p>Replace all the <span title="space character">space
   characters</span> in <var title="">text</var> with U+0020 SPACE
   characters.</p></li>

   <li><p>Form a <em class="&#x0058;&#x0058;&#x0058;">whatever CSS ends up calling
   vertical line boxes and inline boxes</em> containing the text <var
   title="">text</var>, with all the properties at their initial
   values except the 'font' property of the inline box set to <var
   title="">font</var> and the 'direction' property of the inline
   box set to <span>the directionality</span> of the <code>canvas</code>
   element.</p></li>

   <!- - if you insert a step here, make sure to adjust the next step's
   final words - ->

   <li><p>If the <var title="">maxHeight</var> argument was specified
   and the hypothetical height of the <em class="&#x0058;&#x0058;&#x0058;">box</em>
   in the hypothetical line box is greater than <var
   title="">maxHeight</var> CSS pixels, then change <var
   title="">font</var> to have a more condensed font (if one is
   available or if a reasonably readable one can be synthesized by
   applying an appropriate scale factor to the font) or a smaller
   font, and return to the previous step.</p></li>

   <li>

    <p>Let the <var title="">anchor point</var> be a point on the <em
    class="&#x0058;&#x0058;&#x0058;">inline box</var>, determined by the <code
    title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>

    <p>Vertical position:</p>

    <dl>

     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">start</code></dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">left</code> and <span>the directionality</span> of the
     <code>canvas</code> element is 'ltr'</dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">right</code> and <span>the directionality</span> of the
     <code>canvas</code> element is 'rtl'</dt>

     <dd>Let the <var title="">anchor point</var>'s vertical
     position be the top edge of the <em class="&#x0058;&#x0058;&#x0058;">inline
     box</em>.</dd>

     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">end</code></dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">right</code> and <span>the directionality</span> of the
     <code>canvas</code> element is 'ltr'</dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">left</code> and <span>the directionality</span> of the
     <code>canvas</code> element is 'rtl'</dt>

     <dd>Let the <var title="">anchor point</var>'s vertical
     position be the bottom edge of the <em class="&#x0058;&#x0058;&#x0058;">inline
     box</em>.</dd>


     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">center</code></dt>

     <dd>Let the <var title="">anchor point</var>'s vertical position
     be half way between the top and bottom edges of the <em
     class="&#x0058;&#x0058;&#x0058;">inline box</em>.</dd>

    </dl>

    <p>Let the horizontal position be half way between the left and
    right edges of the em box of the first available font of the <em
    class="&#x0058;&#x0058;&#x0058;">inline box</em>.</p>

   </li>

   <li>

    <p>Paint the hypothetical inline box as the shape given by the
    text's glyphs, as transformed by the <span
    title="dom-context-2d-transformation">current transformation
    matrix</span>, and anchored and sized so that before applying the
    <span title="dom-context-2d-transformation">current transformation
    matrix</span>, the <var title="">anchor point</var> is at (<var
    title="">x</var>, <var title="">y</var>) and each CSS pixel is
    mapped to one coordinate space unit.</p>

    <p>For <code
    title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
    <code title="dom-context-2d-fillStyle">fillStyle</code> must be
    applied and <code
    title="dom-context-2d-strokeStyle">strokeStyle</code> must be
    ignored. For <code
    title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
    the reverse holds and <code
    title="dom-context-2d-strokeStyle">strokeStyle</code> must be
    applied and <code
    title="dom-context-2d-fillStyle">fillStyle</code> must be
    ignored.</p>

    <p>Text is painted without affecting the current path, and is
    subject to <span title="shadows">shadow effects</span>, <span
    title="dom-context-2d-globalAlpha">global alpha</span>, the <span
    title="clipping region">clipping region</span>, and <span
    title="dom-context-2d-globalCompositeOperation">global composition
    operators</span>.</p>

   </li>

  </ol>

v5DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn>
  method takes one argument, <var title="">text</var>. When the method
  is invoked, the user agent must replace all the <a href=#space-character title="space
  character">space characters</a> in <var title="">text</var> with
  U+0020 SPACE characters, and then must form a hypothetical
  infinitely wide CSS line box containing a single inline box
  containing the text <var title="">text</var>, with all the
  properties at their initial values except the 'font' property of the
  inline element set to the current font of the context, as given by
  the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
  must then return a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
  <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
  the width of that inline box, in CSS pixels. <a href=#refsCSS>[CSS]</a></p>

  <p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
  returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
  attribute, <dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn>, which is set
  by the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
  method.</p>

  <p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
  of the box given by the font size (the em square size) and the width
  returned by <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> (the text
  width). This version of the specification does not provide a way to
  obtain the bounding box dimensions of the text. If the text is to be
  rendered and removed, care needs to be taken to replace the entire
  area of the canvas that the clipping region covers, not just the box
  given by the em square height and measured text width.</p>

  <!-- v5: Drawing text along a given path -->
  <!-- v5: Adding text to a path -->
  <!-- see also: http://www.w3.org/TR/SVG11/text.html#TextpathLayoutRules -->
  <!-- see also: http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas -->

  </div>

  <p class=note>A future version of the 2D context API may provide a
  way to render fragments of documents, rendered using CSS, straight
  to the canvas. This would be provided in preference to a dedicated
  way of doing multiline layout.</p>



  <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>

  <p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
  can be used.</p>

  <p>This method can be invoked with three different sets of arguments:</p>

  <ul class=brief><li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>
   <li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
   <li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
  </ul><!-- v3: drawImage() of an ImageData object might make sense (when resizing as well as filtering) - ack Charles Pritchard --><p>Each of those three can take either an
  <code><a href=#htmlimageelement>HTMLImageElement</a></code>, an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
  an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> for the <var title="">image</var>
  argument.</p>

  <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>
   <dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</dt>
   <dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</dt>

   <dd>

    <p>Draws the given image onto the canvas. The arguments are
    interpreted as follows:</p>

    <p><img alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle." src=images/drawImage.png></p>

    <p>If the first argument isn't an <code><a href=#the-img-element>img</a></code>,
    <code><a href=#the-canvas-element>canvas</a></code>, or <code><a href=#video>video</a></code> element, throws a
    <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code> exception. If the image has no
    image data, throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. If
    the numeric arguments don't make sense (e.g. the destination is a
    0&times;0 rectangle), throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
    exception. If the image isn't yet fully decoded, then nothing is
    drawn.</p>

   </dd>

  </dl><div class=impl>

  <p>If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such that
  one CSS pixel in the image is treated as one unit in the canvas
  coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, and <var title="">sh</var> arguments are omitted, they must default to 0, 0,
  the image's intrinsic width in image pixels, and the image's
  intrinsic height in image pixels, respectively.</p>

  <p>The <var title="">image</var> argument is an instance of either
  <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
  <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>. If the <var title="">image</var> is
  null, the implementation must raise a <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code>
  exception.</p> <!-- createPattern() has an equivalent paragraph -->

  <p>If the <var title="">image</var> argument is an
  <code><a href=#htmlimageelement>HTMLImageElement</a></code> object whose <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> attribute is false, or
  if the <var title="">image</var> argument is an
  <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
  <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
  implementation must return without drawing anything.</p>
  <!-- createPattern() has an equivalent paragraph -->

  <p>If the <var title="">image</var> argument is an
  <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
  dimension or a vertical dimension equal to zero, then the
  implementation must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
  exception.</p>
  <!-- createPattern() has an equivalent paragraph -->

  <p>The source rectangle is the rectangle whose corners are the four
  points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>).</p>

  <p>If the source rectangle is not entirely within the source image,
  or if one of the <var title="">sw</var> or <var title="">sh</var>
  arguments is zero, the implementation must raise an
  <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>

  <p>The destination rectangle is the rectangle whose corners are the
  four points (<var title="">dx</var>, <var title="">dy</var>),
  (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>), (<var title="">dx</var>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>).</p>

  <p>When <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> is
  invoked, the region of the image specified by the source rectangle
  must be painted on the region of the canvas specified by the
  destination rectangle, after applying the <a href=#transformations title=dom-context-2d-transformation>current transformation
  matrix</a> to the points of the destination rectangle.</p>

  <p>The original image data of the source image must be used, not the
  image as it is rendered (e.g. <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes on the source
  element have no effect). The image data must be processed in the
  original direction, even if the dimensions given are negative. <!--
  remove that last sentence if it causes confusion. Someone once
  suggested that 5,5,-2,-2 was different than 3,3,2,2; this is trying
  to clarify that this is no the case. --></p>

  <p class=note>This specification does not define the algorithm to
  use when scaling the image, if necessary.</p>

  <p class=note>When a canvas is drawn onto itself, the drawing
  model requires the source to be copied before the image is drawn
  back onto the canvas, so it is possible to copy parts of a canvas
  onto overlapping parts of itself.</p>

  <p>When the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method
  is passed an animated image as its <var title="">image</var>
  argument, the user agent must use the poster frame of the animation,
  or, if there is no poster frame, the first frame of the
  animation.</p>
  <!-- createPattern() has an equivalent paragraph -->

  <p>When the <var title="">image</var> argument is an
  <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
  playback position</a> must be used as the source image, and the
  source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
  <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
  of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
  correction has been applied).</p>
  <!-- createPattern() has an equivalent paragraph -->

  <p>Images are painted without affecting the current path, and are
  subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
  operators</a>.</p>

  </div>



  <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>

  <dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>

   <dd>

    <p>Returns an <code><a href=#imagedata>ImageData</a></code> object with the given
    dimensions in CSS pixels (which might map to a different number of
    actual device pixels exposed by the object itself). All the pixels
    in the returned object are transparent black.</p>

   </dd>

   <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">imagedata</var>)</dt>

   <dd>

    <p>Returns an <code><a href=#imagedata>ImageData</a></code> object with the same
    dimensions as the argument. All the pixels in the returned object
    are transparent black.</p>

    <p>Throws a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception if the
    argument is null.</p>

   </dd>

   <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData</a></code>(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</dt>

   <dd>

    <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image
    data for the given rectangle of the canvas.</p>

    <p>Throws a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception if any of the
    arguments are not finite. Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
    exception if the either of the width or height arguments are
    zero.</p>

   </dd>

   <dt><var title="">imagedata</var> . <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code></dt>
   <dt><var title="">imagedata</var> . <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code></dt>

   <dd>

    <p>Returns the actual dimensions of the data in the <code><a href=#imagedata>ImageData</a></code> object, in device pixels.</p>

   </dd>

   <dt><var title="">imagedata</var> . <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code></dt>

   <dd>

    <p>Returns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.</p>

   </dd>

   <dt><var title="">context</var> . <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData</a></code>(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var> [, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var> ])</dt>

   <dd>

    <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object
    onto the canvas. If a dirty rectangle is provided, only the pixels
    from that rectangle are painted.</p>

    <p>The <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>
    and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
    attributes, as well as the shadow attributes, are ignored for the
    purposes of this method call; pixels in the canvas are replaced
    wholesale, with no composition, alpha blending, no shadows,
    etc.</p>

    <p>If the first argument isn't an <code><a href=#imagedata>ImageData</a></code> object,
    throws a <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code> exception. Throws a
    <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception if any of the other
    arguments are not finite.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-context-2d-createimagedata title=dom-context-2d-createImageData><code>createImageData()</code></dfn>
  method is used to instantiate new blank <code><a href=#imagedata>ImageData</a></code>
  objects. When the method is invoked with two arguments <var title="">sw</var> and <var title="">sh</var>, it must return an
  <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a width
  in CSS pixels equal to the absolute magnitude of <var title="">sw</var> and a height in CSS pixels equal to the absolute
  magnitude of <var title="">sh</var>. When invoked with a single <var title="">imagedata</var> argument, it must return an
  <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with the same
  dimensions as the <code><a href=#imagedata>ImageData</a></code> object passed as the
  argument. The <code><a href=#imagedata>ImageData</a></code> object return must be filled
  with transparent black.</p>

  <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
  <var title="">sh</var>)</code></dfn> method must return an
  <code><a href=#imagedata>ImageData</a></code> object representing the underlying pixel data
  for the area of the canvas denoted by the rectangle whose corners are
  the four points (<var title="">sx</var>, <var title="">sy</var>),
  (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in canvas
  coordinate space units. Pixels outside the canvas must be returned
  as transparent black. Pixels must be returned as non-premultiplied
  alpha values.</p>

  <p>If any of the arguments to <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> or
  <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> are
  infinite or NaN, or if the <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code>
  method is invoked with only one argument but that argument is null,
  the method must instead raise a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code>
  exception. If either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, the method must instead raise
  an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>

  <p><code><a href=#imagedata>ImageData</a></code> objects must be initialized so that their
  <dfn id=dom-imagedata-width title=dom-imagedata-width><code>width</code></dfn> attribute
  is set to <var title="">w</var>, the number of physical device
  pixels per row in the image data, their <dfn id=dom-imagedata-height title=dom-imagedata-height><code>height</code></dfn> attribute is
  set to <var title="">h</var>, the number of rows in the image data,
  and their <dfn id=dom-imagedata-data title=dom-imagedata-data><code>data</code></dfn>
  attribute is initialized to a <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object
  holding the image data. At least one pixel's worth of image data
  must be returned.</p>

  <p>The <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object provides ordered,
  indexed access to the color components of each pixel of the image
  data. The data must be represented in left-to-right order, row by
  row top to bottom, starting with the top left, with each pixel's
  red, green, blue, and alpha components being given in that order for
  each pixel. Each component of each device pixel represented in this
  array must be in the range 0..255, representing the 8 bit value for
  that component. The components must be assigned consecutive indices
  starting with 0 for the top left pixel's red component.</p>

  <p>The <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object thus represents <var title="">h</var>&times;<var title="">w</var>&times;4 integers. The
  <dfn id=dom-canvaspixelarray-length title=dom-canvaspixelarray-length><code>length</code></dfn>
  attribute of a <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object must return this
  number.</p>

  <p>The object's <span>indices of the supported indexed
  properties</span> are the numbers in the range 0 .. <span title=""><var title="">h</var>&times;<var title="">w</var>&times;4-1</span>.</p>

  <p>When a <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object is <dfn id=dom-canvaspixelarray-get title=dom-CanvasPixelArray-get>indexed to retrieve an indexed
  property</dfn> <var title="">index</var>, the value returned must be
  the value of the <var title="">index</var>th component in the
  array.</p>

  <p>When a <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object is <dfn id=dom-canvaspixelarray-set title=dom-CanvasPixelArray-set>indexed to modify an indexed
  property</dfn> <var title="">index</var> with value <var title="">value</var>, the value of the <var title="">index</var>th
  component in the array must be set to <var title="">value</var>.</p>

  <p class=note>The width and height (<var title="">w</var> and <var title="">h</var>) might be different from the <var title="">sw</var>
  and <var title="">sh</var> arguments to the above methods, e.g. if
  the canvas is backed by a high-resolution bitmap, or if the <var title="">sw</var> and <var title="">sh</var> arguments are
  negative.</p>

  <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var>)</code></dfn> method writes data from
  <code><a href=#imagedata>ImageData</a></code> structures back to the canvas.</p>

  <p>If any of the arguments to the method are infinite or NaN, the
  method must raise a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception.</p>

  <p>If the first argument to the method is null or not an
  <code><a href=#imagedata>ImageData</a></code> object then the <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> method
  must raise a <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code> exception.</p>

  <p>When the last four arguments are omitted, they must be assumed to
  have the values 0, 0, the <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> member of the <var title="">imagedata</var> structure, and the <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> member of the <var title="">imagedata</var> structure, respectively.</p>

  <p>When invoked with arguments that do not, per the last few
  paragraphs, cause an exception to be raised, the <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> method
  must act as follows:</p>

  <ol><li>

    <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate
    of the device pixel in the underlying pixel data of the canvas
    corresponding to the <var title="">dx</var> coordinate in the
    canvas coordinate space.</p>

    <p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate
    of the device pixel in the underlying pixel data of the canvas
    corresponding to the <var title="">dy</var> coordinate in the
    canvas coordinate space.</p>

   </li>

   <li>

    <p>If <var title="">dirtyWidth</var> is negative, let <var title="">dirtyX</var> be <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>, and let <var title="">dirtyWidth</var> be equal to the absolute magnitude of
    <var title="">dirtyWidth</var>.</p>

    <p>If <var title="">dirtyHeight</var> is negative, let <var title="">dirtyY</var> be <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>, and let <var title="">dirtyHeight</var> be equal to the absolute magnitude of
    <var title="">dirtyHeight</var>.</p>

   </li>

   <li>

    <p>If <var title="">dirtyX</var> is negative, let <var title="">dirtyWidth</var> be <span title=""><var title="">dirtyWidth</var>+<var title="">dirtyX</var></span>, and
    let <var title="">dirtyX</var> be zero.</p>

    <p>If <var title="">dirtyY</var> is negative, let <var title="">dirtyHeight</var> be <span title=""><var title="">dirtyHeight</var>+<var title="">dirtyY</var></span>, and
    let <var title="">dirtyY</var> be zero.</p>

   </li>

   <li>

    <p>If <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span> is greater than the <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> attribute of the <var title="">imagedata</var> argument, let <var title="">dirtyWidth</var> be the value of that <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> attribute, minus the
    value of <var title="">dirtyX</var>.</p>

    <p>If <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span> is greater than the <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> attribute of the <var title="">imagedata</var> argument, let <var title="">dirtyHeight</var> be the value of that <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> attribute, minus the
    value of <var title="">dirtyY</var>.</p>

   </li>

   <li>

    <p>If, after those changes, either <var title="">dirtyWidth</var>
    or <var title="">dirtyHeight</var> is negative or zero, stop these
    steps without affecting the canvas.</p>

   </li>

   <li><p>Otherwise, for all integer values of <var title="">x</var>
   and <var title="">y</var> where <span title=""><var title="">dirtyX</var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span>
   and <span title=""><var title="">dirtyY</var>&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the four channels of
   the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in the <var title="">imagedata</var> data
   structure to the pixel with coordinate (<span title=""><var title="">dx<sub>device</sub></var>+<var title="">x</var></span>,
   <span title=""><var title="">dy<sub>device</sub></var>+<var title="">y</var></span>) in the underlying pixel data of the
   canvas.</li>

  </ol><p>The handling of pixel rounding when the specified coordinates do
  not exactly map to the device coordinate space is not defined by
  this specification, except that the following must result in no
  visible changes to the rendering:</p>

  <pre>context.putImageData(context.getImageData(x, y, w, h), p, q);</pre>

  <p>...for any value of <var title="">x</var>, <var title="">y</var>,
  <var title="">w</var>, and <var title="">h</var> and where <var title="">p</var> is the smaller of <var title="">x</var> and the sum
  of <var title="">x</var> and <var title="">w</var>, and <var title="">q</var> is the smaller of <var title="">y</var> and the sum
  of <var title="">y</var> and <var title="">h</var>; and except that
  the following two calls:</p>

  <pre>context.createImageData(w, h);
context.getImageData(0, 0, w, h);</pre>

  <p>...must return <code><a href=#imagedata>ImageData</a></code> objects with the same
  dimensions, for any value of <var title="">w</var> and <var title="">h</var>. In other words, while user agents may round the
  arguments of these methods so that they map to device pixel
  boundaries, any rounding performed must be performed consistently
  for all of the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>createImageData()</a></code>, <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> and <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code>
  operations.</p>

  <p class=note>Due to the lossy nature of converting to and from
  premultiplied alpha color values, pixels that have just been set
  using <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> might be
  returned to an equivalent <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> as
  different values.</p>

  <p>The current path, <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>,
  <a href=#shadows title=shadows>shadow attributes</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
  operator</a> must not affect the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> and <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code>
  methods.</p>

  </div>

  <div class=example>

   <p>The data returned by <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> is at the
   resolution of the canvas backing store, which is likely to not be
   one device pixel to each CSS pixel if the display used is a high
   resolution display.</p>

   <p>In the following example, the script generates an
   <code><a href=#imagedata>ImageData</a></code> object so that it can draw onto it.</p>

   <pre>// canvas is a reference to a &lt;canvas&gt; element
var context = canvas.getContext('2d');

// create a blank slate
var data = context.createImageData(canvas.width, canvas.height);

// create some plasma
FillPlasma(data, 'green'); // green plasma

// add a cloud to the plasma
AddCloud(data, data.width/2, data.height/2); // put a cloud in the middle

// paint the plasma+cloud on the canvas
context.putImageData(data, 0, 0);

// support methods
function FillPlasma(data, color) { ... }
function AddCloud(data, x, y) { ... }</pre>

  </div>

  <div class=example>

   <p>Here is an example of using <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> and <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> to
   implement an edge detection filter.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Edge detection demo&lt;/title&gt;
  &lt;script&gt;
   var image = new Image();
   function init() {
     image.onload = demo;
     image.src = "image.jpeg";
   }
   function demo() {
     var canvas = document.getElementsByTagName('canvas')[0];
     var context = canvas.getContext('2d');

     // draw the image onto the canvas
     context.drawImage(image, 0, 0);

     // get the image data to manipulate
     var input = context.getImageData(0, 0, canvas.width, canvas.height);

     // get an empty slate to put the data into
     var output = context.createImageData(canvas.width, canvas.height);

     // alias some variables for convenience
     // notice that we are using input.width and input.height here
     // as they might not be the same as canvas.width and canvas.height
     // (in particular, they might be different on high-res displays)
     var w = input.width, h = input.height;
     var inputData = input.data;
     var outputData = output.data;

     // edge detection
     for (var y = 1; y &lt; h-1; y += 1) {
       for (var x = 1; x &lt; w-1; x += 1) {
         for (var c = 0; c &lt; 3; c += 1) {
           var i = (y*w + x)*4 + c;
           outputData[i] = 127 + -inputData[i - w*4 - 4] -   inputData[i - w*4] - inputData[i - w*4 + 4] +
                                 -inputData[i - 4]       + 8*inputData[i]       - inputData[i + 4] +
                                 -inputData[i + w*4 - 4] -   inputData[i + w*4] - inputData[i + w*4 + 4];
         }
         outputData[(y*w + x)*4 + 3] = 255; // alpha
       }
     }

     // put the image data back after manipulation
     context.putImageData(output, 0, 0);
   }
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="init()"&gt;
  &lt;canvas&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>


  <div class=impl>

  <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</h6>

  <p>When a shape or image is painted, user agents must follow these
  steps, in the order given (or act as if they do):</p>

  <ol><li><p>Render the shape or image onto an infinite transparent black
   bitmap, creating image <var title="">A</var>, as described in the
   previous sections. For shapes, the current fill, stroke, and line
   styles must be honored, and the stroke must itself also be
   subjected to the current transformation matrix.</li>

   <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, render the shadow from
   image <var title="">A</var>, using the current shadow styles,
   creating image <var title="">B</var>.</li>

   <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, multiply the alpha
   component of every pixel in <var title="">B</var> by <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>.</li>

   <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, composite <var title="">B</var> within the clipping region over the current canvas
   bitmap using the current composition operator.</li>

   <li><p>Multiply the alpha component of every pixel in <var title="">A</var> by <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>.</li>

   <li><p>Composite <var title="">A</var> within the clipping region
   over the current canvas bitmap using the current composition
   operator.</li>

  </ol></div>


  <h6 id=examples><span class=secno>4.8.11.1.14 </span>Examples</h6>

  <p><i>This section is non-normative.</i></p>

  <p>Here is an example of a script that uses canvas to draw pretty
  glowing lines.</p>

  <pre>&lt;canvas width="800" height="450"&gt;&lt;/canvas&gt;
&lt;script&gt;

 var context = document.getElementsByTagName('canvas')[0].getContext('2d');

 var lastX = context.canvas.width * Math.random();
 var lastY = context.canvas.height * Math.random();
 var hue = 0;
 function line() {
   context.save();
   context.translate(context.canvas.width/2, context.canvas.height/2);
   context.scale(0.9, 0.9);
   context.translate(-context.canvas.width/2, -context.canvas.height/2);
   context.beginPath();
   context.lineWidth = 5 + Math.random() * 10;
   context.moveTo(lastX, lastY);
   lastX = context.canvas.width * Math.random();
   lastY = context.canvas.height * Math.random();
   context.bezierCurveTo(context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         lastX, lastY);

   hue = hue + 10 * Math.random();
   context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
   context.shadowColor = 'white';
   context.shadowBlur = 10;
   context.stroke();
   context.restore();
 }
 setInterval(line, 50);

 function blank() {
   context.fillStyle = 'rgba(0,0,0,0.1)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 }
 setInterval(blank, 40);

&lt;/script&gt;</pre>

  

  </div><!--data-component-->

  

  <div class=impl>

  <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</h5>

  <p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at
  only two points: when rendering images with their own gamma
  correction and color space information onto the canvas, to convert
  the image to the color space used by the canvas (e.g. using the 2D
  Context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code>
  method with an <code><a href=#htmlimageelement>HTMLImageElement</a></code> object), and when
  rendering the actual canvas bitmap to the output device.</p>

  <p class=note>Thus, in the 2D context, colors used to draw shapes
  onto the canvas will exactly match colors obtained through the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>
  method.</p>

  <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method
  must not include color space information in the resource
  returned. Where the output format allows it, the color of pixels in
  resources created by <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> must match those
  returned by the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>
  method.</p>

  <p>In user agents that support CSS, the color space used by a
  <code><a href=#the-canvas-element>canvas</a></code> element must match the color space used for
  processing any colors for that element in CSS.</p>

  <p>The gamma correction and color space information of images must
  be handled in such a way that an image rendered directly using an
  <code><a href=#the-img-element>img</a></code> element would use the same colors as one painted on
  a <code><a href=#the-canvas-element>canvas</a></code> element that is then itself
  rendered. Furthermore, the rendering of images that have no color
  correction information (such as those returned by the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method) must be
  rendered with no color correction.</p>

  <p class=note>Thus, in the 2D context, calling the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method to render
  the output of the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method to the
  canvas, given the appropriate dimensions, has no visible effect.</p>

  </div>


  <div class=impl>

  <h5 id=security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>

  <p><strong>Information leakage</strong> can occur if scripts from
  one <a href=#origin>origin</a> can access information (e.g. read pixels)
  from images from another origin (one that isn't the <a href=#same-origin title="same origin">same</a>).</p>

  <p>To mitigate this, <code><a href=#the-canvas-element>canvas</a></code> elements are defined to
  have a flag indicating whether they are <i>origin-clean</i>. All
  <code><a href=#the-canvas-element>canvas</a></code> elements must start with their
  <i>origin-clean</i> set to true. The flag must be set to false if
  any of the following actions occur:</p>

  <ul><li><p>The element's 2D context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is
   called with an <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an
   <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> whose <a href=#origin>origin</a> is not the
   <a href=#same-origin title="same origin">same</a> as that of the
   <code><a href=#document>Document</a></code> object that owns the <code><a href=#the-canvas-element>canvas</a></code>
   element.</li>

   <li><p>The element's 2D context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is
   called with an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose
   <i>origin-clean</i> flag is false.</li>

   <li><p>The element's 2D context's <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attribute is set
   to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
   <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
   whose <a href=#origin>origin</a> was not the <a href=#same-origin title="same
   origin">same</a> as that of the <code><a href=#document>Document</a></code> object
   that owns the <code><a href=#the-canvas-element>canvas</a></code> element when the pattern was
   created.</li>

   <li><p>The element's 2D context's <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attribute is set
   to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
   <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
   false when the pattern was created.</li>

   <li><p>The element's 2D context's <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute is
   set to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
   <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
   whose <a href=#origin>origin</a> was not the <a href=#same-origin title="same
   origin">same</a> as that of the <code><a href=#document>Document</a></code> object
   that owns the <code><a href=#the-canvas-element>canvas</a></code> element when the pattern was
   created.</li>

   <li><p>The element's 2D context's <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute is
   set to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
   <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
   false when the pattern was created.</li>

  </ul><p>Whenever the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method of a
  <code><a href=#the-canvas-element>canvas</a></code> element whose <i>origin-clean</i> flag is set to
  false is called, the method must raise a <code><a href=#security_err>SECURITY_ERR</a></code>
  exception.</p>

  <p>Whenever the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method of
  the 2D context of a <code><a href=#the-canvas-element>canvas</a></code> element whose
  <i>origin-clean</i> flag is set to false is called with otherwise
  correct arguments, the method must raise a <code><a href=#security_err>SECURITY_ERR</a></code>
  exception.</p>

  <p class=note>Even resetting the canvas state by changing its
  <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> or <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attributes doesn't reset
  the <i>origin-clean</i> flag.</p>

  </div>



  <h4 id=the-map-element><span class=secno>4.8.12 </span>The <dfn><code>map</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd>When the element only contains <a href=#phrasing-content>phrasing content</a>: <a href=#phrasing-content>phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#transparent>Transparent</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-map-name><a href=#attr-map-name>name</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlmapelement>HTMLMapElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-map-name title=dom-map-name>name</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-map-areas title=dom-map-areas>areas</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-map-images title=dom-map-images>images</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-map-element>map</a></code> element, in conjunction with any
  <code><a href=#the-area-element>area</a></code> element descendants, defines an <a href=#image-map>image
  map</a>. The element <a href=#represents>represents</a> its children.</p>

  <p>The <dfn id=attr-map-name title=attr-map-name><code>name</code></dfn> attribute
  gives the map a name so that it can be referenced. The attribute
  must be present and must have a non-empty value with no <a href=#space-character title="space character">space characters</a>. The value of the
  <code title=attr-map-name><a href=#attr-map-name>name</a></code> attribute must not be a
  <a href=#compatibility-caseless title="compatibility caseless">compatibility-caseless</a>
  match for the value of the <code title=attr-map-name><a href=#attr-map-name>name</a></code>
  attribute of another <code><a href=#the-map-element>map</a></code> element in the same
  document. If the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute is also
  specified, both attributes must have the same value.</p>

  <dl class=domintro><dt><var title="">map</var> . <code title=dom-map-areas><a href=#dom-map-areas>areas</a></code></dt>

   <dd>

    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-area-element>area</a></code> elements in the <code><a href=#the-map-element>map</a></code>.</p>

   </dd>

   <dt><var title="">map</var> . <code title=dom-map-images><a href=#dom-map-images>images</a></code></dt>

   <dd>

    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-img-element>img</a></code> and <code><a href=#the-object-element>object</a></code> elements that use the <code><a href=#the-map-element>map</a></code>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-map-areas title=dom-map-areas><code>areas</code></dfn> attribute
  must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#the-map-element>map</a></code> element, whose filter matches only
  <code><a href=#the-area-element>area</a></code> elements.</p>

  <p>The <dfn id=dom-map-images title=dom-map-images><code>images</code></dfn>
  attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches only
  <code><a href=#the-img-element>img</a></code> and <code><a href=#the-object-element>object</a></code> elements that are
  associated with this <code><a href=#the-map-element>map</a></code> element according to the
  <a href=#image-map>image map</a> processing model.</p>

  <p>The IDL attribute <dfn id=dom-map-name title=dom-map-name><code>name</code></dfn> must
  <a href=#reflect>reflect</a> the content attribute of the same name.</p>

  </div>



  <h4 id=the-area-element><span class=secno>4.8.13 </span>The <dfn><code>area</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected, but only if there is a <code><a href=#the-map-element>map</a></code> element ancestor.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-area-alt><a href=#attr-area-alt>alt</a></code></dd>
   <dd><code title=attr-area-coords><a href=#attr-area-coords>coords</a></code></dd>
   <dd><code title=attr-area-shape><a href=#attr-area-shape>shape</a></code></dd>
   <dd><code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dd>
   <dd><code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code></dd>
<!--PING-->
   <dd><code title=attr-hyperlink-ping><a href=#ping>ping</a></code></dd>
<!--PING-->
   <dd><code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code></dd>
   <dd><code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code></dd>
   <dd><code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code></dd>
   <dd><code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlareaelement>HTMLAreaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-area-alt title=dom-area-alt>alt</a>;
           attribute DOMString <a href=#dom-area-coords title=dom-area-coords>coords</a>;
           attribute DOMString <a href=#dom-area-shape title=dom-area-shape>shape</a>;
  stringifier attribute DOMString <a href=#dom-area-href title=dom-area-href>href</a>;
           attribute DOMString <a href=#dom-area-target title=dom-area-target>target</a>;
<!--PING-->
           attribute DOMString <a href=#dom-area-ping title=dom-area-ping>ping</a>;
<!--PING-->
           attribute DOMString <a href=#dom-area-rel title=dom-area-rel>rel</a>;
  readonly attribute <a href=#domtokenlist>DOMTokenList</a> <a href=#dom-area-rellist title=dom-area-relList>relList</a>;
           attribute DOMString <a href=#dom-area-media title=dom-area-media>media</a>;
           attribute DOMString <a href=#dom-area-hreflang title=dom-area-hreflang>hreflang</a>;
           attribute DOMString <a href=#dom-area-type title=dom-area-type>type</a>;

  // <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a>
           attribute DOMString <a href=#dom-area-protocol title=dom-area-protocol>protocol</a>;
           attribute DOMString <a href=#dom-area-host title=dom-area-host>host</a>;
           attribute DOMString <a href=#dom-area-hostname title=dom-area-hostname>hostname</a>;
           attribute DOMString <a href=#dom-area-port title=dom-area-port>port</a>;
           attribute DOMString <a href=#dom-area-pathname title=dom-area-pathname>pathname</a>;
           attribute DOMString <a href=#dom-area-search title=dom-area-search>search</a>;
           attribute DOMString <a href=#dom-area-hash title=dom-area-hash>hash</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-area-element>area</a></code> element <a href=#represents>represents</a> either a
  hyperlink with some text and a corresponding area on an <a href=#image-map>image
  map</a>, or a dead area on an image map.</p>

  <p>If the <code><a href=#the-area-element>area</a></code> element has an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, then the
  <code><a href=#the-area-element>area</a></code> element represents a <a href=#hyperlink>hyperlink</a>. In
  this case, the <dfn id=attr-area-alt title=attr-area-alt><code>alt</code></dfn>
  attribute must be present. It specifies the text of the
  hyperlink. Its value must be text that, when presented with the
  texts specified for the other hyperlinks of the <a href=#image-map>image
  map</a>, and with the alternative text of the image, but without
  the image itself, provides the user with the same kind of choice as
  the hyperlink would when used without its text but with its shape
  applied to the image. The <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code>
  attribute may be left blank if there is another <code><a href=#the-area-element>area</a></code>
  element in the same <a href=#image-map>image map</a> that points to the same
  resource and has a non-blank <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code>
  attribute.</p>

  <p>If the <code><a href=#the-area-element>area</a></code> element has no <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, then the area
  represented by the element cannot be selected, and the <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code> attribute must be omitted.</p>

  <p>In both cases, the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> and
  <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code> attributes specify the
  area.</p>

  <p>The <dfn id=attr-area-shape title=attr-area-shape><code>shape</code></dfn>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
  table lists the keywords defined for this attribute. The states
  given in the first cell of the rows with keywords give the states to
  which those keywords map. <span class=impl>Some of the keywords
  are non-conforming, as noted in the last column.</span></p>

  <table><thead><tr><th>State
     <th>Keywords
     <th class=impl>Notes
   <tbody><tr><td rowspan=2><a href=#attr-area-shape-circle title=attr-area-shape-circle>Circle state</a>
     <td><dfn id=attr-area-shape-keyword-circle title=attr-area-shape-keyword-circle><code>circle</code></dfn>
     <td class=impl>
    <tr><td class=impl><dfn id=attr-area-shape-keyword-circ title=attr-area-shape-keyword-circ><code>circ</code></dfn>
     <td class=impl>Non-conforming
    <tr><td><a href=#attr-area-shape-default title=attr-area-shape-default>Default state</a>
     <td><dfn id=attr-area-shape-keyword-default title=attr-area-shape-keyword-default><code>default</code></dfn>
     <td class=impl>
    <tr><td rowspan=2><a href=#attr-area-shape-poly title=attr-area-shape-poly>Polygon state</a>
     <td><dfn id=attr-area-shape-keyword-poly title=attr-area-shape-keyword-poly><code>poly</code></dfn>
     <td class=impl>
    <tr><td class=impl><dfn id=attr-area-shape-keyword-polygon title=attr-area-shape-keyword-polygon><code>polygon</code></dfn>
     <td class=impl>Non-conforming
    <tr><td rowspan=2><a href=#attr-area-shape-rect title=attr-area-shape-rect>Rectangle state</a>
     <td><dfn id=attr-area-shape-keyword-rect title=attr-area-shape-keyword-rect><code>rect</code></dfn>
     <td class=impl>
    <tr><td class=impl><dfn id=attr-area-shape-keyword-rectangle title=attr-area-shape-keyword-rectangle><code>rectangle</code></dfn>
     <td class=impl>Non-conforming
  </table><p>The attribute may be omitted. The <i>missing value default</i> is
  the <a href=#attr-area-shape-rect title=attr-area-shape-rect>rectangle</a> state.</p>

  <p>The <dfn id=attr-area-coords title=attr-area-coords><code>coords</code></dfn>
  attribute must, if specified, contain a <a href=#valid-list-of-integers>valid list of
  integers</a>. This attribute gives the coordinates for the shape
  described by the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code>
  attribute. <span class=impl>The processing for this attribute is
  described as part of the <a href=#image-map>image map</a> processing
  model.</span></p>

  <!-- v2: It was suggested by John S. Urban that coords should
  support percentages as well as pixels, so that one could use the
  same image map for images of various sizes. -->

  <p>In the <dfn id=attr-area-shape-circle title=attr-area-shape-circle>circle state</dfn>,
  <code><a href=#the-area-element>area</a></code> elements must have a <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code> attribute present, with three
  integers, the last of which must be non-negative. The first integer
  must be the distance in CSS pixels from the left edge of the image
  to the center of the circle, the second integer must be the distance
  in CSS pixels from the top edge of the image to the center of the
  circle, and the third integer must be the radius of the circle,
  again in CSS pixels.</p>

  <p>In the <dfn id=attr-area-shape-default title=attr-area-shape-default>default state</dfn>
  state, <code><a href=#the-area-element>area</a></code> elements must not have a <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code> attribute. (The area is the
  whole image.)</p>

  <p>In the <dfn id=attr-area-shape-poly title=attr-area-shape-poly>polygon state</dfn>,
  <code><a href=#the-area-element>area</a></code> elements must have a <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code> attribute with at least six
  integers, and the number of integers must be even. Each pair of
  integers must represent a coordinate given as the distances from the
  left and the top of the image in CSS pixels respectively, and all
  the coordinates together must represent the points of the polygon,
  in order.</p>

  <p>In the <dfn id=attr-area-shape-rect title=attr-area-shape-rect>rectangle state</dfn>,
  <code><a href=#the-area-element>area</a></code> elements must have a <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code> attribute with exactly four
  integers, the first of which must be less than the third, and the
  second of which must be less than the fourth. The four points must
  represent, respectively, the distance from the left edge of the
  image to the left side of the rectangle, the distance from the
  top edge to the top side, the distance from the left edge to the
  right side, and the distance from the top edge to the bottom side,
  all in CSS pixels.</p>

  <div class=impl>

  <p>When user agents allow users to <a href=#following-hyperlinks title="following
  hyperlinks">follow hyperlinks</a> created using the
  <code><a href=#the-area-element>area</a></code> element, as described in the next section, the
  <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>,
  <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>
<!--PING-->
  and <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>
<!--PING-->
  attributes decide how the
  link is followed. The <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>,
  <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes may be used to
  indicate to the user the likely nature of the target resource before
  the user follows the link.</p>

  </div>

  <p>The <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>,
<!--PING-->
  <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>,
<!--PING-->
  <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>, <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes must be omitted
  if the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute is
  not present.</p>

  <div class=impl>

  <p>The <a href=#activation-behavior>activation behavior</a> of <code><a href=#the-area-element>area</a></code>
  elements is to run the following steps:</p>

  <ol><li><p>If the <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code>
   event in question is not <a href=#concept-events-trusted title=concept-events-trusted>trusted</a> (i.e. a <code title=dom-click><a href=#dom-click>click()</a></code> method call was the reason for the
   event being dispatched), and the <code><a href=#the-area-element>area</a></code> element's <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute is such that
   applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for choosing a browsing context given a
   browsing context name</a>, using the value of the <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute as the
   browsing context name, would result in there not being a chosen
   browsing context, then raise an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code>
   exception and abort these steps.</li>

   <li>Otherwise, the user agent must <a href=#following-hyperlinks title="following
   hyperlinks">follow the hyperlink</a> defined by the
   <code><a href=#the-area-element>area</a></code> element, if any.</li>

  </ol><p>The IDL attributes <dfn id=dom-area-alt title=dom-area-alt><code>alt</code></dfn>, <dfn id=dom-area-coords title=dom-area-coords><code>coords</code></dfn>, <dfn id=dom-area-href title=dom-area-href><code>href</code></dfn>, <dfn id=dom-area-target title=dom-area-target><code>target</code></dfn>,
<!--PING-->
  <dfn id=dom-area-ping title=dom-area-ping><code>ping</code></dfn>,
<!--PING-->
  <dfn id=dom-area-rel title=dom-area-rel><code>rel</code></dfn>, <dfn id=dom-area-media title=dom-area-media><code>media</code></dfn>, <dfn id=dom-area-hreflang title=dom-area-hreflang><code>hreflang</code></dfn>, and <dfn id=dom-area-type title=dom-area-type><code>type</code></dfn>, each must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  <p>The IDL attribute <dfn id=dom-area-shape title=dom-area-shape><code>shape</code></dfn> must
  <a href=#reflect>reflect</a> the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code>
  content attribute, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>The IDL attribute <dfn id=dom-area-rellist title=dom-area-rellist><code>relList</code></dfn> must
  <a href=#reflect>reflect</a> the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>
  content attribute.</p>

  <p>The <code><a href=#the-area-element>area</a></code> element also supports the complement of
  <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a>, <dfn id=dom-area-protocol title=dom-area-protocol><code>protocol</code></dfn>, <dfn id=dom-area-host title=dom-area-host><code>host</code></dfn>, <dfn id=dom-area-port title=dom-area-port><code>port</code></dfn>, <dfn id=dom-area-hostname title=dom-area-hostname><code>hostname</code></dfn>, <dfn id=dom-area-pathname title=dom-area-pathname><code>pathname</code></dfn>, <dfn id=dom-area-search title=dom-area-search><code>search</code></dfn>, and <dfn id=dom-area-hash title=dom-area-hash><code>hash</code></dfn>. These must follow the
  rules given for URL decomposition IDL attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a> being the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute relative to the
  element, if there is such an attribute and resolving it is
  successful, or the empty string otherwise; and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
  same as setting the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute to the new output
  value.</p>

  </div>


  <h4 id=image-maps><span class=secno>4.8.14 </span>Image maps</h4>

  <!-- TESTS
  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cbody%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/sample%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3Cmap%20name%3Da%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%200%2050%2050%27%20href%3Djavascript%3A%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3C/map%3E%0A%3Cscript%3E%0A%20var%20x%20%3D%20document.getElementsByTagName%28%27img%27%29%5B0%5D%3B%0A%20x.parentNode.appendChild%28x%29%3B%0A%20document.getElementsByTagName%28%27area%27%29%5B0%5D.focus%28%29%3B%0A%3C/script%3E
  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3Ex%3Cmap%3E%3Carea%20shape%3Dpolyg%20coords%3D%221%2C2%203%22%3E%3C/map%3E%0A%3Cscript%3Ex%20%3D%20document.getElementsByTagName%28%27area%27%29%5B0%5D%3B%20w%28x.shape%20+%20%27%20%27%20+%20x.coords%29%3C/script%3E
  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0D%0A%3Cp%3E%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/astrophy/128%22%20usemap%3D%23a%3E%0D%0A%3Cmap%20name%3Da%3E%3Carea%20shape%3Dcirc%20coords%3D%2220%2C20%2C10%25%22%20href%3D%23%3E%3Carea%20shape%3Dcirc%20coords%3D%2220%2C20%2C10%22%20href%3D%23%3E%3C/map%3E%0D%0A%3Cscript%3Edocument.write%28document.getElementsByTagName%28%27area%27%29%5B0%5D.coords%29%3C/script%3E
  -->

  <div class=impl>

  <h5 id=authoring><span class=secno>4.8.14.1 </span>Authoring</h5>

  </div>

  <p>An <dfn id=image-map>image map</dfn> allows geometric areas on an image to be
  associated with <a href=#hyperlink title=hyperlink>hyperlinks</a>.</p>

  <p>An image, in the form of an <code><a href=#the-img-element>img</a></code> element or an
  <code><a href=#the-object-element>object</a></code> element representing an image, may be associated
  with an image map (in the form of a <code><a href=#the-map-element>map</a></code> element) by
  specifying a <dfn id=attr-hyperlink-usemap title=attr-hyperlink-usemap><code>usemap</code></dfn> attribute on
  the <code><a href=#the-img-element>img</a></code> or <code><a href=#the-object-element>object</a></code> element. The <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute, if specified,
  must be a <a href=#valid-hash-name-reference>valid hash-name reference</a> to a
  <code><a href=#the-map-element>map</a></code> element.</p>

  <div class=example>

   <p>Consider an image that looks as follows:</p>

   <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." src=images/sample-usemap.png></p>

   <p>If we wanted just the colored areas to be clickable, we could
   do it as follows:</p>

   <pre>&lt;p&gt;
 Please select a shape:
 &lt;img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."&gt;
 &lt;map name="shapes"&gt;
  &lt;area shape=rect coords="50,50,100,100"&gt; &lt;!-- the hole in the red box --&gt;
  &lt;area shape=rect coords="25,25,125,125" href="red.html" alt="Red box."&gt;
  &lt;area shape=circle coords="200,75,50" href="green.html" alt="Green circle."&gt;
  &lt;area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle."&gt;
  &lt;area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star."&gt;
 &lt;/map&gt;
&lt;/p&gt;</pre>

  </div>

  <div class=impl>

  <h5 id=processing-model><span class=secno>4.8.14.2 </span>Processing model</h5>

  <p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element
  representing an image has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified,
  user agents must process it as follows:</p>

  <ol><li><p>First, <a href=#rules-for-parsing-a-hash-name-reference>rules for parsing a hash-name reference</a>
   to a <code><a href=#the-map-element>map</a></code> element must be followed. This will return
   either an element (the <var title="">map</var>) or null.</li>

   <li><p>If that returned null, then abort these steps. The image is
   not associated with an image map after all.</li>

   <li><p>Otherwise, the user agent must collect all the
   <code><a href=#the-area-element>area</a></code> elements that are descendants of the <var title="">map</var>. Let those be the <var title="">areas</var>.</li>

  </ol><p>Having obtained the list of <code><a href=#the-area-element>area</a></code> elements that form
  the image map (the <var title="">areas</var>), interactive user
  agents must process the list in one of two ways.</p>

  <p>If the user agent intends to show the text that the
  <code><a href=#the-img-element>img</a></code> element represents, then it must use the following
  steps.</p>

  <p class=note>In user agents that do not support images, or that
  have images disabled, <code><a href=#the-object-element>object</a></code> elements cannot represent
  images, and thus this section never applies (the <a href=#fallback-content>fallback
  content</a> is shown instead). The following steps therefore only
  apply to <code><a href=#the-img-element>img</a></code> elements.</p>

  <ol><li><p>Remove all the <code><a href=#the-area-element>area</a></code> elements in <var title="">areas</var> that have no <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute.</li>

   <li><p>Remove all the <code><a href=#the-area-element>area</a></code> elements in <var title="">areas</var> that have no <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code> attribute, or whose <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code> attribute's value is the empty
   string, <em>if</em> there is another <code><a href=#the-area-element>area</a></code> element in
   <var title="">areas</var> with the same value in the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute and with a
   non-empty <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code> attribute.</li>

   <li><p>Each remaining <code><a href=#the-area-element>area</a></code> element in <var title="">areas</var> represents a <a href=#hyperlink>hyperlink</a>. Those
   hyperlinks should all be made available to the user in a manner
   associated with the text of the <code><a href=#the-img-element>img</a></code>.</p>

   <p>In this context, user agents may represent <code><a href=#the-area-element>area</a></code> and
   <code><a href=#the-img-element>img</a></code> elements with no specified <code title="">alt</code> attributes, or whose <code title="">alt</code>
   attributes are the empty string or some other non-visible text, in
   a user-agent-defined fashion intended to indicate the lack of
   suitable author-provided text.</li>

  </ol><p>If the user agent intends to show the image and allow interaction
  with the image to select hyperlinks, then the image must be
  associated with a set of layered shapes, taken from the
  <code><a href=#the-area-element>area</a></code> elements in <var title="">areas</var>, in reverse
  tree order (so the last specified <code><a href=#the-area-element>area</a></code> element in the
  <var title="">map</var> is the bottom-most shape, and the first
  element in the <var title="">map</var>, in tree order, is the
  top-most shape).</p>

  <p>Each <code><a href=#the-area-element>area</a></code> element in <var title="">areas</var> must
  be processed as follows to obtain a shape to layer onto the
  image:</p>

  <ol><li><p>Find the state that the element's <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute represents.</li>

   <li><p>Use the <a href=#rules-for-parsing-a-list-of-integers>rules for parsing a list of integers</a> to
   parse the element's <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code>
   attribute, if it is present, and let the result be the <var title="">coords</var> list. If the attribute is absent, let the
   <var title="">coords</var> list be the empty list.</li>

   <li><p>If the number of items in the <var title="">coords</var>
   list is less than the minimum number given for the
   <code><a href=#the-area-element>area</a></code> element's current state, as per the following
   table, then the shape is empty; abort these steps.</p>
    <table><thead><tr><th>State
       <th>Minimum number of items
     <tbody><tr><td><a href=#attr-area-shape-circle title=attr-area-shape-circle>Circle state</a>
       <td>3
      <tr><td><a href=#attr-area-shape-default title=attr-area-shape-default>Default state</a>
       <td>0
      <tr><td><a href=#attr-area-shape-poly title=attr-area-shape-poly>Polygon state</a>
       <td>6
      <tr><td><a href=#attr-area-shape-rect title=attr-area-shape-rect>Rectangle state</a>
       <td>4
    </table></li>

   <li><p>Check for excess items in the <var title="">coords</var>
   list as per the entry in the following list corresponding to the
   <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute's state:</p>
    <dl class=switch><dt><a href=#attr-area-shape-circle title=attr-area-shape-circle>Circle state</a></dt>
     <dd>Drop any items in the list beyond the third.</dd>
     <dt><a href=#attr-area-shape-default title=attr-area-shape-default>Default state</a></dt>
     <dd>Drop all items in the list.</dd>
     <dt><a href=#attr-area-shape-poly title=attr-area-shape-poly>Polygon state</a></dt>
     <dd>Drop the last item if there's an odd number of items.</dd>
     <dt><a href=#attr-area-shape-rect title=attr-area-shape-rect>Rectangle state</a></dt>
     <dd>Drop any items in the list beyond the fourth.</dd>
    </dl></li>

   <li><p>If the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute
   represents the <a href=#attr-area-shape-rect title=attr-area-shape-rect>rectangle
   state</a>, and the first number in the list is numerically less
   than the third number in the list, then swap those two numbers
   around.</li>

   <li><p>If the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute
   represents the <a href=#attr-area-shape-rect title=attr-area-shape-rect>rectangle
   state</a>, and the second number in the list is numerically less
   than the fourth number in the list, then swap those two numbers
   around.</li>

   <li><p>If the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute
   represents the <a href=#attr-area-shape-circle title=attr-area-shape-circle>circle
   state</a>, and the third number in the list is less than or
   equal to zero, then the shape is empty; abort these steps.</li>

   <li><p>Now, the shape represented by the element is the one
   described for the entry in the list below corresponding to the
   state of the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code>
   attribute:</p>

    <dl class=switch><dt><a href=#attr-area-shape-circle title=attr-area-shape-circle>Circle state</a></dt>
     <dd>
      <p>Let <var title="">x</var> be the first number in <var title="">coords</var>, <var title="">y</var> be the second
      number, and <var title="">r</var> be the third number.</p>
      <p>The shape is a circle whose center is <var title="">x</var>
      CSS pixels from the left edge of the image and <var title="">x</var> CSS pixels from the top edge of the image, and
      whose radius is <var title="">r</var> pixels.</p>
     </dd>

     <dt><a href=#attr-area-shape-default title=attr-area-shape-default>Default state</a></dt>
     <dd>
      <p>The shape is a rectangle that exactly covers the entire
      image.</p>
     </dd>

     <dt><a href=#attr-area-shape-poly title=attr-area-shape-poly>Polygon state</a></dt>
     <dd>

      <p>Let <var title="">x<sub title=""><var title="">i</var></sub></var> be the <span title="">(2<var title="">i</var>)</span>th entry in <var title="">coords</var>,
      and <var title="">y<sub title=""><var title="">i</var></sub></var> be the <span title="">(2<var title="">i</var>+1)</span>th entry in <var title="">coords</var>
      (the first entry in <var title="">coords</var> being the one
      with index 0).</p>

      <p>Let <var title="">the coordinates</var> be (<var title="">x<sub title=""><var title="">i</var></sub></var>, <var title="">y<sub title=""><var title="">i</var></sub></var>),
      interpreted in CSS pixels measured from the top left of the
      image, for all integer values of <var title="">i</var> from 0 to
      <span title="">(<var title="">N</var>/2)-1</span>, where <var title="">N</var> is the number of items in <var title="">coords</var>.</p>

      <p>The shape is a polygon whose vertices are given by <var title="">the coordinates</var>, and whose interior is
      established using the even-odd rule. <a href=#refsGRAPHICS>[GRAPHICS]</a></p>

      <!--
        browsers implement the even-odd rule / even winding rule:
        http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20usemap%3D%22%23x%22%20src%3D%22/resources/images/sample%22%3E%0A%3Cmap%20name%3D%22x%22%3E%0A%20%20%3Carea%20shape%3Dpolygon%20coords%3D%220%2C0%200%2C100%20100%2C100%20100%2C2%201%2C2%202%2C1%202%2C99%2099%2C99%2099%2C0%22%20href%3Da%3E%0A%3C/map%3E%0A
       -->

     </dd>

     <dt><a href=#attr-area-shape-rect title=attr-area-shape-rect>Rectangle state</a></dt>

     <dd>

      <p>Let <var title="">x<sub title="">1</sub></var> be the first
      number in <var title="">coords</var>, <var title="">y<sub title="">1</sub></var> be the second number, <var title="">x<sub title="">2</sub></var> be the third number, and <var title="">y<sub title="">2</sub></var> be the fourth number.</p>

      <p>The shape is a rectangle whose top-left corner is given by
      the coordinate (<var title="">x<sub title="">1</sub></var>, <var title="">y<sub title="">1</sub></var>) and whose bottom right
      corner is given by the coordinate (<var title="">x<sub title="">2</sub></var>, <var title="">y<sub title="">2</sub></var>), those coordinates being interpreted as
      CSS pixels from the top left corner of the image.</p>

     </dd>

    </dl><p>For historical reasons, the coordinates must be interpreted
    relative to the <em>displayed</em> image, even if it stretched
    using CSS or the image element's <code title="">width</code> and
    <code title="">height</code> attributes.</p>

   </li>

  </ol><p>Mouse clicks on an image associated with a set of layered shapes
  per the above algorithm must be dispatched to the top-most shape
  covering the point that the pointing device indicated (if any), and
  then, must be dispatched again (with a new <code><a href=#event>Event</a></code>
  object) to the image element itself. User agents may also allow
  individual <code><a href=#the-area-element>area</a></code> elements representing <a href=#hyperlink title=hyperlink>hyperlinks</a> to be selected and activated
  (e.g. using a keyboard); events from this are not also propagated to
  the image.</p>

  <p class=note>Because a <code><a href=#the-map-element>map</a></code> element (and its
  <code><a href=#the-area-element>area</a></code> elements) can be associated with multiple
  <code><a href=#the-img-element>img</a></code> and <code><a href=#the-object-element>object</a></code> elements, it is possible
  for an <code><a href=#the-area-element>area</a></code> element to correspond to multiple focusable
  areas of the document.</p>

  <p>Image maps are <a href=#live>live</a>; if the DOM is mutated, then the
  user agent must act as if it had rerun the algorithms for image
  maps.</p>

  </div>



  <h4 id=mathml><span class=secno>4.8.15 </span>MathML</h4>

  <p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML
  namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
  <a href=#phrasing-content>phrasing content</a>, and <a href=#flow-content>flow content</a>
  categories for the purposes of the content models in this
  specification.</p>

  <div class=impl>

  <!-- apparently we get to define error handling, so: -->

  <p>User agents must handle text other than <a href=#inter-element-whitespace>inter-element
  whitespace</a> found in MathML elements whose content models do
  not allow straight text by pretending for the purposes of MathML
  content models, layout, and rendering that that text is actually
  wrapped in an <code title="">mtext</code> element in the
  <a href=#mathml-namespace>MathML namespace</a>. (Such text is not, however,
  conforming.)</p>

  <p>User agents must act as if any MathML element whose contents does
  not match the element's content model was replaced, for the purposes
  of MathML layout and rendering, by an <code title="">merror</code>
  element in the <a href=#mathml-namespace>MathML namespace</a> containing some
  appropriate error message.</p>

  <p>To enable authors to use MathML tools that only accept MathML in
  its XML form, interactive HTML user agents are encouraged to provide
  a way to export any MathML fragment as an XML namespace-well-formed
  XML fragment.</p>

  </div>

  <p>The semantics of MathML elements are defined by the MathML
  specification and other relevant specifications. <a href=#refsMATHML>[MATHML]</a></p>

  <div class=example>

   <p>Here is an example of the use of MathML in an HTML document:</p>

   <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;The quadratic formula&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;The quadratic formula&lt;/h1&gt;
  &lt;p&gt;
   &lt;math&gt;
    &lt;mi&gt;x&lt;/mi&gt;
    &lt;mo&gt;=&lt;/mo&gt;
    &lt;mfrac&gt;
     &lt;mrow&gt;
      &lt;mo form="prefix"&gt;&minus;&lt;/mo&gt; &lt;mi&gt;b&lt;/mi&gt;
      &lt;mo&gt;&plusmn;&lt;/mo&gt;
      &lt;msqrt&gt;
       &lt;msup&gt; &lt;mi&gt;b&lt;/mi&gt; &lt;mn&gt;2&lt;/mn&gt; &lt;/msup&gt;
       &lt;mo&gt;&minus;&lt;/mo&gt;
       &lt;mn&gt;4&lt;/mn&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;a&lt;/mi&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;c&lt;/mi&gt;
      &lt;/msqrt&gt;
     &lt;/mrow&gt;
     &lt;mrow&gt;
      &lt;mn&gt;2&lt;/mn&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;a&lt;/mi&gt;
     &lt;/mrow&gt;
    &lt;/mfrac&gt;
   &lt;/math&gt;
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>



  <h4 id=svg-0><span class=secno>4.8.16 </span>SVG</h4>

  <p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG
  namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
  <a href=#phrasing-content>phrasing content</a>, and <a href=#flow-content>flow content</a>
  categories for the purposes of the content models in this
  specification.</p>

  <div class=impl>

  <p>To enable authors to use SVG tools that only accept SVG in its
  XML form, interactive HTML user agents are encouraged to provide a
  way to export any SVG fragment as an XML namespace-well-formed XML
  fragment.</p>

  </div>

  <p>When the SVG <code>foreignObject</code> element contains elements
  from the <a href=#html-namespace-0>HTML namespace</a>, such elements must all be
  <a href=#flow-content>flow content</a>. <a href=#refsSVG>[SVG]</a></p>

  <p>The content model for <code title="">title</code> elements in the
  <a href=#svg-namespace>SVG namespace</a> inside <a href=#html-documents>HTML documents</a> is
  <a href=#phrasing-content>phrasing content</a>. (This further constrains the
  requirements given in the SVG specification.)</p>

  <p>The semantics of SVG elements are defined by the SVG
  specification and other relevant specifications. <a href=#refsSVG>[SVG]</a></p>

  <!-- The following paragraph is for bug 7510 -->
  <p>The SVG specification includes requirements regarding the
  handling of elements in the DOM that are not in the SVG namespace,
  that are in SVG fragments, and that are not included in a
  <code>foreignObject</code> element. <em>This</em> specification does
  not define any processing for elements in SVG fragments that are not
  in the HTML namespace; they are considered neither conforming nor
  non-conforming from the perspective of this specification.</p>



  <h4 id=dimension-attributes><span class=secno>4.8.17 </span><dfn>Dimension attributes</dfn></h4>

  <p><span class=impl><strong>Author requirements</strong>:</span>
  The <dfn id=attr-dim-width title=attr-dim-width><code>width</code></dfn> and <dfn id=attr-dim-height title=attr-dim-height><code>height</code></dfn> attributes on
  <code><a href=#the-img-element>img</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-embed-element>embed</a></code>,
  <code><a href=#the-object-element>object</a></code>, <code><a href=#video>video</a></code>, and, when their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state,
  <code><a href=#the-input-element>input</a></code> elements may be specified to give the dimensions
  of the visual content of the element (the width and height
  respectively, relative to the nominal direction of the output
  medium), in CSS pixels. The attributes, if specified, must have
  values that are <a href=#valid-non-negative-integer title="valid non-negative integer">valid
  non-negative integers</a>.</p>

  <p>The specified dimensions given may differ from the dimensions
  specified in the resource itself, since the resource may have a
  resolution that differs from the CSS pixel resolution. (On screens,
  CSS pixels have a resolution of 96ppi, but in general the CSS pixel
  resolution depends on the reading distance.) If both attributes are
  specified, then one of the following statements must be true:</p>

  <ul><li><span title=""><var title="">specified width</var> - 0.5 &le;
             <var title="">specified height</var> * <var title="">target ratio</var> &le;
             <var title="">specified width</var> + 0.5</span></li>

   <li><span title=""><var title="">specified height</var> - 0.5 &le;
             <var title="">specified width</var> / <var title="">target ratio</var> &le;
             <var title="">specified height</var> + 0.5</span></li>

   <li><span title=""><var title="">specified height</var> = <var title="">specified width</var> = 0</span></li>

  </ul><p>The <var title="">target ratio</var> is the ratio of the
  intrinsic width to the intrinsic height in the resource. The <var title="">specified width</var> and <var title="">specified
  height</var> are the values of the <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes respectively.</p>

  <p>The two attributes must be omitted if the resource in question
  does not have both an intrinsic width and an intrinsic height.</p>

  <p>If the two attributes are both zero, it indicates that the
  element is not intended for the user (e.g. it might be a part of a
  service to count page views).</p>

  <p class=note>The dimension attributes are not intended to be used
  to stretch the image.</p>

  <div class=impl>

  <p><strong>User agent requirements</strong>: User agents are
  expected to use these attributes <a href=#dimRendering>as hints
  for the rendering</a>.</p>

  <p>The <dfn id=dom-dim-width title=dom-dim-width><code>width</code></dfn> and <dfn id=dom-dim-height title=dom-dim-height><code>height</code></dfn> IDL attributes on
  the <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-object-element>object</a></code>,
  and <code><a href=#video>video</a></code> elements must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>

  </div>



  <h3 id=tabular-data><span class=secno>4.9 </span>Tabular data</h3>


  <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>In this order: optionally a <code><a href=#the-caption-element>caption</a></code> element,
   followed by either zero or more <code><a href=#the-colgroup-element>colgroup</a></code> elements,
   followed optionally by a <code><a href=#the-thead-element>thead</a></code> element, followed
   optionally by a <code><a href=#the-tfoot-element>tfoot</a></code> element, followed by either zero
   or more <code><a href=#the-tbody-element>tbody</a></code> elements or one or more <code><a href=#the-tr-element>tr</a></code>
   elements, followed optionally by a <code><a href=#the-tfoot-element>tfoot</a></code> element (but
   there can only be one <code><a href=#the-tfoot-element>tfoot</a></code> element child in
   total).</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> (but see prose)</dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmltableelement>HTMLTableElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute <a href=#htmltablecaptionelement>HTMLTableCaptionElement</a> <a href=#dom-table-caption title=dom-table-caption>caption</a>;
  <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-createcaption title=dom-table-createCaption>createCaption</a>();
  void <a href=#dom-table-deletecaption title=dom-table-deleteCaption>deleteCaption</a>();
           attribute <a href=#htmltablesectionelement>HTMLTableSectionElement</a> <a href=#dom-table-thead title=dom-table-tHead>tHead</a>;
  <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-createthead title=dom-table-createTHead>createTHead</a>();
  void <a href=#dom-table-deletethead title=dom-table-deleteTHead>deleteTHead</a>();
           attribute <a href=#htmltablesectionelement>HTMLTableSectionElement</a> <a href=#dom-table-tfoot title=dom-table-tFoot>tFoot</a>;
  <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-createtfoot title=dom-table-createTFoot>createTFoot</a>();
  void <a href=#dom-table-deletetfoot title=dom-table-deleteTFoot>deleteTFoot</a>();
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-table-tbodies title=dom-table-tBodies>tBodies</a>;
  <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-createtbody title=dom-table-createTBody>createTBody</a>();
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-table-rows title=dom-table-rows>rows</a>;
  <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-insertrow title=dom-table-insertRow>insertRow</a>(in optional long index);
  void <a href=#dom-table-deleterow title=dom-table-deleteRow>deleteRow</a>(in long index);
           attribute DOMString <a href=#dom-table-summary title=dom-table-summary>summary</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-table-element>table</a></code> element <a href=#represents>represents</a> data with
  more than one dimension, in the form of a <a href=#concept-table title=concept-table>table</a>.</p>

  <div class=impl>

  <p>The <code><a href=#the-table-element>table</a></code> element takes part in the <a href=#table-model>table
  model</a>.</p>

  </div>

  <p>Tables must not be used as layout aids. Historically, some Web
  authors have misused tables in HTML as a way to control their page
  layout. This usage is non-conforming, because tools attempting to
  extract tabular data from such documents would obtain very confusing
  results. In particular, users of accessibility tools like screen
  readers are likely to find it very difficult to navigate pages with
  tables used for layout.</p>

  <p class=note>There are a variety of alternatives to using HTML
  tables for layout, primarily using CSS positioning and the CSS table
  model.</p>

  <div class=impl>

  <p>User agents that do table analysis on arbitrary content are
  encouraged to find heuristics to determine which tables actually
  contain data and which are merely being used for layout. This
  specification does not define a precise heuristic.</p>

  </div>

  <p>Tables have rows and columns given by their descendants. A table
  must not have an empty row or column<span class=impl>, as
  described in the description of the <a href=#table-model>table
  model</a></span>. <!-- conformance criteria for detecting this
  are in the table model section --></p>

  <p id=table-descriptions>For tables that consist of more than just
  a grid of cells with headers in the first row and headers in the
  first column, and for any table in general where the reader might
  have difficulty understanding the content, authors should include
  explanatory information introducing the table. This information is
  useful for all users, but is especially useful for users who cannot
  see the table, e.g. users of screen readers.</p>

  <p>Such explanatory information should introduce the purpose of the
  table, outline its basic cell structure, highlight any trends or
  patterns, and generally teach the user how to use the table.</p>

  <div class=example>

   <p>For instance, the following table:</p>

   <table><caption>Characteristics with positive and negative sides</caption>
    <thead><tr><th id=n> Negative
      <th> Characteristic
      <th> Positive
    <tbody><tr><td headers="n r1"> Sad
      <th id=r1> Mood
      <td> Happy
     <tr><td headers="n r2"> Failing
      <th id=r2> Grade
      <td> Passing
   </table><p>...might benefit from a description explaining the way the table
   is laid out, something like "Characteristics are given in the
   second column, with the negative side in the left column and the
   positive side in the right column".</p>

  </div>

  <p>There are a variety of ways to include this information, such as:</p>

  <dl><dt>In prose, surrounding the table</dt>

   <dd>
    <div class=example><pre>&lt;p&gt;In the following table, characteristics are given in the second
column, with the negative side in the left column and the positive
side in the right column.&lt;/p&gt;
&lt;table&gt;
 &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th id="n"&gt; Negative
   &lt;th&gt; Characteristic
   &lt;th&gt; Positive
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td headers="n r1"&gt; Sad
   &lt;th id="r1"&gt; Mood
   &lt;td&gt; Happy
  &lt;tr&gt;
   &lt;td headers="n r2"&gt; Failing
   &lt;th id="r2"&gt; Grade
   &lt;td&gt; Passing
&lt;/table&gt;</pre></div>
   </dd>

   <dt>In the table's <code><a href=#the-caption-element>caption</a></code></dt>

   <dd>
    <div class=example><pre>&lt;table&gt;
 &lt;caption&gt;
  &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
  &lt;p&gt;Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.&lt;/p&gt;
 &lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th id="n"&gt; Negative
   &lt;th&gt; Characteristic
   &lt;th&gt; Positive
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td headers="n r1"&gt; Sad
   &lt;th id="r1"&gt; Mood
   &lt;td&gt; Happy
  &lt;tr&gt;
   &lt;td headers="n r2"&gt; Failing
   &lt;th id="r2"&gt; Grade
   &lt;td&gt; Passing
&lt;/table&gt;</pre></div>
   </dd>

   <dt>In the table's <code><a href=#the-caption-element>caption</a></code>, in a <code><a href=#the-details-element>details</a></code> element</dt>

   <dd>
    <div class=example><pre>&lt;table&gt;
 &lt;caption&gt;
  &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
  &lt;details&gt;
   &lt;summary&gt;Help&lt;/summary&gt;
   &lt;p&gt;Characteristics are given in the second column, with the
   negative side in the left column and the positive side in the right
   column.&lt;/p&gt;
  &lt;/details&gt;
 &lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th id="n"&gt; Negative
   &lt;th&gt; Characteristic
   &lt;th&gt; Positive
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td headers="n r1"&gt; Sad
   &lt;th id="r1"&gt; Mood
   &lt;td&gt; Happy
  &lt;tr&gt;
   &lt;td headers="n r2"&gt; Failing
   &lt;th id="r2"&gt; Grade
   &lt;td&gt; Passing
&lt;/table&gt;</pre></div>
   </dd>

   <dt>Next to the table, in the same <code><a href=#the-figure-element>figure</a></code></dt>

   <dd>
    <div class=example><pre>&lt;figure&gt;
 &lt;figcaption&gt;Characteristics with positive and negative sides&lt;/figcaption&gt;
 &lt;p&gt;Characteristics are given in the second column, with the
 negative side in the left column and the positive side in the right
 column.&lt;/p&gt;
 &lt;table&gt;
  &lt;thead&gt;
   &lt;tr&gt;
    &lt;th id="n"&gt; Negative
    &lt;th&gt; Characteristic
    &lt;th&gt; Positive
  &lt;tbody&gt;
   &lt;tr&gt;
    &lt;td headers="n r1"&gt; Sad
    &lt;th id="r1"&gt; Mood
    &lt;td&gt; Happy
   &lt;tr&gt;
    &lt;td headers="n r2"&gt; Failing
    &lt;th id="r2"&gt; Grade
    &lt;td&gt; Passing
 &lt;/table&gt;
&lt;/figure&gt;</pre></div>
   </dd>

   <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></code></dt>

   <dd>
    <div class=example><pre>&lt;figure&gt;
 &lt;figcaption&gt;
  &lt;strong&gt;Characteristics with positive and negative sides&lt;/strong&gt;
  &lt;p&gt;Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.&lt;/p&gt;
 &lt;/figcaption&gt;
 &lt;table&gt;
  &lt;thead&gt;
   &lt;tr&gt;
    &lt;th id="n"&gt; Negative
    &lt;th&gt; Characteristic
    &lt;th&gt; Positive
  &lt;tbody&gt;
   &lt;tr&gt;
    &lt;td headers="n r1"&gt; Sad
    &lt;th id="r1"&gt; Mood
    &lt;td&gt; Happy
   &lt;tr&gt;
    &lt;td headers="n r2"&gt; Failing
    &lt;th id="r2"&gt; Grade
    &lt;td&gt; Passing
 &lt;/table&gt;
&lt;/figure&gt;</pre></div>
   </dd>

  </dl><p>Authors may also use other techniques, or combinations of the
  above techniques, as appropriate.</p>

  <p>The best option, of course, rather than writing a description
  explaining the way the table is laid out, is to adjust the table
  such that no explanation is needed.</p>

  <div class=example>

   <p>In the case of the table used in the examples above, a simple
   rearrangement of the table so that the headers are on the top and
   left sides removes the need for an explanation as well as removing
   the need for the use of <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attributes:</p>

   <pre>&lt;table&gt;
 &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th&gt; Characteristic
   &lt;th&gt; Negative
   &lt;th&gt; Positive
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th&gt; Mood
   &lt;td&gt; Sad
   &lt;td&gt; Happy
  &lt;tr&gt;
   &lt;th&gt; Grade
   &lt;td&gt; Failing
   &lt;td&gt; Passing
&lt;/table&gt;</pre>

  </div>

  <p>The <dfn id=attr-table-summary title=attr-table-summary><code>summary</code></dfn>
  attribute on <code><a href=#the-table-element>table</a></code> elements was suggested in earlier
  versions of the language as a technique for providing explanatory
  text for complex tables for users of screen readers. One of the <a href=#table-descriptions>techniques</a> described <!--in the
  <code>table</code> section--> above should be used
  instead. <!--Authors should not specify the <code
  title="attr-table-summary">summary</code> attribute on
  <code>table</code> elements. --> <!-- 2.65% pages --></p>

  <p class=note>In particular, authors are encouraged to consider
  whether their explanatory text for tables is likely to be useful to
  the visually impaired: if their text would not be useful, then it is
  best to not include a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute. Similarly, if
  their explanatory text could help someone who is not visually
  impaired, e.g. someone who is seeing the table for the first time,
  then the text would be more useful before the table or in the
  <code><a href=#the-caption-element>caption</a></code>. For example, describing the conclusions of the
  data in a table is useful to everyone; explaining how to read the
  table, if not obvious from the headers alone, is useful to everyone;
  describing the structure of the table, if it is easy to grasp
  visually, may not be useful to everyone, but it might also not be
  useful to users who can quickly navigate the table with an
  accessibility tool.</p>

  <!--
  <p class="note">Use of the <code
  title="attr-table-summary">summary</code> attribute is discouraged
  because in practice it is poorly understood. Because the attribute
  is not exposed in visual user agents, authors who have included it
  have typically not been able to test it, and have therefore set the
  attribute to values that are of no use to users of accessibility
  tools. This has lead to accessibility tools introducing heuristics
  to try to avoid exposing such usage of the attribute to users. Even
  the few authors who have made the best use of the attribute have
  often misused it, for example by including text that would in fact
  be useful for all users, or that is redundant with other information
  on the page separate from the table.</p>
  -->

  <div class=impl>

  <p>If a <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute, the user agent
  may report the contents of that attribute to the user.</p>

  </div>

  <dl class=domintro><dt><var title="">table</var> . <code title=dom-table-caption><a href=#dom-table-caption>caption</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the table's <code><a href=#the-caption-element>caption</a></code> element.</p>
    <p>Can be set, to replace the <code><a href=#the-caption-element>caption</a></code> element. If the
    new value is not a <code><a href=#the-caption-element>caption</a></code> element, throws a
    <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">caption</var> = <var title="">table</var> . <code title=dom-table-createCaption><a href=#dom-table-createcaption>createCaption</a></code>()</dt>
   <dd>
    <p>Ensures the table has a <code><a href=#the-caption-element>caption</a></code> element, and returns it.</p>
   </dd>

   <dt><var title="">table</var> . <code title=dom-table-deleteCaption><a href=#dom-table-deletecaption>deleteCaption</a></code>()</dt>
   <dd>
    <p>Ensures the table does not have a <code><a href=#the-caption-element>caption</a></code> element.</p>
   </dd>

   <dt><var title="">table</var> . <code title=dom-table-tHead><a href=#dom-table-thead>tHead</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the table's <code><a href=#the-thead-element>thead</a></code> element.</p>
    <p>Can be set, to replace the <code><a href=#the-thead-element>thead</a></code> element. If the
    new value is not a <code><a href=#the-thead-element>thead</a></code> element, throws a
    <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">thead</var> = <var title="">table</var> . <code title=dom-table-createTHead><a href=#dom-table-createthead>createTHead</a></code>()</dt>
   <dd>
    <p>Ensures the table has a <code><a href=#the-thead-element>thead</a></code> element, and returns it.</p>
   </dd>

   <dt><var title="">table</var> . <code title=dom-table-deleteTHead><a href=#dom-table-deletethead>deleteTHead</a></code>()</dt>
   <dd>
    <p>Ensures the table does not have a <code><a href=#the-thead-element>thead</a></code> element.</p>
   </dd>

   <dt><var title="">table</var> . <code title=dom-table-tFoot><a href=#dom-table-tfoot>tFoot</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the table's <code><a href=#the-tfoot-element>tfoot</a></code> element.</p>
    <p>Can be set, to replace the <code><a href=#the-tfoot-element>tfoot</a></code> element. If the
    new value is not a <code><a href=#the-tfoot-element>tfoot</a></code> element, throws a
    <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">tfoot</var> = <var title="">table</var> . <code title=dom-table-createTFoot><a href=#dom-table-createtfoot>createTFoot</a></code>()</dt>
   <dd>
    <p>Ensures the table has a <code><a href=#the-tfoot-element>tfoot</a></code> element, and returns it.</p>
   </dd>

   <dt><var title="">table</var> . <code title=dom-table-deleteTFoot><a href=#dom-table-deletetfoot>deleteTFoot</a></code>()</dt>
   <dd>
    <p>Ensures the table does not have a <code><a href=#the-tfoot-element>tfoot</a></code> element.</p>
   </dd>

   <dt><var title="">table</var> . <code title=dom-table-tBodies><a href=#dom-table-tbodies>tBodies</a></code></dt>
   <dd>
    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-tbody-element>tbody</a></code> elements of the table.</p>
   </dd>

   <dt><var title="">tbody</var> = <var title="">table</var> . <code title=dom-table-createTBody><a href=#dom-table-createtbody>createTBody</a></code>()</dt>
   <dd>
    <p>Creates a <code><a href=#the-tbody-element>tbody</a></code> element, inserts it into the table, and returns it.</p>
   </dd>

   <dt><var title="">table</var> . <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code></dt>
   <dd>
    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-tr-element>tr</a></code> elements of the table.</p>
   </dd>

   <dt><var title="">tr</var> = <var title="">table</var> . <code title=dom-table-insertRow><a href=#dom-table-insertrow>insertRow</a></code>(<var title="">index</var>)</dt>
   <dd>
    <p>Creates a <code><a href=#the-tr-element>tr</a></code> element, along with a <code><a href=#the-tbody-element>tbody</a></code> if required, inserts them into the table at the position given by the argument, and returns the <code><a href=#the-tr-element>tr</a></code>.</p>
    <p>The position is relative to the rows in the table. The index &minus;1 is equivalent to inserting at the end of the table.</p>
    <p>If the given position is less than &minus;1 or greater than the number of rows, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">table</var> . <code title=dom-table-deleteRow><a href=#dom-table-deleterow>deleteRow</a></code>(<var title="">index</var>)</dt>
   <dd>
    <p>Removes the <code><a href=#the-tr-element>tr</a></code> element with the given position in the table.</p>
    <p>The position is relative to the rows in the table. The index &minus;1 is equivalent to deleting the last row of the table.</p>
    <p>If the given position is less than &minus;1 or greater than the index of the last row, or if there are no rows, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-table-caption title=dom-table-caption><code>caption</code></dfn> IDL
  attribute must return, on getting, the first <code><a href=#the-caption-element>caption</a></code>
  element child of the <code><a href=#the-table-element>table</a></code> element, if any, or null
  otherwise. On setting, if the new value is a <code><a href=#the-caption-element>caption</a></code>
  element, the first <code><a href=#the-caption-element>caption</a></code> element child of the
  <code><a href=#the-table-element>table</a></code> element, if any, must be removed, and the new
  value must be inserted as the first node of the <code><a href=#the-table-element>table</a></code>
  element. If the new value is not a <code><a href=#the-caption-element>caption</a></code> element,
  then a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> DOM exception must be
  raised instead.</p>

  <p>The <dfn id=dom-table-createcaption title=dom-table-createCaption><code>createCaption()</code></dfn>
  method must return the first <code><a href=#the-caption-element>caption</a></code> element child of
  the <code><a href=#the-table-element>table</a></code> element, if any; otherwise a new
  <code><a href=#the-caption-element>caption</a></code> element must be created, inserted as the first
  node of the <code><a href=#the-table-element>table</a></code> element, and then returned.</p>

  <p>The <dfn id=dom-table-deletecaption title=dom-table-deleteCaption><code>deleteCaption()</code></dfn>
  method must remove the first <code><a href=#the-caption-element>caption</a></code> element child of
  the <code><a href=#the-table-element>table</a></code> element, if any.</p>

  <p>The <dfn id=dom-table-thead title=dom-table-tHead><code>tHead</code></dfn> IDL
  attribute must return, on getting, the first <code><a href=#the-thead-element>thead</a></code>
  element child of the <code><a href=#the-table-element>table</a></code> element, if any, or null
  otherwise. On setting, if the new value is a <code><a href=#the-thead-element>thead</a></code>
  element, the first <code><a href=#the-thead-element>thead</a></code> element child of the
  <code><a href=#the-table-element>table</a></code> element, if any, must be removed, and the new
  value must be inserted immediately before the first element in the
  <code><a href=#the-table-element>table</a></code> element that is neither a <code><a href=#the-caption-element>caption</a></code>
  element nor a <code><a href=#the-colgroup-element>colgroup</a></code> element, if any, or at the end
  of the table if there are no such elements. If the new value is not
  a <code><a href=#the-thead-element>thead</a></code> element, then a
  <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> DOM exception must be raised
  instead.</p>

  <p>The <dfn id=dom-table-createthead title=dom-table-createTHead><code>createTHead()</code></dfn>
  method must return the first <code><a href=#the-thead-element>thead</a></code> element child of the
  <code><a href=#the-table-element>table</a></code> element, if any; otherwise a new
  <code><a href=#the-thead-element>thead</a></code> element must be created and inserted immediately
  before the first element in the <code><a href=#the-table-element>table</a></code> element that is
  neither a <code><a href=#the-caption-element>caption</a></code> element nor a <code><a href=#the-colgroup-element>colgroup</a></code>
  element, if any, or at the end of the table if there are no such
  elements, and then that new element must be returned.</p>

  <p>The <dfn id=dom-table-deletethead title=dom-table-deleteTHead><code>deleteTHead()</code></dfn>
  method must remove the first <code><a href=#the-thead-element>thead</a></code> element child of the
  <code><a href=#the-table-element>table</a></code> element, if any.</p>

  <p>The <dfn id=dom-table-tfoot title=dom-table-tFoot><code>tFoot</code></dfn> IDL
  attribute must return, on getting, the first <code><a href=#the-tfoot-element>tfoot</a></code>
  element child of the <code><a href=#the-table-element>table</a></code> element, if any, or null
  otherwise. On setting, if the new value is a <code><a href=#the-tfoot-element>tfoot</a></code>
  element, the first <code><a href=#the-tfoot-element>tfoot</a></code> element child of the
  <code><a href=#the-table-element>table</a></code> element, if any, must be removed, and the new
  value must be inserted immediately before the first element in the
  <code><a href=#the-table-element>table</a></code> element that is neither a <code><a href=#the-caption-element>caption</a></code>
  element, a <code><a href=#the-colgroup-element>colgroup</a></code> element, nor a <code><a href=#the-thead-element>thead</a></code>
  element, if any, or at the end of the table if there are no such
  elements. If the new value is not a <code><a href=#the-tfoot-element>tfoot</a></code> element, then
  a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> DOM exception must be raised
  instead.</p>

  <p>The <dfn id=dom-table-createtfoot title=dom-table-createTFoot><code>createTFoot()</code></dfn>
  method must return the first <code><a href=#the-tfoot-element>tfoot</a></code> element child of the
  <code><a href=#the-table-element>table</a></code> element, if any; otherwise a new
  <code><a href=#the-tfoot-element>tfoot</a></code> element must be created and inserted immediately
  before the first element in the <code><a href=#the-table-element>table</a></code> element that is
  neither a <code><a href=#the-caption-element>caption</a></code> element, a <code><a href=#the-colgroup-element>colgroup</a></code>
  element, nor a <code><a href=#the-thead-element>thead</a></code> element, if any, or at the end of
  the table if there are no such elements, and then that new element
  must be returned.</p>

  <p>The <dfn id=dom-table-deletetfoot title=dom-table-deleteTFoot><code>deleteTFoot()</code></dfn>
  method must remove the first <code><a href=#the-tfoot-element>tfoot</a></code> element child of the
  <code><a href=#the-table-element>table</a></code> element, if any.</p>

  <p>The <dfn id=dom-table-tbodies title=dom-table-tBodies><code>tBodies</code></dfn>
  attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#the-table-element>table</a></code> node, whose filter matches only
  <code><a href=#the-tbody-element>tbody</a></code> elements that are children of the
  <code><a href=#the-table-element>table</a></code> element.</p>

  <p>The <dfn id=dom-table-createtbody title=dom-table-createTBody><code>createTBody()</code></dfn>
  method must create a new <code><a href=#the-tbody-element>tbody</a></code> element, insert it
  immediately after the last <code><a href=#the-tbody-element>tbody</a></code> element in the
  <code><a href=#the-table-element>table</a></code> element, if any, or at the end of the
  <code><a href=#the-table-element>table</a></code> element if the <code><a href=#the-table-element>table</a></code> element has no
  <code><a href=#the-tbody-element>tbody</a></code> element children, and then must return the new
  <code><a href=#the-tbody-element>tbody</a></code> element.</p>

  <p>The <dfn id=dom-table-rows title=dom-table-rows><code>rows</code></dfn> attribute
  must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#the-table-element>table</a></code> node, whose filter matches only <code><a href=#the-tr-element>tr</a></code>
  elements that are either children of the <code><a href=#the-table-element>table</a></code> element,
  or children of <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, or
  <code><a href=#the-tfoot-element>tfoot</a></code> elements that are themselves children of the
  <code><a href=#the-table-element>table</a></code> element. The elements in the collection must be
  ordered such that those elements whose parent is a
  <code><a href=#the-thead-element>thead</a></code> are included first, in tree order, followed by
  those elements whose parent is either a <code><a href=#the-table-element>table</a></code> or
  <code><a href=#the-tbody-element>tbody</a></code> element, again in tree order, followed finally by
  those elements whose parent is a <code><a href=#the-tfoot-element>tfoot</a></code> element, still
  in tree order.</p>

  <p>The behavior of the <dfn id=dom-table-insertrow title=dom-table-insertRow><code>insertRow(<var title="">index</var>)</code></dfn> method depends on the state of
  the table. When it is called, the method must act as required by the
  first item in the following list of conditions that describes the
  state of the table and the <var title="">index</var> argument:</p>

  <dl class=switch><dt>If <var title="">index</var> is less than &minus;1 or greater than
   the number of elements in <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code>
   collection:</dt>

   <dd>The method must raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
   exception.</dd>

   <dt>If the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection has
   zero elements in it, and the <code><a href=#the-table-element>table</a></code> has no
   <code><a href=#the-tbody-element>tbody</a></code> elements in it:</dt>

   <dd>The method must create a <code><a href=#the-tbody-element>tbody</a></code> element, then
   create a <code><a href=#the-tr-element>tr</a></code> element, then append the <code><a href=#the-tr-element>tr</a></code>
   element to the <code><a href=#the-tbody-element>tbody</a></code> element, then append the
   <code><a href=#the-tbody-element>tbody</a></code> element to the <code><a href=#the-table-element>table</a></code> element, and
   finally return the <code><a href=#the-tr-element>tr</a></code> element.</dd>

   <dt>If the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection has
   zero elements in it:</dt>

   <dd>The method must create a <code><a href=#the-tr-element>tr</a></code> element, append it to
   the last <code><a href=#the-tbody-element>tbody</a></code> element in the table, and return the
   <code><a href=#the-tr-element>tr</a></code> element.</dd>

   <dt>If <var title="">index</var> is missing, equal to &minus;1, or
   equal to the number of items in <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection:</dt>

   <dd>The method must create a <code><a href=#the-tr-element>tr</a></code> element, and append it
   to the parent of the last <code><a href=#the-tr-element>tr</a></code> element in the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection. Then, the newly
   created <code><a href=#the-tr-element>tr</a></code> element must be returned.</dd>

   <dt>Otherwise:</dt>

   <dd>The method must create a <code><a href=#the-tr-element>tr</a></code> element, insert it
   immediately before the <var title="">index</var>th <code><a href=#the-tr-element>tr</a></code>
   element in the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection,
   in the same parent, and finally must return the newly created
   <code><a href=#the-tr-element>tr</a></code> element.</dd>

  </dl><p>When the <dfn id=dom-table-deleterow title=dom-table-deleteRow><code>deleteRow(<var title="">index</var>)</code></dfn> method is called, the user agent
  must run the following steps:</p>

  <ol><li><p>If <var title="">index</var> is equal to &minus;1, then
   <var title="">index</var> must be set to the number if items in the
   <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection, minus
   one.</li>

   <li><p>Now, if <var title="">index</var> is less than zero, or
   greater than or equal to the number of elements in the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection, the method must
   instead raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception, and these
   steps must be aborted.</li>

   <li><p>Otherwise, the method must remove the <var title="">index</var>th element in the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection from its parent.</p>

  </ol><p>The <dfn id=dom-table-summary title=dom-table-summary><code>summary</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  </div>


  <h4 id=the-caption-element><span class=secno>4.9.2 </span>The <dfn><code>caption</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As the first element child of a <code><a href=#the-table-element>table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>, but with no descendant <code><a href=#the-table-element>table</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmltablecaptionelement>HTMLTableCaptionElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-caption-element>caption</a></code> element <a href=#represents>represents</a> the title of the
  <code><a href=#the-table-element>table</a></code> that is its parent, if it has a parent and that
  is a <code><a href=#the-table-element>table</a></code> element.</p>

  <div class=impl>

  <p>The <code><a href=#the-caption-element>caption</a></code> element takes part in the <a href=#table-model>table
  model</a>.</p>

  </div>

  <p>When a <code><a href=#the-table-element>table</a></code> element is the only content in a
  <code><a href=#the-figure-element>figure</a></code> element other than the <code><a href=#the-figcaption-element>figcaption</a></code>,
  the <code><a href=#the-caption-element>caption</a></code> element should be omitted in favor of the
  <code><a href=#the-figcaption-element>figcaption</a></code>.</p>

  <p>A caption can introduce context for a table, making it
  significantly easier to understand.</p>

  <div class=example>

   <p>Consider, for instance, the following table:</p>

   <table class=dice-example><tr><th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
    <tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
    <tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
    <tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
    <tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
    <tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
    <tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
   </table><p>In the abstract, this table is not clear. However, with a
   caption giving the table's number (for reference in the main prose)
   and explaining its use, it makes more sense:</p>

   <pre>&lt;caption&gt;
&lt;p&gt;Table 1.
&lt;p&gt;This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
&lt;/caption&gt;</pre>

 <!-- HTML4POLICE (hidden in w3c version because w3c version has to be valid HTML4) -->
   <p>This provides the user with more context:</p>

   <table class=dice-example><caption>
     <p>Table 1.
     <p>This table shows the total score obtained from rolling two
     six-sided dice. The first row represents the value of the first
     die, the first column the value of the second die. The total is
     given in the cell that corresponds to the values of the two dice.
    </caption>
    <tr><th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
    <tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
    <tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
    <tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
    <tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
    <tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
    <tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
   </table></div>




  <h4 id=the-colgroup-element><span class=secno>4.9.3 </span>The <dfn><code>colgroup</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   <code><a href=#the-caption-element>caption</a></code> elements and before any <code><a href=#the-thead-element>thead</a></code>,
   <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, and <code><a href=#the-tr-element>tr</a></code>
   elements.</dd>
   <dt>Content model:</dt>
   <dd>If the <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute is present: Empty.</dd>
   <dd>If the <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute is absent: Zero or more <code><a href=#the-col-element>col</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmltablecolelement>HTMLTableColElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute unsigned long <a href=#dom-colgroup-span title=dom-colgroup-span>span</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-colgroup-element>colgroup</a></code> element <a href=#represents>represents</a> a <a href=#concept-column-group title=concept-column-group>group</a> of one or more <a href=#concept-column title=concept-column>columns</a> in the <code><a href=#the-table-element>table</a></code> that
  is its parent, if it has a parent and that is a <code><a href=#the-table-element>table</a></code>
  element.</p>

  <p>If the <code><a href=#the-colgroup-element>colgroup</a></code> element contains no <code><a href=#the-col-element>col</a></code>
  elements, then the element may have a <dfn id=attr-colgroup-span title=attr-colgroup-span><code>span</code></dfn> content attribute
  specified, whose value must be a <a href=#valid-non-negative-integer>valid non-negative
  integer</a> greater than zero.</p>

  <div class=impl>

  <p>The <code><a href=#the-colgroup-element>colgroup</a></code> element and its <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute take part in the
  <a href=#table-model>table model</a>.</p>

  <p>The <dfn id=dom-colgroup-span title=dom-colgroup-span><code>span</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name. The value must be <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative
  numbers greater than zero</a>.</p>

  </div>


  <h4 id=the-col-element><span class=secno>4.9.4 </span>The <dfn><code>col</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-colgroup-element>colgroup</a></code> element that doesn't have
   a <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-col-span><a href=#attr-col-span>span</a></code></dd>
   <!-- v2: char, to specify the decimal character used in numeric data cells in the column (not header cells) -->
   <dt>DOM interface:</dt>
   <dd>
    <p><code><a href=#htmltablecolelement>HTMLTableColElement</a></code>, same as for
    <code><a href=#the-colgroup-element>colgroup</a></code> elements. This interface defines one member,
    <code title=dom-col-span><a href=#dom-col-span>span</a></code>.</p>
   </dd>
  </dl><p>If a <code><a href=#the-col-element>col</a></code> element has a parent and that is a
  <code><a href=#the-colgroup-element>colgroup</a></code> element that itself has a parent that is a
  <code><a href=#the-table-element>table</a></code> element, then the <code><a href=#the-col-element>col</a></code> element
  <a href=#represents>represents</a> one or more <a href=#concept-column title=concept-column>columns</a> in the <a href=#concept-column-group title=concept-column-group>column group</a> represented by that
  <code><a href=#the-colgroup-element>colgroup</a></code>.</p>

  <p>The element may have a <dfn id=attr-col-span title=attr-col-span><code>span</code></dfn> content attribute
  specified, whose value must be a <a href=#valid-non-negative-integer>valid non-negative
  integer</a> greater than zero.</p>

  <div class=impl>

  <p>The <code><a href=#the-col-element>col</a></code> element and its <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute take part in the
  <a href=#table-model>table model</a>.</p>

  <p>The <dfn id=dom-col-span title=dom-col-span><code>span</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name. The value must be <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative
  numbers greater than zero</a>.</p>

  </div>


  <h4 id=the-tbody-element><span class=secno>4.9.5 </span>The <dfn><code>tbody</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, and
   <code><a href=#the-thead-element>thead</a></code> elements, but only if there are no
   <code><a href=#the-tr-element>tr</a></code> elements that are children of the
   <code><a href=#the-table-element>table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href=#the-tr-element>tr</a></code> elements</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmltablesectionelement>HTMLTableSectionElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-tbody-rows title=dom-tbody-rows>rows</a>;
  <a href=#htmlelement>HTMLElement</a> <a href=#dom-tbody-insertrow title=dom-tbody-insertRow>insertRow</a>(in optional long index);
  void <a href=#dom-tbody-deleterow title=dom-tbody-deleteRow>deleteRow</a>(in long index);
};</pre>
    <p>The <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> interface is also
    used for <code><a href=#the-thead-element>thead</a></code> and <code><a href=#the-tfoot-element>tfoot</a></code> elements.</p>
   </dd>
  </dl><p>The <code><a href=#the-tbody-element>tbody</a></code> element <a href=#represents>represents</a> a <a href=#concept-row-group title=concept-row-group>block</a> of <a href=#concept-row title=concept-row>rows</a> that consist of a body of data for
  the parent <code><a href=#the-table-element>table</a></code> element, if the <code><a href=#the-tbody-element>tbody</a></code>
  element has a parent and it is a <code><a href=#the-table-element>table</a></code>.</p>

  <div class=impl>

  <p>The <code><a href=#the-tbody-element>tbody</a></code> element takes part in the <a href=#table-model>table
  model</a>.</p>

  </div>

  <dl class=domintro><dt><var title="">tbody</var> . <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code></dt>
   <dd>
    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-tr-element>tr</a></code> elements of the table section.</p>
   </dd>

   <dt><var title="">tr</var> = <var title="">tbody</var> . <code title=dom-tbody-insertRow><a href=#dom-tbody-insertrow>insertRow</a></code>( [ <var title="">index</var> ] )</dt>
   <dd>
    <p>Creates a <code><a href=#the-tr-element>tr</a></code> element, inserts it into the table section at the position given by the argument, and returns the <code><a href=#the-tr-element>tr</a></code>.</p>
    <p>The position is relative to the rows in the table section. The index &minus;1, which is the default if the argument is omitted, is equivalent to inserting at the end of the table section.</p>
    <p>If the given position is less than &minus;1 or greater than the number of rows, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">tbody</var> . <code title=dom-tbody-deleteRow><a href=#dom-tbody-deleterow>deleteRow</a></code>(<var title="">index</var>)</dt>
   <dd>
    <p>Removes the <code><a href=#the-tr-element>tr</a></code> element with the given position in the table section.</p>
    <p>The position is relative to the rows in the table section. The index &minus;1 is equivalent to deleting the last row of the table section.</p>
    <p>If the given position is less than &minus;1 or greater than the index of the last row, or if there are no rows, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-tbody-rows title=dom-tbody-rows><code>rows</code></dfn> attribute
  must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the element,
  whose filter matches only <code><a href=#the-tr-element>tr</a></code> elements that are children
  of the element.</p>

  <p>The <dfn id=dom-tbody-insertrow title=dom-tbody-insertRow><code>insertRow(<var title="">index</var>)</code></dfn> method must, when invoked on an
  element <var title="">table section</var>, act as follows:</p>

  <p>If <var title="">index</var> is less than &minus;1 or greater than the
  number of elements in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code>
  collection, the method must raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
  exception.</p>

  <p>If <var title="">index</var> is missing, equal to &minus;1, or
  equal to the number of items in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> collection, the method must
  create a <code><a href=#the-tr-element>tr</a></code> element, append it to the element <var title="">table section</var>, and return the newly created
  <code><a href=#the-tr-element>tr</a></code> element.</p>

  <p>Otherwise, the method must create a <code><a href=#the-tr-element>tr</a></code> element,
  insert it as a child of the <var title="">table section</var>
  element, immediately before the <var title="">index</var>th
  <code><a href=#the-tr-element>tr</a></code> element in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> collection, and finally must
  return the newly created <code><a href=#the-tr-element>tr</a></code> element.</p>

  <p>The <dfn id=dom-tbody-deleterow title=dom-tbody-deleteRow><code>deleteRow(<var title="">index</var>)</code></dfn> method must remove the <var title="">index</var>th element in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> collection from its parent. If
  <var title="">index</var> is less than zero or greater than or equal
  to the number of elements in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> collection, the method must
  instead raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>

  </div>


  <h4 id=the-thead-element><span class=secno>4.9.6 </span>The <dfn><code>thead</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   <code><a href=#the-caption-element>caption</a></code>, and <code><a href=#the-colgroup-element>colgroup</a></code>
   elements and before any <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, and
   <code><a href=#the-tr-element>tr</a></code> elements, but only if there are no other
   <code><a href=#the-thead-element>thead</a></code> elements that are children of the
   <code><a href=#the-table-element>table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href=#the-tr-element>tr</a></code> elements</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code>, as defined for
   <code><a href=#the-tbody-element>tbody</a></code> elements.</dd>
  </dl><p>The <code><a href=#the-thead-element>thead</a></code> element <a href=#represents>represents</a> the <a href=#concept-row-group title=concept-row-group>block</a> of <a href=#concept-row title=concept-row>rows</a> that consist of the column labels
  (headers) for the parent <code><a href=#the-table-element>table</a></code> element, if the
  <code><a href=#the-thead-element>thead</a></code> element has a parent and it is a
  <code><a href=#the-table-element>table</a></code>.</p>

  <div class=impl>

  <p>The <code><a href=#the-thead-element>thead</a></code> element takes part in the <a href=#table-model>table
  model</a>.</p>

  </div>


  <h4 id=the-tfoot-element><span class=secno>4.9.7 </span>The <dfn><code>tfoot</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, and <code><a href=#the-thead-element>thead</a></code>
   elements and before any <code><a href=#the-tbody-element>tbody</a></code> and <code><a href=#the-tr-element>tr</a></code>
   elements, but only if there are no other <code><a href=#the-tfoot-element>tfoot</a></code>
   elements that are children of the <code><a href=#the-table-element>table</a></code> element.</dd>
   <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, <code><a href=#the-thead-element>thead</a></code>,
   <code><a href=#the-tbody-element>tbody</a></code>, and <code><a href=#the-tr-element>tr</a></code> elements, but only if there
   are no other <code><a href=#the-tfoot-element>tfoot</a></code> elements that are children of the
   <code><a href=#the-table-element>table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href=#the-tr-element>tr</a></code> elements</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code>, as defined for
   <code><a href=#the-tbody-element>tbody</a></code> elements.</dd>
  </dl><p>The <code><a href=#the-tfoot-element>tfoot</a></code> element <a href=#represents>represents</a> the <a href=#concept-row-group title=concept-row-group>block</a> of <a href=#concept-row title=concept-row>rows</a> that consist of the column summaries
  (footers) for the parent <code><a href=#the-table-element>table</a></code> element, if the
  <code><a href=#the-tfoot-element>tfoot</a></code> element has a parent and it is a
  <code><a href=#the-table-element>table</a></code>.</p>

  <div class=impl>

  <p>The <code><a href=#the-tfoot-element>tfoot</a></code> element takes part in the <a href=#table-model>table
  model</a>.</p>

  </div>


  <h4 id=the-tr-element><span class=secno>4.9.8 </span>The <dfn><code>tr</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-thead-element>thead</a></code> element.</dd>
   <dd>As a child of a <code><a href=#the-tbody-element>tbody</a></code> element.</dd>
   <dd>As a child of a <code><a href=#the-tfoot-element>tfoot</a></code> element.</dd>
   <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, and <code><a href=#the-thead-element>thead</a></code>
   elements, but only if there are no <code><a href=#the-tbody-element>tbody</a></code> elements that
   are children of the <code><a href=#the-table-element>table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>When the parent node is a <code><a href=#the-thead-element>thead</a></code> element: Zero or more <code><a href=#the-th-element>th</a></code> elements</dd>
   <dd>Otherwise: Zero or more <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> elements</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmltablerowelement>HTMLTableRowElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
  readonly attribute long <a href=#dom-tr-rowindex title=dom-tr-rowIndex>rowIndex</a>;
  readonly attribute long <a href=#dom-tr-sectionrowindex title=dom-tr-sectionRowIndex>sectionRowIndex</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-tr-cells title=dom-tr-cells>cells</a>;
  <a href=#htmlelement>HTMLElement</a> <a href=#dom-tr-insertcell title=dom-tr-insertCell>insertCell</a>(in optional long index);
  void <a href=#dom-tr-deletecell title=dom-tr-deleteCell>deleteCell</a>(in long index);
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-tr-element>tr</a></code> element <a href=#represents>represents</a> a <a href=#concept-row title=concept-row>row</a> of <a href=#concept-cell title=concept-cell>cells</a> in a <a href=#concept-table title=concept-table>table</a>.</p>

  <div class=impl>

  <p>The <code><a href=#the-tr-element>tr</a></code> element takes part in the <a href=#table-model>table
  model</a>.</p>

  </div>

  <dl class=domintro><dt><var title="">tr</var> . <code title=dom-tr-rowIndex><a href=#dom-tr-rowindex>rowIndex</a></code></dt>

   <dd>

    <p>Returns the position of the row in the table's <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> list.</p>

    <p>Returns &minus;1 if the element isn't in a table.</p>

   </dd>

   <dt><var title="">tr</var> . <code title=dom-tr-sectionRowIndex><a href=#dom-tr-sectionrowindex>sectionRowIndex</a></code></dt>

   <dd>

    <p>Returns the position of the row in the table section's <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> list.</p>

    <p>Returns &minus;1 if the element isn't in a table section.</p>

   </dd>

   <dt><var title="">tr</var> . <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code></dt>
   <dd>

    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements of the row.</p>

   </dd>

   <dt><var title="">cell</var> = <var title="">tr</var> . <code title=dom-tr-insertCell><a href=#dom-tr-insertcell>insertCell</a></code>( [ <var title="">index</var> ] )</dt>

   <dd>

    <p>Creates a <code><a href=#the-td-element>td</a></code> element, inserts it into the table
    row at the position given by the argument, and returns the
    <code><a href=#the-td-element>td</a></code>.</p>

    <p>The position is relative to the cells in the row. The
    index &minus;1, which is the default if the argument is omitted,
    is equivalent to inserting at the end of the row.</p>

    <p>If the given position is less than &minus;1 or greater than
    the number of cells, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
    exception.</p>

   </dd>

   <dt><var title="">tr</var> . <code title=dom-tr-deleteCell><a href=#dom-tr-deletecell>deleteCell</a></code>(<var title="">index</var>)</dt>
   <dd>

    <p>Removes the <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element with the
    given position in the row.</p>

    <p>The position is relative to the cells in the row. The index
    &minus;1 is equivalent to deleting the last cell of the row.</p>

    <p>If the given position is less than &minus;1 or greater than
    the index of the last cell, or if there are no cells, throws an
    <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-tr-rowindex title=dom-tr-rowIndex><code>rowIndex</code></dfn>
  attribute must, if the element has a parent <code><a href=#the-table-element>table</a></code>
  element, or a parent <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, or
  <code><a href=#the-tfoot-element>tfoot</a></code> element and a <em>grandparent</em>
  <code><a href=#the-table-element>table</a></code> element, return the index of the <code><a href=#the-tr-element>tr</a></code>
  element in that <code><a href=#the-table-element>table</a></code> element's <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection. If there is no such
  <code><a href=#the-table-element>table</a></code> element, then the attribute must return
  &minus;1.</p>

  <p>The <dfn id=dom-tr-sectionrowindex title=dom-tr-sectionRowIndex><code>sectionRowIndex</code></dfn>
  attribute must, if the element has a parent <code><a href=#the-table-element>table</a></code>,
  <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, or <code><a href=#the-tfoot-element>tfoot</a></code>
  element, return the index of the <code><a href=#the-tr-element>tr</a></code> element in the
  parent element's <code title="">rows</code> collection (for tables,
  that's the <code title=dom-table-rows><a href=#dom-table-rows>HTMLTableElement.rows</a></code>
  collection; for table sections, that's the <code title=dom-tbody-rows><a href=#dom-tbody-rows>HTMLTableRowElement.rows</a></code>
  collection). If there is no such parent element, then the attribute
  must return &minus;1.</p>

  <p>The <dfn id=dom-tr-cells title=dom-tr-cells><code>cells</code></dfn> attribute
  must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#the-tr-element>tr</a></code> element, whose filter matches only <code><a href=#the-td-element>td</a></code>
  and <code><a href=#the-th-element>th</a></code> elements that are children of the
  <code><a href=#the-tr-element>tr</a></code> element.</p>

  <p>The <dfn id=dom-tr-insertcell title=dom-tr-insertCell><code>insertCell(<var title="">index</var>)</code></dfn> method must act as follows:</p>

  <p>If <var title="">index</var> is less than &minus;1 or greater than the
  number of elements in the <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code>
  collection, the method must raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
  exception.</p>

  <p>If <var title="">index</var> is missing, equal to &minus;1, or
  equal to the number of items in <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection, the method must create
  a <code><a href=#the-td-element>td</a></code> element, append it to the <code><a href=#the-tr-element>tr</a></code> element,
  and return the newly created <code><a href=#the-td-element>td</a></code> element.</p>

  <p>Otherwise, the method must create a <code><a href=#the-td-element>td</a></code> element,
  insert it as a child of the <code><a href=#the-tr-element>tr</a></code> element, immediately
  before the <var title="">index</var>th <code><a href=#the-td-element>td</a></code> or
  <code><a href=#the-th-element>th</a></code> element in the <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection, and finally must
  return the newly created <code><a href=#the-td-element>td</a></code> element.</p>

  <p>The <dfn id=dom-tr-deletecell title=dom-tr-deleteCell><code>deleteCell(<var title="">index</var>)</code></dfn> method must remove the <var title="">index</var>th element in the <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection from its parent. If
  <var title="">index</var> is less than zero or greater than or equal
  to the number of elements in the <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection, the method must
  instead raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>

  </div>


  <h4 id=the-td-element><span class=secno>4.9.9 </span>The <dfn><code>td</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-tr-element>tr</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code></dd>
   <dd><code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code></dd>
   <dd><code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code></dd>
   <!-- v2 char, to specify the decimal character used in numeric cells -->
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmltabledatacellelement>HTMLTableDataCellElement</dfn> : <a href=#htmltablecellelement>HTMLTableCellElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href=#the-td-element>td</a></code> element <a href=#represents>represents</a> a data <a href=#concept-cell title=concept-cell>cell</a> in a table.</p>

  <div class=impl>

  <p>The <code><a href=#the-td-element>td</a></code> element and its <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>, <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>, and <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attributes take part in the
  <a href=#table-model>table model</a>.</p>

  </div>


  <h4 id=the-th-element><span class=secno>4.9.10 </span>The <dfn><code>th</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-tr-element>tr</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code></dd>
   <dd><code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code></dd>
   <dd><code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code></dd>
   <dd><code title=attr-th-scope><a href=#attr-th-scope>scope</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmltableheadercellelement>HTMLTableHeaderCellElement</dfn> : <a href=#htmltablecellelement>HTMLTableCellElement</a> {
           attribute DOMString <a href=#dom-th-scope title=dom-th-scope>scope</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-th-element>th</a></code> element <a href=#represents>represents</a> a header <a href=#concept-cell title=concept-cell>cell</a> in a table.</p>

  <p>The <code><a href=#the-th-element>th</a></code> element may have a <dfn id=attr-th-scope title=attr-th-scope><code>scope</code></dfn> content attribute
  specified. The <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute is
  an <a href=#enumerated-attribute>enumerated attribute</a> with five states, four of which
  have explicit keywords:</p>

  <dl><dt>The <dfn id=attr-th-scope-row title=attr-th-scope-row><code>row</code></dfn>
   keyword, which maps to the <i>row</i> state</dt>

   <dd>The <i>row</i> state means the header cell applies to some of
   the subsequent cells in the same row(s).</dd>

   <dt>The <dfn id=attr-th-scope-col title=attr-th-scope-col><code>col</code></dfn>
   keyword, which maps to the <i>column</i> state</dt>

   <dd>The <i>column</i> state means the header cell applies to some
   of the subsequent cells in the same column(s).</dd>

   <dt>The <dfn id=attr-th-scope-rowgroup title=attr-th-scope-rowgroup><code>rowgroup</code></dfn> keyword,
   which maps to the <i>row group</i> state</dt>

   <dd>The <i>row group</i> state means the header cell applies to all
   the remaining cells in the row group. A <code><a href=#the-th-element>th</a></code> element's
   <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute must not be in
   the <a href=#attr-th-scope-rowgroup title=attr-th-scope-rowgroup>row group</a> state if
   the element is not anchored in a <a href=#concept-row-group title=concept-row-group>row group</a>.</dd>

   <dt>The <dfn id=attr-th-scope-colgroup title=attr-th-scope-colgroup><code>colgroup</code></dfn> keyword,
   which maps to the <i>column group</i> state</dt>

   <dd>The <i>column group</i> state means the header cell applies to
   all the remaining cells in the column group. A <code><a href=#the-th-element>th</a></code>
   element's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute must
   not be in the <a href=#attr-th-scope-colgroup title=attr-th-scope-colgroup>column
   group</a> state if the element is not anchored in a <a href=#concept-column-group title=concept-column-group>column group</a>.</dd>

   <dt>The <dfn id=attr-th-scope-auto title=attr-th-scope-auto>auto</dfn> state</dt>

   <dd>The <i>auto</i> state makes the header cell apply to a set of
   cells selected based on context.</dd>

  </dl><p>The <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute's
  <i>missing value default</i> is the <i>auto</i> state.</p>

  <div class=impl>

  <p>The <code><a href=#the-th-element>th</a></code> element and its <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>, <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>, <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code>, and <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attributes take part in the
  <a href=#table-model>table model</a>.</p>

  <p>The <dfn id=dom-th-scope title=dom-th-scope><code>scope</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  </div>

  <div class=example>

   <p>The following example shows how the <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute's <code title=attr-th-scope-rowgroup><a href=#attr-th-scope-rowgroup>rowgroup</a></code> value affects which
   data cells a header cell applies to.</p>

   <p>Here is a markup fragment showing a table:</p>

   <pre>&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt; &lt;th&gt; ID &lt;th&gt; Measurement &lt;th&gt; Average &lt;th&gt; Maximum
 &lt;tbody&gt;
  &lt;tr&gt; &lt;td&gt; &lt;th scope=rowgroup&gt; Cats &lt;td&gt; &lt;td&gt;
  &lt;tr&gt; &lt;td&gt; 93 &lt;th&gt; Legs &lt;td&gt; 3.5 &lt;td&gt; 4
  &lt;tr&gt; &lt;td&gt; 10 &lt;th&gt; Tails &lt;td&gt; 1 &lt;td&gt; 1
 &lt;tbody&gt;
  &lt;tr&gt; &lt;td&gt; &lt;th scope=rowgroup&gt; English speakers &lt;td&gt; &lt;td&gt;
  &lt;tr&gt; &lt;td&gt; 32 &lt;th&gt; Legs &lt;td&gt; 2.67 &lt;td&gt; 4
  &lt;tr&gt; &lt;td&gt; 35 &lt;th&gt; Tails &lt;td&gt; 0.33 &lt;td&gt; 1
&lt;/table&gt;</pre>

   <p>This would result in the following table:</p>

   <table><thead><tr><th> ID <th> Measurement <th> Average <th> Maximum
    <tbody><tr><td> <th scope=rowgroup> Cats <td> <td>
     <tr><td> 93 <th> Legs <td> 3.5 <td> 4
     <tr><td> 10 <th> Tails <td> 1 <td> 1
    <tbody><tr><td> <th scope=rowgroup> English speakers <td> <td>
     <tr><td> 32 <th> Legs <td> 2.67 <td> 4
     <tr><td> 35 <th> Tails <td> 0.33 <td> 1
   </table><p>The headers in the first row all apply directly down to the rows
   in their column.</p>

   <p>The headers with the explicit <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attributes apply to all the
   cells in their row group other than the cells in the first column.</p>

   <p>The remaining headers apply just to the cells to the right of
   them.</p>

   <!-- image source: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/151 -->
   <img alt="" src=images/table-scope-diagram.png><!-- (alt is empty because the diagram is completely described by the previous paragraphs) --></div>



  <h4 id=attributes-common-to-td-and-th-elements><span class=secno>4.9.11 </span>Attributes common to <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</h4>

  <p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements may have a <dfn id=attr-tdth-colspan title=attr-tdth-colspan><code>colspan</code></dfn> content
  attribute specified, whose value must be a <a href=#valid-non-negative-integer>valid non-negative
  integer</a> greater than zero.</p>

  <p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements may also have a
  <dfn id=attr-tdth-rowspan title=attr-tdth-rowspan><code>rowspan</code></dfn> content
  attribute specified, whose value must be a <a href=#valid-non-negative-integer>valid non-negative
  integer</a>.</p>

  <p>These attributes give the number of columns and rows respectively
  that the cell is to span. These attributes must not be used to
  overlap cells<span class=impl>, as described in the description of
  the <a href=#table-model>table model</a></span>.</p> <!-- conformance criteria
  for determining when this is violated are given in the processing
  model -->

  <hr><p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> element may have a <dfn id=attr-tdth-headers title=attr-tdth-headers><code>headers</code></dfn> content
  attribute specified. The <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if specified,
  must contain a string consisting of an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique
  space-separated tokens</a>, each of which must have the value of
  an ID of a <code><a href=#the-th-element>th</a></code> element taking part in the same <a href=#concept-table title=concept-table>table</a> as the <code><a href=#the-td-element>td</a></code> or
  <code><a href=#the-th-element>th</a></code> element<span class=impl> (as defined by the
  <a href=#table-model>table model</a>)</span>.</p>

  <p>A <code><a href=#the-th-element>th</a></code> element with ID <var title="">id</var> is said
  to be <i>directly targeted</i> by all <code><a href=#the-td-element>td</a></code> and
  <code><a href=#the-th-element>th</a></code> elements in the same <a href=#concept-table title=concept-table>table</a> that have <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attributes whose values
  include as one of their tokens the ID <var title="">id</var>. A
  <code><a href=#the-th-element>th</a></code> element <var title="">A</var> is said to be
  <i>targeted</i> by a <code><a href=#the-th-element>th</a></code> or <code><a href=#the-td-element>td</a></code> element
  <var title="">B</var> if either <var title="">A</var> is <i>directly
  targeted</i> by <var title="">B</var> or if there exists an element
  <var title="">C</var> that is itself <i>targeted</i> by the element
  <var title="">B</var> and <var title="">A</var> is <i>directly
  targeted</i> by <var title="">C</var>.</p>

  <p>A <code><a href=#the-th-element>th</a></code> element must not be <i>targeted</i> by
  itself.</p>

  <div class=impl>

  <p>The <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>, <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>, and <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attributes take part in the
  <a href=#table-model>table model</a>.</p>

  </div>

  <hr><p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements implement
  interfaces that inherit from the <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code>
  interface:</p>

  <pre class=idl>interface <dfn id=htmltablecellelement>HTMLTableCellElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute unsigned long <a href=#dom-tdth-colspan title=dom-tdth-colSpan>colSpan</a>;
           attribute unsigned long <a href=#dom-tdth-rowspan title=dom-tdth-rowSpan>rowSpan</a>;
  [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-tdth-headers title=dom-tdth-headers>headers</a>;
  readonly attribute long <a href=#dom-tdth-cellindex title=dom-tdth-cellIndex>cellIndex</a>;
};</pre>

  <dl class=domintro><dt><var title="">cell</var> . <code title=dom-tdth-cellIndex><a href=#dom-tdth-cellindex>cellIndex</a></code></dt>

   <dd>

    <p>Returns the position of the cell in the row's <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> list. This does not necessarily
    correspond to the <var title="">x</var>-position of the cell in
    the table, since earlier cells might cover multiple rows or
    columns.</p>

    <p>Returns 0 if the element isn't in a row.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-tdth-colspan title=dom-tdth-colSpan><code>colSpan</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name. The value must be <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative
  numbers greater than zero</a>.</p>

  <p>The <dfn id=dom-tdth-rowspan title=dom-tdth-rowSpan><code>rowSpan</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name. Its default value, which must be used if <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative integers">parsing the
  attribute as a non-negative integer</a> returns an error, is 1.</p>

  <p>The <dfn id=dom-tdth-headers title=dom-tdth-headers><code>headers</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  <p>The <dfn id=dom-tdth-cellindex title=dom-tdth-cellIndex><code>cellIndex</code></dfn>
  IDL attribute must, if the element has a parent <code><a href=#the-tr-element>tr</a></code>
  element, return the index of the cell's element in the parent
  element's <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection. If
  there is no such parent element, then the attribute must return
  0.</p>

  </div>


  <div class=impl>

  <h4 id=processing-model-0><span class=secno>4.9.12 </span>Processing model</h4>

  <p>The various table elements and their content attributes together
  define the <dfn id=table-model>table model</dfn>.</p>

  <p>A <dfn id=concept-table title=concept-table>table</dfn> consists of cells
  aligned on a two-dimensional grid of <dfn id=concept-slots title=concept-slots>slots</dfn> with coordinates (<var title="">x</var>, <var title="">y</var>). The grid is finite, and is
  either empty or has one or more slots. If the grid has one or more
  slots, then the <var title="">x</var> coordinates are always in the
  range <span title="">0&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">x<sub title="">width</sub></var></span>, and the <var title="">y</var>
  coordinates are always in the range <span title="">0&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">y<sub title="">height</sub></var></span>. If one or both of <var title="">x<sub title="">width</sub></var> and <var title="">y<sub title="">height</sub></var> are zero, then the table is empty (has
  no slots). Tables correspond to <code><a href=#the-table-element>table</a></code> elements.</p>

  <p>A <dfn id=concept-cell title=concept-cell>cell</dfn> is a set of slots anchored
  at a slot (<var title="">cell<sub title="">x</sub></var>, <var title="">cell<sub title="">y</sub></var>), and with a particular
  <var title="">width</var> and <var title="">height</var> such that
  the cell covers all the slots with coordinates (<var title="">x</var>, <var title="">y</var>) where <span title=""><var title="">cell<sub title="">x</sub></var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">cell<sub title="">x</sub></var>+<var title="">width</var></span> and
  <span title=""><var title="">cell<sub title="">y</sub></var>&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">cell<sub title="">y</sub></var>+<var title="">height</var></span>. Cells can
  either be <em>data cells</em> or <em>header cells</em>. Data cells
  correspond to <code><a href=#the-td-element>td</a></code> elements, and header cells correspond
  to <code><a href=#the-th-element>th</a></code> elements. Cells of both types can have zero or
  more associated header cells.</p>

  <p>It is possible, in certain error cases, for two cells to occupy
  the same slot.</p>

  <p>A <dfn id=concept-row title=concept-row>row</dfn> is a complete set of slots
  from <span title=""><var title="">x</var>=0</span> to <span title=""><var title="">x</var>=<var title="">x<sub title="">width</sub></var>-1</span>, for a particular value of <var title="">y</var>. Rows correspond to <code><a href=#the-tr-element>tr</a></code> elements.</p>

  <p>A <dfn id=concept-column title=concept-column>column</dfn> is a complete set of
  slots from <span title=""><var title="">y</var>=0</span> to <span title=""><var title="">y</var>=<var title="">y<sub title="">height</sub></var>-1</span>, for a particular value of <var title="">x</var>. Columns can correspond to <code><a href=#the-col-element>col</a></code>
  elements. In the absence of <code><a href=#the-col-element>col</a></code> elements, columns are
  implied.</p>

  <p>A <dfn id=concept-row-group title=concept-row-group>row group</dfn> is a set of
  <a href=#concept-row title=concept-row>rows</a> anchored at a slot (0, <var title="">group<sub title="">y</sub></var>) with a particular <var title="">height</var> such that the row group covers all the slots
  with coordinates (<var title="">x</var>, <var title="">y</var>)
  where <span title="">0&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">x<sub title="">width</sub></var></span> and <span title=""><var title="">group<sub title="">y</sub></var>&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">group<sub title="">y</sub></var>+<var title="">height</var></span>. Row groups
  correspond to <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
  <code><a href=#the-tfoot-element>tfoot</a></code> elements. Not every row is necessarily in a row
  group.</p>

  <p>A <dfn id=concept-column-group title=concept-column-group>column group</dfn> is a set
  of <a href=#concept-column title=concept-column>columns</a> anchored at a slot
  (<var title="">group<sub title="">x</sub></var>, 0) with a
  particular <var title="">width</var> such that the column group
  covers all the slots with coordinates (<var title="">x</var>, <var title="">y</var>) where <span title=""><var title="">group<sub title="">x</sub></var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">group<sub title="">x</sub></var>+<var title="">width</var></span> and
  <span title="">0&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">y<sub title="">height</sub></var></span>. Column groups
  correspond to <code><a href=#the-colgroup-element>colgroup</a></code> elements. Not every column is
  necessarily in a column group.</p>

  <p><a href=#concept-row-group title=concept-row-group>Row groups</a> cannot overlap
  each other. Similarly, <a href=#concept-column-group title=concept-column-group>column
  groups</a> cannot overlap each other.</p>

  <p>A <a href=#concept-cell title=concept-cell>cell</a> cannot cover slots that
  are from two or more <a href=#concept-row-group title=concept-row-group>row
  groups</a>. It is, however, possible for a cell to be in multiple
  <a href=#concept-column-group title=concept-column-group>column groups</a>. All the
  slots that form part of one cell are part of zero or one <a href=#concept-row-group title=concept-row-group>row groups</a> and zero or more <a href=#concept-column-group title=concept-column-group>column groups</a>.</p>

  <p>In addition to <a href=#concept-cell title=concept-cell>cells</a>, <a href=#concept-column title=concept-column>columns</a>, <a href=#concept-row title=concept-row>rows</a>, <a href=#concept-row-group title=concept-row-group>row
  groups</a>, and <a href=#concept-column-group title=concept-column-group>column
  groups</a>, <a href=#concept-table title=concept-table>tables</a> can have a
  <code><a href=#the-caption-element>caption</a></code> element associated with them. This gives the
  table a heading, or legend.</p>

  <p>A <dfn id=table-model-error>table model error</dfn> is an error with the data
  represented by <code><a href=#the-table-element>table</a></code> elements and their
  descendants. Documents must not have table model errors.</p>


  <h5 id=forming-a-table><span class=secno>4.9.12.1 </span>Forming a table</h5>

  <p>To determine which elements correspond to which slots in a <a href=#concept-table title=concept-table>table</a> associated with a
  <code><a href=#the-table-element>table</a></code> element, to determine the dimensions of the table
  (<var title="">x<sub title="">width</sub></var> and <var title="">y<sub title="">height</sub></var>), and to determine if
  there are any <a href=#table-model-error title="table model error">table model
  errors</a>, user agents must use the following algorithm:</p>

  <ol><li>
    <p>Let <var title="">x<sub title="">width</sub></var> be zero.</p>
   </li>

   <li>
    <p>Let <var title="">y<sub title="">height</sub></var> be zero.</p>
   </li>

   <li>

    <p>Let <var title="">pending <code><a href=#the-tfoot-element>tfoot</a></code> elements</var> be
    a list of <code><a href=#the-tfoot-element>tfoot</a></code> elements, initially empty.</p>

   </li>

   <li>
    <p>Let <var title="">the table</var> be the <a href=#concept-table title=concept-table>table</a> represented by the
    <code><a href=#the-table-element>table</a></code> element. The <var title="">x<sub title="">width</sub></var> and <var title="">y<sub title="">height</sub></var> variables give <var title="">the
    table</var>'s dimensions. <var title="">The table</var> is
    initially empty.</p>
   </li>

   <li>

    <!-- this step is here just so that we can be sure to have a first
    element in the next step, so that we can set up the "advance"
    exception-handling thingy below; otherwise it'd be more
    complicated. it's not a perf optimization per se. -->

    <p>If the <code><a href=#the-table-element>table</a></code> element has no children elements,
    then return <var title="">the table</var> (which will be empty),
    and abort these steps.</p>

   </li>

   <li>

    <p>Associate the first <code><a href=#the-caption-element>caption</a></code> element child of the
    <code><a href=#the-table-element>table</a></code> element with <var title="">the table</var>. If
    there are no such children, then it has no associated
    <code><a href=#the-caption-element>caption</a></code> element.</p>

   </li>

   <li>

    <p>Let the <var title="">current element</var> be the first
    element child of the <code><a href=#the-table-element>table</a></code> element.</p>

    <p>If a step in this algorithm ever requires the <var title="">current element</var> to be <dfn id=concept-table-advance title=concept-table-advance>advanced to the next child of the
    <code>table</code></dfn> when there is no such next child, then
    the user agent must jump to the step labeled <i>end</i>, near the
    end of this algorithm.</p>

   </li>

   <li>

    <p>While the <var title="">current element</var> is not one of the
    following elements, <a href=#concept-table-advance title=concept-table-advance>advance</a> the <var title="">current element</var> to the next child of the
    <code><a href=#the-table-element>table</a></code>:</p>

    <ul class=brief><li><code><a href=#the-colgroup-element>colgroup</a></code></li>
     <li><code><a href=#the-thead-element>thead</a></code></li>
     <li><code><a href=#the-tbody-element>tbody</a></code></li>
     <li><code><a href=#the-tfoot-element>tfoot</a></code></li>
     <li><code><a href=#the-tr-element>tr</a></code></li>
    </ul></li>

   <li>

    <p>If the <var title="">current element</var> is a
    <code><a href=#the-colgroup-element>colgroup</a></code>, follow these substeps:</p>

    <ol><li>

      <p><i>Column groups</i>: Process the <var title="">current
      element</var> according to the appropriate case below:</p>

      <dl class=switch><dt>If the <var title="">current element</var> has any
       <code><a href=#the-col-element>col</a></code> element children</dt>

       <dd>

        <p>Follow these steps:</p>

        <ol><li>

          <p>Let <var title="">x<sub title="">start</sub></var> have
          the value of <span title=""><var title="">x<sub title="">width</sub></var></span>.</p>

         </li>

         <li>

          <p>Let the <var title="">current column</var> be the first
          <code><a href=#the-col-element>col</a></code> element child of the <code><a href=#the-colgroup-element>colgroup</a></code>
          element.</p>

         </li>

         <li>

          <p><i>Columns</i>: If the <var title="">current column</var>
          <code><a href=#the-col-element>col</a></code> element has a <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute, then parse its
          value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
          integers</a>.</p>

          <p>If the result of parsing the value is not an error or
          zero, then let <var title="">span</var> be that value.</p>

          <p>Otherwise, if the <code><a href=#the-col-element>col</a></code> element has no <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute, or if trying to
          parse the attribute's value resulted in an error or zero,
          then let <var title="">span</var> be 1.</p>

         </li>

         <li>

          <p>Increase <var title="">x<sub title="">width</sub></var> by
          <var title="">span</var>.</p>

         </li>

         <li>

          <p>Let the last <var title="">span</var> <a href=#concept-column title=concept-column>columns</a> in <var title="">the
          table</var> correspond to the <var title="">current
          column</var> <code><a href=#the-col-element>col</a></code> element.</p>

         </li>

         <li>

          <p>If <var title="">current column</var> is not the last
          <code><a href=#the-col-element>col</a></code> element child of the <code><a href=#the-colgroup-element>colgroup</a></code>
          element, then let the <var title="">current column</var> be
          the next <code><a href=#the-col-element>col</a></code> element child of the
          <code><a href=#the-colgroup-element>colgroup</a></code> element, and return to the step
          labeled <i>columns</i>.</p>

         </li>

         <li>

          <p>Let all the last <a href=#concept-column title=concept-column>columns</a> in <var title="">the
          table</var> from <span title="">x=<var title="">x<sub title="">start</sub></var></span> to <span title="">x=<var title="">x<sub title="">width</sub></var>-1</span> form a
          new <a href=#concept-column-group title=concept-column-group>column group</a>,
          anchored at the slot (<var title="">x<sub title="">start</sub></var>, 0), with width <span title=""><var title="">x<sub title="">width</sub></var>-<var title="">x<sub title="">start</sub></var></span>,
          corresponding to the <code><a href=#the-colgroup-element>colgroup</a></code> element.</p>

         </li>

        </ol></dd>


       <dt>If the <var title="">current element</var> has no
       <code><a href=#the-col-element>col</a></code> element children</dt>

       <dd>

        <ol><li>

          <p>If the <code><a href=#the-colgroup-element>colgroup</a></code> element has a <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute, then parse
          its value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
          integers</a>.</p>

          <p>If the result of parsing the value is not an error or
          zero, then let <var title="">span</var> be that value.</p>

          <p>Otherwise, if the <code><a href=#the-colgroup-element>colgroup</a></code> element has no
          <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute, or
          if trying to parse the attribute's value resulted in an
          error or zero, then let <var title="">span</var> be 1.</p>

         </li>

         <li>

          <p>Increase <var title="">x<sub title="">width</sub></var> by
          <var title="">span</var>.</p>

         </li>

         <li>

          <p>Let the last <var title="">span</var> <a href=#concept-column title=concept-column>columns</a> in <var title="">the
          table</var> form a new <a href=#concept-column-group title=concept-column-group>column group</a>, anchored
          at the slot (<span title=""><var title="">x<sub title="">width</sub></var>-<var title="">span</var></span>,
          0), with width <var title="">span</var>, corresponding to
          the <code><a href=#the-colgroup-element>colgroup</a></code> element.</p>

         </li>

        </ol></dd>

      </dl></li>

     <li>

      <p><a href=#concept-table-advance title=concept-table-advance>Advance</a> the <var title="">current element</var> to the next child of the
      <code><a href=#the-table-element>table</a></code>.</p>

     </li>

     <li>

      <p>While the <var title="">current element</var> is not one of
      the following elements, <a href=#concept-table-advance title=concept-table-advance>advance</a> the <var title="">current element</var> to the next child of the
      <code><a href=#the-table-element>table</a></code>:</p>

      <ul class=brief><li><code><a href=#the-colgroup-element>colgroup</a></code></li>
       <li><code><a href=#the-thead-element>thead</a></code></li>
       <li><code><a href=#the-tbody-element>tbody</a></code></li>
       <li><code><a href=#the-tfoot-element>tfoot</a></code></li>
       <li><code><a href=#the-tr-element>tr</a></code></li>
      </ul></li>

     <li>

      <p>If the <var title="">current element</var> is a
      <code><a href=#the-colgroup-element>colgroup</a></code> element, jump to the step labeled
      <i>column groups</i> above.</p>

     </li>

    </ol></li>

   <li>

    <p>Let <var title="">y<sub title="">current</sub></var> be
    zero.</p>

   </li>

   <li>

    <p>Let the <var title="">list of downward-growing cells</var> be
    an empty list.</p>

   </li>

   <li>

    <p><i>Rows</i>: While the <var title="">current element</var> is
    not one of the following elements, <a href=#concept-table-advance title=concept-table-advance>advance</a> the <var title="">current element</var> to the next child of the
    <code><a href=#the-table-element>table</a></code>:</p>

    <ul class=brief><li><code><a href=#the-thead-element>thead</a></code></li>
     <li><code><a href=#the-tbody-element>tbody</a></code></li>
     <li><code><a href=#the-tfoot-element>tfoot</a></code></li>
     <li><code><a href=#the-tr-element>tr</a></code></li>
    </ul></li>

   <li>

    <p>If the <var title="">current element</var> is a
    <code><a href=#the-tr-element>tr</a></code>, then run the <a href=#algorithm-for-processing-rows>algorithm for processing
    rows</a>, <a href=#concept-table-advance title=concept-table-advance>advance</a>
    the <var title="">current element</var> to the next child of the
    <code><a href=#the-table-element>table</a></code>, and return to the step labeled
    <i>rows</i>.</p>

   </li>

   <li>

    <p>Run the <a href=#algorithm-for-ending-a-row-group>algorithm for ending a row group</a>.</p>

   </li>

   <li>

    <p>If the <var title="">current element</var> is a
    <code><a href=#the-tfoot-element>tfoot</a></code>, then add that element to the list of <var title="">pending <code><a href=#the-tfoot-element>tfoot</a></code> elements</var>, <a href=#concept-table-advance title=concept-table-advance>advance</a> the <var title="">current element</var> to the next child of the
    <code><a href=#the-table-element>table</a></code>, and return to the step labeled
    <i>rows</i>.</p>

   </li>

   <li>

    <p>The <var title="">current element</var> is either a
    <code><a href=#the-thead-element>thead</a></code> or a <code><a href=#the-tbody-element>tbody</a></code>.</p>

    <p>Run the <a href=#algorithm-for-processing-row-groups>algorithm for processing row groups</a>.</p>

   </li>

   <li>

    <p><a href=#concept-table-advance title=concept-table-advance>Advance</a> the <var title="">current element</var> to the next child of the
    <code><a href=#the-table-element>table</a></code>.</p>

   </li>

   <li>

    <p>Return to the step labeled <i>rows</i>.</p>

   </li>

   <li>

    <p><i>End</i>: For each <code><a href=#the-tfoot-element>tfoot</a></code> element in the list of
    <var title="">pending <code><a href=#the-tfoot-element>tfoot</a></code> elements</var>, in tree
    order, run the <a href=#algorithm-for-processing-row-groups>algorithm for processing row
    groups</a>.</p>

   </li>

   <li>

    <p>If there exists a <a href=#concept-row title=concept-row>row</a> or <a href=#concept-column title=concept-column>column</a> in <var title="">the
    table</var> containing only <a href=#concept-slots title=concept-slots>slots</a> that do not have a <a href=#concept-cell title=concept-cell>cell</a> anchored to them, then this is a
    <a href=#table-model-error>table model error</a>.</p>

   </li>

   <li>

    <p>Return <var title="">the table</var>.</p>

   </li>

  </ol><p>The <dfn id=algorithm-for-processing-row-groups>algorithm for processing row groups</dfn>, which is
  invoked by the set of steps above for processing
  <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code>
  elements, is:</p>

  <ol><li>

    <p>Let <var title="">y<sub title="">start</sub></var> have the
    value of <var title="">y<sub title="">height</sub></var>.</p>

   </li>

   <li>

    <p>For each <code><a href=#the-tr-element>tr</a></code> element that is a child of the element
    being processed, in tree order, run the <a href=#algorithm-for-processing-rows>algorithm for
    processing rows</a>.</p>

   </li>

   <li>

    <!-- if we added any rows, make them part of a row group -->
    <p>If <span title=""><var title="">y<sub title="">height</sub></var>&nbsp;&gt;&nbsp;<var title="">y<sub title="">start</sub></var></span>, then let all the last <a href=#concept-row title=concept-row>rows</a> in <var title="">the table</var>
    from <span title="">y=<var title="">y<sub title="">start</sub></var></span>
    to <span title="">y=<var title="">y<sub title="">height</sub></var>-1</span> form a new <a href=#concept-row-group title=concept-row-group>row group</a>, anchored at the slot
    with coordinate (0, <var title="">y<sub title="">start</sub></var>), with height <span title=""><var title="">y<sub title="">height</sub></var>-<var title="">y<sub title="">start</sub></var></span>, corresponding to the element
    being processed.</p>

   </li>

   <li>

    <p>Run the <a href=#algorithm-for-ending-a-row-group>algorithm for ending a row group</a>.</p>

   </li>

  </ol><p>The <dfn id=algorithm-for-ending-a-row-group>algorithm for ending a row group</dfn>, which is invoked
  by the set of steps above when starting and ending a block of rows,
  is:</p>

  <ol><li>

    <p>While <var title="">y<sub title="">current</sub></var> is less
    than <var title="">y<sub title="">height</sub></var>, follow these
    steps:</p>

    <ol><li>

      <p>Run the <a href=#algorithm-for-growing-downward-growing-cells>algorithm for growing downward-growing
      cells</a>.</p>

     </li>

     <li>

      <p>Increase <var title="">y<sub title="">current</sub></var> by
      1.</p>

     </li>

    </ol></li>

   <li>

    <p>Empty the <var title="">list of downward-growing
    cells</var>.</p>

   </li>

  </ol><p>The <dfn id=algorithm-for-processing-rows>algorithm for processing rows</dfn>, which is invoked by
  the set of steps above for processing <code><a href=#the-tr-element>tr</a></code> elements,
  is:</p>

  <ol><li>

    <p>If <var title="">y<sub title="">height</sub></var> is equal to
    <var title="">y<sub title="">current</sub></var>, then increase
    <var title="">y<sub title="">height</sub></var> by 1. (<var title="">y<sub title="">current</sub></var> is never
    <em>greater</em> than <var title="">y<sub title="">height</sub></var>.)</p>

   </li>

   <li>

    <p>Let <var title="">x<sub title="">current</sub></var> be 0.</p>

   </li>

   <li>

    <p>Run the <a href=#algorithm-for-growing-downward-growing-cells>algorithm for growing downward-growing
    cells</a>.</p>

   </li>

   <li>

    <p>If the <code><a href=#the-tr-element>tr</a></code> element being processed has no
    <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element children, then increase
    <var title="">y<sub title="">current</sub></var> by 1, abort this
    set of steps, and return to the algorithm above.</p>

   </li>

   <li>

    <p>Let <var title="">current cell</var> be the first
    <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element in the <code><a href=#the-tr-element>tr</a></code>
    element being processed.</p>

   </li>

   <li>

    <p><i>Cells</i>: While <var title="">x<sub title="">current</sub></var> is less than <var title="">x<sub title="">width</sub></var> and the slot with coordinate (<var title="">x<sub title="">current</sub></var>, <var title="">y<sub title="">current</sub></var>) already has a cell assigned to it,
    increase <var title="">x<sub title="">current</sub></var> by
    1.</p>

   </li>

   <li>

    <p>If <var title="">x<sub title="">current</sub></var> is equal to
    <var title="">x<sub title="">width</sub></var>, increase <var title="">x<sub title="">width</sub></var> by 1. (<var title="">x<sub title="">current</sub></var> is never
    <em>greater</em> than <var title="">x<sub title="">width</sub></var>.)</p>

   </li>

   <li>

    <p>If the <var title="">current cell</var> has a <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code> attribute, then <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative integers">parse that
    attribute's value</a>, and let <var title="">colspan</var> be
    the result.</p>

    <p>If parsing that value failed, or returned zero, or if the
    attribute is absent, then let <var title="">colspan</var> be 1,
    instead.</p>

   </li>

   <li>

    <p>If the <var title="">current cell</var> has a <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code> attribute, then <a href=#rules-for-parsing-non-negative-integers title="rules for
    parsing non-negative integers">parse that attribute's
    value</a>, and let <var title="">rowspan</var> be the
    result.</p>

    <p>If parsing that value failed or if the attribute is absent,
    then let <var title="">rowspan</var> be 1, instead.</p>

   </li>

   <li>

    <p>If <var title="">rowspan</var> is zero, then let <var title="">cell grows downward</var> be true, and set <var title="">rowspan</var> to 1. Otherwise, let <var title="">cell
    grows downward</var> be false.</p>

   </li>

   <li>

    <p>If <span title=""><var title="">x<sub title="">width</sub></var>&nbsp;&lt;&nbsp;<var title="">x<sub title="">current</sub></var>+<var title="">colspan</var></span>,
    then let <var title="">x<sub title="">width</sub></var> be
    <span title=""><var title="">x<sub title="">current</sub></var>+<var title="">colspan</var></span>.</p>

   </li>

   <li>

    <p>If <span title=""><var title="">y<sub title="">height</sub></var>&nbsp;&lt;&nbsp;<var title="">y<sub title="">current</sub></var>+<var title="">rowspan</var></span>,
    then let <var title="">y<sub title="">height</sub></var> be
    <span title=""><var title="">y<sub title="">current</sub></var>+<var title="">rowspan</var></span>.</p>

   </li>

   <li>

    <p>Let the slots with coordinates (<var title="">x</var>, <var title="">y</var>) such that <span title=""><var title="">x<sub title="">current</sub></var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">x<sub title="">current</sub></var>+<var title="">colspan</var></span>
    and <span title=""><var title="">y<sub title="">current</sub></var>&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">y<sub title="">current</sub></var>+<var title="">rowspan</var></span> be
    covered by a new <a href=#concept-cell title=concept-cell>cell</a> <var title="">c</var>, anchored at (<var title="">x<sub title="">current</sub></var>, <var title="">y<sub title="">current</sub></var>), which has width <var title="">colspan</var> and height <var title="">rowspan</var>,
    corresponding to the <var title="">current cell</var> element.</p>

    <p>If the <var title="">current cell</var> element is a
    <code><a href=#the-th-element>th</a></code> element, let this new cell <var title="">c</var>
    be a header cell; otherwise, let it be a data cell.</p>

    <p>To establish which header cells apply to the <var title="">current cell</var> element, use the <a href=#algorithm-for-assigning-header-cells>algorithm for
    assigning header cells</a> described in the next section.</p>

    <p>If any of the slots involved already had a <a href=#concept-cell title=concept-cell>cell</a> covering them, then this is a
    <a href=#table-model-error>table model error</a>. Those slots now have two cells
    overlapping.</p>

   </li>

   <li>

    <p>If <var title="">cell grows downward</var> is true, then add
    the tuple {<var title="">c</var>, <var title="">x<sub title="">current</sub></var>, <var title="">colspan</var>} to the
    <var title="">list of downward-growing cells</var>.</p>

   </li>

   <li>

    <p>Increase <var title="">x<sub title="">current</sub></var> by
    <var title="">colspan</var>.</p>

   </li>

   <li>

    <p>If <var title="">current cell</var> is the last <code><a href=#the-td-element>td</a></code>
    or <code><a href=#the-th-element>th</a></code> element in the <code><a href=#the-tr-element>tr</a></code> element being
    processed, then increase <var title="">y<sub title="">current</sub></var> by 1, abort this set of steps, and
    return to the algorithm above.</p>

   </li>

   <li>

    <p>Let <var title="">current cell</var> be the next
    <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element in the <code><a href=#the-tr-element>tr</a></code>
    element being processed.</p>

   </li>

   <li>

    <p>Return to the step labelled <i>cells</i>.</p>

   </li>

  </ol><p>When the algorithms above require the user agent to run the
  <dfn id=algorithm-for-growing-downward-growing-cells>algorithm for growing downward-growing cells</dfn>, the user
  agent must, for each {<var title="">cell</var>, <var title="">cell<sub title="">x</sub></var>, <var title="">width</var>}
  tuple in the <var title="">list of downward-growing cells</var>, if
  any, extend the <a href=#concept-cell title=concept-cell>cell</a> <var title="">cell</var> so that it also covers the slots with
  coordinates (<var title="">x</var>, <var title="">y<sub title="">current</sub></var>), where <span title=""><var title="">cell<sub title="">x</sub></var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">cell<sub title="">x</sub></var>+<var title="">width</var></span>.</p>




  <h5 id=header-and-data-cell-semantics><span class=secno>4.9.12.2 </span>Forming relationships between data cells and header cells</h5>

  <p>Each cell can be assigned zero or more header cells. The
  <dfn id=algorithm-for-assigning-header-cells>algorithm for assigning header cells</dfn> to a cell <var title="">principal cell</var> is as follows.</p>

  <ol><!-- INITIALIZATION --><li>

    <p>Let <var title="">header list</var> be an empty list of
    cells.</p>

   </li>

   <li>

    <p>Let (<var title="">principal<sub title="">x</sub></var>, <var title="">principal<sub title="">y</sub></var>) be the coordinate
    of the slot to which the <var title="">principal cell</var> is
    anchored.</p>

   </li>

   <li>

    <dl class=switch><dt>If the <var title="">principal cell</var> has a <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute specified</dt>

     <dd>

      <!-- HEADERS="" -->

      <ol><li>

        <p>Take the value of the <var title="">principal cell</var>'s
        <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute and
        <a href=#split-a-string-on-spaces title="split a string on spaces">split it on
        spaces</a>, letting <var title="">id list</var> be the list
        of tokens obtained.</p>

       </li>

       <li>

        <!-- support headers="" to <td> for legacy compat -->
        <!-- note that it's not conforming though -->
        <p>For each token in the <var title="">id list</var>, if the
        first element in the <code><a href=#document>Document</a></code> with an ID equal to
        the token is a cell in the same <a href=#concept-table title=concept-table>table</a>, and that cell is not the
        <var title="">principal cell</var>, then add that cell to <var title="">header list</var>.</p>

       </li>

      </ol></dd>


     <dt>If <var title="">principal cell</var> does not have a <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute specified</dt>

     <dd>

      <ol><li>

        <p>Let <var title="">principal<sub title="">width</sub></var>
        be the width of the <var title="">principal cell</var>.</p>

       </li>

       <li>

        <p>Let <var title="">principal<sub title="">height</sub></var>
        be the height of the <var title="">principal cell</var>.</p>

       </li>


       <!-- HORIZONTAL -->

       <li>

        <p>For each value of <var title="">y</var> from <var title="">principal<sub title="">y</sub></var> to <span title=""><var title="">principal<sub title="">y</sub></var>+<var title="">principal<sub title="">height</sub></var>-1</span>,
        run the <a href=#internal-algorithm-for-scanning-and-assigning-header-cells>internal algorithm for scanning and assigning
        header cells</a>, with the <var title="">principal
        cell</var>, the <var title="">header list</var>, the initial
        coordinate (<var title="">principal<sub title="">x</sub></var>,<var title="">y</var>), and the
        increments <span title="">&Delta;<var title="">x</var>=&minus;1</span>
        and <span title="">&Delta;<var title="">y</var>=0</span>.</p>

       </li>


       <!-- VERTICAL -->

       <li>

        <p>For each value of <var title="">x</var> from <var title="">principal<sub title="">x</sub></var> to <span title=""><var title="">principal<sub title="">x</sub></var>+<var title="">principal<sub title="">width</sub></var>-1</span>,
        run the <a href=#internal-algorithm-for-scanning-and-assigning-header-cells>internal algorithm for scanning and assigning
        header cells</a>, with the <var title="">principal
        cell</var>, the <var title="">header list</var>, the initial
        coordinate (<var title="">x</var>,<var title="">principal<sub title="">y</sub></var>), and the increments <span title="">&Delta;<var title="">x</var>=0</span> and <span title="">&Delta;<var title="">y</var>=&minus;1</span>.</p>

       </li>


       <!-- ROW GROUP HEADERS -->

       <li>

        <p>If the <var title="">principal cell</var> is anchored in a
        <a href=#concept-row-group title=concept-row-group>row group</a>, then add all
        header cells that are <a href=#row-group-header title="row group header">row group
        headers</a> and are anchored in the same row group with an
        <var title="">x</var>-coordinate less than or equal to
        <span title=""><var title="">principal<sub title="">x</sub></var>+<var title="">principal<sub title="">width</sub></var>-1</span> and
        a <var title="">y</var>-coordinate less than or equal to
        <span title=""><var title="">principal<sub title="">y</sub></var>+<var title="">principal<sub title="">height</sub></var>-1</span> to
        <var title="">header list</var>.</p>

        <!-- this might introduce principal accidentally; fixed below -->

       </li>


       <!-- COLUMN GROUP HEADERS -->

       <li>

        <p>If the <var title="">principal cell</var> is anchored in a
        <a href=#concept-column-group title=concept-column-group>column group</a>, then
        add all header cells that are <a href=#column-group-header title="column group
        header">column group headers</a> and are anchored in the
        same column group with an <var title="">x</var>-coordinate
        less than or equal to <span title=""><var title="">principal<sub title="">x</sub></var>+<var title="">principal<sub title="">width</sub></var>-1</span> and a <var title="">y</var>-coordinate less than or equal to <span title=""><var title="">principal<sub title="">y</sub></var>+<var title="">principal<sub title="">height</sub></var>-1</span> to
        <var title="">header list</var>.</p>

        <!-- this might introduce principal accidentally; fixed below -->

       </li>

      </ol></dd>

    </dl></li>


   <!-- CLEANUP -->

   <li>

    <p>Remove all the <a href=#empty-cell title="empty cell">empty cells</a> from
    the <var title="">header list</var>.</p>

   </li>

   <li>

    <p>Remove any duplicates from the <var title="">header
    list</var>.</p>

   </li>

   <li>

    <p>Remove <var title="">principal cell</var> from the <var title="">header list</var> if it is there.</p> <!-- see "might
    introduce principal accidentally" above -->

   </li>

   <li>

    <p>Assign the headers in the <var title="">header list</var> to
    the <var title="">principal cell</var>.</p>

   </li>

  </ol><p>The <dfn id=internal-algorithm-for-scanning-and-assigning-header-cells>internal algorithm for scanning and assigning header
  cells</dfn>, given a <var title="">principal cell</var>, a <var title="">header list</var>, an initial coordinate (<var title="">initial<sub title="">x</sub></var>, <var title="">initial<sub title="">y</sub></var>), and &Delta;<var title="">x</var> and &Delta;<var title="">y</var> increments, is as
  follows:</p>

  <ol><li>

    <p>Let <var title="">x</var> equal <var title="">initial<sub title="">x</sub></var>.</p>

   </li>

   <li>

    <p>Let <var title="">y</var> equal <var title="">initial<sub title="">y</sub></var>.</p>

   </li>

   <li>

    <p>Let <var title="">opaque headers</var> be an empty list of
    cells.</p>

   </li>

   <li>

    <dl class=switch><dt>If <var title="">principal cell</var> is a header cell</dt>

     <dd><p>Let <var title="">in header block</var> be true, and let
     <var title="">headers from current header block</var> be a list
     of cells containing just the <var title="">principal
     cell</var>.</dd>

     <dt>Otherwise</dt>

     <dd><p>Let <var title="">in header block</var> be false and let
     <var title="">headers from current header block</var> be an
     empty list of cells.</p>

    </dl></li>

   <li>

    <p><i>Loop</i>: Increment <var title="">x</var> by &Delta;<var title="">x</var>; increment <var title="">y</var> by &Delta;<var title="">y</var>.</p>

    <p class=note>For each invocation of this algorithm, one of
    &Delta;<var title="">x</var> and &Delta;<var title="">y</var> will
    be &minus;1, and the other will be 0.</p>

   </li>

   <li>

    <p>If either <var title="">x</var> or <var title="">y</var> is
    less than 0, then abort this internal algorithm.</p>

   </li>

   <li>

    <p>If there is no cell covering slot (<var title="">x</var>,
    <var title="">y</var>), or if there is more than one cell
    covering slot (<var title="">x</var>, <var title="">y</var>),
    return to the substep labeled <i>loop</i>.</p>

   </li>

   <li>

    <p>Let <var title="">current cell</var> be the cell covering
    slot (<var title="">x</var>, <var title="">y</var>).</p>

   </li>

   <li>

    <dl class=switch><dt>If <var title="">current cell</var> is a header cell</dt>

     <dd>

      <ol><li><p>Set <var title="">in header block</var> to
       true.</li>

       <li><p>Add <var title="">current cell</var> to <var title="">headers from current header block</var>.</li>

       <li><p>Let <var title="">blocked</var> be false.</li>

       <li>

        <dl class=switch><dt>If &Delta;<var title="">x</var> is 0</dt>

         <dd>

          <p>If there are any cells in the <var title="">opaque
          headers</var> list anchored with the same <var title="">x</var>-coordinate as the <var title="">current
          cell</var>, and with the same width as <var title="">current
          cell</var>, then let <var title="">blocked</var> be
          true.</p>

          <p>If the <var title="">current cell</var> is not a
          <a href=#column-header>column header</a>, then let <var title="">blocked</var> be true.</p>

         </dd>

         <dt>If &Delta;<var title="">y</var> is 0</dt>

         <dd>

          <p>If there are any cells in the <var title="">opaque
          headers</var> list anchored with the same <var title="">y</var>-coordinate as the <var title="">current
          cell</var>, and with the same height as <var title="">current cell</var>, then let <var title="">blocked</var> be true.</p>

          <p>If the <var title="">current cell</var> is not a
          <a href=#row-header>row header</a>, then let <var title="">blocked</var> be true.</p>

         </dd>

        </dl></li>

       <li><p>If <var title="">blocked</var> is false, then add the
       <var title="">current cell</var> to the <var title="">headers
       list</var>.</li>

      </ol></dd>

     <dt>If <var title="">current cell</var> is a data cell and <var title="">in header block</var> is true</dt>

     <dd><p>Set <var title="">in header block</var> to false. Add
     all the cells in <var title="">headers from current header
     block</var> to the <var title="">opaque headers</var> list, and
     empty the <var title="">headers from current header block</var>
     list.</p>

    </dl></li>

   <li>

    <p>Return to the step labeled <i>loop</i>.</p>

   </li>

  </ol><p>A header cell anchored at the slot with coordinate (<var title="">x</var>, <var title="">y</var>) with width <var title="">width</var> and height <var title="">height</var> is said
  to be a <dfn id=column-header>column header</dfn> if any of the following conditions
  are true:</p>

  <ul><li>The cell's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute
   is in the <a href=#attr-th-scope-col title=attr-th-scope-col>column</a> state, or</li>

   <li>The cell's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute
   is in the <a href=#attr-th-scope-auto title=attr-th-scope-auto>auto</a> state, and
   there are no data cells in any of the cells covering slots with
   <var title="">y</var>-coordinates <var title="">y</var>
   .. <span title=""><var title="">y</var>+<var title="">height</var>-1</span>.</li>

  </ul><p>A header cell anchored at the slot with coordinate (<var title="">x</var>, <var title="">y</var>) with width <var title="">width</var> and height <var title="">height</var> is said
  to be a <dfn id=row-header>row header</dfn> if any of the following conditions
  are true:</p>

  <ul><li>The cell's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute
   is in the <a href=#attr-th-scope-row title=attr-th-scope-row>row</a> state, or</li>

   <li>The cell's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute
   is in the <a href=#attr-th-scope-auto title=attr-th-scope-auto>auto</a> state, the
   cell is not a <a href=#column-header>column header</a>, and there are no data
   cells in any of the cells covering slots with <var title="">x</var>-coordinates <var title="">x</var> .. <span title=""><var title="">x</var>+<var title="">width</var>-1</span>.</li>

  </ul><p>A header cell is said to be a <dfn id=column-group-header>column group header</dfn> if
  its <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute is in the
  <a href=#attr-th-scope-colgroup title=attr-th-scope-colgroup>column group</a> state.</p>

  <p>A header cell is said to be a <dfn id=row-group-header>row group header</dfn> if
  its <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute is in the
  <a href=#attr-th-scope-rowgroup title=attr-th-scope-rowgroup>row group</a> state.</p>

  <p>A cell is said to be an <dfn id=empty-cell>empty cell</dfn> if it contains no
  elements and its text content, if any, consists only of
  <a href=#white_space>White_Space</a> characters.</p>

  </div>


  <h4 id=examples-0><span class=secno>4.9.13 </span>Examples</h4>

  <p><i>This section is non-normative.</i></p>

  <p>The following shows how might one mark up the bottom part of
  table 45 of the <cite>Smithsonian physical tables, Volume
  71</cite>:</p>

   <!-- Smithsonian physical tables, Volume 71: By Smithsonian Institution, Frederick Eugene Fowle; page 76 -->
   <!-- from the reprint of the seventh revised edition; publication 2539, published 1921 -->
  <pre>&lt;table&gt;
 &lt;caption&gt;Specification values: &lt;b&gt;Steel&lt;/b&gt;, &lt;b&gt;Castings&lt;/b&gt;,
 Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.&lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th rowspan=2&gt;Grade.&lt;/th&gt;
   &lt;th rowspan=2&gt;Yield Point.&lt;/th&gt;
   &lt;th colspan=2&gt;Ultimate tensile strength&lt;/th&gt;
   &lt;th rowspan=2&gt;Per cent elong. 50.8mm or 2 in.&lt;/th&gt;
   &lt;th rowspan=2&gt;Per cent reduct. area.&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;th&gt;kg/mm&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
   &lt;th&gt;lb/in&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
  &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt;Hard&lt;/td&gt;
   &lt;td&gt;0.45 ultimate&lt;/td&gt;
   &lt;td&gt;56.2&lt;/td&gt;
   &lt;td&gt;80,000&lt;/td&gt;
   &lt;td&gt;15&lt;/td&gt;
   &lt;td&gt;20&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;Medium&lt;/td&gt;
   &lt;td&gt;0.45 ultimate&lt;/td&gt;
   &lt;td&gt;49.2&lt;/td&gt;
   &lt;td&gt;70,000&lt;/td&gt;
   &lt;td&gt;18&lt;/td&gt;
   &lt;td&gt;25&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;Soft&lt;/td&gt;
   &lt;td&gt;0.45 ultimate&lt;/td&gt;
   &lt;td&gt;42.2&lt;/td&gt;
   &lt;td&gt;60,000&lt;/td&gt;
   &lt;td&gt;22&lt;/td&gt;
   &lt;td&gt;30&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;</pre>

  <p>This table could look like this:</p>

  <table id=table-example-1><caption>Specification values: <b>Steel</b>, <b>Castings</b>,
   Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
   <thead><tr><th rowspan=2>Grade.</th>
     <th rowspan=2>Yield Point.</th>
     <th colspan=2>Ultimate tensile strength</th>
     <th rowspan=2>Per cent elong. 50.8&nbsp;mm or&nbsp;2&nbsp;in.</th>
     <th rowspan=2>Per cent reduct. area.</th>
    <tr><th>kg/mm<sup>2</sup></th>
     <th>lb/in<sup>2</sup></th>
    <tbody><tr><td>Hard</td>
     <td>0.45 ultimate</td>
     <td>56.2</td>
     <td>80,000</td>
     <td>15</td>
     <td>20</td>
    <tr><td>Medium</td>
     <td>0.45 ultimate</td>
     <td>49.2</td>
     <td>70,000</td>
     <td>18</td>
     <td>25</td>
    <tr><td>Soft</td>
     <td>0.45 ultimate</td>
     <td>42.2</td>
     <td>60,000</td>
     <td>22</td>
     <td>30</td>
    </table><hr><p>The following shows how one might mark up the gross margin table
  on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:</p>

  <pre>&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th&gt;
   &lt;th&gt;2008
   &lt;th&gt;2007
   &lt;th&gt;2006
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th&gt;Net sales
   &lt;td&gt;$ 32,479
   &lt;td&gt;$ 24,006
   &lt;td&gt;$ 19,315
  &lt;tr&gt;
   &lt;th&gt;Cost of sales
   &lt;td&gt;  21,334
   &lt;td&gt;  15,852
   &lt;td&gt;  13,717
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th&gt;Gross margin
   &lt;td&gt;$ 11,145
   &lt;td&gt;$  8,154
   &lt;td&gt;$  5,598
 &lt;tfoot&gt;
  &lt;tr&gt;
   &lt;th&gt;Gross margin percentage
   &lt;td&gt;34.3%
   &lt;td&gt;34.0%
   &lt;td&gt;29.0%
&lt;/table&gt;</pre>

<!--HTML4POLICE-->
  <p>This table could look like this:</p>

  <table class="apple-table-examples e1"><thead><tr><th>
     <th>2008
     <th>2007
     <th>2006
   <tbody><tr><th>Net sales
     <td>$ 32,479
     <td>$ 24,006
     <td>$ 19,315
    <tr><th>Cost of sales
     <td>  21,334
     <td>  15,852
     <td>  13,717
   <tbody><tr><th>Gross margin
     <td>$ 11,145
     <td>$  8,154
     <td>$  5,598
   <tfoot><tr><th>Gross margin percentage
     <td>34.3%
     <td>34.0%
     <td>29.0%
  </table><hr><p>The following shows how one might mark up the operating expenses
  table from lower on the same page of that document:</p>

  <pre>&lt;table&gt;
 &lt;colgroup&gt; &lt;col&gt;
 &lt;colgroup&gt; &lt;col&gt; &lt;col&gt; &lt;col&gt;
 &lt;thead&gt;
  &lt;tr&gt; &lt;th&gt; &lt;th&gt;2008 &lt;th&gt;2007 &lt;th&gt;2006
 &lt;tbody&gt;
  &lt;tr&gt; &lt;th scope=rowgroup&gt; Research and development
       &lt;td&gt; $ 1,109 &lt;td&gt; $ 782 &lt;td&gt; $ 712
  &lt;tr&gt; &lt;th scope=row&gt; Percentage of net sales
       &lt;td&gt; 3.4% &lt;td&gt; 3.3% &lt;td&gt; 3.7%
 &lt;tbody&gt;
  &lt;tr&gt; &lt;th scope=rowgroup&gt; Selling, general, and administrative
       &lt;td&gt; $ 3,761 &lt;td&gt; $ 2,963 &lt;td&gt; $ 2,433
  &lt;tr&gt; &lt;th scope=row&gt; Percentage of net sales
       &lt;td&gt; 11.6% &lt;td&gt; 12.3% &lt;td&gt; 12.6%
&lt;/table&gt;</pre>

  <p>This table could look like this:</p>

  <table class="apple-table-examples e2"><thead><tr><th> <th>2008 <th>2007 <th>2006
   <tbody><tr><th scope=rowgroup> Research and development
         <td> $ 1,109 <td> $ 782 <td> $ 712
    <tr><th scope=row> Percentage of net sales
         <td> 3.4% <td> 3.3% <td> 3.7%
   <tbody><tr><th scope=rowgroup> Selling, general, and administrative
         <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
    <tr><th scope=row> Percentage of net sales
         <td> 11.6% <td> 12.3% <td> 12.6%
  </table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>

  <h4 id=introduction-0><span class=secno>4.10.1 </span>Introduction</h4>

  <p><i>This section is non-normative.</i></p>

  <p>Forms allow unscripted client-server interaction: given a form, a
  user can provide data, submit it to the server, and have the server
  act on it accordingly (e.g. returning the results of a search or
  calculation). The elements used in forms can also be used for user
  interaction with no associated submission mechanism, in conjunction
  with scripts.</p>

  <p>Writing a form consists of several steps, which can be performed
  in any order: writing the user interface, implementing the
  server-side processing, and configuring the user interface to
  communicate with the server.</p>


  <h5 id="writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</h5>

  <p><i>This section is non-normative.</i></p>

  <p>For the purposes of this brief introduction, we will create a
  pizza ordering form.</p>

  <p>Any form starts with a <code><a href=#the-form-element>form</a></code> element, inside which
  are placed the controls. Most controls are represented by the
  <code><a href=#the-input-element>input</a></code> element, which by default provides a one-line
  text field. To label a control, the <code><a href=#the-label-element>label</a></code> element is
  used; the label text and the control itself go inside the
  <code><a href=#the-label-element>label</a></code> element. Each part of a form is considered a
  <a href=#paragraph>paragraph</a>, and is typically separated from other parts
  using <code><a href=#the-p-element>p</a></code> elements. Putting this together, here is how
  one might ask for the customer's name:</p>

  <pre><strong>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/form&gt;</strong></pre>

  <p>To let the user select the size of the pizza, we can use a set of
  radio buttons. Radio buttons also use the <code><a href=#the-input-element>input</a></code>
  element, this time with a <code title=attr-input-type><a href=#attr-input-type>type</a></code>
  attribute with the value <code title=attr-input-type-radio><a href=#radio-button-state>radio</a></code>. To make the radio
  buttons work as a group, they are given a common name using the
  <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute. To group a batch
  of controls together, such as, in this case, the radio buttons, one
  can use the <code><a href=#the-fieldset-element>fieldset</a></code> element. The title of such a group
  of controls is given by the first element in the
  <code><a href=#the-fieldset-element>fieldset</a></code>, which has to be a <code><a href=#the-legend-element>legend</a></code>
  element.</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;</strong>
&lt;/form&gt;</pre>

  <p class=note>Changes from the previous step are highlighted.</p>

  <p>To pick toppings, we can use checkboxes. These use the
  <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-checkbox><a href=#checkbox-state>checkbox</a></code>:</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
<strong> &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;</strong>
&lt;/form&gt;</pre>

  <p>The pizzeria for which this form is being written is always
  making mistakes, so it needs a way to contact the customer. For this
  purpose, we can use form controls specifically for telephone numbers
  (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-tel><a href=#telephone-state>tel</a></code>) and e-mail addresses
  (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-email><a href=#e-mail-state>email</a></code>):</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;</strong>
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
&lt;/form&gt;</pre>

  <p>We can use an <code><a href=#the-input-element>input</a></code> element with its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-time><a href=#time-state>time</a></code> to ask for a delivery
  time. Many of these form controls have attributes to control exactly
  what values can be specified; in this case, three attributes of
  particular interest are <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
  <code title=attr-input-max><a href=#attr-input-max>max</a></code>, and <code title=attr-input-step><a href=#attr-input-step>step</a></code>. These set the minimum time, the
  maximum time, and the interval between allowed values (in
  seconds). This pizzeria only delivers between 11am and 9pm, and
  doesn't promise anything better than 15 minute increments, which we
  can mark up as follows:</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
<strong> &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;</strong>
&lt;/form&gt;</pre>

  <p>The <code><a href=#the-textarea-element>textarea</a></code> element can be used to provide a
  free-form text field. In this instance, we are going to use it to
  provide a space for the customer to give delivery instructions:</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;</strong>
&lt;/form&gt;</pre>

  <p>Finally, to make the form submittable we use the
  <code><a href=#the-button-element>button</a></code> element:</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;</strong>
&lt;/form&gt;</pre>


  <h5 id=implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</h5>

  <p><i>This section is non-normative.</i></p>

  <p>The exact details for writing a server-side processor are out of
  scope for this specification. For the purposes of this introduction,
  we will assume that the script at <code title="">https://pizza.example.com/order.cgi</code> is configured to
  accept submissions using the <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>
  format, expecting the following parameters sent in an HTTP POST
  body:</p>

  <dl><dt><code title="">custname</code></dt>
   <dd>Customer's name</dd>

   <dt><code title="">custtel</code></dt>
   <dd>Customer's telephone number</dd>

   <dt><code title="">custemail</code></dt>
   <dd>Customer's e-mail address</dd>

   <dt><code title="">size</code></dt>
   <dd>The pizza size, either <code title="">small</code>, <code title="">medium</code>, or <code title="">large</code></dd>

   <dt><code title="">toppings</code></dt>
   <dd>The topping, specified once for each selected topping, with the allowed values being <code title="">bacon</code>, <code title="">cheese</code>, <code title="">onion</code>, and <code title="">mushroom</code></dd>

   <dt><code title="">delivery</code></dt>
   <dd>The requested delivery time</dd>

   <dt><code title="">comments</code></dt>
   <dd>The delivery instructions</dd>

  </dl><h5 id=configuring-a-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring a form to communicate with a server</h5>

  <p><i>This section is non-normative.</i></p>

  <p>Form submissions are exposed to servers in a variety of ways,
  most commonly as HTTP GET or POST requests. To specify the exact
  method used, the <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>
  attribute is specified on the <code><a href=#the-form-element>form</a></code> element. This
  doesn't specify how the form data is encoded, though; to specify
  that, you use the <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>
  attribute. You also have to specify the <a href=#url>URL</a> of the
  service that will handle the submitted data, using the <code title=attr-fs-action><a href=#attr-fs-action>action</a></code> attribute.</p>

  <p>For each form control you want submitted, you then have to give a
  name that will be used to refer to the data in the submission. We
  already specified the name for the group of radio buttons; the same
  attribute (<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>) also specifies
  the submission name. Radio buttons can be distinguished from each
  other in the submission by giving them different values, using the
  <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>

  <p>Multiple controls can have the same name; for example, here we
  give all the checkboxes the same name, and the server distinguishes
  which checkbox was checked by seeing which values are submitted with
  that name &mdash; like the radio buttons, they are also given unique
  values with the <code title=attr-input-value><a href=#attr-input-value>value</a></code>
  attribute.</p>

  <p>Given the settings in the previous section, this all becomes:</p>

  <pre>&lt;form<strong> method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"</strong>&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input<strong> name="custname"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel<strong> name="custtel"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email<strong> name="custemail"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> value="small"</strong>&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> value="medium"</strong>&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> value="large"</strong>&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="bacon"</strong>&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="cheese"</strong>&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="onion"</strong>&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="mushroom"</strong>&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea<strong> name="comments"</strong>&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;
&lt;/form&gt;</pre>

  <p>For example, if the customer entered "Denise Lawrence" as their
  name, "555-321-8642" as their telephone number, did not specify an
  e-mail address, asked for a medium-sized pizza, selected the Extra
  Cheese and Mushroom toppings, entered a delivery time of 7pm, and
  left the delivery instructions text field blank, the user agent
  would submit the following to the online Web service:</p>

  <pre>custname=Denise+Lawrence&amp;custtel=555-321-8624&amp;custemail=&amp;size=medium&amp;topping=cheese&amp;topping=mushroom&amp;delivery=19%3A00&amp;comments=</pre>



  <h5 id=client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</h5>

  <p><i>This section is non-normative.</i></p>

  <p>Forms can be annotated in such a way that the user agent will
  check the user's input before the form is submitted. The server
  still has to verify the input is valid (since hostile users can
  easily bypass the form validation), but it allows the user to avoid
  the wait incurred by having the server be the sole checker of the
  user's input.</p>

  <p>The simplest annotation is the <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute, which can be
  specified on <code><a href=#the-input-element>input</a></code> elements to indicate that the form
  is not to be submitted until a value is given. By adding this
  attribute to the customer name and delivery time fields, we allow
  the user agent to notify the user when the user submits the form
  without filling in those fields:</p>

  <pre>&lt;form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname"<strong> required</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery"<strong> required</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;
&lt;/form&gt;</pre>

  <p>It is also possible to limit the length of the input, using the
  <code title=attr-fe-maxlength><a href=#attr-fe-maxlength>maxlength</a></code> attribute. By
  adding this to the <code><a href=#the-textarea-element>textarea</a></code> element, we can limit users
  to 1000 characters, preventing them from writing huge essays to the
  busy delivery drivers instead of staying focused and to the
  point:</p>

  <pre>&lt;form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"<strong> maxlength=1000</strong>&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;
&lt;/form&gt;</pre>




  <h4 id=categories><span class=secno>4.10.2 </span>Categories</h4>

  <p>Mostly for historical reasons, elements in this section fall into
  several overlapping (but subtly different) categories in addition to
  the usual ones like <a href=#flow-content>flow content</a>, <a href=#phrasing-content>phrasing
  content</a>, and <a href=#interactive-content>interactive content</a>.</p>

  <p>A number of the elements are <dfn id=form-associated-element title="form-associated
  element">form-associated elements</dfn>, which means they can have a
  <a href=#form-owner>form owner</a> and, to expose this, have a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> content attribute with a matching
  <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
   <li><code><a href=#the-fieldset-element>fieldset</a></code></li>
   <li><code><a href=#the-input-element>input</a></code></li>
   <li><code><a href=#the-keygen-element>keygen</a></code></li>
   <li><code><a href=#the-label-element>label</a></code></li>
   <li><code><a href=#the-meter-element>meter</a></code></li>
   <li><code><a href=#the-object-element>object</a></code></li>
   <li><code><a href=#the-output-element>output</a></code></li>
   <li><code><a href=#the-progress-element>progress</a></code></li>
   <li><code><a href=#the-select-element>select</a></code></li>
   <li><code><a href=#the-textarea-element>textarea</a></code></li>
  </ul><p>The <a href=#form-associated-element title="form-associated element">form-associated
  elements</a> fall into several subcategories:</p>

  <dl><dt><dfn id=category-listed title=category-listed>Listed elements</dfn></dt>

   <dd>

    <p>Denotes elements that are listed in the <code title=dom-form-elements><a href=#dom-form-elements><var title="">form</var>.elements</a></code>
    and <code title=dom-fieldset-elements><a href=#dom-fieldset-elements><var title="">fieldset</var>.elements</a></code> APIs.</p>

    <!-- when updating this also update the category index -->
    <ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
     <li><code><a href=#the-fieldset-element>fieldset</a></code></li>
     <li><code><a href=#the-input-element>input</a></code></li>
     <li><code><a href=#the-keygen-element>keygen</a></code></li>
     <li><code><a href=#the-object-element>object</a></code></li>
     <li><code><a href=#the-output-element>output</a></code></li>
     <li><code><a href=#the-select-element>select</a></code></li>
     <li><code><a href=#the-textarea-element>textarea</a></code></li>
    </ul></dd>

   <dt><dfn id=category-label title=category-label>Labelable elements</dfn></dt>

   <dd>

    <p>Denotes elements that can be associated with <code><a href=#the-label-element>label</a></code>
    elements.</p>

    <!-- when updating this also update the category index -->
    <ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
     <li><code><a href=#the-input-element>input</a></code></li>
     <li><code><a href=#the-keygen-element>keygen</a></code></li>
     <li><code><a href=#the-meter-element>meter</a></code></li>
     <li><code><a href=#the-output-element>output</a></code></li>
     <li><code><a href=#the-progress-element>progress</a></code></li>
     <li><code><a href=#the-select-element>select</a></code></li>
     <li><code><a href=#the-textarea-element>textarea</a></code></li>
    </ul></dd>

   <dt><dfn id=category-submit title=category-submit>Submittable elements</dfn></dt>

   <dd>

    <p>Denotes elements that can be used for <a href=#constructing-form-data-set>constructing the form data
    set</a> when a <code><a href=#the-form-element>form</a></code> element is <a href=#concept-form-submit title=concept-form-submit>submitted</a>.</p>

    <!-- when updating this also update the category index -->
    <ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
     <li><code><a href=#the-input-element>input</a></code></li>
     <li><code><a href=#the-keygen-element>keygen</a></code></li>
     <li><code><a href=#the-object-element>object</a></code></li>
     <li><code><a href=#the-select-element>select</a></code></li>
     <li><code><a href=#the-textarea-element>textarea</a></code></li>
    </ul></dd>

   <dt><dfn id=category-reset title=category-reset>Resettable elements</dfn></dt>

   <dd>

    <p>Denotes elements that can be affected when a <code><a href=#the-form-element>form</a></code>
    element is <a href=#concept-form-reset title=concept-form-reset>reset</a>.</p>

    <!-- when updating this also update the category index -->
    <ul class="brief category-list"><li><code><a href=#the-input-element>input</a></code></li>
     <li><code><a href=#the-keygen-element>keygen</a></code></li>
     <li><code><a href=#the-output-element>output</a></code></li>
     <li><code><a href=#the-select-element>select</a></code></li>
     <li><code><a href=#the-textarea-element>textarea</a></code></li>
    </ul></dd>

  </dl><p>In addition, some <a href=#category-submit title=category-submit>submittable
  elements</a> can be, depending on their attributes, <dfn id=concept-button title=concept-button>buttons</dfn>. The prose below defines when
  an element is a button. Some buttons are specifically <dfn id=concept-submit-button title=concept-submit-button>submit buttons</dfn>.</p>

  <p class=note>The <code><a href=#the-object-element>object</a></code> element is also a
  <a href=#form-associated-element>form-associated element</a> and can, with the use of a
  suitable <a href=#plugin>plugin</a>, partake in <a href=#form-submission>form
  submission</a>.</p>


  <h4 id=the-form-element><span class=secno>4.10.3 </span>The <dfn><code>form</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#flow-content>Flow content</a>, but with no <code><a href=#the-form-element>form</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code></dd>
   <dd><code title=attr-fs-action><a href=#attr-fs-action>action</a></code></dd>
   <dd><code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code></dd>
   <dd><code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code></dd>
   <dd><code title=attr-fs-method><a href=#attr-fs-method>method</a></code></dd>
   <dd><code title=attr-form-name><a href=#attr-form-name>name</a></code></dd>
   <dd><code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code></dd>
   <dd><code title=attr-fs-target><a href=#attr-fs-target>target</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>[OverrideBuiltins]
interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-form-acceptcharset title=dom-form-acceptCharset>acceptCharset</a>;
           attribute DOMString <a href=#dom-fs-action title=dom-fs-action>action</a>;
           attribute DOMString <a href=#dom-form-autocomplete title=dom-form-autocomplete>autocomplete</a>;
           attribute DOMString <a href=#dom-fs-enctype title=dom-fs-enctype>enctype</a>;
           attribute DOMString <a href=#dom-fs-method title=dom-fs-method>method</a>;
           attribute DOMString <a href=#dom-form-name title=dom-form-name>name</a>;
           attribute boolean <a href=#dom-fs-novalidate title=dom-fs-noValidate>noValidate</a>;
           attribute DOMString <a href=#dom-fs-target title=dom-fs-target>target</a>;

  readonly attribute <a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a> <a href=#dom-form-elements title=dom-form-elements>elements</a>;
  readonly attribute long <a href=#dom-form-length title=dom-form-length>length</a>;
  caller getter any <a href=#dom-form-item title=dom-form-item>item</a>(in unsigned long index);
  caller getter any <a href=#dom-form-nameditem title=dom-form-namedItem>namedItem</a>(in DOMString name);

  void <a href=#dom-form-submit title=dom-form-submit>submit</a>();
  void <a href=#dom-form-reset title=dom-form-reset>reset</a>();
  boolean <a href=#dom-form-checkvalidity title=dom-form-checkValidity>checkValidity</a>();

  void <a href=#dom-form-dispatchforminput title=dom-form-dispatchFormInput>dispatchFormInput</a>();
  void <a href=#dom-form-dispatchformchange title=dom-form-dispatchFormChange>dispatchFormChange</a>();
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-form-element>form</a></code> element <a href=#represents>represents</a> a
  collection of <a href=#form-associated-element title="form-associated element">form-associated
  elements</a>, some of which can represent editable values that
  can be submitted to a server for processing.</p>

  <p>The <dfn id=attr-form-accept-charset title=attr-form-accept-charset><code>accept-charset</code></dfn>
  attribute gives the character encodings that are to be used for the
  submission. If specified, the value must be an <a href=#ordered-set-of-unique-space-separated-tokens>ordered set of
  unique space-separated tokens</a>, and each token must be an
  <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the <a href=#preferred-mime-name>preferred
  MIME name</a> of an <a href=#ascii-compatible-character-encoding>ASCII-compatible character
  encoding</a>. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>

  <p>The <dfn id=attr-form-name title=attr-form-name><code>name</code></dfn> attribute
  represents the <code><a href=#the-form-element>form</a></code>'s name within the <code title=dom-document-forms><a href=#dom-document-forms>forms</a></code> collection. The value must
  not be the empty string, and the value must be unique amongst the
  <code><a href=#the-form-element>form</a></code> elements in the <code title=dom-document-forms><a href=#dom-document-forms>forms</a></code> collection that it is in, if
  any.</p>

  <p>The <dfn id=attr-form-autocomplete title=attr-form-autocomplete><code>autocomplete</code></dfn>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The attribute has
  two states. The <code title=attr-form-autocomplete-on>on</code>
  keyword maps to the <dfn id=attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</dfn> state, and the
  <code title=attr-form-autocomplete-off>off</code> keyword maps to
  the <dfn id=attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</dfn>
  state. The attribute may also be omitted. The <i>missing value
  default</i> is the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a> state. The <a href=#attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</a> state indicates
  that by default, <code><a href=#the-input-element>input</a></code> elements in the form will have
  their <a href=#resulting-autocompletion-state>resulting autocompletion state</a> set to <i title="">off</i>; the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a> state indicates
  that by default, <code><a href=#the-input-element>input</a></code> elements in the form will have
  their <a href=#resulting-autocompletion-state>resulting autocompletion state</a> set to <i title="">on</i>.</p>

  <p>The <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>, <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>, <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>, and <code title=attr-fs-target><a href=#attr-fs-target>target</a></code> attributes are <a href=#attributes-for-form-submission>attributes
  for form submission</a>.</p>

  <dl class=domintro><dt><var title="">form</var> . <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code></dt>

   <dd>

    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the form controls in
    the form (excluding image buttons for historical reasons).</p>

   </dd>

   <dt><var title="">form</var> . <code title=dom-form-length><a href=#dom-form-length>length</a></code></dt>

   <dd>

    <p>Returns the number of form controls in the form (excluding
    image buttons for historical reasons).</p>

   </dd>

   <dt><var title="">element</var> = <var title="">form</var> . <code title=dom-form-item><a href=#dom-form-item>item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">form</var>[<var title="">index</var>]</dt>
   <dt><var title="">form</var>(<var title="">index</var>)</dt>

   <dd>

    <p>Returns the <var title="">index</var>th element in the form
    (excluding image buttons for historical reasons).</p>

   </dd>

   <dt><var title="">element</var> = <var title="">form</var> . <code title=dom-form-namedItem><a href=#dom-form-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">form</var>[<var title="">name</var>]</dt>
   <dt><var title="">form</var>(<var title="">name</var>)</dt>

   <dd>

    <p>Returns the form control in the form with the given ID or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> (excluding image buttons for
    historical reasons).</p>

    <p>Once an element has been referenced using a particular name,
    that name will continue being available as a way to reference that
    element in this method, even if the element's actual ID or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> changes, for as long as the
    element remains in the <code><a href=#document>Document</a></code>.</p>

    <p>If there are multiple matching items, then a
    <code><a href=#nodelist>NodeList</a></code> object containing all those elements is
    returned.</p>

    <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> could be found.</p>

   </dd>

   <dt><var title="">form</var> . <code title=dom-form-submit><a href=#dom-form-submit>submit</a></code>()</dt>

   <dd>

    <p>Submits the form.</p>

   </dd>

   <dt><var title="">form</var> . <code title=dom-form-reset><a href=#dom-form-reset>reset</a></code>()</dt>

   <dd>

    <p>Resets the form.</p>

   </dd>

   <dt><var title="">form</var> . <code title=dom-form-checkValidity><a href=#dom-form-checkvalidity>checkValidity</a></code>()</dt>

   <dd>

    <p>Returns true if the form's controls are all valid; otherwise,
    returns false.</p>

   </dd>

   <dt><var title="">form</var> . <code title=dom-form-dispatchFormInput><a href=#dom-form-dispatchforminput>dispatchFormInput</a></code>()</dt>

   <dd>

    <p>Dispatches a <code title=event-forminput>forminput</code> event at all the form controls.</p>

   </dd>

   <dt><var title="">form</var> . <code title=dom-form-dispatchFormChange><a href=#dom-form-dispatchformchange>dispatchFormChange</a></code>()</dt>

   <dd>

    <p>Dispatches a <code title=event-formchange>formchange</code> event at all the form controls.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-form-autocomplete title=dom-form-autocomplete><code>autocomplete</code></dfn> and
  <dfn id=dom-form-name title=dom-form-name><code>name</code></dfn> IDL attributes
  must <a href=#reflect>reflect</a> the respective content attributes of the
  same name.</p>

  <p>The <dfn id=dom-form-acceptcharset title=dom-form-acceptCharset><code>acceptCharset</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code> content
  attribute.</p>

  <hr><p>The <dfn id=dom-form-elements title=dom-form-elements><code>elements</code></dfn>
  IDL attribute must return an <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code>
  rooted at the <code><a href=#document>Document</a></code> node, whose filter matches <a href=#category-listed title=category-listed>listed elements</a> whose <a href=#form-owner>form
  owner</a> is the <code><a href=#the-form-element>form</a></code> element, with the exception of
  <code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, which must,
  for historical reasons, be excluded from this particular
  collection.</p>

  <p>The <dfn id=dom-form-length title=dom-form-length><code>length</code></dfn> IDL
  attribute must return the number of nodes <a href=#represented-by-the-collection title="represented
  by the collection">represented</a> by the <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> collection.</p>

  <p>The
  <span>indices of the supported indexed properties</span> at any
  instant are the indices supported by the object returned by the
  <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> attribute at that
  instant.</p>

  <p>The <dfn id=dom-form-item title=dom-form-item><code>item(<var title="">index</var>)</code></dfn> method must return the value
  returned by the method of the same name on the <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> collection, when invoked
  with the same argument.</p>

  <p>Each <code><a href=#the-form-element>form</a></code> element has a mapping of names to elements
  called the <dfn id=past-names-map>past names map</dfn>. It is used to persist names of
  controls even when they change names.</p>

  <p>The <span>names of the supported named properties</span> are the
  union of the names currently supported by the object returned by the
  <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> attribute, and the
  names currently in the <a href=#past-names-map>past names map</a>.</p>

  <p>The <dfn id=dom-form-nameditem title=dom-form-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method, when called, must run the
  following steps:</p>

  <ol><li>

    <p>If <var title="">name</var> is one of the <span>names of the
    supported named properties</span> of the object returned by the
    <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> attribute, then
    run these substeps:</p>

    <ol><li><p>Let <var title="">candidate</var> be the object returned
     by the <code title=dom-HTMLFormControlsCollection-namedItem><a href=#dom-htmlformcontrolscollection-nameditem>namedItem()</a></code>
     method on the object returned by the <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> attribute when passed
     the <var title="">name</var> argument.</li>

     <li><p>If <var title="">candidate</var> is an element, then add a
     mapping from <var title="">name</var> to <var title="">candidate</var> in the <code><a href=#the-form-element>form</a></code> element's
     <a href=#past-names-map>past names map</a>, replacing the previous entry with
     the same name, if any.</li>

     <li><p>Return <var title="">candidate</var> and abort these
     steps.</li>

    </ol></li>

   <li><p>Otherwise, <var title="">name</var> is the name of one of
   the entries in the <code><a href=#the-form-element>form</a></code> element's <a href=#past-names-map>past names
   map</a>: return the object associated with <var title="">name</var> in that map.</li>

  </ol><p>If an element listed in the <code><a href=#the-form-element>form</a></code> element's <a href=#past-names-map>past
  names map</a> is removed from the <code><a href=#document>Document</a></code>, then its
  entries must be removed from the map.</p>

  <!--
    This ridiculous setup is intended to do as much of the right thing
    while still supporting code written to work in IE7. IE versions
    prior to IE8 do not update the names on the <form> element
    collection to match new names when elements are renamed, and there
    are enough pages that rename elements and then access them by
    their old name that we have to support this.

    But we still want to expose them using the new names, so as far as
    possible we pretend the legacy names aren't there except if
    there's no other element actually named that way.

    Removing the element did remove the legacy name in IE7:
    http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Cform%20action%3D%22%2F%22%3E%3Cinput%20name%3Dsubmit%3E%3C%2Fform%3E%0A%3Cscript%3E%0A%20w(document.forms%5B0%5D.submit)%3B%0A%20w(document.forms%5B0%5D.removeChild(document.getElementsByTagName('input')%5B0%5D))%3B%0A%20w(document.forms%5B0%5D.length)%3B%0A%20try%20%7B%20document.forms%5B0%5D.submit()%3B%20%7D%20catch%20(e)%20%20%7B%20w(e.message)%20%7D%0A%3C%2Fscript%3E

    There's no interop on what happens when the name was originally a
    duplicate name, so we don't persist such accesses - at the time
    of writing, Safari returned the first element, Firefox returned
    null (as we do), and IE7 returned the original collection:
    http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Cform%20action%3D%22%2F%22%3E%3Cinput%20name%3Da%20id%3Dfirst%3E%3Cinput%20name%3Da%20id%3Dsecond%3E%3C%2Fform%3E%0A%3Cscript%3E%0A%20w%28document.forms[0].a%29%3B%0A%20document.getElementsByTagName%28%27input%27%29[0].name%20%3D%20%27b%27%3B%0A%20document.getElementsByTagName%28%27input%27%29[1].name%20%3D%20%27b%27%3B%0A%20w%28document.forms[0].length%29%3B%0A%20w%28document.forms[0].a.id%29%3B%0A%3C%2Fscript%3E
  -->

  <hr><p>The <dfn id=dom-form-submit title=dom-form-submit><code>submit()</code></dfn>
  method, when invoked, must <a href=#concept-form-submit title=concept-form-submit>submit</a> the <code><a href=#the-form-element>form</a></code>
  element from the <code><a href=#the-form-element>form</a></code> element itself, with the <var title="">scripted-submit</var> flag set.</p>

  <p>The <dfn id=dom-form-reset title=dom-form-reset><code>reset()</code></dfn>
  method, when invoked, must run the following steps:</p>

  <ol><li><p>If the <code><a href=#the-form-element>form</a></code> element is marked as <i><a href=#locked-for-reset>locked for
   reset</a></i>, then abort these steps.</li>

   <li><p>Mark the <code><a href=#the-form-element>form</a></code> element as <dfn id=locked-for-reset>locked for
   reset</dfn>.</li>

   <li><p><a href=#concept-form-reset title=concept-form-reset>Reset</a> the
   <code><a href=#the-form-element>form</a></code> element.</li>

   <li><p>Unmark the <code><a href=#the-form-element>form</a></code> element as <i><a href=#locked-for-reset>locked for
   reset</a></i>.</li>

  </ol><p>If the <dfn id=dom-form-checkvalidity title=dom-form-checkValidity><code>checkValidity()</code></dfn>
  method is invoked, the user agent must <a href=#statically-validate-the-constraints>statically validate the
  constraints</a> of the <code><a href=#the-form-element>form</a></code> element, and return true
  if the constraint validation return a <i>positive</i> result, and
  false if it returned a <i>negative</i> result.</p>

  <p>If the <dfn id=dom-form-dispatchforminput title=dom-form-dispatchFormInput><code>dispatchFormInput()</code></dfn>
  method is invoked, the user agent must <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</a> from the
  <code><a href=#the-form-element>form</a></code> element.</p>

  <p>If the <dfn id=dom-form-dispatchformchange title=dom-form-dispatchFormChange><code>dispatchFormChange()</code></dfn>
  method is invoked, the user agent must <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> from the
  <code><a href=#the-form-element>form</a></code> element.</p>

  </div>

  <div class=example>

   <p>This example shows two search forms:</p>

   <pre>&lt;form action="http://www.google.com/search" method="get"&gt;
 &lt;label&gt;Google: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
&lt;/form&gt;
&lt;form action="http://www.bing.com/search" method="get"&gt;
 &lt;label&gt;Bing: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
&lt;/form&gt;</pre>

  </div>




  <h4 id=the-fieldset-element><span class=secno>4.10.4 </span>The <dfn><code>fieldset</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   <dd><a href=#category-listed title=category-listed>Listed</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Optionally a <code><a href=#the-legend-element>legend</a></code> element, followed by <a href=#flow-content>flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlfieldsetelement>HTMLFieldSetElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-fieldset-disabled title=dom-fieldset-disabled>disabled</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
           attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;

  readonly attribute DOMString <a href=#dom-fieldset-type title=dom-fieldset-type>type</a>;

  readonly attribute <a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a> <a href=#dom-fieldset-elements title=dom-fieldset-elements>elements</a>;

  readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
  readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
  readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
  boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
  void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-fieldset-element>fieldset</a></code> element <a href=#represents>represents</a> a set
  of form controls optionally grouped under a common name.</p>

  <p>The name of the group is given by the first <code><a href=#the-legend-element>legend</a></code>
  element that is a child of the <code><a href=#the-fieldset-element>fieldset</a></code> element, if
  any. The remainder of the descendants form the group.</p>

  <p>The <dfn id=attr-fieldset-disabled title=attr-fieldset-disabled><code>disabled</code></dfn>
  attribute, when specified, causes all the form control descendants
  of the <code><a href=#the-fieldset-element>fieldset</a></code> element, excluding those that are
  descendants of the <code><a href=#the-fieldset-element>fieldset</a></code> element's first
  <code><a href=#the-legend-element>legend</a></code> element child, if any, to be <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</p>

  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-fieldset-element>fieldset</a></code> element with its
  <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
  attribute represents the element's name.</p>

  <dl class=domintro><dt><var title="">fieldset</var> . <code title=dom-fieldset-type><a href=#dom-fieldset-type>type</a></code></dt>

   <dd>

    <p>Returns the string "fieldset".</p>

   </dd>

   <dt><var title="">fieldset</var> . <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code></dt>

   <dd>

    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the form controls in
    the element.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-fieldset-disabled title=dom-fieldset-disabled><code>disabled</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  <p>The <dfn id=dom-fieldset-type title=dom-fieldset-type><code>type</code></dfn> IDL
  attribute must return the string "<code title="">fieldset</code>".</p>

  <p>The <dfn id=dom-fieldset-elements title=dom-fieldset-elements><code>elements</code></dfn> IDL
  attribute must return an <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code>
  rooted at the <code><a href=#the-fieldset-element>fieldset</a></code> element, whose filter matches
  <a href=#category-listed title=category-listed>listed elements</a>.</p>

  <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
  attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
  methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
  <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
  element's forms API.</p>

  <p><strong>Constraint validation</strong>: <code><a href=#the-fieldset-element>fieldset</a></code>
  elements are always <a href=#barred-from-constraint-validation>barred from constraint
  validation</a>.</p>

  </div>

  <div class=example>

   <p>The following snippet shows a fieldset with a checkbox in the
   legend that controls whether or not the fieldset is enabled. The
   contents of the fieldset consist of two required text fields and an
   optional year/month control.</p>

   <pre>&lt;fieldset name="clubfields" disabled&gt;
 &lt;legend&gt; &lt;label&gt;
  &lt;input type=checkbox name=club onchange="form.clubfields.disabled = !checked"&gt;
  Use Club Card
 &lt;/label&gt; &lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Name on card: &lt;input name=clubname required&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Card number: &lt;input name=clubnum required pattern="[-0-9]+"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Expiry date: &lt;input name=clubexp type=month&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;</pre>

  </div>


  <h4 id=the-legend-element><span class=secno>4.10.5 </span>The <dfn><code>legend</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As the first child of a <code><a href=#the-fieldset-element>fieldset</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class=idl>interface <dfn id=htmllegendelement>HTMLLegendElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-legend-form title=dom-legend-form>form</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-legend-element>legend</a></code> element <a href=#represents>represents</a> a caption
  for the rest of the contents of the <code><a href=#the-legend-element>legend</a></code> element's
  parent <code><a href=#the-fieldset-element>fieldset</a></code> element<span class=impl>, if
  any</span>.</p>

  <dl class=domintro><dt><var title="">legend</var> . <code title=dom-legend-form><a href=#dom-legend-form>form</a></code></dt>

   <dd>

    <p>Returns the element's <code><a href=#the-form-element>form</a></code> element, if any, or
    null otherwise.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-legend-form title=dom-legend-form><code>form</code></dfn> IDL
  attribute's behavior depends on whether the <code><a href=#the-legend-element>legend</a></code>
  element is in a <code><a href=#the-fieldset-element>fieldset</a></code> element or not. If the
  <code><a href=#the-legend-element>legend</a></code> has a <code><a href=#the-fieldset-element>fieldset</a></code> element as its
  parent, then the <code title=dom-legend-form><a href=#dom-legend-form>form</a></code> IDL
  attribute must return the same value as the <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute on that
  <code><a href=#the-fieldset-element>fieldset</a></code> element. Otherwise, it must return null.</p>

  </div>



  <h4 id=the-label-element><span class=secno>4.10.6 </span>The <dfn><code>label</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dd><a href=#form-associated-element>Form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>, but with no descendant <a href=#category-label title=category-label>labelable form-associated elements</a> unless it is the element's <a href=#labeled-control>labeled control</a>, and no descendant <code><a href=#the-label-element>label</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-label-for><a href=#attr-label-for>for</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmllabelelement>HTMLLabelElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
           attribute DOMString <a href=#dom-label-htmlfor title=dom-label-htmlFor>htmlFor</a>;
  readonly attribute <a href=#htmlelement>HTMLElement</a> <a href=#dom-label-control title=dom-label-control>control</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-label-element>label</a></code> <a href=#represents>represents</a> a caption in a
  user interface. The caption can be associated with a specific form
  control<span class=impl>, known as the <code><a href=#the-label-element>label</a></code>
  element's <dfn id=labeled-control>labeled control</dfn></span>, either using <code title=attr-label-for><a href=#attr-label-for>for</a></code> attribute, or by putting the form
  control inside the <code><a href=#the-label-element>label</a></code> element itself.</p>

  <div class=impl>

  <p>Except where otherwise specified by the following rules, a
  <code><a href=#the-label-element>label</a></code> element has no <a href=#labeled-control>labeled control</a>.</p>

  </div>

  <p>The <dfn id=attr-label-for title=attr-label-for><code>for</code></dfn> attribute
  may be specified to indicate a form control with which the caption
  is to be associated. If the attribute is specified, the attribute's
  value must be the ID of a <a href=#category-label title=category-label>labelable
  form-associated element</a> in the same <code><a href=#document>Document</a></code> as
  the <code><a href=#the-label-element>label</a></code> element. <span class=impl>If the attribute
  is specified and there is an element in the <code><a href=#document>Document</a></code>
  whose ID is equal to the value of the <code title=attr-label-for><a href=#attr-label-for>for</a></code> attribute, and the first such
  element is a <a href=#category-label title=category-label>labelable form-associated
  element</a>, then that element is the <code><a href=#the-label-element>label</a></code>
  element's <a href=#labeled-control>labeled control</a>.</span></p>

  <div class=impl>

  <p>If the <code title=attr-label-for><a href=#attr-label-for>for</a></code> attribute is not
  specified, but the <code><a href=#the-label-element>label</a></code> element has a <a href=#category-label title=category-label>labelable form-associated element</a>
  descendant, then the first such descendant in <a href=#tree-order>tree
  order</a> is the <code><a href=#the-label-element>label</a></code> element's <a href=#labeled-control>labeled
  control</a>.</p>

  <p>The <code><a href=#the-label-element>label</a></code> element's exact default presentation and
  behavior, in particular what its <a href=#activation-behavior>activation behavior</a>
  might be, if anything, should match the platform's label
  behavior.</p>

  <!-- activation behaviour need not be dependent on whether the
  labeled control is being rendered:
   http://software.hixie.ch/utilities/js/live-dom-viewer/saved/371
  -->

  <div class=example>

   <p>For example, on platforms where clicking a checkbox label checks
   the checkbox, clicking the <code><a href=#the-label-element>label</a></code> in the following
   snippet could trigger the user agent to <a href=#run-synthetic-click-activation-steps>run synthetic click
   activation steps</a> on the <code><a href=#the-input-element>input</a></code> element, as if
   the element itself had been triggered by the user:</p>

   <pre>&lt;label&gt;&lt;input type=checkbox name=lost&gt; Lost&lt;/label&gt;</pre>

   <p>On other platforms, the behavior might be just to focus the
   control, or do nothing.</p>

  </div>

  </div>

  <dl class=domintro><dt><var title="">label</var> . <code title=dom-label-control><a href=#dom-label-control>control</a></code></dt>

   <dd>

    <p>Returns the form control that is associated with this element.</p>

   </dd>

  </dl><p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-label-element>label</a></code> element with its
  <a href=#form-owner>form owner</a>.</p>

  <div class=impl>

  <p>The <dfn id=dom-label-htmlfor title=dom-label-htmlFor><code>htmlFor</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-label-for><a href=#attr-label-for>for</a></code> content attribute.</p>

  <p>The <dfn id=dom-label-control title=dom-label-control><code>control</code></dfn> IDL
  attribute must return the <code><a href=#the-label-element>label</a></code> element's <a href=#labeled-control>labeled
  control</a>, if any, or null if there isn't one.</p>

  </div>

  <hr><dl class=domintro><dt><var title="">control</var> . <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code></dt>

   <dd>

    <p>Returns a <code><a href=#nodelist>NodeList</a></code> of all the <code><a href=#the-label-element>label</a></code>
    elements that the form control is associated with.</p>

   </dd>

  </dl><div class=impl>

  <p><a href=#category-label title=category-label>Labelable form-associated
  elements</a> have a <code><a href=#nodelist>NodeList</a></code> object associated with
  them that represents the list of <code><a href=#the-label-element>label</a></code> elements, in
  <a href=#tree-order>tree order</a>, whose <a href=#labeled-control>labeled control</a> is the
  element in question. The <dfn id=dom-lfe-labels title=dom-lfe-labels><code>labels</code></dfn> IDL attribute of
  <a href=#category-label title=category-label>labelable form-associated
  elements</a>, on getting, must return that <code><a href=#nodelist>NodeList</a></code>
  object.</p>

  <p>The <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute is part
  of the element's forms API.</p>

  </div>

  <div class=example>

   <p>The following example shows three form controls each with a
   label, two of which have small text showing the right format for
   users to use.</p>

   <pre>&lt;p&gt;&lt;label&gt;Full name: &lt;input name=fn&gt; &lt;small&gt;Format: First Last&lt;/small&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Age: &lt;input name=age type=number min=0&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Post code: &lt;input name=pc&gt; &lt;small&gt;Format: AB12 3CD&lt;/small&gt;&lt;/label&gt;&lt;/p&gt;</pre>

  </div>


  <h4 id=the-input-element><span class=secno>4.10.7 </span>The <dfn><code>input</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd>If the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state: <a href=#interactive-content>Interactive content</a>.</dd>
   <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, <a href=#category-submit title=category-submit>submittable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-input-accept><a href=#attr-input-accept>accept</a></code></dd>
   <dd><code title=attr-input-alt><a href=#attr-input-alt>alt</a></code></dd>
   <dd><code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code></dd>
   <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   <dd><code title=attr-input-checked><a href=#attr-input-checked>checked</a></code></dd>
   <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code></dd>
   <dd><code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code></dd>
   <dd><code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code></dd>
   <dd><code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code></dd>
   <dd><code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code></dd>
   <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   <dd><code title=attr-input-list><a href=#attr-input-list>list</a></code></dd>
   <dd><code title=attr-input-max><a href=#attr-input-max>max</a></code></dd>
   <dd><code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code></dd>
   <dd><code title=attr-input-min><a href=#attr-input-min>min</a></code></dd>
   <dd><code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code></dd>
   <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   <dd><code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code></dd>
   <dd><code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code></dd>
   <dd><code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code></dd>
   <dd><code title=attr-input-required><a href=#attr-input-required>required</a></code></dd>
   <dd><code title=attr-input-size><a href=#attr-input-size>size</a></code></dd>
   <dd><code title=attr-input-src><a href=#attr-input-src>src</a></code></dd>
   <dd><code title=attr-input-step><a href=#attr-input-step>step</a></code></dd>
   <dd><code title=attr-input-type><a href=#attr-input-type>type</a></code></dd>
   <dd><code title=attr-input-value><a href=#attr-input-value>value</a></code></dd>
   <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlinputelement>HTMLInputElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-input-accept title=dom-input-accept>accept</a>;
           attribute DOMString <a href=#dom-input-alt title=dom-input-alt>alt</a>;
           attribute DOMString <a href=#dom-input-autocomplete title=dom-input-autocomplete>autocomplete</a>;
           attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
           attribute boolean <a href=#dom-input-defaultchecked title=dom-input-defaultChecked>defaultChecked</a>;
           attribute boolean <a href=#dom-input-checked title=dom-input-checked>checked</a>;
           attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
  readonly attribute <span>FileList</span> <a href=#dom-input-files title=dom-input-files>files</a>;
           attribute DOMString <a href=#dom-fs-formaction title=dom-fs-formAction>formAction</a>;
           attribute DOMString <a href=#dom-fs-formenctype title=dom-fs-formEnctype>formEnctype</a>;
           attribute DOMString <a href=#dom-fs-formmethod title=dom-fs-formMethod>formMethod</a>;
           attribute boolean <a href=#dom-fs-formnovalidate title=dom-fs-formNoValidate>formNoValidate</a>;
           attribute DOMString <a href=#dom-fs-formtarget title=dom-fs-formTarget>formTarget</a>;
           attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
           attribute boolean <a href=#dom-input-indeterminate title=dom-input-indeterminate>indeterminate</a>;
  readonly attribute <a href=#htmlelement>HTMLElement</a> <a href=#dom-input-list title=dom-input-list>list</a>;
           attribute DOMString <a href=#dom-input-max title=dom-input-max>max</a>;
           attribute long <a href=#dom-input-maxlength title=dom-input-maxLength>maxLength</a>;
           attribute DOMString <a href=#dom-input-min title=dom-input-min>min</a>;
           attribute boolean <a href=#dom-input-multiple title=dom-input-multiple>multiple</a>;
           attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
           attribute DOMString <a href=#dom-input-pattern title=dom-input-pattern>pattern</a>;
           attribute DOMString <a href=#dom-input-placeholder title=dom-input-placeholder>placeholder</a>;
           attribute boolean <a href=#dom-input-readonly title=dom-input-readOnly>readOnly</a>;
           attribute boolean <a href=#dom-input-required title=dom-input-required>required</a>;
           attribute unsigned long <a href=#dom-input-size title=dom-input-size>size</a>;
           attribute DOMString <a href=#dom-input-src title=dom-input-src>src</a>;
           attribute DOMString <a href=#dom-input-step title=dom-input-step>step</a>;
           attribute DOMString <a href=#dom-input-type title=dom-input-type>type</a>;
           attribute DOMString <a href=#dom-input-defaultvalue title=dom-input-defaultValue>defaultValue</a>;
           attribute DOMString <a href=#dom-input-value title=dom-input-value>value</a>;
           attribute <span>Date</span> <a href=#dom-input-valueasdate title=dom-input-valueAsDate>valueAsDate</a>;
           attribute double <a href=#dom-input-valueasnumber title=dom-input-valueAsNumber>valueAsNumber</a>;
  readonly attribute <a href=#htmloptionelement>HTMLOptionElement</a> <a href=#dom-input-selectedoption title=dom-input-selectedOption>selectedOption</a>;
           attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;

  void <a href=#dom-input-stepup title=dom-input-stepUp>stepUp</a>(in optional long n);
  void <a href=#dom-input-stepdown title=dom-input-stepDown>stepDown</a>(in optional long n);

  readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
  readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
  readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
  boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
  void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);

  readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;

  void <a href=#dom-textarea/input-select title=dom-textarea/input-select>select</a>();
           attribute unsigned long <a href=#dom-textarea/input-selectionstart title=dom-textarea/input-selectionStart>selectionStart</a>;
           attribute unsigned long <a href=#dom-textarea/input-selectionend title=dom-textarea/input-selectionEnd>selectionEnd</a>;
  void <a href=#dom-textarea/input-setselectionrange title=dom-textarea/input-setSelectionRange>setSelectionRange</a>(in unsigned long start, in unsigned long end);
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a typed data field,
  usually with a form control to allow the user to edit the data.</p>

  <p>The <dfn id=attr-input-type title=attr-input-type><code>type</code></dfn>
  attribute controls the data type (and associated control) of the
  element. It is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
  table lists the keywords and states for the attribute &mdash; the
  keywords in the left column map to the states in the cell in the
  second column on the same row as the keyword.</p>

  <table id=attr-input-type-keywords><thead><tr><th> Keyword
     <th> State
     <th> Data type
     <th> Control type
   <tbody><tr><td> <dfn id=attr-input-type-hidden-keyword title=attr-input-type-hidden-keyword><code>hidden</code></dfn>
     <td> <a href=#hidden-state title=attr-input-type-hidden>Hidden</a>
     <td> An arbitrary string
     <td> n/a
    <tr><td> <dfn id=attr-input-type-text-keyword title=attr-input-type-text-keyword><code>text</code></dfn>
     <td> <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>
     <td> Text with no line breaks
     <td> Text field
    <tr><td> <dfn id=attr-input-type-search-keyword title=attr-input-type-search-keyword><code>search</code></dfn>
     <td> <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>
     <td> Text with no line breaks
     <td> Search field
    <tr><td> <dfn id=attr-input-type-tel-keyword title=attr-input-type-tel-keyword><code>tel</code></dfn>
     <td> <a href=#telephone-state title=attr-input-type-tel>Telephone</a>
     <td> Text with no line breaks
     <td> A text field
    <tr><td> <dfn id=attr-input-type-url-keyword title=attr-input-type-url-keyword><code>url</code></dfn>
     <td> <a href=#url-state title=attr-input-type-url>URL</a>
     <td> An absolute IRI
     <td> A text field
    <tr><td> <dfn id=attr-input-type-email-keyword title=attr-input-type-email-keyword><code>email</code></dfn>
     <td> <a href=#e-mail-state title=attr-input-type-email>E-mail</a>
     <td> An e-mail address or list of e-mail addresses
     <td> A text field
    <tr><td> <dfn id=attr-input-type-password-keyword title=attr-input-type-password-keyword><code>password</code></dfn>
     <td> <a href=#password-state title=attr-input-type-password>Password</a>
     <td> Text with no line breaks (sensitive information)
     <td> Text field that obscures data entry
    <tr><td> <dfn id=attr-input-type-datetime-keyword title=attr-input-type-datetime-keyword><code>datetime</code></dfn>
     <td> <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a>
     <td> A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC
     <td> A date and time control
    <tr><td> <dfn id=attr-input-type-date-keyword title=attr-input-type-date-keyword><code>date</code></dfn>
     <td> <a href=#date-state title=attr-input-type-date>Date</a>
     <td> A date (year, month, day) with no time zone
     <td> A date control
    <tr><td> <dfn id=attr-input-type-month-keyword title=attr-input-type-month-keyword><code>month</code></dfn>
     <td> <a href=#month-state title=attr-input-type-month>Month</a>
     <td> A date consisting of a year and a month with no time zone
     <td> A month control
    <tr><td> <dfn id=attr-input-type-week-keyword title=attr-input-type-week-keyword><code>week</code></dfn>
     <td> <a href=#week-state title=attr-input-type-week>Week</a>
     <td> A date consisting of a week-year number and a week number with no time zone
     <td> A week control
    <tr><td> <dfn id=attr-input-type-time-keyword title=attr-input-type-time-keyword><code>time</code></dfn>
     <td> <a href=#time-state title=attr-input-type-time>Time</a>
     <td> A time (hour, minute, seconds, fractional seconds) with no time zone
     <td> A time control
    <tr><td> <dfn id=attr-input-type-datetime-local-keyword title=attr-input-type-datetime-local-keyword><code>datetime-local</code></dfn>
     <td> <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>
     <td> A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone
     <td> A date and time control
    <tr><td> <dfn id=attr-input-type-number-keyword title=attr-input-type-number-keyword><code>number</code></dfn>
     <td> <a href=#number-state title=attr-input-type-number>Number</a>
     <td> A numerical value
     <td> A text field or spinner control
    <tr><td> <dfn id=attr-input-type-range-keyword title=attr-input-type-range-keyword><code>range</code></dfn>
     <td> <a href=#range-state title=attr-input-type-range>Range</a>
     <td> A numerical value, with the extra semantic that the exact value is not important
     <td> A slider control or similar
    <tr><td> <dfn id=attr-input-type-color-keyword title=attr-input-type-color-keyword><code>color</code></dfn>
     <td> <a href=#color-state title=attr-input-type-color>Color</a>
     <td> An sRGB color with 8-bit red, green, and blue components
     <td> A color well
    <tr><td> <dfn id=attr-input-type-checkbox-keyword title=attr-input-type-checkbox-keyword><code>checkbox</code></dfn>
     <td> <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a>
     <td> A set of zero or more values from a predefined list
     <td> A checkbox
    <tr><td> <dfn id=attr-input-type-radio-keyword title=attr-input-type-radio-keyword><code>radio</code></dfn>
     <td> <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>
     <td> An enumerated value
     <td> A radio button
    <tr><td> <dfn id=attr-input-type-file-keyword title=attr-input-type-file-keyword><code>file</code></dfn>
     <td> <a href=#file-upload-state title=attr-input-type-file>File Upload</a>
     <td> Zero or more files each with a <a href=#mime-type>MIME type</a> and optionally a file name
     <td> A label and a button
    <tr><td> <dfn id=attr-input-type-submit-keyword title=attr-input-type-submit-keyword><code>submit</code></dfn>
     <td> <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>
     <td> An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission
     <td> A button
    <tr><td> <dfn id=attr-input-type-image-keyword title=attr-input-type-image-keyword><code>image</code></dfn>
     <td> <a href=#image-button-state title=attr-input-type-image>Image Button</a>
     <td> A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission
     <td> Either a clickable image, or a button
    <tr><td> <dfn id=attr-input-type-reset-keyword title=attr-input-type-reset-keyword><code>reset</code></dfn>
     <td> <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>
     <td> n/a
     <td> A button
    <tr><td> <dfn id=attr-input-type-button-keyword title=attr-input-type-button-keyword><code>button</code></dfn>
     <td> <a href=#button-state title=attr-input-type-button>Button</a>
     <td> n/a
     <td> A button
  </table><p>The <i>missing value default</i> is the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state.</p>

  <p>Which of the <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>, <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>, <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>, <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>, <code title=attr-input-list><a href=#attr-input-list>list</a></code>, <code title=attr-input-max><a href=#attr-input-max>max</a></code>, <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>, <code title=attr-input-min><a href=#attr-input-min>min</a></code>, <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>, <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>, <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>, <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>, <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code title=attr-input-size><a href=#attr-input-size>size</a></code>, <code title=attr-input-src><a href=#attr-input-src>src</a></code>, <code title=attr-input-step><a href=#attr-input-step>step</a></code>, and <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> content attributes, the <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code>, <code title=dom-input-files><a href=#dom-input-files>files</a></code>, <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, <code title=dom-input-list><a href=#dom-input-list>list</a></code>, and <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL
  attributes, the <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> method, the <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> and
  <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>
  IDL attributes, the <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
  method, the <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> and
  <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods, and the
  <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply to an
  <code><a href=#the-input-element>input</a></code> element depends on the state of its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute.  The following table
  <span class=impl>is non-normative and</span> summarizes which of
  those content attributes, IDL attributes, methods, and events apply
  to each state:</p>

  <table class=applies id=input-type-attr-summary><thead><tr><th>
     <th> <span title=""><a href=#hidden-state title=attr-input-type-hidden>Hidden</a></span>
     <th> <span title=""><a href=#text-state-and-search-state title=attr-input-type-text>Text</a>,</span>
          <span title=""><a href=#text-state-and-search-state title=attr-input-type-search>Search</a>,</span>
          <span title=""><a href=#url-state title=attr-input-type-url>URL</a>,</span>
          <span title=""><a href=#telephone-state title=attr-input-type-tel>Telephone</a></span>
     <th> <span title=""><a href=#e-mail-state title=attr-input-type-email>E-mail</a></span>
     <th> <span title=""><a href=#password-state title=attr-input-type-password>Password</a></span>
     <th> <span title=""><a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a>,</span>
          <span title=""><a href=#date-state title=attr-input-type-date>Date</a>,</span>
          <span title=""><a href=#month-state title=attr-input-type-month>Month</a>,</span>
          <span title=""><a href=#week-state title=attr-input-type-week>Week</a>,</span>
          <span title=""><a href=#time-state title=attr-input-type-time>Time</a></span>
     <th> <span title=""><a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>,</span>
          <span title=""><a href=#number-state title=attr-input-type-number>Number</a></span>
     <th> <span title=""><a href=#range-state title=attr-input-type-range>Range</a></span>
     <th> <span title=""><a href=#color-state title=attr-input-type-color>Color</a></span>
     <th> <span title=""><a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a>,</span>
          <span title=""><a href=#radio-button-state title=attr-input-type-radio>Radio Button</a></span>
     <th> <span title=""><a href=#file-upload-state title=attr-input-type-file>File Upload</a></span>
     <th> <span title=""><a href=#submit-button-state title=attr-input-type-submit>Submit Button</a></span>
     <th> <span title=""><a href=#image-button-state title=attr-input-type-image>Image Button</a></span>
     <th> <span title=""><a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>,</span>
          <span title=""><a href=#button-state title=attr-input-type-button>Button</a></span>

   <tbody><tr><th colspan=14 scope=rowgroup>Content attributes

    <tr><th> <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=yes> Yes     <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=yes> Yes     <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=yes> Yes     <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=yes> Yes     <!-- Checkbox -->
<!-- <td class="yes"> Yes          Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=yes> Yes     <!-- Submit Button -->
     <td class=yes> Yes     <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=yes> Yes     <!-- Submit Button -->
     <td class=yes> Yes     <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=yes> Yes     <!-- Submit Button -->
     <td class=yes> Yes     <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=yes> Yes     <!-- Submit Button -->
     <td class=yes> Yes     <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=yes> Yes     <!-- Submit Button -->
     <td class=yes> Yes     <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=yes> Yes     <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-list><a href=#attr-input-list>list</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=yes> Yes     <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-max><a href=#attr-input-max>max</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-min><a href=#attr-input-min>min</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=yes> Yes     <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-required><a href=#attr-input-required>required</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=yes> Yes     <!-- Checkbox -->
<!-- <td class="yes"> Yes          Radio Button -->
     <td class=yes> Yes     <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-size><a href=#attr-input-size>size</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-src><a href=#attr-input-src>src</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=yes> Yes     <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-input-step><a href=#attr-input-step>step</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=yes> Yes     <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

   <tbody><tr><th colspan=14 scope=rowgroup>IDL attributes and methods

    <tr><th> <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=yes> Yes     <!-- Checkbox -->
<!-- <td class="yes"> Yes          Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-input-files><a href=#dom-input-files>files</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=yes> Yes     <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr class=impl><th> <code title=dom-input-value><a href=#dom-input-value>value</a></code>
     <td class=yes> <a href=#dom-input-value-default title=dom-input-value-default>default</a> <!-- Hidden -->
     <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Text -->
<!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Search -->
<!-- <td class="yes"> <span title="dom-input-value-value">value</span>      URL -->
     <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- E-mail -->
     <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Password -->
     <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Date and Time -->
<!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Date -->
<!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Month -->
<!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Week -->
<!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Time -->
     <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Local Date and Time -->
<!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Number -->
     <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Range -->
     <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Color -->
     <td class=yes> <a href=#dom-input-value-default-on title=dom-input-value-default-on>default/on</a> <!-- Checkbox -->
<!-- <td class="yes"> <span title="dom-input-value-default-on">default/on</span>      Radio Button -->
     <td class=yes> <a href=#dom-input-value-filename title=dom-input-value-filename>filename</a> <!-- File Upload -->
     <td class=yes> <a href=#dom-input-value-default title=dom-input-value-default>default</a> <!-- Submit Button -->
     <td class=yes> <a href=#dom-input-value-default title=dom-input-value-default>default</a> <!-- Image Button -->
     <td class=yes> <a href=#dom-input-value-default title=dom-input-value-default>default</a> <!-- Reset Button -->
<!-- <td class="yes"> <span title="dom-input-value-default">default</span>      Button -->

    <tr><th> <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-input-list><a href=#dom-input-list>list</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=yes> Yes     <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=yes> Yes     <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=no> &middot; <!-- Date and Time -->
<!-- <td class="no"> &middot;      Date -->
<!-- <td class="no"> &middot;      Month -->
<!-- <td class="no"> &middot;      Week -->
<!-- <td class="no"> &middot;      Time -->
     <td class=no> &middot; <!-- Local Date and Time -->
<!-- <td class="no"> &middot;      Number -->
     <td class=no> &middot; <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>
     <td class=no> &middot; <!-- Hidden -->
     <td class=no> &middot; <!-- Text -->
<!-- <td class="no"> &middot;      Search -->
<!-- <td class="no"> &middot;      URL -->
     <td class=no> &middot; <!-- E-mail -->
     <td class=no> &middot; <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=no> &middot; <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

   <tbody><tr><th colspan=14 scope=rowgroup>Events

    <tr><th> <span title=""><code title=event-input-input><a href=#event-input-input>input</a></code> event</span>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=yes> Yes     <!-- Color -->
     <td class=no> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot;      Radio Button -->
     <td class=no> &middot; <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

    <tr><th> <span title=""><code title=event-input-change><a href=#event-input-change>change</a></code> event</span>
     <td class=no> &middot; <!-- Hidden -->
     <td class=yes> Yes     <!-- Text -->
<!-- <td class="yes"> Yes          Search -->
<!-- <td class="yes"> Yes          URL -->
     <td class=yes> Yes     <!-- E-mail -->
     <td class=yes> Yes     <!-- Password -->
     <td class=yes> Yes     <!-- Date and Time -->
<!-- <td class="yes"> Yes          Date -->
<!-- <td class="yes"> Yes          Month -->
<!-- <td class="yes"> Yes          Week -->
<!-- <td class="yes"> Yes          Time -->
     <td class=yes> Yes     <!-- Local Date and Time -->
<!-- <td class="yes"> Yes          Number -->
     <td class=yes> Yes     <!-- Range -->
     <td class=yes> Yes     <!-- Color -->
     <td class=yes> Yes     <!-- Checkbox -->
<!-- <td class="yes"> Yes          Radio Button -->
     <td class=yes> Yes     <!-- File Upload -->
     <td class=no> &middot; <!-- Submit Button -->
     <td class=no> &middot; <!-- Image Button -->
     <td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot;      Button -->

  </table><div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute changes state, and
  when the element is first created, the element's rendering and
  behavior must change to the new state's accordingly and the
  <dfn id=value-sanitization-algorithm>value sanitization algorithm</dfn>, if one is defined for the
  <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's new state,
  must be invoked.</p>

  <p>Each <code><a href=#the-input-element>input</a></code> element has a <a href=#concept-fe-value title=concept-fe-value>value</a>, which is exposed by the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute. Some states
  define an <dfn id=concept-input-value-string-number title=concept-input-value-string-number>algorithm
  to convert a string to a number</dfn>, an <dfn id=concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</dfn>, an <dfn id=concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
  string to a <code>Date</code> object</dfn>, and an <dfn id=concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
  <code>Date</code> object to a string</dfn>, which are used by
  <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
  <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
  <code title=attr-input-step><a href=#attr-input-step>step</a></code>,
  <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
  <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>,
  <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
  <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>.</p>

  <p>Each <code><a href=#the-input-element>input</a></code> element has a boolean <dfn id=concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</dfn>. When
  it is true, the element is said to have a <dfn id=concept-input-value-dirty title=concept-input-value-dirty><i>dirty value</i></dfn>. The
  <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a>
  must be initially set to false when the element is created, and must
  be set to true whenever the user interacts with the control in a way
  that changes the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  </div>

  <p>The <dfn id=attr-input-value title=attr-input-value><code>value</code></dfn>
  content attribute gives the default <a href=#concept-fe-value title=concept-fe-value>value</a> of the <code><a href=#the-input-element>input</a></code>
  element. <span class=impl>When the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute is added,
  set, or removed, if the control does not have a <i title=concept-input-value-dirty><a href=#concept-input-value-dirty>dirty value</a></i>, the user agent
  must set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the
  element to the value of the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute, if there is
  one, or the empty string otherwise, and then run the current
  <a href=#value-sanitization-algorithm>value sanitization algorithm</a>, if one is
  defined.</span></p>

  <div class=impl>

  <p>Each <code><a href=#the-input-element>input</a></code> element has a <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>, which is exposed by
  the <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code> IDL
  attribute.</p>

  <p>Each <code><a href=#the-input-element>input</a></code> element has a boolean <dfn id=concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
  flag</dfn>. When it is true, the element is said to have a <dfn id=concept-input-checked-dirty title=concept-input-checked-dirty><i>dirty
  checkedness</i></dfn>. The <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
  flag</a> must be initially set to false when the element is
  created, and must be set to true whenever the user interacts with
  the control in a way that changes the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>.</p>

  </div>

  <p>The <dfn id=attr-input-checked title=attr-input-checked><code>checked</code></dfn>
  content attribute is a <a href=#boolean-attribute>boolean attribute</a> that gives the
  default <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the
  <code><a href=#the-input-element>input</a></code> element. <span class=impl>When the <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code> content attribute is
  added, if the control does not have <i title=concept-input-checked-dirty><a href=#concept-input-checked-dirty>dirty checkedness</a></i>, the user
  agent must set the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the element to
  true; when the <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>
  content attribute is removed, if the control does not have <i title=concept-input-checked-dirty><a href=#concept-input-checked-dirty>dirty checkedness</a></i>, the user
  agent must set the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the element to
  false.</span></p>

  <div class=impl>

  <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
  algorithm</a> for <code><a href=#the-input-element>input</a></code> elements is to set the <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a> and
  <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
  flag</a> back to false, set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element to the value of
  the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute,
  if there is one, or the empty string otherwise, set the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the element to true
  if the element has a <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>
  content attribute and false if it does not, and then invoke the
  <a href=#value-sanitization-algorithm>value sanitization algorithm</a>, if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
  defines one.</p>

  <p>Each <code><a href=#the-input-element>input</a></code> element is either <dfn id=concept-input-mutable title=concept-input-mutable><i>mutable</i></dfn> or <dfn id=concept-input-immutable title=concept-input-immutable><i>immutable</i></dfn>. Except where
  otherwise specified, an <code><a href=#the-input-element>input</a></code> element is always <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>. Similarly, except where
  otherwise specified, the user agent should not allow the user to
  modify the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or
  <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>.</p>

  <p>When an <code><a href=#the-input-element>input</a></code> element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, it is <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>.</p>

  <p>When an <code><a href=#the-input-element>input</a></code> element does not have a
  <code><a href=#document>Document</a></code> node as one of its ancestors (i.e. when it is
  not in the document), it is <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>.</p> <!-- XBL2 spec
  point -->

  <p class=note>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute can also in
  some cases (e.g. for the <a href=#date-state title=attr-input-type-date>Date</a> state, but not the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state) make an
  <code><a href=#the-input-element>input</a></code> element <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>.</p>

  <p>When an <code><a href=#the-input-element>input</a></code> element is cloned, the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a>,
  <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>, and <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
  flag</a> must be propagated to the clone when it is created.</p>

  </div>

  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-input-element>input</a></code> element with its
  <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
  attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
  attribute controls focus.</p>

  <div class=impl>

  <p>The <dfn id=dom-input-indeterminate title=dom-input-indeterminate><code>indeterminate</code></dfn> IDL
  attribute must initially be set to false. On getting, it must return
  the last value it was set to. On setting, it must be set to the new
  value. It has no effect except for changing the appearance of <a href=#checkbox-state title=attr-input-type-checkbox>checkbox</a> controls.</p>

  <p>The <dfn id=dom-input-accept title=dom-input-accept><code>accept</code></dfn>, <dfn id=dom-input-alt title=dom-input-alt><code>alt</code></dfn>, <dfn id=dom-input-autocomplete title=dom-input-autocomplete><code>autocomplete</code></dfn>, <dfn id=dom-input-max title=dom-input-max><code>max</code></dfn>, <dfn id=dom-input-min title=dom-input-min><code>min</code></dfn>, <dfn id=dom-input-multiple title=dom-input-multiple><code>multiple</code></dfn>, <dfn id=dom-input-pattern title=dom-input-pattern><code>pattern</code></dfn>, <dfn id=dom-input-placeholder title=dom-input-placeholder><code>placeholder</code></dfn>, <dfn id=dom-input-required title=dom-input-required><code>required</code></dfn>, <dfn id=dom-input-size title=dom-input-size><code>size</code></dfn>, <dfn id=dom-input-src title=dom-input-src><code>src</code></dfn>, <dfn id=dom-input-step title=dom-input-step><code>step</code></dfn>, and <dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> IDL attributes must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name. The <dfn id=dom-input-maxlength title=dom-input-maxLength><code>maxLength</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> content attribute,
  <a href=#limited-to-only-non-negative-numbers>limited to only non-negative numbers</a>. The <dfn id=dom-input-readonly title=dom-input-readOnly><code>readOnly</code></dfn> IDL attribute
  must <a href=#reflect>reflect</a> the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> content attribute. The
  <dfn id=dom-input-defaultchecked title=dom-input-defaultChecked><code>defaultChecked</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code> content attribute. The
  <dfn id=dom-input-defaultvalue title=dom-input-defaultValue><code>defaultValue</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute.</p>

  <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
  attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
  methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
  <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
  of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>, <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
  <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
  and <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
  methods and attributes expose the element's text selection. The
  <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div>



  <h5 id=states-of-the-type-attribute><span class=secno>4.10.7.1 </span>States of the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute</h5>


  <h6 id=hidden-state><span class=secno>4.10.7.1.1 </span><dfn title=attr-input-type-hidden>Hidden</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state, the rules in
  this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a value
  that is not intended to be examined or manipulated by the user.</p>

  <div class=impl>

  <p><strong>Constraint validation</strong>: If an <code><a href=#the-input-element>input</a></code>
  element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
  the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state, it is
  <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>

  </div>

  <p>If the <code title=attr-input-value><a href=#attr-input-value>name</a></code> attribute is
  present and has a value that is a <a href=#case-sensitive>case-sensitive</a> match
  for the string "<code title="">_charset_</code>", then the element's
  <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute must be
  omitted.</p>

  <div class=bookkeeping>

   <p>The
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>
   IDL attribute applies to this element and is
   in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

  </div>


  <h6 id=text-state-and-search-state><span class=secno>4.10.7.1.2 </span><dfn title=attr-input-type-text>Text</dfn> state and <dfn title=attr-input-type-search>Search</dfn> state</h6>

  <!-- v2 idea: applying input masks to <input>, e.g. for entering
       data with slashes and dashes (ack Greg Kilwein)
  -->

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state or the <a href=#text-state-and-search-state title=attr-input-type-search>Search</a> state, the rules in
  this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a one line
  plain text edit control for the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  <p class=note>The difference between the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state and the <a href=#text-state-and-search-state title=attr-input-type-search>Search</a> state is primarily
  stylistic: on platforms where search fields are distinguished from
  regular text fields, the <a href=#text-state-and-search-state title=attr-input-type-search>Search</a> state might result in
  an appearance consistent with the platform's search fields rather
  than appearing like a regular text field.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  its <a href=#concept-fe-value title=concept-fe-value>value</a> should be editable
  by the user. User agents must not allow users to insert U+000A LINE
  FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the
  element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that contains no U+000A LINE FEED (LF)
  or U+000D CARRIAGE RETURN (CR) characters.</p>

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id=telephone-state><span class=secno>4.10.7.1.3 </span><dfn title=attr-input-type-tel>Telephone</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#telephone-state title=attr-input-type-tel>Telephone</a> state, the rules in
  this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for editing a telephone number given in the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  its <a href=#concept-fe-value title=concept-fe-value>value</a> should be editable
  by the user. User agents may change the punctuation of <a href=#concept-fe-value title=concept-fe-value>values</a> that the user enters. User
  agents must not allow users to insert U+000A LINE FEED (LF) or
  U+000D CARRIAGE RETURN (CR) characters into the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that contains no U+000A LINE FEED (LF)
  or U+000D CARRIAGE RETURN (CR) characters.</p>

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  </div>

  <p class=note>Unlike the <a href=#url-state title=attr-input-type-url>URL</a> and <a href=#e-mail-state title=attr-input-type-email>E-mail</a> types, the <a href=#telephone-state title=attr-input-type-tel>Telephone</a> type does not enforce a
  particular syntax. This is intentional; in practice, telephone
  number fields tend to be free-form fields, because there are a wide
  variety of valid phone numbers. Systems that need to enforce a
  particular format are encouraged to use the <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute or the <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method
  to hook into the client-side validation mechanism.</p>


  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id=url-state><span class=secno>4.10.7.1.4 </span><dfn title=attr-input-type-url>URL</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#url-state title=attr-input-type-url>URL</a> state, the rules in this
  section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for editing a single <a href=#absolute-url>absolute URL</a> given in the
  element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the URL represented
  by its <a href=#concept-fe-value title=concept-fe-value>value</a>. User agents may
  allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
  <a href=#valid-url title="valid URL">valid</a> <a href=#absolute-url>absolute URL</a>, but
  may also or instead automatically escape characters entered by the
  user so that the <a href=#concept-fe-value title=concept-fe-value>value</a> is
  always a <a href=#valid-url title="valid URL">valid</a> <a href=#absolute-url>absolute
  URL</a> (even if that isn't the actual value seen and edited by
  the user in the interface). User agents should allow the user to set
  the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty
  string. User agents must not allow users to insert U+000A LINE FEED
  (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially
  surrounded by spaces</a> that is also an <a href=#absolute-url>absolute
  URL</a>.</p>

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>, then <a href=#strip-leading-and-trailing-whitespace>strip leading and
  trailing whitespace</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  <p><strong>Constraint validation</strong>: While the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element is not a <a href=#valid-url title="valid URL">valid</a> <a href=#absolute-url>absolute URL</a>, the
  element is <a href=#suffering-from-a-type-mismatch>suffering from a type mismatch</a>.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>If a document contained the following markup:</p>

   <pre>&lt;input type="url" name="location" list="urls"&gt;
&lt;datalist id="urls"&gt;
 &lt;option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045"&gt;
 &lt;option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/"&gt;
 &lt;option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint"&gt;
 &lt;option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/"&gt;
 &lt;option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html"&gt;
 &lt;option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/"&gt;
&lt;/datalist&gt;
</pre>

   <p>...and the user had typed "<kbd>www.w3</kbd>", and the user
   agent had also found that the user had visited
   <code>http://www.w3.org/Consortium/#membership</code> and
   <code>http://www.w3.org/TR/XForms/</code> in the recent past, then
   the rendering might look like this:</p>

   <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' src=images/sample-url.png></p>

   <p>The first four URIs in this sample consist of the four URIs in
   the author-specified list that match the text the user has entered,
   sorted lexically. Note how the UA is using the knowledge that the
   values are URIs to allow the user to omit the scheme part and
   perform intelligent matching on the domain name.</p>

   <p>The last two URIs (and probably many more, given the scrollbar's
   indications of more values being available) are the matches from
   the user agent's session history data. This data is not made
   available to the page DOM. In this particular case, the UA has no
   titles to provide for those values.</p>

  </div>


  <h6 id=e-mail-state><span class=secno>4.10.7.1.5 </span><dfn title=attr-input-type-email>E-mail</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#e-mail-state title=attr-input-type-email>E-mail</a> state, the rules in this
  section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for editing a list of e-mail addresses given in the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the e-mail addresses
  represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>. If
  the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is
  specified, then the user agent should allow the user to select or
  provide multiple addresses; otherwise, the user agent should act in
  a manner consistent with expecting the user to provide a single
  e-mail address. User agents may allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
  <a href=#valid-e-mail-address-list>valid e-mail address list</a>. User agents should allow the
  user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the
  empty string. User agents must not allow users to insert U+000A LINE
  FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href=#concept-fe-value title=concept-fe-value>value</a>. User agents may transform the
  <a href=#concept-fe-value title=concept-fe-value>value</a> for display and editing
  (e.g. converting punycode in the <a href=#concept-fe-value title=concept-fe-value>value</a> to IDN in the display and vice
  versa).</p>

  </div>

  <p>If the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>
  attribute is specified on the element, then the <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if specified, must
  have a value that is a <a href=#valid-e-mail-address-list>valid e-mail address list</a>;
  otherwise, the <code title=attr-input-value><a href=#attr-input-value>value</a></code>
  attribute, if specified, must have a value that is a single
  <a href=#valid-e-mail-address>valid e-mail address</a>.</p>

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  <p><strong>Constraint validation</strong>: If the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is specified
  on the element, then, while the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element is not a
  <a href=#valid-e-mail-address-list>valid e-mail address list</a>, the element is
  <a href=#suffering-from-a-type-mismatch>suffering from a type mismatch</a>; otherwise, while the
  <a href=#concept-fe-value title=concept-fe-value>value</a> of the element is not a
  single <a href=#valid-e-mail-address>valid e-mail address</a>, the element is
  <a href=#suffering-from-a-type-mismatch>suffering from a type mismatch</a>.</p>

  </div>

  <p>A <dfn id=valid-e-mail-address-list>valid e-mail address list</dfn> is a <a href=#set-of-comma-separated-tokens>set of
  comma-separated tokens</a>, where each token is itself a
  <a href=#valid-e-mail-address>valid e-mail address</a>. <span class=impl>To obtain the
  list of tokens from a <a href=#valid-e-mail-address-list>valid e-mail address list</a>, the
  user agent must <a href=#split-a-string-on-commas title="split a string on commas">split the
  string on commas</a>.</span></p>

  <p>A <dfn id=valid-e-mail-address>valid e-mail address</dfn> is a string that matches the
  ABNF production <code title="">1*(&nbsp;atext&nbsp;/&nbsp;"."&nbsp;)&nbsp;"@"&nbsp;ldh-str&nbsp;1*(&nbsp;"."&nbsp;ldh-str&nbsp;)</code>
  where <code title="">atext</code> is defined in RFC 5322 section
  3.2.3, and <code title="">ldh-str</code> is defined in RFC 1034
  section 3.5. <a href=#refsABNF>[ABNF]</a> <a href=#refsRFC5322>[RFC5322]</a> <a href=#refsRFC1034>[RFC1034]</a></p> <!-- Domain syntax based on
  section 3.5 of [RFC1034] and section 2.1 of [RFC1123] -->

  <p class=note>This requirement is a <a href=#willful-violation>willful violation</a>
  of RFC 5322, which defines a syntax for e-mail addresses that is
  simultaneously too strict (before the "@" character), too vague
  (after the "@" character), and too lax (allowing comments, white
  space characters, and quoted strings in manners unfamiliar to most
  users) to be of practical use here.</p>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id=password-state><span class=secno>4.10.7.1.6 </span><dfn title=attr-input-type-password>Password</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#password-state title=attr-input-type-password>Password</a> state, the rules in
  this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a one line
  plain text edit control for the element's <a href=#concept-fe-value title=concept-fe-value>value</a>. The user agent should obscure
  the value so that people other than the user cannot see it.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  its <a href=#concept-fe-value title=concept-fe-value>value</a> should be editable
  by the user. User agents must not allow users to insert U+000A LINE
  FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that contains no U+000A LINE FEED (LF)
  or U+000D CARRIAGE RETURN (CR) characters.</p>

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>, and
   <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id=date-and-time-state><span class=secno>4.10.7.1.7 </span><dfn title=attr-input-type-datetime>Date and Time</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a> state, the
  rules in this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
  specific <a href=#concept-datetime title=concept-datetime>global date and
  time</a>. <span class=impl>User agents may display the date and
  time in whatever time zone is appropriate for the user.</span></p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the <a href=#concept-datetime title=concept-datetime>global date and time</a> represented by
  its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by
  <a href=#parse-a-global-date-and-time-string title="parse a global date and time string">parsing a global
  date and time</a> from it. User agents must not allow the user to
  set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that
  is not a <a href=#valid-global-date-and-time-string>valid global date and time string</a> expressed in
  UTC, though user agents may allow the user to set and view the time
  in another time zone and silently translate the time to and from the
  UTC time zone in the <a href=#concept-fe-value title=concept-fe-value>value</a>. If
  the user agent provides a user interface for selecting a <a href=#concept-datetime title=concept-datetime>global date and time</a>, then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to a <a href=#valid-global-date-and-time-string>valid
  global date and time string</a> expressed in UTC representing the
  user's selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-global-date-and-time-string>valid global date and
  time string</a>.</p> <!-- ok to set out-of-range value, we never
  know when we might have to represent bogus input -->

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element is a <a href=#valid-global-date-and-time-string>valid global date and time string</a>,
  then adjust the time so that the <a href=#concept-fe-value title=concept-fe-value>value</a> represents the same point in
  time but expressed in the UTC time zone, otherwise, set it to the
  empty string instead.</p>

  </div>

  <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-global-date-and-time-string>valid global date and
  time string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a href=#valid-global-date-and-time-string>valid
  global date and time string</a>.</p>

  <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
  expressed in seconds. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is 1000
  (which converts the seconds to milliseconds, as used in the other
  algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 60
  seconds.</p>

  <div class=impl>

  <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
  the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-datetime title=concept-datetime>global date and time</a> for which the
  element would not <a href=#suffering-from-a-step-mismatch title="suffering from a step
  mismatch">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href=#parse-a-global-date-and-time-string title="parse a global date and time
  string">parsing a global date and time</a> from <var title="">input</var> results in an error, then return an error;
  otherwise, return the number of milliseconds elapsed from midnight
  UTC on the morning of 1970-01-01 (the time represented by the value
  "<code title="">1970-01-01T00:00:00.0Z</code>") to the parsed <a href=#concept-datetime title=concept-datetime>global date and time</a>, ignoring leap
  seconds.</p>

  <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href=#valid-global-date-and-time-string>valid global date and time
  string</a> expressed in UTC that represents the <a href=#concept-datetime title=concept-datetime>global date and time</a> that is <var title="">input</var> milliseconds after midnight UTC on the morning
  of 1970-01-01 (the time represented by the value "<code title="">1970-01-01T00:00:00.0Z</code>").</p>

  <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-global-date-and-time-string title="parse
  a global date and time string">parsing a global date and time</a>
  from <var title="">input</var> results in an error, then return an
  error; otherwise, return a <code>Date</code> object representing the
  parsed <a href=#concept-datetime title=concept-datetime>global date and time</a>,
  expressed in UTC.</p>

  <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href=#valid-global-date-and-time-string>valid global date and time
  string</a> expressed in UTC that represents the <a href=#concept-datetime title=concept-datetime>global date and time</a> that is
  represented by <var title="">input</var>.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>The following fragment shows part of a calendar application. A
   user can specify a date and time for a meeting (in his local time
   zone, probably, though the user agent can allow the user to change
   that), and since the submitted data includes the time-zone offset,
   the application can ensure that the meeting is shown at the correct
   time regardless of the time zones used by all the participants.</p>

   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Add Meeting&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Meeting name: &lt;input type=text name="meeting.label"&gt;&lt;/label&gt;
 &lt;p&gt;&lt;label&gt;Meeting time: &lt;input type=datetime name="meeting.start"&gt;&lt;/label&gt;
&lt;/fieldset&gt;</pre>

   <p>Had the application used the <code title=attr-input-type-datetime-local><a href=#local-date-and-time-state>datetime-local</a></code> type
   instead, the calendar application would have also had to explicitly
   determine which time zone the user intended.</p>

  </div>


  <h6 id=date-state><span class=secno>4.10.7.1.8 </span><dfn title=attr-input-type-date>Date</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-state title=attr-input-type-date>Date</a> state, the rules in this
  section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
  specific <a href=#concept-date title=concept-date>date</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the <a href=#concept-date title=concept-date>date</a> represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by <a href=#parse-a-date-string title="parse a date string">parsing a date</a> from it. User
  agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
  <a href=#valid-date-string>valid date string</a>. If the user agent provides a user
  interface for selecting a <a href=#concept-date title=concept-date>date</a>,
  then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to
  a <a href=#valid-date-string>valid date string</a> representing the user's
  selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-date-string>valid date
  string</a>.</p> <!-- ok to set out-of-range value, we never know
  when we might have to represent bogus input -->

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element is not a <a href=#valid-date-string>valid date string</a>, then set it
  to the empty string instead.</p>

  </div>

  <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-date-string>valid date
  string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a href=#valid-date-string>valid
  date string</a>.</p>

  <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
  expressed in days. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is
  86,400,000 (which converts the days to milliseconds, as used in the
  other algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 1 day.</p>

  <div class=impl>

  <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
  the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-date title=concept-date>date</a> for which the element would not
  <a href=#suffering-from-a-step-mismatch title="suffering from a step mismatch">suffer from a step
  mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href=#parse-a-date-string title="parse a date string">parsing
  a date</a> from <var title="">input</var> results in an error,
  then return an error; otherwise, return the number of milliseconds
  elapsed from midnight UTC on the morning of 1970-01-01 (the time
  represented by the value "<code title="">1970-01-01T00:00:00.0Z</code>") to midnight UTC on the
  morning of the parsed <a href=#concept-date title=concept-date>date</a>,
  ignoring leap seconds.</p>

  <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href=#valid-date-string>valid date string</a> that
  represents the <a href=#concept-date title=concept-date>date</a> that, in UTC,
  is current <var title="">input</var> milliseconds after midnight UTC
  on the morning of 1970-01-01 (the time represented by the value
  "<code title="">1970-01-01T00:00:00.0Z</code>").</p>

  <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-date-string title="parse
  a date string">parsing a date</a> from <var title="">input</var>
  results in an error, then return an error; otherwise, return a
  <code>Date</code> object representing midnight UTC on the morning of
  the parsed <a href=#concept-date title=concept-date>date</a>.</p>

  <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href=#valid-date-string>valid date string</a> that
  represents the <a href=#concept-date title=concept-date>date</a> current at the
  time represented by <var title="">input</var> in the UTC
  time zone.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id=month-state><span class=secno>4.10.7.1.9 </span><dfn title=attr-input-type-month>Month</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#month-state title=attr-input-type-month>Month</a> state, the rules in this
  section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
  specific <a href=#concept-month title=concept-month>month</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the <a href=#concept-month title=concept-month>month</a> represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by <a href=#parse-a-month-string title="parse a month string">parsing a month</a> from it. User
  agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
  <a href=#valid-month-string>valid month string</a>. If the user agent provides a user
  interface for selecting a <a href=#concept-month title=concept-month>month</a>,
  then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to
  a <a href=#valid-month-string>valid month string</a> representing the user's
  selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-month-string>valid month
  string</a>.</p> <!-- ok to set out-of-range value, we never know
  when we might have to represent bogus input -->

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element is not a <a href=#valid-month-string>valid month string</a>, then set it
  to the empty string instead.</p>

  </div>

  <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-month-string>valid month
  string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a href=#valid-month-string>valid
  month string</a>.</p>

  <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
  expressed in months. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is 1
  (there is no conversion needed as the algorithms use months).</span>
  The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is
  1 month.</p>

  <div class=impl>

  <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
  the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-month title=concept-month>month</a> for which the element would not
  <a href=#suffering-from-a-step-mismatch title="suffering from a step mismatch">suffer from a step
  mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href=#parse-a-month-string title="parse a month
  string">parsing a month</a> from <var title="">input</var>
  results in an error, then return an error; otherwise, return the
  number of months between January 1970 and the parsed <a href=#concept-month title=concept-month>month</a>.</p>

  <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href=#valid-month-string>valid month string</a>
  that represents the <a href=#concept-month title=concept-month>month</a> that
  has <var title="">input</var> months between it and January
  1970.</p>

  <!-- note - it doesn't matter exactly how many months are "between"
  two months, so long as the UA implements this consistently. The
  number is never actually exposed. -->

  <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-month-string title="parse
  a month string">parsing a month</a> from <var title="">input</var> results in an error, then return an error;
  otherwise, return a <code>Date</code> object representing midnight
  UTC on the morning of the first day of the parsed <a href=#concept-month title=concept-month>month</a>.</p>

  <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href=#valid-month-string>valid month string</a> that
  represents the <a href=#concept-month title=concept-month>month</a> current at
  the time represented by <var title="">input</var> in the UTC
  time zone.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id=week-state><span class=secno>4.10.7.1.10 </span><dfn title=attr-input-type-week>Week</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#week-state title=attr-input-type-week>Week</a> state, the rules in this
  section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
  specific <a href=#concept-week title=concept-week>week</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the <a href=#concept-week title=concept-week>week</a> represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by <a href=#parse-a-week-string title="parse a week string">parsing a week</a> from it. User
  agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
  <a href=#valid-week-string>valid week string</a>. If the user agent provides a user
  interface for selecting a <a href=#concept-week title=concept-week>week</a>,
  then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to
  a <a href=#valid-week-string>valid week string</a> representing the user's
  selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-week-string>valid week
  string</a>.</p> <!-- ok to set out-of-range value, we never know
  when we might have to represent bogus input -->

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element is not a <a href=#valid-week-string>valid week string</a>, then set it
  to the empty string instead.</p>

  </div>

  <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-week-string>valid week
  string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a href=#valid-week-string>valid
  week string</a>.</p>

  <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
  expressed in weeks. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is
  604,800,000 (which converts the weeks to milliseconds, as used in
  the other algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 1
  week. <span class=impl>The <a href=#concept-input-step-default-base title=concept-input-step-default-base>default step base</a> is
  &minus;259,200,000 (the start of week 1970-W01).</span></p>

  <div class=impl>

  <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
  the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-week title=concept-week>week</a> for which the element would not
  <a href=#suffering-from-a-step-mismatch title="suffering from a step mismatch">suffer from a step
  mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href=#parse-a-week-string title="parse a week string">parsing
  a week string</a> from <var title="">input</var> results in an
  error, then return an error; otherwise, return the number of
  milliseconds elapsed from midnight UTC on the morning of 1970-01-01
  (the time represented by the value "<code title="">1970-01-01T00:00:00.0Z</code>") to midnight UTC on the
  morning of the Monday of the parsed <a href=#concept-week title=concept-week>week</a>, ignoring leap seconds.</p>

  <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href=#valid-week-string>valid week string</a> that
  represents the <a href=#concept-week title=concept-week>week</a> that, in UTC,
  is current <var title="">input</var> milliseconds after midnight UTC
  on the morning of 1970-01-01 (the time represented by the value
  "<code title="">1970-01-01T00:00:00.0Z</code>").</p>

  <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-week-string title="parse
  a week string">parsing a week</a> from <var title="">input</var>
  results in an error, then return an error; otherwise, return a
  <code>Date</code> object representing midnight UTC on the morning of
  the Monday of the parsed <a href=#concept-week title=concept-week>week</a>.</p>

  <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href=#valid-week-string>valid week string</a> that
  represents the <a href=#concept-week title=concept-week>week</a> current at the
  time represented by <var title="">input</var> in the UTC
  time zone.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id=time-state><span class=secno>4.10.7.1.11 </span><dfn title=attr-input-type-time>Time</dfn> state</h6>

  <!-- v2: allow min="" and max="" to be set such that the range
  crosses midnight, as in <input type=time min="23:00" max="02:00">
  (from http://www.w3.org/Bugs/Public/show_bug.cgi?id=7688) -->

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#time-state title=attr-input-type-time>Time</a> state, the rules in this
  section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
  specific <a href=#concept-time title=concept-time>time</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the <a href=#concept-time title=concept-time>time</a> represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by <a href=#parse-a-time-string title="parse a time string">parsing a time</a> from it. User
  agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
  <a href=#valid-time-string>valid time string</a>. If the user agent provides a user
  interface for selecting a <a href=#concept-time title=concept-time>time</a>,
  then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to
  a <a href=#valid-time-string>valid time string</a> representing the user's
  selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-time-string>valid time
  string</a>.</p> <!-- ok to set out-of-range value, we never know
  when we might have to represent bogus input -->

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element is not a <a href=#valid-time-string>valid time string</a>, then set it
  to the empty string instead.</p>

  </div>

  <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-time-string>valid time
  string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a href=#valid-time-string>valid
  time string</a>.</p>

  <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
  expressed in seconds. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is 1000
  (which converts the seconds to milliseconds, as used in the other
  algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 60
  seconds.</p>

  <div class=impl>

  <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
  the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-time title=concept-time>time</a> for which the element would not
  <a href=#suffering-from-a-step-mismatch title="suffering from a step mismatch">suffer from a step
  mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href=#parse-a-time-string title="parse a time string">parsing
  a time</a> from <var title="">input</var> results in an error,
  then return an error; otherwise, return the number of milliseconds
  elapsed from midnight to the parsed <a href=#concept-time title=concept-time>time</a> on a day with no time changes.</p>

  <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href=#valid-time-string>valid time string</a> that
  represents the <a href=#concept-time title=concept-time>time</a> that is <var title="">input</var> milliseconds after midnight on a day with no
  time changes.</p>

  <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-time-string title="parse
  a time string">parsing a time</a> from <var title="">input</var>
  results in an error, then return an error; otherwise, return a
  <code>Date</code> object representing the parsed <a href=#concept-time title=concept-time>time</a> in UTC on 1970-01-01.</p>

  <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href=#valid-time-string>valid time string</a> that
  represents the UTC <a href=#concept-time title=concept-time>time</a> component
  that is represented by <var title="">input</var>.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id=local-date-and-time-state><span class=secno>4.10.7.1.12 </span><dfn title=attr-input-type-datetime-local>Local Date and Time</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>
  state, the rules in this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
  <a href=#concept-datetime-local title=concept-datetime-local>local date and time</a>,
  with no time-zone offset information.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the <a href=#concept-datetime-local title=concept-datetime-local>date and time</a> represented by
  its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by
  <a href=#parse-a-local-date-and-time-string title="parse a local date and time string">parsing a date and
  time</a> from it. User agents must not allow the user to set the
  <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not
  a <a href=#valid-local-date-and-time-string>valid local date and time string</a>. If the user agent
  provides a user interface for selecting a <a href=#concept-datetime-local title=concept-datetime-local>local date and time</a>, then the
  <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to a
  <a href=#valid-local-date-and-time-string>valid local date and time string</a> representing the
  user's selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-local-date-and-time-string>valid local date and
  time string</a>.</p> <!-- ok to set out-of-range value, we never
  know when we might have to represent bogus input -->

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element is not a <a href=#valid-local-date-and-time-string>valid local date and time
  string</a>, then set it to the empty string instead.</p>

  </div>

  <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-local-date-and-time-string>valid local date and
  time string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a href=#valid-local-date-and-time-string>valid
  local date and time string</a>.</p>

  <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
  expressed in seconds. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is 1000
  (which converts the seconds to milliseconds, as used in the other
  algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 60
  seconds.</p>

  <div class=impl>

  <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
  the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-datetime-local title=concept-datetime-local>local date and time</a> for which
  the element would not <a href=#suffering-from-a-step-mismatch title="suffering from a step
  mismatch">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href=#parse-a-local-date-and-time-string title="parse a local date and time
  string">parsing a date and time</a> from <var title="">input</var> results in an error, then return an error;
  otherwise, return the number of milliseconds elapsed from midnight
  on the morning of 1970-01-01 (the time represented by the value
  "<code title="">1970-01-01T00:00:00.0</code>") to the parsed <a href=#concept-datetime-local title=concept-datetime-local>local date and time</a>, ignoring
  leap seconds.</p>

  <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href=#valid-local-date-and-time-string>valid local date and time
  string</a> that represents the date and time that is <var title="">input</var> milliseconds after midnight on the morning of
  1970-01-01 (the time represented by the value "<code title="">1970-01-01T00:00:00.0</code>").</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>The following example shows part of a flight booking
   application. The application uses an <code><a href=#the-input-element>input</a></code> element
   with its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to
   <code title=attr-input-type-datetime-local><a href=#local-date-and-time-state>datetime-local</a></code>,
   and it then interprets the given date and time in the time zone of
   the selected airport.</p>

   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Destination&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Airport: &lt;input type=text name=to list=airports&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Departure time: &lt;input type=datetime-local name=totime step=3600&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;datalist id=airports&gt;
 &lt;option value=ATL label="Atlanta"&gt;
 &lt;option value=MEM label="Memphis"&gt;
 &lt;option value=LHR label="London Heathrow"&gt;
 &lt;option value=LAX label="Los Angeles"&gt;
 &lt;option value=FRA label="Frankfurt"&gt;
&lt;/datalist&gt;</pre>

   <p>If the application instead used the <code title=attr-input-type-datetime><a href=#date-and-time-state>datetime</a></code> type, then the
   user would have to work out the time-zone conversions himself,
   which is clearly not a good user experience!</p>

  </div>


  <h6 id=number-state><span class=secno>4.10.7.1.13 </span><dfn title=attr-input-type-number>Number</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#number-state title=attr-input-type-number>Number</a> state, the rules in
  this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
  number.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the number
  represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as
  obtained from applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point
  number values</a> to it. User agents must not allow the user to
  set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that
  is not a <a href=#valid-floating-point-number>valid floating point number</a>. If the user agent
  provides a user interface for selecting a number, then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to the <a href=#best-representation-of-the-number-as-a-floating-point-number title="best representation of the number as a floating point
  number">best representation of the number representing the user's
  selection as a floating point number</a>. User agents should
  allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-floating-point-number>valid floating point
  number</a>.</p> <!-- ok to set out-of-range value, we never know
  when we might have to represent bogus input -->

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element is not a <a href=#valid-floating-point-number>valid floating point number</a>,
  then set it to the empty string instead.</p>

  </div>

  <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-floating-point-number>valid floating point
  number</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a href=#valid-floating-point-number>valid
  floating point number</a>.</p>

  <p><span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is
  1.</span> The <a href=#concept-input-step-default title=concept-input-step-default>default
  step</a> is 1 (allowing only integers, unless the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute has a non-integer
  value).</p>

  <div class=impl>

  <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
  the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest number for
  which the element would not <a href=#suffering-from-a-step-mismatch title="suffering from a step
  mismatch">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing
  floating point number values</a> to <var title="">input</var>
  results in an error, then return an error; otherwise, return the
  resulting number.</p>

  <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href=#valid-floating-point-number>valid floating point
  number</a> that represents <var title="">input</var>.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id=range-state><span class=secno>4.10.7.1.14 </span><dfn title=attr-input-type-range>Range</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, the rules in this
  section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
  number, but with the caveat that the exact value is not important,
  letting UAs provide a simpler interface than they do for the <a href=#number-state title=attr-input-type-number>Number</a> state.</p>

  <div class=impl>

  <p class=note>In this state, the range and step constraints are
  enforced even during user input, and there is no way to set the
  value to the empty string.</p>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the number
  represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as
  obtained from applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point
  number values</a> to it. User agents must not allow the user to
  set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that
  is not a <a href=#valid-floating-point-number>valid floating point number</a>. If the user agent
  provides a user interface for selecting a number, then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to a <a href=#best-representation-of-the-number-as-a-floating-point-number title="best representation of the number as a floating point
  number">best representation of the number representing the user's
  selection as a floating point number</a>. User agents must not
  allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-floating-point-number>valid floating point
  number</a>.</p> <!-- ok to set out-of-range value, we never know
  when we might have to represent bogus input -->

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element is not a <a href=#valid-floating-point-number>valid floating point number</a>,
  then set it to a <a href=#valid-floating-point-number>valid floating point number</a> that
  represents the <a href=#concept-input-value-default-range title=concept-input-value-default-range>default value</a>.</p>

  </div>

  <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-floating-point-number>valid floating point
  number</a>. The <a href=#concept-input-min-default title=concept-input-min-default>default
  minimum</a> is 0. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a href=#valid-floating-point-number>valid
  floating point number</a>. The <a href=#concept-input-max-default title=concept-input-max-default>default maximum</a> is 100.</p>

  <p>The <dfn id=concept-input-value-default-range title=concept-input-value-default-range>default
  value</dfn> is the <a href=#concept-input-min title=concept-input-min>minimum</a>
  plus half the difference between the <a href=#concept-input-min title=concept-input-min>minimum</a> and the <a href=#concept-input-max title=concept-input-max>maximum</a>, unless the <a href=#concept-input-max title=concept-input-max>maximum</a> is less than the <a href=#concept-input-min title=concept-input-min>minimum</a>, in which case the <a href=#concept-input-value-default-range title=concept-input-value-default-range>default value</a> is
  the <a href=#concept-input-min title=concept-input-min>minimum</a>.</p>

  <div class=impl>

  <p>When the element is <a href=#suffering-from-an-underflow>suffering from an
  underflow</a>, the user agent must set the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a <a href=#valid-floating-point-number>valid floating point
  number</a> that represents the <a href=#concept-input-min title=concept-input-min>minimum</a>.</p>

  <p>When the element is <a href=#suffering-from-an-overflow>suffering from an overflow</a>,
  if the <a href=#concept-input-max title=concept-input-max>maximum</a> is not less
  than the <a href=#concept-input-min title=concept-input-min>minimum</a>, the user
  agent must set the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a <a href=#valid-floating-point-number>valid floating point
  number</a> that represents the <a href=#concept-input-max title=concept-input-max>maximum</a>.</p>

  </div>

  <p><span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is
  1.</span> The <a href=#concept-input-step-default title=concept-input-step-default>default
  step</a> is 1 (allowing only integers, unless the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute has a non-integer
  value).</p>

  <div class=impl>

  <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
  the user agent must round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest number for
  which the element would not <a href=#suffering-from-a-step-mismatch title="suffering from a step
  mismatch">suffer from a step mismatch</a>, and which is greater
  than or equal to the <a href=#concept-input-min title=concept-input-min>minimum</a>,
  and, if the <a href=#concept-input-max title=concept-input-max>maximum</a> is not
  less than the <a href=#concept-input-min title=concept-input-min>minimum</a>, which
  is less than or equal to the <a href=#concept-input-max title=concept-input-max>maximum</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing
  floating point number values</a> to <var title="">input</var>
  results in an error, then return an error; otherwise, return the
  resulting number.</p>

  <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href=#valid-floating-point-number>valid floating point
  number</a> that represents <var title="">input</var>.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code title=attr-input-min><a href=#attr-input-min>min</a></code>, and
   <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>Here is an example of a range control using an autocomplete list
   with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This
   could be useful if there are values along the full range of the
   control that are especially important, such as preconfigured light
   levels or typical speed limits in a range control used as a speed
   control. The following markup fragment:</p>

   <pre>&lt;input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"&gt;
&lt;datalist id="powers"&gt;
 &lt;option value="0"&gt;
 &lt;option value="-30"&gt;
 &lt;option value="30"&gt;
 &lt;option value="+50"&gt;
&lt;/datalist&gt;
</pre>

   <p>...with the following style sheet applied:</p>

   <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>

   <p>...might render as:</p>

   <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." src=images/sample-range.png><p>Note how the UA determined the orientation of the control from
   the ratio of the style-sheet-specified height and width properties.
   The colors were similiarly derived from the style sheet. The tick
   marks, however, were derived from the markup. In particular, the
   <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not
   affected the placement of tick marks, the UA deciding to only use
   the author-specified completion values and then adding longer tick
   marks at the extremes.</p>

   <p>Note also how the invalid value <code title="">+50</code> was
   completely ignored.</p>

  </div>

  <div class=example>

   <p>For another example, consider the following markup fragment:</p>

   <pre>&lt;input name=x type=range min=100 max=700 step=9.09090909 value=509.090909&gt;</pre>

   <p>A user agent could display in a variety of ways, for instance:</p>

   <p><img alt="As a dial." src=images/sample-range-2a.png></p>

   <p>Or, alternatively, for instance:</p>

   <p><img alt="As a long horizontal slider with tick marks." src=images/sample-range-2b.png></p>

   <p>The user agent could pick which one to display based on the
   dimensions given in the style sheet. This would allow it to
   maintain the same resolution for the tick marks, despite the
   differences in width.</p>

  </div>



  <h6 id=color-state><span class=secno>4.10.7.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, the rules in this
  section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a color
  well control, for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
  <a href=#simple-color>simple color</a>.</p>

  <div class=impl>

  <p class=note>In this state, there is always a color picked, and
  there is no way to set the value to the empty string.</p>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the color represented
  by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained from
  applying the <a href=#rules-for-parsing-simple-color-values>rules for parsing simple color values</a> to
  it. User agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
  <a href=#valid-lowercase-simple-color>valid lowercase simple color</a>. If the user agent
  provides a user interface for selecting a color, then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to the result of
  using the <a href=#rules-for-serializing-simple-color-values>rules for serializing simple color values</a> to
  the user's selection. User agents must not allow the user to set the
  <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>

  </div>

  <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-simple-color>valid simple
  color</a>.</p>

  <div class=impl>

  <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
  follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element is a <a href=#valid-simple-color>valid simple color</a>, then set it to
  the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element
  <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>; otherwise, set it to the string
  "<code title="">#000000</code>".</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code> and
   <code title=attr-input-list><a href=#attr-input-list>list</a></code> content attributes;
   <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code title=dom-input-value><a href=#dom-input-value>value</a></code>, and
   <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>

   <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id=checkbox-state><span class=secno>4.10.7.1.16 </span><dfn title=attr-input-type-checkbox>Checkbox</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, the rules in
  this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a
  two-state control that represents the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state. If the
  element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state
  is true, the control represents a positive selection, and if it is
  false, a negative selection. If the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
  is set to true, then the control's selection should be obscured as
  if the control was in a third, indeterminate, state.</p>

  <p class=note>The control is never a true tri-state control, even
  if the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
  is set to true. The <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
  only gives the appearance of a third state.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  then: The <a href=#pre-click-activation-steps>pre-click activation steps</a> consist of setting
  the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
  its opposite value (i.e. true if it is false, false if it is true),
  and of setting the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
  to false. The <a href=#canceled-activation-steps>canceled activation steps</a> consist of
  setting the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> and
  the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
  back to the values they had before the <a href=#pre-click-activation-steps>pre-click activation
  steps</a> were run. The <a href=#activation-behavior>activation behavior</a> is to
  <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at the element<!-- It's not
  cancelable. Once this fires, the control is checked, end of
  story. -->, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
  element's <a href=#form-owner>form owner</a>.</p>

  <p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and its <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is false, then the
  element is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p>

  </div>

  <dl class=domintro><dt><var title="">input</var> . <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>When set, overrides the rendering of <a href=#checkbox-state title=attr-input-type-checkbox>checkbox</a> controls so that
    the current value is not visible.</p>

   </dd>

  </dl><div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes and IDL attributes apply to the element:
   <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, and
   <code title=attr-input-required><a href=#attr-input-required>required</a></code> content attributes;
   <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code> and
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-default-on title=dom-input-value-default-on>default/on</a>.</p>

   <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event applies.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> event does not apply.</p>

  </div>



  <h6 id=radio-button-state><span class=secno>4.10.7.1.17 </span><dfn title=attr-input-type-radio>Radio Button</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, the rules
  in this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
  that, when used in conjunction with other <code><a href=#the-input-element>input</a></code>
  elements, forms a <i><a href=#radio-button-group>radio button group</a></i> in which only one
  control can have its <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state set to true. If
  the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>
  state is true, the control represents the selected control in the
  group, and if it is false, it indicates a control in the group that
  is not selected.</p>

  <p>The <dfn id=radio-button-group><i>radio button group</i></dfn> that contains an
  <code><a href=#the-input-element>input</a></code> element <var title="">a</var> also contains all
  the other <code><a href=#the-input-element>input</a></code> elements <var title="">b</var> that
  fulfill all of the following conditions:</p>

  <ul><li>The <code><a href=#the-input-element>input</a></code> element <var title="">b</var>'s <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state.</li>

   <li>Either <var title="">a</var> and <var title="">b</var> have the
   same <a href=#form-owner>form owner</a>, or they both have no <a href=#form-owner>form
   owner</a>.</li>

   <li>They both have a <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   attribute, and the value of <var title="">a</var>'s <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute is a
   <a href=#compatibility-caseless>compatibility caseless</a> match for the value of <var title="">b</var>'s <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   attribute.</li>

  </ul><p>A document must not contain an <code><a href=#the-input-element>input</a></code> element whose
  <i><a href=#radio-button-group>radio button group</a></i> contains only that element.</p>

  <div class=impl>

  <p>When any of the following events occur, if the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is true after
  the event, the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state of all the
  other elements in the same <i><a href=#radio-button-group>radio button group</a></i> must be set to
  false:</p>

  <ul><li>The element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is set to
   true (for whatever reason).</li>

   <li>The element's <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   attribute is added, removed, or changes value.</li>

   <li>The element's <a href=#form-owner>form owner</a> changes.</li>

  </ul><p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  then: The <a href=#pre-click-activation-steps>pre-click activation steps</a> consist of setting
  the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
  true. The <a href=#canceled-activation-steps>canceled activation steps</a> consist of setting
  the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
  false. The <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a
  simple event</a> that bubbles named <code title=event-change>change</code> at the element<!-- It's not
  cancelable. Once this fires, the control is checked, end of
  story. -->, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
  element's <a href=#form-owner>form owner</a>.</p>

  <p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and all of the
  <code><a href=#the-input-element>input</a></code> elements in the <i><a href=#radio-button-group>radio button group</a></i> have a
  <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> that is
  false, then the element is <a href=#suffering-from-being-missing>suffering from being
  missing</a>.</p>

  </div>

  <p class=note>If none of the radio buttons in a <a href=#radio-button-group>radio button
  group</a> are checked when they are inserted into the document,
  then they will all be initially unchecked in the interface, until
  such time as one of them is checked (either by the user or by
  script).</p>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes and IDL attributes apply to the element:
   <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code> and
   <code title=attr-input-required><a href=#attr-input-required>required</a></code> content attributes;
   <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code> and
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-default-on title=dom-input-value-default-on>default/on</a>.</p>

   <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event applies.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> event does not apply.</p>

  </div>



  <h6 id=file-upload-state><span class=secno>4.10.7.1.18 </span><dfn title=attr-input-type-file>File Upload</dfn> state</h6>

  <!-- v2 ideas:
   * maximum height/width or required ratio for image uploads? - Leons Petrazickis
   * maximum per-file upload size - Alfonso Mart&iacute;nez de Lizarrondo
  -->

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, the rules in this
  section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a list of
  <dfn id=concept-input-type-file-selected title=concept-input-type-file-selected>selected files</dfn>,
  each file consisting of a file name, a file type, and a file body
  (the contents of the file).</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to change the files on the
  list, e.g. adding or removing files. Files can be from the
  filesystem or created on the fly, e.g. a picture taken from a camera
  connected to the user's device.</p>

  <p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> is
  empty, then the element is <a href=#suffering-from-being-missing>suffering from being
  missing</a>.</p>

  <p>Unless the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>
  attribute is set, there must be no more than one file in the list of
  <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected
  files</a>.</p>

  </div>

  <hr><p>The <dfn id=attr-input-accept title=attr-input-accept><code>accept</code></dfn>
  attribute may be specified to provide user agents with a hint of
  what file types the server will be able to accept.</p>

  <p>If specified, the attribute must consist of a <a href=#set-of-comma-separated-tokens>set of
  comma-separated tokens</a>, each of which must be an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> match for one of the following:</p>

  <dl><dt>The string <code title="">audio/*</code></dt>

   <dd>Indicates that sound files are accepted.</dd>

   <dt>The string <code title="">video/*</code></dt>

   <dd>Indicates that video files are accepted.</dd>

   <dt>The string <code title="">image/*</code></dt>

   <dd>Indicates that image files are accepted.</dd>

   <dt>A <a href=#valid-mime-type-with-no-parameters>valid MIME type with no parameters</a></dt>

   <dd>Indicates that files of the specified type are accepted.</dd>

  </dl><p>The tokens must not be <a href=#ascii-case-insensitive>ASCII case-insensitive</a>
  matches for any of the other tokens (i.e. duplicates are not
  allowed). <span class=impl>To obtain the list of tokens from the
  attribute, the user agent must <a href=#split-a-string-on-commas title="split a string on
  commas">split the attribute value on commas</a>.</span></p>

  <div class=impl>

  <p>User agents should prevent the user from selecting files that are
  not accepted by one (or more) of these tokens.</p>

  </div>

  <div class=example>

   <p>For historical reasons, the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute prefixes the
   filename with the string "<code title="">C:\fakepath\</code>". Some
   legacy user agents actually included the full path (which was a
   security vulnerability). As a result of this, obtaining the
   filename from the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL
   attribute in a backwards-compatible way is non-trivial. The
   following function extracts the filename in a suitably compatible
   manner:</p>

   <pre>function extractFilename(path) {<!--
  if (path.substr(0, 12) == "C:\\fakepath\\")
    return path.substr(12);-->
  var x;
  x = path.lastIndexOf('\\');
  if (x &gt;= 0) // Windows-based path
    return path.substr(x+1);
  x = path.lastIndexOf('/');
  if (x &gt;= 0) // Unix-based path
    return path.substr(x+1);
  return path; // just the filename
}</pre>

   <p>This can be used as follows:</p>

   <pre>&lt;p&gt;&lt;input type=file name=image onchange="updateFilename(this.value)"&gt;&lt;/p&gt;
&lt;p&gt;The name of the file you picked is: &lt;span id="filename"&gt;(none)&lt;/span&gt;&lt;/p&gt;
&lt;script&gt;
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
 }
&lt;/script&gt;</pre>

   <!-- How useful this actually is... is unclear. -->

  </div>

  <hr><div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes apply to the element:

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes and IDL attributes apply to the element:
   <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>, and
   <code title=attr-input-required><a href=#attr-input-required>required</a></code>;
   <code title=dom-input-files><a href=#dom-input-files>files</a></code> and
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-filename title=dom-input-value-filename>filename</a>.</p>

   <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event applies.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The element's <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   attribute must be omitted.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> event does not apply.</p>

  </div>



  <h6 id=submit-button-state><span class=secno>4.10.7.1.19 </span><dfn title=attr-input-type-submit>Submit Button</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> state, the rules
  in this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a button
  that, when activated, submits the form. <span class=impl>If the
  element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute,
  the button's label must be the value of that attribute; otherwise,
  it must be an implementation-defined string that means "Submit" or
  some such.</span> The element is a <a href=#concept-button title=concept-button>button</a>, specifically a <a href=#concept-submit-button title=concept-submit-button>submit button</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to activate the element.</p>

  <p>The element's <a href=#activation-behavior>activation behavior</a>, if the element
  has a <a href=#form-owner>form owner</a>, is to <a href=#concept-form-submit title=concept-form-submit>submit</a> the <a href=#form-owner>form
  owner</a> from the <code><a href=#the-input-element>input</a></code> element; otherwise, it is
  to do nothing.</p>

  </div>

  <p>The <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attributes are <a href=#attributes-for-form-submission>attributes
  for form submission</a>.</p>

  <p class=note>The <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code> attribute can
  be used to make submit buttons that do not trigger the constraint
  validation.</p>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes and IDL attributes apply to the element:
   <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and
   <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> content attributes;
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

  </div>


  <h6 id=image-button-state><span class=secno>4.10.7.1.20 </span><dfn title=attr-input-type-image>Image Button</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, the rules
  in this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> either an
  image from which a user can select a coordinate and submit the form,
  or alternatively a button from which the user can submit the
  form. The element is a <a href=#concept-button title=concept-button>button</a>,
  specifically a <a href=#concept-submit-button title=concept-submit-button>submit
  button</a>.</p>

  <hr><p>The image is given by the <dfn id=attr-input-src title=attr-input-src><code>src</code></dfn> attribute. The <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute must be present, and
  must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a> referencing a non-interactive, optionally animated,
  image resource that is neither paged nor scripted.</p>

  <div class=impl>

  <p>When any of the following events occur, unless the user agent
  cannot support images, or its support for images has been disabled,
  or the user agent only fetches elements on demand, or the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute's value is the empty
  string, the user agent must <a href=#resolve-a-url title="resolve a
  url">resolve</a> the value of the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute, relative to the
  element, and if that is successful, must <a href=#fetch>fetch</a> the
  resulting <a href=#absolute-url>absolute URL</a>:</p> <!-- Note how this does NOT
  happen when the base URL changes. --> <!-- http-origin privacy
  sensitive -->

  <ul><li>The <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is first set to the
   <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
   (possibly when the element is first created), and the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is present.</li>

   <li>The <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is changed back to
   the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state,
   and the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is
   present, and its value has changed since the last time the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute was in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state.</li>

   <li>The <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, and the
   <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is set or
   changed.</li>

  </ul><!-- same text in <img> section and similar text elsewhere --><p>Fetching the image must <a href=#delay-the-load-event>delay the load event</a> of the
  element's document until the <a href=#concept-task title=concept-task>task</a>
  that is <a href=#queue-a-task title="queue a task">queued</a> by the
  <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> (defined below) has been run.</p>

  <p>If the image was successfully obtained, with no network errors,
  and the image's type is a supported image type, and the image is a
  valid image of that type, then the image is said to be <dfn id=input-img-available title=input-img-available><i>available</i></dfn>. If this is true
  before the image is completely downloaded, each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
  task">queued</a> by the <a href=#networking-task-source>networking task source</a> while
  the image is being <a href=#fetch title=fetch>fetched</a> must update
  the presentation of the image appropriately.</p>

  <p>The user agents should apply the <a href=#content-type-sniffing:-image title="Content-Type
  sniffing: image">image sniffing rules</a> to determine the type
  of the image, with the image's <a href=#content-type title=Content-Type>associated
  Content-Type headers</a> giving the <var title="">official
  type</var>. If these rules are not applied, then the type of the
  image must be the type given by the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a>.</p>

  <p>User agents must not support non-image resources with the
  <code><a href=#the-input-element>input</a></code> element. User agents must not run executable code
  embedded in the image resource. User agents must only display the
  first page of a multipage resource. User agents must not allow the
  resource to act in an interactive fashion, but should honor any
  animation in the resource.</p>

  <p>The <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task
  source</a> once the resource has been <a href=#fetch title=fetch>fetched</a>, must, if the download was successful
  and the image is <i title=input-img-available><a href=#input-img-available>available</a></i>,
  <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named
  <code title=event-load>load</code> at the <code><a href=#the-input-element>input</a></code>
  element; and otherwise, if the fetching process fails without a
  response from the remote server, or completes but the image is not a
  valid or supported image, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a
  simple event</a> named <code title=event-error>error</code> on
  the <code><a href=#the-input-element>input</a></code> element.</p>

  <hr></div>

  <p>The <dfn id=attr-input-alt title=attr-input-alt><code>alt</code></dfn> attribute
  provides the textual label for the alternative button for users and
  user agents who cannot use the image. The <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code> attribute must also be present,
  and must contain a non-empty string.</p>

  <p>The <code><a href=#the-input-element>input</a></code> element supports <a href=#dimension-attributes>dimension
  attributes</a>.</p>

  <div class=impl>

  <hr><p>If the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is set,
  and the image is <i title=input-img-available><a href=#input-img-available>available</a></i> and
  the user agent is configured to display that image, then: The
  element <a href=#represents>represents</a> a control for selecting a <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a> from
  the image specified by the <code title=attr-input-src><a href=#attr-input-src>src</a></code>
  attribute; if the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, the user agent should
  allow the user to select this <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a>. The
  <a href=#activation-behavior>activation behavior</a> in this case consists of taking the
  user's selected <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a>, and
  then, if the element has a <a href=#form-owner>form owner</a>, <a href=#concept-form-submit title=concept-form-submit>submitting</a> the <code><a href=#the-input-element>input</a></code>
  element's <a href=#form-owner>form owner</a> from the <code><a href=#the-input-element>input</a></code>
  element. If the user activates the control without explicitly
  selecting a coordinate, then the coordinate (0,0) must be
  assumed.</p>

  <p>Otherwise, the element <a href=#represents>represents</a> a submit button
  whose label is given by the value of the <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code> attribute; if the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, the user agent should
  allow the user to activate the button. The <a href=#activation-behavior>activation
  behavior</a> in this case consists of setting the <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
  coordinate</a> to (0,0), and then, if the element has a
  <a href=#form-owner>form owner</a>, <a href=#concept-form-submit title=concept-form-submit>submitting</a> the <code><a href=#the-input-element>input</a></code>
  element's <a href=#form-owner>form owner</a> from the <code><a href=#the-input-element>input</a></code>
  element.</p>

  <p>The <dfn id=concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
  coordinate</dfn> must consist of an <var title="">x</var>-component
  and a <var title="">y</var>-component. The coordinates represent the
  position relative to the edge of the image, with the coordinate
  space having the positive <var title="">x</var> direction to the
  right, and the positive <var title="">y</var> direction
  downwards.</p>

  <p>The <var title="">x</var>-component must be a <a href=#valid-integer>valid
  integer</a> representing a number <var title="">x</var> in the
  range <span title="">&minus;(<var title="">border<sub title="">left</sub></var>+<var title="">padding<sub title="">left</sub></var>) &le; <var title="">x</var> &le; <var title="">width</var>+<var title="">border<sub title="">right</sub></var>+<var title="">padding<sub title="">right</sub></var></span>, where <var title="">width</var>
  is the rendered width of the image, <var title="">border<sub title="">left</sub></var> is the width of the border on the left of
  the image, <var title="">padding<sub title="">left</sub></var> is
  the width of the padding on the left of the image, <var title="">border<sub title="">right</sub></var> is the width of the
  border on the right of the image, and <var title="">padding<sub title="">right</sub></var> is the width of the padding on the right
  of the image, with all dimensions given in CSS pixels.</p>

  <p>The <var title="">y</var>-component must be a <a href=#valid-integer>valid
  integer</a> representing a number <var title="">y</var> in the
  range <span title="">&minus;(<var title="">border<sub title="">top</sub></var>+<var title="">padding<sub title="">top</sub></var>) &le; <var title="">y</var> &le; <var title="">height</var>+<var title="">border<sub title="">bottom</sub></var>+<var title="">padding<sub title="">bottom</sub></var></span>, where <var title="">height</var>
  is the rendered height of the image, <var title="">border<sub title="">top</sub></var> is the width of the border above the image,
  <var title="">padding<sub title="">top</sub></var> is the width of
  the padding above the image, <var title="">border<sub title="">bottom</sub></var> is the width of the border below the
  image, and <var title="">padding<sub title="">bottom</sub></var> is
  the width of the padding below the image, with all dimensions given
  in CSS pixels.</p>

  <p>Where a border or padding is missing, its width is zero CSS
  pixels.</p>

  <hr></div>

  <p>The <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attributes are <a href=#attributes-for-form-submission>attributes
  for form submission</a>.</p>

  <div class=bookkeeping>

   <p>The following common <code><a href=#the-input-element>input</a></code> element content
   attributes and IDL attributes apply to the element:
   <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> content attributes;
   <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute.</p>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>, and
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>.</p>

   <p>The element's <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   attribute must be omitted.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

  </div>

  <p class=note>Many aspects of this state's behavior are similar to
  the behavior of the <code><a href=#the-img-element>img</a></code> element. Readers are encouraged
  to read that section, where many of the same requirements are
  described in more detail.</p>



  <h6 id=reset-button-state><span class=secno>4.10.7.1.21 </span><dfn title=attr-input-type-reset>Reset Button</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a> state, the rules
  in this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a button
  that, when activated, resets the form. <span class=impl>If the
  element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute,
  the button's label must be the value of that attribute; otherwise,
  it must be an implementation-defined string that means "Reset" or
  some such.</span> The element is a <a href=#concept-button title=concept-button>button</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to activate the element.</p>

  <p>The element's <a href=#activation-behavior>activation behavior</a>, if the element
  has a <a href=#form-owner>form owner</a>, is to <a href=#concept-form-reset title=concept-form-reset>reset</a> the <a href=#form-owner>form owner</a>;
  otherwise, it is to do nothing.</p>

  <p><strong>Constraint validation</strong>: The element is
  <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>

  </div>

  <div class=bookkeeping>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute
   applies to this element and is in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

  </div>


  <h6 id=button-state><span class=secno>4.10.7.1.22 </span><dfn title=attr-input-type-button>Button</dfn> state</h6>

  <div class=impl>

  <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#button-state title=attr-input-type-button>Button</a> state, the rules in
  this section apply.</p>

  </div>

  <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a button
  with no default behavior. <span class=impl>If the element has a
  <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, the button's
  label must be the value of that attribute; otherwise, it must be the
  empty string.</span> The element is a <a href=#concept-button title=concept-button>button</a>.</p>

  <div class=impl>

  <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
  the user agent should allow the user to activate the element. The
  element's <a href=#activation-behavior>activation behavior</a> is to do nothing.</p>

  <p><strong>Constraint validation</strong>: The element is
  <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>

  </div>

  <div class=bookkeeping>

   <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute
   applies to this element and is in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

  </div>



  <h5 id=common-input-element-attributes><span class=secno>4.10.7.2 </span>Common <code><a href=#the-input-element>input</a></code> element attributes</h5>

  <div class=impl>

  <p>These attributes only apply to an <code><a href=#the-input-element>input</a></code> element if
  its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in a
  state whose definition declares that the attribute applies. When an
  attribute doesn't apply to an <code><a href=#the-input-element>input</a></code> element, user
  agents must <a href=#ignore>ignore</a> the attribute, regardless of the
  requirements and definitions below.</p>

  </div>


  <h6 id=the-autocomplete-attribute><span class=secno>4.10.7.2.1 </span>The <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code> attribute</h6>

  <p>User agents sometimes have features for helping users fill forms
  in, for example prefilling the user's address based on earlier user
  input.</p>

  <p>The <dfn id=attr-input-autocomplete title=attr-input-autocomplete><code>autocomplete</code></dfn>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The attribute has
  three states. The <code title=attr-input-autocomplete-on>on</code>
  keyword maps to the <dfn id=attr-input-autocomplete-on-state title=attr-input-autocomplete-on-state>on</dfn> state, and the
  <code title=attr-input-autocomplete-off>off</code> keyword maps to
  the <dfn id=attr-input-autocomplete-off-state title=attr-input-autocomplete-off-state>off</dfn>
  state. The attribute may also be omitted. The <i>missing value
  default</i> is the <dfn id=attr-input-autocomplete-default-state title=attr-input-autocomplete-default-state>default</dfn>
  state.</p>

  <p>The <a href=#attr-input-autocomplete-off-state title=attr-input-autocomplete-off-state>off</a>
  state indicates either that the control's input data is particularly
  sensitive (for example the activation code for a nuclear weapon); or
  that it is a value that will never be reused (for example a
  one-time-key for a bank login) and the user will therefore have to
  explicitly enter the data each time, instead of being able to rely
  on the UA to prefill the value for him; or that the document
  provides its own autocomplete mechanism and does not want the user
  agent to provide autocompletion values.</p>

  <p>Conversely, the <a href=#attr-input-autocomplete-on-state title=attr-input-autocomplete-on-state>on</a> state indicates
  that the value is not particularly sensitive and the user can expect
  to be able to rely on his user agent to remember values he has
  entered for that control.</p>

  <p>The <a href=#attr-input-autocomplete-default-state title=attr-input-autocomplete-default-state>default</a> state
  indicates that the user agent is to use the <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute on the
  element's <a href=#form-owner>form owner</a> instead. (By default, the <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute of
  <code><a href=#the-form-element>form</a></code> elements is in the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a> state.)</p>

  <div class=impl>

  <p>Each <code><a href=#the-input-element>input</a></code> element has a <dfn id=resulting-autocompletion-state>resulting
  autocompletion state</dfn>, which is either <i title="">on</i> or <i title="">off</i>.</p>

  <p>When an <code><a href=#the-input-element>input</a></code> element is in one of the following
  conditions, the <code><a href=#the-input-element>input</a></code> element's <a href=#resulting-autocompletion-state>resulting
  autocompletion state</a> is <i title="">on</i>; otherwise, the
  <code><a href=#the-input-element>input</a></code> element's <a href=#resulting-autocompletion-state>resulting autocompletion
  state</a> is <i title="">off</i>:</p>

  <ul class=brief><li>Its <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>
   attribute is in the <a href=#attr-input-autocomplete-on-state title=attr-input-autocomplete-on-state>on</a> state.</li>

   <li>Its <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>
   attribute is in the <a href=#attr-input-autocomplete-default-state title=attr-input-autocomplete-default-state>default</a> state,
   and the element has no <a href=#form-owner>form owner</a>.</li>

   <li>Its <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>
   attribute is in the <a href=#attr-input-autocomplete-default-state title=attr-input-autocomplete-default-state>default</a> state,
   and the element's <a href=#form-owner>form owner</a>'s <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute is in
   the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a>
   state.</li>

  </ul><p>When an <code><a href=#the-input-element>input</a></code> element's <a href=#resulting-autocompletion-state>resulting
  autocompletion state</a> is <i title="">on</i>, the user agent
  may store the value entered by the user so that if the user returns
  to the page, the UA can prefill the form. Otherwise, the user agent
  should not remember the control's <a href=#concept-fe-value title=concept-fe-value>value</a>, and should not offer past
  values to the user.</p>

  <p>In addition, if the <a href=#resulting-autocompletion-state>resulting autocompletion state</a>
  is <i title="">off</i>, <a href=#history-autocomplete>values are
  reset</a> when <a href=#traverse-the-history title="traverse the history">traversing the
  history</a>.</p>

  <p>The autocompletion mechanism must be implemented by the user
  agent acting as if the user had modified the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, and must be done at a time
  where the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>
  (e.g. just after the element has been inserted into the document, or
  when the user agent <a href=#stop-parsing title="stop parsing">stops
  parsing</a>).</p>

  </div>

  <div class=example>

   <p>Banks frequently do not want UAs to prefill login
   information:</p>

   <pre>&lt;p&gt;&lt;label&gt;Account: &lt;input type="text" name="ac" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;PIN: &lt;input type="password" name="pin" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

  </div>

  <div class=impl>

  <p>A user agent may allow the user to override the <a href=#resulting-autocompletion-state>resulting
  autocompletion state</a> and set it to always <i title="">on</i>,
  always allowing values to be remembered and prefilled), or always <i title="">off</i>, never remembering values. However, the ability to
  override the <a href=#resulting-autocompletion-state>resulting autocompletion state</a> to <i title="">on</i> should not be trivially accessible, as there are
  significant security implications for the user if all values are
  always remembered, regardless of the site's preferences.</p>

  </div>



  <h6 id=the-list-attribute><span class=secno>4.10.7.2.2 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>

  <p>The <dfn id=attr-input-list title=attr-input-list><code>list</code></dfn>
  attribute is used to identify an element that lists predefined
  options suggested to the user.</p>

  <p>If present, its value must be the ID of a <code><a href=#the-datalist-element>datalist</a></code>
  element in the same document.</p>

  <div class=impl>

  <p>The <dfn id=concept-input-list title=concept-input-list>suggestions source
  element</dfn> is the first element in the document in <a href=#tree-order>tree
  order</a> to have an ID equal to the value of the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute, if that element is a
  <code><a href=#the-datalist-element>datalist</a></code> element. If there is no <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute, or if there is no
  element with that ID, or if the first element with that ID is not a
  <code><a href=#the-datalist-element>datalist</a></code> element, then there is no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>.</p>

  <p>If there is a <a href=#concept-input-list title=concept-input-list>suggestions source
  element</a>, then, when the user agent is allowing the user to
  edit the <code><a href=#the-input-element>input</a></code> element's <a href=#concept-fe-value title=concept-fe-value>value</a>, the user agent should offer
  the suggestions represented by the <a href=#concept-input-list title=concept-input-list>suggestions source element</a> to the
  user in a manner suitable for the type of control used. The user
  agent may use the suggestion's <a href=#concept-option-label title=concept-option-label>label</a> to identify the suggestion
  if appropriate. If the user selects a suggestion, then the
  <code><a href=#the-input-element>input</a></code> element's <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to the selected
  suggestion's <a href=#concept-option-value title=concept-option-value>value</a>, as if
  the user had written that value himself.</p>

  <p>User agents must filter the suggestions to hide suggestions that
  the user would not be allowed to enter as the <code><a href=#the-input-element>input</a></code>
  element's <a href=#concept-fe-value title=concept-fe-value>value</a>, and should
  filter the suggestions to hide suggestions that would cause the
  element to not <a href=#concept-fv-valid title=concept-fv-valid>satisfy its
  constraints</a>.</p>

  <hr><p>If the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute does
  not apply, there is no <a href=#concept-input-list title=concept-input-list>suggestions
  source element</a>.</p>

  </div>

  <div class=example>

   <p>This URL field offers some suggestions.</p>

   <pre>&lt;label&gt;Homepage: &lt;input name=hp type=url list=hpurls&gt;&lt;/label&gt;
&lt;datalist id=hpurls&gt;
 &lt;option value="http://www.google.com/" label="Google"&gt;
 &lt;option value="http://www.reddit.com/" label="Reddit"&gt;
&lt;/datalist&gt;</pre>

   <p>Other URLs from the user's history might show also; this is up
   to the user agent.</p>

  </div>

  <div class=example>

   <p>This example demonstrates how to design a form that uses the
   autocompletion list feature while still degrading usefully in
   legacy user agents.</p>

   <p>If the autocompletion list is merely an aid, and is not
   important to the content, then simply using a <code><a href=#the-datalist-element>datalist</a></code>
   element with children <code><a href=#the-option-element>option</a></code> elements is enough. To
   prevent the values from being rendered in legacy user agents, they
   should be placed inside the <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute instead of
   inline.</p>

   <pre>&lt;p&gt;
 &lt;label&gt;
  Enter a breed:
  &lt;input type="text" name="breed" list="breeds"&gt;
  &lt;datalist id="breeds"&gt;
   &lt;option value="Abyssinian"&gt;
   &lt;option value="Alpaca"&gt;
   &lt;!-- ... --&gt;
  &lt;/datalist&gt;
 &lt;/label&gt;
&lt;/p&gt;</pre>

   <p>However, if the values need to be shown in legacy UAs, then
   fallback content can be placed inside the <code><a href=#the-datalist-element>datalist</a></code>
   element, as follows:</p>

   <pre>&lt;p&gt;
 &lt;label&gt;
  Enter a breed:
  &lt;input type="text" name="breed" list="breeds"&gt;
 &lt;/label&gt;
 &lt;datalist id="breeds"&gt;
  &lt;label&gt;
   or select one from the list:
   &lt;select name="breed"&gt;
    &lt;option value=""&gt; (none selected)
    &lt;option&gt;Abyssinian
    &lt;option&gt;Alpaca
    &lt;!-- ... --&gt;
   &lt;/select&gt;
  &lt;/label&gt;
 &lt;/datalist&gt;
&lt;/p&gt;
</pre>

   <p>The fallback content will only be shown in UAs that don't
   support <code><a href=#the-datalist-element>datalist</a></code>. The options, on the other hand, will
   be detected by all UAs, even though they are not direct children of
   the <code><a href=#the-datalist-element>datalist</a></code> element.</p>

   <p>Note that if an <code><a href=#the-option-element>option</a></code> element used in a
   <code><a href=#the-datalist-element>datalist</a></code> is <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code>, it will be selected
   by default by legacy UAs (because it affects the
   <code><a href=#the-select-element>select</a></code>), but it will not have any effect on the
   <code><a href=#the-input-element>input</a></code> element in UAs that support
   <code><a href=#the-datalist-element>datalist</a></code>.</p>

  </div>



  <h6 id=the-readonly-attribute><span class=secno>4.10.7.2.3 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>

  <p>The <dfn id=attr-input-readonly title=attr-input-readonly><code>readonly</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a> that controls whether
  or not the use can edit the form control. <span class=impl>When
  specified, the element is <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>.</span></p>

  <div class=impl>

  <p><strong>Constraint validation</strong>: If the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute is specified
  on an <code><a href=#the-input-element>input</a></code> element, the element is <a href=#barred-from-constraint-validation>barred from
  constraint validation</a>.</p>

  </div>

  <div class=example>

   <p>In the following example, the existing product identifiers
   cannot be modified, but they are still displayed as part of the
   form, for consistency with the row representing a new product
   (where the identifier is not yet filled in).</p>

   <pre>&lt;form action="products.cgi" method=post enctype="multipart/form-data"&gt;
 &lt;table&gt;
  &lt;tr&gt; &lt;th&gt; Product ID &lt;th&gt; Product name &lt;th&gt; Price &lt;th&gt; Action
  &lt;tr&gt;
   &lt;td&gt; &lt;input readonly name="1.pid" value="H412"&gt;
   &lt;td&gt; &lt;input required name="1.pname" value="Floor lamp Ulke"&gt;
   &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="1.pprice" value="49.99"&gt;
   &lt;td&gt; &lt;button formnovalidate name="action" value="delete:1"&gt;Delete&lt;/button&gt;
  &lt;tr&gt;
   &lt;td&gt; &lt;input readonly name="2.pid" value="FG28"&gt;
   &lt;td&gt; &lt;input required name="2.pname" value="Table lamp Ulke"&gt;
   &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="2.pprice" value="24.99"&gt;
   &lt;td&gt; &lt;button formnovalidate name="action" value="delete:2"&gt;Delete&lt;/button&gt;
  &lt;tr&gt;
   &lt;td&gt; &lt;input required name="3.pid" value="" pattern="[A-Z0-9]+"&gt;
   &lt;td&gt; &lt;input required name="3.pname" value=""&gt;
   &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="3.pprice" value=""&gt;
   &lt;td&gt; &lt;button formnovalidate name="action" value="delete:3"&gt;Delete&lt;/button&gt;
 &lt;/table&gt;
 &lt;p&gt; &lt;button formnovalidate name="action" value="add"&gt;Add&lt;/button&gt; &lt;/p&gt;
 &lt;p&gt; &lt;button name="action" value="update"&gt;Save&lt;/button&gt; &lt;/p&gt;
&lt;/form&gt;</pre>

  </div>



  <h6 id=the-size-attribute><span class=secno>4.10.7.2.4 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>

  <p>The <dfn id=attr-input-size title=attr-input-size><code>size</code></dfn>
  attribute gives the number of characters that, in a visual
  rendering, the user agent is to allow the user to see while editing
  the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  <p>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-non-negative-integer>valid non-negative
  integer</a> greater than zero.</p>

  <div class=impl>

  <p>If the attribute is present, then its value must be parsed using
  the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>, and if the
  result is a number greater than zero, then the user agent should
  ensure that at least that many characters are visible.</p>

  <p>The <code title=dom-input-size><a href=#dom-input-size>size</a></code> IDL attribute is
  <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative numbers greater than
  zero</a>.</p>

  </div>



  <h6 id=the-required-attribute><span class=secno>4.10.7.2.5 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>

  <p>The <dfn id=attr-input-required title=attr-input-required><code>required</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the
  element is <dfn id=concept-input-required title=concept-input-required><i>required</i></dfn>.</p>

  <div class=impl>

  <p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i>, and its <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute applies and is in
  the mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>, and the
  element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, and the
  element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty
  string, then the element is <a href=#suffering-from-being-missing>suffering from being
  missing</a>.</p>

  </div>

  <div class=example>

   <p>The following form has two required fields, one for an e-mail
   address and one for a password. It also has a third field that is
   only considerd valid if the user types the same password in the
   password field and this third field.</p>

   <pre>&lt;h1&gt;Create new account&lt;/h1&gt;
&lt;form action="/newaccount" method=post&gt;
 &lt;p&gt;
  &lt;label for="username"&gt;E-mail address:&lt;/label&gt;
  &lt;input id="username" type=email required name=un&gt;
 &lt;p&gt;
  &lt;label for="password1"&gt;Password:&lt;/label&gt;
  &lt;input id="password1" type=password required name=up&gt;
 &lt;p&gt;
  &lt;label for="password2"&gt;Confirm password:&lt;/label&gt;
  &lt;input id="password2" type=password onforminput="setCustomValidity(value != password1.value ? 'Passwords do not match.' : '')"&gt;
 &lt;p&gt;
  &lt;input type=submit value="Create account"&gt;
&lt;/form&gt;</pre>

  </div>


  <h6 id=the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>

  <p>The <dfn id=attr-input-multiple title=attr-input-multiple><code>multiple</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a> that indicates whether
  the user is to be allowed to specify more than one value.</p>

  <div class=example>

   <p>The following extract shows how an e-mail client's "Cc" field
   could accept multiple e-mail addresses.</p>

   <pre>&lt;label&gt;Cc: &lt;input type=email multiple name=cc&gt;&lt;/label&gt;</pre>

   <p>If the user had, amongst many friends in his user contacts
   database, two friends "Arthur Dent" (with address
   "art@example.net") and "Adam Josh" (with address
   "adamjosh@example.net"), then, after the user has typed "a", the
   user agent might suggest these two e-mail addresses to the
   user.</p>

   <p><img alt="" src=images/sample-email-1.png></p>

   <p>The page could also link in the user's contacts database from the site:</p>

   <pre>&lt;label&gt;Cc: &lt;input type=email multiple name=cc list=contacts&gt;&lt;/label&gt;
...
&lt;datalist id="contacts"&gt;
 &lt;option value="hedral@damowmow.com"&gt;
 &lt;option value="pillar@example.com"&gt;
 &lt;option value="astrophy@cute.example"&gt;
 &lt;option value="astronomy@science.example.org"&gt;
&lt;/datalist&gt;</pre>

   <p>Suppose the user had entered "bob@example.net" into this text
   field, and then started typing a second e-mail address starting
   with "a". The user agent might show both the two friends mentioned
   earlier, as well as the "astrophy" and "astronomy" values given in
   the <code><a href=#the-datalist-element>datalist</a></code> element.</p>

   <p><img alt="" src=images/sample-email-2.png></p>

  </div>

  <div class=example>

   <p>The following extract shows how an e-mail client's "Attachments"
   field could accept multiple files for upload.</p>

   <pre>&lt;label&gt;Attachments: &lt;input type=file multiple name=att&gt;&lt;/label&gt;</pre>

  </div>


  <h6 id=the-maxlength-attribute><span class=secno>4.10.7.2.7 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>

  <p>The <dfn id=attr-input-maxlength title=attr-input-maxlength><code>maxlength</code></dfn>
  attribute<span class=impl>, when it applies,</span> is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a><span class=impl>
  controlled by the <code><a href=#the-input-element>input</a></code> element's <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value
  flag</a></span>.</p>

  <p>If the <code><a href=#the-input-element>input</a></code> element has a <a href=#maximum-allowed-value-length>maximum allowed
  value length</a>, then the <a href=#code-point-length>code-point length</a> of the
  value of the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code>
  attribute must be equal to or less than the element's <a href=#maximum-allowed-value-length>maximum
  allowed value length</a>.</p>

  <div class=example>

   <p>The following extract shows how a messaging client's text entry
   could be arbitrarily restricted to a fixed number of characters,
   thus forcing any conversion through this medium to be terse and
   discouraging intelligent discourse.</p>

   <pre>What are you doing? &lt;input name=status maxlength=140&gt;</pre>

  </div>



  <h6 id=the-pattern-attribute><span class=secno>4.10.7.2.8 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>

  <p>The <dfn id=attr-input-pattern title=attr-input-pattern><code>pattern</code></dfn>
  attribute specifies a regular expression against which the control's
  <a href=#concept-fe-value title=concept-fe-value>value</a> is to be checked.</p>

  <p>If specified, the attribute's value must match the JavaScript <i title="">Pattern</i> production. <a href=#refsECMA262>[ECMA262]</a></p>

  <div class=impl>

  <p><strong>Constraint validation</strong>: If the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is not the empty string, and
  the element's <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>
  attribute is specified and the attribute's value, when compiled as a
  JavaScript regular expression with the <code title="">global</code>,
  <code title="">ignoreCase</code>, and <code title="">multiline</code> flags <em>disabled</em> (see ECMA262
  Edition 5, sections 15.10.7.2 through 15.10.7.4), compiles
  successfully but the resulting regular expression does not match the
  entirety of the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, then the element is
  <a href=#suffering-from-a-pattern-mismatch>suffering from a pattern mismatch</a>. <a href=#refsECMA262>[ECMA262]</a></p>

  <p class=note>This implies that the regular expression language
  used for this attribute is the same as that used in JavaScript,
  except that the <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>
  attribute must match the entire value, not just any subset (somewhat
  as if it implied a <code title="">^(?:</code> at the start of the
  pattern and a <code title="">)$</code> at the end).</p>

  </div>

  <p>When an <code><a href=#the-input-element>input</a></code> element has a <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute specified,
  authors should include a <code title=attr-title><a href=#the-title-attribute>title</a></code>
  attribute to give a description of the pattern. User agents may use
  the contents of this attribute, if it is present, when informing the
  user that the pattern is not matched, or at any other suitable time,
  such as in a tooltip or read out by assistive technology when the
  control gains focus.</p>

  <div class=example>
   <p>For example, the following snippet:</p>
   <pre>&lt;label&gt; Part number:
 &lt;input pattern="[0-9][A-Z]{3}" name="part"
        title="A part number is a digit followed by three uppercase letters."/&gt;
&lt;/label&gt;</pre>
   <p>...could cause the UA to display an alert such as:</p>
   <pre><samp>A part number is a digit followed by three uppercase letters.
You cannot complete this form until the field is correct.</samp></pre>
  </div>

  <p>When a control has a <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, if used, must describe
  the pattern.  Additional information could also be included, so long
  as it assists the user in filling in the control. Otherwise,
  assistive technology would be impaired.</p>

  <p class=example>For instance, if the title attribute contained
  the caption of the control, assistive technology could end up saying
  something like <samp>The text you have entered does not match the
  required pattern. Birthday</samp>, which is not useful.</p>

  <p>UAs may still show the <code><a href=#the-title-element-0>title</a></code> in non-error situations
  (for example, as a tooltip when hovering over the control), so
  authors should be careful not to word <code><a href=#the-title-element-0>title</a></code>s as if an
  error has necessarily occurred.</p>



  <h6 id=the-min-and-max-attributes><span class=secno>4.10.7.2.9 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>

  <p>The <dfn id=attr-input-min title=attr-input-min><code>min</code></dfn> and <dfn id=attr-input-max title=attr-input-max><code>max</code></dfn> attributes indicate
  the allowed range of values for the element.</p>

  <div class=impl>

  <p>Their syntax is defined by the section that defines the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state.</p>

  <p>If the element has a <code title=attr-input-min><a href=#attr-input-min>min</a></code>
  attribute, and the result of applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a> to the value of the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute is a number, then that
  number is the element's <dfn id=concept-input-min title=concept-input-min>minimum</dfn>; otherwise, if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
  defines a <dfn id=concept-input-min-default title=concept-input-min-default>default
  minimum</dfn>, then that is the <a href=#concept-input-min title=concept-input-min>minimum</a>; otherwise, the element has
  no <a href=#concept-input-min title=concept-input-min>minimum</a>.</p>

  <p><strong>Constraint validation</strong>: When the element has a
  <a href=#attr-input-min title=attr-input-min>minimum</a>, and the result of
  applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a> to the string given by the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is a number, and the number
  obtained from that algorithm is less than the <a href=#attr-input-min title=attr-input-min>minimum</a>, the element is
  <a href=#suffering-from-an-underflow>suffering from an underflow</a>.</p>

  <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute also
  defines the <a href=#concept-input-min-zero title=concept-input-min-zero>step
  base</a>.</p>

  <p>If the element has a <code title=attr-input-max><a href=#attr-input-max>max</a></code>
  attribute, and the result of applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a> to the value of the <code title=attr-input-max><a href=#attr-input-max>max</a></code> attribute is a number, then that
  number is the element's <dfn id=concept-input-max title=concept-input-max>maximum</dfn>; otherwise, if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
  defines a <dfn id=concept-input-max-default title=concept-input-max-default>default
  maximum</dfn>, then that is the <a href=#concept-input-max title=concept-input-max>maximum</a>; otherwise, the element has
  no <a href=#concept-input-max title=concept-input-max>maximum</a>.</p>

  <p><strong>Constraint validation</strong>: When the element has a
  <a href=#attr-input-max title=attr-input-max>maximum</a>, and the result of
  applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a> to the string given by the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is a number, and the number
  obtained from that algorithm is more than the <a href=#attr-input-max title=attr-input-max>maximum</a>, the element is
  <a href=#suffering-from-an-overflow>suffering from an overflow</a>.</p>

  </div>

  <p>The <code title=attr-input-max><a href=#attr-input-max>max</a></code> attribute's value
  (the <a href=#concept-input-max title=concept-input-max>maximum</a>) must not be
  less than the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute's
  value (its <a href=#concept-input-min title=concept-input-min>minimum</a>).</p>

  <div class=impl>

  <p class=note>If an element has a <a href=#attr-input-max title=attr-input-max>maximum</a> that is less than its <a href=#attr-input-min title=attr-input-min>minimum</a>, then so long as the element
  has a <a href=#concept-fe-value title=concept-fe-value>value</a>, it will either be
  <a href=#suffering-from-an-underflow>suffering from an underflow</a> or <a href=#suffering-from-an-overflow>suffering from an
  overflow</a>.</p>

  </div>

  <div class=example>

   <p>The following date control limits input to dates that are before
   the 1980s:</p>

   <pre>&lt;input name=bday type=date max="1979-12-31"&gt;</pre>

  </div>

  <div class=example>

   <p>The following number control limits input to whole numbers
   greater than zero:</p>

   <pre>&lt;input name=quantity required type=number min=1 value=1&gt;</pre>

  </div>


  <h6 id=the-step-attribute><span class=secno>4.10.7.2.10 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>

  <p>The <dfn id=attr-input-step title=attr-input-step><code>step</code></dfn>
  attribute indicates the granularity that is expected (and required)
  of the <a href=#concept-fe-value title=concept-fe-value>value</a>, by limiting the
  allowed values. <span class=impl>The section that defines the
  <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
  also defines the <dfn id=concept-input-step-default title=concept-input-step-default>default
  step</dfn>, the <dfn id=concept-input-step-scale title=concept-input-step-scale>step scale
  factor</dfn>, and in some cases the <dfn id=concept-input-step-default-base title=concept-input-step-default-base>default step base</dfn>,
  which are used in processing the attribute as described
  below.</span></p>

  <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute, if
  specified, must either have a value that is a <a href=#valid-floating-point-number>valid floating
  point number</a> that <a href=#rules-for-parsing-floating-point-number-values title="rules for parsing floating
  point number values">parses</a> to a number that is greater than
  zero, or must have a value that is an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> match for the string "<code title="">any</code>".</p>

  <div class=impl>

  <p>The attribute provides the <dfn id=concept-input-step title=concept-input-step>allowed value step</dfn> for the element,
  as follows:</p>

  <ol><li>If the attribute is absent, then the <a href=#concept-input-step title=concept-input-step>allowed value step</a> is the <a href=#concept-input-step-default title=concept-input-step-default>default step</a> multiplied
   by the <a href=#concept-input-step-scale title=concept-input-step-scale>step scale
   factor</a>.</li>

   <li>Otherwise, if the attribute's value is an <a href=#ascii-case-insensitive>ASCII
   case-insensitive</a> match for the string "<code title="">any</code>", then there is no <a href=#concept-input-step title=concept-input-step>allowed value step</a>.</li>

   <li>Otherwise, if the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number
   values</a>, when they are applied to the attribute's value,
   return an error, zero, or a number less than zero, then the <a href=#concept-input-step title=concept-input-step>allowed value step</a> is the <a href=#concept-input-step-default title=concept-input-step-default>default step</a> multiplied
   by the <a href=#concept-input-step-scale title=concept-input-step-scale>step scale
   factor</a>.</li>

   <li>Otherwise, the <a href=#concept-input-step title=concept-input-step>allowed value
   step</a> is the number returned by the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing
   floating point number values</a> when they are applied to the
   attribute's value, multiplied by the <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a>.</li>

  </ol><p>The <dfn id=concept-input-min-zero title=concept-input-min-zero>step base</dfn> is the
  result of applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a> to the value of the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, unless the element does
  not have a <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute
  specified or the result of applying that algorithm is an error, in
  which case the <a href=#concept-input-min-zero title=concept-input-min-zero>step base</a>
  is the <a href=#concept-input-step-default-base title=concept-input-step-default-base>default step
  base</a>, if one is defined, or zero, if not.</p>

  <p><strong>Constraint validation</strong>: When the element has an
  <a href=#concept-input-step title=concept-input-step>allowed value step</a>, and the
  result of applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a> to the string given by the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is a number, and that
  number subtracted from the <a href=#concept-input-min-zero title=concept-input-min-zero>step
  base</a> is not an integral multiple of the <a href=#concept-input-step title=concept-input-step>allowed value step</a>, the element is
  <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>.</p>

  </div>

  <div class=example>

   <p>The following range control only accepts values in the range
   0..1, and allows 256 steps in that range:</p>

   <pre>&lt;input name=opacity type=range min=0 max=1 step=0.00392156863&gt;</pre>

  </div>

  <div class=example>

   <p>The following control allows any time in the day to be selected,
   with any accuracy (e.g. thousandth-of-a-second accuracy or
   more):</p>

   <pre>&lt;input name=favtime type=time step=any&gt;</pre>

   <p>Normally, time controls are limited to an accuracy of one
   minute.</p>

  </div>




  <h6 id=the-placeholder-attribute><span class=secno>4.10.7.2.11 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>

  <!-- similar text in the <textarea> section -->

  <p>The <dfn id=attr-input-placeholder title=attr-input-placeholder><code>placeholder</code></dfn>
  attribute represents a <em>short</em> hint (a word or short phrase)
  intended to aid the user with data entry. A hint could be a sample
  value or a brief description of the expected format. The attribute,
  if specified, must have a value that contains no U+000A LINE FEED
  (LF) or U+000D CARRIAGE RETURN (CR) characters.</p>

  <p class=note>For a longer hint or other advisory text, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is more appropriate.</p>

  <p>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>
  attribute should not be used as an alternative to a
  <code><a href=#the-label-element>label</a></code>.</p>

  <div class=impl>

  <p>User agents should present this hint to the user, after having
  <a href=#strip-line-breaks title="strip line breaks">stripped line breaks</a> from it,
  when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is
  the empty string and the control is not focused (e.g. by displaying
  it inside a blank unfocused control).</p>

  </div>

  <div class=example>

   <p>Here is an example of a mail configuration user interface that
   uses the <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>
   attribute:</p>

   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Mail Account&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Name: &lt;input type="text" name="fullname" placeholder="John Ratzenberger"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Address: &lt;input type="email" name="address" placeholder="john@example.net"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Password: &lt;input type="password" name="password"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Description: &lt;input type="text" name="desc" placeholder="My Email Account"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;</pre>

  </div>



  <h5 id=common-input-element-apis><span class=secno>4.10.7.3 </span>Common <code><a href=#the-input-element>input</a></code> element APIs</h5>

  <dl class=domintro><dt><var title="">input</var> . <code title=dom-input-value><a href=#dom-input-value>value</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current <a href=#concept-fe-value title=concept-fe-value>value</a>
    of the form control.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if it is
    set to any value other than the empty string when the control is a
    file upload control.</p>

   </dd>

   <dt><var title="">input</var> . <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the form
    control.</p>

    <p>Can be set, to change the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>.</p>

   </dd>

   <dt><var title="">input</var> . <code title=dom-input-files><a href=#dom-input-files>files</a></code></dt>

   <dd>

    <p>Returns a <code>FileList</code> object listing the <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> of
    the form control.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
    control isn't a file control.</p>

   </dd>

   <dt><var title="">input</var> . <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a <code>Date</code> object representing the form
    control's <a href=#concept-fe-value title=concept-fe-value>value</a>, if
    applicable; otherwise, returns null.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
    control isn't date- or time-based.</p>

   </dd>

   <dt><var title="">input</var> . <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a number representing the form control's <a href=#concept-fe-value title=concept-fe-value>value</a>, if applicable; otherwise,
    returns null.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
    control is neither date- or time-based nor numeric.</p>

   </dd>

   <dt><var title="">input</var> . <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp</a></code>( [ <var title="">n</var> ] )</dt>
   <dt><var title="">input</var> . <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown</a></code>( [ <var title="">n</var> ] )</dt>

   <dd>

    <p>Changes the form control's <a href=#concept-fe-value title=concept-fe-value>value</a> by the value given in the
    <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute, multiplied by
    <var title="">n</var>. The default is 1.</p>

    <p>Throws <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the control
    is neither date- or time-based nor numeric, if the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute's value is "<code title="">any</code>", if the current <a href=#concept-fe-value title=concept-fe-value>value</a> could not be parsed, or if
    stepping in the given direction by the given amount would take the
    value out of range.</p>

   </dd>

   <dt><var title="">input</var> . <code title=dom-input-list><a href=#dom-input-list>list</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#the-datalist-element>datalist</a></code> element indicated by the
    <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute.</p>

   </dd>

   <dt><var title="">input</var> . <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#the-option-element>option</a></code> element from the
    <code><a href=#the-datalist-element>datalist</a></code> element indicated by the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute that matches the
    form control's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-input-value title=dom-input-value><code>value</code></dfn> IDL
  attribute allows scripts to manipulate the <a href=#concept-fe-value title=concept-fe-value>value</a> of an <code><a href=#the-input-element>input</a></code>
  element. The attribute is in one of the following modes, which
  define its behavior:</p>

  <dl><dt><dfn id=dom-input-value-value title=dom-input-value-value>value</dfn>

   <dd>On getting, it must return the current <a href=#concept-fe-value title=concept-fe-value>value</a> of the element. On setting,
   it must set the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the new value, set the
   element's <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value
   flag</a> to true, and then invoke the <a href=#value-sanitization-algorithm>value sanitization
   algorithm</a>, if the element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
   defines one.</dd>

   <dt><dfn id=dom-input-value-default title=dom-input-value-default>default</dfn>

   <dd>On getting, if the element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, it must return
   that attribute's value; otherwise, it must return the empty
   string. On setting, it must set the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute to the new
   value.</dd>

   <dt><dfn id=dom-input-value-default-on title=dom-input-value-default-on>default/on</dfn>

   <dd>On getting, if the element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, it must return
   that attribute's value; otherwise, it must return the string "<code title="">on</code>". On setting, it must set the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute to the new
   value.</dd>

   <dt><dfn id=dom-input-value-filename title=dom-input-value-filename>filename</dfn>

   <dd>On getting, it must return the string "<code title="">C:\fakepath\</code>" followed by the filename of the first
   file in the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>, if
   any, or the empty string if the list is empty. On setting, if the
   new value is the empty string, it must empty the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>;
   otherwise, it must throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
   exception.</dd>

  </dl><hr><p>The <dfn id=dom-input-checked title=dom-input-checked><code>checked</code></dfn> IDL
  attribute allows scripts to manipulate the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of an
  <code><a href=#the-input-element>input</a></code> element. On getting, it must return the current
  <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the element;
  and on setting, it must set the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to the new value and
  set the element's <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
  flag</a> to true.</p>

  <hr><p>The <dfn id=dom-input-files title=dom-input-files><code>files</code></dfn> IDL
  attribute allows scripts to access the element's <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>. On
  getting, if the IDL attribute applies, it must return a
  <code>FileList</code> object that represents the current <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>. The
  same object must be returned until the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>
  changes. If the IDL attribute does not apply, then it must instead
  throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. <a href=#refsFILEAPI>[FILEAPI]</a></p>

  <hr><p>The <dfn id=dom-input-valueasdate title=dom-input-valueAsDate><code>valueAsDate</code></dfn> IDL
  attribute represents the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element, interpreted
  as a date.</p>

  <p>On getting, if the <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> attribute does not
  apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
  return null. Otherwise, run the <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
  string to a <code>Date</code> object</a> defined for that state;
  if the algorithm returned a <code>Date</code> object, then return
  it, otherwise, return null.</p>

  <p>On setting, if the <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> attribute does not
  apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
  throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception; otherwise, if
  the new value is null, then set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element to the empty
  string; otherwise, run the <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
  <code>Date</code> object to a string</a>, as defined for that
  state, on the new value, and set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element to resulting
  string.</p>

  <hr><p>The <dfn id=dom-input-valueasnumber title=dom-input-valueAsNumber><code>valueAsNumber</code></dfn> IDL
  attribute represents the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element, interpreted as a number.</p>

  <p>On getting, if the <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> attribute does
  not apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
  return a Not-a-Number (NaN) value. Otherwise, if the <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAs<em>Date</em></a></code>
  attribute applies, run the <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
  string to a <code>Date</code> object</a> defined for that state;
  if the algorithm returned a <code>Date</code> object, then return
  the <i>time value</i> of the object (the number of milliseconds from
  midnight UTC the morning of 1970-01-01 to the time represented by
  the <code>Date</code> object), otherwise, return a Not-a-Number
  (NaN) value. Otherwise, run the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
  string to a number</a> defined for that state; if the algorithm
  returned a number, then return it, otherwise, return a Not-a-Number
  (NaN) value.</p>

  <p>On setting, if the <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> attribute does
  not apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
  throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. Otherwise, if
  the <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAs<em>Date</em></a></code>
  attribute applies, run the <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
  <code>Date</code> object to a string</a> defined for that state,
  passing it a <code>Date</code> object whose <i>time value</i> is the
  new value, and set the <a href=#concept-fe-value title=concept-fe-value>value</a>
  of the element to resulting string. Otherwise, run the <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
  number to a string</a>, as defined for that state, on the new
  value, and set the <a href=#concept-fe-value title=concept-fe-value>value</a> of
  the element to resulting string.</p>

  <hr><p>The <dfn id=dom-input-stepdown title=dom-input-stepDown><code>stepDown(<var title="">n</var>)</code></dfn> and <dfn id=dom-input-stepup title=dom-input-stepUp><code>stepUp(<var title="">n</var>)</code></dfn> methods, when invoked, must run the
  following algorithm:</p>

  <ol><li><p>If the <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods do not
   apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
   throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception, and abort these
   steps.</li>

   <li><p>If the element has no <a href=#concept-input-step title=concept-input-step>allowed value step</a>, then throw an
   <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception, and abort these
   steps.</li>

   <li><p>If applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   string to a number</a> to the string given by the element's
   <a href=#concept-fe-value title=concept-fe-value>value</a> results in an error,
   then throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception, and abort
   these steps; otherwise, let <var title="">value</var> be the result
   of that algorithm.</li>

   <li><p>Let <var title="">n</var> be the argument, or 1 if the
   argument was omitted.</li>

   <li><p>Let <var title="">delta</var> be the <a href=#concept-input-step title=concept-input-step>allowed value step</a> multiplied by
   <var title="">n</var>.</li>

   <li><p>If the method invoked was the <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> method, negate <var title="">delta</var>.</li>

   <li><p>Let <var title="">value</var> be the result of adding <var title="">delta</var> to <var title="">value</var>.</li>
   <li><p>If the element has a <a href=#concept-input-min title=concept-input-min>minimum</a>, and the <var title="">value</var> is less than that <a href=#concept-input-min title=concept-input-min>minimum</a>, then throw a
   <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception.</li>

   <li><p>If the element has a <a href=#concept-input-max title=concept-input-max>maximum</a>, and the <var title="">value</var> is greater than that <a href=#concept-input-max title=concept-input-max>maximum</a>, then throw a
   <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception.</li>

   <li><p>Let <var title="">value as string</var> be the result of
   running the <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   number to a string</a>, as defined for the <code><a href=#the-input-element>input</a></code>
   element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's
   current state, on <var title="">value</var>.</li>

   <li><p>Set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the
   element to <var title="">value as string</var>.</li>

  </ol><hr><p>The <dfn id=dom-input-list title=dom-input-list><code>list</code></dfn> IDL
  attribute must return the current <a href=#concept-input-list title=concept-input-list>suggestions source element</a>, if
  any, or null otherwise.</p>

  <p>The <dfn id=dom-input-selectedoption title=dom-input-selectedOption><code>selectedOption</code></dfn>
  IDL attribute must return the first <code><a href=#the-option-element>option</a></code> element, in
  <a href=#tree-order>tree order</a>, to be a child of the <a href=#concept-input-list title=concept-input-list>suggestions source element</a> and
  whose <a href=#concept-option-value title=concept-option-value>value</a> matches the
  <code><a href=#the-input-element>input</a></code> element's <a href=#concept-fe-value title=concept-fe-value>value</a>, if any. If there is no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>, or if
  it contains no matching <code><a href=#the-option-element>option</a></code> element, then the <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> attribute
  must return null.</p>

  </div>


  <div class=impl>

  <h5 id=common-event-behaviors><span class=secno>4.10.7.4 </span>Common event behaviors</h5>

  <p>When the <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
  event applies, any time the user causes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change, the user agent must
  <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that
  bubbles named <code title=event-input>input</code> at the
  <code><a href=#the-input-element>input</a></code> element, then <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</a> at the
  <code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form owner</a>. User agents
  may wait for a suitable break in the user's interaction before
  queuing the task; for example, a user agent could wait for the user
  to have not hit a key for 100ms, so as to only fire the event when
  the user pauses, instead of continuously for each keystroke.</p>
  <!-- same text is present in the <textarea> section -->

  <p class=example>Examples of a user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> would include the user typing
  into a text field, pasting a new value into the field, or undoing an
  edit in that field. Some user interactions do not cause changes to
  the value, e.g. hitting the "delete" key in an empty text field, or
  replacing some text in the field with text from the clipboard that
  happens to be exactly the same text.</p>

  <p>When the <dfn id=event-input-change title=event-input-change><code>change</code></dfn> event applies,
  if the element does not have an <a href=#activation-behavior>activation behavior</a>
  defined but uses a user interface that involves an explicit commit
  action, then any time the user commits a change to the element's
  <a href=#concept-fe-value title=concept-fe-value>value</a> or list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>, the
  user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> that bubbles named <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code>
  element, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
  <code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form owner</a>.</p>

  <p class=example>An example of a user interface with a commit
  action would be a <a href=#file-upload-state title=attr-input-type-file>File
  Upload</a> control that consists of a single button that brings
  up a file selection dialog: when the dialog is closed, if that the
  <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>file selection</a>
  changed as a result, then the user has committed a new <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>file selection</a>.</p>

  <p class=example>Another example of a user interface with a commit
  action would be a <a href=#date-state title=attr-input-type-date>Date</a>
  control that allows both text-based user input and user selection
  from a drop-down calendar: while text input might not have an
  explicit commit step, selecting a date from the drop down calendar
  and then dismissing the drop down would be a commit action.</p>

  <p>When the user agent changes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> on behalf of the user (e.g. as
  part of a form prefilling feature), the user agent must follow these
  steps:</p>

  <ol><li>If the <code title=event-input-input><a href=#event-input-input>input</a></code> event
   applies, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   event</a> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code>
   element.</li>

   <li>If the <code title=event-input-input><a href=#event-input-input>input</a></code> event
   applies, <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</a> at the
   <code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form owner</a>.</li>

   <li>If the <code title=event-input-change><a href=#event-input-change>change</a></code> event
   applies, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   event</a> that bubbles named <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code>
   element.</li>

   <li>If the <code title=event-input-change><a href=#event-input-change>change</a></code> event
   applies, <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
   <code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form owner</a>.</li>

  </ol><p class=note>In addition, when the <code title=event-input-change><a href=#event-input-change>change</a></code> event applies, <code title=event-change>change</code> events can also be fired as part
  of the element's <a href=#activation-behavior>activation behavior</a> and as part of the
  <a href=#unfocusing-steps>unfocusing steps</a>.</p>

  <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#user-interaction-task-source>user interaction task
  source</a>.</p>

  </div>



  <h4 id=the-button-element><span class=secno>4.10.8 </span>The <dfn><code>button</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, and <a href=#category-submit title=category-submit>submittable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <a href=#interactive-content>interactive content</a> descendant.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code></dd>
   <dd><code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code></dd>
   <dd><code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code></dd>
   <dd><code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code></dd>
   <dd><code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code></dd>
   <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   <dd><code title=attr-button-type><a href=#attr-button-type>type</a></code></dd>
   <dd><code title=attr-button-value><a href=#attr-button-value>value</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlbuttonelement>HTMLButtonElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
           attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
           attribute DOMString <a href=#dom-fs-formaction title=dom-fs-formAction>formAction</a>;
           attribute DOMString <a href=#dom-fs-formenctype title=dom-fs-formEnctype>formEnctype</a>;
           attribute DOMString <a href=#dom-fs-formmethod title=dom-fs-formMethod>formMethod</a>;
           attribute DOMString <a href=#dom-fs-formnovalidate title=dom-fs-formNoValidate>formNoValidate</a>;
           attribute DOMString <a href=#dom-fs-formtarget title=dom-fs-formTarget>formTarget</a>;
           attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
           attribute DOMString <a href=#dom-button-type title=dom-button-type>type</a>;
           attribute DOMString <a href=#dom-button-value title=dom-button-value>value</a>;

  readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
  readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
  readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
  boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
  void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);

  readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-button-element>button</a></code> element <a href=#represents>represents</a> a
  button. <span class=impl>If the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, then the user agent
  should allow the user to activate the button.</span></p>

  <p>The element is a <a href=#concept-button title=concept-button>button</a>.</p>

  <p>The <dfn id=attr-button-type title=attr-button-type><code>type</code></dfn>
  attribute controls the behavior of the button when it is activated.
  It is an <a href=#enumerated-attribute>enumerated attribute</a>. The following table
  lists the keywords and states for the attribute &mdash; the keywords
  in the left column map to the states in the cell in the second
  column on the same row as the keyword.</p>

  <table><thead><tr><th> Keyword
     <th> State
     <th> Brief description
   <tbody><tr><td><dfn id=attr-button-type-submit title=attr-button-type-submit><code>submit</code></dfn>
     <td><a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
     <td>Submits the form.
    <tr><td><dfn id=attr-button-type-reset title=attr-button-type-reset><code>reset</code></dfn>
     <td><a href=#attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</a>
     <td>Resets the form.
    <tr><td><dfn id=attr-button-type-button title=attr-button-type-button><code>button</code></dfn>
     <td><a href=#attr-button-type-button-state title=attr-button-type-button-state>Button</a>
     <td>Does nothing.
  </table><p>The <i>missing value default</i> is the <a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
  state.</p>

  <p>If the <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in
  the <a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
  state, the element is specifically a <a href=#concept-submit-button title=concept-submit-button>submit button</a>.</p>

  <div class=impl>

  <p><strong>Constraint validation</strong>: If the <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</a> state or
  the <a href=#attr-button-type-button-state title=attr-button-type-button-state>Button</a> state,
  the element is <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>

  <p>If the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, the <a href=#activation-behavior>activation
  behavior</a> of the <code><a href=#the-button-element>button</a></code> element is to run the
  steps defined in the following list for the current state of the
  element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute.</p>

  <dl><dt> <dfn id=attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</dfn> </dt>

   <dd><p>If the element has a <a href=#form-owner>form owner</a>, the element
   must <a href=#concept-form-submit title=concept-form-submit>submit</a> the <a href=#form-owner>form
   owner</a> from the <code><a href=#the-button-element>button</a></code> element.</dd>

   <dt> <dfn id=attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</dfn> </dt>

   <dd><p>If the element has a <a href=#form-owner>form owner</a>, the element
   must <a href=#concept-form-reset title=concept-form-reset>reset</a> the <a href=#form-owner>form
   owner</a>.</dd>

   <dt> <dfn id=attr-button-type-button-state title=attr-button-type-button-state>Button</dfn>

   <dd><p>Do nothing.</dd>

  </dl></div>

  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-button-element>button</a></code> element with its
  <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
  attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
  attribute controls focus. The <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attributes are
  <a href=#attributes-for-form-submission>attributes for form submission</a>.</p>

  <p class=note>The <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code> attribute can
  be used to make submit buttons that do not trigger the constraint
  validation.</p>

  <p>The <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> must not be specified
  if the element's <code title=attr-button-type><a href=#attr-button-type>type</a></code>
  attribute is not in the <a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
  state.</p>

  <p>The <dfn id=attr-button-value title=attr-button-value><code>value</code></dfn>
  attribute gives the element's value for the purposes of form
  submission. The element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the value of the element's
  <code title=attr-button-value><a href=#attr-button-value>value</a></code> attribute, if there is
  one, or the empty string otherwise.</p>

  <p class=note>A button (and its value) is only included in the
  form submission if the button itself was used to initiate the form
  submission.</p>

  <div class=impl>

  <p>The <dfn id=dom-button-value title=dom-button-value><code>value</code></dfn> and
  <dfn id=dom-button-type title=dom-button-type><code>type</code></dfn> IDL attributes
  must <a href=#reflect>reflect</a> the respective content attributes of the
  same name.</p>

  <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
  attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
  methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
  <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
  of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div>

  <div class=example>

   <p>The following button is labeled "Show hint" and pops up a dialog
   box when activated:</p>

   <pre>&lt;button type=button
        onclick="alert('This 15-20 minute piece was composed by George Gershwin.')"&gt;
 Show hint
&lt;/button&gt;</pre>

  </div>




  <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, <a href=#category-submit title=category-submit>submittable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href=#the-option-element>option</a></code> or <code><a href=#the-optgroup-element>optgroup</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code></dd>
   <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   <dd><code title=attr-select-size><a href=#attr-select-size>size</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlselectelement>HTMLSelectElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
           attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
           attribute boolean <a href=#dom-select-multiple title=dom-select-multiple>multiple</a>;
           attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
           attribute unsigned long <a href=#dom-select-size title=dom-select-size>size</a>;

  readonly attribute DOMString <a href=#dom-select-type title=dom-select-type>type</a>;

  readonly attribute <a href=#htmloptionscollection>HTMLOptionsCollection</a> <a href=#dom-select-options title=dom-select-options>options</a>;
           attribute unsigned long <a href=#dom-select-length title=dom-select-length>length</a>;
  caller getter any <a href=#dom-select-item title=dom-select-item>item</a>(in unsigned long index);
  caller getter any <a href=#dom-select-nameditem title=dom-select-namedItem>namedItem</a>(in DOMString name);
  void <a href=#dom-select-add title=dom-select-add>add</a>(in <a href=#htmlelement>HTMLElement</a> element, in optional <a href=#htmlelement>HTMLElement</a> before);
  void <a href=#dom-select-add title=dom-select-add>add</a>(in <a href=#htmlelement>HTMLElement</a> element, in long before);
  void <a href=#dom-select-remove title=dom-select-remove>remove</a>(in long index);

  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-select-selectedoptions title=dom-select-selectedOptions>selectedOptions</a>;
           attribute long <a href=#dom-select-selectedindex title=dom-select-selectedIndex>selectedIndex</a>;
           attribute DOMString <a href=#dom-select-value title=dom-select-value>value</a>;

  readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
  readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
  readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
  boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
  void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);

  readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
};</pre>
   </dd>
  </dl><!-- Proposals for v2:
       * <select value=""> as an alternative to <option selected>
         http://developers.slashdot.org/comments.pl?sid=426306&cid=22142072
         <Philip`> http://www.ipiao.com.cn/ does <select size="1" name="to"><script>City_Default="PEK"</script><SCRIPT language=javascript
                   src="/js/flightcity.js"></SCRIPT></select> which is the kind of thing that could be much simpler with <select value="PEK">
       * a way to make the <select> not have a default value at all (ack
         or to have a "placeholer" like value that doesn't count as a value being selected but shows a prompt until a value is selected
       * once we can have no default, a way to require="" a value.
       ack Weston Ruter: http://weston.ruter.net/projects/test-cases/html-select-element/
       q.v. http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-November/017583.html
    --><p>The <code><a href=#the-select-element>select</a></code> element represents a control for
  selecting amongst a set of options.</p>

  <p>The <dfn id=attr-select-multiple title=attr-select-multiple><code>multiple</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>. If the attribute is
  present, then the <code><a href=#the-select-element>select</a></code> element
  <a href=#represents>represents</a> a control for selecting zero or more options
  from the <a href=#concept-select-option-list title=concept-select-option-list>list of
  options</a>. If the attribute is absent, then the
  <code><a href=#the-select-element>select</a></code> element <a href=#represents>represents</a> a control for
  selecting a single option from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>

  <p>The <dfn id=concept-select-option-list title=concept-select-option-list>list of options</dfn>
  for a <code><a href=#the-select-element>select</a></code> element consists of all the
  <code><a href=#the-option-element>option</a></code> element children of the <code><a href=#the-select-element>select</a></code>
  element, and all the <code><a href=#the-option-element>option</a></code> element children of all the
  <code><a href=#the-optgroup-element>optgroup</a></code> element children of the <code><a href=#the-select-element>select</a></code>
  element, in <a href=#tree-order>tree order</a>.</p>

  <p>The <dfn id=attr-select-size title=attr-select-size><code>size</code></dfn>
  attribute gives the number of options to show to the user. The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, if specified, must
  have a value that is a <a href=#valid-non-negative-integer>valid non-negative integer</a>
  greater than zero. If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is present,
  then the <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute's
  default value is 4. If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
  then the <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute's
  default value is 1.</p>

  <div class=impl>

  <p>The <dfn id=concept-select-size title=concept-select-size>display size</dfn> of a
  <code><a href=#the-select-element>select</a></code> element is the result of applying the
  <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to the value of
  element's <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, if it
  has one and parsing it is successful. If applying those rules to the
  attribute's value is not successful, or if the <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute is absent, the
  element's <a href=#concept-select-size title=concept-select-size>display size</a> is
  the default value of the attribute.</p>

  <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
  attribute is absent, and the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, then the user agent
  should allow the user to pick an <code><a href=#the-option-element>option</a></code> element in its
  <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that
  is itself not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>. Upon this
  <code><a href=#the-option-element>option</a></code> element being <dfn id=concept-select-pick title=concept-select-pick>picked</dfn> (either through a click, or
  through unfocusing the element after changing its value, or through
  a <a href=#using-the-option-element-to-define-a-command title=option-command>menu command</a>, or through any
  other mechanism), and before the relevant user interaction event
  <!-- interaction event spec point --> is queued (e.g. before the
  <code title=event-click><a href=#event-click>click</a></code> event), the user agent must
  set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the
  picked <code><a href=#the-option-element>option</a></code> element to true and then <a href=#queue-a-task>queue a
  task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named
  <code title=event-change>change</code> at the <code><a href=#the-select-element>select</a></code>
  element, using the <a href=#user-interaction-task-source>user interaction task source</a> as the
  task source, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
  element's <a href=#form-owner>form owner</a>.</p>

  <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
  attribute is absent, whenever an <code><a href=#the-option-element>option</a></code> element in the
  <code><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> has its
  <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
  true, and whenever an <code><a href=#the-option-element>option</a></code> element with its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true
  is added to the <code><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, the user
  agent must set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of all the
  other <code><a href=#the-option-element>option</a></code> element in its <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> to
  false.</p>

  <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
  attribute is absent and the element's <a href=#concept-select-size title=concept-select-size>display size</a> is greater than 1,
  then the user agent should also allow the user to request that the
  <code><a href=#the-option-element>option</a></code> whose <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, if
  any, be unselected. Upon this request being conveyed to the user
  agent, and before the relevant user interaction event <!--
  interaction event spec point --> is queued (e.g. before the <code title=event-click><a href=#event-click>click</a></code> event), the user agent must set the
  <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of
  that <code><a href=#the-option-element>option</a></code> element to false and then <a href=#queue-a-task>queue a
  task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named
  <code title=event-change>change</code> at the <code><a href=#the-select-element>select</a></code>
  element, using the <a href=#user-interaction-task-source>user interaction task source</a> as the
  task source, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
  element's <a href=#form-owner>form owner</a>.</p>

  <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
  attribute is absent and the element's <a href=#concept-select-size title=concept-select-size>display size</a> is 1, then whenever
  there are no <code><a href=#the-option-element>option</a></code> elements in the <code><a href=#the-select-element>select</a></code>
  element's <a href=#concept-select-option-list title=concept-select-option-list>list of
  options</a> that have their <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true,
  the user agent must set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the first
  <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> in
  <a href=#tree-order>tree order</a> that is not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, if any, to
  true.</p>

  <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
  attribute is present, and the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, then the user agent
  should allow the user to <dfn id=concept-select-toggle title=concept-select-toggle>toggle</dfn> the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the
  <code><a href=#the-option-element>option</a></code> elements in its <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that are
  themselves not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>
  (either through a click, or through a <a href=#using-the-option-element-to-define-a-command title=option-command>menu command</a>, or any other
  mechanism). Upon the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of one or
  more <code><a href=#the-option-element>option</a></code> elements being changed by the user, and
  before the relevant user interaction event <!-- interaction event
  spec point --> is queued (e.g. before a related <code title=event-click><a href=#event-click>click</a></code> event), the user agent must
  <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that
  bubbles named <code title=event-change>change</code> at the
  <code><a href=#the-select-element>select</a></code> element, using the <a href=#user-interaction-task-source>user interaction task
  source</a> as the task source, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
  element's <a href=#form-owner>form owner</a>.</p>

  <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
  algorithm</a> for <code><a href=#the-select-element>select</a></code> elements is to go through
  all the <code><a href=#the-option-element>option</a></code> elements in the element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, and set
  their <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a>
  to true if the <code><a href=#the-option-element>option</a></code> element has a <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute, and false
  otherwise.</p>

  </div>

  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-select-element>select</a></code> element with its
  <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
  attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
  attribute controls focus.</p>

  <dl class=domintro><dt><var title="">select</var> . <code title=dom-select-type><a href=#dom-select-type>type</a></code></dt>

   <dd>

    <p>Returns "<code title="">select-multiple</code>" if the element
    has a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
    attribute, and "<code title="">select-one</code>"
    otherwise.</p>

   </dd>

   <dt><var title="">select</var> . <code title=dom-select-options><a href=#dom-select-options>options</a></code></dt>

   <dd>

    <p>Returns an <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> of the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>

   </dd>

   <dt><var title="">select</var> . <code title=dom-select-length><a href=#dom-select-length>length</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the number of elements in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>
    <p>When set to a smaller number, truncates the number of <code><a href=#the-option-element>option</a></code> elements in the <code><a href=#the-select-element>select</a></code>.</p>
    <p>When set to a greater number, adds new blank <code><a href=#the-option-element>option</a></code> elements to the <code><a href=#the-select-element>select</a></code>.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">select</var> . <code title=dom-select-item><a href=#dom-select-item>item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">select</var>[<var title="">index</var>]</dt>
   <dt><var title="">select</var>(<var title="">index</var>)</dt>
   <dd>
    <p>Returns the item with index <var title="">index</var> from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>. The items are sorted in <a href=#tree-order>tree order</a>.</p>
    <p>Returns null if <var title="">index</var> is out of range.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">select</var> . <code title=dom-select-item><a href=#dom-select-item>namedItem</a></code>(<var title="">name</var>)</dt>
   <dt><var title="">select</var>[<var title="">name</var>]</dt>
   <dt><var title="">select</var>(<var title="">name</var>)</dt>
   <dd>
    <p>Returns the item with ID or <code title=attr-option-name><a href=#attr-option-name>name</a></code> <var title="">name</var> from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>
    <p>If there are multiple matching items, then a <code><a href=#nodelist>NodeList</a></code> object containing all those elements is returned.</p>
    <p>Returns null if no element with that ID could be found.</p>
   </dd>

   <dt><var title="">select</var> . <code title=dom-select-add><a href=#dom-select-add>add</a></code>(<var title="">element</var> [, <var title="">before</var> ])</dt>
   <dd>
    <p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p>
    <p>The <var title="">before</var> argument can be a number, in
    which case <var title="">element</var> is inserted before the item
    with that number, or an element from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, in
    which case <var title="">element</var> is inserted before that
    element.</p>
    <p>If <var title="">before</var> is omitted, null, or a number out
    of range, then <var title="">element</var> will be added at the
    end of the list.</p>
    <p>This method will throw a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code>
    exception if <var title="">element</var> is an ancestor of the
    element into which it is to be inserted. If <var title="">element</var> is not an <code><a href=#the-option-element>option</a></code> or
    <code><a href=#the-optgroup-element>optgroup</a></code> element, then the method does nothing.</p>
   </dd>

   <dt><var title="">select</var> . <code title=dom-select-selectedOptions><a href=#dom-select-selectedoptions>selectedOptions</a></code></dt>

   <dd>

    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that are
    selected.</p>

   </dd>

   <dt><var title="">select</var> . <code title=dom-select-selectedIndex><a href=#dom-select-selectedindex>selectedIndex</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the index of the first selected item, if any, or
    &minus;1 if there is no selected item.</p>

    <p>Can be set, to change the selection.</p>

   </dd>

   <dt><var title="">select</var> . <code title=dom-select-value><a href=#dom-select-value>value</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the <a href=#concept-fe-value title=concept-fe-value>value</a> of the
    first selected item, if any, or the empty string if there is no
    selected item.</p>

    <p>Can be set, to change the selection.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-select-type title=dom-select-type><code>type</code></dfn> IDL
  attribute, on getting, must return the string "<code title="">select-one</code>" if the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
  and the string "<code title="">select-multiple</code>" if the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is
  present.</p>

  <p>The <dfn id=dom-select-options title=dom-select-options><code>options</code></dfn>
  IDL attribute must return an <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code>
  rooted at the <code><a href=#the-select-element>select</a></code> node, whose filter matches the
  elements in the <a href=#concept-select-option-list title=concept-select-option-list>list of
  options</a>.</p>

  <p>The <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection is
  also mirrored on the <code><a href=#htmlselectelement>HTMLSelectElement</a></code> object. The
  <span>indices of the supported indexed properties</span> at any
  instant are the indices supported by the object returned by the
  <code title=dom-select-options><a href=#dom-select-options>options</a></code> attribute at that
  instant. The <span>names of the supported named properties</span> at
  any instant are the names supported by the object returned by the
  <code title=dom-select-options><a href=#dom-select-options>options</a></code> attribute at that
  instant.</p>

  <p>The <dfn id=dom-select-length title=dom-select-length><code>length</code></dfn> IDL
  attribute must return the number of nodes <a href=#represented-by-the-collection title="represented
  by the collection">represented</a> by the <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection. On setting, it
  must act like the attribute of the same name on the <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection.</p>

  <p>The <dfn id=dom-select-item title=dom-select-item><code>item(<var title="">index</var>)</code></dfn> method must return the value
  returned by the method of the same name on the <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection, when invoked
  with the same argument.</p>

  <p>The <dfn id=dom-select-nameditem title=dom-select-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method must return the value
  returned by the method of the same name on the <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection, when invoked
  with the same argument.</p>

  <p>Similarly, the <dfn id=dom-select-add title=dom-select-add><code>add()</code></dfn> and <dfn id=dom-select-remove title=dom-select-remove><code>remove()</code></dfn> methods must
  act like their namesake methods on that same <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection.</p>

  <p>The <dfn id=dom-select-selectedoptions title=dom-select-selectedOptions><code>selectedOptions</code></dfn>
  IDL attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at
  the <code><a href=#the-select-element>select</a></code> node, whose filter matches the elements in
  the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>
  that have their <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
  true.</p>

  <p>The <dfn id=dom-select-selectedindex title=dom-select-selectedIndex><code>selectedIndex</code></dfn>
  IDL attribute, on getting, must return the <a href=#concept-option-index title=concept-option-index>index</a> of the first
  <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> in
  <a href=#tree-order>tree order</a> that has its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true,
  if any. If there isn't one, then it must return &minus;1.</p>

  <p>On setting, the <code title=dom-select-selectedIndex><a href=#dom-select-selectedindex>selectedIndex</a></code> attribute must
  set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of all the
  <code><a href=#the-option-element>option</a></code> elements in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> to false,
  and then the <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> whose
  <a href=#concept-option-index title=concept-option-index>index</a> is the given new
  value, if any, must have its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
  true.</p>

  <p>The <dfn id=dom-select-value title=dom-select-value><code>value</code></dfn> IDL
  attribute, on getting, must return the <a href=#concept-option-value title=concept-option-value>value</a> of the first
  <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> in
  <a href=#tree-order>tree order</a> that has its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true,
  if any. If there isn't one, then it must return the empty
  string.</p>

  <p>On setting, the <code title=dom-select-value><a href=#dom-select-value>value</a></code>
  attribute must set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of all the
  <code><a href=#the-option-element>option</a></code> elements in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> to false,
  and then first the <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, in
  <a href=#tree-order>tree order</a>, whose <a href=#concept-option-value title=concept-option-value>value</a> is equal to the given new
  value, if any, must have its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
  true.</p>

  <p>The <dfn id=dom-select-multiple title=dom-select-multiple><code>multiple</code></dfn>
  and <dfn id=dom-select-size title=dom-select-size><code>size</code></dfn> IDL
  attributes must <a href=#reflect>reflect</a> the respective content
  attributes of the same name. The <code title=dom-select-size><a href=#dom-select-size>size</a></code> IDL attribute <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to
  only non-negative numbers greater than zero</a>.</p>

  <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
  attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
  methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
  <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
  of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div>

  <div class=example>

   <p>The following example shows how a <code><a href=#the-select-element>select</a></code> element
   can be used to offer the user with a set of options from which the
   user can select a single option. The default option is
   preselected.</p>

   <pre>&lt;p&gt;
 &lt;label for="unittype"&gt;Select unit type:&lt;/label&gt;
 &lt;select id="unittype" name="unittype"&gt;
  &lt;option value="1"&gt; Miner &lt;/option&gt;
  &lt;option value="2"&gt; Puffer &lt;/option&gt;
  &lt;option value="3" selected&gt; Snipey &lt;/option&gt;
  &lt;option value="4"&gt; Max &lt;/option&gt;
  &lt;option value="5"&gt; Firebot &lt;/option&gt;
 &lt;/select&gt;
&lt;/p&gt;</pre>

  </div>

  <div class=example>

   <p>Here, the user is offered a set of options from which he can
   select any number. By default, all five options are selected.</p>

   <pre>&lt;p&gt;
 &lt;label for="allowedunits"&gt;Select unit types to enable on this map:&lt;/label&gt;
 &lt;select id="allowedunits" name="allowedunits" multiple&gt;
  &lt;option value="1" selected&gt; Miner &lt;/option&gt;
  &lt;option value="2" selected&gt; Puffer &lt;/option&gt;
  &lt;option value="3" selected&gt; Snipey &lt;/option&gt;
  &lt;option value="4" selected&gt; Max &lt;/option&gt;
  &lt;option value="5" selected&gt; Firebot &lt;/option&gt;
 &lt;/select&gt;
&lt;/p&gt;</pre>

  </div>



  <h4 id=the-datalist-element><span class=secno>4.10.10 </span>The <dfn><code>datalist</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Either: <a href=#phrasing-content>phrasing content</a>.</dd>
   <dd>Or: Zero or more <code><a href=#the-option-element>option</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmldatalistelement>HTMLDataListElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-datalist-options title=dom-datalist-options>options</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-datalist-element>datalist</a></code> element represents a set of
  <code><a href=#the-option-element>option</a></code> elements that represent predefined options for
  other controls. The contents of the element represents fallback
  content for legacy user agents, intermixed with <code><a href=#the-option-element>option</a></code>
  elements that represent the predefined options. In the rendering,
  the <code><a href=#the-datalist-element>datalist</a></code> element <a href=#represents>represents</a>
  nothing<span class=impl> and it, along with its children, should
  be hidden</span>.</p>

  <p>The <code><a href=#the-datalist-element>datalist</a></code> element is hooked up to an
  <code><a href=#the-input-element>input</a></code> element using the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute on the
  <code><a href=#the-input-element>input</a></code> element. <!-- v2DATAGRID The
  <code>datalist</code> element can also be used with a
  <code>datagrid</code> element, as the source of autocompletion hints
  for <code title="datagrid-type-editable">editable</code>
  cells. --></p>

  <p>Each <code><a href=#the-option-element>option</a></code> element that is a descendant of the
  <code><a href=#the-datalist-element>datalist</a></code> element, that is not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, and whose <a href=#concept-option-value title=concept-option-value>value</a> is a string that isn't the
  empty string, represents a suggestion. Each suggestion has a <a href=#concept-option-value title=concept-option-value>value</a> and a <a href=#concept-option-label title=concept-option-label>label</a>.

  <dl class=domintro><dt><var title="">datalist</var> . <code title=dom-datalist-options><a href=#dom-datalist-options>options</a></code></dt>

   <dd>
    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code>options</code> elements of the table.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-datalist-options title=dom-datalist-options><code>options</code></dfn>
  IDL attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at
  the <code><a href=#the-datalist-element>datalist</a></code> node, whose filter matches
  <code><a href=#the-option-element>option</a></code> elements.</p>

  <p><strong>Constraint validation</strong>: If an element has a
  <code><a href=#the-datalist-element>datalist</a></code> element ancestor, it is <a href=#barred-from-constraint-validation>barred from
  constraint validation</a>.</p>

  </div>


  <h4 id=the-optgroup-element><span class=secno>4.10.11 </span>The <dfn><code>optgroup</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-select-element>select</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href=#the-option-element>option</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code></dd>
   <dd><code title=attr-optgroup-label><a href=#attr-optgroup-label>label</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmloptgroupelement>HTMLOptGroupElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-optgroup-disabled title=dom-optgroup-disabled>disabled</a>;
           attribute DOMString <a href=#dom-optgroup-label title=dom-optgroup-label>label</a>;
};</pre>
   </dd>
  </dl><!-- v2: make optgroups selectable if they have a value. --><p>The <code><a href=#the-optgroup-element>optgroup</a></code> element <a href=#represents>represents</a> a group of
  <code><a href=#the-option-element>option</a></code> elements with a common label.</p>

  <p>The element's group of <code><a href=#the-option-element>option</a></code> elements consists of
  the <code><a href=#the-option-element>option</a></code> elements that are children of the
  <code><a href=#the-optgroup-element>optgroup</a></code> element.</p>

  <div class=impl>

  <p>When showing <code><a href=#the-option-element>option</a></code> elements in <code><a href=#the-select-element>select</a></code>
  elements, user agents should show the <code><a href=#the-option-element>option</a></code> elements
  of such groups as being related to each other and separate from
  other <code><a href=#the-option-element>option</a></code> elements.</p>

  </div>

  <p>The <dfn id=attr-optgroup-disabled title=attr-optgroup-disabled><code>disabled</code></dfn> attribute
  is a <a href=#boolean-attribute>boolean attribute</a> and can be used to <a href=#concept-option-disabled title=concept-option-disabled>disable</a> a group of
  <code><a href=#the-option-element>option</a></code> elements together.</p>

  <p>The <dfn id=attr-optgroup-label title=attr-optgroup-label><code>label</code></dfn>
  attribute must be specified. Its value gives the name of the group,
  for the purposes of the user interface. <span class=impl>User
  agents should use this attribute's value when labelling the group of
  <code><a href=#the-option-element>option</a></code> elements in a <code><a href=#the-select-element>select</a></code>
  element.</span></p>

  <div class=impl>

  <p>The <dfn id=dom-optgroup-disabled title=dom-optgroup-disabled><code>disabled</code></dfn> and <dfn id=dom-optgroup-label title=dom-optgroup-label><code>label</code></dfn> attributes must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  </div>

  <div class=example>

   <p>The following snippet shows how a set of lessons from three
   courses could be offered in a <code><a href=#the-select-element>select</a></code> drop-down
   widget:</p>

   <pre>&lt;form action="courseselector.dll" method="get"&gt;
 &lt;p&gt;Which course would you like to watch today?
 &lt;p&gt;&lt;label&gt;Course:
  &lt;select name="c"&gt;
   &lt;optgroup label="8.01 Physics I: Classical Mechanics"&gt;
    &lt;option value="8.01.1"&gt;Lecture 01: Powers of Ten
    &lt;option value="8.01.2"&gt;Lecture 02: 1D Kinematics
    &lt;option value="8.01.3"&gt;Lecture 03: Vectors
   &lt;optgroup label="8.02 Electricity and Magnestism"&gt;
    &lt;option value="8.02.1"&gt;Lecture 01: What holds our world together?
    &lt;option value="8.02.2"&gt;Lecture 02: Electric Field
    &lt;option value="8.02.3"&gt;Lecture 03: Electric Flux
   &lt;optgroup label="8.03 Physics III: Vibrations and Waves"&gt;
    &lt;option value="8.03.1"&gt;Lecture 01: Periodic Phenomenon
    &lt;option value="8.03.2"&gt;Lecture 02: Beats
    &lt;option value="8.03.3"&gt;Lecture 03: Forced Oscillations with Damping
  &lt;/select&gt;
 &lt;/label&gt;
 &lt;p&gt;&lt;input type=submit value="&#9654; Play"&gt;
&lt;/form&gt;</pre>

  </div>



  <h4 id=the-option-element><span class=secno>4.10.12 </span>The <dfn><code>option</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As a child of a <code><a href=#the-select-element>select</a></code> element.</dd>
   <dd>As a child of a <code><a href=#the-datalist-element>datalist</a></code> element.</dd>
   <dd>As a child of an <code><a href=#the-optgroup-element>optgroup</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#text-content title="text content">Text</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code></dd>
   <dd><code title=attr-option-label><a href=#attr-option-label>label</a></code></dd>
   <dd><code title=attr-option-selected><a href=#attr-option-selected>selected</a></code></dd>
   <dd><code title=attr-option-value><a href=#attr-option-value>value</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>[NamedConstructor=<a href=#dom-option title=dom-option>Option</a>(),
 NamedConstructor=<a href=#dom-option-t title=dom-option-t>Option</a>(in DOMString text),
 NamedConstructor=<a href=#dom-option-tv title=dom-option-tv>Option</a>(in DOMString text, in DOMString value),
 NamedConstructor=<a href=#dom-option-tvd title=dom-option-tvd>Option</a>(in DOMString text, in DOMString value, in boolean defaultSelected),
 NamedConstructor=<a href=#dom-option-tvds title=dom-option-tvds>Option</a>(in DOMString text, in DOMString value, in boolean defaultSelected, in boolean selected)]
interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-option-disabled title=dom-option-disabled>disabled</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-option-form title=dom-option-form>form</a>;
           attribute DOMString <a href=#dom-option-label title=dom-option-label>label</a>;
           attribute boolean <a href=#dom-option-defaultselected title=dom-option-defaultSelected>defaultSelected</a>;
           attribute boolean <a href=#dom-option-selected title=dom-option-selected>selected</a>;
           attribute DOMString <a href=#dom-option-value title=dom-option-value>value</a>;

           attribute DOMString <a href=#dom-option-text title=dom-option-text>text</a>;
  readonly attribute long <a href=#dom-option-index title=dom-option-index>index</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-option-element>option</a></code> element <a href=#represents>represents</a> an option
  in a <code><a href=#the-select-element>select</a></code> element or as part of a list of suggestions
  in a <code><a href=#the-datalist-element>datalist</a></code> element.</p>

  <p>The <dfn id=attr-option-disabled title=attr-option-disabled><code>disabled</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>. An
  <code><a href=#the-option-element>option</a></code> element is <dfn id=concept-option-disabled title=concept-option-disabled>disabled</dfn> if its <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute is present or
  if it is a child of an <code><a href=#the-optgroup-element>optgroup</a></code> element whose <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code> attribute is
  present.</p>

  <div class=impl>

  <p>An <code><a href=#the-option-element>option</a></code> element that is <a href=#attr-option-disabled title=attr-option-disabled>disabled</a> must prevent any <code title=event-click><a href=#event-click>click</a></code> events that are <a href=#queue-a-task title="queue
  a task">queued</a> on the <a href=#user-interaction-task-source>user interaction task
  source</a> from being dispatched on the element.</p>

  </div>

  <p>The <dfn id=attr-option-label title=attr-option-label><code>label</code></dfn>
  attribute provides a label for element. The <dfn id=concept-option-label title=concept-option-label>label</dfn> of an <code><a href=#the-option-element>option</a></code>
  element is the value of the <code title=attr-option-label><a href=#attr-option-label>label</a></code> attribute, if there is one,
  or the <code><a href=#textcontent>textContent</a></code> of the element, if there isn't.</p>

  <p>The <dfn id=attr-option-value title=attr-option-value><code>value</code></dfn>
  attribute provides a value for element. The <dfn id=concept-option-value title=concept-option-value>value</dfn> of an <code><a href=#the-option-element>option</a></code>
  element is the value of the <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute, if there is one,
  or the <code><a href=#textcontent>textContent</a></code> of the element, if there isn't.</p>

  <p>The <dfn id=attr-option-selected title=attr-option-selected><code>selected</code></dfn>
  attribute represents the default <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the
  element.</p>

  <div class=impl>

  <p>The <dfn id=concept-option-selectedness title=concept-option-selectedness>selectedness</dfn>
  of an <code><a href=#the-option-element>option</a></code> element is a boolean state, initially
  false. If the element is <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, then the element's
  <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is
  always false and cannot be set to true. Except where otherwise
  specified, when the element is created, its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> must be set
  to true if the element has a <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute. Whenever an
  <code><a href=#the-option-element>option</a></code> element's <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute is added, its
  <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> must
  be set to true.</p>

  <p class=note>The <code title=dom-option-tvd><a href=#dom-option-tvd>Option()</a></code>
  constructor with three or fewer arguments overrides the initial
  state of the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> state to
  always be false even if the third argument is true (implying that a
  <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute is to
  be set). The fourth argument can be used to explicitly set the
  initial <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> state when
  using the constructor.</p>

  </div>

  <p>A <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is not
  specified must not have more than one descendant <code><a href=#the-option-element>option</a></code>
  element with its <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code>
  attribute set.</p>

  <div class=impl>

  <p>An <code><a href=#the-option-element>option</a></code> element's <dfn id=concept-option-index title=concept-option-index>index</dfn> is the number of
  <code><a href=#the-option-element>option</a></code> element that are in the same <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> but that
  come before it in <a href=#tree-order>tree order</a>. If the
  <code><a href=#the-option-element>option</a></code> element is not in a <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, then the
  <code><a href=#the-option-element>option</a></code> element's <a href=#concept-option-index title=concept-option-index>index</a> is zero.</p>

  </div>

  <dl class=domintro><dt><var title="">option</var> . <code title=dom-option-selected><a href=#dom-option-selected>selected</a></code></dt>

   <dd>

    <p>Returns true if the element is selected, and false otherwise.</p>

   </dd>

   <dt><var title="">option</var> . <code title=dom-option-index><a href=#dom-option-index>index</a></code></dt>

   <dd>

    <p>Returns the index of the element in its <code><a href=#the-select-element>select</a></code>
    element's <code title=dom-select-options><a href=#dom-select-options>options</a></code>
    list.</p>

   </dd>

   <dt><var title="">option</var> . <code title=dom-option-form><a href=#dom-option-form>form</a></code></dt>

   <dd>

    <p>Returns the element's <code><a href=#the-form-element>form</a></code> element, if any, or
    null otherwise.</p>

   </dd>

   <dt><var title="">option</var> . <code title=dom-option-text><a href=#dom-option-text>text</a></code></dt>

   <dd>

    <p>Same as <code><a href=#textcontent>textContent</a></code>.</p>

   </dd>

   <dt><var title="">option</var> = new <code title=dom-option><a href=#dom-option>Option</a></code>( [ <var title="">text</var> [, <var title="">value</var> [, <var title="">defaultSelected</var> [, <var title="">selected</var> ] ] ] ] )</dt>

   <dd>

    <p>Returns a new <code><a href=#the-option-element>option</a></code> element.</p>

    <p>The <var title="">text</var> argument sets the contents of the element.</p>
    <p>The <var title="">value</var> argument sets the <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute.</p>
    <p>The <var title="">defaultSelected</var> argument sets the <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute.</p>
    <p>The <var title="">selected</var> argument sets whether or not the element is selected. If it is omitted, even if the <var title="">defaultSelected</var> argument is true, the element is not selected.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-option-disabled title=dom-option-disabled><code>disabled</code></dfn>
  and <dfn id=dom-option-label title=dom-option-label><code>label</code></dfn> IDL
  attributes must <a href=#reflect>reflect</a> the respective content
  attributes of the same name. The <dfn id=dom-option-defaultselected title=dom-option-defaultSelected><code>defaultSelected</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> content attribute.</p>

  <p>The <dfn id=dom-option-value title=dom-option-value><code>value</code></dfn> IDL
  attribute, on getting, must return the value of the element's <code title=attr-option-value><a href=#attr-option-value>value</a></code> content attribute, if it has
  one, or else the value of the element's <code><a href=#textcontent>textContent</a></code> IDL
  attribute. On setting, the element's <code title=attr-option-value><a href=#attr-option-value>value</a></code> content attribute must be set
  to the new value.</p>

  <p>The <dfn id=dom-option-selected title=dom-option-selected><code>selected</code></dfn>
  IDL attribute must return true if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, and
  false otherwise.</p>

  <p>The <dfn id=dom-option-index title=dom-option-index><code>index</code></dfn> IDL
  attribute must return the element's <a href=#concept-option-index title=concept-option-index>index</a>.</p>

  <p>The <dfn id=dom-option-text title=dom-option-text><code>text</code></dfn> IDL
  attribute, on getting, must return the same value as the
  <code><a href=#textcontent>textContent</a></code> IDL attribute on the element, and on
  setting, must act as if the <code><a href=#textcontent>textContent</a></code> IDL attribute
  on the element had been set to the new value.</p>

  <p>The <dfn id=dom-option-form title=dom-option-form><code>form</code></dfn> IDL
  attribute's behavior depends on whether the <code><a href=#the-option-element>option</a></code>
  element is in a <code><a href=#the-select-element>select</a></code> element or not. If the
  <code><a href=#the-option-element>option</a></code> has a <code><a href=#the-select-element>select</a></code> element as its parent,
  or has a <code><a href=#the-colgroup-element>colgroup</a></code> element as its parent and that
  <code><a href=#the-colgroup-element>colgroup</a></code> element has a <code><a href=#the-select-element>select</a></code> element as
  its parent, then the <code title=dom-option-form><a href=#dom-option-form>form</a></code> IDL
  attribute must return the same value as the <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute on that
  <code><a href=#the-select-element>select</a></code> element. Otherwise, it must return null.</p>

  <p>Several constructors are provided for creating
  <code><a href=#htmloptionelement>HTMLOptionElement</a></code> objects (in addition to the factory
  methods from DOM Core such as <code title="">createElement()</code>): <dfn id=dom-option title=dom-option><code>Option()</code></dfn>, <dfn id=dom-option-t title=dom-option-t><code>Option(<var title="">text</var>)</code></dfn>, <dfn id=dom-option-tv title=dom-option-tv><code>Option(<var title="">text</var>, <var title="">value</var>)</code></dfn>, <dfn id=dom-option-tvd title=dom-option-tvd><code>Option(<var title="">text</var>, <var title="">value</var>, <var title="">defaultSelected</var>)</code></dfn>, and <dfn id=dom-option-tvds title=dom-option-tvds><code>Option(<var title="">text</var>, <var title="">value</var>, <var title="">defaultSelected</var>, <var title="">selected</var>)</code></dfn>. When invoked as constructors,
  these must return a new <code><a href=#htmloptionelement>HTMLOptionElement</a></code> object (a new
  <code><a href=#the-option-element>option</a></code> element). If the <var title="">text</var>
  argument is present, the new object must have as its only child a
  <code><a href=#node>Node</a></code> with node type <code title="">TEXT_NODE</code> (3)
  whose data is the value of that argument<!-- we mention TEXT_NODE
  and all that explicitly here because we redefine "text node" in this
  spec to also include CDATA sections -->. If the <var title="">value</var> argument is present, the new object must have a
  <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute set with the
  value of the argument as its value. If the <var title="">defaultSelected</var> argument is present and true, the new
  object must have a <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute set with no
  value. If the <var title="">selected</var> argument is present and
  true, the new object must have its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true;
  otherwise the fourth argument is absent or false, and the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> must be set
  to false, even if the <var title="">defaultSelected</var> argument
  is present and true. The element's document must be the <a href=#active-document>active
  document</a> of the <a href=#browsing-context>browsing context</a> of the
  <code><a href=#window>Window</a></code> object on which the interface object of the
  invoked constructor is found.</p>

  </div>



  <h4 id=the-textarea-element><span class=secno>4.10.13 </span>The <dfn><code>textarea</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, <a href=#category-submit title=category-submit>submittable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#text-content title="text content">Text</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   <dd><code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code></dd>
   <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code></dd>
   <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   <dd><code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code></dd>
   <dd><code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code></dd>
   <dd><code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code></dd>
   <dd><code title=attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code></dd>
   <dd><code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmltextareaelement>HTMLTextAreaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
           attribute unsigned long <a href=#dom-textarea-cols title=dom-textarea-cols>cols</a>;
           attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
           attribute long <a href=#dom-textarea-maxlength title=dom-textarea-maxLength>maxLength</a>;
           attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
           attribute DOMString <a href=#dom-textarea-placeholder title=dom-textarea-placeholder>placeholder</a>;
           attribute boolean <a href=#dom-textarea-readonly title=dom-textarea-readOnly>readOnly</a>;
           attribute boolean <a href=#dom-textarea-required title=dom-textarea-required>required</a>;
           attribute unsigned long <a href=#dom-textarea-rows title=dom-textarea-rows>rows</a>;
           attribute DOMString <a href=#dom-textarea-wrap title=dom-textarea-wrap>wrap</a>;

  readonly attribute DOMString <a href=#dom-textarea-type title=dom-textarea-type>type</a>;
           attribute DOMString <a href=#dom-textarea-defaultvalue title=dom-textarea-defaultValue>defaultValue</a>;
           attribute DOMString <a href=#dom-textarea-value title=dom-textarea-value>value</a>;
  readonly attribute unsigned long <a href=#dom-textarea-textlength title=dom-textarea-textLength>textLength</a>;

  readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
  readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
  readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
  boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
  void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);

  readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;

  void <a href=#dom-textarea/input-select title=dom-textarea/input-select>select</a>();
           attribute unsigned long <a href=#dom-textarea/input-selectionstart title=dom-textarea/input-selectionStart>selectionStart</a>;
           attribute unsigned long <a href=#dom-textarea/input-selectionend title=dom-textarea/input-selectionEnd>selectionEnd</a>;
  void <a href=#dom-textarea/input-setselectionrange title=dom-textarea/input-setSelectionRange>setSelectionRange</a>(in unsigned long start, in unsigned long end);
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-textarea-element>textarea</a></code> element <a href=#represents>represents</a> a
  multiline plain text edit control<span class=impl> for the
  element's <dfn id=concept-textarea-raw-value title=concept-textarea-raw-value>raw
  value</dfn></span>. The contents of the control represent the
  control's default value.</p>

  <div class=impl>

  <p>The <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a> of
  a <code><a href=#the-textarea-element>textarea</a></code> control must be initially the empty
  string.</p>

  </div>

  <p>The <dfn id=attr-textarea-readonly title=attr-textarea-readonly><code>readonly</code></dfn> attribute
  is a <a href=#boolean-attribute>boolean attribute</a> used to control whether the text
  can be edited by the user or not.</p>

  <div class=impl>

  <p><strong>Constraint validation</strong>: If the <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute is
  specified on a <code><a href=#the-textarea-element>textarea</a></code> element, the element is
  <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>

  <p>A <code><a href=#the-textarea-element>textarea</a></code> element is <dfn id=concept-textarea-mutable title=concept-textarea-mutable>mutable</dfn> if it is neither
  <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> nor has a <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute
  specified.</p>

  <p>When a <code><a href=#the-textarea-element>textarea</a></code> is <a href=#concept-textarea-mutable title=concept-textarea-mutable>mutable</a>, its <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a> should be
  editable by the user. Any time the user causes the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a> to change, the
  user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-textarea-element>textarea</a></code>
  element, then <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</a> at the
  <code><a href=#the-textarea-element>textarea</a></code> element's <a href=#form-owner>form owner</a>. User agents
  may wait for a suitable break in the user's interaction before
  queuing the task; for example, a user agent could wait for the user
  to have not hit a key for 100ms, so as to only fire the event when
  the user pauses, instead of continuously for each keystroke.</p>
  <!-- same text is present in the <input> section -->

  <p>A <code><a href=#the-textarea-element>textarea</a></code> element has a <dfn id=concept-textarea-dirty title=concept-textarea-dirty>dirty value flag</dfn>, which must be
  initially set to false, and must be set to true whenever the user
  interacts with the control in a way that changes the <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a>.</p>

  <p>When the <code><a href=#the-textarea-element>textarea</a></code> element's <code><a href=#textcontent>textContent</a></code>
  IDL attribute changes value, if the element's <a href=#concept-textarea-dirty title=concept-textarea-dirty>dirty value flag</a> is false,
  then the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw
  value</a> must be set to the value of the element's
  <code><a href=#textcontent>textContent</a></code> IDL attribute.</p>

  <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
  algorithm</a> for <code><a href=#the-textarea-element>textarea</a></code> elements is to set the
  element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>value</a> to
  the value of the element's <code><a href=#textcontent>textContent</a></code> IDL
  attribute.</p>

  </div>

  <p>The <dfn id=attr-textarea-cols title=attr-textarea-cols><code>cols</code></dfn>
  attribute specifies the expected maximum number of characters per
  line. If the <code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code> attribute
  is specified, its value must be a <a href=#valid-non-negative-integer>valid non-negative
  integer</a> greater than zero. <span class=impl>If applying the
  <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to the
  attribute's value results in a number greater than zero, then the
  element's <dfn id=attr-textarea-cols-value title=attr-textarea-cols-value>character
  width</dfn> is that value; otherwise, it is 20.</span></p>

  <div class=impl>

  <p>The user agent may use the <code><a href=#the-textarea-element>textarea</a></code> element's <a href=#attr-textarea-cols-value title=attr-textarea-cols-value>character width</a> as a hint to
  the user as to how many characters the server prefers per line
  (e.g. for visual user agents by making the width of the control be
  that many characters). In visual renderings, the user agent should
  wrap the user's input in the rendering so that each line is no wider
  than this number of characters.</p>

  </div>

  <p>The <dfn id=attr-textarea-rows title=attr-textarea-rows><code>rows</code></dfn>
  attribute specifies the number of lines to show. If the <code title=attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code> attribute is specified, its
  value must be a <a href=#valid-non-negative-integer>valid non-negative integer</a> greater than
  zero. <span class=impl>If applying the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
  non-negative integers</a> to the attribute's value results in a
  number greater than zero, then the element's <dfn id=attr-textarea-rows-value title=attr-textarea-rows-value>character height</dfn> is that
  value; otherwise, it is 2.</span></p>

  <div class=impl>

  <p>Visual user agents should set the height of the control to the
  number of lines given by <a href=#attr-textarea-rows-value title=attr-textarea-rows-value>character height</a>.</p>

  </div>

  <p>The <dfn id=attr-textarea-wrap title=attr-textarea-wrap><code>wrap</code></dfn>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with two keywords
  and states: the <dfn id=attr-textarea-wrap-soft title=attr-textarea-wrap-soft><code>soft</code></dfn> keyword
  which maps to the <dfn id=attr-textarea-wrap-soft-state title=attr-textarea-wrap-soft-state>Soft</dfn> state, and the
  <dfn id=attr-textarea-wrap-hard title=attr-textarea-wrap-hard><code>hard</code></dfn> keyword
  which maps to the <dfn id=attr-textarea-wrap-hard-state title=attr-textarea-wrap-hard-state>Hard</dfn> state. The
  <i>missing value default</i> is the <a href=#attr-textarea-wrap-soft-state title=attr-textarea-wrap-soft-state>Soft</a> state.</p>

  <p>If the element's <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code>
  attribute is in the <a href=#attr-textarea-wrap-hard-state title=attr-textarea-wrap-hard-state>Hard</a> state, the <code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code> attribute must be
  specified.</p>

  <!-- attr-textarea-wrap-off (attr-textarea-wrap-off-state): not
  conforming; turns off the rendering of wrapping but otherwise acts
  like 'soft' -->

  <div class=impl>

  <p>The element's <a href=#concept-fe-value title=concept-fe-value>value</a> is
  defined to be the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a> with the
  following transformation applied:</p>

  <ol><li><p>Replace every occurrence of a U+000D CARRIAGE RETURN (CR)
   character not followed by a U+000A LINE FEED (LF) character, and
   every occurrence of a U+000A LINE FEED (LF) character not preceded
   by a U+000D CARRIAGE RETURN (CR) character, by a two-character
   string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED
   (CRLF) character pair.</li>

   <li><p>If the element's <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code> attribute is in the <a href=#attr-textarea-wrap-hard-state title=attr-textarea-wrap-hard-state>Hard</a> state, insert
   U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs
   into the string using a UA-defined algorithm so that each line has
   no more than <a href=#attr-textarea-cols-value title=attr-textarea-cols-value>character
   width</a> characters. For the purposes of this requirement,
   lines are delimited by the start of the string, the end of the
   string, and U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF)
   character pairs.</li>

  </ol></div>

  <p>The <dfn id=attr-textarea-maxlength title=attr-textarea-maxlength><code>maxlength</code></dfn>
  attribute is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a> controlled by the
  <code><a href=#the-textarea-element>textarea</a></code> element's <a href=#concept-textarea-dirty title=concept-textarea-dirty>dirty value flag</a>.</p>

  <p>If the <code><a href=#the-textarea-element>textarea</a></code> element has a <a href=#maximum-allowed-value-length>maximum allowed
  value length</a>, then the element's children must be such that
  the <a href=#code-point-length>code-point length</a> of the value of the element's
  <code><a href=#textcontent>textContent</a></code> IDL attribute is equal to or less than the
  element's <a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>

  <p>The <dfn id=attr-textarea-required title=attr-textarea-required><code>required</code></dfn> attribute
  is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the user will
  be required to enter a value before submitting the form.</p>

  <div class=impl>

  <p><strong>Constraint validation</strong>: If the element has its
  <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code> attribute
  specified, and the element is <a href=#concept-textarea-mutable title=concept-textarea-mutable>mutable</a>, and the element's
  <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string,
  then the element is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p>

  </div>


  <!-- similar text in the <input> section -->

  <p>The <dfn id=attr-textarea-placeholder title=attr-textarea-placeholder><code>placeholder</code></dfn>
  attribute represents a hint (a word or short phrase) intended to aid
  the user with data entry. A hint could be a sample value or a brief
  description of the expected format. The attribute, if specified,
  must have a value that contains no U+000A LINE FEED (LF) or U+000D
  CARRIAGE RETURN (CR) characters.</p>

  <p class=note>For a longer hint or other advisory text, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is more appropriate.</p>

  <p>The <code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code>
  attribute should not be used as an alternative to a
  <code><a href=#the-label-element>label</a></code>.</p>

  <div class=impl>

  <p>User agents should present this hint to the user, after having
  <a href=#strip-line-breaks title="strip line breaks">stripped line breaks</a> from it,
  when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is
  the empty string and the control is not focused (e.g. by displaying
  it inside a blank unfocused control).</p>

  </div>


  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-textarea-element>textarea</a></code> element with its
  <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
  attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
  attribute controls focus.</p>

  <dl class=domintro><dt><var title="">textarea</var> . <code title=attr-textarea-type>type</code></dt>

   <dd>

    <p>Returns the string "<code title="">textarea</code>".</p>

   </dd>

   <dt><var title="">textarea</var> . <code title=attr-textarea-value>value</code></dt>

   <dd>

    <p>Returns the current value of the element.</p>

    <p>Can be set, to change the value.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-textarea-cols title=dom-textarea-cols><code>cols</code></dfn>, <dfn id=dom-textarea-placeholder title=dom-textarea-placeholder><code>placeholder</code></dfn>,
  <dfn id=dom-textarea-required title=dom-textarea-required><code>required</code></dfn>, <dfn id=dom-textarea-rows title=dom-textarea-rows><code>rows</code></dfn>, and <dfn id=dom-textarea-wrap title=dom-textarea-wrap><code>wrap</code></dfn> attributes must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name. The <code title=dom-textarea-cols><a href=#dom-textarea-cols>cols</a></code> and <code title=dom-textarea-rows><a href=#dom-textarea-rows>rows</a></code> attributes are <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited
  to only non-negative numbers greater than zero</a>. The <dfn id=dom-textarea-maxlength title=dom-textarea-maxLength><code>maxLength</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code> content attribute,
  <a href=#limited-to-only-non-negative-numbers>limited to only non-negative numbers</a>. The <dfn id=dom-textarea-readonly title=dom-textarea-readOnly><code>readOnly</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-textarea-type title=dom-textarea-type><code>type</code></dfn> IDL
  attribute must return the value "<code title="">textarea</code>".</p>

  <p>The <dfn id=dom-textarea-defaultvalue title=dom-textarea-defaultValue><code>defaultValue</code></dfn>
  IDL attribute must act like the element's <code><a href=#textcontent>textContent</a></code>
  IDL attribute.</p>

  <p>The <dfn id=dom-textarea-value title=dom-textarea-value><code>value</code></dfn>
  attribute must, on getting, return the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a>; on setting, it
  must set the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw
  value</a> to the new value.</p>

  <p>The <dfn id=dom-textarea-textlength title=dom-textarea-textLength><code>textLength</code></dfn> IDL
  attribute must return the <a href=#code-point-length>code-point length</a> of the
  element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>

  <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
  attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
  methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
  <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
  of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>, <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
  <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
  and <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
  methods and attributes expose the element's text selection. The
  <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div>

  <div class=example>

   <p>Here is an example of a <code><a href=#the-textarea-element>textarea</a></code> being used for
   unrestricted free-form text input in a form:</p>

   <pre>&lt;p&gt;If you have any comments, please let us know: &lt;textarea cols=80 name=comments&gt;&lt;/textarea&gt;&lt;/p&gt;</pre>

  </div>



  <h4 id=the-keygen-element><span class=secno>4.10.14 </span>The <dfn><code>keygen</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, <a href=#category-submit title=category-submit>submittable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   <dd><code title=attr-keygen-challenge><a href=#attr-keygen-challenge>challenge</a></code></dd>
   <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keytype</a></code></dd>
   <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlkeygenelement>HTMLKeygenElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
           attribute DOMString <a href=#dom-keygen-challenge title=dom-keygen-challenge>challenge</a>;
           attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
           attribute DOMString <a href=#dom-keygen-keytype title=dom-keygen-keytype>keytype</a>;
           attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;

  readonly attribute DOMString <a href=#dom-keygen-type title=dom-keygen-type>type</a>;

  readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
  readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
  readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
  boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
  void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);

  readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-keygen-element>keygen</a></code> element <a href=#represents>represents</a> a key
  pair generator control. When the control's form is submitted, the
  private key is stored in the local keystore, and the public key is
  packaged and sent to the server.</p>

  <p>The <dfn id=attr-keygen-challenge title=attr-keygen-challenge><code>challenge</code></dfn> attribute
  may be specified. Its value will be packaged with the submitted
  key.</p>

  <p>The <dfn id=attr-keygen-keytype title=attr-keygen-keytype><code>keytype</code></dfn>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
  table lists the keywords and states for the attribute &mdash; the
  keywords in the left column map to the states listed in the cell in
  the second column on the same row as the keyword. User agents are
  not required to support these values, and must only recognize values
  whose corresponding algorithms they support.</p>

  <table><thead><tr><th> Keyword <th> State
   <tbody><tr><td> <code title="">rsa</code>
     <td> <i title="">RSA</i>
<!-- v2 (see below)
    <tr>
     <td> <code title="">ec</code>
     <td> <i title="">EC</i>
-->
  </table><p>The <i>invalid value default</i> state is the <i title="">unknown</i> state. The <i>missing value default</i> state
  is the <i title="">RSA</i> state, if it is supported, or the <i title="">unknown</i> state otherwise.</p>

  <p class=note>This specification does not specify what key types
  user agents are to support &mdash; it is possible for a user agent
  to not support any key types at all.</p>

  <div class=impl>

  <p>The user agent may expose a user interface for each
  <code><a href=#the-keygen-element>keygen</a></code> element to allow the user to configure settings
  of the element's key pair generator, e.g. the key length.</p>

  <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
  algorithm</a> for <code><a href=#the-keygen-element>keygen</a></code> elements is to set these
  various configuration settings back to their defaults.</p>

  <p>The element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the
  string returned from the following algorithm:</p>

  <ol><li>

    <p>Use the appropriate step from the following list:</p>

    <dl class=switch><!-- v2 (see above)

     <dt>If the <code title="attr-keygen-keytype">keytype</code>
     attribute is in the <i title="">EC</i> state</dt>

     <dd>

      <p>...

      http://www.mail-archive.com/dev-tech-crypto@lists.mozilla.org/msg05902.html

     </dd>

     --><dt>If the <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keytype</a></code>
     attribute is in the <i title="">RSA</i> state</dt>

     <dd>

      <p>Generate an RSA key pair using the settings given by the
      user, if appropriate, using the <code title="">md5WithRSAEncryption</code> RSA signature algorithm
      (the signature algorithm with MD5 and the RSA encryption
      algorithm) referenced in section 2.2.1 ("RSA Signature
      Algorithm") of RFC 3279, and defined in RFC 2313. <a href=#refsRFC3279>[RFC3279]</a> <a href=#refsRFC2313>[RFC2313]</a></p>

     </dd>

     <dt>Otherwise, the <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keytype</a></code> attribute is in the <i title="">unknown</i> state</dt>

     <dd>

      <p>The given key type is not supported. Return the empty string
      and abort this algorithm.</p>

     </dd>

    </dl><p>Let <var title="">private key</var> be the generated private key.</p>

    <p>Let <var title="">public key</var> be the generated public key.</p>

    <p>Let <var title="">signature algorithm</var> be the selected
    signature algorithm.</p>

   </li>

   <li>

    <p>If the element has a <code title=attr-keygen-challenge><a href=#attr-keygen-challenge>challenge</a></code> attribute, then let
    <var title="">challenge</var> be that attribute's value.
    Otherwise, let <var title="">challenge</var> be the empty
    string.</p>

   </li>

   <li>

    <p>Let <var title="">algorithm</var> be an ASN.1 <code title="">AlgorithmIdentifier</code> structure as defined by
    RFC 5280, with the <code title="">algorithm</code> field giving the
    ASN.1 OID used to identify <var title="">signature
    algorithm</var>, using the OIDs defined in section 2.2 ("Signature
    Algorithms") of RFC 3279, and the <code title="">parameters</code>
    field set up as required by RFC 3279 for <code title="">AlgorithmIdentifier</code> structures for that
    algorithm. <a href=#refsX690>[X690]</a> <a href=#refsRFC5280>[RFC5280]</a> <a href=#refsRFC3279>[RFC3279]</a></p>

   </li>

   <li>

    <p>Let <var title="">spki</var> be an ASN.1 <code title="">SubjectPublicKeyInfo</code> structure as defined by
    RFC 5280, with the <code title="">algorithm</code> field set to the
    <var title="">algorithm</var> structure from the previous step,
    and the <code title="">subjectPublicKey</code> field set to the
    BIT STRING value resulting from ASN.1 DER encoding the <var title="">public key</var>. <a href=#refsX690>[X690]</a> <a href=#refsRFC5280>[RFC5280]</a></p>

   </li>

   <li>

    <p>Let <var title="">publicKeyAndChallenge</var> be an ASN.1
    <code><a href=#publickeyandchallenge>PublicKeyAndChallenge</a></code> structure as defined below,
    with the <code title="">spki</code> field set to the <var title="">spki</var> structure from the previous step, and the
    <code title="">challenge</code> field set to the string <var title="">challenge</var> obtained earlier. <a href=#refsX690>[X690]</a></p>

   </li>

   <li>

    <p>Let <var title="">signature</var> be the BIT STRING value
    resulting from ASN.1 DER encoding the signature generated by
    applying the <var title="">signature algorithm</var> to the byte
    string obtained by ASN.1 DER encoding the <var title="">publicKeyAndChallenge</var> structure, using <var title="">private key</var> as the signing key. <a href=#refsX690>[X690]</a></p>

   </li>

   <li>

    <p>Let <var title="">signedPublicKeyAndChallenge</var> be an ASN.1
    <code><a href=#signedpublickeyandchallenge>SignedPublicKeyAndChallenge</a></code> structure as defined
    below, with the <code title="">publicKeyAndChallenge</code> field
    set to the <var title="">publicKeyAndChallenge</var> structure,
    the <code title="">signatureAlgorithm</code> field set to the <var title="">algorithm</var> structure, and the <code title="">signature</code> field set to the BIT STRING <var title="">signature</var> from the previous step. <a href=#refsX690>[X690]</a></p>

   </li>

   <li>

    <p>Return the result of base64 encoding the result of ASN.1 DER
    encoding the <var title="">signedPublicKeyAndChallenge</var>
    structure. <a href=#refsRFC3548>[RFC3548]</a><!--base64--> <a href=#refsX690>[X690]</a></p>

   </li>

  </ol><p>The data objects used by the above algorithm are defined as
  follows. These definitions use the same "ASN.1-like" syntax defined
  by RFC 5280. <a href=#refsRFC5280>[RFC5280]</a></p>

  <pre class=asn><dfn id=publickeyandchallenge>PublicKeyAndChallenge</dfn> ::= SEQUENCE {
    spki <span>SubjectPublicKeyInfo</span>,
    challenge IA5STRING
}

<dfn id=signedpublickeyandchallenge>SignedPublicKeyAndChallenge</dfn> ::= SEQUENCE {
    publicKeyAndChallenge <a href=#publickeyandchallenge>PublicKeyAndChallenge</a>,
    signatureAlgorithm <span>AlgorithmIdentifier</span>,
    signature BIT STRING
}</pre>

  <hr><p><strong>Constraint validation</strong>: The <code><a href=#the-keygen-element>keygen</a></code>
  element is <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>

  </div>

  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-keygen-element>keygen</a></code> element with its
  <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
  attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
  attribute controls focus.</p>

  <dl class=domintro><dt><var title="">keygen</var> . <code title=attr-keygen-type>type</code></dt>

   <dd>

    <p>Returns the string "<code title="">keygen</code>".</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-keygen-challenge title=dom-keygen-challenge><code>challenge</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attributes of the
  same name.</p>

  <p>The <dfn id=dom-keygen-keytype title=dom-keygen-keytype><code>keytype</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the content attributes of
  the same name, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>The <dfn id=dom-keygen-type title=dom-keygen-type><code>type</code></dfn> IDL
  attribute must return the value "<code title="">keygen</code>".</p>

  <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
  attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
  methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
  <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
  of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div>

  <p class=note>This specification does not specify how the private
  key generated is to be used. It is expected that after receiving the
  <code><a href=#signedpublickeyandchallenge>SignedPublicKeyAndChallenge</a></code> (SPKAC) structure, the
  server will generate a client certificate and offer it back to the
  user for download; this certificate, once downloaded and stored in
  the key store along with the private key, can then be used to
  authenticate to services that use SSL and certificate
  authentication.</p>

  <!-- how does the UA know which private key is associated with a
  certificate it gets back after the server has taken the public key
  created by <keygen> and turned it into a client cert? -->

  <div class=example>

   <p>To generate a key pair, add the private key to the user's key
   store, and submit the public key to the server, markup such as the
   following can be used:</p>

   <pre>&lt;form action="processkey.cgi" method="post" enctype="multipart/form-data"&gt;
 &lt;p&gt;&lt;keygen name="key"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit value="Submit key..."&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

   <p>The server will then receive a form submission with a packaged
   RSA public key as the value of "<code title="">key</code>". This
   can then be used for various purposes, such as generating a client
   certificate, as mentioned above.</p>

  </div>



  <h4 id=the-output-element><span class=secno>4.10.15 </span>The <dfn><code>output</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-output-for><a href=#attr-output-for>for</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmloutputelement>HTMLOutputElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
  [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <span title=dom-output-wrap>htmlFor</span>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
           attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;

  readonly attribute DOMString <a href=#dom-output-type title=dom-output-type>type</a>;
           attribute DOMString <a href=#dom-output-defaultvalue title=dom-output-defaultValue>defaultValue</a>;
           attribute DOMString <a href=#dom-output-value title=dom-output-value>value</a>;

  readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
  readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
  readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
  boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
  void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);

  readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-output-element>output</a></code> element <a href=#represents>represents</a> the result of a
  calculation.</p>

  <p>The <dfn id=attr-output-for title=attr-output-for><code>for</code></dfn> content
  attribute allows an explicit relationship to be made between the
  result of a calculation and the elements that represent the values
  that went into the calculation or that otherwise influenced the
  calculation. The <code title=attr-output-for><a href=#attr-output-for>for</a></code> attribute,
  if specified, must contain a string consisting of an <a href=#unordered-set-of-unique-space-separated-tokens>unordered
  set of unique space-separated tokens</a>, each of which must have
  the value of an ID of an element in the same
  <code><a href=#document>Document</a></code>.</p>

  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-output-element>output</a></code> element with its
  <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
  attribute represents the element's name.</p>

  <div class=impl>

  <p>The element has a <dfn id=concept-output-mode title=concept-output-mode>value mode
  flag</dfn> which is either <i title=concept-output-mode-value>value</i> or <i title=concept-output-mode-default>default</i>. Initially, the
  <a href=#concept-output-mode title=concept-output-mode>value mode flag</a> must be set
  to <i title=concept-output-mode-default>default</i>.</p>

  <p>The element also has a <dfn id=concept-output-defaultvalue title=concept-output-defaultValue>default value</dfn>. Initially,
  the <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a>
  must be the empty string.</p>

  <p>When the <a href=#concept-output-mode title=concept-output-mode>value mode flag</a>
  is in mode <i title=concept-output-mode-default>default</i>, the
  contents of the element represent both the value of the element and
  its <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default
  value</a>. When the <a href=#concept-output-mode title=concept-output-mode>value mode
  flag</a> is in mode <i title=concept-output-mode-value>value</i>, the contents of the
  element represent the value of the element only, and the <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a> is only
  accessible using the <code title=dom-output-defaultValue><a href=#dom-output-defaultvalue>defaultValue</a></code> IDL
  attribute.</p>

  <p>Whenever the element's descendants are changed in any way, if the
  <a href=#concept-output-mode title=concept-output-mode>value mode flag</a> is in mode
  <i title=concept-output-mode-default>default</i>, the element's
  <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a> must
  be set to the value of the element's <code><a href=#textcontent>textContent</a></code> IDL
  attribute.</p>

  <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
  algorithm</a> for <code><a href=#the-output-element>output</a></code> elements is to set the
  element's <a href=#concept-output-mode title=concept-output-mode>value mode flag</a>
  to <i title=concept-output-mode-default>default</i> and then to
  set the element's <code><a href=#textcontent>textContent</a></code> IDL attribute to the
  value of the element's <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a> (thus
  replacing the element's child nodes).</p>

  </div>

  <dl class=domintro><dt><var title="">output</var> . <code title=dom-output-value><a href=#dom-output-value>value</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the element's current value.</p>

    <p>Can be set, to change the value.</p>

   </dd>

   <dt><var title="">output</var> . <code title=dom-output-defaultValue><a href=#dom-output-defaultvalue>defaultValue</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the element's current default value.</p>

    <p>Can be set, to change the default value.</p>

   </dd>

   <dt><var title="">output</var> . <code title=dom-output-type><a href=#dom-output-type>type</a></code></dt>

   <dd>

    <p>Returns the string "<code title="">output</code>".</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-output-value title=dom-output-value><code>value</code></dfn> IDL
  attribute must act like the element's <code><a href=#textcontent>textContent</a></code> IDL
  attribute, except that on setting, in addition, before the child
  nodes are changed, the element's <a href=#concept-output-mode title=concept-output-mode>value mode flag</a> must be set to <i title=concept-output-mode-value>value</i>.</p>

  <p>The <dfn id=dom-output-defaultvalue title=dom-output-defaultValue><code>defaultValue</code></dfn> IDL
  attribute, on getting, must return the element's <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a>. On
  setting, the attribute must set the element's <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a>, and, if
  the element's <a href=#concept-output-mode title=concept-output-mode>value mode
  flag</a> is in the mode <i title=concept-output-mode-default>default</i>, set the element's
  <code><a href=#textcontent>textContent</a></code> IDL attribute as well.</p>

  <p>The <dfn id=dom-output-type title=dom-output-type><code>type</code></dfn>
  attribute must return the string "<code title="">output</code>".</p>

  <p>The <dfn id=dom-output-htmlfor title=dom-output-htmlFor><code>htmlFor</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-output-for><a href=#attr-output-for>for</a></code> content attribute.</p>

  <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
  attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
  methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
  <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
  of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
  element's forms API.</p>

  <p><strong>Constraint validation</strong>: <code><a href=#the-output-element>output</a></code>
  elements are always <a href=#barred-from-constraint-validation>barred from constraint
  validation</a>.</p>

  </div>

  <div class=example>

   <p>A simple calculator could use <code><a href=#the-output-element>output</a></code> for its
   display of calculated results:</p>

   <pre>&lt;form onsubmit="return false"&gt;
 &lt;input name=a type=number step=any&gt; +
 &lt;input name=b type=number step=any&gt; =
 &lt;output onforminput="value = a.valueAsNumber + b.valueAsNumber"&gt;&lt;/output&gt;
&lt;/form&gt;</pre>

  </div>



  <h4 id=the-progress-element><span class=secno>4.10.16 </span>The <dfn><code>progress</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#category-label title=category-label>Labelable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-progress-element>progress</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-progress-value><a href=#attr-progress-value>value</a></code></dd>
   <dd><code title=attr-progress-max><a href=#attr-progress-max>max</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlprogresselement>HTMLProgressElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute float <a href=#dom-progress-value title=dom-progress-value>value</a>;
           attribute float <a href=#dom-progress-max title=dom-progress-max>max</a>;
  readonly attribute float <a href=#dom-progress-position title=dom-progress-position>position</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
  readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-progress-element>progress</a></code> element <a href=#represents>represents</a> the
  completion progress of a task. The progress is either indeterminate,
  indicating that progress is being made but that it is not clear how
  much more work remains to be done before the task is complete
  (e.g. because the task is waiting for a remote host to respond), or
  the progress is a number in the range zero to a maximum, giving the
  fraction of work that has so far been completed.</p>

  <p>There are two attributes that determine the current task
  completion represented by the element.</p>

  <p>The <dfn id=attr-progress-value title=attr-progress-value><code>value</code></dfn>
  attribute specifies how much of the task has been completed, and the
  <dfn id=attr-progress-max title=attr-progress-max><code>max</code></dfn> attribute
  specifies how much work the task requires in total. The units are
  arbitrary and not specified.</p>

  <p>Authors are encouraged to also include the current value and the
  maximum value inline as text inside the element, so that the
  progress is made available to users of legacy user agents.</p>

  <div class=example>
   <p>Here is a snippet of a Web application that shows the progress
   of some automated task:</p>
   <pre>&lt;section&gt;
 &lt;h2&gt;Task Progress&lt;/h2&gt;
 &lt;p&gt;Progress: &lt;progress id="p" max=100&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;&lt;/p&gt;
 &lt;script&gt;
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 &lt;/script&gt;
&lt;/section&gt;</pre>
   <p>(The <code>updateProgress()</code> method in this example would
   be called by some other code on the page to update the actual
   progress bar as the task progressed.)</p>
  </div>

  <p>The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> and <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attributes, when present, must
  have values that are <a href=#valid-floating-point-number title="valid floating point number">valid
  floating point numbers</a>. The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if present, must
  have a value equal to or greater than zero, and less than or equal
  to the value of the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
  attribute, if present, or 1.0, otherwise. The <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, if present, must
  have a value greater than zero.</p>

  <p class=note>The <code><a href=#the-progress-element>progress</a></code> element is the wrong
  element to use for something that is just a gauge, as opposed to
  task progress. For instance, indicating disk space usage using
  <code><a href=#the-progress-element>progress</a></code> would be inappropriate. Instead, the
  <code><a href=#the-meter-element>meter</a></code> element is available for such use cases.</p>

  <div class=impl>

  <p><strong>User agent requirements</strong>: If the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute is omitted, then
  the progress bar is an indeterminate progress bar. Otherwise, it is
  a determinate progress bar.</p>

  <p>If the progress bar is a determinate progress bar and the element
  has a <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, the user
  agent must parse the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
  attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
  point number values</a>. If this does not result in an error, and
  if the parsed value is greater than zero, then the maximum value of
  the progress bar is that value. Otherwise, if the element has no
  <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, or if it has
  one but parsing it resulted in an error, or if the parsed value was
  less than or equal to zero, then the maximum value of the progress
  bar is 1.0.</p>

  <p>If the progress bar is a determinate progress bar, user agents
  must parse the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code>
  attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
  point number values</a>. If this does not result in an error, and
  if the parsed value is less than the maximum value and greater than
  zero, then the current value of the progress bar is that parsed
  value. Otherwise, if the parsed value was greater than or equal to
  the maximum value, then the current value of the progress bar is the
  maximum value of the progress bar. Otherwise, if parsing the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute's value resulted
  in an error, or a number less than or equal to zero, then the
  current value of the progress bar is zero.</p>

  <p><strong>UA requirements for showing the progress bar</strong>:
  When representing a <code><a href=#the-progress-element>progress</a></code> element to the user, the
  UA should indicate whether it is a determinate or indeterminate
  progress bar, and in the former case, should indicate the relative
  position of the current value relative to the maximum value.</p>

  <p>The <dfn id=dom-progress-max title=dom-progress-max><code>max</code></dfn> and <dfn id=dom-progress-value title=dom-progress-value><code>value</code></dfn> IDL attributes
  must <a href=#reflect>reflect</a> the respective content attributes of the
  same name. When the relevant content attributes are absent, the IDL
  attributes must return zero.</p>

  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-progress-element>progress</a></code> element with its
  <a href=#form-owner>form owner</a>.</p>

  </div>

  <dl class=domintro><dt><var title="">progress</var> . <code title=dom-progress-position><a href=#dom-progress-position>position</a></code></dt>

   <dd>

    <p>For a determinate progress bar (one with known current and
    maximum values), returns the result of dividing the current value
    by the maximum value.</p>

    <p>For an indeterminate progress bar, returns &minus;1.</p>

  </dl><div class=impl>

  <p>If the progress bar is an indeterminate progress bar, then the
  <dfn id=dom-progress-position title=dom-progress-position><code>position</code></dfn> IDL
  attribute must return &minus;1. Otherwise, it must return the result of
  dividing the current value by the maximum value.</p>

  <p>The <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides
  a list of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute is part of the
  element's forms API.</p>

  </div>



  <h4 id=the-meter-element><span class=secno>4.10.17 </span>The <dfn><code>meter</code></dfn> element</h4>
  <!-- Keep this after <progress> and NOT close to <time> -->

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#category-label title=category-label>Labelable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-meter-element>meter</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-meter-value><a href=#attr-meter-value>value</a></code></dd>
   <dd><code title=attr-meter-min><a href=#attr-meter-min>min</a></code></dd>
   <dd><code title=attr-meter-max><a href=#attr-meter-max>max</a></code></dd>
   <dd><code title=attr-meter-low><a href=#attr-meter-low>low</a></code></dd>
   <dd><code title=attr-meter-high><a href=#attr-meter-high>high</a></code></dd>
   <dd><code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code></dd>
   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlmeterelement>HTMLMeterElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute float <a href=#dom-meter-value title=dom-meter-value>value</a>;
           attribute float <a href=#dom-meter-min title=dom-meter-min>min</a>;
           attribute float <a href=#dom-meter-max title=dom-meter-max>max</a>;
           attribute float <a href=#dom-meter-low title=dom-meter-low>low</a>;
           attribute float <a href=#dom-meter-high title=dom-meter-high>high</a>;
           attribute float <a href=#dom-meter-optimum title=dom-meter-optimum>optimum</a>;
  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
  readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-meter-element>meter</a></code> element <a href=#represents>represents</a> a scalar
  measurement within a known range, or a fractional value; for example
  disk usage, the relevance of a query result, or the fraction of a
  voting population to have selected a particular candidate.</p>

  <p>This is also known as a gauge.</p>

  <p class=note>The <code><a href=#the-meter-element>meter</a></code> element should not be used to
  indicate progress (as in a progress bar). For that role, HTML
  provides a separate <code><a href=#the-progress-element>progress</a></code> element.</p>

  <p class=note>The <code><a href=#the-meter-element>meter</a></code> element also does not
  represent a scalar value of arbitrary range &mdash; for example, it
  would be wrong to use this to report a weight, or height, unless
  there is a known maximum value.</p>

  <p>There are six attributes that determine the semantics of the
  gauge represented by the element.</p>

  <p>The <dfn id=attr-meter-min title=attr-meter-min><code>min</code></dfn> attribute
  specifies the lower bound of the range, and the <dfn id=attr-meter-max title=attr-meter-max><code>max</code></dfn> attribute specifies
  the upper bound. The <dfn id=attr-meter-value title=attr-meter-value><code>value</code></dfn> attribute
  specifies the value to have the gauge indicate as the "measured"
  value.</p>

  <p>The other three attributes can be used to segment the gauge's
  range into "low", "medium", and "high" parts, and to indicate which
  part of the gauge is the "optimum" part. The <dfn id=attr-meter-low title=attr-meter-low><code>low</code></dfn> attribute specifies
  the range that is considered to be the "low" part, and the <dfn id=attr-meter-high title=attr-meter-high><code>high</code></dfn> attribute specifies
  the range that is considered to be the "high" part. The <dfn id=attr-meter-optimum title=attr-meter-optimum><code>optimum</code></dfn> attribute
  gives the position that is "optimum"; if that is higher than the
  "high" value  then this indicates that the higher the value, the
  better; if it's lower than the "low" mark then it indicates that
  lower values are better, and naturally if it is in between then it
  indicates that neither high nor low values are good.</p>

  <p><span class=impl><strong>Authoring
  requirements</strong>:</span> The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute must be
  specified. The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes, when present,
  must have values that are <a href=#valid-floating-point-number title="valid floating point
  number">valid floating point numbers</a>.</p>

  <p>In addition, the attributes' values are further constrained:</p>

  <p>Let <var title="">value</var> be the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute's number.</p>

  <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute
  attribute is specified, then let <var title="">minimum</var> be that
  attribute's value; otherwise, let it be zero.</p>

  <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute
  attribute is specified, then let <var title="">maximum</var> be that
  attribute's value; otherwise, let it be 1.0.</p>

  <p>The following inequalities must hold, as applicable:</p>

  <ul class=brief><li><var title="">minimum</var> &le; <var title="">value</var> &le; <var title="">maximum</var></li>
   <li><var title="">minimum</var> &le; <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> is specified)</li>
   <li><var title="">minimum</var> &le; <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> is specified)</li>
   <li><var title="">minimum</var> &le; <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> is specified)</li>
   <li><code title=attr-meter-low><a href=#attr-meter-low>low</a></code> &le; <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> (if both <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> and <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> are specified)</li>
  </ul><p class=note>If no minimum or maximum is specified, then the
  range is assumed to be 0..1, and the value thus has to be within
  that range.</p>

  <p>Authors are encouraged to include a textual representation of the
  gauge's state in the element's contents, for users of user agents
  that do not support the <code><a href=#the-meter-element>meter</a></code> element.</p>

  <div class=example>

   <p>The following examples show three gauges that would all be
   three-quarters full:</p>

   <pre>Storage space usage: &lt;meter value=6 max=8&gt;6 blocks used (out of 8 total)&lt;/meter&gt;
Voter turnout: &lt;meter value=0.75&gt;&lt;img alt="75%" src="graph75.png"&gt;&lt;/meter&gt;
Tickets sold: &lt;meter min="0" max="100" value="75"&gt;&lt;/meter&gt;</pre>

   <p>The following example is incorrect use of the element, because
   it doesn't give a range (and since the default maximum is 1, both
   of the gauges would end up looking maxed out):</p>

   <pre class=bad>&lt;p&gt;The grapefruit pie had a radius of &lt;meter value=12&gt;12cm&lt;/meter&gt;
and a height of &lt;meter value=2&gt;2cm&lt;/meter&gt;.&lt;/p&gt; &lt;!-- <strong>BAD!</strong> --&gt;</pre>

   <p>Instead, one would either not include the meter element, or use
   the meter element with a defined range to give the dimensions in
   context compared to other pies:</p>

   <pre>&lt;p&gt;The grapefruit pie had a radius of 12cm and a height of
2cm.&lt;/p&gt;
&lt;dl&gt;
 &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12&gt;12cm&lt;/meter&gt;
 &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2&gt;2cm&lt;/meter&gt;
&lt;/dl&gt;</pre>

  </div>

  <p>There is no explicit way to specify units in the
  <code><a href=#the-meter-element>meter</a></code> element, but the units may be specified in the
  <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute in free-form text.</p>

  <div class=example>

   <p>The example above could be extended to mention the units:</p>

   <pre>&lt;dl&gt;
 &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12 title="centimeters"&gt;12cm&lt;/meter&gt;
 &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2 title="centimeters"&gt;2cm&lt;/meter&gt;
&lt;/dl&gt;</pre>

  </div>

  <div class=impl>

  <p><strong>User agent requirements</strong>: User agents must parse
  the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes using the
  <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a>.</p>

  <p>User agents must then use all these numbers to obtain values for
  six points on the gauge, as follows. (The order in which these are
  evaluated is important, as some of the values refer to earlier
  ones.)</p>

  <dl><dt>The minimum value</dt>

   <dd>
    <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute is
    specified and a value could be parsed out of it, then the minimum
    value is that value. Otherwise, the minimum value is zero.</p>
   </dd>

   <dt>The maximum value</dt>

   <dd>

    <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute is
    specified and a value could be parsed out of it, the maximum value
    is that value. Otherwise, the maximum value is 1.0.</p>

    <p>If the maximum value would be less than the minimum value, then
    the maximum value is actually the same as the minimum value.</p>

   </dd>

   <dt>The actual value</dt>

   <dd>

    <p>If the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute is
    specified and a value could be parsed out of it, then that value
    is the actual value. Otherwise, the actual value is zero.</p>

    <p>If the actual value would be less than the minimum value, then
    the actual value is actually the same as the minimum value.</p>

    <p>If, on the other hand, the actual value would be greater than
    the maximum value, then the actual value is the maximum value.</p>

   </dd>

   <dt>The low boundary</dt>

   <dd>

    <p>If the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> attribute is
    specified and a value could be parsed out of it, then the low
    boundary is that value. Otherwise, the low boundary is the same as
    the minimum value.</p>

    <p>If the low boundary is then less than the minimum value, then
    the low boundary is actually the same as the minimum
    value. Similarly, if the low boundary is greater than the maximum
    value, then it is actually the maximum value instead.</p>

   </dd>

   <dt>The high boundary</dt>

   <dd>

    <p>If the <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attribute is
    specified and a value could be parsed out of it, then the high
    boundary is that value. Otherwise, the high boundary is the same
    as the maximum value.</p>

    <p>If the high boundary is then less than the low boundary, then
    the high boundary is actually the same as the low
    boundary. Similarly, if the high boundary is greater than the
    maximum value, then it is actually the maximum value instead.</p>

   </dd>

   <dt>The optimum point</dt>

   <dd>

    <p>If the <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code>
    attribute is specified and a value could be parsed out of it, then
    the optimum point is that value. Otherwise, the optimum point is
    the midpoint between the minimum value and the maximum value.</p>

    <p>If the optimum point is then less than the minimum value, then
    the optimum point is actually the same as the minimum
    value. Similarly, if the optimum point is greater than the maximum
    value, then it is actually the maximum value instead.</p>

   </dd>

  </dl><p>All of which will result in the following inequalities all being
  true:</p>

  <ul class=brief><li>minimum value &le; actual value &le; maximum value</li>
   <li>minimum value &le; low boundary &le; high boundary &le; maximum value</li>
   <li>minimum value &le; optimum point &le; maximum value</li>
  </ul><!-- next two paragraphs are duplicated in the <datagrid> section [v2DATAGRID] --><p><strong>UA requirements for regions of the gauge</strong>: If the
  optimum point is equal to the low boundary or the high boundary, or
  anywhere in between them, then the region between the low and high
  boundaries of the gauge must be treated as the optimum region, and
  the low and high parts, if any, must be treated as
  suboptimal. Otherwise, if the optimum point is less than the low
  boundary, then the region between the minimum value and the low
  boundary must be treated as the optimum region, the region between
  the low boundary and the high boundary must be treated as a
  suboptimal region, and the region between the high boundary and the
  maximum value must be treated as an even less good region. Finally,
  if the optimum point is higher than the high boundary, then the
  situation is reversed; the region between the high boundary and the
  maximum value must be treated as the optimum region, the region
  between the high boundary and the low boundary must be treated as a
  suboptimal region, and the remaining region between the low boundary
  and the minimum value must be treated as an even less good
  region.</p>

  <p><strong>UA requirements for showing the gauge</strong>: When
  representing a <code><a href=#the-meter-element>meter</a></code> element to the user, the UA should
  indicate the relative position of the actual value to the minimum
  and maximum values, and the relationship between the actual value
  and the three regions of the gauge.</p>

  </div>

  <div class=example>
   <p>The following markup:</p>
   <pre>&lt;h3&gt;Suggested groups&lt;/h3&gt;
&lt;menu type="toolbar"&gt;
 &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()"&gt;Hide suggested groups&lt;/a&gt;
&lt;/menu&gt;
&lt;ul&gt;
 &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view"&gt;comp.infosystems.www.authoring.stylesheets&lt;/a&gt; -
     &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Group description: &lt;strong&gt;Layout/presentation on the WWW.&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;<strong>&lt;meter value="0.5"&gt;Moderate activity,&lt;/meter&gt;</strong> Usenet, 618 subscribers&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/netscape.public.mozilla.xpinstall/view"&gt;netscape.public.mozilla.xpinstall&lt;/a&gt; -
     &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Group description: &lt;strong&gt;Mozilla XPInstall discussion.&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 22 subscribers&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/mozilla.dev.general/view"&gt;mozilla.dev.general&lt;/a&gt; -
     &lt;a href="/group/mozilla.dev.general/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 66 subscribers&lt;/p&gt;
 &lt;/li&gt;
&lt;/ul&gt;</pre>
   <p>Might be rendered as follows:</p>
   <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." src=images/sample-meter.png></p>
  </div>

  <p>User agents <span class=impl>may</span> combine the value of
  the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute and the other
  attributes to provide context-sensitive help or inline text
  detailing the actual values.</p>

  <div class=example>
   <p>For example, the following snippet:</p>
   <pre>&lt;meter min=0 max=60 value=23.2 title=seconds&gt;&lt;/meter&gt;</pre>
   <p>...might cause the user agent to display a gauge with a tooltip
   saying "Value: 23.2 out of 60." on one line and "seconds" on a
   second line.</p>
  </div>

  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-meter-element>meter</a></code> element with its
  <a href=#form-owner>form owner</a>.</p>

  <div class=impl>

  <p>The <dfn id=dom-meter-min title=dom-meter-min><code>min</code></dfn>, <dfn id=dom-meter-max title=dom-meter-max><code>max</code></dfn>, <dfn id=dom-meter-value title=dom-meter-value><code>value</code></dfn>, <dfn id=dom-meter-low title=dom-meter-low><code>low</code></dfn>, <dfn id=dom-meter-high title=dom-meter-high><code>high</code></dfn>, and <dfn id=dom-meter-optimum title=dom-meter-optimum><code>optimum</code></dfn> IDL attributes
  must <a href=#reflect>reflect</a> the respective content attributes of the
  same name. When the relevant content attributes are absent, the IDL
  attributes must return zero.</p>

  <p>The <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides
  a list of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute is part of the
  element's forms API.</p>

  </div>

  <div class=example>

   <p>The following example shows how a gauge could fall back to
   localized or pretty-printed text.</p>

   <pre>&lt;p&gt;Disk usage: &lt;meter min=0 value=170261928 max=233257824&gt;170&thinsp;261&thinsp;928 bytes used
out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>

  </div>




  <h4 id=association-of-controls-and-forms><span class=secno>4.10.18 </span>Association of controls and forms</h4>

  <p>A <a href=#form-associated-element>form-associated element</a> can have a relationship
  with a <code><a href=#the-form-element>form</a></code> element, which is called the element's
  <dfn id=form-owner>form owner</dfn>. If a <a href=#form-associated-element>form-associated element</a> is
  not associated with a <code><a href=#the-form-element>form</a></code> element, its <a href=#form-owner>form
  owner</a> is said to be null.</p>

  <p>A <a href=#form-associated-element>form-associated element</a> is, by default, associated
  with its nearest ancestor <code><a href=#the-form-element>form</a></code> element<span class=impl> (as described below)</span>, but may have a <dfn id=attr-fae-form title=attr-fae-form><code>form</code></dfn> attribute specified to
  override this.</p>

  <p>If a <a href=#form-associated-element>form-associated element</a> has a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute specified, then its
  value must be the ID of a <code><a href=#the-form-element>form</a></code> element in the element's
  owner <code><a href=#document>Document</a></code>.</p>

  <div class=impl>

  <p>When a <a href=#form-associated-element>form-associated element</a> is created, its
  <a href=#form-owner>form owner</a> must be initialized to null (no owner).</p>

  <p>When a <a href=#form-associated-element>form-associated element</a> is to be <dfn id=concept-form-association title=concept-form-association>associated</dfn> with a form, its
  <a href=#form-owner>form owner</a> must be set to that form.</p>

  <p>When a <a href=#form-associated-element>form-associated element</a>'s ancestor chain
  changes, e.g. because it or one of its ancestors was <a href=#insert-an-element-into-a-document title="insert an element into a document">inserted</a> or <a href=#remove-an-element-from-a-document title="remove an element from a document">removed</a> from a
  <code><a href=#document>Document</a></code>, then the user agent must <a href=#reset-the-form-owner>reset the form
  owner</a> of that element.</p>

  <p>When a <a href=#form-associated-element>form-associated element</a>'s <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is added, removed, or
  has its value changed, then the user agent must <a href=#reset-the-form-owner>reset the form
  owner</a> of that element.</p>

  <p>When a <a href=#form-associated-element>form-associated element</a> has a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute and the ID of any of the
  elements in the <code><a href=#document>Document</a></code> changes, then the user agent
  must <a href=#reset-the-form-owner>reset the form owner</a> of that <a href=#form-associated-element>form-associated
  element</a>.</p>

  <p>When a <a href=#form-associated-element>form-associated element</a> has a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute and an element with an
  ID is <a href=#insert-an-element-into-a-document title="insert an element into a document">inserted
  into</a> or <a href=#remove-an-element-from-a-document title="remove an element from a
  document">removed from</a> the <code><a href=#document>Document</a></code>, then the
  user agent must <a href=#reset-the-form-owner>reset the form owner</a> of that
  <a href=#form-associated-element>form-associated element</a>.</p>

  <p>When the user agent is to <dfn id=reset-the-form-owner>reset the form owner</dfn> of a
  <a href=#form-associated-element>form-associated element</a>, it must run the following
  steps:</p>

  <ol><li><p>If the element's <a href=#form-owner>form owner</a> is not null, and
   the element's <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> content
   attribute is not present, and the element's <a href=#form-owner>form owner</a>
   is its nearest <code><a href=#the-form-element>form</a></code> element ancestor after the change
   to the ancestor chain, then do nothing, and abort these
   steps.</li>

   <li><p>Let the element's <a href=#form-owner>form owner</a> be null.</li>

   <li>

    <p>If the element has a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>
    content attribute, then run these substeps:</p>

    <ol><!-- note that this ignores the name="" attribute and is
     unaffected by quirks mode (it's always case sensitive) --><li><p>If the first element <a href=#in-a-document title="in a Document">in the
     <code>Document</code></a> to have an ID that is <a href=#case-sensitive title=case-sensitive>case-sensitively</a> equal to the
     element's <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> content
     attribute's value is a <code><a href=#the-form-element>form</a></code> element, then <a href=#concept-form-association title=concept-form-association>associate</a> the
     <a href=#form-associated-element>form-associated element</a> with that <code><a href=#the-form-element>form</a></code>
     element.</li>

     <li><p>Abort the "reset the form owner" steps.</li>

    </ol></li>

   <li><p>Otherwise, if the <a href=#form-associated-element>form-associated element</a> in
   question has an ancestor <code><a href=#the-form-element>form</a></code> element, then <a href=#concept-form-association title=concept-form-association>associate</a> the
   <a href=#form-associated-element>form-associated element</a> with the nearest such ancestor
   <code><a href=#the-form-element>form</a></code> element.</li>

   <li><p>Otherwise, the element is left unassociated.</li>

  </ol><div class=example>

   <p>In the following non-conforming snippet:</p>

   <pre class=bad>...
 &lt;form id="a"&gt;
  &lt;div id="b"&gt;&lt;/div&gt;
 &lt;/form&gt;
 &lt;script&gt;
  document.getElementById('b').innerHTML =
     '&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;form id="c"&gt;&lt;input id="d"&gt;&lt;/table&gt;' +
     '&lt;input id="e"&gt;';
 &lt;/script&gt;
...</pre>

   <p>The <a href=#form-owner>form owner</a> of "d" would be the inner nested
   form "c", while the <a href=#form-owner>form owner</a> of "e" would be the
   outer form "a".</p>

   <p>This is because despite the association of "e" with "c" in the
   <a href=#html-parser>HTML parser</a>, when the <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> algorithm moves the nodes
   from the temporary document to the "b" element, the nodes see their
   ancestor chain change, and thus all the "magic" associations done
   by the parser are reset to normal ancestor associations.</p>

   <p>This example is a non-conforming document, though, as it is a
   violation of the content models to nest <code><a href=#the-form-element>form</a></code>
   elements.</p>

  </div>

  </div>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-fae-form><a href=#dom-fae-form>form</a></code></dt>

   <dd>

    <p>Returns the element's <a href=#form-owner>form owner</a>.</p>

    <p>Returns null if there isn't one.</p>

   </dd>

  </dl><div class=impl>

  <p><a href=#form-associated-element title="form-associated element">Form-associated
  elements</a> have a <dfn id=dom-fae-form title=dom-fae-form><code>form</code></dfn> IDL attribute, which,
  on getting, must return the element's <a href=#form-owner>form owner</a>, or
  null if there isn't one.</p>

  </div>



  <h4 id=attributes-common-to-form-controls><span class=secno>4.10.19 </span><dfn>Attributes common to form controls</dfn></h4>

  <h5 id=naming-form-controls><span class=secno>4.10.19.1 </span>Naming form controls</h5>

  <p>The <dfn id=attr-fe-name title=attr-fe-name><code>name</code></dfn> content
  attribute gives the name of the form control, as used in <a href=#form-submission>form
  submission</a> and in the <code><a href=#the-form-element>form</a></code> element's <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> object. If the attribute
  is specified, its value must not be the empty string.</p>

  <div class=impl>

  <p>The <dfn id=dom-fe-name title=dom-fe-name><code>name</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> content attribute.</p>

  </div>


  <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.19.2 </span>Enabling and disabling form controls</h5>

  <p>The <dfn id=attr-fe-disabled title=attr-fe-disabled><code>disabled</code></dfn>
  content attribute is a <a href=#boolean-attribute>boolean attribute</a>.</p>

  <p>A form control is <dfn id=concept-fe-disabled title=concept-fe-disabled>disabled</dfn>
  if its <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is
  set, or if it is a descendant of a <code><a href=#the-fieldset-element>fieldset</a></code> element
  whose <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> attribute
  is set and is <em>not</em> a descendant of that
  <code><a href=#the-fieldset-element>fieldset</a></code> element's first <code><a href=#the-legend-element>legend</a></code> element
  child, if any.</p>

  <div class=impl>

  <p>A form control that is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> must prevent any <code title=event-click><a href=#event-click>click</a></code> events that are <a href=#queue-a-task title="queue
  a task">queued</a> on the <a href=#user-interaction-task-source>user interaction task
  source</a> from being dispatched on the element.</p>

  <p><strong>Constraint validation</strong>: If an element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, it is <a href=#barred-from-constraint-validation>barred from
  constraint validation</a>.</p>

  <p>The <dfn id=dom-fe-disabled title=dom-fe-disabled><code>disabled</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> content attribute.</p>

  </div>



  <div class=impl>

  <h5 id="a-form-control's-value"><span class=secno>4.10.19.3 </span>A form control's value</h5>

  <p>Form controls have a <dfn id=concept-fe-value title=concept-fe-value>value</dfn>
  and a <dfn id=concept-fe-checked title=concept-fe-checked>checkedness</dfn>. (The latter
  is only used by <code><a href=#the-input-element>input</a></code> elements.) These are used to
  describe how the user interacts with the control.</p>

  </div>



  <h5 id=autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</h5>

  <!-- v2: Apply this to contentEditable elements -->

  <p>The <dfn id=attr-fe-autofocus title=attr-fe-autofocus><code>autofocus</code></dfn>
  content attribute allows the user to indicate that a control is to
  be focused as soon as the page is loaded, allowing the user to just
  start typing without having to manually focus the main control.</p>

  <p>The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute is
  a <a href=#boolean-attribute>boolean attribute</a>.</p>

  <p>There must not be more than one element in the document with the
  <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute
  specified.</p>

  <div class=impl>

  <p>Whenever an element with the <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute specified is
  <a href=#insert-an-element-into-a-document title="insert an element into a document">inserted into a
  document</a> whose <a href=#browsing-context>browsing context</a> did not have the
  <a href=#sandboxed-automatic-features-browsing-context-flag>sandboxed automatic features browsing context flag</a> set
  when the <code><a href=#document>Document</a></code> was created, the user agent should
  <a href=#queue-a-task>queue a task</a> that checks to see if the element is
  <a href=#focusable>focusable</a>, and if so, runs the <a href=#focusing-steps>focusing
  steps</a> for that element. User agents may also change the
  scrolling position of the document, or perform some other action
  that brings the element to the user's attention. The <a href=#task-source>task
  source</a> for this task is the <a href=#dom-manipulation-task-source>DOM manipulation task
  source</a>.</p>

  <p>User agents may ignore this attribute if the user has indicated
  (for example, by starting to type in a form control) that he does
  not wish focus to be changed.</p>

  <p class=note>Focusing the control does not imply that the user
  agent must focus the browser window if it has lost focus.</p>

  <p>The <dfn id=dom-fe-autofocus title=dom-fe-autofocus><code>autofocus</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  </div>

  <div class=example>
   <p>In the following snippet, the text control would be focused when
   the document was loaded.</p>
   <pre>&lt;input maxlength="256" name="q" value="" autofocus&gt;
&lt;input type="submit" value="Search"&gt;</pre>
  </div>


  <h5 id=limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</h5>

  <p>A <dfn id=attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var> declares a limit on the number of
  characters a user can input.</p>

  <p>If an element has its <a href=#attr-fe-maxlength title=attr-fe-maxlength>form
  control <code title="">maxlength</code> attribute</a> specified,
  the attribute's value must be a <a href=#valid-non-negative-integer>valid non-negative
  integer</a>. If the attribute is specified and applying the
  <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to its value
  results in a number, then that number is the element's <dfn id=maximum-allowed-value-length>maximum
  allowed value length</dfn>. If the attribute is omitted or parsing
  its value results in an error, then there is no <a href=#maximum-allowed-value-length>maximum
  allowed value length</a>.</p>

  <div class=impl>

  <p><strong>Constraint validation</strong>: If an element has a
  <a href=#maximum-allowed-value-length>maximum allowed value length</a>, and its <var title="">dirty value flag</var> is true, and the <a href=#code-point-length>code-point
  length</a> of the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is greater than the element's
  <a href=#maximum-allowed-value-length>maximum allowed value length</a>, then the element is
  <a href=#suffering-from-being-too-long>suffering from being too long</a>.</p>

  <p>User agents may prevent the user from causing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to be set to a value whose
  <a href=#code-point-length>code-point length</a> is greater than the element's
  <a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>

  </div>



  <h5 id=form-submission-0><span class=secno>4.10.19.6 </span>Form submission</h5>

  <p><dfn id=attributes-for-form-submission>Attributes for form submission</dfn> can be specified both
  on <code><a href=#the-form-element>form</a></code> elements and on <a href=#concept-submit-button title=concept-submit-button>submit buttons</a> (elements that
  represent buttons that submit forms, e.g. an <code><a href=#the-input-element>input</a></code>
  element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is
  in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>
  state).

  <p>The <a href=#attributes-for-form-submission>attributes for form submission</a> that may be
  specified on <code><a href=#the-form-element>form</a></code> elements are <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>, <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>, <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>, and <code title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>

  <p>The corresponding <a href=#attributes-for-form-submission>attributes for form submission</a>
  that may be specified on <a href=#concept-submit-button title=concept-submit-button>submit
  buttons</a> are <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>. When omitted, they
  default to the values given on the corresponding attributes on the
  <code><a href=#the-form-element>form</a></code> element.</p>

  <hr><p>The <dfn id=attr-fs-action title=attr-fs-action><code>action</code></dfn> and
  <dfn id=attr-fs-formaction title=attr-fs-formaction><code>formaction</code></dfn>
  content attributes, if specified, must have a value that is a
  <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by spaces</a>.</p>

  <p>The <dfn id=concept-fs-action title=concept-fs-action>action</dfn> of an element is
  the value of the element's <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code> attribute, if the
  element is a <a href=#concept-submit-button title=concept-submit-button>submit
  button</a> and has such an attribute, or the value of its
  <a href=#form-owner>form owner</a>'s <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>
  attribute, if <em>it</em> has one, or else the empty string.</p>

  <hr><p>The <dfn id=attr-fs-method title=attr-fs-method><code>method</code></dfn> and
  <dfn id=attr-fs-formmethod title=attr-fs-formmethod><code>formmethod</code></dfn>
  content attributes are <a href=#enumerated-attribute title="enumerated attribute">enumerated
  attributes</a> with the following keywords and states:</p>

  <ul><li>The keyword <dfn id=attr-fs-method-get-keyword title=attr-fs-method-GET-keyword><code>GET</code></dfn>, mapping
   to the state <dfn id=attr-fs-method-get title=attr-fs-method-GET>GET</dfn>, indicating
   the HTTP GET method.</li>

   <li>The keyword <dfn id=attr-fs-method-post-keyword title=attr-fs-method-POST-keyword><code>POST</code></dfn>, mapping
   to the state <dfn id=attr-fs-method-post title=attr-fs-method-POST>POST</dfn>, indicating
   the HTTP POST method.</li>

   <li>The keyword <dfn id=attr-fs-method-put-keyword title=attr-fs-method-PUT-keyword><code>PUT</code></dfn>, mapping
   to the state <dfn id=attr-fs-method-put title=attr-fs-method-PUT>PUT</dfn>, indicating
   the HTTP PUT method.</li>

   <li>The keyword <dfn id=attr-fs-method-delete-keyword title=attr-fs-method-DELETE-keyword><code>DELETE</code></dfn>, mapping
   to the state <dfn id=attr-fs-method-delete title=attr-fs-method-DELETE>DELETE</dfn>, indicating
   the HTTP DELETE method.</li>

  </ul><p>The <i>missing value default</i> for these attributes is the
  <a href=#attr-fs-method-get title=attr-fs-method-GET>GET</a> state.</p>

  <p>The <dfn id=concept-fs-method title=concept-fs-method>method</dfn> of an element is
  one of those four states. If the element is a <a href=#concept-submit-button title=concept-submit-button>submit button</a> and has a <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code> attribute, then the
  element's <a href=#concept-fs-method title=concept-fs-method>method</a> is that
  attribute's state; otherwise, it is the <a href=#form-owner>form owner</a>'s
  <code title=attr-fs-method><a href=#attr-fs-method>method</a></code> attribute's state.</p>

  <hr><p>The <dfn id=attr-fs-enctype title=attr-fs-enctype><code>enctype</code></dfn> and
  <dfn id=attr-fs-formenctype title=attr-fs-formenctype><code>formenctype</code></dfn>
  content attributes are <a href=#enumerated-attribute title="enumerated attribute">enumerated
  attributes</a> with the following keywords and states:</p>

  <ul><li>The "<dfn id=attr-fs-enctype-urlencoded title=attr-fs-enctype-urlencoded><code>application/x-www-form-urlencoded</code></dfn>" keyword and corresponding state.</li>
   <li>The "<dfn id=attr-fs-enctype-formdata title=attr-fs-enctype-formdata><code>multipart/form-data</code></dfn>" keyword and corresponding state.</li>
   <li>The "<dfn id=attr-fs-enctype-text title=attr-fs-enctype-text><code>text/plain</code></dfn>" keyword and corresponding state.</li>
  </ul><p>The <i>missing value default</i> for these attributes is the
  <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>
  state.</p>

  <p>The <dfn id=concept-fs-enctype title=concept-fs-enctype>enctype</dfn> of an element
  is one of those three states. If the element is a <a href=#concept-submit-button title=concept-submit-button>submit button</a> and has a <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code> attribute, then the
  element's <a href=#concept-fs-enctype title=concept-fs-enctype>enctype</a> is that
  attribute's state; otherwise, it is the <a href=#form-owner>form owner</a>'s
  <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code> attribute's state.</p>

  <hr><p>The <dfn id=attr-fs-target title=attr-fs-target><code>target</code></dfn> and
  <dfn id=attr-fs-formtarget title=attr-fs-formtarget><code>formtarget</code></dfn>
  content attributes, if specified, must have values that are <a href=#valid-browsing-context-name-or-keyword title="valid browsing context name or keyword">valid browsing
  context names or keywords</a>.</p>

  <p>The <dfn id=concept-fs-target title=concept-fs-target>target</dfn> of an element is
  the value of the element's <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attribute, if the
  element is a <a href=#concept-submit-button title=concept-submit-button>submit
  button</a> and has such an attribute; or the value of its
  <a href=#form-owner>form owner</a>'s <code title=attr-fs-target><a href=#attr-fs-target>target</a></code>
  attribute, if <em>it</em> has such an attribute; or, if one of the
  child nodes of <a href=#the-head-element>the <code>head</code> element</a> is a
  <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute, then the value of
  the <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute of the
  first such <code><a href=#the-base-element>base</a></code> element; or, if there is no such
  element, the empty string.</p> <!-- c.f. hyperlink following -->

  <hr><p>The <dfn id=attr-fs-novalidate title=attr-fs-novalidate><code>novalidate</code></dfn>
  and <dfn id=attr-fs-formnovalidate title=attr-fs-formnovalidate><code>formnovalidate</code></dfn>
  content attributes are <a href=#boolean-attribute title="boolean attribute">boolean
  attributes</a>. If present, they indicate that the form is not to
  be validated during submission.</p>

  <p>The <dfn id=concept-fs-novalidate title=concept-fs-novalidate>no-validate state</dfn> of
  an element is true if the element is a <a href=#concept-submit-button title=concept-submit-button>submit button</a> and the element's
  <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code> attribute
  is present, or if the element's <a href=#form-owner>form owner</a>'s <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code> attribute is present,
  and false otherwise.</p>

  <div class=example>

   <p>This attribute is useful to include "save" buttons on forms that
   have validation constraints, to allow users to save their progress
   even though they haven't fully entered the data in the form. The
   following example shows a simple form that has two required
   fields. There are three buttons: one to submit the form, which
   requires both fields to be filled in; one to save the form so that
   the user can come back and fill it in later; and one to cancel the
   form altogether.</p>

   <pre>&lt;form action="editor.cgi" method="post"&gt;
 &lt;p&gt;&lt;label&gt;Name: &lt;input required name=fn&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Essay: &lt;textarea name=essay&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit name=submit value="Submit essay"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit formnovalidate name=save value="Save essay"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit formnovalidate name=cancel value="Cancel"&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

  </div>

  <div class=impl>

  <hr><p>The <dfn id=dom-fs-action title=dom-fs-action><code>action</code></dfn>, <dfn id=dom-fs-method title=dom-fs-method><code>method</code></dfn>, <dfn id=dom-fs-enctype title=dom-fs-enctype><code>enctype</code></dfn>, and <dfn id=dom-fs-target title=dom-fs-target><code>target</code></dfn> IDL attributes must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name. The <dfn id=dom-fs-novalidate title=dom-fs-noValidate><code>noValidate</code></dfn> IDL
  attribute must reflect the <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code> content attribute.  The
  <dfn id=dom-fs-formaction title=dom-fs-formAction><code>formAction</code></dfn> IDL
  attribute must reflect the <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code> content attribute. The
  <dfn id=dom-fs-formenctype title=dom-fs-formEnctype><code>formEnctype</code></dfn> IDL
  attribute must reflect the <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code> content attribute.
  The <dfn id=dom-fs-formmethod title=dom-fs-formMethod><code>formMethod</code></dfn> IDL
  attribute must reflect the <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code> content attribute. The
  <dfn id=dom-fs-formnovalidate title=dom-fs-formNoValidate><code>formNoValidate</code></dfn>
  IDL attribute must reflect the <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code> content
  attribute. The <dfn id=dom-fs-formtarget title=dom-fs-formTarget><code>formTarget</code></dfn> IDL
  attribute must reflect the <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> content attribute.

  </div>



  <h4 id=constraints><span class=secno>4.10.20 </span>Constraints</h4>

  <h5 id=definitions><span class=secno>4.10.20.1 </span>Definitions</h5>

  <div class=impl>

  <p>A <a href=#category-listed title=category-listed>listed form-associated
  element</a> is a <dfn id=candidate-for-constraint-validation>candidate for constraint validation</dfn>
  except when a condition has <dfn id=barred-from-constraint-validation title="barred from constraint
  validation">barred the element from constraint
  validation</dfn>. (For example, an element is <a href=#barred-from-constraint-validation>barred from
  constraint validation</a> if it is an <code><a href=#the-output-element>output</a></code> or
  <code><a href=#the-fieldset-element>fieldset</a></code> element.)</p>

  <p>An element can have a <dfn id=custom-validity-error-message>custom validity error message</dfn>
  defined. Initially, an element must have its <a href=#custom-validity-error-message>custom validity
  error message</a> set to the empty string. When its value is not
  the empty string, the element is <a href=#suffering-from-a-custom-error>suffering from a custom
  error</a>. It can be set using the <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
  method. The user agent should use the <a href=#custom-validity-error-message>custom validity error
  message</a> when alerting the user to the problem with the
  control.</p>

  <p>An element can be constrained in various ways. The following is
  the list of <dfn id=validity-states>validity states</dfn> that a form control can be
  in, making the control invalid for the purposes of constraint
  validation. (The definitions below are non-normative; other parts of
  this specification define more precisely when each state applies or
  does not.)</p>

  <dl><dt> <dfn id=suffering-from-being-missing>Suffering from being missing</dfn> </dt>

   <dd> <p>When a control has no <a href=#concept-fe-value title=concept-fe-value>value</a> but has a <code title="">required</code> attribute (<code><a href=#the-input-element>input</a></code> <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code><a href=#the-textarea-element>textarea</a></code>
   <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>). </dd>

   <dt> <dfn id=suffering-from-a-type-mismatch>Suffering from a type mismatch</dfn> </dt>

   <dd> <p>When a control that allows arbitrary user
   input has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is not
   in the correct syntax (<a href=#e-mail-state title=attr-input-type-email>E-mail</a>, <a href=#url-state title=attr-input-type-url>URL</a>). </dd>

   <dt> <dfn id=suffering-from-a-pattern-mismatch>Suffering from a pattern mismatch</dfn> </dt>

   <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that doesn't satisfy the
   <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute.</dd>

   <dt> <dfn id=suffering-from-being-too-long>Suffering from being too long</dfn> </dt>

   <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too long for the
   <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a> (<code><a href=#the-input-element>input</a></code>
   <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   <code><a href=#the-textarea-element>textarea</a></code> <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code>). </dd>

   <dt> <dfn id=suffering-from-an-underflow>Suffering from an underflow</dfn> </dt>

   <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too low for the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute.</dd>

   <dt> <dfn id=suffering-from-an-overflow>Suffering from an overflow</dfn> </dt>

   <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too high for the
   <code title=attr-input-max><a href=#attr-input-max>max</a></code> attribute.</dd>

   <dt> <dfn id=suffering-from-a-step-mismatch>Suffering from a step mismatch</dfn> </dt>

   <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that doesn't fit the rules
   given by the <code title=attr-input-step><a href=#attr-input-step>step</a></code>
   attribute.</dd>

   <dt> <dfn id=suffering-from-a-custom-error>Suffering from a custom error</dfn> </dt>

   <dd> <p>When a control's <a href=#custom-validity-error-message>custom validity error
   message</a> (as set by the element's <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   method) is not the empty string.</p> </dd>

  </dl><p class=note>An element can still suffer from these states even
  when the element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>; thus these states can
  be represented in the DOM even if validating the form during
  submission wouldn't indicate a problem to the user.</p>

  <p>An element <dfn id=concept-fv-valid title=concept-fv-valid>satisfies its
  constraints</dfn> if it is not suffering from any of the above
  <a href=#validity-states>validity states</a>.</p>

  </div>



  <div class=impl>

  <h5 id=constraint-validation><span class=secno>4.10.20.2 </span>Constraint validation</h5>

  <p>When the user agent is required to <dfn id=statically-validate-the-constraints>statically validate the
  constraints</dfn> of <code><a href=#the-form-element>form</a></code> element <var title="">form</var>, it must run the following steps, which return
  either a <i>positive</i> result (all the controls in the form are
  valid) or a <i>negative</i> result (there are invalid controls)
  along with a (possibly empty) list of elements that are invalid and
  for which no script has claimed responsibility:</p>

  <ol><li><p>Let <var title="">controls</var> be a list of all the <a href=#category-submit title=category-submit>submittable elements</a> whose
   <a href=#form-owner>form owner</a> is <var title="">form</var>, in <a href=#tree-order>tree
   order</a>.</li>

   <li><p>Let <var title="">invalid controls</var> be an initially
   empty list of elements.</li>

   <li>

    <p>For each element <var title="">field</var> in <var title="">controls</var>, in <a href=#tree-order>tree order</a>, run the
    following substeps:</p>

    <ol><li><p>If <var title="">field</var> is not a <a href=#candidate-for-constraint-validation>candidate for
     constraint validation</a>, then move on to the next
     element.</li>

     <li><p>Otherwise, if <var title="">field</var> <a href=#concept-fv-valid title=concept-fv-valid>satisfies its constraints</a>, then
     move on to the next element.</li>

     <li><p>Otherwise, add <var title="">field</var> to <var title="">invalid controls</var>.</li>

    </ol></li>

   <li><p>If <var title="">invalid controls</var> is empty, then
   return a <i>positive</i> result and abort these steps.</li>

   <li><p>Let <var title="">unhandled invalid controls</var> be an
   initially empty list of elements.</li>

   <li>

    <p>For each element <var title="">field</var> in <var title="">invalid controls</var>, if any, in <a href=#tree-order>tree
    order</a>, run the following substeps:</p>

    <ol><li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-invalid>invalid</code> that is cancelable at <var title="">field</var>.</li>

     <li><p>If the event was not canceled, then add <var title="">field</var> to <var title="">unhandled invalid
     controls</var>.</li>

    </ol></li>

   <li><p>Return a <i>negative</i> result with the list of elements in
   the <var title="">unhandled invalid controls</var> list.</li>

  </ol><p>If a user agent is to <dfn id=interactively-validate-the-constraints>interactively validate the
  constraints</dfn> of <code><a href=#the-form-element>form</a></code> element <var title="">form</var>, then the user agent must run the following
  steps:</p>

  <ol><li><p><a href=#statically-validate-the-constraints>Statically validate the constraints</a> of <var title="">form</var>, and let <var title="">unhandled invalid
   controls</var> be the list of elements returned if the result was
   <i>negative</i>.</li>

   <li><p>If the result was <i>positive</i>, then return that result
   and abort these steps.</li>

   <li><p>Report the problems with the constraints of at least one of
   the elements given in <var title="">unhandled invalid
   controls</var> to the user. User agents may focus one of those
   elements in the process, by running the <a href=#focusing-steps>focusing steps</a>
   for that element, and may change the scrolling position of the
   document, or perform some other action that brings the element to
   the user's attention. User agents may report more than one
   constraint violation. User agents may coalesce related constraint
   violation reports if appropriate (e.g. if multiple radio buttons in
   a <a href=#radio-button-group title="radio button group">group</a> are marked as
   required, only one error need be reported). If one of the controls
   is not <a href=#being-rendered>being rendered</a> (e.g. it has the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute set) then user agents
   may report a script error.</li>

   <li><p>Return a <i>negative</i> result.</li>

  </ol></div>



  <h5 id=the-constraint-validation-api><span class=secno>4.10.20.3 </span>The <dfn>constraint validation API</dfn></h5>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code></dt>

   <dd>

    <p>Returns true if the element will be validated when the form is submitted; false otherwise.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity</a></code>(<var title="">message</var>)</dt>

   <dd>

    <p>Sets a custom error, so that the element would fail to
    validate. The given message is the message to be shown to the user
    when reporting the problem to the user.</p>

    <p>If the argument is the empty string, clears the custom error.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-valueMissing><a href=#dom-validitystate-valuemissing>valueMissing</a></code></dt>

   <dd>

    <p>Returns true if the element has no value but is a required field; false otherwise.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-typeMismatch><a href=#dom-validitystate-typemismatch>typeMismatch</a></code></dt>

   <dd>

    <p>Returns true if the element's value is not in the correct syntax; false otherwise.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-patternMismatch><a href=#dom-validitystate-patternmismatch>patternMismatch</a></code></dt>

   <dd>

    <p>Returns true if the element's value doesn't match the provided pattern; false otherwise.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-tooLong><a href=#dom-validitystate-toolong>tooLong</a></code></dt>

   <dd>

    <p>Returns true if the element's value is longer than the provided maximum length; false otherwise.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-rangeUnderflow><a href=#dom-validitystate-rangeunderflow>rangeUnderflow</a></code></dt>

   <dd>

    <p>Returns true if the element's value is lower than the provided minimum; false otherwise.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-rangeOverflow><a href=#dom-validitystate-rangeoverflow>rangeOverflow</a></code></dt>

   <dd>

    <p>Returns true if the element's value is higher than the provided maximum; false otherwise.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-stepMismatch><a href=#dom-validitystate-stepmismatch>stepMismatch</a></code></dt>

   <dd>

    <p>Returns true if the element's value doesn't fit the rules given by the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute; false otherwise.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-customError><a href=#dom-validitystate-customerror>customError</a></code></dt>

   <dd>

    <p>Returns true if the element has a custom error; false otherwise.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-valid><a href=#dom-validitystate-valid>valid</a></code></dt>

   <dd>

    <p>Returns true if the element's value has no validity problems; false otherwise.</p>

   </dd>

   <dt><var title="">valid</var> = <var title="">element</var> . <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity</a></code>()</dt>

   <dd>

    <p>Returns true if the element's value has no validity problems;
    false otherwise. Fires an <code title=event-invalid>invalid</code> event at the element in the
    latter case.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code></dt>

   <dd>

    <p>Returns the error message that would be shown to the user if
    the element was to be checked for validity.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-cva-willvalidate title=dom-cva-willValidate><code>willValidate</code></dfn>
  attribute must return true if an element is a <a href=#candidate-for-constraint-validation>candidate for
  constraint validation</a>, and false otherwise (i.e. false if any
  conditions are <a href=#barred-from-constraint-validation title="barred from constraint
  validation">barring it from constraint validation</a>).</p>

  <p>The <dfn id=dom-cva-setcustomvalidity title=dom-cva-setCustomValidity><code>setCustomValidity(<var title="">message</var>)</code></dfn>, when invoked, must set the
  <a href=#custom-validity-error-message>custom validity error message</a> to the value of the given
  <var title="">message</var> argument.</p>

  </div>

  <div class=example>

   <p>In the following example, a script checks the value of a form
   control each time it is edited, and whenever it is not a valid
   value, uses the <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method
   to set an appropriate message.</p>

   <pre>&lt;label&gt;Feeling: &lt;input name=f type="text" oninput="check(this)"&gt;&lt;/label&gt;
&lt;script&gt;
 function check(input) {
   if (input.value == "good" ||
       input.value == "fine" ||
       input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" is not a feeling.');
<!--   } else if (input.value == "...") {
     input.setCustomValidity('...');
-->   } else {
     // input is fine -- reset the error message
     input.setCustomValidity('');
   }
 }
&lt;/script&gt;</pre>

  </div>

  <div class=impl>

  <p>The <dfn id=dom-cva-validity title=dom-cva-validity><code>validity</code></dfn>
  attribute must return a <code><a href=#validitystate>ValidityState</a></code> object that
  represents the <a href=#validity-states>validity states</a> of the element. This
  object is <a href=#live>live</a>, and the same object must be returned
  each time the element's <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> attribute is retrieved.</p>

<pre class=idl>interface <dfn id=validitystate>ValidityState</dfn> {
  readonly attribute boolean <a href=#dom-validitystate-valuemissing title=dom-ValidityState-valueMissing>valueMissing</a>;
  readonly attribute boolean <a href=#dom-validitystate-typemismatch title=dom-ValidityState-typeMismatch>typeMismatch</a>;
  readonly attribute boolean <a href=#dom-validitystate-patternmismatch title=dom-ValidityState-patternMismatch>patternMismatch</a>;
  readonly attribute boolean <a href=#dom-validitystate-toolong title=dom-ValidityState-tooLong>tooLong</a>;
  readonly attribute boolean <a href=#dom-validitystate-rangeunderflow title=dom-ValidityState-rangeUnderflow>rangeUnderflow</a>;
  readonly attribute boolean <a href=#dom-validitystate-rangeoverflow title=dom-ValidityState-rangeOverflow>rangeOverflow</a>;
  readonly attribute boolean <a href=#dom-validitystate-stepmismatch title=dom-ValidityState-stepMismatch>stepMismatch</a>;
  readonly attribute boolean <a href=#dom-validitystate-customerror title=dom-ValidityState-customError>customError</a>;
  readonly attribute boolean <a href=#dom-validitystate-valid title=dom-ValidityState-valid>valid</a>;
};</pre>

  <p>A <code><a href=#validitystate>ValidityState</a></code> object has the following
  attributes. On getting, they must return true if the corresponding
  condition given in the following list is true, and false
  otherwise.</p>

  <dl><dt><dfn id=dom-validitystate-valuemissing title=dom-ValidityState-valueMissing><code>valueMissing</code></dfn></dt>
   <dd> <p>The control is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p> </dd>

   <dt><dfn id=dom-validitystate-typemismatch title=dom-ValidityState-typeMismatch><code>typeMismatch</code></dfn></dt>
   <dd> <p>The control is <a href=#suffering-from-a-type-mismatch>suffering from a type mismatch</a>.</p> </dd>

   <dt><dfn id=dom-validitystate-patternmismatch title=dom-ValidityState-patternMismatch><code>patternMismatch</code></dfn></dt>
   <dd> <p>The control is <a href=#suffering-from-a-pattern-mismatch>suffering from a pattern mismatch</a>.</p> </dd>

   <dt><dfn id=dom-validitystate-toolong title=dom-ValidityState-tooLong><code>tooLong</code></dfn></dt>
   <dd> <p>The control is <a href=#suffering-from-being-too-long>suffering from being too long</a>.</p> </dd>

   <dt><dfn id=dom-validitystate-rangeunderflow title=dom-ValidityState-rangeUnderflow><code>rangeUnderflow</code></dfn></dt>
   <dd> <p>The control is <a href=#suffering-from-an-underflow>suffering from an underflow</a>.</p> </dd>

   <dt><dfn id=dom-validitystate-rangeoverflow title=dom-ValidityState-rangeOverflow><code>rangeOverflow</code></dfn></dt>
   <dd> <p>The control is <a href=#suffering-from-an-overflow>suffering from an overflow</a>.</p> </dd>

   <dt><dfn id=dom-validitystate-stepmismatch title=dom-ValidityState-stepMismatch><code>stepMismatch</code></dfn></dt>
   <dd> <p>The control is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>.</p> </dd>

   <dt><dfn id=dom-validitystate-customerror title=dom-ValidityState-customError><code>customError</code></dfn></dt>
   <dd> <p>The control is <a href=#suffering-from-a-custom-error>suffering from a custom error</a>.</p> </dd>

   <dt><dfn id=dom-validitystate-valid title=dom-ValidityState-valid><code>valid</code></dfn></dt>
   <dd> <p>None of the other conditions are true.</p> </dd>

  </dl><p>When the <dfn id=dom-cva-checkvalidatity title=dom-cva-checkValidatity><code>checkValidity()</code></dfn>
  method is invoked, if the element is a <a href=#candidate-for-constraint-validation>candidate for
  constraint validation</a> and does not <a href=#concept-fv-valid title=concept-fv-valid>satisfy its constraints</a>, the user
  agent must <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-invalid>invalid</code> that is cancelable (but in this
  case has no default action) at the element and return
  false. Otherwise, it must only return true without doing anything
  else.</p>

  <p>The <dfn id=dom-cva-validationmessage title=dom-cva-validationMessage><code>validationMessage</code></dfn>
  attribute must return the empty string if the element is not a
  <a href=#candidate-for-constraint-validation>candidate for constraint validation</a> or if it is one but
  it <a href=#concept-fv-valid title=concept-fv-valid>satisfies its constraints</a>;
  otherwise, it must return a suitably localized message that the user
  agent would show the user if this were the only form control with a
  validity constraint problem. If the user agent would not actually
  show a textual message in such a situation (e.g. it would show a
  graphical cue instead), then the attribute must return a suitably
  localized message that expresses (one or more of) the validity
  constraint(s) that the control does not satisfy. If the element is a
  <a href=#candidate-for-constraint-validation>candidate for constraint validation</a> and is
  <a href=#suffering-from-a-custom-error>suffering from a custom error</a>, then the <a href=#custom-validity-error-message>custom
  validity error message</a> should be present in the return
  value.</p>

  </div>


  <h5 id=security-forms><span class=secno>4.10.20.4 </span>Security</h5>

  <p id=security-0>Servers should not rely on client-side
  validation. Client-side validation can be intentionally bypassed by
  hostile users, and unintentionally bypassed by users of older user
  agents or automated tools that do not implement these features. The
  constraint validation features are only intended to improve the user
  experience, not to provide any kind of security mechanism.</p>




  <h4 id=form-submission><span class=secno>4.10.21 </span><dfn>Form submission</dfn></h4>

  <div class=impl>

  <h5 id=introduction-1><span class=secno>4.10.21.1 </span>Introduction</h5>

  </div>

  <p><i>This section is non-normative.</i></p>

  <p>When forms are submitted, the data in the form is converted into
  the form specified by the <a href=#concept-fs-enctype title=concept-fs-enctype>enctype</a>, and then sent to the
  destination specified by the <a href=#concept-fs-action title=concept-fs-action>action</a> using the given <a href=#concept-fs-method title=concept-fs-method>method</a>.</p>

  <p>For example, take the following form:</p>

  <pre>&lt;form action="/find.cgi" method=get&gt;
 &lt;input type=text name=t&gt;
 &lt;input type=search name=q&gt;
 &lt;input type=submit&gt;
&lt;/form&gt;</pre>

  <p>If the user types in "cats" in the first field and "fur" in the
  second, and then hits the submit button, then the user agent will
  load <code title="">/find.cgi?t=cats&amp;q=fur</code>.</p>

  <p>On the other hand, consider this form:</p>

  <pre>&lt;form action="/find.cgi" method=post enctype="multipart/form-data"&gt;
 &lt;input type=text name=t&gt;
 &lt;input type=search name=q&gt;
 &lt;input type=submit&gt;
&lt;/form&gt;</pre>

  <p>Given the same user input, the result on submission is quite
  different: the user agent instead does an HTTP POST to the given
  URL, with as the entity body something like the following text:</p>

  <pre>------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="t"

cats
------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="q"

fur
------kYFrd4jNJEgCervE--</pre>



  <div class=impl>

  <h5 id=implicit-submission><span class=secno>4.10.21.2 </span>Implicit submission</h5>

  <p>User agents may establish a <a href=#concept-button title=concept-button>button</a> in each form as being the
  form's <dfn id=default-button>default button</dfn>. This should be the first <a href=#concept-submit-button title=concept-submit-button>submit button</a> in <a href=#tree-order>tree
  order</a> whose <a href=#form-owner>form owner</a> is that <code><a href=#the-form-element>form</a></code>
  element, but user agents may pick another button if another would be
  more appropriate for the platform. If the platform supports letting
  the user submit a form implicitly (for example, on some platforms
  hitting the "enter" key while a text field is focused implicitly
  submits the form), then doing so must cause the form's <a href=#default-button>default
  button</a>'s <a href=#activation-behavior>activation behavior</a>, if any, to be
  run.</p>

  <p class=note>Consequently, if the <a href=#default-button>default button</a> is
  <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, the form is not
  submitted when such an implicit submission mechanism is used. (A
  button has no <a href=#activation-behavior>activation behavior</a> when disabled.)</p>

  <p>If the form has no <a href=#concept-submit-button title=concept-submit-button>submit
  button</a>, then the implicit submission mechanism must just
  <a href=#concept-form-submit title=concept-form-submit>submit</a> the
  <code><a href=#the-form-element>form</a></code> element from the <code><a href=#the-form-element>form</a></code> element
  itself.</p>

  </div>


  <div class=impl>

  <h5 id=form-submission-algorithm><span class=secno>4.10.21.3 </span>Form submission algorithm</h5>

  <p>When a form <var title="">form</var> is <dfn id=concept-form-submit title=concept-form-submit>submitted</dfn> from an element <var title="">submitter</var> (typically a button), optionally with a
  <var title="">scripted-submit</var> flag set, the user agent must
  run the following steps:</p>

  <ol><li id=sandboxSubmitBlocked><p>If <var title="">form</var> is in
   a <code><a href=#document>Document</a></code> that has no associated <a href=#browsing-context>browsing
   context</a> or whose <a href=#browsing-context>browsing context</a> had its
   <a href=#sandboxed-forms-browsing-context-flag>sandboxed forms browsing context flag</a> set when the
   <code><a href=#document>Document</a></code> was created, then abort these steps without
   doing anything.</li>

   <li><p>If <var title="">form</var> is already being submitted
   (i.e. the form was <a href=#concept-form-submit title=concept-form-submit>submitted</a> again while processing
   the events fired from the next two steps, probably from a script
   redundantly calling the <code title=dom-form-submit><a href=#dom-form-submit>submit()</a></code> method on <var title="">form</var>), then abort these steps. This doesn't affect
   the earlier instance of this algorithm.</li>

   <!-- lock (implicit in previous step) -->

   <li><p>If the <var title="">scripted-submit</var> flag is not set,
   and the <var title="">submitter</var> element's <a href=#concept-fs-novalidate title=concept-fs-novalidate>no-validate state</a> is false,
   then <a href=#interactively-validate-the-constraints>interactively validate the constraints</a> of <var title="">form</var> and examine the result: if the result is
   negative (the constraint validation concluded that there were
   invalid fields and probably informed the user of this) then abort
   these steps.</li>

   <li><p>If the <var title="">scripted-submit</var> flag is not set,
   then <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named
   <code title=event-submit>submit</code>, at <var title="">form</var>. If the event's default action is prevented
   (i.e. if the event is canceled) then abort these steps. Otherwise,
   continue (effectively the default action is to perform the
   submission).</li>

   <!-- if you add any steps between the "lock" and "unlock" lines,
   make sure to update the step immediately before the "lock" line -->

   <!-- unlock -->

   <li><p>Let <var title="">controls</var> be a list of all the <a href=#category-submit title=category-submit>submittable elements</a> whose
   <a href=#form-owner>form owner</a> is <var title="">form</var>, in <a href=#tree-order>tree
   order</a>.</li>

   <li><p>Let the <var title="">form data set</var> be a list of
   name-value-type tuples, initially empty.</li>

   <li id=constructing-form-data-set>

    <p><strong>Constructing the form data set</strong>. For each
    element <var title="">field</var> in <var title="">controls</var>,
    in <a href=#tree-order>tree order</a>, run the following substeps:</p>

    <ol><li>

      <p>If any of the following conditions are met, then skip these
      substeps for this element:</p>

      <ul><li>The <var title="">field</var> element has a
       <code><a href=#the-datalist-element>datalist</a></code> element ancestor.</li>

       <li>The <var title="">field</var> element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</li>

       <li>The <var title="">field</var> element is a <a href=#concept-button title=concept-button>button</a> but it is not <var title="">submitter</var>.</li>

       <li>The <var title="">field</var> element is an
       <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state and
       whose <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is
       false.</li>

       <li>The <var title="">field</var> element is an
       <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state and
       whose <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is
       false.</li>

       <li>The <var title="">field</var> element is not an
       <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, and
       either the <var title="">field</var> element does not have a
       <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute specified, or
       its <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute's value is
       the empty string.</li>

       <li>The <var title="">field</var> element is an
       <code><a href=#the-object-element>object</a></code> element that is not using a
       <a href=#plugin>plugin</a>.</li>

      </ul><p>Otherwise, process <var title="">field</var> as follows:</p>

     </li>

     <li><p>Let <var title="">type</var> be the value of the <code title="">type</code> IDL attribute of <var title="">field</var>.</li> <!-- if the field is an <object>
     element, this will get ignored. -->

     <li>

      <p>If the <var title="">field</var> element is an
      <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state,
      then run these further nested substeps:</p>

      <ol><li><p>If the <var title="">field</var> element has an <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute specified and value
       is not the empty string, let <var title="">name</var> be that
       value followed by a single U+002E FULL STOP character
       (.). Otherwise, let <var title="">name</var> be the empty
       string.</li>

       <li><p>Let <var title="">name<sub title="">x</sub></var> be the
       string consisting of the concatenation of <var title="">name</var> and a single U+0078 LATIN SMALL LETTER X
       character (x).</li>

       <li><p>Let <var title="">name<sub title="">y</sub></var> be the
       string consisting of the concatenation of <var title="">name</var> and a single U+0079 LATIN SMALL LETTER Y
       character (y).</li>

       <li><p>The <var title="">field</var> element is <var title="">submitter</var>, and before this algorithm was invoked
       the user <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>indicated a
       coordinate</a>. Let <var title="">x</var> be the <var title="">x</var>-component of the coordinate selected by the
       user, and let <var title="">y</var> be the <var title="">y</var>-component of the coordinate selected by the
       user.</li>

       <li><p>Append an entry in the <var title="">form data set</var>
       with the name <var title="">name<sub title="">x</sub></var>,
       the value <var title="">x</var>, and the type <var title="">type</var>.</li>

       <li><p>Append an entry in the <var title="">form data set</var>
       with the name <var title="">name<sub title="">y</sub></var> and
       the value <var title="">y</var>, and the type <var title="">type</var>.</li>

       <li><p>Skip the remaining substeps for this element: if there
       are any more elements in <var title="">controls</var>, return
       to the top of the <a href=#constructing-form-data-set>constructing the form data
       set</a> step, otherwise, jump to the next step in the overall
       form submission algorithm.</li>

      </ol></li>

     <li><p>Let <var title="">name</var> be the value of the <var title="">field</var> element's <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute.</li>

     <li><p>If the <var title="">field</var> element is a
     <code><a href=#the-select-element>select</a></code> element, then for each <code><a href=#the-option-element>option</a></code>
     element in the <code><a href=#the-select-element>select</a></code> element whose <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true,
     append an entry in the <var title="">form data set</var> with the
     <var title="">name</var> as the name, the <a href=#concept-option-value title=concept-option-value>value</a> of the
     <code><a href=#the-option-element>option</a></code> element as the value, and <var title="">type</var> as the type.</li>

     <li>

      <p>Otherwise, if the <var title="">field</var> element is an
      <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state or the
      <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state,
      then run these further nested substeps:</p>

      <ol><li><p>If the <var title="">field</var> element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute specified, then
       let <var title="">value</var> be the value of that attribute;
       otherwise, let <var title="">value</var> be the string
       "<code title="">on</code>".</li>

       <li><p>Append an entry in the <var title="">form data set</var>
       with <var title="">name</var> as the name, <var title="">value</var> as the value, and <var title="">type</var>
       as the type.</li>

      </ol></li>

     <li><p>Otherwise, if the <var title="">field</var> element is an
     <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, then for
     each file <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected</a> in the
     <code><a href=#the-input-element>input</a></code> element, append an entry in the <var title="">form data set</var> with the <var title="">name</var> as
     the name, the file (consisting of the name, the type, and the
     body) as the value, and <var title="">type</var> as the type. If
     there are no <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>,
     then append an entry in the <var title="">form data set</var>
     with the <var title="">name</var> as the name, the empty string
     as the value, and <code title="">application/octet-stream</code>
     as the type.</li>
     <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=529859 -->

     <li><p>Otherwise, if the <var title="">field</var> element is an
     <code><a href=#the-object-element>object</a></code> element: try to obtain a form submission
     value from the <a href=#plugin>plugin</a><!-- using NPAPI's
     NPP_GetValue() entry point with the NPPVformValue variable -->,
     and if that is successful, append an entry in the <var title="">form data set</var> with <var title="">name</var> as the
     name, the returned form submission value as the value, and the
     string "<code title="">object</code>" as the type.</li>

     <li><p>Otherwise, append an entry in the <var title="">form data
     set</var> with <var title="">name</var> as the name, the <a href=#concept-fe-value title=concept-fe-value>value</a> of the <var title="">field</var> element as the value, and <var title="">type</var> as the type.</li>

    </ol></li>

   <li><p>Let <var title="">action</var> be the <var title="">submitter</var> element's <a href=#concept-fs-action title=concept-fs-action>action</a>.</li>

   <li>

    <p>If <var title="">action</var> is the empty string, let <var title="">action</var> be <a href="#the-document's-address">the document's address</a>.</p>

    <p class=note>This step is a <a href=#willful-violation>willful violation</a> of
    RFC 3986, which would require base URL processing here. This
    violation is motivated by a desire for compatibility with legacy
    content. <a href=#refsRFC3986>[RFC3986]</a></p>

    <!-- Don't ask me why. But that's what IE does. It even treats
    action="" differently from action=" " or action="#" (the latter
    two resolve to the base URL, the first one resolves to the doc
    URL). And other browsers concur. It is even required, see e.g.
      http://bugs.webkit.org/show_bug.cgi?id=7763
      https://bugzilla.mozilla.org/show_bug.cgi?id=297761
    -->

   </li>

   <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the
   <a href=#url>URL</a> <var title="">action</var>, relative to the <var title="">submitter</var> element. If this fails, abort these
   steps. Otherwise, let <var title="">action</var> be the resulting
   <a href=#absolute-url>absolute URL</a>.</li>

   <li><p>Let <var title="">scheme</var> be the <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> of the resulting
   <a href=#absolute-url>absolute URL</a>.</li>

   <li><p>Let <var title="">enctype</var> be the <var title="">submitter</var> element's <a href=#concept-fs-enctype title=concept-fs-enctype>enctype</a>.</li>

   <li><p>Let <var title="">method</var> be the <var title="">submitter</var> element's <a href=#concept-fs-method title=concept-fs-method>method</a>.</li>

   <li><p>Let <var title="">target</var> be the <var title="">submitter</var> element's <a href=#concept-fs-target title=concept-fs-target>target</a>.</li>

   <li>

    <p>Select the appropriate row in the table below based on the
    value of <var title="">scheme</var> as given by the first cell of
    each row. Then, select the appropriate cell on that row based on
    the value of <var title="">method</var> as given in the first cell
    of each column. Then, jump to the steps named in that cell and
    defined below the table.</p>

    <table><thead><tr><td>
      <th> <a href=#attr-fs-method-get title=attr-fs-method-GET>GET</a>
      <th> <a href=#attr-fs-method-post title=attr-fs-method-POST>POST</a>
      <th> <a href=#attr-fs-method-put title=attr-fs-method-PUT>PUT</a>
      <th> <a href=#attr-fs-method-delete title=attr-fs-method-DELETE>DELETE</a>
     <tbody><tr><th> <code title="">http</code>
      <td> <a href=#submit-mutate-action title=submit-mutate-action>Mutate action</a>
      <td> <a href=#submit-body title=submit-body>Submit as entity body</a>
      <td> <a href=#submit-body title=submit-body>Submit as entity body</a>
      <td> <a href=#submit-delete-action title=submit-delete-action>Delete action</a>
     <tr><th> <code title="">https</code>
      <td> <a href=#submit-mutate-action title=submit-mutate-action>Mutate action</a>
      <td> <a href=#submit-body title=submit-body>Submit as entity body</a>
      <td> <a href=#submit-body title=submit-body>Submit as entity body</a>
      <td> <a href=#submit-delete-action title=submit-delete-action>Delete action</a>
     <tr><th> <code title="">ftp</code>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
     <tr><th> <code title="">javascript</code>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
     <tr><th> <code title="">data</code>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
      <td> <a href=#submit-data-post title=submit-data-post>Post to data:</a>
      <td> <a href=#submit-data-put title=submit-data-put>Put to data:</a>
      <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
     <tr><th> <code title="">mailto</code>
      <td> <a href=#submit-mailto-headers title=submit-mailto-headers>Mail with headers</a>
      <td> <a href=#submit-mailto-body title=submit-mailto-body>Mail as body</a>
      <td> <a href=#submit-mailto-headers title=submit-mailto-headers>Mail with headers</a>
      <td> <a href=#submit-mailto-headers title=submit-mailto-headers>Mail with headers</a>
    </table><p>If <var title="">scheme</var> is not one of those listed in
    this table, then the behavior is not defined by this
    specification. User agents should, in the absence of another
    specification defining this, act in a manner analogous to that
    defined in this specification for similar schemes.</p>

    <p>The behaviors are as follows:</p>

    <dl><dt><dfn id=submit-mutate-action title=submit-mutate-action>Mutate action</dfn>
     <dd>

      <p>Let <var title="">query</var> be the result of encoding the
      <var title="">form data set</var> using the <a href=#application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
      algorithm</a>, interpreted as a US-ASCII string.</p>

      <!-- by this point we've already tried to resolve the URL, so we
      know we can parse it -->

      <p>Let <var title="">destination</var> be a new <a href=#url>URL</a>
      that is equal to the <var title="">action</var> except that its
      <a href=#url-query title=url-query>&lt;query&gt;</a> component is
      replaced by <var title="">query</var> (adding a U+003F QUESTION
      MARK character (?) if appropriate).</p>

      <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
      form submission target browsing context</a>.</p>

      <p><a href=#navigate>Navigate</a> <var title="">target browsing
      context</var> to <var title="">destination</var>. If <var title="">target browsing context</var> was newly created for
      this purpose by the steps above, then it must be navigated with
      <a href=#replacement-enabled>replacement enabled</a>.</p>

     </dd>

     <dt><dfn id=submit-body title=submit-body>Submit as entity body</dfn>
     <dd>

      <p>Let <var title="">entity body</var> be the result of encoding
      the <var title="">form data set</var> using the
      <a href=#appropriate-form-encoding-algorithm>appropriate form encoding algorithm</a>.</p>

      <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
      form submission target browsing context</a>.</p>

      <p>Let <var title="">MIME type</var> be determined as
      follows:</p>

      <dl><dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code></dt>

       <dd>Let <var title="">MIME type</var> be "<code title="">application/x-www-form-urlencoded</code>".</dd>

       <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code></dt>

       <dd>Let <var title="">MIME type</var> be "<code title="">multipart/form-data</code>".</dd>

       <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code></dt>

       <dd>Let <var title="">MIME type</var> be "<code title="">text/plain</code>".</dd>

      </dl><p>If <var title="">method</var> is anything but GET or POST,
      and the <a href=#origin>origin</a> of <var title="">action</var> is not
      the <a href=#same-origin>same origin</a> as that of the <code><a href=#the-form-element>form</a></code>
      element's <code><a href=#document>Document</a></code>, then abort these steps.</p>
      <!-- CORS, one day -->

      <p>Otherwise, <a href=#navigate>navigate</a> <var title="">target
      browsing context</var> to <var title="">action</var> using the
      HTTP method given by <var title="">method</var> and with <var title="">entity body</var> as the entity body, of type <var title="">MIME type</var>. If <var title="">target browsing
      context</var> was newly created for this purpose by the steps
      above, then it must be navigated with <a href=#replacement-enabled>replacement
      enabled</a>.</p>

     </dd>

     <dt><dfn id=submit-delete-action title=submit-delete-action>Delete action</dfn>
     <dd>

      <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
      form submission target browsing context</a>.</p>

      <p>If the <a href=#origin>origin</a> of <var title="">action</var> is
      not the <a href=#same-origin>same origin</a> as that of the
      <code><a href=#the-form-element>form</a></code> element's <code><a href=#document>Document</a></code>, then abort
      these steps.</p> <!-- CORS, one day -->

      <p>Otherwise, <a href=#navigate>navigate</a> <var title="">target
      browsing context</var> to <var title="">action</var> using the
      DELETE method. If <var title="">target browsing context</var>
      was newly created for this purpose by the steps above, then it
      must be navigated with <a href=#replacement-enabled>replacement enabled</a>.</p>

     </dd>

     <dt><dfn id=submit-get-action title=submit-get-action>Get action</dfn>
     <dd>

      <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
      form submission target browsing context</a>.</p>

      <p><a href=#navigate>Navigate</a> <var title="">target browsing
      context</var> to <var title="">action</var>. If <var title="">target browsing context</var> was newly created for
      this purpose by the steps above, then it must be navigated with
      <a href=#replacement-enabled>replacement enabled</a>.</p>

     </dd>

     <dt><dfn id=submit-data-post title=submit-data-post>Post to data:</dfn>
     <dd>

      <p>Let <var title="">data</var> be the result of encoding the
      <var title="">form data set</var> using the <a href=#appropriate-form-encoding-algorithm>appropriate
      form encoding algorithm</a>.</p>

      <p>If <var title="">action</var> contains the string "<code title="">%%%%</code>" (four U+0025 PERCENT SIGN characters),
      then %-escape all bytes in <var title="">data</var> that, if
      interpreted as US-ASCII, do not match the <code title="">unreserved</code> production in the URI Generic Syntax,
      and then, treating the result as a US-ASCII string, further
      %-escape all the U+0025 PERCENT SIGN characters in the resulting
      string and replace the first occurrence of "<code title="">%%%%</code>" in <var title="">action</var> with the
      resulting double-escaped string. <a href=#refsRFC3986>[RFC3986]</a></p>

      <p>Otherwise, if <var title="">action</var> contains the string
      "<code title="">%%</code>" (two U+0025 PERCENT SIGN characters
      in a row, but not four), then %-escape all characters in <var title="">data</var> that, if interpreted as US-ASCII, do not
      match the <code title="">unreserved</code> production in the URI
      Generic Syntax, and then, treating the result as a US-ASCII
      string, replace the first occurrence of "<code title="">%%</code>" in <var title="">action</var> with the
      resulting escaped string. <a href=#refsRFC3986>[RFC3986]</a></p>

      <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
      form submission target browsing context</a>.</p>

      <p><a href=#navigate>Navigate</a> <var title="">target browsing
      context</var> to the potentially modified <var title="">action</var>. If <var title="">target browsing
      context</var> was newly created for this purpose by the steps
      above, then it must be navigated with <a href=#replacement-enabled>replacement
      enabled</a>.</p>

     </dd>

     <dt><dfn id=submit-data-put title=submit-data-put>Put to data:</dfn>
     <dd>

      <p>Let <var title="">data</var> be the result of encoding the
      <var title="">form data set</var> using the <a href=#appropriate-form-encoding-algorithm>appropriate
      form encoding algorithm</a>.</p>

      <p>Let <var title="">MIME type</var> be determined as
      follows:</p>

      <dl><dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code></dt>

       <dd>Let <var title="">MIME type</var> be "<code title="">application/x-www-form-urlencoded</code>".</dd>

       <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code></dt>

       <dd>Let <var title="">MIME type</var> be "<code title="">multipart/form-data</code>".</dd>

       <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code></dt>

       <dd>Let <var title="">MIME type</var> be "<code title="">text/plain</code>".</dd>

      </dl><p>Let <var title="">destination</var> be the result of
      concatenating the following:</p>

      <ol class=brief><li>The string "<code title="">data:</code>".</li>

       <li>The value of <var title="">MIME type</var>.</li>

       <li>The string "<code title="">;base64,</code>".</li>

       <li>A base-64 encoded representation of <var title="">data</var>. <a href=#refsRFC2045>[RFC2045]</a></li>

      </ol><p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
      form submission target browsing context</a>.</p>

      <p><a href=#navigate>Navigate</a> <var title="">target browsing
      context</var> to <var title="">destination</var>. If <var title="">target browsing context</var> was newly created for
      this purpose by the steps above, then it must be navigated with
      <a href=#replacement-enabled>replacement enabled</a>.</p>

     </dd>

     <dt><dfn id=submit-mailto-headers title=submit-mailto-headers>Mail with headers</dfn>
     <dd>

      <p>Let <var title="">headers</var> be the resulting encoding the
      <var title="">form data set</var> using the <a href=#application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
      algorithm</a>, interpreted as a US-ASCII string.</p>

      <p>Replace occurrences of U+002B PLUS SIGN characters (+) in
      <var title="">headers</var> with the string "<code title="">%20</code>".</p>

      <p>Let <var title="">destination</var> consist of all the
      characters from the first character in <var title="">action</var> to the character immediately before the
      first U+003F QUESTION MARK character (?), if any, or the end of
      the string if there are none.</p>

      <p>Append a single U+003F QUESTION MARK character (?) to <var title="">destination</var>.</p>

      <p>Append <var title="">headers</var> to <var title="">destination</var>.</p>

      <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
      form submission target browsing context</a>.</p>

      <p><a href=#navigate>Navigate</a> <var title="">target browsing
      context</var> to <var title="">destination</var>. If <var title="">target browsing context</var> was newly created for
      this purpose by the steps above, then it must be navigated with
      <a href=#replacement-enabled>replacement enabled</a>.</p>

     </dd>

     <dt><dfn id=submit-mailto-body title=submit-mailto-body>Mail as body</dfn>
     <dd>

      <p>Let <var title="">body</var> be the resulting encoding the
      <var title="">form data set</var> using the <a href=#appropriate-form-encoding-algorithm>appropriate
      form encoding algorithm</a> and then %-escaping all the bytes
      in the resulting byte string that, when interpreted as US-ASCII,
      do not match the <code title="">unreserved</code> production in
      the URI Generic Syntax. <a href=#refsRFC3986>[RFC3986]</a></p>

      <p>Let <var title="">destination</var> have the same value as
      <var title="">action</var>.</p>

      <p>If <var title="">destination</var> does not contain a U+003F
      QUESTION MARK character (?), append a single U+003F QUESTION
      MARK character (?) to <var title="">destination</var>. Otherwise, append a single U+0026
      AMPERSAND character (&amp;).</p>

      <p>Append the string "<code title="">body=</code>" to <var title="">destination</var>.</p>

      <p>Append <var title="">body</var>, interpreted as a US-ASCII
      string, to <var title="">destination</var>.</p>

      <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
      form submission target browsing context</a>.</p>

      <p><a href=#navigate>Navigate</a> <var title="">target browsing
      context</var> to <var title="">destination</var>. If <var title="">target browsing context</var> was newly created for
      this purpose by the steps above, then it must be navigated with
      <a href=#replacement-enabled>replacement enabled</a>.</p>

     </dd>

    </dl><p><dfn id=the-form-submission-target-browsing-context>The form submission target browsing context</dfn> is
    obtained, when needed by the behaviors described above, as
    follows: If the user indicated a specific <a href=#browsing-context>browsing
    context</a> to use when submitting the form, then that is the
    target browsing context. Otherwise, apply <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for
    choosing a browsing context given a browsing context name</a>
    using <var title="">target</var> as the name and the
    <a href=#browsing-context>browsing context</a> of <var title="">form</var> as the
    context in which the algorithm is executed; the resulting
    <a href=#browsing-context>browsing context</a> is the target browsing context.</p>

    <p>The <dfn id=appropriate-form-encoding-algorithm>appropriate form encoding algorithm</dfn> is
    determined as follows:</p>

    <dl><dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code></dt>

     <dd>Use the <a href=#application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
     algorithm</a>.</dd>

     <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code></dt>

     <dd>Use the <a href=#multipart/form-data-encoding-algorithm><code title="">multipart/form-data</code> encoding
     algorithm</a>.</dd>

     <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code></dt>

     <dd>Use the <a href=#text/plain-encoding-algorithm><code title="">text/plain</code> encoding
     algorithm</a>.</dd>

    </dl></li>

  </ol></div>


  <div class=impl>

  <h5 id=url-encoded-form-data><span class=secno>4.10.21.4 </span>URL-encoded form data</h5>

  <p>The <dfn id=application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
  algorithm</dfn> is as follows:</p>

  <ol><li><p>Let <var title="">result</var> be the empty string.</li>

   <li>

    <p>If the <code><a href=#the-form-element>form</a></code> element has an <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code> attribute,
    then, taking into account the characters found in the <var title="">form data set</var>'s names and values, and the character
    encodings supported by the user agent, select a character encoding
    from the list given in the <code><a href=#the-form-element>form</a></code>'s <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code> attribute
    that is an <a href=#ascii-compatible-character-encoding>ASCII-compatible character encoding</a>. If
    none of the encodings are supported, then let the selected
    character encoding be UTF-8.</p>

    <p>Otherwise, if the <a href="#document's-character-encoding">document's character encoding</a> is
    an <a href=#ascii-compatible-character-encoding>ASCII-compatible character encoding</a>, then that is
    the selected character encoding.</p>

    <p>Otherwise, let the selected character encoding be UTF-8.</p>

   </li>

   <li><p>Let <var title="">charset</var> be the <a href=#preferred-mime-name>preferred MIME
   name</a> of the selected character encoding.</li>

   <li>

    <p>For each entry in the <var title="">form data set</var>,
    perform these substeps:</p>

    <ol><li><p>If the entry's name is "<code title="">_charset_</code>"
     and its type is "<code title="">hidden</code>", replace its value
     with <var title="">charset</var>.</li>

     <li><p>If the entry's type is "<code title="">file</code>",
     replace its value with the file's filename only.</li>

     <li><p>For each character in the entry's name and value that
     cannot be expressed using the selected character encoding,
     replace the character by a string consisting of a U+0026
     AMPERSAND character (&amp;), a U+0023 NUMBER SIGN character (#),
     one or more characters in the range U+0030 DIGIT ZERO (0) to
     U+0039 DIGIT NINE (9) representing the Unicode code point of the
     character in base ten, and finally a U+003B SEMICOLON character
     (;).</li><!-- we should say it should be the shortest
     possible string, no leading zeros. this whole step as asinine,
     though, so... -->

     <li>

      <p>For each character in the entry's name and value, apply the
      appropriate subsubsteps from the following list:</p>

      <dl class=switch><dt>The character is a U+0020 SPACE character</dt>

       <dd>Replace the character with a single U+002B PLUS SIGN
       character (+).</dd>


       <!-- * - . _ 0-9 a-z A-Z -->

       <dt>If the character isn't in the range U+0020, U+002A,
       U+002D, U+002E, U+0030 to U+0039, U+0041 to U+005A, U+005F,
       U+0061 to U+007A</dt>

       <dd>

        <p>Replace the character with a string formed as follows:</p>

        <ol><li><p>Let <var title="">s</var> be an empty string.</li>

         <li>

          <p>For each byte <var title="">b</var> of the character when
          expressed in the selected character encoding in turn, run
          the appropriate subsubsubstep from the list below:</p>

          <dl class=switch><dt>If the byte is in the range 0x20, 0x2A, 0x2D, 0x2E,
           0x30 to 0x39, 0x41 to 0x5A, 0x5F, 0x61 to 0x7A</dt>

           <dd><p>Append to <var title="">s</var> the Unicode
           character with the codepoint equal to the byte.</dd>

           <dt>Otherwise</dt>

           <dd><p>Append to the string a U+0025 PERCENT SIGN character
           (%) followed by two characters in the ranges U+0030 DIGIT
           ZERO (0) to U+0039 DIGIT NINE (9) and U+0041 LATIN CAPITAL
           LETTER A to U+0046 LATIN CAPITAL LETTER F representing the
           hexadecimal value of the byte (zero-padded if
           necessary).</dd>

          </dl></li>

        </ol></dd>

       <dt>Otherwise</dt>

       <dd><p>Leave the character as is.</dd>

      </dl></li>

     <li><p>If the entry's name is "<code title="">isindex</code>",
     its type is "<code title="">text</code>", and this is the first
     entry in the <var title="">form data set</var>, then append the
     value to <var title="">result</var> and skip the rest of the
     substeps for this entry, moving on to the next entry, if any, or
     the next step in the overall algorithm otherwise.</li>

     <li><p>If this is not the first entry, append a single U+0026
     AMPERSAND character (&amp;) to <var title="">result</var>.</li>

     <li><p>Append the entry's name to <var title="">result</var>.</li>

     <li><p>Append a single U+003D EQUALS SIGN character (=) to <var title="">result</var>.</li>

     <li><p>Append the entry's value to <var title="">result</var>.</li>

    </ol></li>

   <li><p>Encode <var title="">result</var> as US-ASCII and return the
   resulting byte stream.</li>

  </ol></div>



  <div class=impl>

  <h5 id=multipart-form-data><span class=secno>4.10.21.5 </span>Multipart form data</h5>

  <p>The <dfn id=multipart/form-data-encoding-algorithm><code title="">multipart/form-data</code> encoding
  algorithm</dfn> is to encode the <var title="">form data set</var>
  using the rules described by RFC2388, <cite>Returning Values from
  Forms: <code title="">multipart/form-data</code></cite>, and return
  the resulting byte stream. <a href=#refsRFC2388>[RFC2388]</a></p>

  <p>Each entry in the <var title="">form data set</var> is a
  <i>field</i>, the name of the entry is the <i>field name</i> and the
  value of the entry is the <i>field value</i>, unless the entry's
  name is "<code title="">_charset_</code>" and its type is "<code title="">hidden</code>", in which case the <i>field value</i> is the
  character encoding used by the aforementioned algorithm to encode
  the value of the field.</p>

  <p>The order of parts must be the same as the order of fields in the
  <var title="">form data set</var>. Multiple entries with the same
  name must be treated as distinct fields.</p>

  </div>



  <div class=impl>

  <h5 id=plain-text-form-data><span class=secno>4.10.21.6 </span>Plain text form data</h5>

  <p>The <dfn id=text/plain-encoding-algorithm><code title="">text/plain</code> encoding
  algorithm</dfn> is as follows:</p>

  <ol><li><p>Let <var title="">result</var> be the empty string.</li>

   <li>

    <!-- this is different from application/x-www-form-urlencoded in
    that it isn't limited to ASCII-compatible encodings -->

    <p>If the <code><a href=#the-form-element>form</a></code> element has an <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code> attribute,
    then, taking into account the characters found in the <var title="">form data set</var>'s names and values, and the character
    encodings supported by the user agent, select a character encoding
    from the list given in the <code><a href=#the-form-element>form</a></code>'s <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code>
    attribute. If none of the encodings are supported, then let the
    selected character encoding be UTF-8.</p>

    <p>Otherwise, the selected character encoding is the
    <a href="#document's-character-encoding">document's character encoding</a>.</p>

   </li>

   <li><p>Let <var title="">charset</var> be the <a href=#preferred-mime-name>preferred MIME
   name</a> of the selected character encoding.</li>

   <li><p>If the entry's name is "<code title="">_charset_</code>" and
   its type is "<code title="">hidden</code>", replace its value with
   <var title="">charset</var>.</li>

   <li><p>If the entry's type is "<code title="">file</code>", replace
   its value with the file's filename only.</li>

   <li>

    <p>For each entry in the <var title="">form data set</var>,
    perform these substeps:</p>

    <ol><li><p>Append the entry's name to <var title="">result</var>.</li>

     <li><p>Append a single U+003D EQUALS SIGN character (=) to <var title="">result</var>.</li>

     <li><p>Append the entry's value to <var title="">result</var>.</li>

     <li><p>Append a U+000D CARRIAGE RETURN (CR) U+000A LINE FEED (LF)
     character pair to <var title="">result</var>.</li>

    </ol></li>

   <li><p>Encode <var title="">result</var> using the selected
   character encoding and return the resulting byte stream.</li>

  </ol></div>



  <div class=impl>

  <h4 id=resetting-a-form><span class=secno>4.10.22 </span>Resetting a form</h4>

  <p>When a form <var title="">form</var> is <dfn id=concept-form-reset title=concept-form-reset>reset</dfn>, the user agent must
  <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-reset>reset</code>, that is cancelable, at <var title="">form</var>, and then, if that event is not canceled, must
  invoke the <a href=#concept-form-reset-control title=concept-form-reset-control>reset
  algorithm</a> of each <a href=#category-reset title=category-reset>resettable elements</a> whose <a href=#form-owner>form
  owner</a> is <var title="">form</var>, and <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> from <var title="">form</var>.</p>

  <p>Each <a href=#category-reset title=category-reset>resettable element</a>
  defines its own <dfn id=concept-form-reset-control title=concept-form-reset-control>reset
  algorithm</dfn>. Changes made to form controls as part of these
  algorithms do not count as changes caused by the user (and thus,
  e.g., do not cause <code title=event-input>input</code> events to
  fire).</p>

  </div>



  <div class=impl>

  <h4 id=event-dispatch><span class=secno>4.10.23 </span>Event dispatch</h4>

  <p>When the user agent is to <dfn id=broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</dfn> or
  <dfn id=broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code>
  events</dfn> from a <code><a href=#the-form-element>form</a></code> element <var title="">form</var>, it must run the following steps:</p>

  <ol><li><p>Let <var title="">controls</var> be a list of all the <a href=#category-reset title=category-reset>resettable elements</a> whose <a href=#form-owner>form
   owner</a> is <var title="">form</var>.</li>

   <li>If the user agent was to <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</a>, let <var title="">event name</var> be <code title=event-forminput>forminput</code>. Otherwise the user agent
   was to <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a>; let <var title="">event name</var> be <code title=event-formchange>formchange</code>.</li>

   <li><p>For each element in <var title="">controls</var>, in
   <a href=#tree-order>tree order</a>, <a href=#fire-a-simple-event>fire a simple event</a> named
   <var title="">event name</var> at the element.</li>

  </ol></div>


  <h3 id=interactive-elements><span class=secno>4.11 </span>Interactive elements</h3>

  <h4 id=the-details-element><span class=secno>4.11.1 </span>The <dfn><code>details</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>One <code><a href=#the-summary-element>summary</a></code> element followed by <a href=#flow-content>flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-details-open><a href=#attr-details-open>open</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmldetailselement>HTMLDetailsElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-details-open title=dom-details-open>open</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-details-element>details</a></code> element <a href=#represents>represents</a> a
  disclosure widget from which the user can obtain additional
  information or controls.</p>

  <p class=note>The <code><a href=#the-details-element>details</a></code> element is not appropriate
  for footnotes. Please see <a href=#footnotes>the section on
  footnotes</a> for details on how to mark up footnotes.</p>

  <p>The <span class=impl>first</span> <code><a href=#the-summary-element>summary</a></code> element
  child of the element, if any, <a href=#represents>represents</a> the summary or
  legend of the details. <span class=impl>If there is no child
  <code><a href=#the-summary-element>summary</a></code> element, the user agent should provide its own
  legend (e.g. "Details").</span></p>

  <p>The <dfn id=attr-details-open title=attr-details-open><code>open</code></dfn>
  content attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present,
  it indicates that the details are to be shown to the user. If the
  attribute is absent, the details are not to be shown.</p>

  <div class=impl>

  <p>If the attribute is removed, then the details should be
  hidden. If the attribute is added, the details should be shown.</p>

  <p>The user agent should allow the user to request that the details
  be shown or hidden. To honor a request for the details to be shown,
  the user agent must set the <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute on the element to
  the value <code title="">open</code>. To honor a request for the
  details to be hidden, the user agent must remove the <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute from the
  element.</p>

  <p>The <dfn id=dom-details-open title=dom-details-open><code>open</code></dfn>
  attribute must <a href=#reflect>reflect</a> the <code title=attr-details-open><a href=#attr-details-open>open</a></code> content attribute.</p>

  </div>

  <div class=example>

   <p>The following example shows the <code><a href=#the-details-element>details</a></code> element
   being used to hide technical details in a progress report.</p>

   <pre>&lt;section class="progress window"&gt;
 &lt;h1&gt;Copying "Really Achieving Your Childhood Dreams"&lt;/h1&gt;
 &lt;details&gt;
  &lt;summary&gt;Copying... &lt;progress max="375505392" value="97543282"&gt;&lt;/progress&gt; 25%&lt;/summary&gt;
  &lt;dl&gt;
   &lt;dt&gt;Transfer rate:&lt;/dt&gt; &lt;dd&gt;452KB/s&lt;/dd&gt;
   &lt;dt&gt;Local filename:&lt;/dt&gt; &lt;dd&gt;/home/rpausch/raycd.m4v&lt;/dd&gt;
   &lt;dt&gt;Remote filename:&lt;/dt&gt; &lt;dd&gt;/var/www/lectures/raycd.m4v&lt;/dd&gt;
   &lt;dt&gt;Duration:&lt;/dt&gt; &lt;dd&gt;01:16:27&lt;/dd&gt;
   &lt;dt&gt;Color profile:&lt;/dt&gt; &lt;dd&gt;SD (6-1-6)&lt;/dd&gt;
   &lt;dt&gt;Dimensions:&lt;/dt&gt; &lt;dd&gt;320&times;240&lt;/dd&gt;
  &lt;/dl&gt;
 &lt;/details&gt;
&lt;/section&gt;</pre>

  </div>

  <div class=example>

   <p>The following shows how a <code><a href=#the-details-element>details</a></code> element can be
   used to hide some controls by default:</p>

   <pre>&lt;details&gt;
 &lt;summary&gt;Name &amp; Extension:&lt;/summary&gt;
 &lt;p&gt;&lt;input type=text name=fn value="Pillar Magazine.pdf"&gt;
 &lt;p&gt;&lt;label&gt;&lt;input type=checkbox name=ext checked&gt; Hide extension&lt;/label&gt;
&lt;/details&gt;</pre>

   <p>One could use this in conjuction with other <code><a href=#the-details-element>details</a></code>
   in a list to allow the user to collapse a set of fields down to a
   small set of headings, with the ability to open each one.</p>

   <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></p>

   <p>In these examples, the summary really just summarises what the
   controls can change, and not the actual values, which is less than
   ideal.</p>

  </div>


  <h4 id=the-summary-element><span class=secno>4.11.2 </span>The <dfn><code>summary</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>As the first child of a <code><a href=#the-details-element>details</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href=#the-summary-element>summary</a></code> element <a href=#represents>represents</a> a
  summary, caption, or legend for the rest of the contents of the
  <code><a href=#the-summary-element>summary</a></code> element's parent <code><a href=#the-details-element>details</a></code>
  element<span class=impl>, if any</span>.</p>



<!-- v2DATAGRID
  <h4 id="datagrid">The <dfn><code>datagrid</code></dfn> element</h4>

  <dl class="element">
   <dt>Categories</dt>
   <dd><span>Flow content</span>.</dd>
   <dd><span>Interactive content</span>.</dd>
   <dd><span>Sectioning root</span>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <span>flow content</span> is expected.</dd>
   <dt>Content model:</dt>
   <dd><span>Flow content</span>.</dd>
   <dt>Content attributes:</dt>
   <dd><span>Global attributes</span></dd>
<!- -v2DGS:
   <dd><code title="attr-datagrid-multiple">multiple</code></dd>
- ->
   <dd><code title="attr-datagrid-disabled">disabled</code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn>HTMLDataGridElement</dfn> : <span>HTMLElement</span> {
<!- -v2DGS:
           attribute boolean <span title="dom-datagrid-multiple">multiple</span>;
- ->           attribute boolean <span title="dom-datagrid-disabled">disabled</span>;
           attribute <span>DataGridListener</span> <span title="dom-datagrid-listener">listener</span>;
<!- - v2DGS:
  readonly attribute <span>DataGridSelection</span> <span title="dom-datagrid-selection">selection</span>;
- ->
  // columns
  void <span title="dom-datagrid-addColumn">addColumn</span>(in <span>Column</span> id, in DOMString label, in DOMString type, in optional HTMLImageElement icon, in optional boolean sortable, in optional boolean hidden);
           attribute DOMString <span title="dom-datagrid-sortColumn">sortColumn</span>;
           attribute boolean <span title="dom-datagrid-sortAscending">sortAscending</span>;
  void <span title="dom-datagrid-clearColumns">clearColumns</span>();

  // rows
  void <span title="dom-datagrid-renotify">renotify</span>();
  void <span title="dom-datagrid-setRowCount">setRowCount</span>(in long childCount, in long rowCount);
  void <span title="dom-datagrid-setRows">setRows</span>(in <span>RowList</span> rows);
  void <span title="dom-datagrid-insertRows">insertRows</span>(in <span>RowList</span> rows);
  void <span title="dom-datagrid-deleteRows">deleteRows</span>(in <span>RowIDList</span> rows);
  void <span title="dom-datagrid-repaint">repaint</span>(in <span>RowID</span> row, in DOMString column);
  void <span title="dom-datagrid-clearRows">clearRows</span>();
<!- -
 v2: opening and closing a row
     moving a row's actual ID
      - imagine new mail moving a thread up; you just want to add the new mail to the thread and move the thread's first mail to the top
      - though actually that should probably just be done using display sorting
- ->
};

typedef DOMString <dfn>Column</dfn>;
typedef sequence&lt;<span>Column</span>> <dfn>ColumnList</dfn>;
typedef sequence&lt;any> <dfn>Cell</dfn>; // <span>Column</span>, any... (exact types expected depend on the column type)
typedef sequence&lt;<span>Cell</span>> <dfn>CellList</dfn>;
typedef sequence&lt;any> <dfn>Row</dfn>; // <span>RowID</span>, long, long, <span>CellList</span>, optional boolean, optional long
typedef sequence&lt;<span>Row</span>> <dfn>RowList</dfn>;
typedef sequence&lt;unsigned long> <dfn>RowID</dfn>;
typedef sequence&lt;<span>RowID</span>> <dfn>RowIDList</dfn>;

[Callback=FunctionOnly, NoInterfaceObject]
interface <dfn>RenderingContext2DCallback</dfn> {
  DOMString <span title="dom-Rendering2DContextCallback-handleEvent">handleEvent</span>(in <span>CanvasRenderingContext2D</span> context, in unsigned long width, in unsigned long height);
};</pre>
   </dd>
  </dl>

 <!- - v2:
   * datagrid: cells that are links (<a href=""></a>)
  - ->

  <p>The <code>datagrid</code> element <span>represents</span> an
  interactive representation of tree, list, or tabular data.</p>

  <p>The data being presented is provided by script using the methods
  described in the following sections.</p>

<!- -v2DGS:
  <p>The <dfn
  title="attr-datagrid-multiple"><code>multiple</code></dfn> attribute
  is a <span>boolean attribute</span>. When set, it indicates that the
  user can select more than one row at a time.</p>
- ->

  <p>The <dfn
  title="attr-datagrid-disabled"><code>disabled</code></dfn> attribute
  is a <span>boolean attribute</span> used to disable the
  control. <span class="impl">When the attribute is set, the user
  agent must disable the <code>datagrid</code>, preventing the user
  from interacting with it. The <code>datagrid</code> element should
  still continue to update itself when the underlying data changes,
  though, as described in the next few sections. However, conformance
  requirements stating that <code>datagrid</code> elements must react
  to users in particular ways do not apply when the
  <code>datagrid</code> is disabled.</span></p>

  <div class="impl">

  <!- -vsDGS: multiple - ->

  <p>The <dfn
  title="dom-datagrid-disabled"><code>disabled</code></dfn> IDL
  attribute must <span>reflect</span> the content attribute of the
  same name.</p>

  </div>

  <!- - v2DGPA: One possible thing to be added is a way to detect when a
  row/selection has been deleted, activated, etc, by the user (delete
  key, enter key, etc). (v2DGPA = <datagrid> Perform Action) - ->


  <h5>Introduction</h5>

  <p><i>This section is non-normative.</i></p>

  <p>In the <code>datagrid</code> data model, data is structured as a
  set of rows representing a tree, each row being split into a number
  of columns. The columns are always present in the data model,
  although individual columns might be hidden in the presentation.</p>

  <hr>

  <p>Each row can have child rows. Child rows may be hidden or
  shown, by closing or opening (respectively) the parent row.</p>

  <p>Rows are referred to by the path along the tree that one would
  take to reach the row, using zero-based indices. Thus, the first row
  of a list is row "0", the second row is row "1"; the first child row
  of the first row is row "0,0", the second child row of the first row
  is row "0,1"; the fourth child of the seventh child of the third
  child of the tenth row is "9,2,6,3", etc.</p>

  <p>The chains of numbers that give a row's path, or identifier, are
  represented by arrays of positions, represented in IDL by the
  <span>RowID</span> interface.</p>

  <p>The root of the tree is represented by an empty array.</p>

  <hr>

  <p>Each column has a string that is used to identify it in the API,
  a label that is shown to users interacting with the column, a type,
  and optionally an icon.</p>

  <p>The possible types are as follows:</p>

  <table>
   <thead>
    <tr>
     <td>Keyword
     <td>Description
   <tbody>
    <tr>
     <td><code title="datagrid-type-text">text</code>
     <td>Simple text.
    <tr>
     <td><code title="datagrid-type-editable">editable</code>
     <td>Editable text.
    <tr>
     <td><code title="datagrid-type-checkable">checkable</code>
     <td>Text with a check box.
    <tr>
     <td><code title="datagrid-type-list">list</code>
     <td>A list of values that the user can switch between.
    <tr>
     <td><code title="datagrid-type-progress">progress</code>
     <td>A progress bar.
    <tr>
     <td><code title="datagrid-type-meter">meter</code>
     <td>A gauge.
    <tr>
     <td><code title="datagrid-type-custom">custom</code>
     <td>A canvas onto which arbitrary content can be drawn.
  </table>

  <p>Each column can be flagged as sortable, in which case the user
  will be able to sort the view using that column.</p>

  <p>Columns are not necessarily visible. A column can be created
  invisible by default. The user can select which columns are to be
  shown.</p>

  <p>When no columns have been added to the <code>datagrid</code>, a
  column with no name, whose identifier is the empty string, whose
  type is <code title="datagrid-type-text">text</code>, and which is
  not sortable, is implied. This column is removed if any explicit
  columns are declared.</p>

  <p>Each cell uses the type given for its column, so all cells in a
  column present the same type of information.</p>

<!- -v2DGS:
  <p>Selection of data in a <code>datagrid</code> operates at the row
  level. If the <code title="attr-datagrid-multiple">multiple</code>
  attribute is present, multiple rows can be selected at once,
  otherwise the user can only select one row at a time.</p>
- ->

  <!- - v2DGDND: selection should draggable to and from datagrids - ->


  <h6>Example: a <code>datagrid</code> backed by a static <code>table</code> element</h6>

  ...


  <h6>Example: a <code>datagrid</code> backed by nested <code>ol</code> elements</h6>

  ...


  <h6>Example: a <code>datagrid</code> backed by a server</h6>

  ...


  <h5>Populating the <code>datagrid</code></h5>

  <dl class="domintro">

   <dt><var title="">datagrid</var> . <code title="dom-datagrid-listener">listener</code> [ = <var title="">value</var> ]</dt>
   <dd>

    <p>Return the current object that is configured as the
    <code>datagrid</code> listener, if any. Returns null if there is
    none.</p>

    <p>The listener is an object provided by the script author that
    receives notifications when the <code>datagrid</code> needs row
    data to render itself, when the user opens and closes rows with
    children, when the user edits a cell, and when the user invokes a
    row's context menu. (The <code>DataGridListener</code> interface
    used for this purpose is described in the next section.)</p>

    <p>Can be set, to change the current listener.</p>

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-renotify">renotify</code>()</dt>
   <dd>

    <p>Causes the <code>datagrid</code> to resend notifications to the
    listener (if any) for any rows or cells that the
    <code>datagrid</code> does not yet have information for.</p>

    <!- - useful, e.g., if there is a server error and the script loses
    track of what rows it's supposed to be reporting. - ->

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-addColumn">addColumn</code>(<var title="">id</var>, <var title="">label</var>, <var title="">type</var> [, <var title="">icon</var> [, <var title="">sortable</var> [, <var title="">hidden</var> ] ] ] )</dt>
   <dd>

    <p>Adds a column to the <code>datagrid</code>.</p>

    <p>If a column with the given identifier has already been added,
    it just replaces the information for that column.</p>

    <p>The possible types are enumerated in the previous section.</p>

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-sortColumn">sortColumn</code> [ = <var title="">value</var> ]</dt>
   <dd>

    <p>Returns the identifier of the column by which the data is to be
    sorted.</p>

    <p>Can be set, to indicate that the sort order has changed. This
    will cause the <code>datagrid</code> to clear its position
    information for rows, so <code
    title="dom-datagrid-setRows">setRows()</code> will have to be
    called again with the new sort order.</p>

    <p>The columns are not actually sorted by the
    <code>datagrid</code>; the data has to be sorted by the script
    that adds the rows to the <code>datagrid</code>.</p>

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-sortAscending">sortAscending</code> [ = <var title="">value</var> ]</dt>
   <dd>

    <p>Returns true if the data is to be sorted with smaller values
    first; otherwise, returns false, indicating that bigger values are
    to be put first.</p>

    <p>Can be set, to indicate that the order is about to change.</p>

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-clearColumns">clearColumns</code>()</dt>
   <dd>

    <p>Removes all the columns in the <code>datagrid</code>,
    reinstating the implied column.</p>

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-setRowCount">setRowCount</code>(<var title="">childCount</var>, <var title="">rowCount</var>)</dt>
   <dd>

    <p>Sets the numbers of rows in the <code>datagrid</code>,
    excluding rows that are descendants of rows that are closed.</p>

    <p>Throws a <code>DATAGRID_MODEL_ERR</code> exception if the
    arguments contradict each other or previously declared information
    (e.g. declaring that the <code>datagrid</code> has three rows when
    the 12th row has been declared).</p>

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-setRows">setRows</code>(<var title="">rows</var>)</dt>
   <dd>

    <p>Updates data for rows in the <code>datagrid</code>, or fills in
    data for rows previously implied by a call to <code
    title="dom-datagrid-setRowCount">setRowCount()</code> but not
    previously declared.</p>

    <p>The <var title="">rows</var> argument is an array of rows, each
    represented by a further array consisting of:</p>

    <ol class="brief">

     <li>A <code>RowID</code> object identifying the row.</li>

     <li>An integer giving the position of the row in its parent,
     given the current sort order, or &#x2212;1 to set other row data
     without setting a position or changing a previously declared
     position.</li>

     <li>An integer giving the number of children of the row, or 0 if
     the row has no children, or &#x2212;1 if the row has children but
     the count is currently unknown. If the number of children has
     already been set to 0 or a positive integer, then passing
     &#x2212;1 leaves the previous count unchanged.</li>

     <li>An array giving the data for zero or more cells in the row,
     as described below.</li>

     <li>A boolean declaring whether the row is open or not. This
     entry, if omitted, is assumed to be false (closed), unless the
     row has already been declared as open.</li>

     <li>An integer giving the number of rows that are descendants of
     this row, excluding those that are descendants of descendants of
     this row that are closed. This entry can be omitted if the row is
     closed or if it has already been declared.</li>

    </ol>

    <p>The array giving the data for the cells in the row consists of
    a further set of arrays, one per cell. The first item of each of
    these arrays is the column's identifier; the subsequent values
    vary based on the type of the column, as follows:</p>

    <dl>

     <dt><code title="datagrid-type-text">text</code></dt>
     <dd>
      <ol class="brief">
       <li>A string giving the cell's value.
       <li>Optionally, an <code>img</code> element giving an icon for the cell.
      </ol>
     </dd>

     <dt><code title="datagrid-type-editable">editable</code></dt>
     <dd>
      <ol class="brief">
       <li>A string giving the cell's value.
       <li>Optionally, a <code>datalist</code> element giving a set of predefined options.
       <li>Optionally, an <code>img</code> element giving an icon for the cell.
      </ol>
     </dd>

     <dt><code title="datagrid-type-checkable">checkable</code></dt>
     <dd>
      <ol class="brief">
       <li>A string giving the cell's value.
       <li>A boolean, indicating whether the cell is checked (true) or not (false).
       <li>Optionally, a boolean indicating whether the value of the cell is obscured as indeterminate (true), or not (false).
       <li>Optionally, an <code>img</code> element giving an icon for the cell.
      </ol>
     </dd>

     <dt><code title="datagrid-type-list">list</code></dt>
     <dd>
      <ol class="brief">
       <li>A string giving the cell's current value.
       <li>A <code>select</code> element giving the <span title="concept-select-option-list">list of options</span>.
       <li>Optionally, an <code>img</code> element giving an icon for the cell.
      </ol>
     </dd>

     <dt><code title="datagrid-type-progress">progress</code></dt>
     <dd>
      <ol class="brief">
       <li>A value in the range 0.0 (no progress) to 1.0 (task complete).
      </ol>
     </dd>

     <dt><code title="datagrid-type-meter">meter</code></dt>
     <dd>
      <ol class="brief">
       <li>A number giving the cell's value.
       <li>Optionally, a number giving the maximum value, if it's not 1.
       <li>Optionally, a number giving the minimum value, if it's not 0.
       <li>Optionally, a number giving the highest value that is considered "low".
       <li>Optionally, a number giving the lowest value that is considered "high".
       <li>Optionally, a number giving the value that is considered optimal.
      </ol>
     </dd>

     <dt><code title="datagrid-type-custom">custom</code></dt>
     <dd>
      <ol class="brief">
       <li>A number giving the minimum width of the cell, in CSS pixels, that is desired.
       <li>A number giving the minimum height of the cell, in CSS pixels, that is desired.
       <li>A function that is passed a <code>CanvasRenderingContext2D</code> object, along with the width and height (in CSS pixels) of the cell that the context will draw on.
      </ol>
     </dd>

    </dl>

    <p>While the rows in a single call to the <code
    title="dom-datagrid-setRows">setRows()</code> method can be in any
    order, for each row, it is important that all its ancestor rows
    and all its open previous siblings are also declared, either in
    the same call or in an earlier one.</p>

    <p>Throws a <code>DATAGRID_MODEL_ERR</code> exception if the
    arguments contradict each other or previously declared information
    (e.g. saying that a row's position is 5 when the parent row only
    has 3 children, or naming a column that doesn't exist, or
    declaring a row without declaring its parent, or changing the
    number of children that a row has while that row and its ancestors
    are all open).</p>

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-insertRows">insertRows</code>(<var title="">rows</var>)</dt>
   <dd>

    <p>Inserts the given rows into the <code>datagrid</code>,
    increasing the numbers of rows that the <code>datagrid</code>
    assumes are present.</p>

    <p>The <var title="">rows</var> argument is an array of rows in
    the same structure as the argument to the <code
    title="dom-datagrid-setRows">setRows()</code> method described
    above, with the same expectations of consistency (a given row's
    ancestors and earlier open siblings being listed either earlier or
    in the same call as a given row). However, unlike with the <code
    title="dom-datagrid-setRows">setRows()</code> method, if a row is
    inserted along with its child, the child is not included in the
    child and row counts of the parent row; every row in the <var
    title="">rows</var> argument will increase its parent's counts
    automatically.</p>

    <p>Throws a <code>DATAGRID_MODEL_ERR</code> exception if the
    arguments contradict each other or previously declared
    information.</p>

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-deleteRows">deleteRows</code>(<var title="">rows</var>)</dt>
   <dd>

    <p>Removes the given rows from the <code>datagrid</code>, and
    updates the number of rows known to be in the
    <code>datagrid</code> accordingly. The argument is an array of
    <code>RowID</code> objects identifying the rows to remove.</p>

    <p>Throws a <code>DATAGRID_MODEL_ERR</code> exception if the argument
    includes a row the <code>datagrid</code> doesn't know about.</p>
    <!- - since otherwise behaviour might depend on where the user
    scrolled! - ->

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-repaint">repaint</code>(<var title="">row</var>, <var title="">column</var>)</dt>
   <dd>

    <p>If the given column's type is <code
    title="datagrid-type-custom">custom</code>, then causes the
    <code>datagrid</code> to reinvoke the function that obtains the
    desired rendering.</p>

   </dd>


   <dt><var title="">datagrid</var> . <code title="dom-datagrid-clearRows">clearRows</code>()</dt>
   <dd>

    <p>Clears the <code>datagrid</code> of all row data, resetting it
    to empty<!- - v2DGS:, and clears the selection- ->.</p>

   </dd>

  </dl>


  <div class="impl">

  <h6>The listener</h6>

  <p>The <dfn
  title="dom-datagrid-listener"><code>listener</code></dfn> IDL
  attribute allows authors to specify an object that will receive all
  the notifications from the <code>datagrid</code>. Initially, its
  value must be null. On getting, it must return its value. On
  setting, its value must be set to the new value, and then the user
  agent must <span>queue a task</span> to call the <code
  title="dom-listener-initialize">initialize()</code> method with the
  <code>datagrid</code> element as its only argument.</p>


  <h6>The columns</h6>

  <p>The columns are represented by the <dfn>column list</dfn>, an
  ordered list of entries for columns, each of which consists of:</p>

  <dl>

   <dt>An identifier</dt>

   <dd>A string used to identify the column in the API.</dd>

   <dt>A label</dt>

   <dd>A string used in the user interface.</dd>

   <dt>A type</dt>

   <dd>One of the types described below.</dd>

   <dt>An icon</dt>

   <dd>An image, copied from an <code>img</code> element when the
   column was declared.</dd>

   <dt>Whether the column is sortable</dt>

   <dd>A boolean indicating whether the user can request that the data
   be sorted by this column (true), or not (false).</dd>

   <dt>Whether the column is visible</dt>

   <dd>A boolean indicating whether the column is part of the
   <code>datagrid</code>'s rendering.</dd>

  </dl>

  <p>Initially, the <span>column list</span> must have a single
  column, the <dfn>default column</dfn>, whose identifier is the empty
  string, whose label is the empty string, whose type is <code
  title="datagrid-type-text">text</code>, with no icon, which is not
  sortable, and which <em>is</em> visible.</p>

  <hr>

  <p>The <dfn title="dom-datagrid-addColumn"><code>addColumn(<var
  title="">id</var>, <var title="">label</var>, <var
  title="">type</var>, <var title="">icon</var>, <var
  title="">sortable</var>, <var title="">hidden</var>)</code></dfn>
  method must run the following steps:</p>

  <ol>

   <li><p>If there is already an entry in <span>column list</span>,
   other than the <span>default column</span>, whose identifier is
   <var title="">id</var>, throw a <code>DATAGRID_MODEL_ERR</code>
   exception and abort these steps.</p></li>

   <li>

    <p>If <var title="">type</var> is not a string equal to one of the
    <span>allowed <code>datagrid</code> column types</span>, then
    throw a <code>DATAGRID_MODEL_ERR</code> exception and abort these
    steps.</p>

   </li>

   <li><p>If the <var title="">icon</var> argument is present and not
   null, but the given <code>img</code> element's <code
   title="dom-img-complete">complete</code> attribute is false, then
   let <var title="">icon</var> be null.</p></li>

   <li><p>If the <var title="">icon</var> argument is present and not
   null, then copy the image data from that <code>img</code> element,
   and let <var title="">image</var> be the copy of that image
   data. Otherwise, let <var title="">image</var> be nothing.</p></li>

   <li><p>Append a new entry to the <span>column list</span>, with
   <var title="">id</var> as its identifier, <var title="">label</var>
   as its label, <var title="">type</var> as its type, and <var
   title="">image</var> as its icon. Let the column be sortable if the
   <var title="">sortable</var> argument is present and true, and make
   it visible unless the <var title="">hidden</var> argument is
   present and true.</p></li>

   <li><p>If the <span>column list</span> contains the <span>default
   column</span>, then remove the <span>default column</span> from the
   <span>column list</span>, discard any data for cells in that column
   in any rows in the <code>datagrid</code>, set <code
   title="dom-datagrid-sortColumn">sortColumn</code> to <var
   title="">id</var>, set <code
   title="dom-datagrid-sortAscending">sortAscending</code> to true,
   and run the <span><code>datagrid</code> resort
   steps</span>.</p></li>

  </ol>

  <hr>

  <p>The <dfn
  title="dom-datagrid-sortColumn"><code>sortColumn</code></dfn> IDL
  attribute gives the current column used for sorting. Initially, its
  value must be the empty string. On getting, it must return its
  current value. On setting, if the new value doesn't match the
  identifier of one of the columns in the <span>column list</span>,
  then the user agent must throw a <code>DATAGRID_MODEL_ERR</code>
  exception. Otherwise, if the new value is not the same as its
  current value, then the user agent must set the attribute to the new
  value, and then run the <span><code>datagrid</code> resort
  steps</span>.</p>

  <p>The <dfn
  title="dom-datagrid-sortAscending"><code>sortAscending</code></dfn>
  IDL attribute specifies the direction that the tree is sorted in,
  ascending (true) or descending (false). Initially, its value must be
  true (ascending). On getting, it must return its current value. On
  setting, if the new value is not the same as its current value, then
  the user agent must set the attribute to the new value, and then run
  the <span><code>datagrid</code> resort steps</span>.</p>

  <p>When a column is marked as being sortable, the user agent should
  allow the user to select that column to be the column used for
  sorting, and should allow the user to chose whether the sort order
  is ascending or descending.</p>

  <p>When the user changes the sort order in this manner, the user
  agent must update the <code
  title="dom-datagrid-sortColumn">sortColumn</code> and <code
  title="dom-datagrid-sortAscending">sortAscending</code> attributes
  appropriately, and then run the <span><code>datagrid</code> resort
  steps</span>.</p>

  <p class="note">The <span><code>datagrid</code> resort steps</span>
  are described in the next section.</p>

  <hr>

  <p>The <dfn
  title="dom-datagrid-clearColumns"><code>clearColumns()</code></dfn>
  method, if the <span>column list</span> doesn't contain the
  <span>default column</span>, must empty the <span>column
  list</span>, append the <span>default column</span> to the now empty
  <span>column list</span>, discard any data for cells in all rows in
  the <code>datagrid</code>, set <code
  title="dom-datagrid-sortColumn">sortColumn</code> to the empty
  string, set <code
  title="dom-datagrid-sortAscending">sortAscending</code> to true, and
  run the <span><code>datagrid</code> resort steps</span>. (If the
  <span>column list</span> is already just the <span>default
  column</span>, then the method does nothing.)</p>


  <h6>The rows</h6>

  <p>A <code>datagrid</code> element is intended to show a
  representation of a tree, where typically the user only sees a
  small part of the tree at a time.</p>

  <p>To make this efficient, the <code>datagrid</code> element
  <em>actually</em> shows a small part of a <em>sparse</em> tree, so
  that only relevant parts of the data structure need be loaded at any
  time. Specifically, the model requires only that all the ancestor
  rows of the displayed rows be loaded, as well as any open earlier
  siblings (in the displayed sort order) of the displayed rows.</p>

  <p>Conceptually, therefore, a <code>datagrid</code> has a number of
  related sparse data structures backing it.</p>

  <p>The first is the <dfn>natural order sparse data tree</dfn>. This
  is the structure in which rows are entered as they are declared, in
  their natural order. This can differ from the order actually
  displayed to the user. It consists of nested sparse lists of
  rows. In the <span>natural order sparse data tree</span>, a row will
  always have all its parents already declared. Once a row is added to
  this structure, it can only be removed by the <code
  title="dom-datagrid-deleteRows">deleteRows()</code> and <code
  title="dom-datagrid-clearRows">clearRows()</code> methods. The order of
  nodes in this tree never changes; to move a node in this tree, it
  has to be removed and then another row (with the same data)
  reinserted elsewhere.</p>

  <p>The second structure is the <dfn>display order sparse data
  tree</dfn>. This is a similar structure that contains a subset of
  the rows in the <span>natural order sparse data tree</span>, ordered
  in the order given by the <code
  title="dom-datagrid-sortAscending">sortAscending</code> and <code
  title="dom-datagrid-sortColumn">sortColumn</code> attributes, and
  excluding rows with one or more ancestors that are closed. This tree
  is cleared whenever the <code
  title="dom-datagrid-sortAscending">sortAscending</code> and <code
  title="dom-datagrid-sortColumn">sortColumn</code> attributes
  change.</p>

  <p>The third structure is the <dfn>display order sparse data
  list</dfn>. This structure is a flattened representation of the
  <span>display order sparse data tree</span>.</p>

  <p>At any time, a number of consecutive rows in the <span>display
  order sparse data list</span> are physically visible to the
  user. The <code>datagrid</code> fires notifications to a <span
  title="dom-datagrid-listener">listener</span> (provided by script),
  and the listener, or other some script, is expected to feed the
  <code>datagrid</code> with the information needed to render the
  control.</p>

  <p>A <code>datagrid</code> has a <dfn>pending <code>datagrid</code>
  rows list</dfn>, which is a list of rows in the <span>display order
  sparse data list</span> for which the <code>datagrid</code> has sent
  notifications requesting information but not yet received
  information about.</p>

  <p>A <code>datagrid</code> also has a <dfn>pending
  <code>datagrid</code> <em>cells</em> list</dfn>, which is a list of
  row/column pairs (cells) for which the <code>datagrid</code> has
  sent notifications requesting information but not yet received
  information about.</p>

  <p>User agents may discard information about rows that are not
  displayed and that are not ancestors or open earlier siblings of
  rows or ancestors of rows that are displayed.</p>

  <hr>

  <p>These structures are different views of the collection of rows
  that form the <code>datagrid</code>. Each row has the following
  information associated with it:</p>

  <dl>

   <dt>A parent</dt>

   <dd><p>Either another row, or the <code>datagrid</code> itself. This
   is the parent of the row in the <span>natural order sparse data
   tree</span> and the <span>display order sparse data tree</span>
   for the <code>datagrid</code>.</p></dd>

   <dt>A natural order position relative to the other rows with the
   same parent</dt>

   <dd>

    <p>This is the number of rows that precede this row under the same
    parent in the <span>natural order sparse data tree</span>. This
    number can't be changed relative to other rows in the same parent;
    to change the relative natural order of data in the
    <code>datagrid</code>, the original rows have to be removed and
    new rows (with the same data but different natural positions)
    inserted in their place. (The exact number of a row can change, as
    new rows can be inserted above it.)</p>

    <p>A row can be identified by a <code>RowID</code> object. This is
    an array of numbers, consisting of the natural order positions of
    each ancestor row and the row itself, starting from the furthest
    ancestor. Thus, for instance, the fourth child row of the first
    child row of the second row in a <code>datagrid</code> would be
    identified by a <code>RowID</code> object whose value is <code
    title="">[1, 0, 3]</code>. A row's identifier changes if rows are
    <span title="dom-datagrid-insertRows">inserted before it</span> in
    the <code>datagrid</code>.</p>

   </dd>

   <dt>A display order position relative to the other rows with
   the same parent</dt>

   <dd><p>This is the number of rows that precede this row under the
   same parent in the <span>display order sparse data
   tree</span>. This number can be unknown. If the sort order
   changes, then this information is lost (as the <span>display order
   sparse data tree</span> is cleared).</p></dd>

   <dt>A child count</dt>

   <dd><p>The number of rows that have this row as a parent. If this is
   zero, the row cannot be opened. If this is &#x2212;1, then the
   child count is unknown but the row can be opened. This value can be
   changed by the <code title="dom-datagrid-setRows">setRows()</code>
   method only if the current value is &#x2212;1 or if the row or one
   of its ancestors is closed. Otherwise, it can only be changed
   indirectly using the <code
   title="dom-datagrid-insertRows">insertRows()</code> and <code
   title="dom-datagrid-deleteRows">deleteRows()</code> methods.</p></dd>

   <dt>An open flag</dt>

   <dd><p>A boolean indicating whether the row is open (true) or
   closed (false). Once set, the flag can only be changed by the user
   or while one of the row's ancestors is itself closed. A row can
   also be in a third state, "opening", which is treated as closed for
   all purposes except that the user agent may indicate that the row
   is in this special state, and except that when the row is updated
   to have a row count, the row will switch to being open.</p></dd>

   <dt>A row count</dt>

   <dd><p>The number of rows that have this row as a parent or
   ancestor, and that do not have an ancestor that is a descendant of
   this row that is itself closed. If this is &#x2212;1, then the row
   count is unknown. This value can be changed by the <code
   title="dom-datagrid-setRows">setRows()</code> method only if the
   row or one of its ancestors is closed (or opening, but not
   open). Otherwise, it can only be changed indirectly using the <code
   title="dom-datagrid-insertRows">insertRows()</code> and <code
   title="dom-datagrid-deleteRows">deleteRows()</code>
   methods.</p></dd>

   <dt>Cells</dt>

   <dd><p>The data that applies to this row. Cell data is discussed in
   more detail below.</p></dd>

  </dl>

  <p>The <code>datagrid</code> itself also has a <dfn title="datagrid
  child count">child count</dfn> and a <dfn title="datagrid row
  count">row count</dfn>, which are analogous to the child counts and
  row counts for rows. Initially, these must be zero.</p>

  <hr>

  <p>The <dfn><code>datagrid</code> resort steps</dfn>, which are
  invoked when the sort order changes as described in the previous
  section, are as follows:</p>

  <ol>

   <li>

    <p>Clear the <span>display order sparse data tree</span>
    (i.e. mark the display order position of all the rows in the
    <code>datagrid</code> as unknown).</p>

    <p>User agents may cache the position information of rows for
    various values of <code
    title="dom-datagrid-sortColumn">sortColumn</code> and <code
    title="dom-datagrid-sortAscending">sortAscending</code>, instead
    of discarding the information altogether. If the user agent caches
    this information, and has information that applies to the current
    values of <code title="dom-datagrid-sortColumn">sortColumn</code>
    and <code title="dom-datagrid-sortAscending">sortAscending</code>,
    then the user agent may repopulate the <span>display order sparse
    data tree</span> from this information.</p>

   </li>

   <li>

    <p>Clear the <span>pending <code>datagrid</code> rows list</span>
    and the <span>pending <code>datagrid</code> cells list</span>.</p>

   </li>

   <li>

    <p>Invoke the <span><code>datagrid</code> update display
    algorithm</span>.</p>

   </li>

   <!- - v2: queue a task to fire an event, or tell the listener the
   sort order changed, or something - ->

  </ol>

  <hr>

  <p>The <dfn
  title="dom-datagrid-renotify"><code>renotify()</code></dfn> method
  must empty the <span>pending <code>datagrid</code> rows list</span>
  and the <span>pending <code>datagrid</code> cells list</span>, and
  invoke the <span><code>datagrid</code> update display
  algorithm</span>.</p>

  <hr>

  <p>The <dfn title="dom-datagrid-setRowCount"><code>setRowCount(<var
  title="">childCount</var>, <var
  title="">rowCount</var>)</code></dfn> method must run the following
  steps:</p>

  <ol>

   <li>

    <p>Set the <span><code>datagrid</code> child count</span> to <var
    title="">childCount</var>, the <span><code>datagrid</code> row
    count</span> to <var title="">rowCount</var>.</p>

   </li>

   <li>

    <p><span>Audit the <code>datagrid</code></span>. If this fails,
    then revert the changes made in the previous step, throw a
    <code>DATAGRID_MODEL_ERR</code> exception, and abort these
    steps.</p>

   </li>

   <li>

    <p>Invoke the <span><code>datagrid</code> update display
    algorithm</span>.</p>

   </li>

  </ol>

  <hr>

  <p>The <dfn title="dom-datagrid-setRows"><code>setRows(<var
  title="">rows</var>)</code></dfn> method must run the following
  steps:</p>

  <ol>

   <li>

    <p><span title="type-check a RowList object">Type-check the <var
    title="">rows</var> argument</span>. If this fails, throw a
    <code>TypeError</code> exception, and abort these steps.</p>

   </li>

   <li>

    <p><span title="partially sort a RowList object">Partially sort
    the <var title="">rows</var> argument</span>.</p>

   </li>

   <li>

    <p>For each <code>Row</code> object in the <var
    title="">rows</var> argument, in order, perform the appropriate
    steps from the list below.</p>

    <p class="note">The changes made to the <code>datagrid</code>'s
    data structures in this step get reverted (as required below) if
    any consistency errors are detected either in this step or the
    next.</p>

    <dl>

     <dt>If there already exists a row in the <code>datagrid</code>'s
     <span>natural order sparse data tree</span> with the same
     identifier as given by the <code>Row</code> object's
     <code>RowID</code> object, and that row and all its ancestors are
     open</dt>

     <dd>

      <p>If one of the following conditions is true, then revert all
      the changes done in this step, throw a
      <code>DATAGRID_MODEL_ERR</code> exception, and abort these
      steps:</p>

      <ul>

       <li>The value of the <code>Row</code> object's second entry is
       neither &#x2212;1 nor equal to the child count of the
       preexisting row.</li>

       <li>The <code>Row</code> object has fewer than four
       entries or more than six entries.</li>

       <li>The <code>Row</code> object has five or more entries, and
       its fifth entry is false.</li>

       <li>The <code>Row</code> object has six entries, and its sixth
       entry is not equal to the row count of the preexisting
       row.</li>

      </ul>

     </dd>

     <dt>If there already exists a row in the <code>datagrid</code>'s
     <span>natural order sparse data tree</span> with the same
     identifier as given by the <code>Row</code> object's
     <code>RowID</code> object, but either that row or one of its
     ancestors is closed</dt>

     <dd>

      <p>Set the preexisting row's child count to the value of the
      <code>Row</code> object's second entry.</p>

      <p>If the <code>Row</code> object has five or more entries, and
      either its fifth entry is true and the preexisting row is closed
      but not opening, or its fifth entry is false and the preexisting
      row is open, then: if the preexisting row has no ancestor row
      that is closed, then revert all the changes done in this step,
      throw a <code>DATAGRID_MODEL_ERR</code> exception, and abort
      these steps; otherwise, if the fifth entry is false, then close
      the row; otherwise, open the row.</p>

      <p>If the <code>Row</code> object has six entries, set the
      preexisting row's row count to the value of the <code>Row</code>
      object's sixth entry.</p>

      <p>If the preexisting row is opening, then: increase the
      <span><code>datagrid</code> row count</span> and the row counts
      of any ancestor rows by the number of rows that the preexisting
      row now has in its row count, then open the row.</p> <!- - we
      should also "update the <span>pending <code>datagrid</code> rows
      list</span> and the <span>pending <code>datagrid</code> cells
      list</span> accordingly" - ->


     </dd>

     <dt>There does not exist a row in the <code>datagrid</code>'s
     <span>natural order sparse data tree</span> with the same
     identifier as given by the <code>Row</code> object's
     <code>RowID</code> object</dt>

     <dd>

      <p>If the <code>RowID</code> object has a length greater than 1,
      then verify that there is a row identified by the
      <code>RowID</code> consisting of all but the last number in the
      <code>Row</code> object's <code>RowID</code>. If there is no
      such row present in the <span>natural order sparse data
      tree</span>, then revert all the changes done in this step,
      throw a <code>DATAGRID_MODEL_ERR</code> exception, and abort
      these steps.</p>

      <p>Create a row and insert it into the <span>natural order
      sparse data tree</span>, such that its parent is the row
      identified by the <code>RowID</code> consisting of all but the
      last number in the <code>Row</code> object's <code>RowID</code>,
      or the <code>datagrid</code> if the length of the
      <code>Row</code> object's <code>RowID</code> is 1; with its
      natural order position being the last number of the
      <code>Row</code> object's <code>RowID</code>; with the child
      count being the value of the third entry of the <code>Row</code>
      object; with the row being marked closed unless the
      <code>Row</code> object has five or more entries and its fifth
      entry is true, in which case the row is open; and with its row
      count being &#x2212;1 unless the <code>Row</code> object has six
      entries, in which case the row count is equal to the value of
      the <code>Row</code> object's sixth entry.</p>

     </dd>

    </dl>

   </li>

   <li>

    <p><span>Audit the <code>datagrid</code></span>. If this fails,
    then revert the changes made in the previous step, throw a
    <code>DATAGRID_MODEL_ERR</code> exception, and abort these
    steps.</p>

   </li>

   <li>

    <p>For each <code>Row</code> object in the <var
    title="">rows</var> argument, in order, <span title="apply a Row
    object">apply the <code>Row</code> object</span>.</p>

   </li>

   <li>

    <p>Invoke the <span><code>datagrid</code> update display
    algorithm</span>.</p>

   </li>

  </ol>

  <hr>

  <p>The <dfn title="dom-datagrid-insertRows"><code>insertRows(<var
  title="">rows</var>)</code></dfn> method must run the following
  steps:</p>

  <ol>

   <li>

    <p><span title="type-check a RowList object">Type-check the <var
    title="">rows</var> argument</span>. If this fails, throw a
    <code>TypeError</code> exception, and abort these steps.</p>

   </li>

   <li>

    <p><span title="partially sort a RowList object">Partially sort
    the <var title="">rows</var> argument</span>.</p>

   </li>

   <li>

    <p>For each <code>Row</code> object in the <var
    title="">rows</var> argument, in order, run the following
    steps:</p>

    <p class="note">The changes made to the <code>datagrid</code>'s
    data structures in this step get reverted (as required below) if
    any consistency errors are detected either in this step or the
    next.</p>

    <ol>

     <li>

      <p>Let <var title="">parent</var> be the row identified by the
      <code>RowID</code> consisting of all but the last number in the
      <code>Row</code> object's <code>RowID</code>, or the
      <code>datagrid</code> itself if the <code>Row</code> object's
      <code>RowID</code> has length 0.</p>

      <p>If there is no such row present in the <span>natural order
      sparse data tree</span>, then revert all the changes done in
      this algorithm, throw a <code>DATAGRID_MODEL_ERR</code>
      exception, and abort these steps.</p>

     </li>

     <li>

      <p>Increment by one the natural order position of all rows whose
      parent is <var title="">parent</var> and whose natural order
      position is equal to or greater than the last number of the
      <code>Row</code> object's <code>RowID</code>.</p>

     </li>

     <li>

      <p>If the value of the <code>Row</code> object's second entry is
      not &#x2212;1, then increment by one the display order position
      of all rows whose parent is <var title="">parent</var> and whose
      display order position is equal to or greater than the value of
      the <code>Row</code> object's second entry.</p>

     <!- -(Not sure how to really say this.)
      <p>Update the <span>pending <code>datagrid</code> rows
      list</span> and the <span>pending <code>datagrid</code> cells
      list</span> accordingly.</p>
     - ->

     </li>

     <li>

      <p>Create a row and insert it into the <span>natural order
      sparse data tree</span>, such that its parent is <var
      title="">parent</var>; with its natural order position being the
      last number of the <code>Row</code> object's <code>RowID</code>;
      with the child count being the value of the third entry of the
      <code>Row</code> object; with the row being marked closed unless
      the <code>Row</code> object has five or more entries and its
      fifth entry is true, in which case the row is open; and with its
      row count being &#x2212;1 unless the <code>Row</code> object has
      six entries, in which case the row count is equal to the value
      of the <code>Row</code> object's sixth entry.</p>

     </li>

    </ol>

   </li>

   <li>

    <p>For each <code>Row</code> object in the <var
    title="">rows</var> argument, in order, <span title="apply a Row
    object">apply the <code>Row</code> object</span>.</p>

   </li>

   <li>

    <p>Invoke the <span><code>datagrid</code> update display
    algorithm</span>.</p>

   </li>

  </ol>

  <hr>

  <p>When an algorithm requires the user agent to <dfn>type-check a
  <code>RowList</code> object</dfn> (an array), each entry in the
  object must be checked against the following requirements. If any
  are false, then the type-check fails, otherwise it passes.</p>

  <ul>

   <li><p>The entry is a <code>Row</code> object (an
   array).</p></li>

   <li><p>The first value in the <code>Row</code> is a
   <code>RowID</code> object (also an array), whose length is at least
   1, and whose values are all integers greater than or equal to
   zero.</p></li>

   <li><p>The numbers in the <code>RowID</code> object do not exactly
   match any of the other entries in the <code>RowList</code> object
   (i.e. no two <code>Row</code> objects have the same
   identifier).</p></li>

   <li><p>The second value in the <code>Row</code> is an integer that
   is either &#x2212;1, zero, or a positive integer.</p></li>

   <li><p>The third value in the <code>Row</code> is an integer that
   is either &#x2212;1, zero, or a positive integer.</p></li>

   <li><p>The fourth value in the <code>Row</code> is a
   <code>CellList</code> object (yet another array).</p></li>

   <li><p>Each entry in the <span>CellList</span> object is a
   <code>Cell</code> object (again, an array).</p></li>

   <li><p>Each <code>Cell</code> object in the <span>CellList</span>
   object has as its first value a <code>Column</code> object (a
   string), and its value is the identifier of one of the columns in
   the <span>column list</span>.</p></li>

   <li>

    <p>Each <code>Cell</code> object in the <span>CellList</span>
    object has as its second and subsequent entries values that match
    the following requirements, as determined by the type of the
    column identified by the first entry:</p>

    <dl>

     <dt>If the column's type is <code title="datagrid-type-text">text</code></dt>
     <dd>

      <p>The second entry's value is a string, and either there are
      only two entries, or there are three, and the third entry is
      an <code>img</code> element.</p>

      <p>If there is an <code>img</code> element specified, its <code
      title="dom-img-complete">complete</code> attribute is true.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-editable">editable</code></dt>
     <dd>

      <p>The second entry's value is a string, and either there are
      only two entries, or the third entry is a
      <code>datalist</code> element, and either there are only three
      entries, or there are four, and the fourth entry is an
      <code>img</code> element.</p>

      <p>If there is an <code>img</code> element specified, its <code
      title="dom-img-complete">complete</code> attribute is true.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-checkable">checkable</code></dt>
     <dd>

      <p>The second entry's value is a string, the third entry is a
      boolean, and either there are only three entries, or the
      fourth entry is also a boolean, and either there are only four
      entries, or there are five, and the fifth entry is an
      <code>img</code> element.</p>

      <p>If there is an <code>img</code> element specified, its <code
      title="dom-img-complete">complete</code> attribute is true.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-list">list</code></dt>
     <dd>

      <p>The second entry's value is a string, the third entry is a
      <code>select</code> element, and either there are only three
      entries, or there are four, and the fourth entry is an
      <code>img</code> element.</p>

      <p>If there is an <code>img</code> element specified, its <code
      title="dom-img-complete">complete</code> attribute is true.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-progress">progress</code></dt>
     <dd>

      <p>There are only two entries, the second entry's value is a
      number, and the number's value is between 0.0 and 1.0
      inclusive.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-meter">meter</code></dt>
     <dd>

      <p>There are at least two, but possibly up to seven, entries,
      all entries but the first one are numbers, and the following
      relationships hold:</p>

      <ul class="brief">

       <li>The second entry is less than the third, or less than 1.0
       if the third is absent.</li>

       <li>The second entry is greater than the fourth, or greater
       than 0.0 if the fourth is absent.</li>

       <li>If there are at least three entries, the third entry is
       greater than the fourth, or greater than zero if the fourth
       is absent.</li>

       <li>If there are at least five entries, the fifth is not
       greater than the third and not less than the fourth.</li>

       <li>If there are at least six entries, the sixth is not
       greater than the third and not less than the fifth.</li>

       <li>If there are at least seven entries, the fifth is not
       greater than the third and not less than the fourth.</li>

      </ul>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-custom">custom</code></dt>
     <dd>

      <p>There are four entries, the second and third are numbers
      that are integers greater than zero, and the fourth is a
      <code>Rendering2DContextCallback</code> object (a
      function).</p>

     </dd>

    </dl>

   </li>

   <li><p>Either there are only four values in the <code>Row</code>,
   or the fifth value in the <code>Row</code> is a boolean.</p></li>

   <li><p>Either there are only four or five values in the
   <code>Row</code>, or there are six, and the sixth value in the
   <code>Row</code> an integer that is greater than or equal to
   zero.</p></li>

  </ul>

  <p>Where the above requirements say that a value is to be a string,
  the user agent must apply the ToString() abstract operation to the
  value, assume that the value was indeed a string, and use the result
  in the rest of the algorithm as if it had that had been the value
  passed to the method. <a href="#refsECMA262">[ECMA262]</a></p>

  <p>Where the above requirements say that a value is to be a number,
  the user agent must first apply the ToNumber() abstract operation
  to the value, and then verify that the result is neither an Infinity
  value nor a Not-a-Number (NaN) value. If this result is indeed
  acceptable (i.e. finite), the user agent must use the result in the
  rest of the algorithm as if it had that had been the value passed to
  the method. <a href="#refsECMA262">[ECMA262]</a></p>

  <p>Where the above requirements say that a value is to be an
  integer, the user agent must first apply the ToNumber() abstract
  operation to the value, and then verify that the result is a finite
  integer. If so, the user agent must use the result in the rest of
  the algorithm as if it had that had been the value passed to the
  method. <a href="#refsECMA262">[ECMA262]</a></p>

  <p>Where the above requirements say that a value is to be a boolean,
  the user agent must apply the ToBoolean() abstract operation to the
  value, assume that the value was indeed a boolean, and use the
  result in the rest of the algorithm as if it had that had been the
  value passed to the method. <a href="#refsECMA262">[ECMA262]</a></p>

  <hr>

  <p>When an algorithm requires the user agent to <dfn>audit the
  <code>datagrid</code></dfn>, the <code>datagrid</code> must be
  checked against the following requirements. If any are false, then
  the audit fails, otherwise it passes.</p>

  <ul>

   <li>There is no row whose natural order position is greater than or
   equal to the child count of its parent row in the <span>natural
   order sparse data tree</span>.</li>

   <li>There is no row whose display order position is greater than or
   equal to the child count of its parent row in the <span>display
   order sparse data tree</span>.</li>

   <li>There is no row such that the sum of that row's child count and
   the row counts all the open rows that are direct children of that
   row in the <span>natural order sparse data tree</span> is less than
   that row's row count.</li>

   <li>Of the rows whose child count is equal to the number of rows
   that are direct children of that row in the <span>natural order
   sparse data tree</span>, there is none such that the sum of that
   row's child count and the row counts of all the open rows that are
   direct children of that row in the <span>natural order sparse data
   tree</span> is greater than that row's row count.</li>

  </ul>

  <p>For the purposes of this audit, the <code>datagrid</code> must be
  treated as the parent row of all the rows that are direct children
  of the <code>datagrid</code> in the <span>natural order sparse data
  tree</span> and the <span>display order sparse data tree</span>. The
  child count of this implied row is the <span><code>datagrid</code>
  child count</span>, and the row count of this implied row is the
  <span><code>datagrid</code> row count</span>.</p>

  <hr>

  <p>When an algorithm requires the user agent to <dfn>partially sort
  a <code>RowList</code> object</dfn> (an array), the entries in the
  object must be resorted such that <code>Row</code> objects are
  listed after any of their ancestors and after any of their earlier
  siblings. In other words, for any two <code>Row</code> objects <var
  title="">a</var> and <var title="">b</var> in the
  <code>RowList</code>, where <var title="">a</var> is before <var
  title="">b</var> after the sort, the following conditions must
  hold:</p>

  <ul>

   <li><p>If their <code>RowID</code> objects are the same length and
   have values that are equal except for the last value, then the last
   value of <var title="">a</var>'s <code>RowID</code>'s last value
   must be less than <var title="">b</var>'s <code>RowID</code>'s last
   value (i.e. earlier siblings must come before their later
   siblings).</p></li>

   <li><p>If their <code>RowID</code> objects are not the same length,
   but the values in the shorter of the two are the same as the first
   few values in the longer one, then <var title="">a</var>'s
   <code>RowID</code> must be the shorter one (i.e. ancestors must
   come before their descendants).</p></li>

  </ul>

  <hr>

  <p>The <dfn title="dom-datagrid-deleteRows"><code>deleteRows(<var
  title="">rows</var>)</code></dfn> method must run the following
  steps:</p>

  <ol>

   <li>

    <p>If any of the entries in <var title="">rows</var> are not
    <code>RowID</code> objects consisting of one or more entries whose
    values are all integers that are greater than or equal to zero,
    then throw a <code>TypeError</code> exception and abort these
    steps.</p>

    <p>To check if a value is an integer, the user agent must first
    apply the ToNumber() abstract operation to the value, and then
    verify that the result is a finite integer. If so, the user agent
    must use the result in the rest of the algorithm as if it had that
    had been the value passed to the method. <a
    href="#refsECMA262">[ECMA262]</a></p>

   </li>

   <li>

    <p>If any of the <code>RowID</code> objects in the <var
    title="">rows</var> argument identify a row that isn't present in
    the <span>natural order sparse data tree</span>, then throw a
    <code>DATAGRID_MODEL_ERR</code> exception and abort these
    steps.</p>

   </li>

   <li>

    <p>If any row is listed twice in the <var title="">rows</var>
    argument, then throw a <code>DATAGRID_MODEL_ERR</code> exception
    and abort these steps.</p>

   </li>

   <li>

    <p>Sort the <var title="">rows</var> argument such that the
    entries are given in the same order as the rows they identify
    would be visited in a pre-order, depth first traversal of the
    <span>natural order sparse data tree</span>.</p>

   </li>

   <li>

    <p>For each row identified by entries in <var title="">rows</var>,
    <em>in reverse order</em>, run the following steps:</p>

    <ol>

     <li>

      <p>Decrement the child count of the row's parent row, if that
      child count is greater than zero. If the row has no parent,
      decrement the <span><code>datagrid</code> child
      count</span>.</p>

      <p>If the row has a parent row, and its child count is now zero,
      then close that row.</p>

     </li>

     <li>

      <p>Let <var title="">delta</var> be one more than the row's row
      count if the row is open and its row count is greater than zero;
      otherwise, let <var title="">delta</var> be one.</p>

     </li>

     <li>

      <p>Let <var title="">ancestor</var> be the row.</p>

     </li>

     <li>

      <p><i>Row count loop</i>: Let <var title="">ancestor</var> be
      <var title="">ancestor</var>'s parent row, if any, or null if it
      has none.</p>

     </li>

     <li>

      <p>If <var title="">ancestor</var> is null, then decrement the
      <span><code>datagrid</code> row count</span> by <var
      title="">delta</var>. Otherwise, if <var title="">ancestor</var>
      is open, then decrement its row count by <var
      title="">delta</var>.</p>

     </li>

     <li>

      <p>If <var title="">ancestor</var> is not null, then jump back
      to the step labeled <i>row count loop</i> above.</p>

     </li>

     <li>

      <p>Let <var title="">parent</var> be the row's parent, or the
      <code>datagrid</code> if the row has no parent.</p>

     </li>

     <li>

      <p>Decrement by one the natural order position of all rows whose
      parent is <var title="">parent</var> and whose natural order
      position is equal to or greater than the row's own natural order
      position.</p>

     </li>

     <li>

      <p>If the row is in the <span>display order sparse data
      tree</span>, then decrement by one the display order position of
      all rows whose parent is <var title="">parent</var> and whose
      display order position is equal to or greater than the row's own
      display order position.</p>

     </li>

     <li>

      <p>Clear the row and its descendants from the
      <code>Datagrid</code>.</p>

     </li>

    </ol>

   </li>

   <li>

    <p>Invoke the <span><code>datagrid</code> update display
    algorithm</span>.</p>

   </li>

  </ol>

  <hr>

  <p>The <dfn
  title="dom-datagrid-clearRows"><code>clearRows()</code></dfn> method
  must empty the <span>natural order sparse data tree</span>, reset
  both the <span><code>datagrid</code> child count</span> and the
  <span><code>datagrid</code> row count</span> to zero, and invoke the
  <span><code>datagrid</code> update display algorithm</span>.</p>

  <hr>

  <p>The <dfn title="dom-datagrid-repaint"><code>repaint(<var
  title="">row</var>, <var title="">column</var>)</code></dfn> method
  must cause the user agent to clear its cache for the cell specified
  by the identifier <var title="">row</var> and the column <var
  title="">column</var>, if that column's type is <code
  title="datagrid-type-custom">custom</code>. If the given column has
  not been declared, or its type is not <code
  title="datagrid-type-custom">custom</code>, then the user agent must
  throw a <code>DATAGRID_MODEL_ERR</code> exception. If the given row
  is not known, then the method must do nothing. If the cell is indeed
  cleared, the user agent must reinvoke the previously registered
  <code>RenderingContext2DCallback</code> callback when it needs to
  repaint that row.</p>

  <hr>

  <p>If a row has a child count that isn't zero, then the user agent
  should offer to the user the option of opening and closing the
  row.</p>

  <p>When a row is opened, if the row's row count is greater than
  zero, then the user agent must increase the
  <span><code>datagrid</code> row count</span> and the row counts of
  any ancestor rows by the number of rows that the newly opened row
  has in its row count<!- - we should also "update the <span>pending
  <code>datagrid</code> rows list</span> and the <span>pending
  <code>datagrid</code> cells list</span> accordingly" - ->, then must
  mark the row as open, then may fill in the <span>display order
  sparse data tree</span> with any information that the user agent has
  cached about the display order positions of descendants of the newly
  opened row, and then must invoke the <code
  title="dom-listener-rowOpened">rowOpened()</code> method on the
  current <code title="dom-datagrid-listener">listener</code> with as
  its first argument a <code>RowID</code> object identifying the row
  that was opened and as its second argument the boolean false, and
  then must invoke the <span><code>datagrid</code> update display
  algorithm</span>.</p>

  <p>On the other hand, when a row is opened and the row's row count
  is &#x2212;1, then the user agent must mark the row as opening, and
  then must invoke the <code
  title="dom-listener-rowOpened">rowOpened()</code> method on the
  current <code title="dom-datagrid-listener">listener</code> with as
  its first argument a <code>RowID</code> object identifying the row
  that was opened and as its second argument the boolean true.</p>

  <p>When a row is closed, the user agent must decrease the
  <span><code>datagrid</code> row count</span> and the row counts of
  any ancestor rows by the number of rows that the newly closed row
  has in its row count, and then must invoke the <code
  title="dom-listener-rowOpened">rowOpened()</code> method on the
  current <code title="dom-datagrid-listener">listener</code> with as
  its first and only argument a <code>RowID</code> object identifying
  the row that was opened.</p>



  <h6>The cells</h6>

  <p>Each row has one cell per column. Each cell has the same type as
  its column. The <dfn>allowed <code>datagrid</code> column
  types</dfn>, what they represent, and the requirements for when the
  user interacts with them, are as follows:</p>

  <dl>

   <dt><dfn title="datagrid-type-text"><code>text</code></dfn></dt>
   <dd>

    <p>The cell represents some text and an optional image.</p>

   </dd>

   <dt><dfn title="datagrid-type-editable"><code>editable</code></dfn></dt>
   <dd>

    <p>The cells represents some editable text, an optional
    <code>datalist</code> giving autocompletion hints, and an
    optional image.</p>

    <p>If there is a <code>datalist</code> element, the user agent
    should offer the suggestions represented by that element to the
    user. The user agent may use the suggestion's <span
    title="concept-option-label">label</span> to identify the
    suggestion. If the user selects a suggestion, then the editable
    text must be set to the selected suggestion's <span
    title="concept-option-value">value</span>, as if the user had
    written that value himself.</p>

    <p>When the user edits the value, either directly or using the
    <code>datalist</code>, the user agent must invoke the <code
    title="dom-listener-cellChanged">cellChanged()</code> method on
    the current <code title="dom-datagrid-listener">listener</code>
    with as its first argument a <code>RowID</code> identifying the
    cell's row, as its second argument the identifier of the cell's
    column, as its third argument the new value, and as its fourth
    argument the previous value.</p>

   </dd>

   <dt><dfn title="datagrid-type-checkable"><code>checkable</code></dfn></dt>
   <dd>

    <p>The cell represents some text, a check box that optionally has
    its value obscured as indeterminate, and an optional image.</p>

    <p>When the user checks or unchecks the check box, the user agent
    must change the check box's state appropriately and stop obscuring
    the check box as indeterminate (if it is obscuring it), and then
    must invoke the <code
    title="dom-listener-cellChanged">cellChanged()</code> method on
    the current <code title="dom-datagrid-listener">listener</code>
    with as its first argument a <code>RowID</code> identifying the
    cell's row, as its second argument the identifier of the cell's
    column, as its third argument true if the check box is now checked
    and false otherwise, and as its fourth argument true if the check
    box was previously checked and false otherwise.</p>

   </dd>

   <dt><dfn title="datagrid-type-list"><code>list</code></dfn></dt>
   <dd>

    <p>The cell represents some text giving the current value selected
    from a dropdown list of options, a <code>select</code> element
    giving the list of options, and an optional image.</p>

    <p>The user agent should allow the user to change the value of the
    cell from its current value to one of the <span
    title="concept-option-value">values</span> given by
    <code>option</code> elements in the <span
    title="concept-select-option-list">list of options</span> (if
    any). The user agent may use the <code>option</code> elements'
    <span title="concept-option-label">labels</span> to annotate each
    option.</p>

    <p>When the user selects a new value from the <code>select</code>
    element's <span title="concept-select-option-list">list of
    options</span>, the user agent must invoke the <code
    title="dom-listener-cellChanged">cellChanged()</code> method on
    the current <code title="dom-datagrid-listener">listener</code>
    with as its first argument a <code>RowID</code> identifying the
    cell's row, as its second argument the identifier of the cell's
    column, as its third argument the new value, and as its fourth
    argument the previous value.</p>

   </dd>

   <dt><dfn title="datagrid-type-progress"><code>progress</code></dfn></dt>
   <dd>

    <p>The cell represents a (determinate) progress bar whose value is
    between 0.0, indicating no progress, and 1.0, indicating the task
    is complete.</p>

   </dd>

   <dt><dfn title="datagrid-type-meter"><code>meter</code></dfn></dt>
   <dd>

    <p>The cell represents a gauge, described by one to six
    numbers.</p>

    <p>The gauge's actual value is given by the first number.</p>

    <p>If there is a second number, then that number is the maximum
    value. Otherwise, the maximum value is 1.0.</p>

    <p>If there is a third number, then that number is the minimum
    value. Otherwise, the minimum value is 1.0.</p>

    <p>If there is a fourth number, then that number is the low
    boundary. Otherwise, the low boundary is the minimum value.</p>

    <p>If there is a fifth number, then that number is the high
    boundary. Otherwise, the high boundary is the maximum value.</p>

    <p>If there is a sixth number, then the optimal point is the sixth
    number. Otherwise, the optimum point is the midpoint between the
    minimum value and the maximum value.</p>

    <!- - next two paragraphs copied from <meter>: - ->

    <p>If the optimum point is equal to the low boundary or the high
    boundary, or anywhere in between them, then the region between the
    low and high boundaries of the gauge must be treated as the
    optimum region, and the low and high parts, if any, must be
    treated as suboptimal. Otherwise, if the optimum point is less
    than the low boundary, then the region between the minimum value
    and the low boundary must be treated as the optimum region, the
    region between the low boundary and the high boundary must be
    treated as a suboptimal region, and the region between the high
    boundary and the maximum value must be treated as an even less
    good region. Finally, if the optimum point is higher than the high
    boundary, then the situation is reversed; the region between the
    high boundary and the maximum value must be treated as the optimum
    region, the region between the high boundary and the low boundary
    must be treated as a suboptimal region, and the remaining region
    between the low boundary and the minimum value must be treated as
    an even less good region.</p>

    <p>User agents should indicate the relative position of the actual
    value to the minimum and maximum values, and the relationship
    between the actual value and the three regions of the gauge.</p>

   </dd>

   <dt><dfn title="datagrid-type-custom"><code>custom</code></dfn></dt>
   <dd>

    <p>The cell represents a dynamically generated graphical image.</p>

    <p>The cell will have minimum dimensions (specified in CSS
    pixels), and a callback (in the form of a
    <code>RenderingContext2DCallback</code> object) to get a rendering
    for the cell.</p>

    <p>The user agent should not allow the cell to be rendered with
    dimensions less than the given minimum width and height.</p>

    <p>When the user agent needs to render the cell, the user agent
    must <span>queue a task</span> to invoke the
    <span>RenderingContext2DCallback</span> callback, passing it a
    newly created <code>CanvasRenderingContext2D</code> object whose
    <code title="dom-context-2d-canvas">canvas</code> IDL attribute is
    null as the first argument, the actual cell width in CSS pixels as
    the second argument, and the actual cell height in CSS pixels as
    the third argument.</p>

    <p>If the user agent is able to render graphics, then it must
    render the graphics commands that the callback executed on the
    provided <code>CanvasRenderingContext2D</code> object onto the
    cell once the callback returns. The image must be clipped to the
    dimensions of the cell. The coordinate space of the cell must be
    aligned with that used by the 2D context such that the top left
    corner of the cell is the 0,0 origin, with the coordinate space
    increasing its <var title="">x</var> dimension towards the right
    of the cell and its <var title="">y</var> axis towards the bottom
    of the cell, and with the image not scaled (so that one CSS pixel
    on the final rendering matches one CSS pixel in the coordinate
    space used by the 2D context).</p>

    <p>The user agent must then decouple the
    <code>CanvasRenderingContext2D</code> object and any objects that
    it created (such as <code>CanvasPattern</code> objects or
    <code>ImageData</code> objects) from any real drawing surface.</p>

    <p>If the user agent is unable to render graphics, then it must
    render the text string returned by the callback instead.</p>

   </dd>

  </dl>

  <hr>

  <p>When an algorithm requires the user agent to <dfn>apply a
  <code>Row</code> object</dfn>, the user agent must run the following
  steps:</p>

  <ol>

   <li>

    <p>If the value of the <code>Row</code> object's second entry is
    not &#x2212;1, then run these substeps:</p>

    <ol>

     <li><p>If there is a row with the same parent as the row
     specified by the <code>Row</code> object's <code>RowID</code>
     object, whose display order position is currently the same as the
     value of the <code>Row</code> object's second entry, then remove
     that row from the <span>display order sparse data
     tree</span>.</p></li>

     <li><p>Set the display order position of the row specified by the
     <code>Row</code> object's <code>RowID</code> to the value of the
     <code>Row</code> object's second entry, updating its position in
     the <span>display order sparse data tree</span>
     accordingly.</p></li>

     <li><p>If the row is in the <span>pending
     <code>datagrid</code> rows list</span>, remove it.</p></li>

    </ol>

   </li>

   <li>

    <p>If the fourth entry in the <code>Row</code> object (a
    <code>CellList</code> object, an array) is not empty, then for
    each <code>Cell</code> object in that array update the cell that
    corresponds to the column identified by the value of the first
    entry of the <code>Cell</code> object, by using the appropriate
    set of steps given below as determined by the type of the
    column. Then, if the cell is in the <span>pending
    <code>datagrid</code> cells list</span>, remove it.</p>

    <dl>

     <dt>If the column's type is <code title="datagrid-type-text">text</code></dt>
     <dd>

      <p>Update the cell's text to the value given in the
      <code>Cell</code> object's second entry.</p>

      <p>If the <code>Cell</code> object has three entries, then copy
      the image data from the <code>img</code> element given in the
      third entry, and let the cell's image be given by that image
      data. Otherwise, update the cell to have no image.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-editable">editable</code></dt>
     <dd>

      <p>Update the cell's text to the value given in the
      <code>Cell</code> object's second entry.</p>

      <p>If the <code>Cell</code> object has three entries, then let
      the <code>datalist</code> element given in the third entry be
      the <code>datalist</code> element giving autocompletion
      hints. Otherwise, update the cell to have no
      <code>datalist</code> element.</p>

      <p>If the <code>Cell</code> object has four entries, then copy
      the image data from the <code>img</code> element given in the
      fourth entry, and let the cell's image be given by that image
      data. Otherwise, update the cell to have no image.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-checkable">checkable</code></dt>
     <dd>

      <p>Update the cell's text to the value given in the
      <code>Cell</code> object's second entry.</p>

      <p>Update the cell's checked state to match the value of the
      third entry: checked if true, unchecked otherwise.</p>

      <p>If the <code>Cell</code> object has four entries and the
      fourth entry is true, then update the cell to be obscured as
      indeterminate. Otherwise, the cell's state is not obscured.</p>

      <p>If the <code>Cell</code> object has five entries, then copy
      the image data from the <code>img</code> element given in the
      fifth entry, and let the cell's image be given by that image
      data. Otherwise, update the cell to have no image.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-list">list</code></dt>
     <dd>

      <p>Update the cell's text to the value given in the
      <code>Cell</code> object's second entry, and the
      <code>select</code> element to be the one given in the
      <code>Cell</code> object's third entry</p>

      <p>If the <code>Cell</code> object has four entries, then copy
      the image data from the <code>img</code> element given in the
      fourth entry, and let the cell's image be given by that image
      data. Otherwise, update the cell to have no image.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-progress">progress</code></dt>
     <dd>

      <p>Update the cell to be a progress bar whose progress, on the
      scale of 0.0 (no progress) to 1.0 (task complete) is given by
      the value in the <code>Cell</code> object's second entry.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-meter">meter</code></dt>
     <dd>

      <p>Update the cell to be a gauge configured with the numbers
      given by the second and subsequent entries of the
      <code>Cell</code> object.</p>

     </dd>

     <dt>If the column's type is <code title="datagrid-type-custom">custom</code></dt>
     <dd>

      <p>Update the cell's minimum width to be the length in CSS
      pixels given by the <code>Cell</code> object's second entry.</p>

      <p>Update the cell's minimum height to be the length in CSS
      pixels given by the <code>Cell</code> object's third entry.</p>

      <p>Update the cell's callback to be the
      <code>RenderingContext2DCallback</code> object given by the
      <code>Cell</code> object's fourth entry.</p>

     </dd>

    </dl>

   </li>

  </ol>

  <hr>

  <p>When the user agent is to run the <dfn><code>datagrid</code>
  update display algorithm</dfn>, the user agent must invoke the <code
  title="dom-listener-getRows">getRows()</code> and <code
  title="dom-listener-getCells">getCells()</code> methods on the
  current <code title="dom-datagrid-listener">listener</code> such
  that all the current visible rows in the <span>display order sparse
  data list</span>, and all the cells in the currently visible columns
  on all the currently visible rows, have been covered.</p>

  <p>A row is considered covered if it is present in the <span>pending
  <code>datagrid</code> rows list</span>, or if the <code
  title="dom-listener-getRows">getRows()</code> method is invoked with
  a range that includes the row in question.</p>

  <p>A cell is considered covered if it is present in the
  <span>pending <code>datagrid</code> cells list</span>, or if the
  <code title="dom-listener-getRows">getRows()</code> method is
  invoked with a range that includes the row in question and a list of
  columns that includes the cell's column, or if the <code
  title="dom-listener-getCells">getCells()</code> method is invoked
  with a list of rows and columns that intersects the cell in
  question. However, the <code
  title="dom-listener-getCells">getCells()</code> method can only be
  used if the row is already present in the <span>display order sparse
  data list</span>.</p>

  <p>The <code title="dom-listener-getRows">getRows()</code> method,
  if used, must be invoked with five arguments. The first argument
  must be the index in the <span>display order sparse data list</span>
  to the first row that the user agent is requesting, known as the
  <i>anchor row</i>. The second argument must be the number of
  consecutive cells for which the user agent is requesting
  information. The third argument must be the <code>RowID</code> of
  the row that is the nearest ancestor in the <span>display order
  sparse data <em>tree</em></span> of the anchor row. If this is the
  <code>datagrid</code>, then the <code>RowID</code> object must be an
  empty array. The fourth argument must be the display order position
  of the anchor row in the <span>display order sparse data
  tree</span>, assuming that the row identified in the third argument
  is indeed the anchor row's parent row. The fifth and final argument
  must be an array of the identifiers of the columns for which the
  user agent is requesting information, in the order they were added
  to the <code>datagrid</code>.</p>

  <p>As the <code title="dom-listener-getRows">getRows()</code> method
  is invoked, the <span>pending <code>datagrid</code> rows list</span>
  must be updated to include the rows for which information has been
  requested, excluding rows for which information is already
  available; and the <span>pending <code>datagrid</code> cells
  list</span> must be updated to include the cells for which
  information has been requested on those rows.</p>

  <p>The <code title="dom-listener-getCells">getCells()</code> method,
  if used, must be invoked with two arguments. The first argument must
  be an array of <code>RowID</code> objects identifying the rows for
  which information is being requested. The second argument must be an
  array of the identifiers of the columns for which the user agent is
  requesting information, in the order they were added to the
  <code>datagrid</code>.</p>

  <p>As the <code title="dom-listener-getCells">getCells()</code>
  method is invoked, the <span>pending <code>datagrid</code> cells
  list</span> must be updated to include the cells for which
  information has been requested.</p>

  <p>Calls to these methods should be batched so that the rows and
  cells to be covered are handled by the fewest number of calls to
  these methods as possible. To this end, user agents may invoke the
  <code title="dom-listener-getRows">getRows()</code> method for a set
  of rows that includes some rows that are already in the
  <span>display order sparse data list</span>, and similarly may
  invoke the <code title="dom-listener-getCells">getCells()</code>
  method with row/column combinations that cover some cells for which
  data is already known. Generally, however, user agents should avoid
  invoking these methods with arguments that cause information to be
  requested when it has already been requested or is already
  known.</p>

  <div class="example">

   <p>For example, consider a case represented by the following table,
   where the cells marked "Yes" indicate that the data has already
   been obtained, the cells marked "Pending" indicate that the data
   has been previously requested but not yet obtained, and the cells
   with just a dash indicate that no information has ever been
   obtained, or any information that had been obtained has now been
   discarded.</p>

   <table>
    <tr> <td>        <th> Row   <th> Column A  <th> Column B
    <tr> <th> Row 1  <td> -     <td> -         <td> -
    <tr> <th> Row 2  <td> Yes   <td> Yes       <td> Yes
    <tr> <th> Row 3  <td> Yes   <td> Yes       <td> Yes
    <tr> <th> Row 4  <td> Yes   <td> Yes       <td> Yes
    <tr> <th> Row 5  <td> -     <td> -         <td> -
    <tr> <th> Row 6  <td> -     <td> -         <td> -
    <tr> <th> Row 7  <td> Yes   <td> Pending   <td> -
    <tr> <th> Row 8  <td> Yes   <td> Pending   <td> Pending
   </table>

   <p>Thus, rows 2, 3, 4, 7, and 8 are already covered, as are the
   cells from those rows except for the cell in column B of row 7.</p>

   <p>Now consider what happens if all of these rows become visible at
   once. The user agent has several choices, including (but not
   limited to) the following:</p>

   <ul>

    <li>Fire the <code title="dom-listener-getRows">getRows()</code>
    method for rows 1 through 8 and columns A and B all at once.</li>

    <li>Fire the <code title="dom-listener-getRows">getRows()</code>
    method for row 1, then fire it again for rows 5 through 7.</li>

    <li>Fire the <code title="dom-listener-getRows">getRows()</code>
    method for row 1, then fire it again for rows 5 and 6, and then
    fire the <code title="dom-listener-getCells">getCells()</code>
    method for row 7 column B.</li>

   </ul>

   <p>All three options are allowed, but the latter two are preferable
   to the former, as they minimise the amount of redundant information
   requested.</p>

   <p>In any case, the data model now looks like this:</p>

   <table>
    <tr> <td>        <th> Row     <th> Column A  <th> Column B  <th> Column C
    <tr> <th> Row 1  <td> Pending <td> Pending   <td> Pending   <td> -
    <tr> <th> Row 2  <td> Yes     <td> Yes       <td> Yes       <td> -
    <tr> <th> Row 3  <td> Yes     <td> Yes       <td> Yes       <td> -
    <tr> <th> Row 4  <td> Yes     <td> Yes       <td> Yes       <td> -
    <tr> <th> Row 5  <td> Pending <td> Pending   <td> Pending   <td> -
    <tr> <th> Row 6  <td> Pending <td> Pending   <td> Pending   <td> -
    <tr> <th> Row 7  <td> Yes     <td> Pending   <td> Pending   <td> -
    <tr> <th> Row 8  <td> Yes     <td> Pending   <td> Pending   <td> -
   </table>

   <p>Now consider the case where a third column, column C, is added
   to the data model. The user agent once again has several choices,
   including (but not limited to) the following:</p>

   <ul>

    <li>Fire the <code title="dom-listener-getRows">getRows()</code>
    method for rows 1 through 8 again, this time listing just column
    C.</li>

    <li>Fire the <code title="dom-listener-getRows">getRows()</code>
    method for row 1, then fire it again for rows 5 and 6, and then
    fire the <code title="dom-listener-getCells">getCells()</code>
    method for the other rows (in all three cases, listing just column
    C).</li>

   </ul>

   <p>The two options here are as bad as each other; the former
   involves a lot of overlap, but the latter involves a lot of method
   calls. Unfortunately the user agent can't do the obvious thing,
   namely just to invoke the <code
   title="dom-listener-getCells">getCells()</code> method for all the
   rows listing just column C, because it doesn't have the row
   information for all the rows yet (rows 1, 5 and 6 are still
   pending).</p>

   <p>In any case, the data model now looks like this:</p>

   <table>
    <tr> <td>        <th> Row     <th> Column A  <th> Column B  <th> Column C
    <tr> <th> Row 1  <td> Pending <td> Pending   <td> Pending   <td> Pending
    <tr> <th> Row 2  <td> Yes     <td> Yes       <td> Yes       <td> Pending
    <tr> <th> Row 3  <td> Yes     <td> Yes       <td> Yes       <td> Pending
    <tr> <th> Row 4  <td> Yes     <td> Yes       <td> Yes       <td> Pending
    <tr> <th> Row 5  <td> Pending <td> Pending   <td> Pending   <td> Pending
    <tr> <th> Row 6  <td> Pending <td> Pending   <td> Pending   <td> Pending
    <tr> <th> Row 7  <td> Yes     <td> Pending   <td> Pending   <td> Pending
    <tr> <th> Row 8  <td> Yes     <td> Pending   <td> Pending   <td> Pending
   </table>

   <p>If at this point the user scrolls around anywhere within this
   <code>datagrid</code>, the user agent won't fire the <code
   title="dom-listener-getRows">getRows()</code> and <code
   title="dom-listener-getCells">getCells()</code> methods, because
   all of the rows and cells are covered.</p>

   <p>Now consider the case where the user agent receives row
   information, but no cell information, for rows 1, 5, and 6:</p>

   <table>
    <tr> <td>        <th> Row     <th> Column A  <th> Column B  <th> Column C
    <tr> <th> Row 1  <td> Yes     <td> Pending   <td> Pending   <td> Pending
    <tr> <th> Row 2  <td> Yes     <td> Yes       <td> Yes       <td> Pending
    <tr> <th> Row 3  <td> Yes     <td> Yes       <td> Yes       <td> Pending
    <tr> <th> Row 4  <td> Yes     <td> Yes       <td> Yes       <td> Pending
    <tr> <th> Row 5  <td> Yes     <td> Pending   <td> Pending   <td> Pending
    <tr> <th> Row 6  <td> Yes     <td> Pending   <td> Pending   <td> Pending
    <tr> <th> Row 7  <td> Yes     <td> Pending   <td> Pending   <td> Pending
    <tr> <th> Row 8  <td> Yes     <td> Pending   <td> Pending   <td> Pending
   </table>

   <p>The user agent still won't fire any methods when the user
   scrolls, because the data is still covered. But if the script then
   calls the <code title="dom-datagrid-renotify">renotify()</code>
   method, the "Pending" flags would get reset, and the model would
   now look like this:</p>

   <table>
    <tr> <td>        <th> Row     <th> Column A  <th> Column B  <th> Column C
    <tr> <th> Row 1  <td> Yes     <td> -         <td> -         <td> -
    <tr> <th> Row 2  <td> Yes     <td> Yes       <td> Yes       <td> -
    <tr> <th> Row 3  <td> Yes     <td> Yes       <td> Yes       <td> -
    <tr> <th> Row 4  <td> Yes     <td> Yes       <td> Yes       <td> -
    <tr> <th> Row 5  <td> Yes     <td> -         <td> -         <td> -
    <tr> <th> Row 6  <td> Yes     <td> -         <td> -         <td> -
    <tr> <th> Row 7  <td> Yes     <td> -         <td> -         <td> -
    <tr> <th> Row 8  <td> Yes     <td> -         <td> -         <td> -
   </table>

   <p>Now, assuming that all eight rows and all three columns are
   still visible, the user agent has the following choices (amongst
   others):</p>

   <ul>

    <li>Fire the <code title="dom-listener-getRows">getCells()</code>
    method for rows 1 through 8, listing all three columns.</li>

    <li>Fire the <code title="dom-listener-getRows">getCells()</code>
    method for rows 1 and 5 through 8, listing all three columns, and
    then fire the method for rows 2 through 4, listing just column
    C.</li>

    <li>Fire the <code title="dom-listener-getRows">getCells()</code>
    method for rows 1 and 5 through 8, listing just columns A abd B,
    and then fire the method for rows 1 through 8, listing just column
    C.</li>

   </ul>

   <p>Here the latter two are preferable because they result in less
   overlap than the first.</p>

  </div>

  <hr>

  <p>The <span>task source</span> for tasks queued on behalf of a
  <code>datagrid</code> is the <span>DOM manipulation task
  source</span>.</p>

  </div>


  <h5>Listening to notifications from the <code>datagrid</code></h5>

  <p><i>The conformance criteria in this section apply to any
  implementation of the <code>DataGridListener</code> interface,
  including (and most commonly) the content author's
  implementation(s).</i></p>

  <pre class="idl">// To be implemented by Web authors as a JS object
[NoInterfaceObject]
interface <dfn>DataGridListener</dfn> {
  void <span title="dom-listener-initialize">initialize</span>(in <span>HTMLDataGridElement</span> datagrid);

  void <span title="dom-listener-getRows">getRows</span>(in unsigned long rowIndex, in unsigned long rowCount, in <span>RowID</span> parentRow, in unsigned long position, in <span>ColumnList</span> columns);
  void <span title="dom-listener-getCells">getCells</span>(in <span>RowIDList</span> rows, in <span>ColumnList</span> columns);
  void <span title="dom-listener-rowOpened">rowOpened</span>(in <span>RowID</span> row, in boolean rowCountNeeded);
  void <span title="dom-listener-rowClosed">rowClosed</span>(in <span>RowID</span> row);

  void <span title="dom-listener-cellChanged">cellChanged</span>(in <span>RowID</span> row, in <span>Column</span> column, in any newValue, in any prevValue);
  <span>HTMLMenuElement</span> <span title="dom-listener-getRowMenu">getRowMenu</span>(in <span>RowID</span> row);
<!- -vsDGDND
  boolean <span title="dom-listener-canDrop">canDrop</span>(in <span>RowID</span> row, in <span>RowID</span> position, data);
  boolean <span title="dom-listener-dropped">dropped</span>(in <span>RowID</span> row, in <span>RowID</span> position, data);
- -><!- -v2DGPA
  void <span title="dom-listener-performAction">performAction</span>(in <span>RowID</span> row, in DOMString action);
- ->};</pre>

  <p>The <code>DataGridListener</code> interface, once implemented by
  an object in a script and hooked up to a <code>datagrid</code> using
  the <code title="dom-datagrid-listener">listener</code> IDL
  attribute, receives notifications when the <code>datagrid</code>
  needs information (such as which rows exist) for display.</p>

  <p>The following methods may be usefully implemented:</p>

  <dl>

   <dt><dfn title="dom-listener-initialize"><code>initialize(<var title="">datagrid</var>)</code></dfn></dt>

   <dd>

    <p>Called by the <code>datagrid</code> element (the one given by
    the <var title="">datagrid</var> argument) when the <code
    title="dom-datagrid-listener">listener</code> attribute is
    set.</p>

   </dd>

   <dt><dfn title="dom-listener-getRows"><code>getRows(<var title="">rowIndex</var>, <var title="">rowCount</var>, <var title="">parentRow</var>, <var title="">position</var>, <var title="">columns</var>)</code></dfn></dt>

   <dd>

    <p>Called by the <code>datagrid</code> element when the user agent
    finds itself needing to render rows for which it is lacking
    information.</p>

    <p>The <var title="">rowIndex</var> argument gives the flattened
    index of the first row for which it needs information, ignoring
    the tree structure of the <code>datagrid</code> model, where zero
    is the first row of the entire tree.</p>

    <p>The <var title="">rowCount</var> argument gives the number of
    rows for which the user agent would like information.</p>

    <p>The <var title="">parentRow</var> argument gives the
    <code>RowID</code> object identifying the nearest ancestor of the
    first row that the user agent is aware of. After the sort order
    has changed, this will typically be the root of the tree
    (identified by a <code>RowID</code> object consisting of an empty
    array).

    <p>The <var title="">columns</var> argument gives the columns for
    which the user agent is lacking information, as an array of column
    identifiers (as passed to <code
    title="dom-datagrid-addColumn">addColumn()</code>).</p>

   </dd>

   <dt><dfn title="dom-listener-getCells"><code>getCells(<var title="">rows</var>, <var title="">columns</var>)</code></dfn></dt>

   <dd>

    <p>Called by the <code>datagrid</code> element when the user agent
    finds itself needing to render cells for which it is lacking
    information in rows that it does know about.</p>

    <p>The <var title="">rows</var> argument gives an array of
    <code>RowID</code> objects identifying the various rows for which
    the user agent is lacking information.</p>

    <p>The <var title="">columns</var> argument gives the columns for
    which the user agent is lacking information, as an array of column
    identifiers (as passed to <code
    title="dom-datagrid-addColumn">addColumn()</code>).</p>

   </dd>

   <dt><dfn title="dom-listener-rowOpened"><code>rowOpened(<var title="">row</var>, <var title="">rowCountNeeded</var>)</code></dfn></dt>

   <dd>

    <p>Called by the <code>datagrid</code> element when the user has
    opened a row.</p>

    <p>The <var title="">row</var> argument gives an
    <code>RowID</code> object identifying the row that was opened.</p>

    <p>If the user agent also knows how many children that row has,
    then the <var title="">rowCountNeeded</var> argument will be
    false. Otherwise, the argument will be true, and the row will
    remain closed until the <code
    title="dom-datagrid-setRows">setRows()</code> method is called
    with an accurate row count.</p>

   </dd>

   <dt><dfn title="dom-listener-rowClosed"><code>rowClosed(<var title="">row</var>)</code></dfn></dt>

   <dd>

    <p>Called by the <code>datagrid</code> element when the user has
    opened a row.</p>

    <p>The <var title="">row</var> argument gives an
    <code>RowID</code> object identifying the row that was closed.</p>

   </dd>

   <dt><dfn title="dom-listener-cellChanged"><code>cellChanged(<var title="">row</var>, <var title="">column</var>, <var title="">newValue</var>, <var title="">prevValue</var>)</code></dfn></dt>

   <dd>

    <p>Called by the <code>datagrid</code> element when the user has
    edited a cell or checked a check box in a cell.</p>

    <p>The <var title="">row</var> argument gives an
    <code>RowID</code> object identifying the row of the cell, and the
    <var title="">column</var> argument gives the identifier of the
    cell's column.</p>

    <p>The <var title="">newValue</var> argument gives the new value,
    and the <var title="">prevValue</var> argument gives the previous
    value.</p>

   </dd>

   <dt><dfn title="dom-listener-getRowMenu"><code>getRowMenu(<var title="">row</var>)</code></dfn></dt>

   <dd>Must return an <code>HTMLMenuElement</code> object that is to
   be used as a context menu for row <var title="">row</var>, or null
   if there is no particular context menu. May be omitted if none of
   the rows have a special context menu. As this method is called
   immediately before showing the menu in question, no precautions
   need to be taken if the return value of this method changes.</dd>

   <!- -v2DGDND, v2DFPA- ->

  </dl>

  <div class="impl">

  <p>Objects that implement the <code>DataGridListener</code>
  interface may omit any or all of the methods. When a method is
  omitted, a user agent intending to call that method must instead
  skip the method call, and must assume that the method's return value
  is null.</p>

  </div>



<!- - v2DGS: <datagrid> selection (search for the bits marked "..." to see what needs filling in, at a minimum)

  <h5>The selection</h5>

  <pre class="idl">interface <dfn>DataGridSelection</dfn> {
  readonly attribute unsigned long <span title="dom-DataGridSelection-length">length</span>;
  getter <span>RowID</span> <span title="dom-DataGridSelection-item">item</span>(in unsigned long index);
  boolean <span title="dom-DataGridSelection-isSelected">isSelected</span>(in <span>RowID</span> row);
  void <span title="dom-DataGridSelection-setSelected">setSelected</span>(in <span>RowID</span> row, in boolean selected);
  void <span title="dom-DataGridSelection-selectAll">selectAll</span>();
  void <span title="dom-DataGridSelection-clear">clear</span>();
};</pre>

  <dl class="domintro">

   ...

  </dl>

  <div class="impl">

  <p>Each <code>datagrid</code> element must keep track of which rows
  are currently selected. Initially, no rows are selected. This can be
  changed using the methods described in this section.</p>

  <p>The selection of a <code>datagrid</code> is represented by its
  <dfn title="dom-datagrid-selection"><code>selection</code></dfn> IDL
  attribute, which must be a <code>DataGridSelection</code> object.</p>

  <p><code>DataGridSelection</code> objects represent the rows in the
  selection. In the selection the rows must be ordered in their
  natural order (and not, e.g., the display order). A row with an
  ancestor that is closed cannot be selected.</p>

  <p>The <dfn
  title="dom-DataGridSelection-length"><code>length</code></dfn>
  attribute must return the number of rows currently present in the
  selection. This is the <var
  title="dom-DataGridSelection-length">length</var>.</p>

  <p>The object's <span>indices of the supported indexed
  properties</span> are the numbers in the range zero to <span title=""><var
  title="dom-DataGridSelection-length">length</var>-1</span>, unless
  the <var title="dom-DataGridSelection-length">length</var> is zero,
  in which case there are no <span>supported indexed
  properties</span>.</p>

  <p>The <dfn title="dom-DataGridSelection-item"><code>item(<var
  title="">index</var>)</code></dfn> method must return a
  <code>RowID</code> object identifying the <var
  title="">index</var>th row in the selection. If the argument is out
  of range (less than zero or greater than the number of selected rows
  minus one), then it must raise an <code>INDEX_SIZE_ERR</code>
  exception. <a href="#refsDOMCORE">[DOMCORE]</a></p>

  <p>The <dfn
  title="dom-DataGridSelection-isSelected"><code>isSelected()</code></dfn>
  method must return the selected state of the row specified by its
  argument. If the specified row is in the <span>natural order sparse
  data tree</span> and is selected, the method must return true,
  otherwise it must return false.</p>

  <p>The <dfn
  title="dom-DataGridSelection-setSelected"><code>setSelected()</code></dfn>
  method takes two arguments, <var title="">row</var> and <var
  title="">selected</var>. When invoked, it must set the selection
  state of row <var title="">row</var> to selected if <var
  title="">selected</var> is true, and unselected if it is false. If
  <var title="">row</var> does not specify a row in the <span>natural
  order sparse data tree</span> ...

  <p>The <dfn
  title="dom-DataGridSelection-selectAll"><code>selectAll()</code></dfn>
  method must ...

  <p>The <dfn
  title="dom-DataGridSelection-clear"><code>clear()</code></dfn>
  method must mark all the rows in the <code>datagrid</code> as not
  selected. After a call to <code
  title="dom-DataGridSelection-clear">clear()</code>, the <code
  title="dom-DataGridSelection-length">length</code> attribute will
  return zero.</p>

  <p>If the <code>datagrid</code> element has a <code
  title="attr-datagrid-multiple">multiple</code> attribute, then the
  user agent should allow the user to select any number of rows (zero
  or more). If the attribute is not present, then the user agent
  should allow the user to select a row, and must not allow the user
  to select more than a single row at a time; selecting another one
  must unselect all the other rows.</p>

  <p class="note">This only applies to the user. Scripts can select
  multiple rows even when the <code
  title="attr-datagrid-multiple">multiple</code> attribute is
  absent.</p>

  ...event on selection change?...

  </div>

  <p class="note">The <code>DataGridSelection</code> interface has no
  relation to the <code>Selection</code> interface.</p>

- ->


<!- -vsDGDND
  <h5>Drag and drop in <code>datagrid</code>s</h5>

  <p><i>This section only applies to interactive user agents.</i></p>

  ...define drag and drop in datagrids; selectiondraggable...
- ->

-->

  <h4 id=the-command><span class=secno>4.11.3 </span>The <dfn><code>command</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#metadata-content>Metadata content</a>.</dd>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#metadata-content>metadata content</a> is expected.</dd>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-command-type><a href=#attr-command-type>type</a></code></dd>
   <dd><code title=attr-command-label><a href=#attr-command-label>label</a></code></dd>
   <dd><code title=attr-command-icon><a href=#attr-command-icon>icon</a></code></dd>
   <dd><code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code></dd>
   <dd><code title=attr-command-checked><a href=#attr-command-checked>checked</a></code></dd>
   <dd><code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code></dd>
   <!--<dd><code title="attr-command-default">default</code></dd>-->
   <dd>Also, the <code title=attr-command-title><a href=#attr-command-title>title</a></code> attribute has special semantics on this element.</dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlcommandelement>HTMLCommandElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-command-type title=dom-command-type>type</a>;
           attribute DOMString <a href=#dom-command-label title=dom-command-label>label</a>;
           attribute DOMString <a href=#dom-command-icon title=dom-command-icon>icon</a>;
           attribute boolean <a href=#dom-command-disabled title=dom-command-disabled>disabled</a>;
           attribute boolean <a href=#dom-command-checked title=dom-command-checked>checked</a>;
           attribute DOMString <a href=#dom-command-radiogroup title=dom-command-radiogroup>radiogroup</a>;<!--
           attribute boolean <span title="dom-command-default">default</span>;-->
};</pre>
   </dd>
  </dl><p>The <code><a href=#the-command>command</a></code> element represents a command that the user
  can invoke.</p>

  <p>The <dfn id=attr-command-type title=attr-command-type><code>type</code></dfn>
  attribute indicates the kind of command: either a normal command
  with an associated action, or a state or option that can be toggled,
  or a selection of one item from a list of items.</p>

  <p>The attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with three
  keywords and states. The "<dfn id=attr-command-type-keyword-command title=attr-command-type-keyword-command><code>command</code></dfn>"
  keyword maps to the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state, the
  "<dfn id=attr-command-type-keyword-checkbox title=attr-command-type-keyword-checkbox><code>checkbox</code></dfn>"
  keyword maps to the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state, and
  the "<dfn id=attr-command-type-keyword-radio title=attr-command-type-keyword-radio><code>radio</code></dfn>"
  keyword maps to the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state. The
  <i>missing value default</i> is the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state.</p>

  <dl><dt>The <dfn id=attr-command-type-state-command title=attr-command-type-state-command>Command</dfn> state</dt>

   <dd><p>The element <a href=#represents>represents</a> a normal command with an associated action.</dd>

   <dt>The <dfn id=attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</dfn> state</dt>

   <dd><p>The element <a href=#represents>represents</a> a state or option that can be toggled.</dd>

   <dt>The <dfn id=attr-command-type-state-radio title=attr-command-type-state-radio>Radio</dfn> state</dt>

   <dd><p>The element <a href=#represents>represents</a> a selection of one item from a list of items.</dd>

  </dl><p>The <dfn id=attr-command-label title=attr-command-label><code>label</code></dfn>
  attribute gives the name of the command, as shown to the user. The
  <code title=attr-command-label><a href=#attr-command-label>label</a></code> attribute must be
  specified and must have a value that is not the empty string.</p>

  <p>The <dfn id=attr-command-title title=attr-command-title><code>title</code></dfn>
  attribute gives a hint describing the command, which might be shown
  to the user to help him.</p>

  <p>The <dfn id=attr-command-icon title=attr-command-icon><code>icon</code></dfn>
  attribute gives a picture that represents the command. If the
  attribute is specified, the attribute's value must contain a
  <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a>. <span class=impl>To obtain the <a href=#absolute-url>absolute
  URL</a> of the icon when the attribute's value is not the empty
  string, the attribute's value must be <a href=#resolve-a-url title="resolve a
  url">resolved</a> relative to the element. When the attribute is
  absent, or its value is the empty string, or <a href=#resolve-a-url title="resolve a
  url">resolving</a> its value fails, there is no icon.</span></p>
  <!-- this is affected by the base URL being changed, so users of
  this should cache the image once they've fetched it once, at least
  until the relative url changes again -->

  <p>The <dfn id=attr-command-disabled title=attr-command-disabled><code>disabled</code></dfn> attribute
  is a <a href=#boolean-attribute>boolean attribute</a> that, if present, indicates that
  the command is not available in the current state.</p>

  <p class=note>The distinction between <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> and <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> is subtle. A command would be
  disabled if, in the same context, it could be enabled if only
  certain aspects of the situation were changed. A command would be
  marked as hidden if, in that situation, the command will never be
  enabled. For example, in the context menu for a water faucet, the
  command "open" might be disabled if the faucet is already open, but
  the command "eat" would be marked hidden since the faucet could
  never be eaten.</p>

  <p>The <dfn id=attr-command-checked title=attr-command-checked><code>checked</code></dfn>
  attribute is a <a href=#boolean-attribute>boolean attribute</a> that, if present,
  indicates that the command is selected. The attribute must be
  omitted unless the <code title=attr-command-type><a href=#attr-command-type>type</a></code>
  attribute is in either the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state or
  the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a>
  state.</p>

  <p>The <dfn id=attr-command-radiogroup title=attr-command-radiogroup><code>radiogroup</code></dfn>
  attribute gives the name of the group of commands that will be
  toggled when the command itself is toggled, for commands whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute has the value "<code title="">radio</code>". The scope of the name is the child list of
  the parent element. The attribute must be omitted unless the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state.</p>

<!--
  <p>If the <code>command</code> element is used when <span
  title="menu generation">generating</span> a <span>context
  menu</span>, then the <dfn
  title="attr-command-default"><code>default</code></dfn> attribute
  indicates, if present, that the command is the one that would have
  been invoked if the user had directly activated the menu's subject
  instead of using its context menu. The <code
  title="attr-command-default">default</code> attribute is a
  <span>boolean attribute</span>. The attribute must be omitted unless
  the <code title="attr-command-type">type</code> attribute is in the
  <span title="attr-command-type-state-command">Command</span>
  state.</p>

  <div class="example">

   ...an example that shows an element that, if double-clicked,
   invokes an action, but that also has a context menu, showing the
   various <code>command</code> attributes off, and that has a default
   command...

  </div>
-->

  <div class=impl>

  <p>The <dfn id=dom-command-type title=dom-command-type><code>type</code></dfn>, <dfn id=dom-command-label title=dom-command-label><code>label</code></dfn>, <dfn id=dom-command-icon title=dom-command-icon><code>icon</code></dfn>, <dfn id=dom-command-disabled title=dom-command-disabled><code>disabled</code></dfn>, <dfn id=dom-command-checked title=dom-command-checked><code>checked</code></dfn>, and <dfn id=dom-command-radiogroup title=dom-command-radiogroup><code>radiogroup</code></dfn><!--,
  and <dfn title="dom-command-default"><code>default</code></dfn>-->
  IDL attributes must <a href=#reflect>reflect</a> the respective content
  attributes of the same name.</p>

  <p>The element's <a href=#activation-behavior>activation behavior</a> depends on the
  value of the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute
  of the element, as follows:</p>

  <dl class=switch><dt>If the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
   in the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state</dt>

   <dd><p>If the element has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, the UA must
   remove that attribute. Otherwise, the UA must add a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, with the
   literal value <code title="">checked</code>. The UA must then
   <a href=#fire-a-click-event>fire a <code title=event-click>click</code> event</a> at the
   element.</dd>


   <dt>If the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
   in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state</dt>

   <dd><p>If the element has a parent, then the UA must walk the list
   of child nodes of that parent element, and for each node that is a
   <code><a href=#the-command>command</a></code> element, if that element has a <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code> attribute whose
   value exactly matches the current element's (treating missing <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code> attributes as if
   they were the empty string), and has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, must remove
   that attribute.</p>

   <p>Then, the element's <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute attribute
   must be set to the literal value <code title="">checked</code> and
   the user agent must <a href=#fire-a-click-event>fire a <code title=event-click>click</code>
   event</a> at the element.</dd>


   <dt>Otherwise</dt>

   <dd><p>The element has no <a href=#activation-behavior>activation behavior</a>.</dd>

  </dl><p class=note>Firing a synthetic <code title=event-click><a href=#event-click>click</a></code> event at the element does not cause
  any of the actions described above to happen.</p>

  <!-- v2COMMAND: the command="" attribute to make a <command> element
  reflect the state of another command, so that the script can update
  one place in the page and have context menus, toolbars, shortcuts,
  etc, automatically update. Once we add this, expose the Triggers
  facet again. -->

  </div>

  <p class=note><code><a href=#the-command>command</a></code> elements are not rendered
  unless they <a href=#menus title=menu>form part of a menu</a>.</p>

  <div class=example>

   <p>Here is an example of a toolbar with three buttons that let the
   user toggle between left, center, and right alignment. One could
   imagine such a toolbar as part of a text editor. The toolbar also
   has a separator followed by another button labeled "Publish",
   though that button is disabled.</p>

   <pre>&lt;menu type="toolbar"&gt;
 &lt;command type="radio" radiogroup="alignment" checked="checked"
          label="Left" icon="icons/alL.png" onclick="setAlign('left')"&gt;
 &lt;command type="radio" radiogroup="alignment"
          label="Center" icon="icons/alC.png" onclick="setAlign('center')"&gt;
 &lt;command type="radio" radiogroup="alignment"
          label="Right" icon="icons/alR.png" onclick="setAlign('right')"&gt;
 &lt;hr&gt;
 &lt;command type="command" disabled
          label="Publish" icon="icons/pub.png" onclick="publish()"&gt;
&lt;/menu&gt;</pre>

  </div>



  <h4 id=menus><span class=secno>4.11.4 </span>The <dfn><code>menu</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state: <a href=#interactive-content>Interactive content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Either: Zero or more <code><a href=#the-li-element>li</a></code> elements.</dd>
   <dd>Or: <a href=#flow-content>Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-menu-type><a href=#attr-menu-type>type</a></code></dd>
   <dd><code title=attr-menu-label><a href=#attr-menu-label>label</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmlmenuelement>HTMLMenuElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-menu-type title=dom-menu-type>type</a>;
           attribute DOMString <a href=#dom-menu-label title=dom-menu-label>label</a>;
};</pre>
  </dl><p>The <code><a href=#menus>menu</a></code> element represents a list of commands.</p>

  <!-- v2 idea: <menu> should get an icon, like <command> -->

  <p>The <dfn id=attr-menu-type title=attr-menu-type><code>type</code></dfn> attribute
  is an <a href=#enumerated-attribute>enumerated attribute</a> indicating the kind of menu
  being declared. The attribute has three states. The <code title=attr-menu-type-context>context</code> keyword maps to the
  <dfn id=context-menu-state title="context menu state">context menu</dfn> state, in which
  the element is declaring a context menu. The <code title=attr-menu-type-toolbar>toolbar</code> keyword maps to the
  <dfn id=toolbar-state title="toolbar state">toolbar</dfn> state, in which the
  element is declaring a toolbar. The attribute may also be
  omitted. The <i>missing value default</i> is the <dfn id=list-state title="list
  state">list</dfn> state, which indicates that the element is merely
  a list of commands that is neither declaring a context menu nor
  defining a toolbar.</p>

  <p>If a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#context-menu-state title="context menu state">context menu</a> state, then the
  element <a href=#represents>represents</a> the commands of a context menu, and
  the user can only interact with the commands if that context menu is
  activated.</p>

  <p>If a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the element
  <a href=#represents>represents</a> a list of active commands that the user can
  immediately interact with.</p>

  <p>If a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#list-state title="list state">list</a> state, then the element either
  <a href=#represents>represents</a> an unordered list of items (each represented
  by an <code><a href=#the-li-element>li</a></code> element), each of which represents a command
  that the user can perform or activate, or, if the element has no
  <code><a href=#the-li-element>li</a></code> element children, <a href=#flow-content>flow content</a>
  describing available commands.</p>

  <p>The <dfn id=attr-menu-label title=attr-menu-label><code>label</code></dfn>
  attribute gives the label of the menu. It is used by user agents to
  display nested menus in the UI. For example, a context menu
  containing another menu would use the nested menu's <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute for the submenu's
  menu label.</p>

  <div class=impl>

  <p>The <dfn id=dom-menu-type title=dom-menu-type><code>type</code></dfn> and <dfn id=dom-menu-label title=dom-menu-label><code>label</code></dfn> IDL attributes must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  </div>



  <h5 id=menus-intro><span class=secno>4.11.4.1 </span>Introduction</h5>

  <p><i>This section is non-normative.</i></p>

  <p>The <code><a href=#menus>menu</a></code> element is used to define context menus and
  toolbars.</p>

  <p>For example, the following represents a toolbar with three menu
  buttons on it, each of which has a dropdown menu with a series of
  options:</p>

  <pre>&lt;menu type="toolbar"&gt;
 &lt;li&gt;
  &lt;menu label="File"&gt;
   &lt;button type="button" onclick="fnew()"&gt;New...&lt;/button&gt;
   &lt;button type="button" onclick="fopen()"&gt;Open...&lt;/button&gt;
   &lt;button type="button" onclick="fsave()"&gt;Save&lt;/button&gt;
   &lt;button type="button" onclick="fsaveas()"&gt;Save as...&lt;/button&gt;
  &lt;/menu&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;menu label="Edit"&gt;
   &lt;button type="button" onclick="ecopy()"&gt;Copy&lt;/button&gt;
   &lt;button type="button" onclick="ecut()"&gt;Cut&lt;/button&gt;
   &lt;button type="button" onclick="epaste()"&gt;Paste&lt;/button&gt;
  &lt;/menu&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;menu label="Help"&gt;
   &lt;li&gt;&lt;a href="help.html"&gt;Help&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/menu&gt;
 &lt;/li&gt;
&lt;/menu&gt;</pre>

  <p>In a supporting user agent, this might look like this:</p>

  <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." src=images/sample-toolbar-1.png></p>

  <p>In a legacy user agent, the above would look like a bulleted list
  with three items, the first of which has four buttons, the second of
  which has three, and the third of which has two nested bullet points
  with two items consisting of links.</p>

  <hr><p>The following implements a similar toolbar, with a single button
  whose values, when selected, redirect the user to Web sites.</p>

  <pre>&lt;form action="redirect.cgi"&gt;
 &lt;menu type="toolbar"&gt;
  &lt;label for="goto"&gt;Go to...&lt;/label&gt;
  &lt;menu label="Go"&gt;
   &lt;select id="goto"<!--
           onchange="if (this.options[this.selectedIndex].value)
                     window.location = this.options[this.selectedIndex].value"-->&gt;
    &lt;option value="" selected="selected"&gt; Select site: &lt;/option&gt;
    &lt;option value="http://www.apple.com/"&gt; Apple &lt;/option&gt;
    &lt;option value="http://www.mozilla.org/"&gt; Mozilla &lt;/option&gt;
    &lt;option value="http://www.opera.com/"&gt; Opera &lt;/option&gt;
   &lt;/select&gt;
   &lt;span&gt;&lt;input type="submit" value="Go"&gt;&lt;/span&gt;
  &lt;/menu&gt;
 &lt;/menu&gt;
&lt;/form&gt;</pre>

  <p>The behavior in supporting user agents is similar to the example
  above, but here the legacy behavior consists of a single
  <code><a href=#the-select-element>select</a></code> element with a submit button. The submit button
  doesn't appear in the toolbar, because it is not a direct child of
  the <code><a href=#menus>menu</a></code> element or of its <code><a href=#the-li-element>li</a></code>
  children.</p>



  <div class=impl>

  <h5 id=building-menus-and-toolbars><span class=secno>4.11.4.2 </span><dfn>Building menus and toolbars</dfn></h5>

  <p>A menu (or toolbar) consists of a list of zero or more of the
  following components:</p>

  <ul class=brief><li><a href=#concept-command title=concept-command>Commands</a>, which can be marked as default commands</li>
   <li>Separators</li>
   <li>Other menus (which allows the list to be nested)</li>
  </ul><p>The list corresponding to a particular <code><a href=#menus>menu</a></code> element
  is built by iterating over its child nodes. For each child node in
  <a href=#tree-order>tree order</a>, the required behavior depends on what the
  node is, as follows:</p>

  <dl class=switch><dt>An element that <a href=#concept-command title=concept-command>defines a command</a></dt>

   <dd>Append the command to the menu, respecting its <a href=#concept-facet title=concept-facet>facets</a><!-- we might need to be
   explicit about what this means for each facet, if testing shows
   this isn't well-implemented. e.g.: If there's an Icon facet for the
   command, it should be <span title="fetch">fetched</span> (this
   would be http-origin privacy-sensitive), and then that image should
   be associated with the command, such that each command only has its
   image fetched once, to prevent changes to the base URL from having
   effects after the image has been fetched once. (no need to resolve
   the Icon facet, it's an absolute URL) -->. <!--If the element is a
   <code>command</code> element with a <code
   title="attr-command-default">default</code> attribute, mark the
   command as being a default command.--></dd>


   <dt>An <code><a href=#the-hr-element>hr</a></code> element</dt>
   <dt>An <code><a href=#the-option-element>option</a></code> element that has a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute set to the empty
   string, and has a <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute, and whose
   <code><a href=#textcontent>textContent</a></code> consists of a string of one or more
   hyphens (U+002D HYPHEN-MINUS)</dt>

   <dd>Append a separator to the menu.</dd>


   <dt>An <code><a href=#the-li-element>li</a></code> element</dt>
   <dt>A <code><a href=#the-label-element>label</a></code> element</dt>

   <dd>Iterate over the children of the element.</dd>


   <dt>A <code><a href=#menus>menu</a></code> element with no <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
   <dt>A <code><a href=#the-select-element>select</a></code> element</dt>

   <dd>Append a separator to the menu, then iterate over the children
   of the <code><a href=#menus>menu</a></code> or <code><a href=#the-select-element>select</a></code> element, then
   append another separator.</dd>

   <!-- v2: we might want to support <select> in <label> as giving a named submenu -->


   <dt>A <code><a href=#menus>menu</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
   <dt>An <code><a href=#the-optgroup-element>optgroup</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>

   <dd>Append a submenu to the menu, using the value of the element's
   <code title="">label</code> attribute as the label of the menu. The
   submenu must be constructed by taking the element and creating a
   new menu for it using the complete process described in this
   section.</dd>


   <dt>Any other node</dt>

   <dd><a href=#ignore>Ignore</a> the node.</dd>

  </dl><p>Once all the nodes have been processed as described above, the
  user agent must the post-process the menu as follows:</p>

  <ol><li>Except for separators, any menu item with no label, or whose
   label is the empty string, must be removed.</li>

   <li>Any sequence of two or more separators in a row must be
   collapsed to a single separator.</li>

   <li>Any separator at the start or end of the menu must be
   removed.</li>

  </ol></div>




  <h5 id=context-menus><span class=secno>4.11.4.3 </span><dfn>Context menus</dfn></h5>

  <p>The <dfn id=attr-contextmenu title=attr-contextmenu><code>contextmenu</code></dfn>
  attribute gives the element's <a href=#context-menus title="context menus">context
  menu</a>. The value must be the ID of a <code><a href=#menus>menu</a></code> element
  in the DOM. <span class=impl>If the node that would be obtained by
  the invoking the <code title=dom-Document-getElementById><a href=#dom-document-getelementbyid>getElementById()</a></code> method
  using the attribute's value as the only argument is null or not a
  <code><a href=#menus>menu</a></code> element, then the element has no assigned context
  menu. Otherwise, the element's assigned context menu is the element
  so identified.</span></p>

  <div class=impl>

  <p>When an element's context menu is requested (e.g. by the user
  right-clicking the element, or pressing a context menu key), the UA
  must <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-contextmenu>contextmenu</code> that bubbles and is
  cancelable at the element for which the menu was requested.</p>

  <p class=note>Typically, therefore, the firing of the <code title=event-contextmenu>contextmenu</code> event will be the
  default action of a <code title=mouseup>mouseup</code> or <code title=event-keyup>keyup</code> event. The exact sequence of events
  is UA-dependent, as it will vary based on platform conventions.</p>

  <p>The default action of the <code title=event-contextmenu>contextmenu</code> event depends on
  whether the element or one of its ancestors has a context menu
  assigned (using the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute) or not. If
  there is no context menu assigned, the default action must be for
  the user agent to show its default context menu, if it has one.</p>

  <p>If the element or one of its ancestors <em>does</em> have a
  context menu assigned, then the user agent must <a href=#fire-a-simple-event>fire a simple
  event</a> named <code title=event-show>show</code> at the
  <code><a href=#menus>menu</a></code> element of the context menu of the nearest
  ancestor (including the element itself) with one assigned.</p>
  <!-- v2: include modifier key information -->

  <p>The default action of <em>this</em> event is that the user agent
  must show a context menu <a href=#building-menus-and-toolbars title="building menus and
  toolbars">built</a> from the <code><a href=#menus>menu</a></code> element.</p>

  <p>The user agent may also provide access to its default context
  menu, if any, with the context menu shown. For example, it could
  merge the menu items from the two menus together, or provide the
  page's context menu as a submenu of the default menu.</p>

  <p>If the user dismisses the menu without making a selection,
  nothing in particular happens.</p>

  <p>If the user selects a menu item that represents a <a href=#concept-command title=concept-command>command</a>, then the UA must invoke
  that command's <a href=#command-facet-action title=command-facet-Action>Action</a>.</p>

  <p>Context menus must not, while being shown, reflect changes in the
  DOM; they are constructed as the default action of the <code title=event-show>show</code> event and must remain as constructed
  until dismissed.</p>

  <p>User agents may provide means for bypassing the context menu
  processing model, ensuring that the user can always access the UA's
  default context menus. For example, the user agent could handle
  right-clicks that have the Shift key depressed in such a way that it
  does not fire the <code title=event-contextmenu>contextmenu</code>
  event and instead always shows the default context menu.</p>

  <p>The <dfn id=dom-contextmenu title=dom-contextMenu><code>contextMenu</code></dfn>
  attribute must <a href=#reflect>reflect</a> the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> content attribute.</p>

  </div>

  <div class=example>

   <p>Here is an example of a context menu for an input control:</p>

   <pre>&lt;form name="npc"&gt;
 &lt;label&gt;Character name: &lt;input name=char type=text contextmenu=namemenu required&gt;&lt;/label&gt;
 &lt;menu type=context id=namemenu&gt;
  &lt;command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()"&gt;
  &lt;command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"&gt;
 &lt;/menu&gt;
&lt;/form&gt;</pre>

   <p>This adds to items to the control's context menu, one called
   "Pick random name", and one called "Prefill other fields based on
   name". They invoke scripts that are not shown in the example
   above.</p>

  </div>



  <div class=impl>

  <h5 id=toolbars><span class=secno>4.11.4.4 </span><dfn>Toolbars</dfn></h5>

  <p>When a <code><a href=#menus>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the user agent
  must <a href=#building-menus-and-toolbars title="building menus and toolbars">build</a> the
  menu for that <code><a href=#menus>menu</a></code> element, and use the result in the
  rendering.</p>

  <p>The user agent must reflect changes made to the
  <code><a href=#menus>menu</a></code>'s DOM, by immediately <a href=#building-menus-and-toolbars title="building menus
  and toolbars">rebuilding</a> the menu.</p>

  </div>



  <h4 id=commands><span class=secno>4.11.5 </span>Commands</h4>

  <p>A <dfn id=concept-command title=concept-command>command</dfn> is the abstraction
  behind menu items, buttons, and links.<!--v2COMMAND: Once a command
  is defined, other parts of the interface can refer to the same
  command, allowing many access points to a single feature to share
  aspects such as the disabled state.--></p>

  <p id=facets>Commands are defined to have the following
  <dfn id=concept-facet title=concept-facet>facets</dfn>:</p>

  <dl><dt><dfn id=command-facet-type title=command-facet-Type>Type</dfn></dt>

   <dd>The kind of command: "command", meaning it is a normal command;
   "radio", meaning that triggering the command will, amongst other
   things, set the <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked
   State</a> to true (and probably uncheck some other commands); or
   "checkbox", meaning that triggering the command will, amongst other
   things, toggle the value of the <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>.</dd>

   <dt><dfn id=command-facet-id title=command-facet-ID>ID</dfn></dt>

   <dd>The name of the command, for referring to the command from the
   markup or from script. If a command has no ID, it is an
   <dfn id=anonymous-command>anonymous command</dfn>.</dd>

   <dt><dfn id=command-facet-label title=command-facet-Label>Label</dfn></dt>

   <dd>The name of the command as seen by the user.</dd>

   <dt><dfn id=command-facet-hint title=command-facet-Hint>Hint</dfn></dt>

   <dd>A helpful or descriptive string that can be shown to the
   user.</dd>

   <dt><dfn id=command-facet-icon title=command-facet-Icon>Icon</dfn></dt>

   <dd>An <a href=#absolute-url>absolute URL</a> identifying a graphical image that
   represents the action. A command might not have an Icon.</dd> <!--
   changing base URLs might change the icon -->

   <dt><dfn id=command-facet-accesskey title=command-facet-AccessKey>Access Key</dfn></dt>

   <dd>A key combination selected by the user agent that triggers the
   command. A command might not have an Access Key.</dd>

   <dt><dfn id=command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</dfn></dt>

   <dd>Whether the command is hidden or not (basically, whether it
   should be shown in menus).</dd>

   <dt><dfn id=command-facet-disabledstate title=command-facet-DisabledState>Disabled State</dfn></dt>

   <dd>Whether the command is relevant and can be triggered or not.</dd>

   <dt><dfn id=command-facet-checkedstate title=command-facet-CheckedState>Checked State</dfn></dt>

   <dd>Whether the command is checked or not.</dd>

   <dt><dfn id=command-facet-action title=command-facet-Action>Action</dfn></dt>

   <dd>The actual effect that triggering the command will have. This
   could be a scripted event handler, a <a href=#url>URL</a> to which to
   <a href=#navigate>navigate</a>, or a form submission.</dd>

<!-- v2COMMAND
   <dt><dfn title="command-facet-Triggers">Triggers</dfn></dt>

   <dd>The list of elements that can trigger the command. The element
   defining a command is always in the list of elements that can
   trigger the command. For anonymous commands, only the element
   defining the command is on the list, since other elements have no
   way to refer to it.</dd>
-->

  </dl><p>These facets are exposed on elements using the <dfn id=command-api>command
  API</dfn>:</p>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-command-ro-commandType><a href=#dom-command-ro-commandtype>commandType</a></code></dt>

   <dd>

    <p>Exposes the <a href=#command-facet-type title=command-facet-Type>Type</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-id><a href=#dom-id>id</a></code></dt>

   <dd>

    <p>Exposes the <a href=#command-facet-id title=command-facet-ID>ID</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-command-ro-label><a href=#dom-command-ro-label>label</a></code></dt>

   <dd>

    <p>Exposes the <a href=#command-facet-label title=command-facet-Label>Label</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-title><a href=#dom-title>title</a></code></dt>

   <dd>

    <p>Exposes the <a href=#command-facet-hint title=command-facet-Hint>Hint</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-command-ro-icon><a href=#dom-command-ro-icon>icon</a></code></dt>

   <dd>

    <p>Exposes the <a href=#command-facet-icon title=command-facet-Icon>Icon</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-accessKeyLabel><a href=#dom-accesskeylabel>accessKeyLabel</a></code></dt>

   <dd>

    <p>Exposes the <a href=#command-facet-accesskey title=command-facet-AccessKey>Access Key</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-hidden><a href=#dom-hidden>hidden</a></code></dt>

   <dd>

    <p>Exposes the <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-command-ro-disabled><a href=#dom-command-ro-disabled>disabled</a></code></dt>

   <dd>

    <p>Exposes the <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-command-ro-checked><a href=#dom-command-ro-checked>checked</a></code></dt>

   <dd>

    <p>Exposes the <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-click><a href=#dom-click>click</a></code>()</dt>

   <dd>

    <p>Triggers the <a href=#command-facet-action title=command-facet-Action>Action</a> of the command.</p>

   </dd>

<!--v2COMMAND
   <dt><var title="">element</var> . <code title="dom-command-ro-triggers">triggers</code></dt>

   <dd>

    <p>Exposes the <span title="command-facet-Triggers">Triggers</span> facet of the command.</p>

   </dd>
-->

  </dl><div class=impl>

  <p>The <dfn id=dom-command-ro-commandtype title=dom-command-ro-commandType><code>commandType</code></dfn>
  attribute must return a string whose value is either "<code title="">command</code>", "<code title="">radio</code>", or "<code title="">checkbox</code>", depending on whether the <a href=#command-facet-type title=command-facet-Type>Type</a> of the command defined by the
  element is "command", "radio", or "checkbox" respectively. If the
  element does not define a command, it must return null.</p>

  <p>The <dfn id=dom-command-ro-label title=dom-command-ro-label><code>label</code></dfn>
  attribute must return the command's <a href=#command-facet-label title=command-facet-Label>Label</a>, or null if the element
  does not define a command or does not specify a <a href=#command-facet-label title=command-facet-Label>Label</a>. This attribute will be
  shadowed by the <code title="">label</code> IDL attribute on
  various elements.</p>

  <p>The <dfn id=dom-command-ro-icon title=dom-command-ro-icon><code>icon</code></dfn>
  attribute must return the <a href=#absolute-url>absolute URL</a> of the command's
  <a href=#command-facet-icon title=command-facet-Icon>Icon</a>. If the element does
  not specify an icon, or if the element does not define a command,
  then the attribute must return null. This attribute will be shadowed
  by the <code title=dom-command-icon><a href=#dom-command-icon>icon</a></code> IDL attribute on
  <code><a href=#the-command>command</a></code> elements.</p>

  <p>The <dfn id=dom-command-ro-disabled title=dom-command-ro-disabled><code>disabled</code></dfn>
  attribute must return true if the command's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is that
  the command is disabled, and false if the command is not
  disabled. This attribute is not affected by the command's <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>. If the
  element does not define a command, the attribute must return
  false. This attribute will be shadowed by the <code title="">disabled</code> IDL attribute on various elements.</p>

  <p>The <dfn id=dom-command-ro-checked title=dom-command-ro-checked><code>checked</code></dfn> attribute
  must return true if the command's <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a> is that the
  command is checked, and false if it is that the command is not
  checked. If the element does not define a command, the attribute
  must return false. This attribute will be shadowed by the <code title="">checked</code> IDL attribute on <code><a href=#the-input-element>input</a></code> and
  <code><a href=#the-command>command</a></code> elements.</p>

<!--v2COMMAND
  <p>The <dfn
  title="dom-command-ro-triggers"><code>triggers</code></dfn>
  attribute must return a list containing the elements that can
  trigger the command (the command's <span
  title="command-facet-Triggers">Triggers</span>). The list must be
  <span>live</span>. The same object must be returned each time. While
  the element does not define a command, the list must be empty.</p>
-->

  <p class=note>The <a href=#command-facet-id title=command-facet-ID>ID</a> facet
  is exposed by the <code title=dom-id><a href=#dom-id>id</a></code> IDL attribute,
  the <a href=#command-facet-hint title=command-facet-Hint>Hint</a> facet is exposed by
  the <code title=dom-title><a href=#dom-title>title</a></code> IDL attribute, the <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> facet is exposed by
  the <code title=dom-accessKeyLabel><a href=#dom-accesskeylabel>accessKeyLabel</a></code> IDL
  attribute, and the <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden
  State</a> facet is exposed by the <code title=dom-hidden><a href=#dom-hidden>hidden</a></code> IDL attribute.</p>

  </div>

  <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-commands><a href=#dom-document-commands>commands</a></code></dt>
   <dd>
    <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the elements in the
    <code><a href=#document>Document</a></code> that define commands and have IDs.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-commands title=dom-document-commands><code>commands</code></dfn> attribute
  of the document's <code><a href=#htmldocument>HTMLDocument</a></code> interface must return an
  <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the <code><a href=#document>Document</a></code>
  node, whose filter matches only elements that <a href=#concept-command title=concept-command>define commands</a> and have <a href=#command-facet-id title=command-facet-ID>IDs</a>.</p>

  </div>

  <hr><p>User agents may expose the <a href=#concept-command title=concept-command>commands</a> whose <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a> facet is false
  (visible), e.g. in the user agent's menu bar. User agents are
  encouraged to do this especially for commands that have <a href=#command-facet-accesskey title=command-facet-AccessKey>Access Keys</a>, as a way to
  advertise those keys to the user.</p>


  <div class=impl>

  <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span><dfn title=a-command>Using the <code>a</code> element to define a command</dfn></h5>

  <p>An <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>

  <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
  is "command".</p>

  <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
  the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href=#anonymous-command>anonymous command</a>.</p>

  <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
  is the string given by the element's <code><a href=#textcontent>textContent</a></code> IDL
  attribute.</p>

  <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
  is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
  of the element. If the attribute is not present, the <a href=#command-facet-hint title=command-facet-Hint>Hint</a> is the empty string.</p>

  <p>The <a href=#command-facet-icon title=command-facet-Icon>Icon</a> of the command
  is the <a href=#absolute-url>absolute URL</a> obtained from <a href=#resolve-a-url title="resolve
  a url">resolving</a> the value of the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute of the first
  <code><a href=#the-img-element>img</a></code> element descendant of the element, relative to that
  element, if there is such an element and resolving its attribute is
  successful. Otherwise, there is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command.</p>

  <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
  command is the element's <a href=#assigned-access-key>assigned access key</a>, if
  any.</p>

  <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
  of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
  State</a> facet of the command is always false. (The command is
  always enabled.)</p>

  <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
  of the command is always false. (The command is never checked.)</p>

  <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
  command is to <a href=#fire-a-click-event title="fire a click event">fire a <code title=event-click>click</code> event</a> at the element.</p>


  <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span><dfn title=button-command>Using the <code>button</code> element to define a command</dfn></h5>

  <p>A <code><a href=#the-button-element>button</a></code> element always <a href=#concept-command title=concept-command>defines a command</a>.</p>

  <p>The <a href=#command-facet-type title=command-facet-Type>Type</a>, <a href=#command-facet-id title=command-facet-ID>ID</a>, <a href=#command-facet-label title=command-facet-Label>Label</a>, <a href=#command-facet-hint title=command-facet-Hint>Hint</a>, <a href=#command-facet-icon title=command-facet-Icon>Icon</a>, <a href=#command-facet-accesskey title=command-facet-AccessKey>Access Key</a>, <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>, <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>, and <a href=#command-facet-action title=command-facet-Action>Action</a> facets of the command are
  determined <a href=#using-the-a-element-to-define-a-command title=a-command>as for <code>a</code>
  elements</a> (see the previous section).</p>

  <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
  State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the button.</p>


  <h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span><dfn title=input-command>Using the <code>input</code> element to define a command</dfn></h5>

  <p>An <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in one of the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, <a href=#image-button-state title=attr-input-type-image>Image Button</a>, <a href=#button-state title=attr-input-type-button>Button</a>, <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>, or <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> states <a href=#concept-command title=concept-command>defines a command</a>.</p>

  <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
  is "radio" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code>
  attribute is in the <code title=attr-input-type-radio><a href=#radio-button-state>Radio
  Button</a></code> state, "checkbox" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <code title=attr-input-type-checkbox><a href=#checkbox-state>Checkbox</a></code> state, and
  "command" otherwise.</p>

  <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
  the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href=#anonymous-command>anonymous command</a>.</p>

  <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
  depends on the Type of the command:</p>

  <p>If the <a href=#command-facet-type title=command-facet-Type>Type</a> is "command",
  then it is the string given by the <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if any, and a
  UA-dependent, locale-dependent value that the UA uses to label the
  button itself if the attribute is absent.</p>

  <p>Otherwise, the <a href=#command-facet-type title=command-facet-Type>Type</a> is
  "radio" or "checkbox". If the element is a <a href=#labeled-control>labeled
  control</a>, the <code><a href=#textcontent>textContent</a></code> of the first
  <code><a href=#the-label-element>label</a></code> element in <a href=#tree-order>tree order</a> whose
  <a href=#labeled-control>labeled control</a> is the element in question is the <a href=#command-facet-label title=command-facet-Label>Label</a> (in DOM terms, this is the
  string given by <code><var title="">element</var>.labels[0].textContent</code>). Otherwise,
  the value of the <code title=attr-input-value><a href=#attr-input-value>value</a></code>
  attribute, if present, is the <a href=#command-facet-label title=command-facet-Label>Label</a>. Otherwise, the <a href=#command-facet-label title=command-facet-Label>Label</a> is the empty string.</p>

  <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
  is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
  of the <code><a href=#the-input-element>input</a></code> element. If the attribute is not present, the
  <a href=#command-facet-hint title=command-facet-Hint>Hint</a> is the empty
  string.</p>

  <p>If the element's <code title=attr-input-type><a href=#attr-input-type>type</a></code>
  attribute is in the <a href=#image-button-state title=attr-input-type-image>Image
  Button</a> state, and the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and that attribute's
  value can be successfully <a href=#resolve-a-url title="resolve a
  url">resolved</a> relative to the element, then the <a href=#command-facet-icon title=command-facet-Icon>Icon</a> of the command is the
  <a href=#absolute-url>absolute URL</a> obtained from resolving that attribute
  that way. Otherwise, there is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command.</p>

  <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
  command is the element's <a href=#assigned-access-key>assigned access key</a>, if
  any.</p>

  <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
  of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
  State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the
  control.</p>

  <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
  of the command is true if the command is of <a href=#command-facet-type title=command-facet-Type>Type</a> "radio" or "checkbox" and the
  element is <a href=#concept-fe-checked title=concept-fe-checked>checked</a>
  attribute, and false otherwise.</p>

  <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
  command, if the element has a defined <a href=#activation-behavior>activation
  behavior</a>, is to <a href=#run-synthetic-click-activation-steps>run synthetic click activation
  steps</a> on the element. Otherwise, it is just to <a href=#fire-a-click-event>fire a
  <code title=event-click>click</code> event</a> at the
  element.</p>


  <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span><dfn title=option-command>Using the <code>option</code> element to define a command</dfn></h5>

  <p>An <code><a href=#the-option-element>option</a></code> element with an ancestor
  <code><a href=#the-select-element>select</a></code> element and either no <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute or a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute that is not the
  empty string <a href=#concept-command title=concept-command>defines a
  command</a>.</p>

  <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
  is "radio" if the <code><a href=#the-option-element>option</a></code>'s nearest ancestor
  <code><a href=#the-select-element>select</a></code> element has no <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute, and
  "checkbox" if it does.</p>

  <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
  the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href=#anonymous-command>anonymous command</a>.</p>

  <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
  is the value of the <code><a href=#the-option-element>option</a></code> element's <code title=attr-option-label><a href=#attr-option-label>label</a></code> attribute, if there is one,
  or the value of the <code><a href=#the-option-element>option</a></code> element's
  <code><a href=#textcontent>textContent</a></code> IDL attribute if there isn't.</p>

  <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
  is the string given by the element's <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, if any, and the empty
  string if the attribute is absent.</p>

  <p>There is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the
  command.</p>

  <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
  command is the element's <a href=#assigned-access-key>assigned access key</a>, if
  any.</p>

  <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
  of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
  State</a> of the command is true (disabled) if the element is
  <a href=#concept-option-disabled title=concept-option-disabled>disabled</a> or if its
  nearest ancestor <code><a href=#the-select-element>select</a></code> element is <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, and false
  otherwise.</p>

  <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
  of the command is true (checked) if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, and
  false otherwise.</p>

  <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
  command depends on its <a href=#command-facet-type title=command-facet-Type>Type</a>. If the command is of <a href=#command-facet-type title=command-facet-Type>Type</a> "radio" then it must <a href=#concept-select-pick title=concept-select-pick>pick</a> the <code><a href=#the-option-element>option</a></code>
  element. Otherwise, it must <a href=#concept-select-toggle title=concept-select-toggle>toggle</a> the <code><a href=#the-option-element>option</a></code>
  element.</p>


  <h5 id=using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <dfn title=command-element><code>command</code></dfn> element to define
  a command</h5>

  <p>A <code><a href=#the-command>command</a></code> element <a href=#concept-command title=concept-command>defines a command</a>.</p>

  <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
  is "radio" if the <code><a href=#the-command>command</a></code>'s <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
  "<code>radio</code>", "checkbox" if the attribute's value is
  "<code>checkbox</code>", and "command" otherwise.</p>

  <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
  the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href=#anonymous-command>anonymous command</a>.</p>

  <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
  is the value of the element's <code title=attr-command-label><a href=#attr-command-label>label</a></code> attribute, if there is one,
  or the empty string if it doesn't.</p>

  <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
  is the string given by the element's <code title=attr-command-title><a href=#attr-command-title>title</a></code> attribute, if any, and the
  empty string if the attribute is absent.</p>

  <p>The <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command
  is the <a href=#absolute-url>absolute URL</a> obtained from <a href=#resolve-a-url title="resolve
  a url">resolving</a> the value of the element's <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code> attribute, relative to the
  element, if it has such an attribute and resolving it is
  successful. Otherwise, there is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command.</p>

  <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
  command is the element's <a href=#assigned-access-key>assigned access key</a>, if
  any.</p>

  <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
  of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
  State</a> of the command is true (disabled) if the element has a
  <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute, and
  false otherwise.</p>

  <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
  of the command is true (checked) if the element has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
  command, if the element has a defined <a href=#activation-behavior>activation
  behavior</a>, is to <a href=#run-synthetic-click-activation-steps>run synthetic click activation
  steps</a> on the element. Otherwise, it is just to <a href=#fire-a-click-event>fire a
  <code title=event-click>click</code> event</a> at the
  element.</p>





  <h5 id=using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.6 </span><dfn title=label-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>

  <p>A <code><a href=#the-label-element>label</a></code> element that has an <a href=#assigned-access-key>assigned access
  key</a> and a <a href=#labeled-control>labeled control</a> and whose
  <a href=#labeled-control>labeled control</a> <a href=#concept-command title=concept-command>defines a
  command</a>, itself <a href=#concept-command title=concept-command>defines a
  command</a>.</p>

  <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
  is "command".</p>

  <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
  the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href=#anonymous-command>anonymous command</a>.</p>

  <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
  is the string given by the element's <code><a href=#textcontent>textContent</a></code> IDL
  attribute.</p>

  <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
  is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
  of the element.</p>

  <p>There is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the
  command.</p>

  <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
  command is the element's <a href=#assigned-access-key>assigned access key</a>.</p>

  <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>,
  <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a>, and
  <a href=#command-facet-action title=command-facet-Action>Action</a> facets of the
  command are the same as the respective facets of the element's
  <a href=#labeled-control>labeled control</a>.</p>

  <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
  of the command is always false. (The command is never checked.)</p>



  <h5 id=using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.7 </span><dfn title=legend-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>

  <p>A <code><a href=#the-legend-element>legend</a></code> element that has an <a href=#assigned-access-key>assigned access
  key</a> and is a child of a <code><a href=#the-fieldset-element>fieldset</a></code> element that
  has a descendant that is not a descendant of the <code><a href=#the-legend-element>legend</a></code>
  element and is neither a <code><a href=#the-label-element>label</a></code> element nor a
  <code><a href=#the-legend-element>legend</a></code> element but that <a href=#concept-command title=concept-command>defines a command</a>, itself <a href=#concept-command title=concept-command>defines a command</a>.</p>

  <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
  is "command".</p>

  <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
  the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href=#anonymous-command>anonymous command</a>.</p>

  <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
  is the string given by the element's <code><a href=#textcontent>textContent</a></code> IDL
  attribute.</p>

  <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
  is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
  of the element.</p>

  <p>There is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the
  command.</p>

  <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
  command is the element's <a href=#assigned-access-key>assigned access key</a>.</p>

  <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>,
  <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a>, and
  <a href=#command-facet-action title=command-facet-Action>Action</a> facets of the
  command are the same as the respective facets of the first element
  in <a href=#tree-order>tree order</a> that is a descendant of the parent of the
  <code><a href=#the-legend-element>legend</a></code> element that <a href=#concept-command title=concept-command>defines a command</a> but is not a
  descendant of the <code><a href=#the-legend-element>legend</a></code> element and is neither a
  <code><a href=#the-label-element>label</a></code> nor a <code><a href=#the-legend-element>legend</a></code> element.</p>

  <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
  of the command is always false. (The command is never checked.)</p>



  <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span><dfn title=accesskey-command>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</dfn></h5>

  <p>An element that has an <a href=#assigned-access-key>assigned access key</a> <a href=#concept-command title=concept-command>defines a command</a>.</p>

  <p>If one of the other sections that define elements that <a href=#concept-command title=concept-command>define commands</a> define that this
  element <a href=#concept-command title=concept-command>defines a command</a>, then
  that section applies to this element, and this section does
  not. Otherwise, this section applies to that element.</p>

  <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
  is "command".</p>

  <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
  the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href=#anonymous-command>anonymous command</a>.</p>

  <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
  depends on the element. If the element is a <a href=#labeled-control>labeled
  control</a>, the <code><a href=#textcontent>textContent</a></code> of the first
  <code><a href=#the-label-element>label</a></code> element in <a href=#tree-order>tree order</a> whose
  <a href=#labeled-control>labeled control</a> is the element in question is the <a href=#command-facet-label title=command-facet-Label>Label</a> (in DOM terms, this is the
  string given by <code><var title="">element</var>.labels[0].textContent</code>). Otherwise, the
  <a href=#command-facet-label title=command-facet-Label>Label</a> is the
  <code><a href=#textcontent>textContent</a></code> of the element itself.</p>

  <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
  is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
  of the element. If the attribute is not present, the <a href=#command-facet-hint title=command-facet-Hint>Hint</a> is the empty string.</p>

  <p>There is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the
  command.</p>

  <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
  command is the element's <a href=#assigned-access-key>assigned access key</a>.</p>

  <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
  of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
  State</a> facet of the command is always false. (The command is
  always enabled.)</p>

  <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
  of the command is always false. (The command is never checked.)</p>

  <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
  command is to run the following steps:</p>

  <ol><li>If the element is <a href=#focusable>focusable</a>, run the
   <a href=#focusing-steps>focusing steps</a> for the element.</li>

   <li>If the element has a defined <a href=#activation-behavior>activation behavior</a>,
   <a href=#run-synthetic-click-activation-steps>run synthetic click activation steps</a> on the
   element.</li>

   <li>Otherwise, if the element does not have a defined
   <a href=#activation-behavior>activation behavior</a>, <a href=#fire-a-click-event>fire a <code title=event-click>click</code> event</a> at the element.</li>

  </ol></div>




  <h4 id=devices><span class=secno>4.11.6 </span>The <dfn><code>device</code></dfn> element</h4>

  <dl class=element><dt>Categories</dt>
   <dd><a href=#flow-content>Flow content</a>.</dd>
   <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   <dd><a href=#interactive-content>Interactive content</a>.</dd>
   <dt>Contexts in which this element may be used:</dt>
   <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href=#global-attributes>Global attributes</a></dd>
   <dd><code title=attr-device-type><a href=#attr-device-type>type</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class=idl>interface <dfn id=htmldeviceelement>HTMLDeviceElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <span title=dom-device-type>type</span>;
  readonly attribute any <span title=dom-device-data>data</span>;
};</pre>
  </dl><p>The <code><a href=#devices>device</a></code> element represents a device selector, to
  allow the user to give the page access to a device, for example a
  video camera.</p>

  <p>The <dfn id=attr-device-type title=attr-device-type><code>type</code></dfn>
  attribute allows the author to specify which kind of device the page
  would like access to. The attribute is an <a href=#enumerated-attribute>enumerated
  attribute</a> with the keywords given in the first column of the
  following table, and their corresponding states given in the cell in
  second column of the same row.</p>

  <p class=XXX>RS232 is only included below to give an idea of where
  we could go with this. <strong>Should we instead just make this only
  useful for audiovisual streams?</strong> Unless there are compelling
  reasons, we probably should not be this generic. So far, the reasons
  aren't that compelling.</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Device description
     <th>Examples
   <tbody><tr><td><dfn id=attr-device-type-keyword-media title=attr-device-type-keyword-media><code>media</code></dfn>
     <td><span title=attr-device-type-media>Media</span>
     <td>Stream of audio and/or video data.
     <td>A webcam.
    <tr><td><dfn id=attr-device-type-keyword-fs title=attr-device-type-keyword-fs><code>fs</code></dfn>
     <td><span title=attr-device-type-fs>File system</span>
     <td>File system.
     <td>A USB-connected media player.
    <tr><td><dfn id=attr-device-type-keyword-rs232 title=attr-device-type-keyword-rs232><code>rs232</code></dfn>
     <td><span title=attr-device-type-rs232>RS232</span>
     <td>RS232 device.
     <td>A serial port.
  </table><p class=XXX>processing model: 'change' event fires once user
  selects a new device; .data is set to new Stream, LocalFS, or RS232
  object as appropriate.</p>

  <div class=example>

   <pre>&lt;p&gt;To start chatting, select a video camera: &lt;device type=media onchange="update(this.data)"&gt;&lt;/p&gt;
&lt;video autoplay&gt;&lt;/video&gt;
&lt;script&gt;
 function update(stream) {
   document.getElementsByTagName('video')[0].src = stream.url;
 }
&lt;/script&gt;</pre>

  </div>


  <h5 id=stream-api><span class=secno>4.11.6.1 </span>Stream API</h5>

  <p>The <code><a href=#stream>Stream</a></code> interface is used to represent
  streams.</p>

  <pre class=idl>interface <dfn id=stream>Stream</dfn> {
  readonly attribute DOMString <a href=#dom-stream-url title=dom-stream-url>url</a>;
  <a href=#streamrecorder>StreamRecorder</a> <a href=#dom-stream-record title=dom-stream-record>record</a>();
};</pre>

  <p>The <dfn id=dom-stream-url title=dom-stream-url><code>url</code></dfn> attribute
  must return a <span title=fileURN>File URN</span> representing the
  stream. <a href=#refsFILEAPI>[FILEAPI]</a></p>

  <p>For audio and video streams, the stream must be in a format
  supported by the user agent for use in <code><a href=#audio>audio</a></code> and
  <code><a href=#video>video</a></code> elements.</p>

  <p class=XXX>This will be pinned down to a specific codec.</p>

  <p>When the <dfn id=dom-stream-record title=dom-stream-record><code>record()</code></dfn> method is
  invoked, the user agent must return a new
  <code><a href=#streamrecorder>StreamRecorder</a></code> object associated with the stream.</p>

  <pre class=idl>interface <dfn id=streamrecorder>StreamRecorder</dfn> {
  <span>File</span> <a href=#dom-streamrecorder-stop title=dom-StreamRecorder-stop>stop</a>();
};</pre>

  <p>The <dfn id=dom-streamrecorder-stop title=dom-StreamRecorder-stop><code>stop()</code></dfn> method
  must return a new <code>File</code> object representing the data
  that was streamed between the creation of the
  <code><a href=#streamrecorder>StreamRecorder</a></code> object and the invocation of the <code title=dom-StreamRecorder-stop><a href=#dom-streamrecorder-stop>stop()</a></code> method. <a href=#refsFILEAPI>[FILEAPI]</a></p>

  <p>For audio and video streams, the file must be in a format
  supported by the user agent for use in <code><a href=#audio>audio</a></code> and
  <code><a href=#video>video</a></code> elements.</p>

  <p class=XXX>This again will be pinned down to a specific codec.</p>


  <h5 id=peer-to-peer-connections><span class=secno>4.11.6.2 </span>Peer-to-peer connections</h5>

  <p class=XXX>This section will be moved to a more appropriate
  location in due course; it is here currently to keep it near the
  <code><a href=#devices>device</a></code> element to allow reviewers to look at it.</p>

  <pre class=idl>[Constructor(in DOMString serverConfiguration)]
interface <dfn id=connectionpeer>ConnectionPeer</dfn> {
  void sendText(in DOMString text);
  attribute <a href=#function>Function</a> ontext; // receiving

  void sendBitmap(in HTMLImageElement image);
  attribute <a href=#function>Function</a> onbitmap; // receiving

  void sendFile(in File file);
  attribute <a href=#function>Function</a> onfile; // receiving

  void addStream(in Stream stream);
  void removeStream(in Stream stream);
  readonly attribute Stream[] localStreams;
  readonly attribute Stream[] remoteStreams;
  attribute <a href=#function>Function</a> onstream; // receiving

  void <span title=dom-ConnectionPeer-getLocalConfiguration>getLocalConfiguration</span>(in <a href=#connectionpeerconfigurationcallback>ConnectionPeerConfigurationCallback</a> callback); // maybe this should be in the constructor
  void <span title=dom-ConnectionPeer-addRemoteConfiguration>addRemoteConfiguration</span>(in DOMString configuration);
  void close(); // disconnects and stops listening

  attribute <a href=#function>Function</a> onconnect;
  attribute <a href=#function>Function</a> onerror;
  attribute <a href=#function>Function</a> ondisconnect;
};

[Callback=FunctionOnly, NoInterfaceObject]
interface <dfn id=connectionpeerconfigurationcallback>ConnectionPeerConfigurationCallback</dfn> {
  void <span title=dom-ConnectionPeerConfigurationCallback-handleEvent>handleEvent</span>(in <a href=#connectionpeer>ConnectionPeer</a> server, in DOMString configuration);
};</pre>

  <p class=XXX>...</p>

  <div class=XXX>

   <p>This relies on some currently hypothetical other standard to
   define:</p>

   <ul><li>The format of server configuration strings.
    <li>The format of client configuration strings.
    <li>The protocols that clients use to talk to third-party servers mentioned in the server configuration strings.
    <li>The protocols that clients use to talk to each other.
   </ul></div>

  <div class=example>

   <p>When two peers decide they are going to set up a connection to
   each other, they both go through these steps. The serverConfig
   comes from a third-party server they can use to get things like
   their public IP address or to set up NAT traversal. They also have
   to send their respective configuration to each other using the same
   out-of-band mechanism they used to establish that they were going
   to communicate in the first place.</p>

   <pre>var serverConfig = ...; // configuration string obtained from server
// contains details such as the IP address of a server that can speak some
// protocol to help the client determine its public IP address, route packets
// if necessary, etc.

var local = new ConnectionPeer(serverConfig);
local.getLocalConfiguration(function (configuration) {
  if (configuration != '') {
    ...; // send configuration to other peer using out-of-band mechanism
  } else {
    // we've exhausted our options; wait for connection
  }
});

function ... (configuration) {
  // called whenever we get configuration information out-of-band
  local.addRemoteConfiguration(configuration);
}

local.onconnect = function (event) {
  // we are connected!
  local.sendText('Hello');
  local.addStream(...); // send video
  local.onstream = function (event) {
    // receive video
    // (videoElement is some &lt;video&gt; element)
    if (local.remoteStreams.length &gt; 0)
      videoElement.src = local.remoteStreams[0].url;
  };
};</pre>

  </div>

  <p class=warning>To prevent network sniffing from allowing a
  fourth party to establish a connection to a peer using the
  information sent out-of-band to the other peer and thus spoofing the
  client, the configuration information should always be transmitted
  using an encrypted connection.</p>






  <h3 id=links><span class=secno>4.12 </span>Links</h3>


  <h4 id=hyperlink-elements><span class=secno>4.12.1 </span>Hyperlink elements</h4>

  <p>The <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, and <code><a href=#the-link-element>link</a></code>
  elements can, in certain situations described in the definitions of
  those elements, represent <dfn id=hyperlink title=hyperlink>hyperlinks</dfn>.</p>

  <p>The <dfn id=attr-hyperlink-href title=attr-hyperlink-href><code>href</code></dfn>
  attribute on <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements must have
  a value that is a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
  spaces</a>. This <a href=#url>URL</a> is the <i>destination
  resource</i> of the hyperlink.</p>

  <p class=note>The <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
  attribute on <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements is not
  required; when those elements do not have <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes they do not
  represent hyperlinks.</p>

  <p class=note>The <code title=attr-link-href><a href=#attr-link-href>href</a></code>
  attribute on the <code><a href=#the-link-element>link</a></code> element <em>is</em> required (and
  has to be a <a href=#valid-non-empty-url>valid <em>non-empty</em> URL</a>), but whether
  a <code><a href=#the-link-element>link</a></code> element represents a hyperlink or not depends on
  the value of the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute of
  that element.</p>

  <p>The <dfn id=attr-hyperlink-target title=attr-hyperlink-target><code>target</code></dfn>
  attribute, if present, must be a <a href=#valid-browsing-context-name-or-keyword>valid browsing context name
  or keyword</a>. It gives the name of the <a href=#browsing-context>browsing
  context</a> that will be used. <span class=impl>User agents use
  this name when <a href=#following-hyperlinks>following hyperlinks</a>.</span></p>

<!--PING-->
  <p>The <dfn id=ping title=attr-hyperlink-ping><code>ping</code></dfn> attribute, if
  present, gives the URLs of the resources that are interested in
  being notified if the user follows the hyperlink. The value must be
  a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a>, each of which must be
  a <a href=#valid-non-empty-url>valid non-empty URL</a>. <span class=impl>The value is
  used by the user agent for <a href=#hyperlink-auditing>hyperlink
  auditing</a>.</span></p>
<!--PING-->

  <p>For <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements that represent
  hyperlinks, the relationship between the document containing the
  hyperlink and the destination resource indicated by the hyperlink is
  given by the value of the element's <dfn id=attr-hyperlink-rel title=attr-hyperlink-rel><code>rel</code></dfn> attribute, which
  must be a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a>. The <a href=#linkTypes>allowed values and their meanings</a> are defined
  below. The <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute has
  no default value. If the attribute is omitted or if none of the
  values in the attribute are recognized by the user agent, then the
  document has no particular relationship with the destination
  resource other than there being a hyperlink between the two.</p>

  <p>The <dfn id=attr-hyperlink-media title=attr-hyperlink-media><code>media</code></dfn>
  attribute describes for which media the target document was
  designed. It is purely advisory. The value must be a <a href=#valid-media-query>valid
  media query</a>. The default, if the <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code> attribute is omitted, is
  "<code title="">all</code>".</p>

  <p>The <dfn id=attr-hyperlink-hreflang title=attr-hyperlink-hreflang><code>hreflang</code></dfn>
  attribute on hyperlink elements, if present, gives the language of
  the linked resource. It is purely advisory. The value must be a
  valid BCP 47 language tag. <a href=#refsBCP47>[BCP47]</a>
  <span class=impl>User agents must not consider this attribute
  authoritative &mdash; upon fetching the resource, user agents must
  use only language information associated with the resource to
  determine its language, not metadata included in the link to the
  resource.</span></p>

  <p>The <dfn id=attr-hyperlink-type title=attr-hyperlink-type><code>type</code></dfn>
  attribute, if present, gives the <a href=#mime-type>MIME type</a> of the
  linked resource. It is purely advisory. The value must be a
  <a href=#valid-mime-type>valid MIME type</a>. <span class=impl>User agents must
  not consider the <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code>
  attribute authoritative &mdash; upon fetching the resource, user
  agents must not use metadata included in the link to the resource to
  determine its type.</span></p>


  <div class=impl>

  <h4 id=following-hyperlinks><span class=secno>4.12.2 </span><dfn>Following hyperlinks</dfn></h4>

  <p>When a user <em>follows a hyperlink</em>, the user agent must
  <a href=#resolve-a-url title="resolve a url">resolve</a> the <a href=#url>URL</a>
  given by the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute
  of that hyperlink, relative to the hyperlink element, and if that is
  successful, must <a href=#navigate>navigate</a> a <a href=#browsing-context>browsing
  context</a> to the resulting <a href=#absolute-url>absolute URL</a>. In the
  case of server-side image maps, the URL of the hyperlink must
  further have its <var><a href=#hyperlink-suffix>hyperlink suffix</a></var> appended to it.</p>

  <p>If <a href=#resolve-a-url title="resolve a url">resolving</a> the
  <a href=#url>URL</a> fails, the user agent may report the error to the
  user in a user-agent-specific manner, may navigate to an error page
  to report the error, or may ignore the error and do nothing.</p>

  <p>If the user indicated a specific <a href=#browsing-context>browsing context</a>
  when following the hyperlink, or if the user agent is configured to
  follow hyperlinks by navigating a particular browsing context, then
  that must be the <a href=#browsing-context>browsing context</a> that is
  navigated.</p>

  <p>Otherwise, if the hyperlink element is an <code><a href=#the-a-element>a</a></code> or
  <code><a href=#the-area-element>area</a></code> element that has a <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute, then the
  <a href=#browsing-context>browsing context</a> that is navigated must be chosen by
  applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for choosing a browsing context given a
  browsing context name</a>, using the value of the <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute as the
  browsing context name. If these rules result in the creation of a
  new <a href=#browsing-context>browsing context</a>, it must be navigated with
  <a href=#replacement-enabled>replacement enabled</a>.</p>

  <p>Otherwise, if the hyperlink element is a <a href=#rel-sidebar-hyperlink title=rel-sidebar-hyperlink>sidebar hyperlink</a> and the user
  agent implements a feature that can be considered a secondary
  browsing context, such a secondary browsing context may be selected
  as the browsing context to be navigated.</p>

  <p>Otherwise, if the hyperlink element is an <code><a href=#the-a-element>a</a></code> or
  <code><a href=#the-area-element>area</a></code> element with no <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute, but one of
  the child nodes of <a href=#the-head-element>the <code>head</code> element</a> is a
  <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute, then the browsing
  context that is navigated must be chosen by applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules
  for choosing a browsing context given a browsing context name</a>,
  using the value of the <code title=attr-base-target><a href=#attr-base-target>target</a></code>
  attribute of the first such <code><a href=#the-base-element>base</a></code> element as the
  browsing context name. If these rules result in the creation of a
  new <a href=#browsing-context>browsing context</a>, it must be navigated with
  <a href=#replacement-enabled>replacement enabled</a>.</p>

  <p>Otherwise, the browsing context that must be navigated is the
  same browsing context as the one which the hyperlink element itself
  is in.</p>

  <p>The navigation must be done with the <a href=#browsing-context>browsing
  context</a> that contains the <code><a href=#document>Document</a></code> object with
  which the hyperlink's element in question is associated as the
  <a href=#source-browsing-context>source browsing context</a>.</p>

  </div>


<!--PING-->
  <div class=impl>

  <h5 id=hyperlink-auditing><span class=secno>4.12.2.1 </span><dfn>Hyperlink auditing</dfn></h5>

  <p>If an <code><a href=#the-a-element>a</a></code> or <code><a href=#the-area-element>area</a></code> hyperlink element has a
  <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute, and the
  user follows the hyperlink, and the hyperlink's <a href=#url>URL</a> can
  be <a href=#resolve-a-url title="resolve a url">resolved</a>, relative to the
  hyperlink element, without failure, then the user agent must take
  the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute's value,
  <a href=#split-a-string-on-spaces title="split a string on spaces">split that string on
  spaces</a>, <a href=#resolve-a-url title="resolve a url">resolve</a> each
  resulting token relative to the hyperlink element, and then should
  send a request (as described below) to each of the resulting <a href=#absolute-url title="absolute URL">absolute URLs</a>. (Tokens that fail to
  resolve are ignored.) This may be done in parallel with the primary
  request, and is independent of the result of that request.</p>

  <p>User agents should allow the user to adjust this behavior, for
  example in conjunction with a setting that disables the sending of
  HTTP <code title=http-referer>Referer</code> (sic) headers. Based
  on the user's preferences, UAs may either <a href=#ignore>ignore</a> the
  <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute altogether,
  or selectively ignore URLs in the list (e.g. ignoring any
  third-party URLs).</p>

  <p>For URLs that are HTTP URLs, the requests must be performed by
  <a href=#fetch title=fetch>fetching</a> the specified URLs using the
  POST method, with an entity body with the <a href=#mime-type>MIME type</a>
  <code><a href=#text/ping>text/ping</a></code> consisting of the four-character string
  "<code title="">PING</code>", from the <a href=#origin>origin</a> of the
  <code><a href=#document>Document</a></code> containing the <a href=#hyperlink>hyperlink</a>. <!--
  not http-origin privacy sensitive --> All relevant cookie and HTTP
  authentication headers must be included in the request. Which other
  headers are required depends on the URLs involved.</p>

  <dl class=switch><dt>If both the <a href="#the-document's-address" title="the document's address">address</a>
   of the <code><a href=#document>Document</a></code> object containing the hyperlink being
   audited and the ping URL have the <a href=#same-origin>same origin</a></dt>

   <dd>The request must include a <code title=http-ping-from><a href=#ping-from>Ping-From</a></code> HTTP header with, as its
   value, the <a href="#the-document's-address" title="the document's address">address</a> of
   the document containing the hyperlink, and a <code title=http-ping-to><a href=#ping-to>Ping-To</a></code> HTTP header with, as its value,
   the address of the <a href=#absolute-url>absolute URL</a> of the target of the
   hyperlink. The request must not include a <code title=http-referer>Referer</code> (sic) HTTP header. <!-- because
   otherwise it would look like a trustable same-origin POST --></dd>

   <dt>Otherwise, if the origins are different, but the document
   containing the hyperlink being audited was not retrieved over an
   encrypted connection</dt>

   <dd>The request must include a <code title=http-referer>Referer</code> (sic) HTTP header with, as its
   value, the <a href="#the-document's-current-address" title="the document's current address">current
   address</a> of the document containing the hyperlink, a <code title=http-ping-from><a href=#ping-from>Ping-From</a></code> HTTP header with the same
   value, and a <code title=http-ping-to><a href=#ping-to>Ping-To</a></code> HTTP header
   with, as its value, the address of the target of the
   hyperlink.</dd>

   <dt>Otherwise, the origins are different and the document
   containing the hyperlink being audited was retrieved over an
   encrypted connection</dt>

   <dd>The request must include a <code title=http-ping-to><a href=#ping-to>Ping-To</a></code> HTTP header with, as its value,
   the address of the target of the hyperlink. The request must
   neither include a <code title=http-referer>Referer</code> (sic)
   HTTP header nor include a <code title=http-ping-from><a href=#ping-from>Ping-From</a></code> HTTP header.</dd>

  </dl><p class=note>To save bandwidth, implementors might also wish to
  consider omitting optional headers such as <code>Accept</code> from
  these requests.</p>

  <p>User agents must, unless otherwise specified by the user, honor
  the HTTP headers (including, in particular, redirects and HTTP
  cookie headers), but must ignore any entity bodies returned in the
  responses. User agents may close the connection prematurely once
  they start receiving an entity body. <a href=#refsCOOKIES>[COOKIES]</a></p>

  <p>For URLs that are not HTTP URLs, the requests must be performed
  by <a href=#fetch title=fetch>fetching</a> the specified URL normally,
  and discarding the results.</p>

  <p>When the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute is
  present, user agents should clearly indicate to the user that
  following the hyperlink will also cause secondary requests to be
  sent in the background, possibly including listing the actual target
  URLs.</p>

  <p class=example>For example, a visual user agent could include
  the hostnames of the target ping URLs along with the hyperlink's
  actual URL in a status bar or tooltip.</p>

  </div>

  <div class=note>

   <p>The <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute is redundant
   with pre-existing technologies like HTTP redirects and JavaScript
   in allowing Web pages to track which off-site links are most
   popular or allowing advertisers to track click-through rates.</p>

   <p>However, the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute
   provides these advantages to the user over those alternatives:</p>

   <ul><li>It allows the user to see the final target URL
    unobscured.</li>

    <li>It allows the UA to inform the user about the out-of-band
    notifications.</li>

    <li>It allows the user to disable the notifications without losing
    the underlying link functionality.</li>

    <li>It allows the UA to optimize the use of available network
    bandwidth so that the target page loads faster.</li>

   </ul><p>Thus, while it is possible to track users without this feature,
   authors are encouraged to use the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute so that the user
   agent can make the user experience more transparent.</p>

  </div>

  <!-- resolving ping urls happens at audit time, so base URL changes
  affect the values of ping attributes -->
<!--PING-->



  <h4 id=linkTypes><span class=secno>4.12.3 </span>Link types</h4>

  <p>The following table summarizes the link types that are defined by
  this specification. This table is non-normative; the actual
  definitions for the link types are given in the next few
  sections.</p>

  <p>In this section, the term <i>referenced document</i> refers to
  the resource identified by the element representing the link, and
  the term <i>current document</i> refers to the resource within
  which the element representing the link finds itself.</p>

  <div class=impl>

  <p>To determine which link types apply to a <code><a href=#the-link-element>link</a></code>,
  <code><a href=#the-a-element>a</a></code>, or <code><a href=#the-area-element>area</a></code> element, the element's <code title="">rel</code> attribute must be <a href=#split-a-string-on-spaces title="split a string on
  spaces">split on spaces</a>. The resulting tokens are the link
  types that apply to that element.</p>

  </div>

  <p>Except where otherwise specified, a keyword must not be specified
  more than once per <code title=attr-rel-hyperlink>rel</code>
  attribute.</p>

  <p>The link types that contain no U+003A COLON characters (:),
  including all those defined in this specification, are <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> values<span class=impl>, and must be
  compared as such</span>.</p>

  <p class=example>Thus, <code title="">rel="next"</code> is the
  same as <code title="">rel="NEXT"</code>.</p>

  <table><thead><tr><th rowspan=2>Link type</th>
     <th colspan=2>Effect on...</th>
     <th rowspan=2>Brief description</th>
    <tr><th><code><a href=#the-link-element>link</a></code></th>
     <th><code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code></th>
    <tbody><tr><td><code title=rel-alternate><a href=#link-type-alternate>alternate</a></code></td> <!-- second most used <link rel> value -->
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Gives alternate representations of the current document.</td>
    <tr><td><code title=rel-archives><a href=#link-type-archives>archives</a></code></td>
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Provides a link to a collection of records, documents, or other materials of historical interest.</td>
    <tr><td><code title=rel-author><a href=#link-type-author>author</a></code></td>
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Gives a link to the current document's author.</td>
    <tr><td><code title=rel-bookmark><a href=#link-type-bookmark>bookmark</a></code></td> <!-- fourth most used <a rel> value -->
     <td><em>not allowed</em></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Gives the permalink for the nearest ancestor section.</td>
    </tr><!-- (commented out on the assumption that rel=contact is really XFN)
    <tr>
     <td><code title="rel-contact">contact</code></td> <!- 8th most used <a rel> value ->
     <td><span title="hyperlink link">Hyperlink</span></td>
     <td><span>Hyperlink</span></td>
     <td>Gives a link to contact information for the current document.</td>
    </tr>
--><tr><td><code title=rel-external><a href=#link-type-external>external</a></code></td> <!-- fifth and sixth most used <a rel> value (sixth is "external nofollow") -->
     <td><em>not allowed</em></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Indicates that the referenced document is not part of the same site as the current document.</td>
    <tr><td><code title=rel-first><a href=#link-type-first>first</a></code></td>
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Indicates that the current document is a part of a series, and that the first document in the series is the referenced document.</td>
    <tr><td><code title=rel-help><a href=#link-type-help>help</a></code></td>
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Provides a link to context-sensitive help.</td>
    <tr><td><code title=rel-icon><a href=#rel-icon>icon</a></code></td> <!-- link rel="shortcut icon" and its ilk are the fourth, sixth, and ninth most used values -->
     <td><a href=#external-resource-link title="external resource link">External Resource</a></td>
     <td><em>not allowed</em></td>
     <td>Imports an icon to represent the current document.</td>
    <tr><td><code title=rel-index><a href=#link-type-index>index</a></code></td> <!-- used more than "top" and "contents" on <link> (though on <a>, "contents" wins) -->
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Gives a link to the document that provides a table of contents or index listing the current document.</td>
    <tr><td><code title=rel-last><a href=#link-type-last>last</a></code></td>
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Indicates that the current document is a part of a series, and that the last document in the series is the referenced document.</td>
    <tr><td><code title=rel-license><a href=#link-type-license>license</a></code></td> <!-- seventh most used <a rel> value -->
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Indicates that the main content of the current document is covered by the copyright license described by the referenced document.</td>
    <tr><td><code title=rel-next><a href=#link-type-next>next</a></code></td>
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.</td>
    <tr><td><code title=rel-nofollow><a href=#link-type-nofollow>nofollow</a></code></td> <!-- most used <a rel> value (and sixth most used is "external nofollow") -->
     <td><em>not allowed</em></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Indicates that the current document's original author or publisher does not endorse the referenced document.</td>
    <tr><td><code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code></td>
     <td><em>not allowed</em></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Requires that the user agent not send an HTTP <code title=http-referer>Referer</code> (sic) header if the user follows the hyperlink.</td>
    <tr><td><code title=rel-pingback><a href=#link-type-pingback>pingback</a></code></td>
     <td><a href=#external-resource-link title="external resource link">External Resource</a></td>
     <td><em>not allowed</em></td>
     <td>Gives the address of the pingback server that handles pingbacks to the current document.</td>
    <tr><td><code title=rel-prefetch><a href=#link-type-prefetch>prefetch</a></code></td>
     <td><a href=#external-resource-link title="external resource link">External Resource</a></td>
     <td><em>not allowed</em></td>
     <td>Specifies that the target resource should be preemptively cached.</td>
    <tr><td><code title=rel-prev><a href=#link-type-prev>prev</a></code></td> <!-- prev is used more than previous -->
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.</td>
    <tr><td><code title=rel-search><a href=#link-type-search>search</a></code></td> <!-- used quite a bit -->
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Gives a link to a resource that can be used to search through the current document and its related pages.</td>
    <tr><td><code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code></td> <!-- most commonly used <link rel> value, variants came in 7th, 8th, 12th, 17th... -->
     <td><a href=#external-resource-link title="external resource link">External Resource</a></td>
     <td><em>not allowed</em></td>
     <td>Imports a stylesheet.</td>
    <tr><td><code title=rel-sidebar><a href=#link-type-sidebar>sidebar</a></code></td> <!-- used quite a bit -->
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).</td>
    <tr><td><code title=rel-tag><a href=#link-type-tag>tag</a></code></td> <!-- second and third most used <a rel> value (third is technically "category tag"). -->
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Gives a tag (identified by the given address) that applies to the current document.</td>
    <tr><td><code title=rel-up><a href=#link-type-up>up</a></code></td>
     <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
     <td><a href=#hyperlink>Hyperlink</a></td>
     <td>Provides a link to a document giving the context for the current document.</td>
    </table><div class=impl>

  <p>Some of the types described below list synonyms for these
  values. These <!--<span class="impl">-->are to be handled as
  specified by user agents, but<!--</span>--> must not be used in
  documents.</p>

  </div>

  <!-- v2 ideas:
   * rel="script"
   * rel="related" // see also
   * http://microformats.org/wiki/rel-enclosure
  -->


  <h5 id=link-type-alternate><span class=secno>4.12.3.1 </span>Link type "<dfn title=rel-alternate><code>alternate</code></dfn>"</h5>

  <p>The <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword may be
  used with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements.</p>

  <p>The meaning of this keyword depends on the values of the other
  attributes.</p>

  <dl class=switch><dt>If the element is a <code><a href=#the-link-element>link</a></code> element and the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute also contains the
   keyword <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code></dt>

   <dd>

    <p>The <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword
    modifies the meaning of the <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword in the way
    described for that keyword. The <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword does not create a
    link of its own.</p>

   </dd>


   <dt>The <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
   used with the <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code>
   attribute set to the value <code title="">application/rss+xml</code> or the value <code title="">application/atom+xml</code></dt>

   <dd>

    <p>The link is a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>
    referencing a syndication feed (though not necessarily syndicating
    exactly the same content as the current page).</p>

    <div class=impl>

    <p>The first <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, or <code><a href=#the-area-element>area</a></code>
    element in the document (in tree order) with the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword used with the <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attribute set to the value
    <code title="">application/rss+xml</code> or the value <code title="">application/atom+xml</code> must be treated as the default
    syndication feed for the purposes of feed autodiscovery.</p>

    <div class=example>
     <p>The following <code><a href=#the-link-element>link</a></code> element gives the syndication
     feed for the current page:</p>
     <pre>&lt;link rel="alternate" type="application/atom+xml" href="data.xml"&gt;</pre>
     <p>The following extract offers various different syndication
     feeds:</p>
     <pre>&lt;p&gt;You can access the planets database using Atom feeds:&lt;/p&gt;
&lt;ul&gt;
 &lt;li&gt;&lt;a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml"&gt;Recently Visited Planets&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml"&gt;Known Bad Planets&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml"&gt;Unexplored Planets&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
    </div>

    </div>

   </dd>


   <dt>Otherwise</dt>

   <dd>

    <p>The link is a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>
    referencing an alternate representation of the current
    document.</p>

    <p>The nature of the referenced document is given by the <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes.</p>

    <p>If the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
    used with the <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>
    attribute, it indicates that the referenced document is intended for
    use with the media specified.</p>

    <p>If the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
    used with the <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>
    attribute, and that attribute's value differs from the <a href=#root-element>root
    element</a>'s <a href=#language>language</a>, it indicates that the
    referenced document is a translation.</p>

    <p>If the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
    used with the <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code>
    attribute, it indicates that the referenced document is a
    reformulation of the current document in the specified format.</p>

    <p>The <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes can be combined
    when specified with the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code>
    keyword.</p>

    <div class=example>

     <p>For example, the following link is a French translation that
     uses the PDF format:</p>

     <pre>&lt;link rel=alternate type=application/pdf hreflang=fr href=manual-fr&gt;</pre>

    </div>

    <p>This relationship is transitive &mdash; that is, if a document
    links to two other documents with the link type "<code title=rel-alternate><a href=#link-type-alternate>alternate</a></code>", then, in addition to
    implying that those documents are alternative representations of
    the first document, it is also implying that those two documents
    are alternative representations of each other.</p>

   </dd>

  </dl><h5 id=link-type-archives><span class=secno>4.12.3.2 </span>Link type "<dfn title=rel-archives><code>archives</code></dfn>"</h5>

  <p>The <code title=rel-archives><a href=#link-type-archives>archives</a></code> keyword may be
  used with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-archives><a href=#link-type-archives>archives</a></code> keyword indicates
  that the referenced document describes a collection of records,
  documents, or other materials of historical interest.</p>

  <p class=example>A blog's index page could link to an index of the
  blog's past posts with <code title="">rel="archives"</code>.</p>

  <div class=impl>

  <p><strong>Synonyms</strong>: For historical reasons, user agents
  must also treat the keyword "<code title="">archive</code>" like the
  <code title=rel-archives><a href=#link-type-archives>archives</a></code> keyword.</p>

  </div>


  <h5 id=link-type-author><span class=secno>4.12.3.3 </span>Link type "<dfn title=rel-author><code>author</code></dfn>"</h5>

  <p>The <code title=rel-author><a href=#link-type-author>author</a></code> keyword may be
  used with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>For <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements, the <code title=rel-author><a href=#link-type-author>author</a></code> keyword indicates that the
  referenced document provides further information about the author of
  the nearest <code><a href=#the-article-element>article</a></code> element ancestor of the element
  defining the hyperlink, if there is one, or of the page as a whole,
  otherwise.</p>

  <p>For <code><a href=#the-link-element>link</a></code> elements, the <code title=rel-author><a href=#link-type-author>author</a></code> keyword indicates that the
  referenced document provides further information about the author
  for the page as a whole.</p>

  <p class=note>The "referenced document" can be, and often is, a
  <code title="">mailto:</code> URL giving the e-mail address of the
  author. <a href=#refsMAILTO>[MAILTO]</a></p>

  <div class=impl>

  <p><strong>Synonyms</strong>: For historical reasons, user agents
  must also treat <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and
  <code><a href=#the-area-element>area</a></code> elements that have a <code title="">rev</code>
  attribute with the value "<code>made</code>" as having the <code title=rel-author><a href=#link-type-author>author</a></code> keyword specified as a link
  relationship.</p>

  </div>


  <h5 id=link-type-bookmark><span class=secno>4.12.3.4 </span>Link type "<dfn title=rel-bookmark><code>bookmark</code></dfn>"</h5>

  <p>The <code title=rel-bookmark><a href=#link-type-bookmark>bookmark</a></code> keyword may be
  used with <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements.</p>

  <p>The <code title=rel-bookmark><a href=#link-type-bookmark>bookmark</a></code> keyword gives a
  permalink for the nearest ancestor <code><a href=#the-article-element>article</a></code> element of
  the linking element in question, or of <a href=#associatedSection>the section the linking element is most
  closely associated with</a>, if there are no ancestor
  <code><a href=#the-article-element>article</a></code> elements.</p>

  <div class=example>
   <p>The following snippet has three permalinks. A user agent could
   determine which permalink applies to which part of the spec by
   looking at where the permalinks are given.</p>
   <pre> ...
 &lt;body&gt;
  &lt;h1&gt;Example of permalinks&lt;/h1&gt;
  &lt;div id="a"&gt;
   &lt;h2&gt;First example&lt;/h2&gt;
   &lt;p&gt;&lt;a href="a.html" rel="bookmark"&gt;This&lt;/a&gt; permalink applies to
   only the content from the first H2 to the second H2. The DIV isn't
   exactly that section, but it roughly corresponds to it.&lt;/p&gt;
  &lt;/div&gt;
  &lt;h2&gt;Second example&lt;/h2&gt;
  &lt;article id="b"&gt;
   &lt;p&gt;&lt;a href="b.html" rel="bookmark"&gt;This&lt;/a&gt; permalink applies to
   the outer ARTICLE element (which could be, e.g., a blog post).&lt;/p&gt;
   &lt;article id="c"&gt;
    &lt;p&gt;&lt;a href="c.html" rel="bookmark"&gt;This&lt;/a&gt; permalink applies to
    the inner ARTICLE element (which could be, e.g., a blog comment).&lt;/p&gt;
   &lt;/article&gt;
  &lt;/article&gt;
 &lt;/body&gt;
 ...</pre>
  </div>

<!-- (commented out on the assumption that rel=contact is really XFN)
  <h5>Link type "<dfn title="rel-contact"><code>contact</code></dfn>"</h5>

  <p>The <code title="rel-contact">contact</code> keyword may be used
  with <code>link</code>, <code>a</code>, and <code>area</code>
  elements. For <code>link</code> elements, it creates a <span
  title="hyperlink link">hyperlink</span>.</p>

  <p>For <code>a</code> and <code>area</code> elements, the <code
  title="rel-contact">contact</code> keyword indicates that the
  referenced document provides further contact information for the
  author of the nearest <code>article</code> element ancestor of the
  element defining the hyperlink, if there is one, or of the page as a
  whole, otherwise.</p>

  <div class="impl">

  <p>User agents must treat any hyperlink in an <code>address</code>
  element as having the <code title="rel-contact">contact</code> link
  type specified.</p>

  </div>

  <p>For <code>link</code> elements, the <code
  title="rel-contact">contact</code> keyword indicates that the
  referenced document provides further contact information for the
  page as a whole.</p>
-->


  <h5 id=link-type-external><span class=secno>4.12.3.5 </span>Link type "<dfn title=rel-external><code>external</code></dfn>"</h5>

  <p>The <code title=rel-external><a href=#link-type-external>external</a></code> keyword may be
  used with <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements.</p>

  <p>The <code title=rel-external><a href=#link-type-external>external</a></code> keyword indicates
  that the link is leading to a document that is not part of the site
  that the current document forms a part of.</p>


  <h5 id=link-type-help><span class=secno>4.12.3.6 </span>Link type "<dfn title=rel-help><code>help</code></dfn>"</h5>

  <p>The <code title=rel-help><a href=#link-type-help>help</a></code> keyword may be used with
  <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>For <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements, the <code title=rel-help><a href=#link-type-help>help</a></code> keyword indicates that the referenced
  document provides further help information for the parent of the
  element defining the hyperlink, and its children.</p>

  <div class=example>

   <p>In the following example, the form control has associated
   context-sensitive help. The user agent could use this information,
   for example, displaying the referenced document if the user presses
   the "Help" or "F1" key.</p>

   <pre> &lt;p&gt;&lt;label&gt; Topic: &lt;input name=topic&gt; &lt;a href="help/topic.html" rel="help"&gt;(Help)&lt;/a&gt;&lt;/label&gt;&lt;/p&gt;</pre>

  </div>

  <p>For <code><a href=#the-link-element>link</a></code> elements, the <code title=rel-help><a href=#link-type-help>help</a></code> keyword indicates that the referenced
  document provides help for the page as a whole.</p>


  <h5 id=rel-icon><span class=secno>4.12.3.7 </span>Link type "<dfn title=rel-icon><code>icon</code></dfn>"</h5>

  <p>The <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword may be used with
  <code><a href=#the-link-element>link</a></code> elements, for which it creates an <a href=#external-resource-link title="external resource link">external resource link</a>.</p>

  <div class=impl>

  <p>The specified resource is an icon representing the page or site,
  and should be used by the user agent when representing the page in
  the user interface.</p>

  </div>

  <p>Icons could be auditory icons, visual icons, or other kinds of
  icons. <span class=impl>If multiple icons are provided, the user
  agent must select the most appropriate icon according to the <code title=attr-link-type><a href=#attr-link-type>type</a></code>, <code title=attr-link-media><a href=#attr-link-media>media</a></code>, and <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attributes. If there are
  multiple equally appropriate icons, user agents must use the last
  one declared in <a href=#tree-order>tree order</a>. If the user agent tries to
  use an icon but that icon is determined, upon closer examination, to
  in fact be inappropriate (e.g. because it uses an unsupported
  format), then the user agent must try the next-most-appropriate icon
  as determined by the attributes.</span></p>

  <div class=impl>

  <p>There is no default type for resources given by the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword. However, for the purposes of
  <a href=#concept-link-type-sniffing>determining the type of the
  resource</a>, user agents must expect the resource to be an image.</p>

  </div>

  <p>The <dfn id=attr-link-sizes title=attr-link-sizes><code>sizes</code></dfn>
  attribute gives the sizes of icons for visual media.</p>

  <p>If specified, the attribute must have a value that is an
  <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>. The
  values must all be either <code title=attr-link-sizes-any><a href=#attr-link-sizes-any>any</a></code> or a value that consists of
  two <a href=#valid-non-negative-integer title="valid non-negative integer">valid non-negative
  integers</a> that do not have a leading U+0030 DIGIT ZERO (0)
  character and that are separated by a single U+0078 LATIN SMALL
  LETTER X character (x).</p>

  <p>The keywords represent icon sizes.</p>

  <div class=impl>

  <p>To parse and process the attribute's value, the user agent must
  first <a href=#split-a-string-on-spaces title="split a string on spaces">split the attribute's
  value on spaces</a>, and must then parse each resulting keyword
  to determine what it represents.</p>

  </div>

  <p>The <dfn id=attr-link-sizes-any title=attr-link-sizes-any><code>any</code></dfn> keyword
  represents that the resource contains a scalable icon, e.g. as
  provided by an SVG image.</p>

  <div class=impl>

  <p>Other keywords must be further parsed as follows to determine
  what they represent:</p>

  <ul><li><p>If the keyword doesn't contain exactly one U+0078 LATIN
   SMALL LETTER X character (x), then this keyword doesn't represent
   anything. Abort these steps for that keyword.</li>

   <li><p>Let <var title="">width string</var> be the string before
   the "<code title="">x</code>".</li>

   <li><p>Let <var title="">height string</var> be the string after the
   "<code title="">x</code>".</li>

   <li><p>If either <var title="">width string</var> or <var title="">height string</var> start with a U+0030 DIGIT ZERO (0)
   character or contain any characters other than characters in the
   range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then this
   keyword doesn't represent anything. Abort these steps for that
   keyword.</li>

   <li><p>Apply the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   integers</a> to <var title="">width string</var> to obtain <var title="">width</var>.</li>

   <li><p>Apply the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   integers</a> to <var title="">height string</var> to obtain <var title="">height</var>.</li>

   <li><p>The keyword represents that the resource contains a bitmap
   icon with a width of <var title="">width</var> device pixels and a
   height of <var title="">height</var> device pixels.</li>

  </ul></div>

  <p>The keywords specified on the <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attribute must not represent
  icon sizes that are not actually available in the linked
  resource.</p>

  <div class=impl>

  <p>If the attribute is not specified, then the user agent must
  assume that the given icon is appropriate, but less appropriate than
  an icon of a known and appropriate size.</p>

  </div>

  <div class=example>

   <p>The following snippet shows the top part of an application with
   several icons.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;lsForums &mdash; Inbox&lt;/title&gt;
  &lt;link rel=icon href=favicon.png sizes="16x16" type="image/png"&gt;
  &lt;link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"&gt;
  &lt;link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"&gt;
  &lt;link rel=icon href=iphone.png sizes="59x60" type="image/png"&gt;
  &lt;link rel=icon href=gnome.svg sizes="any" type="image/svg+xml"&gt;
  &lt;link rel=stylesheet href=lsforums.css&gt;
  &lt;script src=lsforums.js&gt;&lt;/script&gt;
  &lt;meta name=application-name content="lsForums"&gt;
 &lt;/head&gt;
 &lt;body&gt;
  ...</pre>

  </div>


  <h5 id=link-type-license><span class=secno>4.12.3.8 </span>Link type "<dfn title=rel-license><code>license</code></dfn>"</h5>

  <p>The <code title=rel-license><a href=#link-type-license>license</a></code> keyword may be used
  with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-license><a href=#link-type-license>license</a></code> keyword indicates
  that the referenced document provides the copyright license terms
  under which the main content of the current document is
  provided.</p>

  <p>This specification does not specify how to distinguish between
  the main content of a document and content that is not deemed to be
  part of that main content. The distinction should be made clear to
  the user.</p>

  <div class=example>

   <p>Consider a photo sharing site. A page on that site might
   describe and show a photograph, and the page might be marked up as
   follows:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Exampl Pictures: Kissat&lt;/title&gt;
  &lt;link rel="stylesheet" href="/style/default"&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;Kissat&lt;/h1&gt;
  &lt;nav&gt;
   &lt;a href="../"&gt;Return to photo index&lt;/a&gt;
  &lt;/nav&gt;
  &lt;figure&gt;
   &lt;img src="/pix/39627052_fd8dcd98b5.jpg"&gt;
   &lt;figcaption&gt;Kissat&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p&gt;One of them has six toes!&lt;/p&gt;
  &lt;p&gt;&lt;small&gt;&lt;a rel="license" href="http://www.opensource.org/licenses/mit-license.php"&gt;MIT Licensed&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
  &lt;footer&gt;
   &lt;a href="/"&gt;Home&lt;/a&gt; | &lt;a href="../"&gt;Photo index&lt;/a&gt;
   &lt;p&gt;&lt;small&gt;&copy; copyright 2009 Exampl Pictures. All Rights Reserved.&lt;/small&gt;&lt;/p&gt;
  &lt;/footer&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

   <p>In this case the <code title=rel-license><a href=#link-type-license>license</a></code>
   applies to just the photo (the main content of the document), not
   the whole document. In particular not the design of the page
   itself, which is covered by the copyright given at the bottom of
   the document. This could be made clearer in the styling
   (e.g. making the license link prominently positioned near the
   photograph, while having the page copyright in light small text at
   the foot of the page.</p>

  </div>

  <div class=impl>

  <p><strong>Synonyms</strong>: For historical reasons, user agents
  must also treat the keyword "<code title="">copyright</code>" like
  the <code title=rel-license><a href=#link-type-license>license</a></code> keyword.</p>

  </div>


  <h5 id=link-type-nofollow><span class=secno>4.12.3.9 </span>Link type "<dfn title=rel-nofollow><code>nofollow</code></dfn>"</h5>

  <p>The <code title=rel-nofollow><a href=#link-type-nofollow>nofollow</a></code> keyword may be
  used with <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements.</p>

  <p>The <code title=rel-nofollow><a href=#link-type-nofollow>nofollow</a></code> keyword indicates
  that the link is not endorsed by the original author or publisher of
  the page, or that the link to the referenced document was included
  primarily because of a commercial relationship between people
  affiliated with the two pages.</p>


  <h5 id=link-type-noreferrer><span class=secno>4.12.3.10 </span>Link type "<dfn title=rel-noreferrer><code>noreferrer</code></dfn>"</h5>

  <p>The <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword may be
  used with <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements.</p>

  <p>It indicates that no referrer information is to be leaked when
  following the link.</p>

  <div class=impl>

  <p>If a user agent follows a link defined by an <code><a href=#the-a-element>a</a></code> or
  <code><a href=#the-area-element>area</a></code> element that has the <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword, the user agent
  must not include a <code title=http-referer>Referer</code> (sic)
  HTTP header (<a href=#concept-http-equivalent-headers title=concept-http-equivalent-headers>or
  equivalent</a> for other protocols) in the request.</p>

  <p>This keyword also <a href=#noopener>causes the <code title=dom-opener>opener</code> attribute to remain null</a> if the
  hyperlink creates a new <a href=#browsing-context>browsing context</a>.</p>

  </div>

  <!-- v2: Would be nice to apply this to other elements too,
  e.g. letting <img> or CSS or <video> hide the referrer -->


  <h5 id=link-type-pingback><span class=secno>4.12.3.11 </span>Link type "<dfn title=rel-pingback><code>pingback</code></dfn>"</h5>

  <p>The <code title=rel-pingback><a href=#link-type-pingback>pingback</a></code> keyword may be
  used with <code><a href=#the-link-element>link</a></code> elements, for which it creates an <a href=#external-resource-link title="external resource link">external resource link</a>.</p>

  <p>For the semantics of the <code title=rel-pingback><a href=#link-type-pingback>pingback</a></code> keyword, see the Pingback 1.0
  specification. <a href=#refsPINGBACK>[PINGBACK]</a></p>


  <h5 id=link-type-prefetch><span class=secno>4.12.3.12 </span>Link type "<dfn title=rel-prefetch><code>prefetch</code></dfn>"</h5>

  <p>The <code title=rel-prefetch><a href=#link-type-prefetch>prefetch</a></code> keyword may be
  used with <code><a href=#the-link-element>link</a></code> elements, for which it creates an <a href=#external-resource-link title="external resource link">external resource link</a>.</p>

  <p>The <code title=rel-prefetch><a href=#link-type-prefetch>prefetch</a></code> keyword indicates
  that preemptively fetching and caching the specified resource is
  likely to be beneficial, as it is highly likely that the user will
  require this resource.</p>

  <p>There is no default type for resources given by the <code title=rel-prefetch><a href=#link-type-prefetch>prefetch</a></code> keyword.</p>


  <h5 id=link-type-search><span class=secno>4.12.3.13 </span>Link type "<dfn title=rel-search><code>search</code></dfn>"</h5>

  <p>The <code title=rel-search><a href=#link-type-search>search</a></code> keyword may be used
  with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-search><a href=#link-type-search>search</a></code> keyword indicates that
  the referenced document provides an interface specifically for
  searching the document and its related resources.</p>

  <p class=note>OpenSearch description documents can be used with
  <code><a href=#the-link-element>link</a></code> elements and the <code title=rel-search><a href=#link-type-search>search</a></code> link type to enable user agents to
  autodiscover search interfaces. <a href=#refsOPENSEARCH>[OPENSEARCH]</a></p>


  <h5 id=link-type-stylesheet><span class=secno>4.12.3.14 </span>Link type "<dfn title=rel-stylesheet><code>stylesheet</code></dfn>"</h5>

  <p>The <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword may be
  used with <code><a href=#the-link-element>link</a></code> elements, for which it creates an <a href=#external-resource-link title="external resource link">external resource link</a> that
  contributes to the <a href=#styling>styling processing model</a>.</p>

  <p>The specified resource is a resource that describes how to
  present the document. Exactly how the resource is to be processed
  depends on the actual type of the resource.</p>

  <p>If the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
  also specified on the <code><a href=#the-link-element>link</a></code> element, then <dfn id=the-link-is-an-alternative-stylesheet>the link
  is an alternative stylesheet</dfn>; in this case, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute must be specified on the
  <code><a href=#the-link-element>link</a></code> element, with a non-empty value.</p>

  <p>The default type for resources given by the <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword is <code title="">text/css</code>.</p>

  <div class=impl>

  <p><strong>Quirk</strong>: If the document has been set to
  <a href=#quirks-mode>quirks mode</a> and the <a href=#content-type title=Content-Type>Content-Type metadata</a> of the external
  resource is not a supported style sheet type, the user agent must
  instead assume it to be <code title="">text/css</code>.</p>

  </div>


  <h5 id=link-type-sidebar><span class=secno>4.12.3.15 </span>Link type "<dfn title=rel-sidebar><code>sidebar</code></dfn>"</h5>

  <p>The <code title=rel-sidebar><a href=#link-type-sidebar>sidebar</a></code> keyword may be used
  with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-sidebar><a href=#link-type-sidebar>sidebar</a></code> keyword indicates
  that the referenced document, if retrieved, is intended to be shown
  in a <a href=#secondary-browsing-context>secondary browsing context</a> (if possible), instead
  of in the current <a href=#browsing-context>browsing context</a>.</p>

  <p>A <a href=#hyperlink title=hyperlink>hyperlink element</a> with the <code title=rel-sidebar><a href=#link-type-sidebar>sidebar</a></code> keyword specified is a <dfn id=rel-sidebar-hyperlink title=rel-sidebar-hyperlink>sidebar hyperlink</dfn>.</p>


  <h5 id=link-type-tag><span class=secno>4.12.3.16 </span>Link type "<dfn title=rel-tag><code>tag</code></dfn>"</h5>

  <p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> keyword may be used
  with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> keyword indicates that the
  <em>tag</em> that the referenced document represents applies to the
  current document.</p>

  <p class=note>Since it indicates that the tag <em>applies to the
  current document</em>, it would be inappropriate to use this keyword
  in the markup of a <a href=#tag-cloud>tag cloud</a>, which lists
  the popular tag across a set of pages.</p>


  <h5 id=hierarchical-link-types><span class=secno>4.12.3.17 </span>Hierarchical link types</h5>

  <p>Some documents form part of a hierarchical structure of
  documents.</p>

  <p>A hierarchical structure of documents is one where each document
  can have various subdocuments. The document of which a document is a
  subdocument is said to be the document's <em>parent</em>. A document
  with no parent forms the top of the hierarchy.</p>

  <p>A document may be part of multiple hierarchies.</p>


  <h6 id=link-type-index><span class=secno>4.12.3.17.1 </span>Link type "<dfn title=rel-index><code>index</code></dfn>"</h6>

  <p>The <code title=rel-index><a href=#link-type-index>index</a></code> keyword may be used with
  <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-index><a href=#link-type-index>index</a></code> keyword indicates that
  the document is part of a hierarchical structure, and that the link
  is leading to the document that is the top of the hierarchy. It
  conveys more information when used with the <code title=rel-up><a href=#link-type-up>up</a></code> keyword (q.v.).</p>

  <div class=impl>

  <p><strong>Synonyms</strong>: For historical reasons, user agents
  must also treat the keywords "<code title="">top</code>", "<code title="">contents</code>", and "<code title="">toc</code>" like the
  <code title=rel-index><a href=#link-type-index>index</a></code> keyword.</p>

  </div>


  <h6 id=link-type-up><span class=secno>4.12.3.17.2 </span>Link type "<dfn title=rel-up><code>up</code></dfn>"</h6>

  <p>The <code title=rel-up><a href=#link-type-up>up</a></code> keyword may be used with
  <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-up><a href=#link-type-up>up</a></code> keyword indicates that the
  document is part of a hierarchical structure, and that the link is
  leading to a document that is an ancestor of the current
  document.</p>

  <p>The <code title=rel-up><a href=#link-type-up>up</a></code> keyword may be repeated within
  a <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute to indicate
  the hierarchical distance from the current document to the
  referenced document. If it occurs only once, then the link is
  leading to the current document's parent; each additional occurrence
  of the keyword represents one further level. If the <code title=rel-index><a href=#link-type-index>index</a></code> keyword is also present, then the
  number of <code title=rel-up><a href=#link-type-up>up</a></code> keywords is the depth of
  the current page relative to the top of the hierarchy. Only one link
  is created for the set of one or more <code title=rel-up><a href=#link-type-up>up</a></code>
  keywords and, if present, the <code title=rel-index><a href=#link-type-index>index</a></code>
  keyword.</p>

  <p>If the page is part of multiple hierarchies, then they should be
  described in different <a href=#paragraph title=paragraph>paragraphs</a>. <span class=impl>User agents
  must scope any interpretation of the <code title=rel-up><a href=#link-type-up>up</a></code>
  and <code title=rel-index><a href=#link-type-index>index</a></code> keywords together
  indicating the depth of the hierarchy to the <a href=#paragraph>paragraph</a>
  in which the link finds itself, if any, or to the document
  otherwise.</span></p>

  <div class=impl>

  <p>When two links have both the <code title=rel-up><a href=#link-type-up>up</a></code> and
  <code title=rel-index><a href=#link-type-index>index</a></code> keywords specified together in
  the same scope and contradict each other by having a different
  number of <code title=rel-up><a href=#link-type-up>up</a></code> keywords, the link with the
  greater number of <code title=rel-up><a href=#link-type-up>up</a></code> keywords must be
  taken as giving the depth of the document.</p>

  </div>

  <div class=example>

   <p>This can be used to mark up a navigation style sometimes known
   as bread crumbs. In the following example, the current page can be
   reached via two paths.</p>

   <pre>&lt;nav&gt;
 &lt;p&gt;
  &lt;a href="/" rel="index up up up"&gt;Main&lt;/a&gt; &gt;
  &lt;a href="/products/" rel="up up"&gt;Products&lt;/a&gt; &gt;
  &lt;a href="/products/dishwashers/" rel="up"&gt;Dishwashers&lt;/a&gt; &gt;
  &lt;a&gt;Second hand&lt;/a&gt;
 &lt;/p&gt;
 &lt;p&gt;
  &lt;a href="/" rel="index up up"&gt;Main&lt;/a&gt; &gt;
  &lt;a href="/second-hand/" rel="up"&gt;Second hand&lt;/a&gt; &gt;
  &lt;a&gt;Dishwashers&lt;/a&gt;
 &lt;/p&gt;
&lt;/nav&gt;</pre>

  </div>

  <p class=note>The <code title=dom-a-relList><a href=#dom-a-rellist>relList</a></code> IDL
  attribute (e.g. on the <code><a href=#the-a-element>a</a></code> element) does not currently
  represent multiple <code title=rel-up><a href=#link-type-up>up</a></code> keywords (the
  interface hides duplicates).</p>


  <h5 id=sequential-link-types><span class=secno>4.12.3.18 </span>Sequential link types</h5>

  <p>Some documents form part of a sequence of documents.</p>

  <p>A sequence of documents is one where each document can have a
  <em>previous sibling</em> and a <em>next sibling</em>. A document
  with no previous sibling is the start of its sequence, a document
  with no next sibling is the end of its sequence.</p>

  <p>A document may be part of multiple sequences.</p>


  <h6 id=link-type-first><span class=secno>4.12.3.18.1 </span>Link type "<dfn title=rel-first><code>first</code></dfn>"</h6>

  <p>The <code title=rel-first><a href=#link-type-first>first</a></code> keyword may be used with
  <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-first><a href=#link-type-first>first</a></code> keyword indicates that
  the document is part of a sequence, and that the link is leading to
  the document that is the first logical document in the sequence.</p>

  <div class=impl>

  <p><strong>Synonyms</strong>: For historical reasons, user agents
  must also treat the keywords "<code title="">begin</code>" and
  "<code title="">start</code>" like the <code title=rel-first><a href=#link-type-first>first</a></code> keyword.</p>

  </div>


  <h6 id=link-type-last><span class=secno>4.12.3.18.2 </span>Link type "<dfn title=rel-last><code>last</code></dfn>"</h6>

  <p>The <code title=rel-last><a href=#link-type-last>last</a></code> keyword may be used with
  <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-last><a href=#link-type-last>last</a></code> keyword indicates that the
  document is part of a sequence, and that the link is leading to the
  document that is the last logical document in the sequence.</p>

  <div class=impl>

  <p><strong>Synonyms</strong>: For historical reasons, user agents
  must also treat the keyword "<code title="">end</code>" like the
  <code title=rel-last><a href=#link-type-last>last</a></code> keyword.</p>

  </div>


  <h6 id=link-type-next><span class=secno>4.12.3.18.3 </span>Link type "<dfn title=rel-next><code>next</code></dfn>"</h6>

  <p>The <code title=rel-next><a href=#link-type-next>next</a></code> keyword may be used with
  <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-next><a href=#link-type-next>next</a></code> keyword indicates that the
  document is part of a sequence, and that the link is leading to the
  document that is the next logical document in the sequence.</p>


  <h6 id=link-type-prev><span class=secno>4.12.3.18.4 </span>Link type "<dfn title=rel-prev><code>prev</code></dfn>"</h6>

  <p>The <code title=rel-prev><a href=#link-type-prev>prev</a></code> keyword may be used with
  <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
  elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>

  <p>The <code title=rel-prev><a href=#link-type-prev>prev</a></code> keyword indicates that the
  document is part of a sequence, and that the link is leading to the
  document that is the previous logical document in the sequence.</p>

  <div class=impl>

  <p><strong>Synonyms</strong>: For historical reasons, user agents
  must also treat the keyword "<code title="">previous</code>" like
  the <code title=rel-prev><a href=#link-type-prev>prev</a></code> keyword.</p>

  </div>


  <h5 id=other-link-types><span class=secno>4.12.3.19 </span>Other link types</h5>

  <p><dfn id=concept-rel-extensions title=concept-rel-extensions>Extensions to the predefined
  set of link types</dfn> may be registered in the <a href=http://wiki.whatwg.org/wiki/RelExtensions>WHATWG Wiki
  RelExtensions page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>

  <p>Anyone is free to edit the WHATWG Wiki RelExtensions page at any
  time to add a type. Extension types must be specified with the
  following information:</p>

  <dl><dt>Keyword</dt>

   <dd>

    <p>The actual value being defined. The value should not be
    confusingly similar to any other defined value (e.g. differing
    only in case).</p>

    <p>If the value contains a U+003A COLON character (:), it must
    also be an <a href=#absolute-url>absolute URL</a>.</p>

   </dd>


   <dt>Effect on... <code><a href=#the-link-element>link</a></code></dt>

   <dd>

    <p>One of the following:</p>

    <dl><dt>not allowed</dt>

     <dd>The keyword is not allowed to be specified on
     <code><a href=#the-link-element>link</a></code> elements.</dd>

     <dt>Hyperlink</dt>

     <dd>The keyword may be specified on a <code><a href=#the-link-element>link</a></code> element;
     it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink
     link</a>.</dd>

     <dt>External Resource</dt>

     <dd>The keyword may be specified on a <code><a href=#the-link-element>link</a></code> element;
     it creates a <a href=#external-resource-link title="external resource link">external
     resource link</a>.</dd>

    </dl></dd>


   <dt>Effect on... <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code></dt>

   <dd>

    <p>One of the following:</p>

    <dl><dt>not allowed</dt>

     <dd>The keyword is not allowed to be specified on <code><a href=#the-a-element>a</a></code>
     and <code><a href=#the-area-element>area</a></code> elements.</dd>

     <dt>Hyperlink</dt>

     <dd>The keyword may be specified on <code><a href=#the-a-element>a</a></code> and
     <code><a href=#the-area-element>area</a></code> elements.</dd>

    </dl></dd>


   <dt>Brief description</dt>

   <dd><p>A short non-normative description of what the keyword's
   meaning is.</dd>


   <dt>Specification</dt>

   <dd><p>A link to a more detailed description of the keyword's
   semantics and requirements. It could be another page on the Wiki,
   or a link to an external page.</dd>


   <dt>Synonyms</dt>

   <dd><p>A list of other keyword values that have exactly the same
   processing requirements. Authors should not use the values defined
   to be synonyms, they are only intended to allow user agents to
   support legacy content. Anyone may remove synonyms that are not
   used in practice; only names that need to be processed as synonyms
   for compatibility with legacy content are to be registered in this
   way.</dd>


   <dt>Status</dt>

   <dd>

    <p>One of the following:</p>

    <dl><dt>Proposed</dt>

     <dd>The keyword has not received wide peer review and
     approval. Someone has proposed it and is, or soon will be, using
     it.</dd>

     <dt>Ratified</dt>

     <dd>The keyword has received wide peer review and approval. It
     has a specification that unambiguously defines how to handle
     pages that use the keyword, including when they use it in
     incorrect ways.</dd>

     <dt>Discontinued</dt>

     <dd>The keyword has received wide peer review and it has been
     found wanting. Existing pages are using this keyword, but new
     pages should avoid it. The "brief description" and
     "specification" entries will give details of what authors should
     use instead, if anything.</dd>

    </dl><p>If a keyword is found to be redundant with existing values, it
    should be removed and listed as a synonym for the existing
    value.</p>

    <p>If a keyword is registered in the "proposed" state for a
    period of a month or more without being used or specified, then it
    may be removed from the registry.</p>

    <p>If a keyword is added with the "proposed" status and found to
    be redundant with existing values, it should be removed and listed
    as a synonym for the existing value. If a keyword is added with
    the "proposed" status and found to be harmful, then it should be
    changed to "discontinued" status.</p>

    <p>Anyone can change the status at any time, but should only do so
    in accordance with the definitions above.</p>

   </dd>

  </dl><div class=impl>

  <p>Conformance checkers must use the information given on the WHATWG
  Wiki RelExtensions page to establish if a value is allowed or not:
  values defined in this specification or marked as "proposed" or
  "ratified" must be accepted when used on the elements for which they
  apply as described in the "Effect on..." field, whereas values
  marked as "discontinued" or not listed in either this specification
  or on the aforementioned page must be rejected as invalid.
  Conformance checkers may cache this information (e.g. for
  performance reasons or to avoid the use of unreliable network
  connectivity).</p>

  <p>When an author uses a new type not defined by either this
  specification or the Wiki page, conformance checkers should offer to
  add the value to the Wiki, with the details described above, with
  the "proposed" status.</p>

  </div>

  <p>Types defined as extensions in the <a href=http://wiki.whatwg.org/wiki/RelExtensions>WHATWG Wiki
  RelExtensions page</a> with the status "proposed" or "ratified" may
  be used with the <code title="">rel</code> attribute on
  <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code> elements in
  accordance to the "Effect on..." field. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>


  <h3 id=common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</h3>

  <h4 id=tag-clouds><span class=secno>4.13.1 </span>Tag clouds</h4>

  <p id=tag-cloud>This specification does not define any markup
  specifically for marking up lists of keywords that apply to a group
  of pages (also known as <i>tag clouds</i>). In general, authors are
  encouraged to either mark up such lists using <code><a href=#the-ul-element>ul</a></code>
  elements with explicit inline counts that are then hidden and turned
  into a presentational effect using a style sheet, or to use SVG.</p>

  <div class=example>

   <p>Here, three tags are included in a short tag cloud:</p>

   <pre>&lt;style&gt;
@media screen, print, handheld, tv {
  /* should be ignored by non-visual browsers */
  .tag-cloud &gt; li &gt; span { display: none; }
  .tag-cloud &gt; li { display: inline; }
  .tag-cloud-1 { font-size: 0.7em; }
  .tag-cloud-2 { font-size: 0.9em; }
  .tag-cloud-3 { font-size: 1.1em; }
  .tag-cloud-4 { font-size: 1.3em; }
  .tag-cloud-5 { font-size: 1.5em; }
}
&lt;/style&gt;
...
&lt;ul class="tag-cloud"&gt;
 &lt;li class="tag-cloud-4"&gt;&lt;a title="28 instances" href="/t/apple"&gt;apple&lt;/a&gt; &lt;span&gt;(popular)&lt;/span&gt;
 &lt;li class="tag-cloud-2"&gt;&lt;a title="6 instances"  href="/t/kiwi"&gt;kiwi&lt;/a&gt; &lt;span&gt;(rare)&lt;/span&gt;
 &lt;li class="tag-cloud-5"&gt;&lt;a title="41 instances" href="/t/pear"&gt;pear&lt;/a&gt; &lt;span&gt;(very popular)&lt;/span&gt;
&lt;/ul&gt;</pre>

   <p>The actual frequency of each tag is given using the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute. A CSS style sheet is
   provided to convert the markup into a cloud of differently-sized
   words, but for user agents that do not support CSS or are not
   visual, the markup contains annotations like "(popular)" or
   "(rare)" to categorize the various tags by frequency, thus enabling
   all users to benefit from the information.</p>

   <p>The <code><a href=#the-ul-element>ul</a></code> element is used (rather than
   <code><a href=#the-ol-element>ol</a></code>) because the order is not particularly important:
   while the list is in fact ordered alphabetically, it would convey
   the same information if ordered by, say, the length of the tag.</p>

   <p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>-keyword is <em>not</em> used
   on these <code><a href=#the-a-element>a</a></code> elements because they do not represent tags
   that apply to the page itself; they are just part of an index
   listing the tags themselves.</p>

  </div>


  <h4 id=conversations><span class=secno>4.13.2 </span>Conversations</h4>

  <!-- http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-September/022576.html -->

  <p>This specification does not define a specific element for marking
  up conversations, meeting minutes, chat transcripts, dialogues in
  screenplays, instant message logs, and other situations where
  different players take turns in discourse.</p>

  <p>Instead, authors are encouraged to mark up conversations using
  <code><a href=#the-p-element>p</a></code> elements and punctuation. Authors who need to mark
  the speaker for styling purposes are encouraged to use
  <code><a href=#the-span-element>span</a></code> or <code><a href=#the-b-element>b</a></code>. Paragraphs with their text
  wrapped in the <code><a href=#the-i-element>i</a></code> element can be used for marking up
  stage directions.</p>

  <div class=example>

   <p>This example demonstrates this using an extract from Abbot and
   Costello's famous sketch, <cite>Who's on first</cite>:</p>

<pre>&lt;p&gt; Costello: Look, you gotta first baseman?
&lt;p&gt; Abbott: Certainly.
&lt;p&gt; Costello: Who's playing first?
&lt;p&gt; Abbott: That's right.
&lt;p&gt; Costello becomes exasperated.
&lt;p&gt; Costello: When you pay off the first baseman every month, who gets the money?
&lt;p&gt; Abbott: Every dollar of it.</pre>

  </div>

  <div class=example>

   <p>The following extract shows how an IM conversation log could be
   marked up.</p>

   <pre>&lt;p&gt; &lt;time&gt;14:22&lt;/time&gt; &lt;b&gt;egof&lt;/b&gt; I'm not that nerdy, I've only seen 30% of the star trek episodes
&lt;p&gt; &lt;time&gt;14:23&lt;/time&gt; &lt;b&gt;kaj&lt;/b&gt; if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
&lt;p&gt; &lt;time&gt;14:23&lt;/time&gt; &lt;b&gt;egof&lt;/b&gt; it's unarguably
&lt;p&gt; &lt;time&gt;14:23&lt;/time&gt; &lt;i&gt;* kaj blinks&lt;/i&gt;
&lt;p&gt; &lt;time&gt;14:24&lt;/time&gt; &lt;b&gt;kaj&lt;/b&gt; you are not helping your case</pre>
   <!-- with thanks to http://bash.org/?854262 -->

  </div>


  <h4 id=footnotes><span class=secno>4.13.3 </span>Footnotes</h4>

  <p>HTML does not have a dedicated mechanism for marking up
  footnotes. Here are the recommended alternatives.</p>

  <hr><p>For short inline annotations, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute should be used.</p>

  <div class=example>

   <p>In this example, two parts of a dialogue are annotated with
   footnote-like content using the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute.</p>

   <pre>&lt;p&gt; &lt;b&gt;Customer&lt;/b&gt;: Hello! I wish to register a complaint. Hello. Miss?
&lt;p&gt; &lt;b&gt;Shopkeeper&lt;/b&gt;: <strong>&lt;span title="Colloquial pronunciation of 'What do you'"</strong>
&gt;Watcha&lt;/span&gt; mean, miss?
&lt;p&gt; &lt;b&gt;Customer&lt;/b&gt;: Uh, I'm sorry, I have a cold. I wish to make a complaint.
&lt;p&gt; &lt;b&gt;Shopkeeper&lt;/b&gt;: Sorry, &lt;span <strong>title="This is, of course, a lie."</strong>&gt;we're
closing for lunch&lt;/span&gt;.</pre>

  </div>

  <hr><p>For longer annotations, the <code><a href=#the-a-element>a</a></code> element should be
  used, pointing to an element later in the document. The convention
  is that the contents of the link be a number in square brackets.</p>

  <div class=example>

   <p>In this example, a footnote in the dialogue links to a paragraph
   below the dialogue. The paragraph then reciprocally links back to the
   dialogue, allowing the user to return to the location of the
   footnote.</p>

   <pre>&lt;p&gt; Announcer: Number 16: The &lt;i&gt;hand&lt;/i&gt;.
&lt;p&gt; Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why &lt;em&gt;do&lt;/em&gt; you
contradict people?
&lt;p&gt; Norman: I don't. &lt;sup&gt;&lt;a href="#fn1" id="r1"&gt;[1]&lt;/a&gt;&lt;/sup&gt;
&lt;p&gt; Interviewer: You told me you did!
<em>...</em>
&lt;section&gt;
 &lt;p id="fn1"&gt;&lt;a href="#r1"&gt;[1]&lt;/a&gt; This is, naturally, a lie,
 but paradoxically if it were true he could not say so without
 contradicting the interviewer and thus making it false.&lt;/p&gt;
&lt;/section&gt;</pre>

  </div>

  <hr><p>For side notes, longer annotations that apply to entire sections
  of the text rather than just specific words or sentences, the
  <code><a href=#the-aside-element>aside</a></code> element should be used.</p>

  <div class=example>

   <p>In this example, a sidebar is given after a dialogue, giving it
   some context.</p>

   <pre>&lt;p&gt; &lt;span class="speaker"&gt;Customer&lt;/span&gt;: I will not buy this record, it is scratched.
&lt;p&gt; &lt;span class="speaker"&gt;Shopkeeper&lt;/span&gt;: I'm sorry?
&lt;p&gt; &lt;span class="speaker"&gt;Customer&lt;/span&gt;: I will not buy this record, it is scratched.
&lt;p&gt; &lt;span class="speaker"&gt;Shopkeeper&lt;/span&gt;: No no no, this's'a tobacconist's.
&lt;aside&gt;
 &lt;p&gt;In 1970, the British Empire lay in ruins, and foreign
 nationalists frequented the streets &mdash; many of them Hungarians
 (not the streets &mdash; the foreign nationals). Sadly, Alexander
 Yalt has been publishing incompetently-written phrase books.
&lt;/aside&gt;</pre>

  </div>

  <hr><p>For figures or tables, footnotes can be included in the relevant
  <code><a href=#the-figcaption-element>figcaption</a></code> or <code><a href=#the-caption-element>caption</a></code> element, or in
  surrounding prose.</p>

  <div class=example>

   <p>In this example, a <!-- round --> table has cells with footnotes
   that are given in prose. A <code><a href=#the-figure-element>figure</a></code> element is used to
   give a single legend to the combination of the table and its
   footnotes.</p>

   <pre>&lt;figure&gt;
 &lt;figcaption&gt;Table 1. Alternative activities for knights.&lt;/figcaption&gt;
 &lt;table&gt;
  &lt;tr&gt;
   &lt;th&gt; Activity
   &lt;th&gt; Location
   &lt;th&gt; Cost
  &lt;tr&gt;
   &lt;td&gt; Dance
   &lt;td&gt; Wherever possible
   &lt;td&gt; &pound;0&lt;sup&gt;&lt;a href="#fn1"&gt;1&lt;/a&gt;&lt;/sup&gt;
  &lt;tr&gt;
   &lt;td&gt; Routines, chorus scenes&lt;sup&gt;&lt;a href="#fn2"&gt;2&lt;/a&gt;&lt;/sup&gt;
   &lt;td&gt; Undisclosed
   &lt;td&gt; Undisclosed
  &lt;tr&gt;
   &lt;td&gt; Dining&lt;sup&gt;&lt;a href="#fn3"&gt;3&lt;/a&gt;&lt;/sup&gt;
   &lt;td&gt; Camelot
   &lt;td&gt; Cost of ham, jam, and spam&lt;sup&gt;&lt;a href="#fn4"&gt;4&lt;/a&gt;&lt;/sup&gt;
 &lt;/table&gt;
 &lt;p id="fn1"&gt;1. Assumed.&lt;/p&gt;
 &lt;p id="fn2"&gt;2. Footwork impeccable.&lt;/p&gt;
 &lt;p id="fn3"&gt;3. Quality described as "well".&lt;/p&gt;
 &lt;p id="fn4"&gt;4. A lot.&lt;/p&gt;
&lt;/figure&gt;</pre>

  </div>



  <div class=impl>

  <h3 id=matching-html-elements-using-selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</h3>

  <h4 id=selectors><span class=secno>4.14.1 </span>Case-sensitivity</h4>

  <p>Attribute and element <em>names</em> of <a href=#html-elements>HTML
  elements</a> in <a href=#html-documents>HTML documents</a> must be treated as
  <a href=#ascii-case-insensitive>ASCII case-insensitive</a>.</p>

  <p>Classes from the <code title=attr-class><a href=#classes>class</a></code> attribute
  of <a href=#html-elements>HTML elements</a> in documents that are in <a href=#quirks-mode>quirks
  mode</a> must be treated as <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a>.</p>

  <p>Attribute selectors on an <a href=#html-elements title="HTML elements">HTML
  element</a> in an <a href=#html-documents title="HTML documents">HTML
  document</a> must treat the <em>values</em> of attributes with
  the following names as <a href=#ascii-case-insensitive>ASCII case-insensitive</a>:</p>

  <!-- based on Mozilla's list, which was itself based on HTML4 -->
  <!-- WebKit's was identical at the time of writing except as noted below -->
  <ul class=brief><li><code title="">accept</code>
   <li><code title="">accept-charset</code>
   <li><code title="">align</code>
   <li><code title="">alink</code>
   <li><code title="">axis</code>
   <li><code title="">bgcolor</code>
   <li><code title="">charset</code>
   <li><code title="">checked</code>
   <li><code title="">clear</code>
   <li><code title="">codetype</code>
   <li><code title="">color</code>
   <li><code title="">compact</code>
   <li><code title="">declare</code>
   <li><code title="">defer</code>
   <li><code title="">dir</code>
   <li><code title="">direction</code> <!-- not in webkit -->
   <li><code title="">disabled</code>
   <li><code title="">enctype</code>
   <li><code title="">face</code>
   <li><code title="">frame</code>
   <li><code title="">hreflang</code>
   <li><code title="">http-equiv</code>
   <li><code title="">lang</code>
   <li><code title="">language</code>
   <li><code title="">link</code>
   <li><code title="">media</code>
   <li><code title="">method</code>
   <li><code title="">multiple</code>
   <li><code title="">nohref</code>
   <li><code title="">noresize</code>
   <li><code title="">noshade</code>
   <li><code title="">nowrap</code>
   <li><code title="">readonly</code>
   <li><code title="">rel</code>
   <li><code title="">rev</code>
   <li><code title="">rules</code>
   <li><code title="">scope</code>
   <li><code title="">scrolling</code>
   <li><code title="">selected</code>
   <li><code title="">shape</code>
   <li><code title="">target</code>
   <li><code title="">text</code>
   <li><code title="">type</code>
   <li><code title="">valign</code>
   <li><code title="">valuetype</code>
   <li><code title="">vlink</code>
  </ul><p>All other attribute values on <a href=#html-elements>HTML elements</a> must be
  treated as <a href=#case-sensitive>case-sensitive</a>.</p>


  <h4 id=pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</h4>

  <p>There are a number of dynamic selectors that can be used with
  HTML. This section defines when these selectors match HTML
  elements.</p>

  <dl><dt><dfn id=selector-link title=selector-link><code>:link</code></dfn></dt>
   <dt><dfn id=selector-visited title=selector-visited><code>:visited</code></dfn></dt>

   <dd>

    <p>All <code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, all
    <code><a href=#the-area-element>area</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, and all
    <code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute, must match one of
    <code title=selector-link><a href=#selector-link>:link</a></code> and <code title=selector-visited><a href=#selector-visited>:visited</a></code>.</p>

   </dd>


   <dt><dfn id=selector-active title=selector-active><code>:active</code></dfn></dt>

   <dd>

    <p>The <code title=selector-active><a href=#selector-active>:active</a></code> pseudo-class
    must match the following elements between the time the user begins
    to activate the element and the time the user stops activating
    the element:</p>

    <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>

     <li><code><a href=#the-area-element>area</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>

     <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>

     <li><code><a href=#the-button-element>button</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#image-button-state title=attr-input-type-image>Image Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state</li>

     <li><code><a href=#the-command>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>

     <li>any other element, if it is <a href=#specially-focusable>specially
     focusable</a></li>

    </ul><p class=example>For example, if the user is using a keyboard to
    push a <code><a href=#the-button-element>button</a></code> element by pressing the space bar, the
    element would match this pseudo-class in between the time that the
    element received the <code title=event-keydown>keydown</code>
    event and the time the element received the <code title=event-keyup>keyup</code> event.</p>

   </dd>


   <dt><dfn id=selector-enabled title=selector-enabled><code>:enabled</code></dfn></dt>

   <dd>

    <p>The <code title=selector-enabled><a href=#selector-enabled>:enabled</a></code> pseudo-class
    must match the following elements:</p>

    <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>

     <li><code><a href=#the-area-element>area</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>

     <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>

     <li><code><a href=#the-button-element>button</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
     <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state and that
     are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li><code><a href=#the-select-element>select</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li><code><a href=#the-textarea-element>textarea</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li><code><a href=#the-option-element>option</a></code> elements that do not have a <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute</li>

     <li><code><a href=#the-command>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>

     <li><code><a href=#the-li-element>li</a></code> elements that are children of
     <code><a href=#menus>menu</a></code> elements, and that have a child element that
     defines a <a href=#concept-command title=concept-command>command</a>, if the
     first such element's <a href=#command-facet-disabledstate title=command-facet-disabledstate>Disabled State</a> facet
     is false (not disabled)</li>

    </ul></dd>


   <dt><dfn id=selector-disabled title=selector-disabled><code>:disabled</code></dfn></dt>

   <dd>

    <p>The <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code>
    pseudo-class must match the following elements:</p>

    <ul><li><code><a href=#the-button-element>button</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
     <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state and that
     are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li><code><a href=#the-select-element>select</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li><code><a href=#the-textarea-element>textarea</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li><code><a href=#the-option-element>option</a></code> elements that have a <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute</li>

     <li><code><a href=#the-command>command</a></code> elements that have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>

     <li><code><a href=#the-li-element>li</a></code> elements that are children of
     <code><a href=#menus>menu</a></code> elements, and that have a child element that
     defines a <a href=#concept-command title=concept-command>command</a>, if the
     first such element's <a href=#command-facet-disabledstate title=command-facet-disabledstate>Disabled State</a> facet
     is true (disabled)</li>

    </ul></dd>


   <dt><dfn id=selector-checked title=selector-checked><code>:checked</code></dfn></dt>

   <dd>

    <p>The <code title=selector-checked><a href=#selector-checked>:checked</a></code> pseudo-class
    must match the following elements:</p>

    <ul><li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state and whose
     <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is
     true</li>

     <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state and whose
     <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is
     true</li>

     <li><code><a href=#the-command>command</a></code> elements whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state
     and that have a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>
     attribute</li>

     <li><code><a href=#the-command>command</a></code> elements whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state and that
     have a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>
     attribute</li>

    </ul></dd>


   <dt><dfn id=selector-indeterminate title=selector-indeterminate><code>:indeterminate</code></dfn></dt>

   <dd>

    <p>The <code title=selector-indeterminate><a href=#selector-indeterminate>:indeterminate</a></code>
    pseudo-class must match <code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state and whose
    <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL
    attribute is set to true.</p>

   </dd>


   <dt><dfn id=selector-default title=selector-default><code>:default</code></dfn></dt>

   <dd>

    <p>The <code title=selector-default><a href=#selector-default>:default</a></code> pseudo-class
    must match the following elements:</p>

    <ul><li><code><a href=#the-button-element>button</a></code> elements that are their form's
     <a href=#default-button>default button</a></li>

     <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> or <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, and that
     are their form's <a href=#default-button>default button</a></li>
<!--
     <li><code>command</code> elements that have a <code
     title="attr-command-default">default</code> attribute</li>
-->
    </ul></dd>


   <dt><dfn id=selector-valid title=selector-valid><code>:valid</code></dfn></dt>

   <dd>

    <p>The <code title=selector-valid><a href=#selector-valid>:valid</a></code> pseudo-class
    must match all elements that are <a href=#candidate-for-constraint-validation title="candidate for
    constraint validation">candidates for constraint validation</a>
    and that <a href=#concept-fv-valid title=concept-fv-valid>satisfy their
    constraints</a>.</p>

   </dd>


   <dt><dfn id=selector-invalid title=selector-invalid><code>:invalid</code></dfn></dt>

   <dd>

    <p>The <code title=selector-invalid><a href=#selector-invalid>:invalid</a></code> pseudo-class
    must match all elements that are <a href=#candidate-for-constraint-validation title="candidate for
    constraint validation">candidates for constraint validation</a>
    but that do not <a href=#concept-fv-valid title=concept-fv-valid>satisfy their
    constraints</a>.</p>

   </dd>


   <dt><dfn id=selector-in-range title=selector-in-range><code>:in-range</code></dfn></dt>

   <dd>

    <p>The <code title=selector-in-range><a href=#selector-in-range>:in-range</a></code>
    pseudo-class must match all elements that are <a href=#candidate-for-constraint-validation title="candidate for constraint validation">candidates for
    constraint validation</a> and that are neither <a href=#suffering-from-an-underflow>suffering
    from an underflow</a> nor <a href=#suffering-from-an-overflow>suffering from an
    overflow</a>.</p>

   </dd>


   <dt><dfn id=selector-out-of-range title=selector-out-of-range><code>:out-of-range</code></dfn></dt>

   <dd>

    <p>The <code title=selector-out-of-range><a href=#selector-out-of-range>:out-of-range</a></code>
    pseudo-class must match all elements that are <a href=#candidate-for-constraint-validation title="candidate for constraint validation">candidates for
    constraint validation</a> and that are <a href=#suffering-from-an-underflow>suffering from an
    underflow</a> or <a href=#suffering-from-an-overflow>suffering from an overflow</a>.</p>

   </dd>


   <dt><dfn id=selector-required title=selector-required><code>:required</code></dfn></dt>

   <dd>

    <p>The <code title=selector-required><a href=#selector-required>:required</a></code>
    pseudo-class must match the following elements:</p>

    <ul><li><code><a href=#the-input-element>input</a></code> elements that are <i title=concept-input-required><a href=#concept-input-required>required</a></i></li>

     <li><code><a href=#the-textarea-element>textarea</a></code> elements that have a <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>
     attribute</li>

    </ul></dd>


   <dt><dfn id=selector-optional title=selector-optional><code>:optional</code></dfn></dt>

   <dd>

    <p>The <code title=selector-optional><a href=#selector-optional>:optional</a></code>
    pseudo-class must match the following elements:</p>

    <ul><li><code><a href=#the-button-element>button</a></code> elements</li>

     <li><code><a href=#the-input-element>input</a></code> elements that are not <i title=concept-input-required><a href=#concept-input-required>required</a></i></li>

     <li><code><a href=#the-select-element>select</a></code> elements</li>

     <li><code><a href=#the-textarea-element>textarea</a></code> elements that do not have a <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>
     attribute</li>

    </ul></dd>


   <dt><dfn id=selector-read-only title=selector-read-only><code>:read-only</code></dfn></dt>
   <dt><dfn id=selector-read-write title=selector-read-write><code>:read-write</code></dfn></dt>

   <dd>

    <p>The <code title=selector-read-write><a href=#selector-read-write>:read-write</a></code>
    pseudo-class must match the following elements:</p>

    <ul><li><code><a href=#the-input-element>input</a></code> elements to which the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute applies,
     but that are not <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>
     (i.e. that do not have the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute specified
     and that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>)</li>

     <li><code><a href=#the-textarea-element>textarea</a></code> elements that do not have a <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute, and
     that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

     <li>any element that is <a href=#editable>editable</a></li>

    </ul><p>The <code title=selector-read-only><a href=#selector-read-only>:read-only</a></code>
    pseudo-class must match all other <a href=#html-elements>HTML elements</a>.</p>

   </dd>

  </dl><p class=note>Another section of this specification defines the
  <i><a href=#target-element>target element</a></i> used with the <code title=selector-target>:target</code> pseudo-class.</p>

  <p class=note>This specification does not define when an element
  matches the <code title=selector-hover>:hover</code>, <code title=selector-focus>:focus</code>, or <code title=selector-lang()>:lang()</code> dynamic pseudo-classes, as
  those are all defined in sufficient detail in a language-agnostic
  fashion in the Selectors specification. <a href=#refsSELECTORS>[SELECTORS]</a></p>

  </div>




  <div data-component="HTML Microdata (editor: Ian Hickson)">

  <h2 id=microdata><span class=secno>5 </span><dfn>Microdata</dfn></h2>

<!-- v2

  * <itemref itemprop="foo" src="url#id"> to import the item with
    id="id" from url into the current microdata block as the value of
    property foo?

  * splitting the 'content' part of a property into multiple sub-bits,
    as in:

     <span itemprop="tel" item-content-in-bits>
       Telephone:
       <span content-bit>+44</span> (0) <span content-bit>1223 123 123</span>
     </span>

    maybe vocabs that need this can use a sub vocabulary specifically
    for this:

     <span itemprop="tel" itemscope itemtype="http://bits.example/">
       Telephone:
       <span itemprop=bit>+44</span> (0) <span itemprop=bit>1223 123 123</span>
     </span>

-->


  <h3 id=introduction-2><span class=secno>5.1 </span>Introduction</h3>

  <h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>

  <p><i>This section is non-normative.</i></p>

  <p>Sometimes, it is desirable to annotate content with specific
  machine-readable labels, e.g. to allow generic scripts to provide
  services that are customised to the page, or to enable content from
  a variety of cooperating authors to be processed by a single script
  in a consistent manner.</p>

  <p>For this purpose, authors can use the microdata features
  described in this section. Microdata allows nested groups of
  name-value pairs to be added to documents, in parallel with the
  existing content.</p>



  <h4 id=the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</h4>

  <p><i>This section is non-normative.</i></p>

  <p>At a high level, microdata consists of a group of name-value
  pairs. The groups are called <a href=#concept-item title=concept-item>items</a>, and each name-value pair is a
  property. Items and properties are represented by regular
  elements.</p>

  <p>To create an item, the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute is used.</p>

  <p>To add a property to an item, the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is used on one of
  the <a href=#concept-item title=concept-item>item's</a> descendants.</p>

  <div class=example>

   <p>Here there are two items, each of which has the property "name":</p>

   <pre>&lt;div itemscope&gt;
 &lt;p&gt;My name is &lt;span itemprop="name"&gt;Elizabeth&lt;/span&gt;.&lt;/p&gt;
&lt;/div&gt;

&lt;div itemscope&gt;
 &lt;p&gt;My name is &lt;span itemprop="name"&gt;Daniel&lt;/span&gt;.&lt;/p&gt;
&lt;/div&gt;</pre>

  </div>

  <p>Properties generally have values that are strings.</p>

  <div class=example>

   <p>Here the item has three properties:</p>

   <pre>&lt;div itemscope&gt;
 &lt;p&gt;My name is &lt;span itemprop="name"&gt;Neil&lt;/span&gt;.&lt;/p&gt;
 &lt;p&gt;My band is called &lt;span itemprop="band"&gt;Four Parts Water&lt;/span&gt;.&lt;/p&gt;
 &lt;p&gt;I am &lt;span itemprop="nationality"&gt;British&lt;/span&gt;.&lt;/p&gt;
&lt;/div&gt;</pre>

  </div>

  <p>Properties can also have values that are <a href=#url title=URL>URLs</a>. This is achieved using the <code><a href=#the-a-element>a</a></code>
  element and its <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
  attribute, the <code><a href=#the-img-element>img</a></code> element and its <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, or other elements that
  link to or embed external resources.</p>

  <div class=example>

   <p>In this example, the item has one property, "image", whose value
   is a URL:</p>

   <pre>&lt;div itemscope&gt;
 &lt;img itemprop="image" src="google-logo.png" alt="Google"&gt;
&lt;/div&gt;</pre>

  </div>

  <p>Properties can also have values that are dates, times, or dates
  and times. This is achieved using the <code><a href=#the-time-element>time</a></code> element and
  its <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute.</p>

  <div class=example>

   <p>In this example, the item has one property,
   "birthday", whose value is a date:</p>

   <pre>&lt;div itemscope&gt;
 I was born on &lt;time itemprop="birthday" datetime="2009-05-10"&gt;May 10th 2009&lt;/time&gt;.
&lt;/div&gt;</pre>

  </div>

  <p>Properties can also themselves be groups of name-value pairs, by
  putting the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute
  on the element that declares the property.</p>

  <p>Items that are not part of others are called <a href=#top-level-microdata-items>top-level
  microdata items</a>.</p>

  <div class=example>

   <p>In this example, the outer item represents a person, and the
   inner one represents a band:</p>

   <pre>&lt;div itemscope&gt;
 &lt;p&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
 &lt;p&gt;Band: &lt;span itemprop="band" itemscope&gt; &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt; (&lt;span itemprop="size"&gt;12&lt;/span&gt; players)&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;</pre>

   <p>The outer item here has two properties, "name" and
   "band". The "name" is "Amanda", and the
   "band" is an item in its own right, with two
   properties, "name" and "size". The
   "name" of the band is "Jazz Band", and the
   "size" is "12".</p>

   <p>The outer item in this example is a top-level microdata
   item.</p>

  </div>

  <p>Properties that are not descendants of the element with the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute can be associated
  with the <a href=#concept-item title=concept-item>item</a> using the <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute. This attribute takes
  a list of IDs of elements to crawl in addition to crawling the
  children of the element with the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute.</p>

  <div class=example>

   <p>This example is the same as the previous one, but all the
   properties are separated from their <a href=#concept-item title=concept-item>items</a>:</p>

   <pre>&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
&lt;p id="a"&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
&lt;div id="b" itemprop="band" itemscope itemref="c"&gt;&lt;/div&gt;
&lt;div id="c"&gt;
 &lt;p&gt;Band: &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;&lt;/p&gt;
 &lt;p&gt;Size: &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
&lt;/div&gt;</pre>

   <p>This gives the same result as the previous example. The first
   item has two properties, "name", set to "Amanda", and "band", set
   to another item. That second item has two further properties,
   "name", set to "Jazz Band", and "size", set to "12".</p>

  </div>

  <p>An <a href=#concept-item title=concept-item>item</a> can have multiple
  properties with the same name and different values.</p>

  <div class=example>

   <p>This example describes an ice cream, with two flavors:</p>

   <pre>&lt;div itemscope&gt;
 &lt;p&gt;Flavors in my favorite ice cream:&lt;/p&gt;
 &lt;ul&gt;
  &lt;li itemprop="flavor"&gt;Lemon sorbet&lt;/li&gt;
  &lt;li itemprop="flavor"&gt;Apricot sorbet&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;</pre>

   <p>This thus results in an item with two properties, both
   "flavor", having the values "Lemon sorbet" and "Apricot
   sorbet".</p>

  </div>

  <p>An element introducing a property can also introduce multiple
  properties at once, to avoid duplication when some of the properties
  have the same value.</p>

  <div class=example>

   <p>Here we see an item with two properties,
   "favorite-color" and "favorite-fruit", both
   set to the value "orange":</p>

   <pre>&lt;div itemscope&gt;
 &lt;span itemprop="favorite-color favorite-fruit"&gt;orange&lt;/span&gt;
&lt;/div&gt;</pre>

  </div>

  <p>It's important to note that there is no relationship between the
  microdata and the content of the document where the microdata is
  marked up.</p>

  <div class=example>

   <p>There is no semantic difference, for instance, between the
   following two examples:</p>

   <pre>&lt;figure&gt;
 &lt;img src="castle.jpeg"&gt;
 &lt;figcaption&gt;&lt;span itemscope&gt;&lt;span itemprop="name"&gt;The Castle&lt;/span&gt;&lt;/span&gt; (1986)&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

   <pre>&lt;span itemscope&gt;&lt;meta itemprop="name" content="The Castle"&gt;&lt;/span&gt;
&lt;figure&gt;
 &lt;img src="castle.jpeg"&gt;
 &lt;figcaption&gt;The Castle (1986)&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

   <p>Both have a figure with a caption, and both, completely
   unrelated to the figure, have an item with a name-value pair with
   the name "name" and the value "The Castle". The only
   difference is that if the user drags the caption out of the
   document, in the former case, the item will be included in the
   drag-and-drop data. In neither case is the image in any way
   associated with the item.</p>

  </div>


  <h4 id=typed-items><span class=secno>5.1.3 </span>Typed items</h4>

  <p><i>This section is non-normative.</i></p>

  <p>The examples in the previous section show how information could
  be marked up on a page that doesn't expect its microdata to be
  re-used. Microdata is most useful, though, when it is used in
  contexts where other authors and readers are able to cooperate to
  make new uses of the markup.</p>

  <p>For this purpose, it is necessary to give each <a href=#concept-item title=concept-item>item</a> a type, such as
  "http://example.com/person", or "http://example.org/cat", or
  "http://band.example.net/". Types are identified as <a href=#url title=URL>URLs</a>.</p>

  <p>The type for an <a href=#concept-item title=concept-item>item</a> is given
  as the value of an <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code>
  attribute on the same element as the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute.</p>

  <div class=example>

   <p>Here, the item is "http://example.org/animals#cat":</p>

<pre>&lt;section itemscope itemtype="http://example.org/animals#cat"&gt;
 &lt;h1 itemprop="name"&gt;Hedral&lt;/h1&gt;
 &lt;p itemprop="desc"&gt;Hedral is a male american domestic
 shorthair, with a fluffy black fur with white paws and belly.&lt;/p&gt;
 &lt;img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"&gt;
&lt;/section&gt;</pre>

   <p>In this example the "http://example.org/animals#cat" item has three
   properties, a "name" ("Hedral"), a "desc" ("Hedral is..."), and an
   "img" ("hedral.jpeg").</p>

  </div>

  <p>An item can only have one type. The type gives the context for
  the properties, thus defining a vocabulary: a property named "class"
  given for an item with the type "http://census.example/person" might
  refer to the economic class of an individual, while a property named
  "class" given for an item with the type "http://example.com/school/teacher"
  might refer to the classroom a teacher has been assigned.</p>


  <h4 id=global-identifiers-for-items><span class=secno>5.1.4 </span>Global identifiers for items</h4>

  <p><i>This section is non-normative.</i></p>

  <p>Sometimes, an <a href=#concept-item title=concept-item>item</a> gives
  information about a topic that has a global identifier. For example,
  books can be identified by their ISBN number.</p>

  <p>Vocabularies (as identified by the <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute) can be designed
  such that <a href=#concept-item title=concept-item>items</a> get associated
  with their global identifier in an unambiguous way by expressing the
  global identifiers as <a href=#url title=URL>URLs</a> given in an
  <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute.</p>

  <p>The exact meaning of the <a href=#url title=URL>URLs</a> given in
  <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attributes depends on the
  vocabulary used.</p>

  <div class=example>

   <p>Here, an item is talking about a particular book:</p>

<pre>&lt;dl itemscope
    itemtype="http://vocab.example.net/book"
    <strong>itemid="urn:isbn:0-330-34032-8"</strong>&gt;
 &lt;dt&gt;Title
 &lt;dd itemprop="title"&gt;The Reality Dysfunction
 &lt;dt&gt;Author
 &lt;dd itemprop="author"&gt;Peter F. Hamilton
 &lt;dt&gt;Publication date
 &lt;dd&gt;&lt;time itemprop="pubdate" datetime="1996-01-26"&gt;26 January 1996&lt;/time&gt;
&lt;/dl&gt;</pre>

   <p>The "<code title="">http://vocab.example.net/book</code>"
   vocabulary in this example would define that the <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute takes a <code title="">urn:</code> <a href=#url>URL</a> pointing to the ISBN of the
   book.</p>

  </div>

  <!-- (commented out since itemtype="" defines the meaning of the
        identifier for now)
  <p>Although it is common practice, authors are encouraged not to use
  the same URL to identify multiple topics; in particular, an HTTP URL
  usually identifies a specific resource (such as an image or
  document), and authors are encouraged to not use them to identify
  people, non-Web resources like companies, movies, and products, or
  other abstract concepts. Using an HTTP URL as a global identifier
  for something other than the resource actually designated by the URL
  leads to a situation where it is ambiguous whether the identifier,
  and thus the set of properties specified in the microdata,
  references the page or something else.</p>
  -->



  <h4 id=selecting-names-when-defining-vocabularies><span class=secno>5.1.5 </span>Selecting names when defining vocabularies</h4>

  <p><i>This section is non-normative.</i></p>

  <p>Using microdata means using a vocabulary. For some purposes, an
  ad-hoc vocabulary is adequate. For others, a vocabulary will need to
  be designed. Where possible, authors are encouraged to re-use
  existing vocabularies, as this makes content re-use easier.</p>

  <p>When designing new vocabularies, identifiers can be created
  either using <a href=#url title=URL>URLs</a>, or, for properties, as
  plain words (with no dots or colons). For URLs, conflicts with other
  vocabularies can be avoided by only using identifiers that
  correspond to pages that the author has control over.</p>

  <div class=example>

   <p>For instance, if Jon and Adam both write content at <code title="">example.com</code>, at <code title="">http://example.com/~jon/...</code> and <code title="">http://example.com/~adam/...</code> respectively, then
   they could select identifiers of the form
   "http://example.com/~jon/name" and "http://example.com/~adam/name"
   respectively.</p>

  </div>

  <p>Properties whose names are just plain words can only be used
  within the context of the types for which they are intended;
  properties named using URLs can be reused in items of any type. If
  an item has no type, and is not part of another item, then if its
  properties have names that are just plain words, they are not
  intended to be globally unique, and are instead only intended for
  limited use. Generally speaking, authors are encouraged to use
  either properties with globally unique names (URLs) or ensure that
  their items are typed.</p>

  <div class=example>

   <p>Here, an item is an "http://example.org/animals#cat", and most of the
   properties have names that are words defined in the context of that
   type. There are also a few additional properties whose names come
   from other vocabularies.</p>

<pre>&lt;section itemscope itemtype="http://example.org/animals#cat"&gt;
 &lt;h1 itemprop="name http://example.com/fn"&gt;Hedral&lt;/h1&gt;
 &lt;p itemprop="desc"&gt;Hedral is a male american domestic
 shorthair, with a fluffy &lt;span
 itemprop="http://example.com/color"&gt;black&lt;/span&gt; fur with &lt;span
 itemprop="http://example.com/color"&gt;white&lt;/span&gt; paws and belly.&lt;/p&gt;
 &lt;img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"&gt;
&lt;/section&gt;</pre>

   <p>This example has one item with the type "http://example.org/animals#cat"
   and the following properties:</p>

   <table><thead><tr><td>Property
      <td>Value
    <tbody><tr><td>name
      <td>Hedral
     <tr><td>http://example.com/fn
      <td>Hedral
     <tr><td>desc
      <td>Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.
     <tr><td>http://example.com/color
      <td>black
     <tr><td>http://example.com/color
      <td>white
     <tr><td>img
      <td>.../hedral.jpeg
   </table></div>



  <h4 id=using-the-microdata-dom-api><span class=secno>5.1.6 </span>Using the microdata DOM API</h4>

  <p><i>This section is non-normative.</i></p>

  <p>The microdata becomes even more useful when scripts can use it to
  expose information to the user, for example offering it in a form
  that can be used by other applications.</p>

  <p>The <code title=dom-document-getItems><a href=#dom-document-getitems>document.getItems(<var title="">typeNames</var>)</a></code> method provides access to the
  <a href=#top-level-microdata-items>top-level microdata items</a>. It returns a
  <code><a href=#nodelist>NodeList</a></code> containing the items with the specified types,
  or all types if no argument is specified.</p>

  <p>Each <a href=#concept-item title=concept-item>item</a> is represented in the
  DOM by the element on which the relevant <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute is found. These
  elements have their <code title=dom-itemScope><a href=#dom-itemscope>element.itemScope</a></code> IDL attribute set to
  true.</p>

  <p>The type of <a href=#concept-item title=concept-item>items</a> can be
  obtained using the <code title=dom-itemType><a href=#dom-itemtype>element.itemType</a></code> IDL attribute on the
  element with the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
  attribute.</p>

  <div class=example>

   <p>This sample shows how the <code title=dom-document-getItems><a href=#dom-document-getitems>getItems()</a></code> method can be used
   to obtain a list of all the top-level microdata items of one type
   given in the document:</p>

   <pre>var cats = document.getItems("http://example.com/feline");</pre>

  </div>

  <p>Once an element representing an <a href=#concept-item title=concept-item>item</a> has been obtained, its properties
  can be extracted using the <code title=dom-properties><a href=#dom-properties>properties</a></code> IDL attribute. This
  attribute returns an <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code>, which can
  be enumerated to go through each element that adds one or more
  properties to the item. It can also be indexed by name, which will
  return an object with a list of the elements that add properties
  with that name.</p>

  <p>Each element that adds a property also has a <code title=dom-itemValue><a href=#dom-itemvalue>itemValue</a></code> IDL attribute that returns
  its value.</p>

  <div class=example>

   <p>This sample gets the first item of type "http://example.net/user" and
   then pops up an alert using the "name" property from
   that item.</p>

   <pre>var user = document.getItems('http://example.net/user')[0];
alert('Hello ' + user.properties['name'][0].content + '!');</pre>

  </div>

  <p>The <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> object, when indexed by
  name in this way, actually returns a <code><a href=#propertynodelist>PropertyNodeList</a></code>
  object with all the matching properties. The
  <code><a href=#propertynodelist>PropertyNodeList</a></code> object can be used to obtain all the
  values at once using <em>its</em> <code title=dom-PropertyNodeList-values><a href=#dom-propertynodelist-values>values</a></code> attribute, which
  returns an array of all the values.</p>

  <div class=example>

   <p>In an earlier example, a "http://example.org/animals#cat" item had two
   "http://example.com/color" values. This script looks up the first such
   item and then lists all its values.</p>

   <pre>var cat = document.getItems('http://example.org/animals#cat')[0];
var colors = cat.properties['http://example.com/color'].values;
var result;
if (colors.length == 0) {
  result = 'Color unknown.';
} else if (colors.length == 1) {
  result = 'Color: ' + colors[0];
} else {
  result = 'Colors:';
  for (var i = 0; i &lt; colors.length; i += 1)
    result += ' ' + colors[i];
}</pre>

  </div>

  <p>It's also possible to get a list of all the <a href=#property-names>property
  names</a> using the object's <code title=dom-HTMLPropertiesCollection-names><a href=#dom-htmlpropertiescollection-names>names</a></code> IDL
  attribute.</p>

  <div class=example>

   <p>This example creates a big list with a nested list for each item
   on the page, each with of all the property names used in that
   item.</p>

   <pre>var outer = document.createElement('ul');
var items = document.getItems();
for (var item = 0; item &lt; items.length; item += 1) {
  var itemLi = document.createElement('li');
  var inner = document.createElement('ul');
  for (var name = 0; name &lt; items[item].properties.names.length; name += 1) {
    var propLi = document.createElement('li');
    propLi.appendChild(document.createTextNode(items[item].properties.names[name]));
    inner.appendChild(propLi);
  }
  itemLi.appendChild(inner);
  outer.appendChild(itemLi);
}
document.body.appendChild(outer);</pre>

   <p>If faced with the following from an earlier example:</p>

   <pre>&lt;section itemscope itemtype="http://example.org/animals#cat"&gt;
 &lt;h1 itemprop="name http://example.com/fn"&gt;Hedral&lt;/h1&gt;
 &lt;p itemprop="desc"&gt;Hedral is a male american domestic
 shorthair, with a fluffy &lt;span
 itemprop="http://example.com/color"&gt;black&lt;/span&gt; fur with &lt;span
 itemprop="http://example.com/color"&gt;white&lt;/span&gt; paws and belly.&lt;/p&gt;
 &lt;img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"&gt;
&lt;/section&gt;</pre>

   <p>...it would result in the following output:</p>

   <ul><li>
     <ul><li>name</li>
      <li>http://example.com/fn</li>
      <li>desc</li>
      <li>http://example.com/color</li>
      <li>img</li>
     </ul></li>
   </ul><p>(The duplicate occurrence of "http://example.com/color" is not included
   in the list.)</p>

  </div>


  <h3 id=encoding-microdata><span class=secno>5.2 </span>Encoding microdata</h3>



  <h4 id=the-microdata-model><span class=secno>5.2.1 </span>The microdata model</h4>

  <p>The microdata model consists of groups of name-value pairs known
  as <a href=#concept-item title=concept-item>items</a>.</p>

  <p>Each group is known as an <a href=#concept-item title=concept-item>item</a>. Each <a href=#concept-item title=concept-item>item</a> can have an <a href=#item-type>item type</a>,
  a <a href=#global-identifier>global identifier</a> (if the <a href=#item-type>item type</a>
  <a href=#support-global-identifiers-for-items title="support global identifiers for items">supports global
  identifiers for its items</a>), and a list of name-value
  pairs. Each name in the name-value pair is known as a <a href=#the-properties-of-an-item title="the properties of an item">property</a>, and each <a href=#the-properties-of-an-item title="the properties of an item">property</a> has one or more
  <a href=#concept-property-value title=concept-property-value>values</a>. Each <a href=#concept-property-value title=concept-property-value>value</a> is either a string or itself a group of
  name-value pairs (an <a href=#concept-item title=concept-item>item</a>).</p>

  <p>An <a href=#concept-item title=concept-item>item</a> is said to be a
  <dfn id=typed-item>typed item</dfn> when either it has an <a href=#item-type>item type</a>,
  or it is the <a href=#concept-property-value title=concept-property-value>value</a> of a <a href=#the-properties-of-an-item title="the properties of an
  item">property</a> of a <a href=#typed-item>typed item</a>. The
  <dfn id=relevant-type>relevant type</dfn> for a <a href=#typed-item>typed item</a> is the <a href=#concept-item title=concept-item>item</a>'s <a href=#item-type>item type</a>, if it has
  one, or else is the <a href=#relevant-type>relevant type</a> of the <a href=#concept-item title=concept-item>item</a> for which it is a <a href=#the-properties-of-an-item title="the
  properties of an item">property</a>'s <a href=#concept-property-value title=concept-property-value>value</a>.</p>



  <h4 id=items><span class=secno>5.2.2 </span>Items</h4>

  <p>Every <a href=#html-elements title="HTML elements">HTML element</a> may have an
  <dfn id=attr-itemscope title=attr-itemscope><code>itemscope</code></dfn> attribute
  specified. The <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
  attribute is a <a href=#boolean-attribute>boolean attribute</a>.</p>

  <p>An element with the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
  attribute specified creates a new <dfn id=concept-item title=concept-item>item</dfn>, a group of name-value pairs.</p>

  <hr><p>Elements with an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
  attribute may have an <dfn id=attr-itemtype title=attr-itemtype><code>itemtype</code></dfn> attribute
  specified, to give the <a href=#item-type>item type</a> of the <a href=#concept-item title=concept-item>item</a>.</p>

  <p>The <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-url>valid URL</a> that
  is an <a href=#absolute-url>absolute URL</a> for which the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>" is not a
  <a href=#prefix-match>prefix match</a>.</p> <!-- we disallow that prefix so that
  we have somewhere to put future extensions, e.g. if we ever support
  short type names -->

  <p>The <dfn id=item-type>item type</dfn> of an <a href=#concept-item title=concept-item>item</a> is the value of its element's <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute, if it has one and
  its value is not the empty string. If the <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute is missing or its
  value is the empty string, the <a href=#concept-item title=concept-item>item</a> is said to have no <a href=#item-type>item
  type</a>.</p>

  <p>The <a href=#item-type>item type</a> must be a type defined in an <a href=#other-applicable-specifications title="other applicable specifications">applicable
  specification</a>.</p>

  <div class=impl>

   <p>Except if otherwise specified by that specification, the
   <a href=#url>URL</a> given as the <a href=#item-type>item type</a> should not be
   automatically dereferenced.</p>

   <p class=note>A specification could define that its <a href=#item-type>item
   type</a> can be derefenced to provide the user with help
   information, for example. In fact, vocabulary authors are
   encouraged to provide useful information at the given
   <a href=#url>URL</a>.</p>

   <p><a href=#item-type title="item type">Item types</a> are opaque
   identifiers, and user agents must not dereference unknown <a href=#item-type title="item type">item types</a>, or otherwise deconstruct them,
   in order to determine how to process <a href=#concept-item title=concept-item>items</a> that use them.</p>

  </div>

  <p>The <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute must
  not be specified on elements that do not have an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute specified.</p>

  <hr><p>Elements with an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
  attribute and an <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code>
  attribute that references a vocabulary that is defined to
  <dfn id=support-global-identifiers-for-items>support global identifiers for items</dfn> may also have an
  <dfn id=attr-itemid title=attr-itemid><code>itemid</code></dfn> attribute
  specified, to give a global identifier for the <a href=#concept-item title=concept-item>item</a>, so that it can be related to other
  <a href=#concept-item title=concept-item>items</a> on pages elsewhere on the
  Web.</p>

  <p>The <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially
  surrounded by spaces</a>.</p>

  <p>The <dfn id=global-identifier>global identifier</dfn> of an <a href=#concept-item title=concept-item>item</a> is the value of its element's <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute, if it has one, <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element on
  which the attribute is specified. If the <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute is missing or if
  resolving it fails, it is said to have no <a href=#global-identifier>global
  identifier</a>.</p>

  <p>The <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute must not be
  specified on elements that do not have both an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute and an <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute specified, and must
  not be specified on elements with an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute whose <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute specifies a
  vocabulary that does not <a href=#support-global-identifiers-for-items>support global identifiers for
  items</a>, as defined by that vocabulary's specification.</p>

  <hr><p>Elements with an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
  attribute may have an <dfn id=attr-itemref title=attr-itemref><code>itemref</code></dfn> attribute specified,
  to give a list of additional elements to crawl to find the
  name-value pairs of the <a href=#concept-item title=concept-item>item</a>.</p>

  <p>The <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute, if
  specified, must have a value that is an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of
  unique space-separated tokens</a> consisting of <a href=#concept-id title=concept-ID>IDs</a> of elements in the same <a href=#home-subtree>home
  subtree</a>.</p>

  <p>The <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute must not
  be specified on elements that do not have an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute specified.</p>


  <h4 id=names:-the-itemprop-attribute><span class=secno>5.2.3 </span>Names: the <dfn title=attr-itemprop><code>itemprop</code></dfn> attribute</h4>

  <p>Every <a href=#html-elements title="HTML elements">HTML element</a> may have an
  <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute specified, if
  doing so <a href=#the-properties-of-an-item title="the properties of an item">adds a
  property</a> to one or more <a href=#concept-item title=concept-item>items</a> (as defined below).</p>

  <p>The <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, if
  specified, must have a value that is an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of
  unique space-separated tokens</a> representing the names of the
  name-value pairs that it adds. The attribute's value must have at
  least one token.</p>

  <p>Each token must be either:</p>

  <ul><li>A <a href=#valid-url>valid URL</a> that is an <a href=#absolute-url>absolute URL</a>
   for which the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>" is not a
   <a href=#prefix-match>prefix match</a>, or</li>

   <li>If the item is a <a href=#typed-item>typed item</a>: a <dfn id=defined-property-name>defined
   property name</dfn> allowed in this situation according to the
   specification that defines the <a href=#relevant-type>relevant type</a> for the
   item, or</li>

   <li>If the item is not a <a href=#typed-item>typed item</a>: a string that
   contains no U+002E FULL STOP characters (.) and no U+003A COLON
   characters (:).</li>

  </ul><p>When an element with an <code title=concept-itemprop>itemprop</code> attribute <a href=#the-properties-of-an-item title="the
  properties of an item">adds a property</a> to multiple <a href=#concept-item title=concept-item>items</a>, the requirement above regarding
  the tokens applies for each <a href=#concept-item title=concept-item>item</a>
  individually.</p>

  <!--

   e.g.:

     <div itemscope itemtype="http://example.com/a"> <ref refid="x"> </div>
     <div itemscope itemtype="http://example.com/b"> <ref refid="x"> </div>
     <meta id="x" itemprop="z" content="">

     "z" had better be valid for both http://example.com/a and http://example.com/b

  -->

  <p>The <dfn id=property-names>property names</dfn> of an element are the tokens that
  the element's <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute
  is found to contain when its value is <a href=#split-a-string-on-spaces title="split a string on
  spaces">split on spaces</a>, with the order preserved but with
  duplicates removed (leaving only the first occurrence of each
  name).</p>

  <p>Within an <a href=#concept-item title=concept-item>item</a>, the properties
  are unordered with respect to each other, except for properties with
  the same name, which are ordered in the order they are given by the
  algorithm that defines <a href=#the-properties-of-an-item>the properties of an item</a>.</p>

  <div class=example>

   <p>In the following example, the "a" property has the values "1"
   and "2", <em>in that order</em>, but whether the "a" property comes
   before the "b" property or not is not important:</p>

   <pre>&lt;div itemscope&gt;
 &lt;p itemprop="a"&gt;1&lt;/p&gt;
 &lt;p itemprop="a"&gt;2&lt;/p&gt;
 &lt;p itemprop="b"&gt;test&lt;/p&gt;
&lt;/div&gt;</pre>

   <p>Thus, the following is equivalent:</p>

   <pre>&lt;div itemscope&gt;
 &lt;p itemprop="b"&gt;test&lt;/p&gt;
 &lt;p itemprop="a"&gt;1&lt;/p&gt;
 &lt;p itemprop="a"&gt;2&lt;/p&gt;
&lt;/div&gt;</pre>

   <p>As is the following:</p>

   <pre>&lt;div itemscope&gt;
 &lt;p itemprop="a"&gt;1&lt;/p&gt;
 &lt;p itemprop="b"&gt;test&lt;/p&gt;
 &lt;p itemprop="a"&gt;2&lt;/p&gt;
&lt;/div&gt;</pre>

   <p>And the following:</p>

   <pre>&lt;div itemscope itemref="x"&gt;
 &lt;p itemprop="b"&gt;test&lt;/p&gt;
 &lt;p itemprop="a"&gt;2&lt;/p&gt;
&lt;/div&gt;
&lt;div id="x"&gt;
 &lt;p itemprop="a"&gt;1&lt;/p&gt;
&lt;/div&gt;
</pre>

  </div>



  <h4 id=values><span class=secno>5.2.4 </span>Values</h4>

  <p>The <dfn id=concept-property-value title=concept-property-value>property value</dfn> of a
  name-value pair added by an element with an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute depends on the
  element, as follows:</p>

  <dl><dt>If the element also has an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute</dt>

   <dd><p>The value is the <a href=#concept-item title=concept-item>item</a>
   created by the element.</dd>


   <dt>If the element is a <code><a href=#meta>meta</a></code> element</dt>

   <dd><p>The value is the value of the element's <code title=attr-content>content</code> attribute, if any, or the empty
   string if there is no such attribute.</dd>


   <dt>If the element is an <code><a href=#audio>audio</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-source-element>source</a></code>, or
   <code><a href=#video>video</a></code> element</dt>

   <dd><p>The value is the <a href=#absolute-url>absolute URL</a> that results from
   <a href=#resolve-a-url title="resolve a url">resolving</a> the value of the
   element's <code title="">src</code> attribute relative to the
   element at the time the attribute is set, or the empty string if
   there is no such attribute or if <a href=#resolve-a-url title="resolve a
   url">resolving</a> it results in an error.</dd>


   <dt>If the element is an <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, or
   <code><a href=#the-link-element>link</a></code> element</dt>

   <dd><p>The value is the <a href=#absolute-url>absolute URL</a> that results from
   <a href=#resolve-a-url title="resolve a url">resolving</a> the value of the
   element's <code title="">href</code> attribute relative to the
   element at the time the attribute is set, or the empty string if
   there is no such attribute or if <a href=#resolve-a-url title="resolve a
   url">resolving</a> it results in an error.</dd>


   <dt>If the element is an <code><a href=#the-object-element>object</a></code> element</dt>

   <dd><p>The value is the <a href=#absolute-url>absolute URL</a> that results from
   <a href=#resolve-a-url title="resolve a url">resolving</a> the value of the
   element's <code title="">data</code> attribute relative to the
   element at the time the attribute is set, or the empty string if
   there is no such attribute or if <a href=#resolve-a-url title="resolve a
   url">resolving</a> it results in an error.</dd>


   <dt>If the element is a <code><a href=#the-time-element>time</a></code> element with a <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute</dt>

   <dd><p>The value is the value of the element's <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute.</dd>


   <dt>Otherwise</dt>

   <dd><p>The value is the element's
   <code><a href=#textcontent>textContent</a></code>.</dd>

  </dl><p>The <dfn id=url-property-elements>URL property elements</dfn> are the <code><a href=#the-a-element>a</a></code>,
  <code><a href=#the-area-element>area</a></code>, <code><a href=#audio>audio</a></code>, <code><a href=#the-embed-element>embed</a></code>,
  <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-link-element>link</a></code>,
  <code><a href=#the-object-element>object</a></code>, <code><a href=#the-source-element>source</a></code>, and <code><a href=#video>video</a></code>
  elements.</p>

  <p>If a property's <a href=#concept-property-value title=concept-property-value>value</a>
  is an <a href=#absolute-url>absolute URL</a>, the property must be specified
  using a <a href=#url-property-elements title="URL property elements">URL property
  element</a>.</p>

  <p>If a property's <a href=#concept-property-value title=concept-property-value>value</a>
  represents a <a href=#concept-date title=concept-date>date</a>, <a href=#concept-time title=concept-time>time</a>, or <a href=#concept-datetime title=concept-datetime>global date and time</a>, the property
  must be specified using the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute of a
  <code><a href=#the-time-element>time</a></code> element.</p>


  <h4 id=associating-names-with-items><span class=secno>5.2.5 </span>Associating names with items</h4>

  <p>To find <dfn id=the-properties-of-an-item>the properties of an item</dfn> defined by the
  element <var title="">root</var>, the user agent must try to
  <a href=#crawl-the-properties>crawl the properties</a> of the element <var title="">root</var>, with an empty list as the value of <var title="">memory</var>: if this fails, then <a href=#the-properties-of-an-item title="the
  properties of an item">the properties of the item</a> defined by
  the element <var title="">root</var> is an empty list; otherwise, it
  is the returned list.</p>

  <p>To <dfn id=crawl-the-properties>crawl the properties</dfn> of an element <var title="">root</var> with a list <var title="">memory</var>, the user
  agent must run the following steps. These steps either fail or
  return a list with a count of errors. The count of errors is used as
  part of the authoring conformance criteria below.</p>

  <ol><li><p>If <var title="">root</var> is in <var title="">memory</var>, then the algorithm fails; abort these
   steps.</li>

   <li><p><a href=#collect-all-the-elements-in-the-item>Collect all the elements in the item</a> <var title="">root</var>; let <var title="">results</var> be the
   resulting list of elements, and <var title="">errors</var> be the
   resulting count of errors.</li>

   <li><p>Remove any elements from <var title="">results</var> that do
   not have an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute
   specified.</li>

   <li><p>Let <var title="">new memory</var> be a new list consisting
   of the old list <var title="">memory</var> with the addition of
   <var title="">root</var>.</li>

   <li><p>For each element in <var title="">results</var> that has an
   <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute specified,
   <a href=#crawl-the-properties>crawl the properties</a> of the element, with <var title="">new memory</var> as the memory. If this fails, then remove
   the element from <var title="">results</var> and increment <var title="">errors</var>. (If it succeeds, the return value is
   discarded.)</li>

   <li><p>Sort <var title="">results</var> in <a href=#tree-order>tree
   order</a>.</li>

   <li><p>Return <var title="">results</var> and <var title="">errors</var>.</li>

  </ol><p>To <dfn id=collect-all-the-elements-in-the-item>collect all the elements in the item</dfn> <var title="">root</var>, the user agent must run these steps. They
  return a list of elements and a count of errors.</p>

  <ol><li><p>Let <var title="">results</var> and <var title="">pending</var> be empty lists of elements.</li>

   <li><p>Let <var title="">errors</var> be zero.</li>

   <li><p>Add all the children elements of <var title="">root</var> to
   <var title="">pending</var>.</li>

   <li><p>If <var title="">root</var> has an <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute, <a href=#split-a-string-on-spaces title="split a
   string on spaces">split the value of that <code title=attr-itemref>itemref</code> attribute on spaces</a>. For
   each resulting token <var title="">ID</var>, if there is an element
   in the <a href=#home-subtree>home subtree</a> of <var title="">root</var> with
   the <a href=#concept-id title=concept-ID>ID</a> <var title="">ID</var>, then
   add the first such element to <var title="">pending</var>.</li>

   <li><p><i>Loop</i>: Remove an element from <var title="">pending</var> and let <var title="">current</var> be that
   element.</li>

   <li><p>If <var title="">current</var> is already in <var title="">results</var>, increment <var title="">errors</var>.</li>

   <li><p>If <var title="">current</var> is not already in <var title="">results</var> and <var title="">current</var> does not
   have an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute,
   then: add all the child elements of <var title="">current</var> to
   <var title="">pending</var>.</li>

   <li><p>If <var title="">current</var> is not already in <var title="">results</var>, then: add <var title="">current</var> to
   <var title="">results</var>.</li>

   <li><p><i>End of loop</i>: If <var title="">pending</var> is not
   empty, return to the step labeled <i>loop</i>.</li>

   <li><p>Return <var title="">results</var> and <var title="">errors</var>.</li>

  </ol><p>An <a href=#concept-item title=concept-item>item</a> is a <dfn id=top-level-microdata-items title="top-level microdata items">top-level microdata item</dfn> if
  its element does not have an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute.</p>

  <p>An <a href=#concept-item title=concept-item>item</a> is a <dfn id=used-microdata-items title="used
  microdata items">used microdata item</dfn> if it is a <a href=#top-level-microdata-items title="top-level microdata items">top-level microdata item</a>,
  or if it has an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code>
  attribute and would be <a href=#the-properties-of-an-item title="the properties of an item">found
  to be the property</a> of an <a href=#concept-item title=concept-item>item</a> that is itself a <a href=#used-microdata-items title="used
  microdata items">used microdata item</a>.</p>

  <p>A document must not contain any <a href=#concept-item title=concept-item>items</a> that are not <a href=#used-microdata-items>used microdata
  items</a>.</p>

  <p>A document must not contain any elements that have an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute that would not be
  found to be a property of any of the <a href=#concept-item title=concept-item>items</a> in that document were their <a href=#the-properties-of-an-item title="the properties of an item">properties</a> all to be
  determined.</p>

  <p>A document must not contain any <a href=#concept-item title=concept-item>items</a> for which <a href=#crawl-the-properties title="crawl the
  properties">crawling the properties</a> of the element, with an
  empty list as the value of <var title="">memory</var>, either fails
  or returns an error count other than zero.</p>

  <p class=note>The algorithms in this section are especially
  inefficient, in the interests of keeping them easy to
  understand. Implementors are strongly encouraged to refactor and
  optimize them in their user agents.</p>

  <div class=example>

   <p>In this example, a single license statement is applied to two
   works, using <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> from the
   items representing the works:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Photo gallery&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;My photos&lt;/h1&gt;
  &lt;figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses"&gt;
   &lt;img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a forest."&gt;
   &lt;figcaption itemprop="title"&gt;The house I found.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses"&gt;
   &lt;img itemprop="work" src="images/mailbox.jpeg" alt="Outside the house is a mailbox. It has a leaflet inside."&gt;
   &lt;figcaption itemprop="title"&gt;The mailbox.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;footer&gt;
   &lt;p id="licenses"&gt;All images licensed under the &lt;a itemprop="license"
   href="http://www.opensource.org/licenses/mit-license.php"&gt;MIT
   license&lt;/a&gt;.&lt;/p&gt;
  &lt;/footer&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

   <p>The above results in two items with the type "<code title="">http://n.whatwg.org/work</code>", one with:</p>

   <dl class=brief><dt>work
    <dd><code title="">images/house.jpeg</code>
    <dt>title
    <dd>The house I found.
    <dt>license
    <dd><code title="">http://www.opensource.org/licenses/mit-license.php</code>
   </dl><p>...and one with:</p>

   <dl class=brief><dt>work
    <dd><code title="">images/mailbox.jpeg</code>
    <dt>title
    <dd>The mailbox.
    <dt>license
    <dd><code title="">http://www.opensource.org/licenses/mit-license.php</code>
   </dl></div>



  <h3 id=microdata-dom-api><span class=secno>5.3 </span>Microdata DOM API</h3>


  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-getItems><a href=#dom-document-getitems>getItems</a></code>( [ <var title="">types</var> ] )</dt>

   <dd>

    <p>Returns a <code><a href=#nodelist>NodeList</a></code> of the elements in the <code><a href=#document>Document</a></code> that create <a href=#concept-item title=concept-item>items</a>, that are not part of other <a href=#concept-item title=concept-item>items</a>, and that are of one of the types given in the argument, if any are listed.</p>

    <p>The <var title="">types</var> argument is interpreted as a space-separated list of types.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-properties><a href=#dom-properties>properties</a></code></dt>

   <dd>

    <p>If the element has an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute, returns an
    <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> object with all the element's
    properties. Otherwise, an empty
    <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> object.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-itemValue><a href=#dom-itemvalue>itemValue</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the element's <a href=#concept-property-value title=concept-property-value>value</a>.</p>

    <p>Can be set, to change the element's <a href=#concept-property-value title=concept-property-value>value</a>. Setting the <a href=#concept-property-value title=concept-property-value>value</a> when the element has
    no <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute or when
    the element's value is an <a href=#concept-item title=concept-item>item</a>
    throws an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-getitems title=dom-document-getItems><code>document.getItems(<var title="">typeNames</var>)</code></dfn> method takes an optional
  string that contains an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique
  space-separated tokens</a> representing types. When called, the
  method must return a <a href=#live>live</a> <code><a href=#nodelist>NodeList</a></code> object
  containing all the elements in the document, in <a href=#tree-order>tree
  order</a>, that are each <a href=#top-level-microdata-items>top-level microdata items</a>
  with a <a href=#item-type title="item type">type</a> equal to one of the types
  specified in that argument, having obtained the types by <a href=#split-a-string-on-spaces title="split a string on spaces">splitting the string on
  spaces</a>. If there are no tokens specified in the argument, or
  if the argument is missing, then the method must return a
  <code><a href=#nodelist>NodeList</a></code> containing all the <a href=#top-level-microdata-items>top-level microdata
  items</a> in the document.
  When the method is invoked on a <code><a href=#document>Document</a></code> object again
  with the same argument, the user agent may return the same object as
  the object returned by the earlier call. In other cases, a new
  <code><a href=#nodelist>NodeList</a></code> object must be returned.</p>

  <p>The <dfn id=dom-itemscope title=dom-itemScope><code>itemScope</code></dfn> IDL
  attribute on <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a>
  the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> content attribute.
  The <dfn id=dom-itemtype title=dom-itemType><code>itemType</code></dfn> IDL
  attribute on <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a>
  the <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> content attribute,
  as if it was a regular string attribute, not a <a href=#url>URL</a>
  string attribute.  The <dfn id=dom-itemid title=dom-itemId><code>itemId</code></dfn> IDL attribute on
  <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a> the <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> content attribute. The <dfn id=dom-itemprop title=dom-itemProp><code>itemProp</code></dfn> IDL attribute on
  <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a> the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> content attribute. The <dfn id=dom-itemref title=dom-itemRef><code>itemRef</code></dfn> IDL attribute on
  <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a> the <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> content attribute.</p>

  <p>The <dfn id=dom-properties title=dom-properties><code>properties</code></dfn> IDL
  attribute on <a href=#html-elements>HTML elements</a> must return an
  <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches only elements that
  have <a href=#property-names>property names</a> and are <a href=#the-properties-of-an-item title="the properties
  of an item">the properties of the item</a> created by the element
  on which the attribute was invoked, while that element is an <a href=#concept-item title=concept-item>item</a>, and matches nothing the rest of
  the time.</p>

  <p>The <dfn id=dom-itemvalue title=dom-itemValue><code>itemValue</code></dfn> IDL
  attribute's behavior depends on the element, as follows:</p>

  <dl><dt>If the element has no <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute</dt>

   <dd><p>The attribute must return null on getting and must throw an
   <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception on setting.</p>


   <dt>If the element has an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute</dt>

   <dd><p>The attribute must return the element itself on getting and
   must throw an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception on
   setting.</p>


   <dt>If the element is a <code><a href=#meta>meta</a></code> element</dt>

   <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> content
   attribute.</dd>


   <dt>If the element is an <code><a href=#audio>audio</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-source-element>source</a></code>, or
   <code><a href=#video>video</a></code> element</dt>

   <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title="">src</code> content attribute.</dd>


   <dt>If the element is an <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, or
   <code><a href=#the-link-element>link</a></code> element</dt>

   <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title="">href</code> content attribute.</dd>


   <dt>If the element is an <code><a href=#the-object-element>object</a></code> element</dt>

   <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title="">data</code> content attribute.</dd>


   <dt>If the element is a <code><a href=#the-time-element>time</a></code> element with a <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute</dt>

   <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> content
   attribute.</dd>


   <dt>Otherwise</dt>

   <dd><p>The attribute must act the same as the element's
   <code><a href=#textcontent>textContent</a></code> attribute.</dd>

  </dl><p>When the <code title=dom-itemValue><a href=#dom-itemvalue>itemValue</a></code> IDL
  attribute is <a href=#reflect title=reflect>reflecting</a> a content
  attribute or acting like the element's <code><a href=#textcontent>textContent</a></code>
  attribute, the user agent must, on setting, convert the new value to
  the IDL <code title="">DOMString</code> value before using it
  according to the mappings described above.</p>

  </div>

  <div class=exmaple>

   <p>In this example, a script checks to see if a particular element
   <var title="">element</var> is declaring a particular property, and
   if it is, it increments a counter:</p>

   <pre>if (element.itemProp.contains('color'))
  count += 1;</pre>

  </div>

  <div class=exmaple>

   <p>This script iterates over each of the values of an element's
   <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute, calling a
   function for each referenced element:</p>

   <pre>for (var index = 0; index &lt; element.itemRef.length; index += 1)
  process(document.getElementById(element.itemRef[index]));</pre>

  </div>




  <h3 id=mdvocabs><span class=secno>5.4 </span>Microdata vocabularies</h3>



  <h4 id=vcard><span class=secno>5.4.1 </span>vCard</h4>



  <p>An item with the <a href=#item-type>item type</a> <dfn id=md-vcard title=md-vcard><code>http://microformats.org/profile/hcard</code></dfn>
  represents a person's or organization's contact information.</p>

  <p>This vocabulary <a href=#support-global-identifiers-for-items title="support global identifiers for
  items">supports global identifiers for items</a>.</p>

  <p>The following are the type's <a href=#defined-property-name title="defined property
  name">defined property names</a>. They are based on the
  vocabulary defined in the vCard specification and its extensions,
  where more information on how to interpret the values can be
  found. <a href=#refsRFC2426>[RFC2426]</a> <a href=#refsRFC4770>[RFC4770]</a></p>

  <dl><dt><dfn id=md-vcard-fn title=md-vcard-fn><code>fn</code></dfn></dt>

   <dd>

    <p>Gives the formatted text corresponding to the name of the
    person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Exactly one property with the name <code title=md-vcard-fn><a href=#md-vcard-fn>fn</a></code> must be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-n title=md-vcard-n><code>n</code></dfn></dt>

   <dd>

    <p>Gives the structured name of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#concept-item title=concept-item>item</a> with zero or more of
    each of the <code title=md-vcard-n-family-name><a href=#md-vcard-n-family-name>family-name</a></code>, <code title=md-vcard-n-given-name><a href=#md-vcard-n-given-name>given-name</a></code>, <code title=md-vcard-n-additional-name><a href=#md-vcard-n-additional-name>additional-name</a></code>, <code title=md-vcard-n-honorific-prefix><a href=#md-vcard-n-honorific-prefix>honorific-prefix</a></code>, and
    <code title=md-vcard-n-honorific-suffix><a href=#md-vcard-n-honorific-suffix>honorific-suffix</a></code>
    properties.</p>

    <p>Exactly one property with the name <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> must be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-n-family-name title=md-vcard-n-family-name><code>family-name</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>

   <dd>

    <p>Gives the family name of the person, or the full name of the
    organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-n-family-name><a href=#md-vcard-n-family-name>family-name</a></code> may be present
    within the <a href=#concept-item title=concept-item>item</a> that forms the
    <a href=#concept-property-value title=concept-property-value>value</a> of the <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-n-given-name title=md-vcard-n-given-name><code>given-name</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>

   <dd>

    <p>Gives the given-name of the person.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-n-given-name><a href=#md-vcard-n-given-name>given-name</a></code> may be present
    within the <a href=#concept-item title=concept-item>item</a> that forms the
    <a href=#concept-property-value title=concept-property-value>value</a> of the <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-n-additional-name title=md-vcard-n-additional-name><code>additional-name</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>

   <dd>

    <p>Gives the any additional names of the person.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-n-additional-name><a href=#md-vcard-n-additional-name>additional-name</a></code> may be
    present within the <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of the
    <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-n-honorific-prefix title=md-vcard-n-honorific-prefix><code>honorific-prefix</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>

   <dd>

    <p>Gives the honorific prefix of the person.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-n-honorific-prefix><a href=#md-vcard-n-honorific-prefix>honorific-prefix</a></code> may be
    present within the <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of the
    <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-n-honorific-suffix title=md-vcard-n-honorific-suffix><code>honorific-suffix</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>

   <dd>

    <p>Gives the honorific suffix of the person.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-n-honorific-suffix><a href=#md-vcard-n-honorific-suffix>honorific-suffix</a></code> may be
    present within the <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of the
    <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-nickname title=md-vcard-nickname><code>nickname</code></dfn></dt>

   <dd>

    <p>Gives the nickname of the person or organization.</p>

    <!-- copied from vCard -->
    <p class=note>The nickname is the descriptive name given instead
    of or in addition to the one belonging to a person, place, or
    thing. It can also be used to specify a familiar form of a proper
    name specified by the <code title=md-vcard-fn><a href=#md-vcard-fn>fn</a></code> or <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> properties.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-nickname><a href=#md-vcard-nickname>nickname</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-photo title=md-vcard-photo><code>photo</code></dfn></dt>

   <dd>

    <p>Gives a photograph of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#absolute-url>absolute URL</a>.</p>

    <p>Any number of properties with the name <code title=md-vcard-photo><a href=#md-vcard-photo>photo</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-bday title=md-vcard-bday><code>bday</code></dfn></dt>

   <dd>

    <p>Gives the birth date of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be a
    <a href=#valid-date-string>valid date string</a>.</p>

    <p>A single property with the name <code title=md-vcard-bday><a href=#md-vcard-bday>bday</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-adr title=md-vcard-adr><code>adr</code></dfn></dt>

   <dd>

    <p>Gives the delivery address of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#concept-item title=concept-item>item</a> with zero or more <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code>, <code title=md-vcard-adr-post-office-box><a href=#md-vcard-adr-post-office-box>post-office-box</a></code>, <code title=md-vcard-adr-extended-address><a href=#md-vcard-adr-extended-address>extended-address</a></code>, and
    <code title=md-vcard-adr-street-address><a href=#md-vcard-adr-street-address>street-address</a></code>
    properties, and optionally a <code title=md-vcard-adr-locality><a href=#md-vcard-adr-locality>locality</a></code> property, optionally
    a <code title=md-vcard-adr-region><a href=#md-vcard-adr-region>region</a></code> property,
    optionally a <code title=md-vcard-adr-postal-code><a href=#md-vcard-adr-postal-code>postal-code</a></code> property, and
    optionally a <code title=md-vcard-adr-country-name><a href=#md-vcard-adr-country-name>country-name</a></code>
    property.</p>

    <p>If no <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> properties
    are present within an <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
    <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, then the <a href=#address-type-strings>address type
    strings</a> <code title=mv-vcard-type-adr-intl>intl</code>,
    <code title=mv-vcard-type-adr-postal>postal</code>, <code title=mv-vcard-type-adr-parcel>parcel</code>, and <code title=mv-vcard-type-adr-work>work</code> are implied.</p>

    <p>Any number of properties with the name <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-adr-type title=md-vcard-adr-type><code>type</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>

   <dd>

    <p>Gives the type of delivery address.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
    is equal to one of the <a href=#address-type-strings>address type strings</a>.</p>

    <p>Within each <a href=#concept-item title=concept-item>item</a> with the
    type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
    than one <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> property whose value is
    <code title=md-vcard-type-adr-pref><a href=#md-vcard-type-adr-pref>pref</a></code>.</p>

    <p>Any number of properties with the name <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> may be present within the
    <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> property per distinct
    value.</p>

   </dd>

   <dt><dfn id=md-vcard-adr-post-office-box title=md-vcard-adr-post-office-box><code>post-office-box</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>

   <dd>

    <p>Gives the post office box component of the delivery address of
    the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-adr-post-office-box><a href=#md-vcard-adr-post-office-box>post-office-box</a></code> may be
    present within the <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
    <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-adr-extended-address title=md-vcard-adr-extended-address><code>extended-address</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>

   <dd>

    <p>Gives an additional component of the delivery address of the
    person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-adr-extended-address><a href=#md-vcard-adr-extended-address>extended-address</a></code> may
    be present within the <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
    <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-adr-street-address title=md-vcard-adr-street-address><code>street-address</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>

   <dd>

    <p>Gives the street address component of the delivery address of
    the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-adr-street-address><a href=#md-vcard-adr-street-address>street-address</a></code> may be
    present within the <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
    <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-adr-locality title=md-vcard-adr-locality><code>locality</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>

   <dd>

    <p>Gives the locality component (e.g. city) of the delivery
    address of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>A single property with the name <code title=md-vcard-adr-locality><a href=#md-vcard-adr-locality>locality</a></code> may be present
    within the <a href=#concept-item title=concept-item>item</a> that forms the
    <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-adr-region title=md-vcard-adr-region><code>region</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>

   <dd>

    <p>Gives the region component (e.g. state or province) of the
    delivery address of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>A single property with the name <code title=md-vcard-adr-region><a href=#md-vcard-adr-region>region</a></code> may be present within
    the <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-adr-postal-code title=md-vcard-adr-postal-code><code>postal-code</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>

   <dd>

    <p>Gives the postal code component of the delivery address of the
    person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>A single property with the name <code title=md-vcard-adr-postal-code><a href=#md-vcard-adr-postal-code>postal-code</a></code> may be present
    within the <a href=#concept-item title=concept-item>item</a> that forms the
    <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-adr-country-name title=md-vcard-adr-country-name><code>country-name</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>

   <dd>

    <p>Gives the country name component of the delivery address of the
    person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>A single property with the name <code title=md-vcard-adr-country-name><a href=#md-vcard-adr-country-name>country-name</a></code> may be
    present within the <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
    <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-label title=md-vcard-label><code>label</code></dfn></dt>

   <dd>

    <p>Gives the formatted text corresponding to the delivery address
    of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    either text or an <a href=#concept-item title=concept-item>item</a> with zero
    or more <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> properties
    and exactly one <code title=md-vcard-label-value><a href=#md-vcard-label-value>value</a></code>
    property.</p>

    <p>If no <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> properties
    are present within an <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of a
    <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or if the <a href=#concept-property-value title=concept-property-value>value</a> of such a <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property is text, then the
    <a href=#address-type-strings>address type strings</a> <code title=mv-vcard-type-adr-intl>intl</code>, <code title=mv-vcard-type-adr-postal>postal</code>, <code title=mv-vcard-type-adr-parcel>parcel</code>, and <code title=mv-vcard-type-adr-work>work</code> are implied.</p>

    <p>Any number of properties with the name <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-label-type title=md-vcard-label-type><code>type</code></dfn> (inside <code title=md-vcard-label><a href=#md-vcard-label>label</a></code>)</dt>

   <dd>

    <p>Gives the type of delivery address.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
    is equal to one of the <a href=#address-type-strings>address type strings</a>.</p>

    <p>Within each <a href=#concept-item title=concept-item>item</a> with the
    type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
    than one <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> property whose value is
    <code title=md-vcard-type-adr-pref><a href=#md-vcard-type-adr-pref>pref</a></code>.</p>

    <p>Any number of properties with the name <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> may be present within the
    <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of a <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> property per distinct
    value.</p>

   </dd>

   <dt><dfn id=md-vcard-label-value title=md-vcard-label-value><code>value</code></dfn> (inside <code title=md-vcard-label><a href=#md-vcard-label>label</a></code>)</dt>

   <dd>

    <p>Gives the actual formatted text corresponding to the delivery
    address of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Exactly one property with the name <code title=md-vcard-label-value><a href=#md-vcard-label-value>value</a></code> must be present within
    the <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of a <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-tel title=md-vcard-tel><code>tel</code></dfn></dt>

   <dd>

    <p>Gives the telephone number of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    either text that can be interpreted as a telephone number as
    defined in the CCITT specifications E.163 and X.121, or an <a href=#concept-item title=concept-item>item</a> with zero or more <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> properties and exactly one
    <code title=md-vcard-tel-value><a href=#md-vcard-tel-value>value</a></code> property. <a href=#refsE163>[E163]</a> <a href=#refsX121>[X121]</a></p>

    <p>If no <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> properties
    are present within an <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of a
    <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or if the <a href=#concept-property-value title=concept-property-value>value</a> of such a <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property is text, then the <a href=#telephone-type-strings title="telephone type strings">telephone type string</a> <code title=mv-vcard-type-tel-voice>voice</code> is implied.</p>

    <p>Any number of properties with the name <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-tel-type title=md-vcard-tel-type><code>type</code></dfn> (inside <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code>)</dt>

   <dd>

    <p>Gives the type of telephone number.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
    is equal to one of the <a href=#telephone-type-strings>telephone type strings</a>.</p>

    <p>Within each <a href=#concept-item title=concept-item>item</a> with the
    type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
    than one <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> property whose value is
    <code title=md-vcard-type-tel-pref><a href=#md-vcard-type-tel-pref>pref</a></code>.</p>

    <p>Any number of properties with the name <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> may be present within the
    <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of a <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> property per distinct
    value.</p>

   </dd>

   <dt><dfn id=md-vcard-tel-value title=md-vcard-tel-value><code>value</code></dfn> (inside <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code>)</dt>

   <dd>

    <p>Gives the actual telephone number of the person or
    organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that can be interpreted as a telephone number as defined in
    the CCITT specifications E.163 and X.121. <a href=#refsE163>[E163]</a> <a href=#refsX121>[X121]</a></p>

    <p>Exactly one property with the name <code title=md-vcard-tel-value><a href=#md-vcard-tel-value>value</a></code> must be present within the
    <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of a <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-email title=md-vcard-email><code>email</code></dfn></dt>

   <dd>

    <p>Gives the e-mail address of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    either text or an <a href=#concept-item title=concept-item>item</a> with zero
    or more <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> properties
    and exactly one <code title=md-vcard-email-value><a href=#md-vcard-email-value>value</a></code>
    property.</p>

    <p>If no <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> properties
    are present within an <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
    <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or if the <a href=#concept-property-value title=concept-property-value>value</a> of such an <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property is text, then the
    <a href=#e-mail-type-strings title="e-mail type strings">e-mail type string</a> <code title=mv-vcard-type-email-internet>internet</code> is
    implied.</p>

    <p>Any number of properties with the name <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-email-type title=md-vcard-email-type><code>type</code></dfn> (inside <code title=md-vcard-email><a href=#md-vcard-email>email</a></code>)</dt>

   <dd>

    <p>Gives the type of e-mail address.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
    is equal to one of the <a href=#e-mail-type-strings>e-mail type strings</a>.</p>

    <p>Within each <a href=#concept-item title=concept-item>item</a> with the
    type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
    than one <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> property whose value is
    <code title=md-vcard-type-email-pref><a href=#md-vcard-type-email-pref>pref</a></code>.</p>

    <p>Any number of properties with the name <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> may be present within the
    <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> property per distinct
    value.</p>

   </dd>

   <dt><dfn id=md-vcard-email-value title=md-vcard-email-value><code>value</code></dfn> (inside <code title=md-vcard-email><a href=#md-vcard-email>email</a></code>)</dt>

   <dd>

    <p>Gives the actual e-mail address of the person or
    organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Exactly one property with the name <code title=md-vcard-email-value><a href=#md-vcard-email-value>value</a></code> must be present within
    the <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-mailer title=md-vcard-mailer><code>mailer</code></dfn></dt>

   <dd>

    <p>Gives the name of the e-mail software used by the person or
    organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-mailer><a href=#md-vcard-mailer>mailer</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-tz title=md-vcard-tz><code>tz</code></dfn></dt>

   <dd>

    <p>Gives the time zone of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text and must match the following syntax:</p>

    <ol><li>Either a U+002B PLUS SIGN character (+) or a U+002D
     HYPHEN-MINUS character (-).</li>

     <li>A <a href=#valid-non-negative-integer>valid non-negative integer</a> that is exactly two
     digits long and that represents a number in the range
     00..23.</li>

     <li>A U+003A COLON character (:).</li>

     <li>A <a href=#valid-non-negative-integer>valid non-negative integer</a> that is exactly two
     digits long and that represents a number in the range
     00..59.</li>

    </ol><p>Any number of properties with the name <code title=md-vcard-tz><a href=#md-vcard-tz>tz</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-geo title=md-vcard-geo><code>geo</code></dfn></dt>

   <dd>

    <p>Gives the geographical position of the person or
    organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text and must match the following syntax:</p>

    <ol><li>Optionally, either a U+002B PLUS SIGN character (+) or a
     U+002D HYPHEN-MINUS character (-).</li>

     <li>One or more digits in the range U+0030 DIGIT ZERO (0) to
     U+0039 DIGIT NINE (9).</li>

     <li>Optionally*, a U+002E FULL STOP character (.) followed by one
     or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
     NINE (9).</li>

     <li>A U+003B SEMICOLON character (;).</li>

     <li>Optionally, either a U+002B PLUS SIGN character (+) or a
     U+002D HYPHEN-MINUS character (-).</li>

     <li>One or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
     DIGIT NINE (9).</li>

     <li>Optionally*, a U+002E FULL STOP character (.) followed by one
     or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
     NINE (9).</li>

    </ol><p>The optional components marked with an asterisk (*) should be
    included, and should have six digits each.</p>

    <!-- copied from vCard -->
    <p class=note>The value specifies latitude and longitude, in
    that order (i.e., "LAT LON" ordering), in decimal degrees. The
    longitude represents the location east and west of the prime
    meridian as a positive or negative real number, respectively.  The
    latitude represents the location north and south of the equator as
    a positive or negative real number, respectively.</p>

    <p>Any number of properties with the name <code title=md-vcard-geo><a href=#md-vcard-geo>geo</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-title title=md-vcard-title><code>title</code></dfn></dt>

   <dd>

    <p>Gives the job title, functional position or function of the
    person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-title><a href=#md-vcard-title>title</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-role title=md-vcard-role><code>role</code></dfn></dt>

   <dd>

    <p>Gives the role, occupation, or business category of the person
    or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-role><a href=#md-vcard-role>role</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-logo title=md-vcard-logo><code>logo</code></dfn></dt>

   <dd>

    <p>Gives the logo of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#absolute-url>absolute URL</a>.</p>

    <p>Any number of properties with the name <code title=md-vcard-logo><a href=#md-vcard-logo>logo</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-agent title=md-vcard-agent><code>agent</code></dfn></dt>

   <dd>

    <p>Gives the contact information of another person who will act on
    behalf of the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    either an <a href=#concept-item title=concept-item>item</a> with the type
    <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or an <a href=#absolute-url>absolute
    URL</a>, or text.</p>

    <p>Any number of properties with the name <code title=md-vcard-agent><a href=#md-vcard-agent>agent</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-org title=md-vcard-org><code>org</code></dfn></dt>

   <dd>

    <p>Gives the name and units of the organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    either text or an <a href=#concept-item title=concept-item>item</a> with one
    <code title=md-vcard-org-organization-name><a href=#md-vcard-org-organization-name>organization-name</a></code>
    property and zero or more <code title=md-vcard-n-organization-unit>organization-unit</code>
    properties.</p>

    <p>Any number of properties with the name <code title=md-vcard-org><a href=#md-vcard-org>org</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-org-organization-name title=md-vcard-org-organization-name><code>organization-name</code></dfn> (inside <code title=md-vcard-org><a href=#md-vcard-org>org</a></code>)</dt>

   <dd>

    <p>Gives the name of the organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Exactly one property with the name <code title=md-vcard-org-organization-name><a href=#md-vcard-org-organization-name>organization-name</a></code>
    must be present within the <a href=#concept-item title=concept-item>item</a>
    that forms the <a href=#concept-property-value title=concept-property-value>value</a>
    of an <code title=md-vcard-org><a href=#md-vcard-org>org</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-org-organization-unit title=md-vcard-org-organization-unit><code>organization-unit</code></dfn> (inside <code title=md-vcard-org><a href=#md-vcard-org>org</a></code>)</dt>

   <dd>

    <p>Gives the name of the organization unit.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-org-organization-unit><a href=#md-vcard-org-organization-unit>organization-unit</a></code>
    may be present within the <a href=#concept-item title=concept-item>item</a>
    that forms the <a href=#concept-property-value title=concept-property-value>value</a>
    of the <code title=md-vcard-org><a href=#md-vcard-org>org</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-categories title=md-vcard-categories><code>categories</code></dfn></dt>

   <dd>

    <p>Gives the name of a category or tag that the person or
    organization could be classified as.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-categories><a href=#md-vcard-categories>categories</a></code> may be present
    within each <a href=#concept-item title=concept-item>item</a> with the type
    <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-note title=md-vcard-note><code>note</code></dfn></dt>

   <dd>

    <p>Gives supplemental information or a comment about the person or
    organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-note><a href=#md-vcard-note>note</a></code> may be present
    within each <a href=#concept-item title=concept-item>item</a> with the type
    <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <!-- PRODID not included -->


   <dt><dfn id=md-vcard-rev title=md-vcard-rev><code>rev</code></dfn></dt>

   <dd>

    <p>Gives the revision date and time of the contact
    information.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that is a <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>

    <!-- copied from vCard -->
    <p class=note>The value distinguishes the current revision of
    the information for other renditions of the information.</p>

    <p>Any number of properties with the name <code title=md-vcard-rev><a href=#md-vcard-rev>rev</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-sort-string title=md-vcard-sort-string><code>sort-string</code></dfn></dt>

   <dd>

    <p>Gives the string to be used for sorting the person or
    organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vcard-sort-string><a href=#md-vcard-sort-string>sort-string</a></code> may be present
    within each <a href=#concept-item title=concept-item>item</a> with the type
    <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <dt><dfn id=md-vcard-sound title=md-vcard-sound><code>sound</code></dfn></dt>

   <dd>

    <p>Gives a sound file relating to the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#absolute-url>absolute URL</a>.</p>

    <p>Any number of properties with the name <code title=md-vcard-sound><a href=#md-vcard-sound>sound</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <!-- UID not included - use "itemid" -->


   <dt><dfn id=md-vcard-url title=md-vcard-url><code>url</code></dfn></dt>

   <dd>

    <p>Gives a <a href=#url>URL</a> relating to the person or
    organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#absolute-url>absolute URL</a>.</p>

    <p>Any number of properties with the name <code title=md-vcard-url><a href=#md-vcard-url>url</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <!-- VERSION not included - always 3.0 -->


   <dt><dfn id=md-vcard-class title=md-vcard-class><code>class</code></dfn></dt>

   <dd>

    <p>Gives the access classification of the information regarding
    the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text with one of the following values:</p>

    <ul class=brief><li><code title="">public</code></li>
     <li><code title="">private</code></li>
     <li><code title="">confidential</code></li>
    </ul><p class=warning>This is merely advisory and cannot be
    considered a confidentiality measure.</p>

    <p>Any number of properties with the name <code title=md-vcard-class><a href=#md-vcard-class>class</a></code> may be present
    within each <a href=#concept-item title=concept-item>item</a> with the type
    <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


   <!-- KEY not included - no way to include binary data at this time -->


   <!-- IMPP is from RFC4770 -->

   <dt><dfn id=md-vcard-impp title=md-vcard-impp><code>impp</code></dfn></dt>

   <dd>

    <p>Gives a <a href=#url>URL</a> for instant messaging and presence
    protocol communications with the person or organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    either an <a href=#absolute-url>absolute URL</a> or an <a href=#concept-item title=concept-item>item</a> with zero or more <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> properties and exactly one
    <code title=md-vcard-impp-value><a href=#md-vcard-impp-value>value</a></code> property.</p>

    <p>If no <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> properties
    are present within an <a href=#concept-item title=concept-item>item</a> that
    forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
    <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or if the <a href=#concept-property-value title=concept-property-value>value</a> of such an <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property is an <a href=#absolute-url>absolute
    URL</a>, then no <a href=#impp-type-strings>IMPP type strings</a> are
    implied.</p>

    <p>Any number of properties with the name <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>

   <dt><dfn id=md-vcard-impp-type title=md-vcard-impp-type><code>type</code></dfn> (inside <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code>)</dt>

   <dd>

    <p>Gives the intended use of the IMPP <a href=#url>URL</a>.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
    is equal to one of the <a href=#impp-type-strings>IMPP type strings</a>.</p>

    <p>Within each <a href=#concept-item title=concept-item>item</a> with the
    type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
    than one <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> property whose value is
    <code title=md-vcard-type-impp-pref><a href=#md-vcard-type-impp-pref>pref</a></code>.</p>

    <p>Any number of properties with the name <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> may be present within the
    <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> property per distinct
    value.</p>

   </dd>

   <dt><dfn id=md-vcard-impp-value title=md-vcard-impp-value><code>value</code></dfn> (inside <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code>)</dt>

   <dd>

    <p>Gives the actual <a href=#url>URL</a> for instant messaging and
    presence protocol communications with the person or
    organization.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#absolute-url>absolute URL</a>.</p>

    <p>Exactly one property with the name <code title=md-vcard-impp-value><a href=#md-vcard-impp-value>value</a></code> must be present within
    the <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>

   </dd>


  </dl><p>The <dfn id=address-type-strings>address type strings</dfn> are:</p>

  <dl><dt><dfn id=md-vcard-type-adr-dom title=md-vcard-type-adr-dom><code>dom</code></dfn></dt>
   <dd>
    <p>Indicates a domestic delivery address.</p>
   </dd>

   <dt><dfn id=md-vcard-type-adr-intl title=md-vcard-type-adr-intl><code>intl</code></dfn></dt>
   <dd>
    <p>Indicates an international delivery address.</p>
   </dd>

   <dt><dfn id=md-vcard-type-adr-postal title=md-vcard-type-adr-postal><code>postal</code></dfn></dt>
   <dd>
    <p>Indicates a postal delivery address.</p>
   </dd>

   <dt><dfn id=md-vcard-type-adr-parcel title=md-vcard-type-adr-parcel><code>parcel</code></dfn></dt>
   <dd>
    <p>Indicates a parcel delivery address.</p>
   </dd>

   <dt><dfn id=md-vcard-type-adr-home title=md-vcard-type-adr-home><code>home</code></dfn></dt>
   <dd>
    <p>Indicates a residential delivery address.</p>
   </dd>

   <dt><dfn id=md-vcard-type-adr-work title=md-vcard-type-adr-work><code>work</code></dfn></dt>
   <dd>
    <p>Indicates a delivery address for a place of work.</p>
   </dd>

   <dt><dfn id=md-vcard-type-adr-pref title=md-vcard-type-adr-pref><code>pref</code></dfn></dt>
   <dd>

    <p>Indicates the preferred delivery address when multiple
    addresses are specified.</p>

   </dd>

  </dl><p>The <dfn id=telephone-type-strings>telephone type strings</dfn> are:</p>

  <dl><dt><dfn id=md-vcard-type-tel-home title=md-vcard-type-tel-home><code>home</code></dfn></dt>
   <dd>
    <p>Indicates a residential number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-msg title=md-vcard-type-tel-msg><code>msg</code></dfn></dt>
   <dd>
    <p>Indicates a telephone number with voice messaging support.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-work title=md-vcard-type-tel-work><code>work</code></dfn></dt>
   <dd>
    <p>Indicates a telephone number for a place of work.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-voice title=md-vcard-type-tel-voice><code>voice</code></dfn></dt>
   <dd>
    <p>Indicates a voice telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-fax title=md-vcard-type-tel-fax><code>fax</code></dfn></dt>
   <dd>
    <p>Indicates a facsimile telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-cell title=md-vcard-type-tel-cell><code>cell</code></dfn></dt>
   <dd>
    <p>Indicates a cellular telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-video title=md-vcard-type-tel-video><code>video</code></dfn></dt>
   <dd>
    <p>Indicates a video conferencing telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-pager title=md-vcard-type-tel-pager><code>pager</code></dfn></dt>
   <dd>
    <p>Indicates a paging device telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-bbs title=md-vcard-type-tel-bbs><code>bbs</code></dfn></dt>
   <dd>
    <p>Indicates a bulletin board system telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-modem title=md-vcard-type-tel-modem><code>modem</code></dfn></dt>
   <dd>
    <p>Indicates a MODEM-connected telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-car title=md-vcard-type-tel-car><code>car</code></dfn></dt>
   <dd>
    <p>Indicates a car-phone telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-isdn title=md-vcard-type-tel-isdn><code>isdn</code></dfn></dt>
   <dd>
    <p>Indicates an ISDN service telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-pcs title=md-vcard-type-tel-pcs><code>pcs</code></dfn></dt>
   <dd>
    <p>Indicates a personal communication services telephone number.</p>
   </dd>

   <dt><dfn id=md-vcard-type-tel-pref title=md-vcard-type-tel-pref><code>pref</code></dfn></dt>
   <dd>

    <p>Indicates the preferred telephone number when multiple
    telephone numbers are specified.</p>

   </dd>

  </dl><p>The <dfn id=e-mail-type-strings>e-mail type strings</dfn> are:</p>

  <dl><dt><dfn id=md-vcard-type-email-internet title=md-vcard-type-email-internet><code>internet</code></dfn></dt>
   <dd>
    <p>Indicates an Internet e-mail address.</p>
   </dd>

   <dt><dfn id=md-vcard-type-email-x400 title=md-vcard-type-email-x400><code>x400</code></dfn></dt>
   <dd>
    <p>Indicates a X.400 addressing type.</p>
   </dd>

   <dt><dfn id=md-vcard-type-email-pref title=md-vcard-type-email-pref><code>pref</code></dfn></dt>
   <dd>

    <p>Indicates the preferred e-mail address when multiple e-mail
    addresses are specified.</p>

   </dd>

  </dl><p>The <dfn id=impp-type-strings>IMPP type strings</dfn> are:</p>

  <dl><dt><dfn id=md-vcard-type-impp-personal title=md-vcard-type-impp-personal><code>personal</code></dfn></dt>
   <dt><dfn id=md-vcard-type-impp-business title=md-vcard-type-impp-business><code>business</code></dfn></dt>
   <dd>
    <p>Indicates the type of communication for which this IMPP
    <a href=#url>URL</a> is appropriate.</p>
   </dd>

   <dt><dfn id=md-vcard-type-impp-home title=md-vcard-type-impp-home><code>home</code></dfn></dt>
   <dt><dfn id=md-vcard-type-impp-work title=md-vcard-type-impp-work><code>work</code></dfn></dt>
   <dt><dfn id=md-vcard-type-impp-mobile title=md-vcard-type-impp-mobile><code>mobile</code></dfn></dt>
   <dd>
    <p>Indicates the location of a device associated with this IMPP
    <a href=#url>URL</a>.</p>
   </dd>

   <dt><dfn id=md-vcard-type-impp-pref title=md-vcard-type-impp-pref><code>pref</code></dfn></dt>
   <dd>
    <p>Indicates the preferred address when multiple IMPP
    <a href=#url>URL</a>s are specified.</p>
   </dd>

  </dl><h5 id=conversion-to-vcard><span class=secno>5.4.1.1 </span>Conversion to vCard</h5>

  <p>Given a list of nodes <var title="">nodes</var> in a
  <code><a href=#document>Document</a></code>, a user agent must run the following algorithm
  to <dfn id=extracting-a-vcard title="extracting a vCard">extract any vCard data
  represented by those nodes</dfn> (only the first vCard is
  returned):</p>

  <ol><li><p>If none of the nodes in <var title="">nodes</var> are <a href=#concept-item title=concept-item>items</a> with the <a href=#item-type>item type</a>
   <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, then
   there is no vCard. Abort the algorithm, returning nothing.</li>

   <li><p>Let <var title="">node</var> be the first node in <var title="">nodes</var> that is an <a href=#concept-item title=concept-item>item</a> with the <a href=#item-type>item type</a>
   <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</li>

   <li><p>Let <var title="">output</var> be an empty string.</li>

   <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">BEGIN</code>" and the value "<code title="">VCARD</code>"
   to <var title="">output</var>.</li>

   <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">PROFILE</code>" and the value "<code title="">VCARD</code>" to <var title="">output</var>.</li>

   <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">VERSION</code>" and the value "<code title="">3.0</code>"
   to <var title="">output</var>.</li>

   <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">SOURCE</code>" and the result of <a href=#escaping-the-vcard-text-string>escaping the vCard
   text string</a> that is <a href="#the-document's-current-address">the document's current
   address</a> as the value to <var title="">output</var>.</li>

   <li><p>If <a href=#the-title-element>the <code>title</code> element</a> is not null,
   <a href=#add-a-vcard-line>add a vCard line</a> with the type "<code title="">NAME</code>" and with the result of <a href=#escaping-the-vcard-text-string>escaping the
   vCard text string</a> obtained from the <code><a href=#textcontent>textContent</a></code>
   of <a href=#the-title-element>the <code>title</code> element</a> as the value to <var title="">output</var>.</li>

   <li><p>If <var title="">node</var> has a <a href=#global-identifier>global
   identifier</a>, <a href=#add-a-vcard-line>add a vCard line</a> with the type
   "<code title="">UID</code>" and with the result of <a href=#escaping-the-vcard-text-string>escaping
   the vCard text string</a> of that <a href=#global-identifier>global identifier</a>
   as the value to <var title="">output</var>.</li>

   <li>

    <p>For each element <var title="">element</var> that is <a href=#the-properties-of-an-item title="the properties of an item">a property of the item</a>
    <var title="">node</var>: for each name <var title="">name</var>
    in <var title="">element</var>'s <a href=#property-names>property names</a>, run
    the following substeps:</p>

    <ol><li><p>Let <var title="">parameters</var> be an empty set of
     name-value pairs.</li>

     <li>

      <p>Run the appropriate set of substeps from the following
      list. The steps will set a variable <var title="">value</var>,
      which is used in the next step.</p>

      <dl><dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> <var title="">subitem</var>
       and <var title="">name</var> is <code title=md-vcard-n><a href=#md-vcard-n>n</a></code></dt>

       <dd>

        <ol><li><p>Let <var title="">value</var> be the empty
         string.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-n-family-name><a href=#md-vcard-n-family-name>family-name</a></code> in
         <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-n-given-name><a href=#md-vcard-n-given-name>given-name</a></code> in <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-n-additional-name><a href=#md-vcard-n-additional-name>additional-name</a></code> in
         <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-n-honorific-prefix><a href=#md-vcard-n-honorific-prefix>honorific-prefix</a></code>
         in <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-n-honorific-suffix><a href=#md-vcard-n-honorific-suffix>honorific-suffix</a></code>
         in <var title="">subitem</var>.</p>

        </ol></dd>

       <dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> <var title="">subitem</var>
       and <var title="">name</var> is <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code></dt>

       <dd>

        <ol><li><p>Let <var title="">value</var> be the empty
         string.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-vcard-subproperties>collecting vCard subproperties</a> named <code title=md-vcard-adr-post-office-box><a href=#md-vcard-adr-post-office-box>post-office-box</a></code>
         in <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-vcard-subproperties>collecting vCard subproperties</a> named <code title=md-vcard-adr-extended-address><a href=#md-vcard-adr-extended-address>extended-address</a></code>
         in <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-vcard-subproperties>collecting vCard subproperties</a> named <code title=md-vcard-adr-street-address><a href=#md-vcard-adr-street-address>street-address</a></code> in
         <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-adr-locality><a href=#md-vcard-adr-locality>locality</a></code> in <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-adr-region><a href=#md-vcard-adr-region>region</a></code> in <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-adr-postal-code><a href=#md-vcard-adr-postal-code>postal-code</a></code> in
         <var title="">subitem</var>.</p>

         <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-adr-country-name><a href=#md-vcard-adr-country-name>country-name</a></code>
         in <var title="">subitem</var>.</p>

         <li><p>If there is a property named <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> in <var title="">subitem</var>, and the first such property has a
         <a href=#concept-property-value title=concept-property-value>value</a> that is not
         an <a href=#concept-item title=concept-item>item</a> and whose value
         consists only of <a href=#alphanumeric-ascii-characters>alphanumeric ASCII characters</a>,
         then add a parameter named "<code title="">TYPE</code>" whose
         value is the <a href=#concept-property-value title=concept-property-value>value</a> of that property
         to <var title="">parameters</var>.</li>

        </ol></dd>

       <dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> <var title="">subitem</var>
       and <var title="">name</var> is <code title=md-vcard-org><a href=#md-vcard-org>org</a></code></dt>

       <dd>

        <ol><li><p>Let <var title="">value</var> be the empty
         string.</li>

         <li><p>Append to <var title="">value</var> the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title=md-vcard-org-organization-name><a href=#md-vcard-org-organization-name>organization-name</a></code>
         in <var title="">subitem</var>.</p>

         <li>

          <p>For each property named <code title=md-vcard-org-organization-unit><a href=#md-vcard-org-organization-unit>organization-unit</a></code>
          in <var title="">subitem</var>, run the following steps:</p>

          <ol><li><p>If the <a href=#concept-property-value title=concept-property-value>value</a> of the property
           is an <a href=#concept-item title=concept-item>item</a>, then skip
           this property.</li>

           <li><p>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>

           <li><p>Append the result of <a href=#escaping-the-vcard-text-string>escaping the vCard text
           string</a> given by the <a href=#concept-property-value title=concept-property-value>value</a> of the property
           to <var title="">value</var>.</li>

          </ol></li>

        </ol></dd>

       <dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> <var title="">subitem</var>
       with the <a href=#item-type>item type</a> <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>
       and <var title="">name</var> is <code title=md-vcard-agent><a href=#md-vcard-agent>agent</a></code></dt>

       <dd>

        <ol><li><p>Let <var title="">value</var> be the result of
         <a href=#escaping-the-vcard-text-string>escaping the vCard text string</a> obtained from
         <a href=#extracting-a-vcard>extracting a vCard</a> from the element that
         represents <var title="">subitem</var>.</li>

         <li><p>Add a parameter named "<code title="">VALUE</code>"
         whose value is "<code title="">VCARD</code>" to <var title="">parameters</var>.</li>

        </ol></dd>

       <dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> and <var title="">name</var>
       is none of the above</dt>

       <dd>

        <ol><li><p>Let <var title="">value</var> be the result of
         <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
         <code title="">value</code> in <var title="">subitem</var>.</p>

         <li><p>If there is a property named <code title="">type</code> in <var title="">subitem</var>, and the
         first such property has a <a href=#concept-property-value title=concept-property-value>value</a> that is not an
         <a href=#concept-item title=concept-item>item</a> and whose value
         consists only of <a href=#alphanumeric-ascii-characters>alphanumeric ASCII characters</a>,
         then add a parameter named "<code title="">TYPE</code>" whose
         value is the <a href=#concept-property-value title=concept-property-value>value</a> of that property
         to <var title="">parameters</var>.</li>

        </ol></dd>

       <dt>Otherwise (the property's <a href=#concept-property-value title=concept-property-value>value</a> is not an <a href=#concept-item title=concept-item>item</a>)</dt>

       <dd>

        <ol><li><p>Let <var title="">value</var> be the property's <a href=#concept-property-value title=concept-property-value>value</a>.</li>

         <li><p>If <var title="">element</var> is one of the <a href=#url-property-elements>URL
         property elements</a>, add a parameter with the name "<code title="">VALUE</code>" and the value "<code title="">URI</code>" to <var title="">parameters</var>.</li>

         <li><p>Otherwise, if <var title="">element</var> is a
         <code><a href=#the-time-element>time</a></code> element and the <var title="">value</var> is
         a <a href=#valid-date-string>valid date string</a>, add a parameter with the name
         "<code title="">VALUE</code>" and the value "<code title="">DATE</code>" to <var title="">parameters</var>.</li>

         <li><p>Otherwise, if <var title="">element</var> is a
         <code><a href=#the-time-element>time</a></code> element and the <var title="">value</var> is
         a <a href=#valid-global-date-and-time-string>valid global date and time string</a>, add a
         parameter with the name "<code title="">VALUE</code>" and the
         value "<code title="">DATE-TIME</code>" to <var title="">parameters</var>.</li>

         <li><p>Prefix every U+005C REVERSE SOLIDUS character (\) in
         <var title="">value</var> with another U+005C REVERSE SOLIDUS
         character (\).</li>

         <li><p>Prefix every U+002C COMMA character (,) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
         (\).</li>

         <li><p>Unless <var title="">name</var> is <code title=md-vcard-geo><a href=#md-vcard-geo>geo</a></code>, prefix every U+003B SEMICOLON
         character (;) in <var title="">value</var> with a U+005C
         REVERSE SOLIDUS character (\).</li>

         <li><p>Replace every U+000D CARRIAGE RETURN U+000A LINE FEED
         character pair (CRLF) in <var title="">value</var> with a
         U+005C REVERSE SOLIDUS character (\) followed by a U+006E
         LATIN SMALL LETTER N character (n).</li>

         <li><p>Replace every remaining U+000D CARRIAGE RETURN (CR) or
         U+000A LINE FEED (LF) character in <var title="">value</var>
         with a U+005C REVERSE SOLIDUS character (\) followed by a
         U+006E LATIN SMALL LETTER N character (n).</li>

        </ol></dd>

      </dl></li>

     <li>

      <p><a href=#add-a-vcard-line>Add a vCard line</a> with the type <var title="">name</var>, the parameters <var title="">parameters</var>, and the value <var title="">value</var> to <var title="">output</var>.</p>

     </li>

    </ol></li>

   <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">END</code>" and the value "<code title="">VCARD</code>"
   to <var title="">output</var>.</li>

  </ol><p>When the above algorithm says that the user agent is to <dfn id=add-a-vcard-line>add
  a vCard line</dfn> consisting of a type <var title="">type</var>,
  optionally some parameters, and a value <var title="">value</var> to
  a string <var title="">output</var>, it must run the following
  steps:</p>

  <ol><li><p>Let <var title="">line</var> be an empty string.

   <li><p>Append <var title="">type</var>, <a href=#converted-to-ascii-uppercase>converted to
   ASCII uppercase</a>, to <var title="">line</var>.</li>

   <li>

    <p>If there are any parameters, then for each parameter, in the
    order that they were added, run these substeps:</p>

    <ol><li><p>Append a U+003B SEMICOLON character (;) to <var title="">line</var>.</li>

     <li><p>Append the parameter's name to <var title="">line</var>.</li>

     <li><p>Append a U+003D EQUALS SIGN character (=) to <var title="">line</var>.</li>

     <li><p>Append the parameter's value to <var title="">line</var>.</li>

    </ol></li>

   <li><p>Append a U+003A COLON character (:) to <var title="">line</var>.</li>

   <li><p>Append <var title="">value</var> to <var title="">line</var>.</li>

   <li><p>Let <var title="">maximum length</var> be 75.</li>

   <li>

    <p>If and while <var title="">line</var> is longer than <var title="">maximum length</var> Unicode code points long, run the
    following substeps:</p>

    <ol><li><p>Append the first <var title="">maximum length</var>
     Unicode code points of <var title="">line</var> to <var title="">output</var>.</li>

     <li><p>Remove the first <var title="">maximum length</var>
     Unicode code points from <var title="">line</var>.</li>

     <li><p>Append a U+000D CARRIAGE RETURN character (CR) to <var title="">output</var>.</li>

     <li><p>Append a U+000A LINE FEED character (LF) to <var title="">output</var>.</li>

     <li><p>Append a U+0020 SPACE character to <var title="">output</var>.</li>

     <li><p>Let <var title="">maximum length</var> be 74.</li>

    </ol></li>

   <li><p>Append (what remains of) <var title="">line</var> to <var title="">output</var>.</li>

   <li><p>Append a U+000D CARRIAGE RETURN character (CR) to <var title="">output</var>.</li>

   <li><p>Append a U+000A LINE FEED character (LF) to <var title="">output</var>.</li>

  </ol><p>When the steps above require the user agent to obtain the result
  of <dfn id=collecting-vcard-subproperties>collecting vCard subproperties</dfn> named <var title="">subname</var> in <var title="">subitem</var>, the user
  agent must run the following steps:</p>

  <ol><li><p>Let <var title="">value</var> be the empty string.</li>

   <li>

    <p>For each property named <var title="">subname</var> in the item
    <var title="">subitem</var>, run the following substeps:</p>

    <ol><li><p>If the <a href=#concept-property-value title=concept-property-value>value</a>
     of the property is itself an <a href=#concept-item title=concept-item>item</a>, then skip this
     property.</li>

     <li><p>If this is not the first property named <var title="">subname</var> in <var title="">subitem</var> (ignoring
     any that were skipped by the previous step), then append a U+002C
     COMMA character (,) to <var title="">value</var>.</li>

     <li><p>Append the result of <a href=#escaping-the-vcard-text-string>escaping the vCard text
     string</a> given by the <a href=#concept-property-value title=concept-property-value>value</a> of the property to
     <var title="">value</var>.</li>

    </ol></li>

   <li><p>Return <var title="">value</var>.</li>

  </ol><p>When the steps above require the user agent to obtain the result
  of <dfn id=collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</dfn> named <var title="">subname</var> in <var title="">subitem</var>, the user
  agent must run the following steps:</p>

  <ol><li><p>If there are no properties named <var title="">subname</var>
   in <var title="">subitem</var>, then abort these substeps,
   returning the empty string.</li>

   <li><p>If the <a href=#concept-property-value title=concept-property-value>value</a> of
   the first property named <var title="">subname</var> in <var title="">subitem</var> is an <a href=#concept-item title=concept-item>item</a>, then abort these substeps,
   returning the empty string.</li>

   <li><p>Return the result of <a href=#escaping-the-vcard-text-string>escaping the vCard text
   string</a> given by the <a href=#concept-property-value title=concept-property-value>value</a> of the first property
   named <var title="">subname</var> in <var title="">subitem</var>.</li>

  </ol><p>When the above algorithms say the user agent is to <dfn id=escaping-the-vcard-text-string title="escaping the vCard text string">escape the vCard text
  string</dfn> <var title="">value</var>, the user agent must use the
  following steps:</p>

  <ol><li><p>Prefix every U+005C REVERSE SOLIDUS character (\) in <var title="">value</var> with another U+005C REVERSE SOLIDUS character
   (\).</li>

   <li><p>Prefix every U+002C COMMA character (,) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
   (\).</li>

   <li><p>Prefix every U+003B SEMICOLON character (;) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
   (\).</li>

   <li><p>Replace every U+000D CARRIAGE RETURN U+000A LINE FEED
   character pair (CRLF) in <var title="">value</var> with a U+005C
   REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL
   LETTER N character (n).</li>

   <li><p>Replace every remaining U+000D CARRIAGE RETURN (CR) or
   U+000A LINE FEED (LF) character in <var title="">value</var> with a
   U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN
   SMALL LETTER N character (n).</li>

   <li><p>Return the mutated <var title="">value</var>.</li>

  </ol><p class=note>This algorithm can generate invalid vCard output, if
  the input does not conform to the rules described for the <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>
  <a href=#item-type>item type</a> and <a href=#defined-property-name title="defined property
  name">defined property names</a>.</p> <!-- of course since vcard
  doesn't define error handling, this is somewhat problematic. -->



  <h5 id=examples-1><span class=secno>5.4.1.2 </span>Examples</h5>

  <p><i>This section is non-normative.</i></p>

  <div class=example>

   <p>Here is a long example vCard for a fictional character called
   "Jack Bauer":</p>

   <pre>&lt;section id="jack" itemscope itemtype="http://microformats.org/profile/hcard"&gt;
 &lt;h1 itemprop="fn"&gt;Jack Bauer&lt;/h1&gt;
 &lt;div itemprop="n"&gt;
  &lt;meta itemprop="given-name" content="Jack"&gt;
  &lt;meta itemprop="family-name" content="Bauer"&gt;
 &lt;/div&gt;
 &lt;img itemprop="photo" alt="" src="jack-bauer.jpg"&gt;
 &lt;p itemprop="org" itemscope&gt;
  &lt;span itemprop="organization-name"&gt;Counter-Terrorist Unit&lt;/span&gt;
  (&lt;span itemprop="organization-unit"&gt;Los Angeles Division&lt;/span&gt;)
 &lt;/p&gt;
 &lt;p&gt;
  &lt;span itemprop="adr" itemscope&gt;
   &lt;span itemprop="street-address"&gt;10201 W. Pico Blvd.&lt;/span&gt;&lt;br&gt;
   &lt;span itemprop="locality"&gt;Los Angeles&lt;/span&gt;,
   &lt;span itemprop="region"&gt;CA&lt;/span&gt;
   &lt;span itemprop="postal-code"&gt;90064&lt;/span&gt;&lt;br&gt;
   &lt;span itemprop="country-name"&gt;United States&lt;/span&gt;&lt;br&gt;
  &lt;/span&gt;
  &lt;span itemprop="geo"&gt;34.052339;-118.410623&lt;/span&gt;
 &lt;/p&gt;
 &lt;h2&gt;Assorted Contact Methods&lt;/h2&gt;
 &lt;ul&gt;
  &lt;li itemprop="tel" itemscope&gt;
   &lt;span itemprop="value"&gt;+1 (310) 597 3781&lt;/span&gt; &lt;span itemprop="type"&gt;work&lt;/span&gt;
   &lt;meta itemprop="type" content="pref"&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a itemprop="url" href="http://en.wikipedia.org/wiki/Jack_Bauer"&gt;I'm on Wikipedia&lt;/a&gt;
  so you can leave a message on my user talk page.&lt;/li&gt;
  &lt;li&gt;&lt;a itemprop="url" href="http://www.jackbauerfacts.com/"&gt;Jack Bauer Facts&lt;/a&gt;&lt;/li&gt;
  &lt;li itemprop="email"&gt;&lt;a href="mailto:j.bauer@la.ctu.gov.invalid"&gt;j.bauer@la.ctu.gov.invalid&lt;/a&gt;&lt;/li&gt;
  &lt;li itemprop="tel" itemscope&gt;
   &lt;span itemprop="value"&gt;+1 (310) 555 3781&lt;/span&gt; &lt;span&gt;
   &lt;meta itemprop="type" content="cell"&gt;mobile phone&lt;/span&gt;
  &lt;/li&gt;
 &lt;/ul&gt;
 &lt;p itemprop="note"&gt;If I'm out in the field, you may be better off contacting &lt;span
 itemprop="agent" itemscope itemtype="http://microformats.org/profile/hcard"&gt;&lt;a
 itemprop="email" href="mailto:c.obrian@la.ctu.gov.invalid"&gt;&lt;span
 itemprop="fn"&gt;&lt;span itemprop="n" itemscope&gt;&lt;span
 itemprop="given-name"&gt;Chloe&lt;/span&gt; &lt;span
 itemprop="family=name"&gt;O'Brian&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
 if it's about work, or ask &lt;span itemprop="agent"&gt;Tony Almeida&lt;/span&gt;
 if you're interested in the CTU five-a-side football team we're trying to get going.&lt;/p&gt;
 &lt;ins datetime="2008-07-20T21:00:00+01:00"&gt;
  &lt;span itemprop="rev" itemscope&gt;
   &lt;meta itemprop="type" content="date-time"&gt;
   &lt;meta itemprop="value" content="2008-07-20T21:00:00+01:00"&gt;
  &lt;/span&gt;
  &lt;p itemprop="tel" itemscope&gt;&lt;strong&gt;Update!&lt;/strong&gt;
  My new &lt;span itemprop="type"&gt;home&lt;/span&gt; phone number is
  &lt;span itemprop="value"&gt;01632 960 123&lt;/span&gt;.&lt;/p&gt;
 &lt;/ins&gt;
&lt;/section&gt;</pre>

   <p>The odd line wrapping is needed because newlines are meaningful
   in microdata: newlines would be preserved in a conversion to, for
   example, the vCard format.<p>

  </div>

  <div class=example>

   <p>This example shows a site's contact details (using the
   <code><a href=#the-address-element>address</a></code> element) containing an address with two street
   components:</p>

   <pre>&lt;address itemscope itemtype="http://microformats.org/profile/hcard"&gt;
 &lt;strong itemprop="fn"&gt;&lt;span itemprop="n"&gt;&lt;span itemprop="given-name"&gt;Alfred&lt;/span&gt;
 &lt;span itemprop="family-name"&gt;Person&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt; &lt;br&gt;
 &lt;span itemprop="adr" itemscope&gt;
  &lt;span itemprop="street-address"&gt;1600 Amphitheatre Parkway&lt;/span&gt; &lt;br&gt;
  &lt;span itemprop="street-address"&gt;Building 43, Second Floor&lt;/span&gt; &lt;br&gt;
  &lt;span itemprop="locality"&gt;Mountain View&lt;/span&gt;,
   &lt;span itemprop="region"&gt;CA&lt;/span&gt; &lt;span itemprop="postal-code"&gt;94043&lt;/span&gt;
 &lt;/span&gt;
&lt;/address&gt;</pre>

  </div>

  <div class=example>

   <p>The vCard vocabulary can be used to just mark up people's
   names:</p>

   <pre>&lt;span itemscope itemtype="http://microformats.org/profile/hcard"
&gt;&lt;span itemprop=fn&gt;&lt;span itemprop="n"&gt;&lt;span itemprop="given-name"
&gt;George&lt;/span&gt; &lt;span itemprop="family-name"&gt;Washington&lt;/span&gt;&lt;/span
&gt;&lt;/span&gt;&lt;/span&gt;</pre>

   <p>This creates a single item with a two name-value pairs, one with
   the name "fn" and the value "George Washington", and the other with
   the name "n" and a second item as its value, the second item having
   the two name-value pairs "given-name" and "family-name" with the
   values "George" and "Washington" respectively. This is defined to
   map to the following vCard:</p>

   <pre>BEGIN:VCARD
PROFILE:VCARD
VERSION:3.0
SOURCE:<var title="">document's address</var>
FN:George Washington
N:Washington;George;;;
END:VCARD</pre>

  </div>



  <h4 id=vevent><span class=secno>5.4.2 </span>vEvent</h4>



  <p>An item with the <a href=#item-type>item type</a> <dfn id=md-vevent title=md-vevent><code>http://microformats.org/profile/hcalendar#vevent</code></dfn>
  represents an event.</p>

  <p>This vocabulary <a href=#support-global-identifiers-for-items title="support global identifiers for
  items">supports global identifiers for items</a>.</p>

  <p>The following are the type's <a href=#defined-property-name title="defined property
  name">defined property names</a>. They are based on the
  vocabulary defined in the iCalendar specification, where more
  information on how to interpret the values can be found. <a href=#refsRFC2445>[RFC2445]</a></p>

  <p class=note>Only the parts of the iCalendar vocabulary relating
  to events are used here; this vocabulary cannot express a complete
  iCalendar instance.</p>

  <dl><dt><dfn id=md-vevent-attach title=md-vevent-attach><code>attach</code></dfn></dt>

   <dd>

    <p>Gives the address of an associated document for the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#absolute-url>absolute URL</a>.</p>

    <p>Any number of properties with the name <code title=md-vevent-attach><a href=#md-vevent-attach>attach</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-categories title=md-vevent-categories><code>categories</code></dfn></dt>

   <dd>

    <p>Gives the name of a category or tag that the event could be
    classified as.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vevent-categories><a href=#md-vevent-categories>categories</a></code> may be present
    within each <a href=#concept-item title=concept-item>item</a> with the type
    <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-class title=md-vevent-class><code>class</code></dfn></dt>

   <dd>

    <p>Gives the access classification of the information regarding
    the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text with one of the following values:</p>

    <ul class=brief><li><code title="">public</code></li>
     <li><code title="">private</code></li>
     <li><code title="">confidential</code></li>
    </ul><p class=warning>This is merely advisory and cannot be
    considered a confidentiality measure.</p>

    <p>A single property with the name <code title=md-vevent-class><a href=#md-vevent-class>class</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-comment title=md-vevent-comment><code>comment</code></dfn></dt>

   <dd>

    <p>Gives a comment regarding the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>Any number of properties with the name <code title=md-vevent-comment><a href=#md-vevent-comment>comment</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-description title=md-vevent-description><code>description</code></dfn></dt>

   <dd>

    <p>Gives a detailed description of the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>A single property with the name <code title=md-vevent-description><a href=#md-vevent-description>description</a></code> may be present
    within each <a href=#concept-item title=concept-item>item</a> with the type
    <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-geo title=md-vevent-geo><code>geo</code></dfn></dt>

   <dd>

    <p>Gives the geographical position of the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text and must match the following syntax:</p>

    <ol><li>Optionally, either a U+002B PLUS SIGN character (+) or a
     U+002D HYPHEN-MINUS character (-).</li>

     <li>One or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
     DIGIT NINE (9).</li>

     <li>Optionally*, a U+002E FULL STOP character (.) followed by one
     or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
     NINE (9).</li>

     <li>A U+003B SEMICOLON character (;).</li>

     <li>Optionally, either a U+002B PLUS SIGN character (+) or a
     U+002D HYPHEN-MINUS character (-).</li>

     <li>One or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
     DIGIT NINE (9).</li>

     <li>Optionally*, a U+002E FULL STOP character (.) followed by one
     or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
     NINE (9).</li>

    </ol><p>The optional components marked with an asterisk (*) should be
    included, and should have six digits each.</p> <!-- iCalendar
    actually limits the range to -91.0 < lat < 91.0; -181.0 < long <
    181.0, which seems weird. It also gives special meanings to
    +90/-90 lat, and +180 long. -->

    <!-- copied from vcard (not icalendar!) -->
    <p class=note>The value specifies latitude and longitude, in
    that order (i.e., "LAT LON" ordering), in decimal degrees. The
    longitude represents the location east and west of the prime
    meridian as a positive or negative real number, respectively.  The
    latitude represents the location north and south of the equator as
    a positive or negative real number, respectively.</p>

    <p>A single property with the name <code title=md-vevent-geo><a href=#md-vevent-geo>geo</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-location title=md-vevent-location><code>location</code></dfn></dt>

   <dd>

    <p>Gives the location of the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p> <!-- v2: support vcard here -->

    <p>A single property with the name <code title=md-vevent-location><a href=#md-vevent-location>location</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <!-- PRIORITY not included - always 0 - doesn't make sense for single events -->


   <dt><dfn id=md-vevent-resources title=md-vevent-resources><code>resources</code></dfn></dt>

   <dd>

    <p>Gives a resource that will be needed for the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p> <!-- v2: support vcard here -->

    <p>Any number of properties with the name <code title=md-vevent-resources><a href=#md-vevent-resources>resources</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-status title=md-vevent-status><code>status</code></dfn></dt>

   <dd>

    <p>Gives the confirmation status of the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text with one of the following values:</p>

    <ul class=brief><li><code title="">tentative</code></li>
     <li><code title="">confirmed</code></li>
     <li><code title="">cancelled</code></li> <!-- two Ls as per iCalendar spec -->
    </ul><p>A single property with the name <code title=md-vevent-status><a href=#md-vevent-status>status</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-summary title=md-vevent-summary><code>summary</code></dfn></dt>

   <dd>

    <p>Gives a short summary of the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p>

    <p>User agents should replace U+000A LINE FEED (LF) characters in
    the <a href=#concept-property-value title=concept-property-value>value</a> by U+0020
    SPACE characters when using the value.</p>

    <p>A single property with the name <code title=md-vevent-summary><a href=#md-vevent-summary>summary</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-dtend title=md-vevent-dtend><code>dtend</code></dfn></dt>

   <dd>

    <p>Gives the date and time by which the event ends.</p>

    <p>If the property with the name <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> is present within an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>
    that has a property with the name <code title=md-vevent-dtstart><a href=#md-vevent-dtstart>dtstart</a></code> whose value is a
    <a href=#valid-date-string>valid date string</a>, then the <a href=#concept-property-value title=concept-property-value>value</a> of the property with
    the name <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> must be text
    that is a <a href=#valid-date-string>valid date string</a> also. Otherwise, the
    <a href=#concept-property-value title=concept-property-value>value</a> of the property
    must be text that is a <a href=#valid-global-date-and-time-string>valid global date and time
    string</a>.</p>

    <p>In either case, the <a href=#concept-property-value title=concept-property-value>value</a> be later in time than
    the value of the <code title=md-event-dtstart>dtstart</code>
    property of the same <a href=#concept-item title=concept-item>item</a>.</p>

    <p class=note>The time given by the <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> property is not
    inclusive. For day-long events, therefore, the <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> property's <a href=#concept-property-value title=concept-property-value>value</a> will be the day
    <em>after</em> the end of the event.</p>

    <p>A single property with the name <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>,
    so long as that <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>
    does not have a property with the name <code title=md-vevent-duration><a href=#md-vevent-duration>duration</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-dtstart title=md-vevent-dtstart><code>dtstart</code></dfn></dt>

   <dd>

    <p>Gives the date and time at which the event starts.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that is either a <a href=#valid-date-string>valid date string</a> or a
    <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>

    <p>Exactly one property with the name <code title=md-vevent-dtstart><a href=#md-vevent-dtstart>dtstart</a></code> must be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-duration title=md-vevent-duration><code>duration</code></dfn></dt>

   <dd>

    <p>Gives the duration of the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that is a <a href=#valid-vevent-duration-string>valid vevent duration string</a>.</p>

    <p>The duration represented is the sum of all the durations
    represented by integers in the value.</p>

    <p>A single property with the name <code title=md-vevent-duration><a href=#md-vevent-duration>duration</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>,
    so long as that <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>
    does not have a property with the name <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-transp title=md-vevent-transp><code>transp</code></dfn></dt>

   <dd>

    <p>Gives whether the event is to be considered as consuming time
    on a calendar, for the purpose of free-busy time searches.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text with one of the following values:</p>

    <ul class=brief><li><code title="">opaque</code></li>
     <li><code title="">transparent</code></li>
    </ul><p>A single property with the name <code title=md-vevent-transp><a href=#md-vevent-transp>transp</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <!-- ATTENDEE not included; iCalendar says MUST NOT be included in
   published events -->


   <dt><dfn id=md-vevent-contact title=md-vevent-contact><code>contact</code></dfn></dt>

   <dd>

    <p>Gives the contact information for the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text.</p> <!-- v2: support vcard here -->

    <p>Any number of properties with the name <code title=md-vevent-contact><a href=#md-vevent-contact>contact</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <!-- ORGANIZER not included, as it is calendar-system-specific
   (gives a CAL-ADDRESS value); use CONTACT instead -->


   <!-- RECURRENCE-ID not included... unclear how to make it usefully
   work here -->


   <!-- RELATED-TO not included, as it only makes sense for complete
   calendars -->


   <dt><dfn id=md-vevent-url title=md-vevent-url><code>url</code></dfn></dt>

   <dd>

    <p>Gives a <a href=#url>URL</a> for the event.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#absolute-url>absolute URL</a>.</p>

    <p>A single property with the name <code title=md-vevent-url><a href=#md-vevent-url>url</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <!-- UID not included - use "itemid" -->


   <dt><dfn id=md-vevent-exdate title=md-vevent-exdate><code>exdate</code></dfn></dt>

   <dd>

    <p>Gives a date and time at which the event does not occur despite
    the recurrence rules.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that is either a <a href=#valid-date-string>valid date string</a> or a
    <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>

    <p>Any number of properties with the name <code title=md-vevent-exdate><a href=#md-vevent-exdate>exdate</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-exrule title=md-vevent-exrule><code>exrule</code></dfn></dt>

   <dd>

    <p>Gives a rule for finding dates and times at which the event
    does not occur despite the recurrence rules.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that matches the RECUR value type defined in the iCalendar
    specification. <a href=#refsRFC2445>[RFC2445]</a></p>

    <p>Any number of properties with the name <code title=md-vevent-exrule><a href=#md-vevent-exrule>exrule</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-rdate title=md-vevent-rdate><code>rdate</code></dfn></dt>

   <dd>

    <p>Gives a date and time at which the event recurs.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that is one of the following:

    <ul><li>A <a href=#valid-date-string>valid date string</a>.</li>

     <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</li>

     <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a> followed by
     a U+002F SOLIDUS character (/) followed by a second <a href=#valid-global-date-and-time-string>valid
     global date and time string</a> representing a later time.</li>

     <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a> followed by
     a U+002F SOLIDUS character (/) followed by a <a href=#valid-vevent-duration-string>valid vevent
     duration string</a>.</li>

    </ul><p>Any number of properties with the name <code title=md-vevent-rdate><a href=#md-vevent-rdate>rdate</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-rrule title=md-vevent-rrule><code>rrule</code></dfn></dt>

   <dd>

    <p>Gives a rule for finding dates and times at which the event
    occurs.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that matches the RECUR value type defined in the iCalendar
    specification. <a href=#refsRFC2445>[RFC2445]</a></p>

    <p>Any number of properties with the name <code title=md-vevent-rrule><a href=#md-vevent-rrule>rrule</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-created title=md-vevent-created><code>created</code></dfn></dt>

   <dd>

    <p>Gives the date and time at which the event information was first
    created in a calendaring system.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that is a <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>

    <p>A single property with the name <code title=md-vevent-created><a href=#md-vevent-created>created</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <!-- DTSTAMP not included, it gets added when serialising -->


   <dt><dfn id=md-vevent-last-modified title=md-vevent-last-modified><code>last-modified</code></dfn></dt>

   <dd>

    <p>Gives the date and time at which the event information was last
    modified in a calendaring system.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that is a <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>

    <p>A single property with the name <code title=md-vevent-last-modified><a href=#md-vevent-last-modified>last-modified</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <dt><dfn id=md-vevent-sequence title=md-vevent-sequence><code>sequence</code></dfn></dt>

   <dd>

    <p>Gives a revision number for the event information.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    text that is a <a href=#valid-non-negative-integer>valid non-negative integer</a>.</p>

    <p>A single property with the name <code title=md-vevent-sequence><a href=#md-vevent-sequence>sequence</a></code> may be present within
    each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>

   </dd>


   <!-- REQUEST-STATUS not included, calendaring system interop
   feature -->


  </dl><p>A string is a <dfn id=valid-vevent-duration-string>valid vevent duration string</dfn> if it
  matches the following pattern:</p>

  <ol><li>A U+0050 LATIN CAPITAL LETTER P character (P).</li>

   <li>One of the following:

    <ul><li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
     U+0057 LATIN CAPITAL LETTER W character (W). The integer
     represents a duration of that number of weeks. </li>

     <li> At least one, and possible both in this order, of the
     following:

      <ol><li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
       U+0044 LATIN CAPITAL LETTER D character (D). The integer
       represents a duration of that number of days. </li>

       <li> A U+0054 LATIN CAPITAL LETTER T character (T) followed by
       any one of the following, or the first and second of the
       following in that order, or the second and third of the
       following in that order, or all three of the following in this
       order:

        <ol><li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
         U+0048 LATIN CAPITAL LETTER H character (H). The integer
         represents a duration of that number of hours. </li>

         <li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
         U+004D LATIN CAPITAL LETTER M character (M). The integer
         represents a duration of that number of minutes. </li>

         <li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
         U+0053 LATIN CAPITAL LETTER S character (S). The integer
         represents a duration of that number of seconds. </li>

        </ol></ol></li>

    </ul></li>

  </ol><h5 id=conversion-to-icalendar><span class=secno>5.4.2.1 </span>Conversion to iCalendar</h5>

  <p>Given a list of nodes <var title="">nodes</var> in a
  <code><a href=#document>Document</a></code>, a user agent must run the following algorithm
  to <dfn id=extracting-vevent-data title="extracting vEvent data">extract any vEvent data
  represented by those nodes</dfn>:</p>

  <ol><li><p>If none of the nodes in <var title="">nodes</var> are <a href=#concept-item title=concept-item>items</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>,
   then there is no vEvent data. Abort the algorithm, returning
   nothing.</li>

   <li><p>Let <var title="">output</var> be an empty string.</li>

   <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">BEGIN</code>" and the value "<code title="">VCALENDAR</code>" to <var title="">output</var>.</li>

   <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">PRODID</code>" and the value equal to a
   user-agent-specific string representing the user agent to <var title="">output</var>.</li>

   <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">VERSION</code>" and the value "<code title="">2.0</code>"
   to <var title="">output</var>.</li>

   <li>

    <p>For each node <var title="">node</var> in <var title="">nodes</var> that is an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>,
    run the following steps:</p>

    <ol><li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">BEGIN</code>" and the value "<code title="">VEVENT</code>" to <var title="">output</var>.</li>

     <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">DTSTAMP</code>" and a value consisting of an iCalendar
     DATE-TIME string representing the current date and time, with the
     annotation "<code title="">VALUE=DATE-TIME</code>", to <var title="">output</var>.  <a href=#refsRFC2445>[RFC2445]</a></li>

     <li><p>If the <a href=#concept-item title=concept-item>item</a> has a
     <a href=#global-identifier>global identifier</a>, <a href=#add-an-icalendar-line>add an iCalendar
     line</a> with the type "<code title="">UID</code>" and that
     <a href=#global-identifier>global identifier</a> as the value to <var title="">output</var>.</li>

     <li>

      <p>For each element <var title="">element</var> that is <a href=#the-properties-of-an-item title="the properties of an item">a property of the item</a>
      <var title="">node</var>: for each name <var title="">name</var>
      in <var title="">element</var>'s <a href=#property-names>property names</a>,
      run the appropriate set of substeps from the following list:</p>

      <dl><dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a></dt>

       <dd>

        <p>Skip the property.</p>

       </dd>


       <dt>If <var title="">element</var> is a <code><a href=#the-time-element>time</a></code>
       element</dt>

       <dd>

        <p>Let <var title="">value</var> be the result of stripping
        all U+002D HYPHEN-MINUS (-) and U+003A COLON (:) characters
        from the property's <a href=#concept-property-value title=concept-property-value>value</a>.</p>

        <p>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is a <a href=#valid-date-string>valid
        date string</a> then <a href=#add-an-icalendar-line>add an iCalendar line</a>
        with the type <var title="">name</var> and the value <var title="">value</var> to <var title="">output</var>, with the
        annotation "<code title="">VALUE=DATE</code>".</p>

        <p>Otherwise, if the property's <a href=#concept-property-value title=concept-property-value>value</a> is a <a href=#valid-global-date-and-time-string>valid
        global date and time string</a> then <a href=#add-an-icalendar-line>add an iCalendar
        line</a> with the type <var title="">name</var> and the
        value <var title="">value</var> to <var title="">output</var>,
        with the annotation "<code title="">VALUE=DATE-TIME</code>".</p>

        <p>Otherwise skip the property.</p>

       </dd>


       <dt>Otherwise</dt>

       <dd>

        <p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type <var title="">name</var> and the property's <a href=#concept-property-value title=concept-property-value>value</a> to <var title="">output</var>.</p>

       </dd>

      </dl></li>

     <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">END</code>" and the value "<code title="">VEVENT</code>"
     to <var title="">output</var>.</li>

    </ol></li>

   <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">END</code>" and the value "<code title="">VCALENDAR</code>" to <var title="">output</var>.</li>

  </ol><p>When the above algorithm says that the user agent is to <dfn id=add-an-icalendar-line>add
  an iCalendar line</dfn> consisting of a type <var title="">type</var>, a value <var title="">value</var>, and
  optionally an annotation, to a string <var title="">output</var>, it
  must run the following steps:</p>

  <ol><li><p>Let <var title="">line</var> be an empty string.</li>

   <li><p>Append <var title="">type</var>, <a href=#converted-to-ascii-uppercase>converted to
   ASCII uppercase</a>, to <var title="">line</var>.</li>

   <li>

    <p>If there is an annotation:</p>

    <ol><li><p>Append a U+003B SEMICOLON character (;) to <var title="">line</var>.</li>

     <li><p>Append the annotation to <var title="">line</var>.</li>

    </ol></li>

   <li><p>Append a U+003A COLON character (:) to <var title="">line</var>.</li>

   <li><p>Prefix every U+005C REVERSE SOLIDUS character (\) in
   <var title="">value</var> with another U+005C REVERSE SOLIDUS
   character (\).</li>

   <li><p>Prefix every U+002C COMMA character (,) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
   (\).</li>

   <li><p>Prefix every U+003B SEMICOLON character (;) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
   (\).</li>

   <li><p>Replace every U+000D CARRIAGE RETURN U+000A LINE FEED
   character pair (CRLF) in <var title="">value</var> with a U+005C
   REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL
   LETTER N character (n).</li>

   <li><p>Replace every remaining U+000D CARRIAGE RETURN (CR) or
   U+000A LINE FEED (LF) character in <var title="">value</var> with a
   U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN
   SMALL LETTER N character (n).</li>

   <li><p>Append <var title="">value</var> to <var title="">line</var>.</li>

   <li><p>Let <var title="">maximum length</var> be 75.</li>

   <li>

    <p>If and while <var title="">line</var> is longer than <var title="">maximum length</var> Unicode code points long, run the
    following substeps:</p>

    <ol><li><p>Append the first <var title="">maximum length</var>
     Unicode code points of <var title="">line</var> to <var title="">output</var>.</li>

     <li><p>Remove the first <var title="">maximum length</var>
     Unicode code points from <var title="">line</var>.</li>

     <li><p>Append a U+000D CARRIAGE RETURN character (CR) to <var title="">output</var>.</li>

     <li><p>Append a U+000A LINE FEED character (LF) to <var title="">output</var>.</li>

     <li><p>Append a U+0020 SPACE character to <var title="">output</var>.</li>

     <li><p>Let <var title="">maximum length</var> be 74.</li>

    </ol></li>

   <li><p>Append (what remains of) <var title="">line</var> to <var title="">output</var>.</li>

   <li><p>Append a U+000D CARRIAGE RETURN character (CR) to <var title="">output</var>.</li>

   <li><p>Append a U+000A LINE FEED character (LF) to <var title="">output</var>.</li>

  </ol><p class=note>This algorithm can generate invalid iCalendar
  output, if the input does not conform to the rules described for the
  <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>
  <a href=#item-type>item type</a> and <a href=#defined-property-name title="defined property
  name">defined property names</a>.</p> <!-- of course since
  iCalendar doesn't define error handling, this is somewhat
  problematic. -->



  <h5 id=examples-2><span class=secno>5.4.2.2 </span>Examples</h5>

  <p><i>This section is non-normative.</i></p>

<!-- get more from http://www.ietf.org/rfc/rfc2445.txt -->

  <div class=example>

   <p>Here is an example of a page that uses the vEvent vocabulary to
   mark up an event:</p>

   <pre>&lt;body itemscope itemtype="http://microformats.org/profile/hcalendar#vevent"&gt;
 ...
 &lt;h1 itemprop="summary"&gt;Bluesday Tuesday: Money Road&lt;/h1&gt;
 ...
 &lt;time itemprop="dtstart" datetime="2009-05-05T19:00:00Z"&gt;May 5th @ 7pm&lt;/time&gt;
 (until &lt;time itemprop="dtend" datetime="2009-05-05T21:00:00Z"&gt;9pm&lt;/time&gt;)
 ...
 &lt;a href="http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road"
    rel="bookmark" itemprop="url"&gt;Link to this page&lt;/a&gt;
 ...
 &lt;p&gt;Location: &lt;span itemprop="location"&gt;The RoadHouse&lt;/span&gt;&lt;/p&gt;
 ...
 &lt;p&gt;&lt;input type=button value="Add to Calendar"
           onclick="location = getCalendar(this)"&gt;&lt;/p&gt;
 ...
 &lt;meta itemprop="description" content="via livebrum.co.uk"&gt;
&lt;/body&gt;</pre>

   <p>The "<code title="">getCalendar()</code>" method could look like
   this:</p>

   <pre>function getCalendar(node) {
  // This function assumes the content is valid.
  // It is not a compliant implementation of the algorithm for <a href=#extracting-vevent-data>extracting vEvent data</a>.
  while (node &amp;&amp; (!node.itemScope || !node.itemType == 'http://microformats.org/profile/hcalendar#vevent'))
    node = node.parentNode;
  if (!node) {
    alert('No event data found.');
    return;
  }
  var stamp = new Date();
  var stampString = '' + stamp.getUTCFullYear() + (stamp.getUTCMonth() + 1) + stamp.getUTCDate() + 'T' +
                         stamp.getUTCHours() + stamp.getUTCMinutes() + stamp.getUTCSeconds() + 'Z';
  var calendar = 'BEGIN:VCALENDAR\r\nPRODID:HTML\r\nVERSION:2.0\r\nBEGIN:VEVENT\r\nDTSTAMP:' + stampString + '\r\n';
  if (node.itemId)
    calendar += 'UID:' + node.itemId + '\r\n';
  for (var propIndex = 0; propIndex &lt; node.properties.length; propIndex += 1) {
    var prop = node.properties[propIndex];
    var value = prop.itemValue;
    var parameters = '';
    if (prop.localName == 'time') {
      value = value.replace(/[:-]/g, '');
      if (value.match(/T/))
        parameters = ';VALUE=DATE';
      else
        parameters = ';VALUE=DATE-TIME';
    } else {
      value = value.replace(/\\/g, '\\n');
      value = value.replace(/;/g, '\\;');
      value = value.replace(/,/g, '\\,');
      value = value.replace(/\n/g, '\\n');
    }
    for (var nameIndex = 0; nameIndex &lt; prop.itemProp.length; nameIndex += 1) {
      var name = prop.itemProp[nameIndex];
      if (!name.match(/:/) &amp;&amp; !name.match(/\./))
        calendar += name.toUpperCase() + parameters + ':' + value + '\r\n';
    }
  }
  calendar += 'END:VEVENT\r\nEND:VCALENDAR\r\n';
  return 'data:text/calendar;component=vevent,' + encodeURI(calendar);
}</pre>

   <p>The same page could offer some markup, such as the following,
   for copy-and-pasting into blogs:</p>

   <pre>&lt;div itemscope itemtype="http://microformats.org/profile/hcalendar#vevent"&gt;
 &lt;p&gt;I'm going to
 &lt;strong itemprop="summary"&gt;Bluesday Tuesday: Money Road&lt;/strong&gt;,
 &lt;time itemprop="dtstart" datetime="2009-05-05T19:00:00Z"&gt;May 5th at 7pm&lt;/time&gt;
 to &lt;time itemprop="dtend" content="2009-05-05T21:00:00Z"&gt;9pm&lt;/time&gt;,
 at &lt;span itemprop="location"&gt;The RoadHouse&lt;/span&gt;!&lt;/p&gt;
 &lt;p&gt;&lt;a href="http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road"
       itemprop="url"&gt;See this event on livebrum.co.uk&lt;/a&gt;.&lt;/p&gt;
 &lt;meta itemprop="description" content="via livebrum.co.uk"&gt;
&lt;/div&gt;</pre>

  </div>



  <h4 id=licensing-works><span class=secno>5.4.3 </span>Licensing works</h4>



  <p>An item with the <a href=#item-type>item type</a> <dfn id=md-work title=md-work><code>http://n.whatwg.org/work</code></dfn>
  represents a work (e.g. an article, an image, a video, a song,
  etc). This type is primarily intended to allow authors to include
  licensing information for works.</p>

  <p>The following are the type's <a href=#defined-property-name title="defined property
  name">defined property names</a>.</p>

  <dl><dt><dfn id=md-work-work title=md-work-work><code>work</code></dfn></dt>

   <dd>

    <p>Identifies the work being described.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#absolute-url>absolute URL</a>.</p>

    <p>Exactly one property with the name <code title=md-work-work><a href=#md-work-work>work</a></code> must be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>.</p>

   </dd>


   <dt><dfn id=md-work-title title=md-work-title><code>title</code></dfn></dt>

   <dd>

    <p>Gives the name of the work.</p>

    <p>A single property with the name <code title=md-work-title><a href=#md-work-title>title</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>.</p>

   </dd>


   <dt><dfn id=md-work-author title=md-work-author><code>author</code></dfn></dt>

   <dd>

    <p>Gives the name or contact information of one of the authors or
    creators of the work.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    either an <a href=#concept-item title=concept-item>item</a> with the type
    <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or
    text.</p>

    <p>Any number of properties with the name <code title=md-work-author><a href=#md-work-author>author</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>.</p>

   </dd>


   <dt><dfn id=md-work-license title=md-work-license><code>license</code></dfn></dt>

   <dd>

    <p>Identifies one of the licenses under which the work is
    available.</p>

    <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
    an <a href=#absolute-url>absolute URL</a>.</p>

    <p>Any number of properties with the name <code title=md-work-license><a href=#md-work-license>license</a></code> may be present within each
    <a href=#concept-item title=concept-item>item</a> with the type <code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>.</p>

   </dd>

  </dl><h5 id=conversion-to-rdf><span class=secno>5.4.3.1 </span>Conversion to RDF</h5>

  <p>For the purposes of RDF processors, the triples obtained from the
  following Turtle must be applied:</p>

  <pre class=turtle>&lt;http://www.w3.org/1999/xhtml/microdata#http%3A%2F%2Fn.whatwg.org%2Fwork%23%3Awork&gt;
  &lt;http://www.w3.org/2002/07/owl#equivalentProperty&gt;
  &lt;http://www.w3.org/2002/07/owl#sameAs&gt; .
&lt;http://www.w3.org/1999/xhtml/microdata#http%3A%2F%2Fn.whatwg.org%2Fwork%23%3Atitle&gt;
  &lt;http://www.w3.org/2002/07/owl#equivalentProperty&gt;
  &lt;http://purl.org/dc/terms/title&gt; .
&lt;http://www.w3.org/1999/xhtml/microdata#http%3A%2F%2Fn.whatwg.org%2Fwork%23%3Aauthor&gt;
  &lt;http://www.w3.org/2002/07/owl#equivalentProperty&gt;
  &lt;http://creativecommons.org/ns#attributionName&gt; .
&lt;http://www.w3.org/1999/xhtml/microdata#http%3A%2F%2Fn.whatwg.org%2Fwork%23%3Alicense&gt;
  &lt;http://www.w3.org/2002/07/owl#equivalentProperty&gt;
  &lt;http://www.w3.org/1999/xhtml/vocab#license&gt; .</pre>

  <p class=note>The subjects of the statements above are the
  predicates that result from <a href=#extracting-rdf title="extracting rdf">converting
  to RDF</a> an HTML page containing microdata with an item whose
  <a href=#item-type title="item type">type</a> is "<code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>".</p>



  <h5 id=examples-3><span class=secno>5.4.3.2 </span>Examples</h5>

  <p><i>This section is non-normative.</i></p>

  <div class=example>

   <p>This example shows an embedded image entitled <cite>My
   Pond</cite>, licensed under the Creative Commons Attribution-Share
   Alike 3.0 United States License and the MIT license
   simultaneously.</p>

   <pre>&lt;figure <strong>itemscope itemtype="http://n.whatwg.org/work"</strong>&gt;
 &lt;img <strong>itemprop="work"</strong> src="mypond.jpeg"&gt;
 &lt;figcaption&gt;
  &lt;p&gt;&lt;cite <strong>itemprop="title"</strong>&gt;My Pond&lt;/cite&gt;&lt;/p&gt;
  &lt;p&gt;&lt;small&gt;Licensed under the &lt;a <strong>itemprop="license"</strong>
  href="http://creativecommons.org/licenses/by-sa/3.0/us/"&gt;Creative
  Commons Attribution-Share Alike 3.0 United States License&lt;/a&gt;
  and the &lt;a <strong>itemprop="license"</strong>
  href="http://www.opensource.org/licenses/mit-license.php"&gt;MIT
  license&lt;/a&gt;.&lt;/small&gt;
 &lt;/figcaption&gt;
&lt;/figure&gt;</pre>

  </div>









  <div class=impl>

  <h3 id=converting-html-to-other-formats><span class=secno>5.5 </span>Converting HTML to other formats</h3>




  <h4 id=json><span class=secno>5.5.1 </span>JSON</h4>

  <p>Given a list of nodes <var title="">nodes</var> in a
  <code><a href=#document>Document</a></code>, a user agent must run the following algorithm
  to <dfn id=extracting-json title="extracting JSON">extract the microdata from those
  nodes into a JSON form</dfn>:</p>

  <ol><li><p>Let <var title="">result</var> be an empty object.</li>

   <li><p>Let <var title="">items</var> be an empty array.</li>

   <li><p>For each <var title="">node</var> in <var title="">nodes</var>, check if the element is a <a href=#top-level-microdata-items title="top-level microdata items">top-level microdata item</a>,
   and if it is then <a href=#get-the-object>get the object</a> for that element and
   add it to <var title="">items</var>.</li>

   <li><p>Add an entry to <var title="">result</var> called "<code title="">items</code>" whose value is the array <var title="">items</var>.</li>

   <li><p>Return the result of serializing <var title="">result</var>
   to JSON.</li>

  </ol><p>When the user agent is to <dfn id=get-the-object>get the object</dfn> for an item
  <var title="">item</var>, it must run the following substeps:</p>

  <ol><li><p>Let <var title="">result</var> be an empty object.</li>

   <li><p>If the <var title="">item</var> has an <a href=#item-type>item
   type</a>, add an entry to <var title="">result</var> called
   "<code title="">type</code>" whose value is the <a href=#item-type>item
   type</a> of <var title="">item</var>.</li>

   <li><p>If the <var title="">item</var> has an <a href=#global-identifier>global
   identifier</a>, add an entry to <var title="">result</var>
   called "<code title="">id</code>" whose value is the <a href=#global-identifier>global
   identifier</a> of <var title="">item</var>.</li>

   <li><p>Let <var title="">properties</var> be an empty
   object.</li>

   <li>

    <p>For each element <var title="">element</var> that has one or
    more <a href=#property-names>property names</a> and is one of <a href=#the-properties-of-an-item title="the
    properties of an item">the properties of the item</a> <var title="">item</var>, in the order those elements are given by the
    algorithm that returns <a href=#the-properties-of-an-item>the properties of an item</a>, run
    the following substeps:</p>

    <ol><li><p>Let <var title="">value</var> be the <a href=#concept-property-value title=concept-property-value>property value</a> of <var title="">element</var>.</li>

     <li><p>If <var title="">value</var> is an <a href=#concept-item title=concept-item>item</a>, then <a href=#get-the-object>get the
     object</a> for <var title="">value</var>, and then replace
     <var title="">value</var> with the object returned from those
     steps.</li>

     <li>

      <p>For each name <var title="">name</var> in <var title="">element</var>'s <a href=#property-names>property names</a>, run the
      following substeps:</p>

      <ol><li><p>If there is no entry named <var title="">name</var> in
       <var title="">properties</var>, then add an entry named <var title="">name</var> to <var title="">properties</var> whose
       value is an empty array.</li>

       <li><p>Append <var title="">value</var> to the entry named <var title="">name</var> in <var title="">properties</var>.</li>

      </ol></li>

    </ol></li>

   <li><p>Add an entry to <var title="">result</var> called "<code title="">properties</code>" whose value is the object <var title="">properties</var>.</li>

   <li><p>Return <var title="">result</var>.</li>

  </ol><h4 id=rdf><span class=secno>5.5.2 </span>RDF</h4>

  <p>To <dfn id=extracting-rdf title="extracting rdf">convert a <code>Document</code> to
  RDF</dfn>, a user agent must run the following algorithm:</p>

  <ol><li>

    <p>If <a href=#the-title-element>the <code>title</code> element</a> is not null,
    then generate the following triple:</p>

    <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
     <dt>predicate <dd> <code title="">http://purl.org/dc/terms/title</code>
     <dt>object    <dd> the concatenation of the data of all the child <a href=#text-node title="text node">text nodes</a> of <a href=#the-title-element>the <code>title</code> element</a>, in <a href=#tree-order>tree order</a>, as a plain literal, with the language information set from the <a href=#language>language</a> of <a href=#the-title-element>the <code>title</code> element</a>, if it is not unknown.

    </dl></li>

   <li>

    <p>For each <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, and
    <code><a href=#the-link-element>link</a></code> element in the <code><a href=#document>Document</a></code>, run these
    substeps:</p>

    <ol><li><p>If the element does not have a <code title="">rel</code>
     attribute, then skip this element.</li>

     <li><p>If the element does not have an <code title="">href</code>
     attribute, then skip this element.</li>

     <li><p>If <a href=#resolve-a-url title="resolve a URL">resolving</a> the
     element's <code title="">href</code> attribute relative to the
     element is not successful, then skip this element.</li>

     <li><p>Otherwise, <a href=#split-a-string-on-spaces title="split a string on spaces">split
     the value of the element's <code title="">rel</code> attribute on
     spaces</a>, obtaining <var title="">list of tokens</var>.</li>

     <li><p>Convert each token in <var title="">list of tokens</var>
     that does not contain a U+003A COLON characters (:) <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">to ASCII
     lowercase</a>.</li>

     <li><p>If <var title="">list of tokens</var> contains more than
     one instance of the token <code title=rel-up><a href=#link-type-up>up</a></code>, then
     remove all such tokens.</li>

     <li><p>Coalesce duplicate tokens in <var title="">list of
     tokens</var>.</li>

     <li><p>If <var title="">list of tokens</var> contains both the
     tokens <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> and <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code>, then remove them both
     and replace them with the single (uppercase) token <code title="">ALTERNATE-STYLESHEET</code>.</li>

     <li>

      <p>For each token <var title="">token</var> in <var title="">list of tokens</var> that contains no U+003A COLON
      characters (:), generate the following triple:</p>

      <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
       <dt>predicate <dd> the concatenation of the string "<code title="">http://www.w3.org/1999/xhtml/vocab#</code>" and <var title="">token</var>, with any characters in <var title="">token</var> that are not valid in the &lt;ifragment&gt; production of the IRI syntax being %-escaped <a href=#refsRFC3987>[RFC3987]</a>
       <dt>object    <dd> the <a href=#absolute-url>absolute URL</a> that results from <a href=#resolve-a-url title="resolve a URL">resolving</a> the value of the element's <code title="">href</code> attribute relative to the element
      </dl><p>For each token <var title="">token</var> in <var title="">list of tokens</var> that is an <a href=#absolute-url>absolute
      URL</a>, generate the following triple:</p>

      <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
       <dt>predicate <dd> <var title="">token</var>
       <dt>object    <dd> the <a href=#absolute-url>absolute URL</a> that results from <a href=#resolve-a-url title="resolve a URL">resolving</a> the value of the element's <code title="">href</code> attribute relative to the element
      </dl></li>

    </ol></li>

   <li>

    <p>For each <code><a href=#meta>meta</a></code> element in the <code><a href=#document>Document</a></code>
    that has a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute and
    a <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, if the
    value of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute
    contains no U+003A COLON characters (:), generate the following
    triple:</p>

    <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
     <dt>predicate <dd> the concatenation of the string "<code title="">http://www.w3.org/1999/xhtml/vocab#</code>" and the value of the element's <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute, <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>, with any characters in the value that are not valid in the &lt;ifragment&gt; production of the IRI syntax being %-escaped <a href=#refsRFC3987>[RFC3987]</a>
     <dt>object    <dd> the value of the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, as a plain literal, with the language information set from the <a href=#language>language</a> of the element, if it is not unknown
    </dl><p>For each <code><a href=#meta>meta</a></code> element in the <code><a href=#document>Document</a></code>
    that has a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute and
    a <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, if the
    value of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute is
    an <a href=#absolute-url>absolute URL</a>, generate the following triple:</p>

    <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
     <dt>predicate <dd> the value of the element's <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute
     <dt>object    <dd> the value of the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, as a plain literal, with the language information set from the <a href=#language>language</a> of the element, if it is not unknown
    </dl></li>

   <li>

    <p>For each <code><a href=#the-blockquote-element>blockquote</a></code> and <code><a href=#the-q-element>q</a></code> element in
    the <code><a href=#document>Document</a></code> that has a <code title="">cite</code>
    attribute that <a href=#resolve-a-url title="resolve a url">resolves</a>
    successfully relative to the element, generate the following
    triple:</p>

    <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
     <dt>predicate <dd> <code title="">http://purl.org/dc/terms/source</code>
     <dt>object    <dd> the <a href=#absolute-url>absolute URL</a> that results from <a href=#resolve-a-url title="resolve a URL">resolving</a> the value of the element's <code title="">cite</code> attribute relative to the element
    </dl></li>

   <li>

    <p>Let <var title="">memory</var> be a mapping of items to
    subjects, initially empty.</p>

   </li>

   <li>

    <p>For each element that is also a <a href=#top-level-microdata-items title="top-level
    microdata items">top-level microdata item</a>, run the
    following steps:</p>

    <ol><li>

      <p><a href=#generate-the-triples-for-an-item title="generate the triples for an item">Generate the
      triples for the item</a>. Pass a reference to <var title="">memory</var> as the item/subject list. Let <var title="">result</var> be the subject returned.</p>

     </li>

     <li>

      <p>Generate the following triple:</p>

      <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
       <dt>predicate <dd> <code title="">http://www.w3.org/1999/xhtml/microdata#item</code>
       <dt>object    <dd> <var title="">result</var>
      </dl></li>

    </ol></li>

  </ol><p>When the user agent is to <dfn id=generate-the-triples-for-an-item>generate the triples for an
  item</dfn> <var title="">item</var>, given a reference to an
  item/subject list <var title="">memory</var>, and optionally given a
  fallback type <var title="">fallback type</var> and property name
  <var title="">fallback name</var>, it must follow the following
  steps:</p>

  <ol><li><p>If there is an entry for <var title="">item</var> in <var title="">memory</var>, then let <var title="">subject</var> be the
   subject of that entry. Otherwise, if <var title="">item</var> has a
   <a href=#global-identifier>global identifier</a> and that <a href=#global-identifier>global
   identifier</a> is an <a href=#absolute-url>absolute URL</a>, let <var title="">subject</var> be that <a href=#global-identifier>global
   identifier</a>. Otherwise, let <var title="">subject</var> be a
   new blank node.</li>

   <li><p>Add a mapping from <var title="">item</var> to <var title="">subject</var> in <var title="">memory</var>, if there
   isn't one already.</li>

   <li><p>If <var title="">item</var> has an <a href=#item-type>item type</a>
   and that <a href=#item-type>item type</a> is an <a href=#absolute-url>absolute URL</a>,
   let <var title="">type</var> be that <a href=#item-type>item
   type</a>. Otherwise, let <var title="">type</var> be the empty
   string.</li>

   <!-- The special characters used in URLs beyond this point are
   intended to make it so that a different type/name combination
   couldn't generate the same string. ":" and "%20" are used because
   they can't be put in /name/ when all this is used. -->

   <li>

    <p>If <var title="">type</var> is not the empty string, run the
    following steps:</p>

    <ol><li><p>Generate the following triple:</p>

      <dl class=triple><dt>subject   <dd> <var title="">subject</var>
       <dt>predicate <dd> <code title="">http://www.w3.org/1999/02/22-rdf-syntax-ns#type</code>
       <dt>object    <dd> <var title="">type</var>
      </dl></li>

     <li><p>If <var title="">type</var> does not contain a U+0023
     NUMBER SIGN character (#), then append a U+0023 NUMBER SIGN
     character (#) to <var title="">type</var>.</li>

     <li><p>If <var title="">type</var> does not have a U+003A COLON
     character (:) after its U+0023 NUMBER SIGN character (#), append
     a U+003A COLON character (:) to <var title="">type</var>.</li>

    </ol></li>

   <li>

    <p>If <var title="">type</var> is the empty string, but <var title="">fallback type</var> is not, run the following
    substeps:</p>

    <ol><li><p>Let <var title="">type</var> have the value of <var title="">fallback type</var>.</li>

     <li><p>If <var title="">type</var> does not contain a U+0023
     NUMBER SIGN character (#), then append a U+0023 NUMBER SIGN
     character (#) to <var title="">type</var>.</li>

     <!-- Special characters beyond this point have to be something
     not in /name/ when this is used below, so either ":", %20, %0D,
     or %0A. This is so that a different type/name combination
     couldn't generate the same string. -->

     <li><p>If <var title="">type</var> does not have a U+003A COLON
     character (:) after its U+0023 NUMBER SIGN character (#), append
     a U+003A COLON character (:) to <var title="">type</var>.</li>

     <li><p>If the last character of <var title="">type</var> is not a
     U+003A COLON character (:), append a U+0025 PERCENT SIGN
     character (%), a U+0032 DIGIT TWO character (2), and a U+0030
     DIGIT ZERO character (0) to <var title="">type</var>.</li>

     <li><p>Append the value of <var title="">fallback name</var> to
     <var title="">type</var>, with any characters in <var title="">fallback name</var> that are not valid in the
     &lt;ifragment&gt; production of the IRI syntax being
     %-escaped. <a href=#refsRFC3987>[RFC3987]</a></li>

    </ol></li>

   <li>

    <p>For each element <var title="">element</var> that has one or
    more <a href=#property-names>property names</a> and is one of <a href=#the-properties-of-an-item title="the
    properties of an item">the properties of the item</a> <var title="">item</var>, in the order those elements are given by the
    algorithm that returns <a href=#the-properties-of-an-item>the properties of an item</a>, run
    the following substep:</p>

    <ol><li>

      <p>For each name <var title="">name</var> in <var title="">element</var>'s <a href=#property-names>property names</a>, run the
      following substeps:</p>

      <ol><li><p>If <var title="">type</var> is the empty string and <var title="">name</var> is not an <a href=#absolute-url>absolute URL</a>, then
       abort these substeps.</li>

       <li><p>Let <var title="">value</var> be the <a href=#concept-property-value title=concept-property-value>property value</a> of <var title="">element</var>.</li>

       <li><p>If <var title="">value</var> is an <a href=#concept-item title=concept-item>item</a>, then <a href=#generate-the-triples-for-an-item title="generate
       the triples for an item">generate the triples</a> for <var title="">value</var>. Pass a reference to <var title="">memory</var> as the item/subject list, and pass <var title="">type</var> as the fallback type and <var title="">name</var> as the fallback property name. Replace <var title="">value</var> by the subject returned from those
       steps.</li>

       <!-- could support <time> here somehow, though we'd have to
       reserialise it, check if the <time> was valid, check if it had a
       date, a time, a timezone, etc. -->

       <li><p>Otherwise, if <var title="">element</var> is not one of
       the <a href=#url-property-elements>URL property elements</a>, let <var title="">value</var> be a plain literal, with the language
       information set from the <a href=#language>language</a> of the element, if
       it is not unknown.</li>

       <li>

        <dl><dt>If <var title="">name</var> is an <a href=#absolute-url>absolute
         URL</a></dt>

         <dd>

          <p>Let <var title="">predicate</var> be <var title="">name</var>.</p>

         </dd>

         <dt>If <var title="">name</var> contains no U+003A COLON
         characters (:)</dt>

         <dd>

          <ol><li><p>Let <var title="">s</var> be <var title="">type</var>.</li>

           <li><p>If the last character of <var title="">s</var> is
           not a U+003A COLON character (:), append a U+0025 PERCENT
           SIGN character (%), a U+0032 DIGIT TWO character (2), and a
           U+0030 DIGIT ZERO character (0) to <var title="">s</var>.</li>

           <li><p>Append the value of <var title="">name</var> to <var title="">s</var>, with any characters in <var title="">name</var> that are not valid in the
           &lt;ifragment&gt; production of the IRI syntax being
           %-escaped. <a href=#refsRFC3987>[RFC3987]</a></li>

           <li>

            <p>Let <var title="">predicate</var> be the concatenation
            of the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>"
            and <var title="">s</var>, with any characters in <var title="">s</var> that are not valid in the &lt;ifragment&gt;
            production of the IRI syntax being %-escaped, but without
            double-escaping existing %-escapes. <a href=#refsRFC3987>[RFC3987]</a></p> <!-- this ensures
            you can't use a URL to get the same effect -->

            <p class=example>For example if the string <var title="">s</var> is "<code title="">http://example.com/a#:q%20r</code>", the
            resulting <var title="">predicate</var> would be "<code title="">http://www.w3.org/1999/xhtml/microdata#http://example.com/a%23:q%20r</code>".</p>

           </li>

          </ol></dd>

        </dl></li>

       <li>

        <p>Generate the following triple:</p>

        <dl class=triple><dt>subject   <dd> <var title="">subject</var>
         <dt>predicate <dd> <var title="">predicate</var>
         <dt>object    <dd> <var title="">value</var>
        </dl></li>

      </ol></li>

    </ol></li>

   <li><p>Return <var title="">subject</var>.</li>

  </ol><h5 id=examples-4><span class=secno>5.5.2.1 </span>Examples</h5>

  <p><i>This section is non-normative.</i></p>

  <div class=example>

   <p>Here is an example of some HTML using Microdata to express RDF
   statements:</p>

   <pre>&lt;dl itemscope
    itemtype="http://purl.org/vocab/frbr/core#Work"
    itemid="http://purl.oreilly.com/works/45U8QJGZSQKDH8N"&gt;
 &lt;dt&gt;Title&lt;/dt&gt;
 &lt;dd&gt;&lt;cite itemprop="http://purl.org/dc/terms/title"&gt;Just a Geek&lt;/cite&gt;&lt;/dd&gt;
 &lt;dt&gt;By&lt;/dt&gt;
 &lt;dd&gt;&lt;span itemprop="http://purl.org/dc/terms/creator"&gt;Wil Wheaton&lt;/span&gt;&lt;/dd&gt;
 &lt;dt&gt;Format&lt;/dt&gt;
 &lt;dd itemprop="http://purl.org/vocab/frbr/core#realization"
     itemscope
     itemtype="http://purl.org/vocab/frbr/core#Expression"
     itemid="http://purl.oreilly.com/products/9780596007683.BOOK"&gt;
  &lt;link itemprop="http://purl.org/dc/terms/type" href="http://purl.oreilly.com/product-types/BOOK"&gt;
  Print
 &lt;/dd&gt;
 &lt;dd itemprop="http://purl.org/vocab/frbr/core#realization"
     itemscope
     itemtype="http://purl.org/vocab/frbr/core#Expression"
     itemid="http://purl.oreilly.com/products/9780596802189.EBOOK"&gt;
  &lt;link itemprop="http://purl.org/dc/terms/type" href="http://purl.oreilly.com/product-types/EBOOK"&gt;
  Ebook
 &lt;/dd&gt;
&lt;/dl&gt;</pre>

   <p>This is equivalent to the following Turtle:</p>

  <pre class=turtle>@prefix dc: &lt;http://purl.org/dc/terms/&gt; .
 @prefix frbr: &lt;http://purl.org/vocab/frbr/core#&gt; .

&lt;http://purl.oreilly.com/works/45U8QJGZSQKDH8N&gt; a frbr:Work ;
     dc:creator "Wil Wheaton"@en ;
     dc:title "Just a Geek"@en ;
     frbr:realization &lt;http://purl.oreilly.com/products/9780596007683.BOOK&gt;,
         &lt;http://purl.oreilly.com/products/9780596802189.EBOOK&gt; .

&lt;http://purl.oreilly.com/products/9780596007683.BOOK&gt; a frbr:Expression ;
     dc:type &lt;http://purl.oreilly.com/product-types/BOOK&gt; .

&lt;http://purl.oreilly.com/products/9780596802189.EBOOK&gt; a frbr:Expression ;
     dc:type &lt;http://purl.oreilly.com/product-types/EBOOK&gt; .</pre>

  </div>

  <div class=example>

   <p>The following snippet of HTML has microdata for two people with
   the same address:</p>

   <pre>&lt;p&gt;
 Both
 &lt;span itemscope itemtype="http://microformats.org/profile/hcard" itemref="home"&gt;&lt;span itemprop="fn"
 &gt;&lt;span itemprop="n" itemscope&gt;&lt;span itemprop="given-name"&gt;Princeton&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
 and
 &lt;span itemscope itemtype="http://microformats.org/profile/hcard" itemref="home"&gt;&lt;span itemprop="fn"
 &gt;&lt;span itemprop="n" itemscope&gt;&lt;span itemprop="given-name"&gt;Trekkie&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
 live at
 &lt;span id="home" itemprop="adr" itemscope&gt;&lt;span itemprop="street-address"&gt;Avenue Q&lt;/span&gt;.&lt;/span&gt;
&lt;/p&gt;</pre>

   <p>It generates these triples expressed in Turtle (including a
   triple that in this case is expressed twice, though that is not
   meaningful in RDF):</p>

   <pre class=turtle>@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
@prefix dct: &lt;http://purl.org/dc/terms/&gt; .
@prefix hcard: &lt;http://www.w3.org/1999/xhtml/microdata#http://microformats.org/profile/hcard%23:&gt; .

&lt;&gt; &lt;http://www.w3.org/1999/xhtml/microdata#item&gt; _:n0 ;
   &lt;http://www.w3.org/1999/xhtml/microdata#item&gt; _:n1 .
_:n0  rdf:type &lt;http://microformats.org/profile/hcard&gt; ;
      hcard:fn "Princeton" ;
      hcard:n _:n0a
      hcard:adr _:n2 .
_:n0a hcard:n%20given-name "Princeton" .
_:n1  rdf:type &lt;http://microformats.org/profile/hcard&gt; ;
      hcard:fn "Trekkie" ;
      hcard:n _:n1a
      hcard:adr _:n2 .
_:n1a hcard:n%20given-name "Trekkie" .
_:n2  hcard:adr%20street-address "Avenue Q" ;
      hcard:adr%20street-address "Avenue Q" .</pre>

  </div>



  </div><!--data-component-->



  <h4 id=atom><span class=secno>5.5.3 </span>Atom</h4>

  <p>Given a <code><a href=#document>Document</a></code> <var title="">source</var>, a user
  agent may run the following algorithm to <dfn id=extracting-atom title="extracting
  Atom">extract an Atom feed</dfn>. This is not the only algorithm
  that can be used for this purpose; for instance, a user agent might
  instead use the hAtom algorithm. <a href=#refsHATOM>[HATOM]</a></p>

  <ol><li><p>If the <code><a href=#document>Document</a></code> <var title="">source</var> does
   not contain any <code><a href=#the-article-element>article</a></code> elements, then return nothing
   and abort these steps. This algorithm can only be used with
   documents that contain distinct articles.</p>

   <li><p>Let <var title="">R</var> be an empty <a href=#xml-documents title="XML
   documents">XML</a> <code><a href=#document>Document</a></code> object whose <a href="#the-document's-address" title="the document's address">address</a> is user-agent
   defined.</li>

   <li><p>Append a <code title="">feed</code> element in the
   <a href=#atom-namespace>Atom namespace</a> to <var title="">R</var>.</li>

   <li>

    <p>For each <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute and a <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute and whose <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute's value is <code title=meta-author><a href=#meta-author>author</a></code>, run the following substeps:</p>

    <ol><li><p>Append an <code title="">author</code> element in the
     <a href=#atom-namespace>Atom namespace</a> to the root element of <var title="">R</var>.</li>

     <li><p>Append a <code title="">name</code> element in the
     <a href=#atom-namespace>Atom namespace</a> to the element created in the
     previous step.</p>

     <li><p>Append a text node whose data is the value of the
     <code><a href=#meta>meta</a></code> element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute to the element
     created in the previous step.</li>

    </ol><!-- could use vCards instead, and get <atom:email> and <atom:uri>
    elements out of this instead of just <atom:name> --></li>

   <li>

    <p>If there is a <code><a href=#the-link-element>link</a></code> element whose <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute's value includes the
    keyword <code title=rel-icon><a href=#rel-icon>icon</a></code>, and that element also
    has an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute whose
    value successfully <a href=#resolve-a-url title="resolve a url">resolves</a>
    relative to the <code><a href=#the-link-element>link</a></code> element, then append an <code title="">icon</code> element in the <a href=#atom-namespace>Atom namespace</a> to
    the root element of <var title="">R</var> whose contents is a text
    node with its data set to the <a href=#absolute-url>absolute URL</a> resulting
    from <a href=#resolve-a-url title="resolve a url">resolving</a> the value of the
    <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute.</p>

    <!-- could check ratio, could check type... -->

   </li>

   <li>

    <p>Append an <code title="">id</code> element in the <a href=#atom-namespace>Atom
    namespace</a> to the root element of <var title="">R</var>
    whose contents is a text node with its data set to <a href="#the-document's-current-address">the
    document's current address</a>.</p>

   </li>

   <li>

    <p>Optionally: Let <var title="">x</var> be a <code title="">link</code> element in the <a href=#atom-namespace>Atom
    namespace</a>. Add a <code title="">rel</code> attribute whose
    value is the string "<code title="">self</code>" to <var title="">x</var>. Append a text node with its data set to the
    (user-agent-defined) <a href="#the-document's-address" title="the document's
    address">address</a> of <var title="">R</var> to <var title="">x</var>. Append <var title="">x</var> to the root element
    of <var title="">R</var>.</p>

    <p class=note>This step would be skipped when the document <var title="">R</var> has no convenient <a href="#the-document's-address" title="the document's
    address">address</a>. The presence of the <code title="">rel="self"</code> link is a "should"-level requirement in
    the Atom specification.</p>

   </li>

   <li>

    <p>Let <var title="">x</var> be a <code title="">link</code>
    element in the <a href=#atom-namespace>Atom namespace</a>. Add a <code title="">rel</code> attribute whose value is the string "<code title="">alternate</code>" to <var title="">x</var>. If the
    document being converted is an <a href=#html-documents title="HTML documents">HTML
    document</a>, add a <code title="">type</code> attribute whose
    value is the string "<code><a href=#text/html>text/html</a></code>" to <var title="">x</var>. Otherwise, the document being converted is an
    <a href=#xml-documents title="XML documents">XML document</a>; add a <code title="">type</code> attribute whose value is the string
    "<code><a href=#application/xhtml+xml>application/xhtml+xml</a></code>" to <var title="">x</var>. Append a text node with its data set to
    <a href="#the-document's-current-address">the document's current address</a> to <var title="">x</var>. Append <var title="">x</var> to the root element
    of <var title="">R</var>.</p>

   </li>

   <li><p>Let <var title="">subheading text</var> be the empty
   string.</li>

   <li><p>Let <var title="">heading</var> be the first element of
   <a href=#heading-content>heading content</a> whose nearest ancestor of
   <a href=#sectioning-content>sectioning content</a> is <a href=#the-body-element>the body
   element</a>, if any, or null if there is none.</li>

   <li>

    <p>Take the appropriate action from the following list, as
    determined by the type of the <var title="">heading</var>
    element:</p>

    <dl><dt>If <var title="">heading</var> is null</dt>

     <dd>

      <p>Let <var title="">heading text</var> be the
      <code><a href=#textcontent>textContent</a></code> of <a href=#the-title-element>the <code>title</code>
      element</a>, if there is one, or the empty string
      otherwise.</p>

     </dd>

     <dt>If <var title="">heading</var> is a <code><a href=#the-hgroup-element>hgroup</a></code> element</dt>

     <dd>

      <p>If <var title="">heading</var> contains no child
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements, let <var title="">heading text</var> be the empty string.</p>

      <p>Otherwise, let <var title="">headings list</var> be a list of
      all the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element children
      of <var title="">heading</var>, sorted first by descending
      <a href=#rank>rank</a> and then in <a href=#tree-order>tree order</a> (so
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>s first, then <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>s, etc, with each
      group in the order they appear in the document). Then, let <var title="">heading text</var> be the <code><a href=#textcontent>textContent</a></code> of
      the first entry in <var title="">headings list</var>, and if
      there are multiple entries, let <var title="">subheading
      text</var> be the <code><a href=#textcontent>textContent</a></code> of the second entry
      in <var title="">headings list</var>.</p>

     </dd>

     <dt>If <var title="">heading</var> is an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element</dt>

     <dd>

      <p>Let <var title="">heading text</var> be the
      <code><a href=#textcontent>textContent</a></code> of <var title="">heading</var>.</p>

     </dd>

    </dl></li>

   <li>

    <p>Append a <code title="">title</code> element in the <a href=#atom-namespace>Atom
    namespace</a> to the root element of <var title="">R</var>
    whose contents is a text node with its data set to <var title="">heading text</var>.</p>

   </li>

   <li>

    <p>If <var title="">subheading text</var> is not the empty string,
    append a <code title="">subtitle</code> element in the <a href=#atom-namespace>Atom
    namespace</a> to the root element of <var title="">R</var>
    whose contents is a text node with its data set to <var title="">subheading text</var>.</p>

   </li>

   <li><p>Let <var title="">global update date</var> have no
   value.</li>

   <li>

    <p>For each <code><a href=#the-article-element>article</a></code> element <var title="">article</var> that does not have an ancestor
    <code><a href=#the-article-element>article</a></code> element, run the following steps:</p>

    <ol><li><p>Let <var title="">E</var> be an <code title="">entry</code> element in the <a href=#atom-namespace>Atom namespace</a>,
     and append <var title="">E</var> to the root element of <var title="">R</var>.</li>

     <li><p>Let <var title="">heading</var> be the first element of
     <a href=#heading-content>heading content</a> whose nearest ancestor of
     <a href=#sectioning-content>sectioning content</a> is <var title="">article</var>,
     if any, or null if there is none.</li>

     <li>

      <p>Take the appropriate action from the following list, as
      determined by the type of the <var title="">heading</var>
      element:</p>

      <dl><dt>If <var title="">heading</var> is null</dt>

       <dd>

        <p>Let <var title="">heading text</var> be the empty
        string.</p>

       </dd>

       <dt>If <var title="">heading</var> is a <code><a href=#the-hgroup-element>hgroup</a></code> element</dt>

       <dd>

        <p>If <var title="">heading</var> contains no child
        <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements, let <var title="">heading text</var> be the empty string.</p>

        <p>Otherwise, let <var title="">headings list</var> be a list
        of all the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element
        children of <var title="">heading</var>, sorted first by
        descending <a href=#rank>rank</a> and then in <a href=#tree-order>tree
        order</a> (so <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>s first, then
        <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>s, etc, with each group in the order they
        appear in the document). Then, let <var title="">heading
        text</var> be the <code><a href=#textcontent>textContent</a></code> of the first entry
        in <var title="">headings list</var>.</p>

       </dd>

       <dt>If <var title="">heading</var> is an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element</dt>

       <dd>

        <p>Let <var title="">heading text</var> be the
        <code><a href=#textcontent>textContent</a></code> of <var title="">heading</var>.</p>

       </dd>

      </dl></li>

     <li>

      <p>Append a <code title="">title</code> element in the
      <a href=#atom-namespace>Atom namespace</a> to <var title="">E</var> whose
      contents is a text node with its data set to <var title="">heading text</var>.</p>

     </li>

     <!-- <atom:author> is required either at the feed level (above)
     or the entry level (here) but we don't provide it -->

     <li>

      <p>Clone <var title="">article</var> and its descendants into an
      environment that has <a href=#concept-bc-noscript title=concept-bc-noscript>scripting
      disabled</a>, has no <a href=#plugin title=plugin>plugins</a>, and
      fails any attempt to <a href=#fetch title=fetch>fetch</a> any
      resources. Let <var title="">cloned article</var> be the
      resulting clone <code><a href=#the-article-element>article</a></code> element.</p>

     </li>

     <li>

      <p>Remove from the subtree rooted at <var title="">cloned
      article</var> any <code><a href=#the-article-element>article</a></code> elements other than the
      <var title="">cloned article</var> itself, any
      <code><a href=#the-header-element>header</a></code>, <code><a href=#the-footer-element>footer</a></code>, or <code><a href=#the-nav-element>nav</a></code>
      elements whose nearest ancestor of <a href=#sectioning-content>sectioning
      content</a> is the <var title="">cloned article</var>, and
      the first element of <a href=#heading-content>heading content</a> whose nearest
      ancestor of <a href=#sectioning-content>sectioning content</a> is the <var title="">cloned article</var>, if any.</p>

     </li>

     <li>

      <p>If <var title="">cloned article</var> contains any
      <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> elements with <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code> attributes whose
      values <a href=#parse-a-global-date-and-time-string title="parse a global date and time string">parse
      as global date and time strings</a> without errors, then let
      <var title="">update date</var> be the value of the <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code> attribute that parses
      to the newest <a href=#concept-datetime title=concept-datetime>global date and
      time</a>.</p>

      <p>Otherwise, let <var title="">update date</var> have no
      value.</p>

      <p class=note>This value is used below; it is calculated here
      because in certain cases the next step mutates the <var title="">cloned article</var>.</p>

     </li>

     <li>

      <p>If the document being converted is an <a href=#html-documents title="HTML
      documents">HTML document</a>, then: Let <var title="">x</var>
      be a <code title="">content</code> element in the <a href=#atom-namespace>Atom
      namespace</a>. Add a <code title="">type</code> attribute
      whose value is the string "<code title="">html</code>" to <var title="">x</var>. Append a text node with its data set to the
      result of running the <a href=#html-fragment-serialization-algorithm>HTML fragment serialization
      algorithm</a> on <var title="">cloned article</var> to <var title="">x</var>. Append <var title="">x</var> to <var title="">E</var>.</p>

      <p>Otherwise, the document being converted is an <a href=#xml-documents title="XML documents">XML document</a>: Let <var title="">x</var> be a <code title="">content</code> element in
      the <a href=#atom-namespace>Atom namespace</a>. Add a <code title="">type</code> attribute whose value is the string "<code title="">xml</code>" to <var title="">x</var>. Append a
      <code><a href=#the-div-element>div</a></code> element to <var title="">x</var>. Move all the
      child nodes of the <var title="">cloned article</var> node to
      that <code><a href=#the-div-element>div</a></code> element, preserving their relative
      order. Append <var title="">x</var> to <var title="">E</var>.</p>

     </li>

     <li>

      <p>Establish the value of <var title="">id</var> and <var title="">has-alternate</var> from the first of the following to
      apply:</p>

      <dl><dt>If the <var title="">article</var> node has a descendant
       <code><a href=#the-a-element>a</a></code> or <code><a href=#the-area-element>area</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute that
       successfully <a href=#resolve-a-url title="resolve a url">resolves</a>
       relative to that descendant and a <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute whose value
       includes the <code title=rel-bookmark><a href=#link-type-bookmark>bookmark</a></code>
       keyword</dt>

       <dd>Let <var title="">id</var> be the <a href=#absolute-url>absolute URL</a>
       resulting from <a href=#resolve-a-url title="resolve a url">resolving</a> the
       value of the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
       attribute of the first such <code><a href=#the-a-element>a</a></code> or <code><a href=#the-area-element>area</a></code>
       element, relative to the element. Let <var title="">has-alternate</var> be true.</dd>

       <dt>If the <var title="">article</var> node has an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute</dt>

       <dd>Let <var title="">id</var> be <a href="#the-document's-current-address">the document's current
       address</a>, with the fragment identifier (if any) removed,
       and with a new fragment identifier specified, consisting of the
       value of the <var title="">article</var> element's <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute. Let <var title="">has-alternate</var> be false.</dd>

       <dt>Otherwise</dt>

       <dd>Let <var title="">id</var> be a user-agent-defined
       undereferenceable yet globally unique <a href=#valid-url title="valid
       URL">valid</a> <a href=#absolute-url>absolute URL</a>. The same
       <a href=#absolute-url>absolute URL</a> should be generated for each run of
       this algorithm when given the same input. Let <var title="">has-alternate</var> be false.</dd>

      </dl></li>

     <li>

      <p>Append an <code title="">id</code> element in the <a href=#atom-namespace>Atom
      namespace</a> to <var title="">E</var> whose contents is a
      text node with its data set to <var title="">id</var>.</p>

     </li>

     <li>

      <p>If <var title="">has-alternate</var> is true: Let <var title="">x</var> be a <code title="">link</code> element in the
      <a href=#atom-namespace>Atom namespace</a>. Add a <code title="">rel</code>
      attribute whose value is the string "<code title="">alternate</code>" to <var title="">x</var>. Append a
      text node with its data set to <var title="">id</var> to <var title="">x</var>. Append <var title="">x</var> to <var title="">E</var>.</p>

     </li>

     <li>

      <p>If <var title="">article</var> has a <code><a href=#the-time-element>time</a></code>
      element descendant that has a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute and whose
      nearest ancestor <code><a href=#the-article-element>article</a></code> element is <var title="">article</var>, and the first such element's <a href=#concept-time-date title=concept-time-date>date</a> is not unknown, then run
      the following substeps, with <var title="">e</var> being the
      first such element:</p>

      <ol><li><p>Let <var title="">datetime</var> be a <a href=#concept-datetime title=concept-datetime>global date and time</a> whose date
       component is the <a href=#concept-time-date title=concept-time-date>date</a> of
       <var title="">e</var>.</li>

       <li><p>If <var title="">e</var>'s <a href=#concept-time-time title=concept-time-time>time</a> and <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a> are not
       unknown, then let <var title="">datetime</var>'s time and
       time-zone offset components be the <a href=#concept-time-time title=concept-time-time>time</a> and <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a> of <var title="">e</var>. Otherwise, let them be midnight and no offset
       respectively ("<code title="">00:00Z</code>").</li>

       <li><p>Let <var title="">publication date</var> be the
       <a href=#best-representation-of-the-global-date-and-time-string>best representation of the global date and time
       string</a> <var title="">datetime</var>.</li>

      </ol><p>Otherwise, let <var title="">publication date</var> have no
      value.</p>

     </li>

     <li>

      <p>If <var title="">update date</var> has no value but <var title="">publication date</var> does, then let <var title="">update date</var> have the value of <var title="">publication date</var>.</p>

      <p>Otherwise, if <var title="">publication date</var> has no
      value but <var title="">update date</var> does, then let <var title="">publication date</var> have the value of <var title="">update date</var>.</p>

     </li>

     <li>

      <p>If <var title="">update date</var> has a value, and <var title="">global update date</var> has no value or is less recent
      than <var title="">update date</var>, then let <var title="">global update date</var> have the value of <var title="">update date</var>.</p>

     </li>

     <li>

      <p>If <var title="">publication date</var> and <var title="">update date</var> both still have no value, then let
      them both value a value that is a <a href=#valid-global-date-and-time-string>valid global date and
      time string</a> representing the <a href=#concept-datetime title=concept-datetime>global date and time</a> of the
      moment that this algorithm was invoked.</p>

     </li>

     <li>

      <p>Append an <code title="">published</code> element in the
      <a href=#atom-namespace>Atom namespace</a> to <var title="">E</var> whose
      contents is a text node with its data set to <var title="">publication date</var>.</p>

     </li>

     <li>

      <p>Append an <code title="">updated</code> element in the
      <a href=#atom-namespace>Atom namespace</a> to <var title="">E</var> whose
      contents is a text node with its data set to <var title="">update date</var>.</p>

     </li>

    </ol></li>

   <li>

    <p>If <var title="">global update date</var> has no value, then
    let it have a value that is a <a href=#valid-global-date-and-time-string>valid global date and time
    string</a> representing the <a href=#concept-datetime title=concept-datetime>global date and time</a> of the date
    and time of the <code><a href=#document>Document</a></code>'s source file's last
    modification, if it is known, or else of the moment that this
    algorithm was invoked.</p>

   </li>

   <li>

    <p>Insert an <code title="">updated</code> element in the
    <a href=#atom-namespace>Atom namespace</a> into the root element of <var title="">R</var> before the first <code title="">entry</code> in
    the <a href=#atom-namespace>Atom namespace</a> whose contents is a text node with
    its data set to <var title="">global update date</var>.</p>

   </li>

   <li><p>Return the Atom document <var title="">R</var>.</li>

  </ol><p class=note>The above algorithm does not guarantee that the
  output will be a conforming Atom feed. In particular, if
  insufficient information is provided in the document (e.g. if the
  document does not have any <code title="">&lt;meta name="author"
  content="..."&gt;</code> elements), then the output will not be
  conforming.</p>

  <p>The <dfn id=atom-namespace>Atom namespace</dfn> is: <code>http://www.w3.org/2005/Atom</code></p>



  </div>





  <h2 id=browsers><span class=secno>6 </span>Loading Web pages</h2>

  <div class=impl>

  <p>This section describes features that apply most directly to Web
  browsers. Having said that, except where specified otherwise, the
  requirements defined in this section <em>do</em> apply to all user
  agents, whether they are Web browsers or not.</p>

  </div>



  <h3 id=windows><span class=secno>6.1 </span>Browsing contexts</h3>

  <p>A <dfn id=browsing-context>browsing context</dfn> is an environment in which
  <code><a href=#document>Document</a></code> objects are presented to the user.</p>

  <p class=note>A tab or window in a Web browser typically contains
  a <a href=#browsing-context>browsing context</a>, as does an <code><a href=#the-iframe-element>iframe</a></code><span class=impl> or <code><a href=#frame>frame</a></code>s in a
  <code><a href=#frameset>frameset</a></code></span>.</p>

  <p>Each <a href=#browsing-context>browsing context</a> has a corresponding
  <code><a href=#windowproxy>WindowProxy</a></code> object.</p>

  <p>A <a href=#browsing-context>browsing context</a> has a <a href=#session-history>session
  history</a>, which lists the <code><a href=#document>Document</a></code> objects that
  that <a href=#browsing-context>browsing context</a> has presented, is presenting, or
  will present. At any time, one <code><a href=#document>Document</a></code> in each
  <a href=#browsing-context>browsing context</a> is designated the <dfn id=active-document>active
  document</dfn>.</p>

  <p>Each <code><a href=#document>Document</a></code> is associated with a
  <code><a href=#window>Window</a></code> object. A <a href=#browsing-context>browsing context</a>'s
  <code><a href=#windowproxy>WindowProxy</a></code> object forwards everything to the
  <a href=#browsing-context>browsing context</a>'s <a href=#active-document>active document</a>'s
  <code><a href=#window>Window</a></code> object.</p>

  <p class=note>In general, there is a 1-to-1 mapping from the
  <code><a href=#window>Window</a></code> object to the <code><a href=#document>Document</a></code> object. In
  one particular case, a <code><a href=#window>Window</a></code> can be reused for the
  presentation of a second <code><a href=#document>Document</a></code> in the same
  <a href=#browsing-context>browsing context</a>, such that the mapping is then
  2-to-1. This occurs when a <a href=#browsing-context>browsing context</a> is <a href=#navigate title=navigate>navigated</a> from the initial
  <code><a href=#about:blank>about:blank</a></code> <code><a href=#document>Document</a></code> to another, with
  <a href=#replacement-enabled>replacement enabled</a>.</p>

  <p class=note>A <code><a href=#document>Document</a></code> does not necessarily have a
  <a href=#browsing-context>browsing context</a> associated with it. In particular,
  data mining tools are likely to never instantiate browsing
  contexts.</p>

  <hr><p>A <a href=#browsing-context>browsing context</a> can have a <dfn id=creator-browsing-context>creator browsing
  context</dfn>, the <a href=#browsing-context>browsing context</a> that was
  responsible for its creation. If a <a href=#browsing-context>browsing context</a> has
  a <a href=#parent-browsing-context>parent browsing context</a>, then that is its
  <a href=#creator-browsing-context>creator browsing context</a>. Otherwise, if the
  <a href=#browsing-context>browsing context</a> has an <a href=#opener-browsing-context>opener browsing
  context</a>, then <em>that</em> is its <a href=#creator-browsing-context>creator browsing
  context</a>. Otherwise, the <a href=#browsing-context>browsing context</a> has no
  <a href=#creator-browsing-context>creator browsing context</a>.</p>

  <p>If a <a href=#browsing-context>browsing context</a> <var title="">A</var> has a
  <a href=#creator-browsing-context>creator browsing context</a>, then the
  <code><a href=#document>Document</a></code> that was the <a href=#active-document>active document</a> of
  that <a href=#creator-browsing-context>creator browsing context</a> at the time <var title="">A</var> was created is the <dfn id=creator-document>creator
  <code>Document</code></dfn>.</p>

  <div class=impl>

  <p>When a <a href=#browsing-context>browsing context</a> is first created, it must be
  created with a single <code><a href=#document>Document</a></code> in its session history,
  whose <a href="#the-document's-address" title="the document's address">address</a> is
  <code><a href=#about:blank>about:blank</a></code>, which is marked as being an <a href=#html-documents title="HTML documents">HTML document</a>, and whose <a href="#document's-character-encoding" title="document's character encoding">character encoding</a> is
  UTF-8. The <code><a href=#document>Document</a></code> must have a single child
  <code><a href=#the-html-element-0>html</a></code> node, which itself has a single child
  <code><a href=#the-body-element-0>body</a></code> node.</p>

  <p class=note>If the <a href=#browsing-context>browsing context</a> is created
  specifically to be immediately navigated, then that initial
  navigation will have <a href=#replacement-enabled>replacement enabled</a>.</p>

  <p id=about-blank-origin>The <a href=#origin>origin</a> of the
  <code><a href=#about:blank>about:blank</a></code> <code><a href=#document>Document</a></code> is set when the
  <code><a href=#document>Document</a></code> is created. If the new <a href=#browsing-context>browsing
  context</a> has a <a href=#creator-browsing-context>creator browsing context</a>, then the
  <a href=#origin>origin</a> of the <code><a href=#about:blank>about:blank</a></code>
  <code><a href=#document>Document</a></code> is the <a href=#origin>origin</a> of the
  <a href=#creator-document>creator <code>Document</code></a>. Otherwise, the
  <a href=#origin>origin</a> of the <code><a href=#about:blank>about:blank</a></code>
  <code><a href=#document>Document</a></code> is a globally unique identifier assigned when
  the new <a href=#browsing-context>browsing context</a> is created.</p>

  </div>


  <h4 id=nested-browsing-contexts><span class=secno>6.1.1 </span>Nested browsing contexts</h4>

  <p>Certain elements (for example, <code><a href=#the-iframe-element>iframe</a></code> elements) can
  instantiate further <a href=#browsing-context title="browsing context">browsing
  contexts</a>. These are called <dfn id=nested-browsing-context title="nested browsing
  context">nested browsing contexts</dfn>. If a browsing context <var title="">P</var> has an element <var title="">E</var> in one of its
  <code><a href=#document>Document</a></code>s <var title="">D</var> that nests another
  browsing context <var title="">C</var> inside it, then <var title="">P</var> is said to be the <dfn id=parent-browsing-context>parent browsing
  context</dfn> of <var title="">C</var>, <var title="">C</var> is
  said to be a <dfn id=child-browsing-context>child browsing context</dfn> of <var title="">P</var>, <var title="">C</var> is said to be <dfn id=browsing-context-nested-through title="browsing context nested through">nested through</dfn> <var title="">D</var>, and <var title="">E</var> is said to be the
  <dfn id=browsing-context-container>browsing context container</dfn> of <var title="">C</var>.</p>

  <p>A browsing context <var title="">A</var> is said to be an
  ancestor of a browsing context <var title="">B</var> if there exists
  a browsing context <var title="">A'</var> that is a <a href=#child-browsing-context>child
  browsing context</a> of <var title="">A</var> and that is itself
  an ancestor of <var title="">B</var>, or if there is a browsing
  context <var title="">P</var> that is a <a href=#child-browsing-context>child browsing
  context</a> of <var title="">A</var> and that is the <a href=#parent-browsing-context>parent
  browsing context</a> of <var title="">B</var>.</p>

  <p>The browsing context with no <a href=#parent-browsing-context>parent browsing context</a>
  is the <dfn id=top-level-browsing-context>top-level browsing context</dfn> of all the browsing
  contexts <a href=#nested-browsing-context title="nested browsing context">nested</a> within
  it (either directly or indirectly through other nested browsing
  contexts).</p>

  <p>The transitive closure of <a href=#parent-browsing-context title="parent browsing
  context">parent browsing contexts</a> for a <a href=#nested-browsing-context>nested browsing
  context</a> gives the list of <dfn id=ancestor-browsing-context title="ancestor browsing
  context">ancestor browsing contexts</dfn>.</p>

  <p>The <dfn id=list-of-the-descendant-browsing-contexts>list of the descendant browsing contexts</dfn> of a
  <code><a href=#document>Document</a></code> <var title="">d</var> is the list returned by
  the following algorithm:</p>

  <ol><li><p>Let <var title="">list</var> be an empty list.</li>

   <li><p>For each <a href=#child-browsing-context>child browsing context</a> of <var title="">d</var> that is <a href=#browsing-context-nested-through title="browsing context nested
   through">nested through</a> an element that is <a href=#in-a-document title="in a
   document">in the <code>Document</code></a> <var title="">d</var>, in the <a href=#tree-order>tree order</a> of the elements of
   the elements nesting those <a href=#browsing-context title="browsing context">browsing
   contexts</a>, append to the list <var title="">list</var> the
   <a href=#list-of-the-descendant-browsing-contexts>list of the descendant browsing contexts</a> of the
   <a href=#active-document>active document</a> of that <a href=#child-browsing-context>child browsing
   context</a>.</li>

   <li><p>Return the constructed <var title="">list</var>.</li>

  </ol><hr><p>A <code><a href=#document>Document</a></code> is said to be <dfn id=fully-active>fully active</dfn>
  when it is the <a href=#active-document>active document</a> of its <a href=#browsing-context>browsing
  context</a>, and either its browsing context is a <a href=#top-level-browsing-context>top-level
  browsing context</a>, or the <code><a href=#document>Document</a></code> <a href=#browsing-context-nested-through title="browsing context nested through">through which</a> that
  browsing context is <a href=#nested-browsing-context title="nested browsing
  context">nested</a> is itself <a href=#fully-active>fully active</a>.</p>

  <p>Because they are nested through an element, <a href=#child-browsing-context title="child
  browsing context">child browsing contexts</a> are always tied to
  a specific <code><a href=#document>Document</a></code> in their <a href=#parent-browsing-context>parent browsing
  context</a>. User agents must not allow the user to interact with
  <a href=#child-browsing-context title="child browsing context">child browsing contexts</a>
  of elements that are in <code><a href=#document>Document</a></code>s that are not
  themselves <a href=#fully-active>fully active</a>.</p>

  <p>A <a href=#nested-browsing-context>nested browsing context</a> can have a <a href=#seamless-browsing-context-flag>seamless
  browsing context flag</a> set, if it is embedded through an
  <code><a href=#the-iframe-element>iframe</a></code> element with a <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> attribute.</p>


  <h5 id=navigating-nested-browsing-contexts-in-the-dom><span class=secno>6.1.1.1 </span>Navigating nested browsing contexts in the DOM</h5>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-top><a href=#dom-top>top</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#windowproxy>WindowProxy</a></code> for the <a href=#top-level-browsing-context>top-level browsing context</a>.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-parent><a href=#dom-parent>parent</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#windowproxy>WindowProxy</a></code> for the <a href=#parent-browsing-context>parent browsing context</a>.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-frameElement><a href=#dom-frameelement>frameElement</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#element>Element</a></code> for the <a href=#browsing-context-container>browsing context container</a>.</p>

    <p>Returns null if there isn't one.</p>

    <p>Throws a <code><a href=#security_err>SECURITY_ERR</a></code> exception in cross-origin situations.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-top title=dom-top><code>top</code></dfn> IDL attribute on
  the <code><a href=#window>Window</a></code> object of a <code><a href=#document>Document</a></code> in a
  <a href=#browsing-context>browsing context</a> <var title="">b</var> must return the
  <code><a href=#windowproxy>WindowProxy</a></code> object of its <a href=#top-level-browsing-context>top-level browsing
  context</a> (which would be its own <code><a href=#windowproxy>WindowProxy</a></code>
  object if it was a <a href=#top-level-browsing-context>top-level browsing context</a>
  itself).</p>

  <p>The <dfn id=dom-parent title=dom-parent><code>parent</code></dfn> IDL
  attribute on the <code><a href=#window>Window</a></code> object of a
  <code><a href=#document>Document</a></code> in a <a href=#browsing-context>browsing context</a> <var title="">b</var> must return the <code><a href=#windowproxy>WindowProxy</a></code> object of
  the <a href=#parent-browsing-context>parent browsing context</a>, if there is one (i.e. if
  <var title="">b</var> is a <a href=#child-browsing-context>child browsing context</a>), or
  the <code><a href=#windowproxy>WindowProxy</a></code> object of the <a href=#browsing-context>browsing
  context</a> <var title="">b</var> itself, otherwise (i.e. if it
  is a <a href=#top-level-browsing-context>top-level browsing context</a>).</p>

  <p>The <dfn id=dom-frameelement title=dom-frameElement><code>frameElement</code></dfn>
  IDL attribute on the <code><a href=#window>Window</a></code> object of a
  <code><a href=#document>Document</a></code> <var title="">d</var>, on getting, must run
  the following algorithm:</p>

  <ol><li><p>If <var title="">d</var> is not a <code><a href=#document>Document</a></code> in a
   <a href=#child-browsing-context>child browsing context</a>, return null and abort these
   steps.</li>

   <li><p>If the <a href=#parent-browsing-context>parent browsing context</a>'s <a href=#active-document>active
   document</a> does not have the <a href=#same-origin title="same
   origin">same</a> <a href=#effective-script-origin>effective script origin</a> as the
   <a href=#entry-script>entry script</a>, then throw a <code><a href=#security_err>SECURITY_ERR</a></code>
   exception.</li>

   <li><p>Otherwise, return the <a href=#browsing-context-container>browsing context
   container</a> for <var title="">b</var>.</li>

  </ol></div>



  <h4 id=auxiliary-browsing-contexts><span class=secno>6.1.2 </span>Auxiliary browsing contexts</h4>

  <p>It is possible to create new browsing contexts that are related
  to a <a href=#top-level-browsing-context>top-level browsing context</a> without being nested
  through an element. Such browsing contexts are called <dfn id=auxiliary-browsing-context title="auxiliary browsing context">auxiliary browsing
  contexts</dfn>. Auxiliary browsing contexts are always <a href=#top-level-browsing-context title="top-level browsing context">top-level browsing
  contexts</a>.</p>

  <p>An <a href=#auxiliary-browsing-context>auxiliary browsing context</a> has an <dfn id=opener-browsing-context>opener
  browsing context</dfn>, which is the <a href=#browsing-context>browsing context</a>
  from which the <a href=#auxiliary-browsing-context>auxiliary browsing context</a> was created,
  and it has a <dfn id=furthest-ancestor-browsing-context>furthest ancestor browsing context</dfn>, which is
  the <a href=#top-level-browsing-context>top-level browsing context</a> of the <a href=#opener-browsing-context>opener
  browsing context</a> when the <a href=#auxiliary-browsing-context>auxiliary browsing
  context</a> was created.</p>


  <h5 id=navigating-auxiliary-browsing-contexts-in-the-dom><span class=secno>6.1.2.1 </span>Navigating auxiliary browsing contexts in the DOM</h5>

  <p>The <dfn id=dom-opener title=dom-opener><code>opener</code></dfn> IDL
  attribute on the <code><a href=#window>Window</a></code> object must return the
  <code><a href=#windowproxy>WindowProxy</a></code> object of the <a href=#browsing-context>browsing context</a>
  from which the current <a href=#browsing-context>browsing context</a> was created
  (its <a href=#opener-browsing-context>opener browsing context</a>), if there is one and it
  is still available.</p>




  <h4 id=secondary-browsing-contexts><span class=secno>6.1.3 </span>Secondary browsing contexts</h4>

  <p>User agents may support <dfn id=secondary-browsing-context title="secondary browsing
  context">secondary browsing contexts</dfn>, which are <a href=#browsing-context title="browsing context">browsing contexts</a> that form part of
  the user agent's interface, apart from the main content area.</p>


  <div class=impl>

  <h4 id=security-nav><span class=secno>6.1.4 </span>Security</h4>

  <p id=security-1>A <a href=#browsing-context>browsing context</a> <var title="">A</var> is <dfn id=allowed-to-navigate>allowed to navigate</dfn> a second
  <a href=#browsing-context>browsing context</a> <var title="">B</var> if one of the
  following conditions is true:</p>

  <ul><li>Either the <a href=#origin>origin</a> of the <a href=#active-document>active
   document</a> of <var title="">A</var> is the <a href=#same-origin title="same
   origin">same</a> as the <a href=#origin>origin</a> of the <a href=#active-document>active
   document</a> of <var title="">B</var>, or</li>

   <li>The browsing context <var title="">A</var> is a <a href=#nested-browsing-context>nested
   browsing context</a> and its <a href=#top-level-browsing-context>top-level browsing
   context</a> is <var title="">B</var>, or</li>

   <li>The browsing context <var title="">B</var> is an
   <a href=#auxiliary-browsing-context>auxiliary browsing context</a> and <var title="">A</var>
   is <a href=#allowed-to-navigate>allowed to navigate</a> <var title="">B</var>'s
   <a href=#opener-browsing-context>opener browsing context</a>, or</li>

   <li>The browsing context <var title="">B</var> is not a
   <a href=#top-level-browsing-context>top-level browsing context</a>, but there exists an
   <a href=#ancestor-browsing-context>ancestor browsing context</a> of <var title="">B</var>
   whose <a href=#active-document>active document</a> has the <a href=#same-origin title="same
   origin">same</a> <a href=#origin>origin</a> as the <a href=#active-document>active
   document</a> of <var title="">A</var> (possibly in fact being
   <var title="">A</var> itself).</li>

  </ul><hr><p>An element has a <dfn id=browsing-context-scope-origin>browsing context scope origin</dfn> if its
  <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> is a
  <a href=#top-level-browsing-context>top-level browsing context</a> or if all of its
  <code><a href=#document>Document</a></code>'s <a href=#ancestor-browsing-context title="ancestor browsing
  context">ancestor browsing contexts</a> all have <a href=#active-document title="active document">active documents</a> whose
  <a href=#origin>origin</a> are the <a href=#same-origin>same origin</a> as the
  element's <code><a href=#document>Document</a></code>'s <a href=#origin>origin</a>. If an element
  has a <a href=#browsing-context-scope-origin>browsing context scope origin</a>, then its value is
  the <a href=#origin>origin</a> of the element's <code><a href=#document>Document</a></code>.</p>

  </div>


  <div class=impl>

  <h4 id=groupings-of-browsing-contexts><span class=secno>6.1.5 </span>Groupings of browsing contexts</h4>

  <p>Each <a href=#browsing-context>browsing context</a> is defined as having a list of
  zero or more <dfn id=directly-reachable-browsing-contexts>directly reachable browsing contexts</dfn>. These
  are:</p>

  <ul><li>All the <a href=#browsing-context>browsing context</a>'s <a href=#child-browsing-context title="child
   browsing context">child browsing contexts</a>.</li>

   <li>The <a href=#browsing-context>browsing context</a>'s <a href=#parent-browsing-context>parent browsing
   context</a>.</li>

   <li>All the <a href=#browsing-context title="browsing context">browsing contexts</a>
   that have the <a href=#browsing-context>browsing context</a> as their <a href=#opener-browsing-context>opener
   browsing context</a>.</li>

   <li>The <a href=#browsing-context>browsing context</a>'s <a href=#opener-browsing-context>opener browsing
   context</a>.</li>

  </ul><p>The transitive closure of all the <a href=#browsing-context title="browsing
  context">browsing contexts</a> that are <a href=#directly-reachable-browsing-contexts>directly reachable
  browsing contexts</a> forms a <dfn id=unit-of-related-browsing-contexts>unit of related browsing
  contexts</dfn>.</p>

  <p>Each <a href=#unit-of-related-browsing-contexts>unit of related browsing contexts</a> is then
  further divided into the smallest number of groups such that every
  member of each group has an <a href=#effective-script-origin>effective script origin</a>
  that, through appropriate manipulation of the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute, could
  be made to be the same as other members of the group, but could not
  be made the same as members of any other group. Each such group is a
  <dfn id=unit-of-related-similar-origin-browsing-contexts>unit of related similar-origin browsing contexts</dfn>.</p>

  <p>Each <a href=#unit-of-related-similar-origin-browsing-contexts>unit of related similar-origin browsing
  contexts</a> can have a <dfn id=entry-script>entry script</dfn> which is used to
  obtain, amongst other things, the <a href="#script's-base-url">script's base URL</a> to
  <a href=#resolve-a-url title="resolve a url">resolve</a> relative <a href=#url title=URL>URLs</a> used in scripts running in that <a href=#unit-of-related-similar-origin-browsing-contexts>unit
  of related similar-origin browsing contexts</a>. Initially, there
  is no <a href=#entry-script>entry script</a>.</p>

  <p class=note>There is at most one <a href=#event-loop>event loop</a> per
  <a href=#unit-of-related-similar-origin-browsing-contexts>unit of related similar-origin browsing contexts</a>.</p>

  </div>



  <h4 id=browsing-context-names><span class=secno>6.1.6 </span>Browsing context names</h4>

  <p>Browsing contexts can have a <dfn id=browsing-context-name>browsing context name</dfn>. By
  default, a browsing context has no name (its name is not set).</p>

  <p>A <dfn id=valid-browsing-context-name>valid browsing context name</dfn> is any string with at
  least one character that does not start with a U+005F LOW LINE
  character. (Names starting with an underscore are reserved for
  special keywords.)</p>

  <p>A <dfn id=valid-browsing-context-name-or-keyword>valid browsing context name or keyword</dfn> is any string
  that is either a <a href=#valid-browsing-context-name>valid browsing context name</a> or that is
  an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of: <code title="">_blank</code>, <code title="">_self</code>, <code title="">_parent</code>, or <code title="">_top</code>.</p>

  <div class=impl>

  <p><dfn id=the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>The rules for choosing a browsing context given a browsing
  context name</dfn> are as follows. The rules assume that they are
  being applied in the context of a <a href=#browsing-context>browsing context</a>.</p>

  <ol><li><p>If the given browsing context name is the empty string or
   <code title="">_self</code>, then the chosen browsing context must
   be the current one.</li>

   <li><p>If the given browsing context name is <code title="">_parent</code>, then the chosen browsing context must be
   the <a href=#parent-browsing-context><em>parent</em> browsing context</a> of the current
   one, unless there isn't one, in which case the chosen browsing
   context must be the current browsing context.</li>

   <li><p>If the given browsing context name is <code title="">_top</code>, then the chosen browsing context must be the
   most <a href=#top-level-browsing-context>top-level browsing context</a> of the current
   one.</li>

   <li>

    <p>If the given browsing context name is not <code title="">_blank</code> and there exists a browsing context whose
    <a href=#browsing-context-name title="browsing context name">name</a> is the same as the
    given browsing context name, and the current browsing context is
    <a href=#allowed-to-navigate>allowed to navigate</a> that browsing context, and the
    user agent determines that the two browsing contexts are related
    enough that it is ok if they reach each other, then that browsing
    context must be the chosen one. If there are multiple matching
    browsing contexts, the user agent should select one in some
    arbitrary consistent manner, such as the most recently opened,
    most recently focused, or more closely related.</p>

   </li>

   <li>

    <p>Otherwise, a new browsing context is being requested, and what
    happens depends on the user agent's configuration and/or
    abilities:</p>

    <dl><dt id=sandboxWindowOpen>If the current browsing context had
     the <a href=#sandboxed-navigation-browsing-context-flag>sandboxed navigation browsing context flag</a> set
     when its <a href=#active-document>active document</a> was created.</dt>

     <dd><p>The user agent may offer to create a new <a href=#top-level-browsing-context>top-level
     browsing context</a> or reuse an existing <a href=#top-level-browsing-context>top-level
     browsing context</a>. If the user picks one of those options,
     then the designated browsing context must be the chosen one (the
     browsing context's name isn't set to the given browsing context
     name). Otherwise (if the user agent doesn't offer the option to
     the user, or if the user declines to allow a browsing context to
     be used) there must not be a chosen browsing context.</dd>


     <dt id=noopener>If the user agent has been configured such that
     in this instance it will create a new browsing context, and the
     browsing context is being requested as part of <a href=#following-hyperlinks title="following hyperlinks">following a hyperlink</a> whose
     <a href=#linkTypes>link types</a> include the <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword</dt>

     <dd><p>A new <a href=#top-level-browsing-context>top-level browsing context</a> must be
     created. If the given browsing context name is not <code title="">_blank</code>, then the new top-level browsing context's
     name must be the given browsing context name (otherwise, it has
     no name). The chosen browsing context must be this new browsing
     context.</p>

     <p class=note>If it is immediately <a href=#navigate title=navigate>navigated</a>, then the navigation will be
     done with <a href=#replacement-enabled>replacement enabled</a>.</dd>


     <dt>If the user agent has been configured such that in this
     instance it will create a new browsing context, and the <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword doesn't
     apply</dt>

     <dd><p>A new <a href=#auxiliary-browsing-context>auxiliary browsing context</a> must be
     created, with the <a href=#opener-browsing-context>opener browsing context</a> being the
     current one. If the given browsing context name is not <code title="">_blank</code>, then the new auxiliary browsing context's
     name must be the given browsing context name (otherwise, it has
     no name). The chosen browsing context must be this new browsing
     context.</p>

     <p>If it is immediately <a href=#navigate title=navigate>navigated</a>,
     then the navigation will be done with <a href=#replacement-enabled>replacement
     enabled</a>.</dd>


     <dt>If the user agent has been configured such that in this
     instance it will reuse the current browsing context</dt>

     <dd><p>The chosen browsing context is the current browsing
     context.</dd>


     <dt>If the user agent has been configured such that in this
     instance it will not find a browsing context</dt>

     <dd><p>There must not be a chosen browsing context.</dd>

    </dl><p>User agent implementors are encouraged to provide a way for
    users to configure the user agent to always reuse the current
    browsing context.</p>

   </li>

  </ol></div>




  <h3 id=the-window-object><span class=secno>6.2 </span>The <code><a href=#window>Window</a></code> object</h3>

  <pre class=idl>[OverrideBuiltins, ReplaceableNamedProperties] <!-- XXX http://www.w3.org/Bugs/Public/show_bug.cgi?id=8241 -->
interface <dfn id=window>Window</dfn> {
  // the current browsing context
  readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-window title=dom-window>window</a>;
  readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-self title=dom-self>self</a>;
  readonly attribute <a href=#document>Document</a> <a href=#dom-document title=dom-document>document</a>;
           attribute DOMString <a href=#dom-name title=dom-name>name</a>;
  [PutForwards=<a href=#dom-location-href title=dom-location-href>href</a>] readonly attribute <a href=#location>Location</a> <a href=#dom-location title=dom-location>location</a>;
  readonly attribute <a href=#history-0>History</a> <a href=#dom-history title=dom-history>history</a>;
  readonly attribute <a href=#undomanager>UndoManager</a> <a href=#dom-undomanager title=dom-undoManager>undoManager</a>;
  <a href=#selection-0>Selection</a> <a href=#dom-getselection title=dom-getSelection>getSelection</a>();
  [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-locationbar title=dom-window-locationbar>locationbar</a>;
  [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-menubar title=dom-window-menubar>menubar</a>;
  [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-personalbar title=dom-window-personalbar>personalbar</a>;
  [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-scrollbars title=dom-window-scrollbars>scrollbars</a>;
  [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-statusbar title=dom-window-statusbar>statusbar</a>;
  [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-toolbar title=dom-window-toolbar>toolbar</a>;<!--
  [Replaceable] readonly attribute <span>BarProp</span> <span title="dom-window-directories">directories</span>; // legacy (Gecko-only) -->
  void <a href=#dom-window-close title=dom-window-close>close</a>();
  void <a href=#dom-window-stop title=dom-window-stop>stop</a>();
  void <a href=#dom-window-focus title=dom-window-focus>focus</a>();
  void <a href=#dom-window-blur title=dom-window-blur>blur</a>();

  // other browsing contexts
  [Replaceable] readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-frames title=dom-frames>frames</a>;
  [Replaceable] readonly attribute unsigned long <a href=#dom-length title=dom-length>length</a>;
  readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-top title=dom-top>top</a>;
  [Replaceable] readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-opener title=dom-opener>opener</a>;
  readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-parent title=dom-parent>parent</a>;
  readonly attribute <a href=#element>Element</a> <a href=#dom-frameelement title=dom-frameElement>frameElement</a>;
  <a href=#windowproxy>WindowProxy</a> <a href=#dom-open title=dom-open>open</a>(in optional DOMString url, in optional DOMString target, in optional DOMString features, in optional DOMString replace);
  <a href=#dom-window-item title=dom-window-item>getter</a> <a href=#windowproxy>WindowProxy</a> (in unsigned long index);
  <a href=#dom-window-nameditem title=dom-window-namedItem>getter</a> any (in DOMString name);

  // the user agent
  readonly attribute <a href=#navigator>Navigator</a> <a href=#dom-navigator title=dom-navigator>navigator</a>; <!-- IE also has window.clientInformation === window.navigator -->
  readonly attribute <a href=#applicationcache>ApplicationCache</a> <a href=#dom-applicationcache title=dom-applicationCache>applicationCache</a>;

  // user prompts
  void <a href=#dom-alert title=dom-alert>alert</a>(in DOMString message);
  boolean <a href=#dom-confirm title=dom-confirm>confirm</a>(in DOMString message);
  DOMString <a href=#dom-prompt title=dom-prompt>prompt</a>(in DOMString message, in optional DOMString default);
  void <a href=#dom-print title=dom-print>print</a>();
  any <a href=#dom-showmodaldialog title=dom-showModalDialog>showModalDialog</a>(in DOMString url, in optional any argument<!--, in optional DOMString features-->);

  // <a href=#web-messaging>cross-document messaging</a>
  void <a href=#dom-window-postmessage title=dom-window-postMessage>postMessage</a>(in any message, in DOMString targetOrigin, in optional <a href=#messageportarray>MessagePortArray</a> ports);

  // <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
           attribute <a href=#function>Function</a> <a href=#handler-onabort title=handler-onabort>onabort</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onafterprint title=handler-window-onafterprint>onafterprint</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeprint title=handler-window-onbeforeprint>onbeforeprint</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeunload title=handler-window-onbeforeunload>onbeforeunload</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onblur title=handler-window-onblur>onblur</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onchange title=handler-onchange>onchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onclick title=handler-onclick>onclick</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondrag title=handler-ondrag>ondrag</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragend title=handler-ondragend>ondragend</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragenter title=handler-ondragenter>ondragenter</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragleave title=handler-ondragleave>ondragleave</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragover title=handler-ondragover>ondragover</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondragstart title=handler-ondragstart>ondragstart</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondrop title=handler-ondrop>ondrop</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ondurationchange title=handler-ondurationchange>ondurationchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onemptied title=handler-onemptied>onemptied</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onended title=handler-onended>onended</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onerror title=handler-window-onerror>onerror</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onfocus title=handler-window-onfocus>onfocus</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onformchange title=handler-onformchange>onformchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onforminput title=handler-onforminput>onforminput</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onhashchange title=handler-window-onhashchange>onhashchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oninput title=handler-oninput>oninput</a>;
           attribute <a href=#function>Function</a> <a href=#handler-oninvalid title=handler-oninvalid>oninvalid</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onkeydown title=handler-onkeydown>onkeydown</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onkeypress title=handler-onkeypress>onkeypress</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onkeyup title=handler-onkeyup>onkeyup</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onload title=handler-window-onload>onload</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onloadeddata title=handler-onloadeddata>onloadeddata</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onloadedmetadata title=handler-onloadedmetadata>onloadedmetadata</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onloadstart title=handler-onloadstart>onloadstart</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onmessage title=handler-window-onmessage>onmessage</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmousedown title=handler-onmousedown>onmousedown</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmousemove title=handler-onmousemove>onmousemove</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmouseout title=handler-onmouseout>onmouseout</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmouseover title=handler-onmouseover>onmouseover</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmouseup title=handler-onmouseup>onmouseup</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onmousewheel title=handler-onmousewheel>onmousewheel</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onoffline title=handler-window-onoffline>onoffline</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-ononline title=handler-window-ononline>ononline</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onpause title=handler-onpause>onpause</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onplay title=handler-onplay>onplay</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onplaying title=handler-onplaying>onplaying</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onpagehide title=handler-window-onpagehide>onpagehide</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onpageshow title=handler-window-onpageshow>onpageshow</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onpopstate title=handler-window-onpopstate>onpopstate</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onprogress title=handler-onprogress>onprogress</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onratechange title=handler-onratechange>onratechange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onreadystatechange title=handler-onreadystatechange>onreadystatechange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onredo title=handler-window-onredo>onredo</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onresize title=handler-window-onresize>onresize</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onscroll title=handler-onscroll>onscroll</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onseeked title=handler-onseeked>onseeked</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onseeking title=handler-onseeking>onseeking</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onselect title=handler-onselect>onselect</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onshow title=handler-onshow>onshow</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onstalled title=handler-onstalled>onstalled</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onstorage title=handler-window-onstorage>onstorage</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onsubmit title=handler-onsubmit>onsubmit</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onsuspend title=handler-onsuspend>onsuspend</a>;
           attribute <a href=#function>Function</a> <a href=#handler-ontimeupdate title=handler-ontimeupdate>ontimeupdate</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onundo title=handler-window-onundo>onundo</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onunload title=handler-window-onunload>onunload</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onvolumechange title=handler-onvolumechange>onvolumechange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-onwaiting title=handler-onwaiting>onwaiting</a>;
};
<a href=#window>Window</a> implements <a href=#eventtarget>EventTarget</a>;</pre>

<!-- for more features to add here, look here:
 http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_window.asp
 http://www.mozilla.org/docs/dom/domref/dom_window_ref.html
 http://lxr.mozilla.org/mozilla/source/dom/public/idl/base/nsIDOMWindow.idl - scrollBy, etc
 http://lxr.mozilla.org/mozilla/source/dom/public/idl/base/nsIDOMWindowInternal.idl - DOM level 0
-->

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-window><a href=#dom-window>window</a></code></dt>
   <dt><var title="">window</var> . <code title=dom-frames><a href=#dom-frames>frames</a></code></dt>
   <dt><var title="">window</var> . <code title=dom-self><a href=#dom-self>self</a></code></dt>

   <dd>

    <p>These attributes all return <var title="">window</var>.</p>

   </dd>


   <dt><var title="">window</var> . <code title=dom-document><a href=#dom-document>document</a></code></dt>

   <dd>

    <p>Returns the <a href=#active-document>active document</a>.</p>

   </dd>


   <dt><var title="">document</var> . <code title=dom-document-defaultView><a href=#dom-document-defaultview>defaultView</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#window>Window</a></code> object of the <a href=#active-document>active document</a>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-window title=dom-window><code>window</code></dfn>, <dfn id=dom-frames title=dom-frames><code>frames</code></dfn>, and <dfn id=dom-self title=dom-self><code>self</code></dfn> IDL attributes must all
  return the <code><a href=#window>Window</a></code> object's <a href=#browsing-context>browsing
  context</a>'s <code><a href=#windowproxy>WindowProxy</a></code> object.</p>

  <p>The <dfn id=dom-document title=dom-document><code>document</code></dfn> IDL
  attribute must return the <code><a href=#document>Document</a></code> object of the
  <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing
  context</a>'s <a href=#active-document>active document</a>.</p>

  <p>The <dfn id=dom-document-defaultview title=dom-document-defaultView><code>defaultView</code></dfn> IDL
  attribute of the <code><a href=#htmldocument>HTMLDocument</a></code> interface must return the
  <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a>'s
  <code><a href=#windowproxy>WindowProxy</a></code> object.</p>

  </div>


  <div class=impl>

  <h4 id=security-window><span class=secno>6.2.1 </span>Security</h4>

  <p id=security-2>User agents must raise a
  <code><a href=#security_err>SECURITY_ERR</a></code> exception whenever any of the members of a
  <code><a href=#window>Window</a></code> object are accessed by scripts whose
  <a href=#effective-script-origin>effective script origin</a> is not the same as the
  <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>'s <a href=#effective-script-origin>effective
  script origin</a>, with the following exceptions:</p>

  <ul><li>The <code title=dom-location><a href=#dom-location>location</a></code> object

   <li>The <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> method

   <li>The <code title=dom-frames><a href=#dom-frames>frames</a></code> attribute

   <li>The <a href=#dynamic-nested-browsing-context-properties>dynamic nested browsing context properties</a>

  </ul><p>When a script whose <a href=#effective-script-origin>effective script origin</a> is not
  the same as the <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>'s
  <a href=#effective-script-origin>effective script origin</a> attempts to access that
  <code><a href=#window>Window</a></code> object's methods or attributes, the user agent
  must act as if any changes to the <code><a href=#window>Window</a></code> object's
  properties, getters, setters, etc, were not present.</p>

  <p>For members that return objects (including function objects),
  each distinct <a href=#effective-script-origin>effective script origin</a> that is not the
  same as the <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>'s
  <a href=#effective-script-origin>effective script origin</a> must be provided with a
  separate set of objects. These objects must have the prototype chain
  appropriate for the script for which the objects are created (not
  those that would be appropriate for scripts whose <a href="#script's-global-object">script's
  global object</a> is the <code><a href=#window>Window</a></code> object in
  question).</p>

  <div class=example>

   <p>For instance, if two frames containing <code><a href=#document>Document</a></code>s
   from different <a href=#origin title=origin>origins</a> access the same
   <code><a href=#window>Window</a></code> object's <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> method, they
   will get distinct objects that are not equal.</p>

  </div>

  </div>



  <h4 id=apis-for-creating-and-navigating-browsing-contexts-by-name><span class=secno>6.2.2 </span>APIs for creating and navigating browsing contexts by name</h4>

  <dl class=domintro><dt><var title="">window</var> = <var title="">window</var> . <code title=dom-open><a href=#dom-open>open</a></code>( [ <var title="">url</var> [, <var title="">target</var> [, <var title="">features</var> [, <var title="">replace</var> ] ] ] ] )</dt>

   <dd>

    <p>Opens a window to show <var title="">url</var> (defaults to
    <code><a href=#about:blank>about:blank</a></code>), and returns it. The <var title="">target</var> argument gives the name of the new
    window. If a window exists with that name already, it is
    reused. The <var title="">replace</var> attribute, if true, means
    that whatever page is currently open in that window will be
    removed from the window's session history. The <var title="">features</var> argument is ignored.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-name><a href=#dom-name>name</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the name of the window.</p>

    <p>Can be set, to change the name.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-window-close><a href=#dom-window-close>close</a></code>()</dt>

   <dd>

    <p>Closes the window.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-window-stop><a href=#dom-window-stop>stop</a></code>()</dt>

   <dd>

    <p>Cancels the document load.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-open title=dom-open><code>open()</code></dfn> method on
  <code><a href=#window>Window</a></code> objects provides a mechanism for <a href=#navigate title=navigate>navigating</a> an existing <a href=#browsing-context>browsing
  context</a> or opening and navigating an <a href=#auxiliary-browsing-context>auxiliary browsing
  context</a>.</p>

  <p>The method has four arguments, though they are all optional.</p>

  <p>The first argument, <var title="">url</var>, must be a
  <a href=#valid-non-empty-url>valid non-empty URL</a> for a page to load in the browsing
  context. If no arguments are provided, or if the first argument is
  the empty string, then the <var title="">url</var> argument defaults
  to "<code><a href=#about:blank>about:blank</a></code>". The argument must be <a href=#resolve-a-url title="resolve a url">resolved</a> to an <a href=#absolute-url>absolute
  URL</a> (or an error), relative to the <a href=#entry-script>entry
  script</a>'s <a href="#script's-base-url" title="script's base URL">base URL</a>,
  when the method is invoked.</p>

  <p>The second argument, <var title="">target</var>, specifies the
  <a href=#browsing-context-name title="browsing context name">name</a> of the browsing
  context that is to be navigated. It must be a <a href=#valid-browsing-context-name-or-keyword>valid browsing
  context name or keyword</a>. If fewer than two arguments are
  provided, then the <var title="">name</var> argument defaults to the
  value "<code>_blank</code>".</p>

  <p>The third argument, <var title="">features</var>, has no effect
  and is supported for historical reasons only.</p>

  <p>The fourth argument, <var title="">replace</var>, specifies
  whether or not the new page will <a href=#replacement-enabled title="replacement
  enabled">replace</a> the page currently loaded in the browsing
  context, when <var title="">target</var> identifies an existing
  browsing context (as opposed to leaving the current page in the
  browsing context's <a href=#session-history>session history</a>). When three or
  fewer arguments are provided, <var title="">replace</var> defaults
  to false.</p>

  <p>When the method is invoked, the user agent must first select a
  <a href=#browsing-context>browsing context</a> to navigate by applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the
  rules for choosing a browsing context given a browsing context
  name</a> using the <var title="">target</var> argument as the
  name and the <a href=#browsing-context>browsing context</a> of the script as the
  context in which the algorithm is executed, unless the user has
  indicated a preference, in which case the browsing context to
  navigate may instead be the one indicated by the user.</p>

  <p class=example>For example, suppose there is a user agent that
  supports control-clicking a link to open it in a new tab. If a user
  clicks in that user agent on an element whose <code title=handler-onclick><a href=#handler-onclick>onclick</a></code> handler uses the <code title=dom-open><a href=#dom-open>window.open()</a></code> API to open a page in an
  iframe, but, while doing so, holds the control key down, the user
  agent could override the selection of the target browsing context to
  instead target a new tab.</p>

  <p>Then, the user agent must <a href=#navigate>navigate</a> the selected
  <a href=#browsing-context>browsing context</a> to the <a href=#absolute-url>absolute URL</a> (or
  error) obtained from <a href=#resolve-a-url title="resolve a url">resolving</a>
  <var title="">url</var> earlier. If the <var title="">replace</var>
  is true, then <a href=#replacement-enabled title="replacement enabled">replacement must be
  enabled</a>; otherwise, it must not be enabled unless the
  <a href=#browsing-context>browsing context</a> was just created as part of
  <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for choosing a browsing context given a browsing
  context name</a>. The navigation must be done with the <a href="#script's-browsing-context" title="script's browsing context">browsing context</a> of the
  <a href=#entry-script>entry script</a> as the <a href=#source-browsing-context>source browsing
  context</a>.</p>

  <p>The method must return the <code><a href=#windowproxy>WindowProxy</a></code> object of the
  <a href=#browsing-context>browsing context</a> that was navigated, or null if no
  browsing context was navigated.</p>

  <hr><p>The <dfn id=dom-name title=dom-name><code>name</code></dfn> attribute of
  the <code><a href=#window>Window</a></code> object must, on getting, return the current
  name of the <a href=#browsing-context>browsing context</a>, and, on setting, set the
  name of the <a href=#browsing-context>browsing context</a> to the new value.</p>

  <p class=note>The name <a href=#resetBCName>gets reset</a> when
  the browsing context is navigated to another domain.</p>

  <hr><p>The <dfn id=dom-window-close title=dom-window-close><code>close()</code></dfn>
  method on <code><a href=#window>Window</a></code> objects should, if the corresponding
  <a href=#browsing-context>browsing context</a> <var title="">A</var> is an
  <a href=#auxiliary-browsing-context>auxiliary browsing context</a> that was created by a script
  (as opposed to by an action of the user), and if the <a href="#script's-browsing-context" title="script's browsing context">browsing context</a> of the
  <a href=#concept-script title=concept-script>script</a> that invokes the method
  is <a href=#allowed-to-navigate>allowed to navigate</a> the <a href=#browsing-context>browsing
  context</a> <var title="">A</var>, close the <a href=#browsing-context>browsing
  context</a> <var title="">A</var> (and may <a href=#a-browsing-context-is-discarded title="a
  browsing context is discarded">discard</a> it too).</p>

  <p>The <dfn id=dom-window-stop title=dom-window-stop><code>stop()</code></dfn> method
  on <code><a href=#window>Window</a></code> objects should, if there is an existing
  attempt to <a href=#navigate>navigate</a> the <a href=#browsing-context>browsing context</a>
  and that attempt is not currently running the <a href=#unload-a-document>unload a
  document</a> algorithm, cancel that <a href=#navigate title=navigate>navigation</a> and any associated instances of
  the <a href=#fetch title=fetch>fetch algorithm</a>. Otherwise, it must
  do nothing.</p>

  </div>


  <h4 id=accessing-other-browsing-contexts><span class=secno>6.2.3 </span>Accessing other browsing contexts</h4>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-length><a href=#dom-length>length</a></code></dt>

   <dd>

    <p>Returns the number of <a href=#child-browsing-context title="child browsing
    context">child browsing contexts</a>.</p>

   </dd>

   <dt><var title="">window</var>[<var title="">index</var>]</dt>

   <dd>

    <p>Returns the indicated <a href=#child-browsing-context>child browsing context</a>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-length title=dom-length><code>length</code></dfn> IDL
  attribute on the <code><a href=#window>Window</a></code> interface must return the
  number of <a href=#child-browsing-context title="child browsing context">child browsing
  contexts</a> that are <a href=#browsing-context-nested-through title="browsing context nested
  through">nested through</a> elements that are <a href=#in-a-document title="in a
  document">in the <code>Document</code></a> that is the
  <a href=#active-document>active document</a> of that <code><a href=#window>Window</a></code> object, if
  that <code><a href=#window>Window</a></code>'s <a href=#browsing-context>browsing context</a> shares the
  same <a href=#event-loop>event loop</a> as the <a href="#script's-browsing-context">script's browsing
  context</a> of the <a href=#entry-script>entry script</a> accessing the IDL
  attribute; otherwise, it must return zero.</p>

  <!-- in other words, frames are only accessible to same-thread processes -->

  <p>The <span>indices of the supported indexed properties</span> on
  the <code><a href=#window>Window</a></code> object at any instant are the numbers in the
  range 0 .. <span title=""><var title="">n</var>-1</span>, where <var title="">n</var> is the number returned by the <code title=dom-length><a href=#dom-length>length</a></code> IDL attribute. If <var title="">n</var> is zero then there are no <span>supported indexed
  properties</span>.</p>

  <p>When a <code><a href=#window>Window</a></code> object is <dfn id=dom-window-item title=dom-window-item>indexed to retrieve an indexed
  property</dfn> <var title="">index</var>, the value returned must be
  the <code><a href=#windowproxy>WindowProxy</a></code> object of the <var title="">index</var>th <a href=#child-browsing-context>child browsing context</a> of the
  <code><a href=#document>Document</a></code> that is nested through an element that is
  <a href=#in-a-document title="in a document">in the <code>Document</code></a>,
  sorted in the <a href=#tree-order>tree order</a> of the elements nesting those
  <a href=#browsing-context title="browsing context">browsing contexts</a>.</p>

  <p>These properties are the <dfn id=dynamic-nested-browsing-context-properties>dynamic nested browsing context
  properties</dfn>.</p>

  </div>



  <h4 id=named-access-on-the-window-object><span class=secno>6.2.4 </span>Named access on the <code><a href=#window>Window</a></code> object</h4>

  <dl class=domintro><dt><var title="">window</var>[<var title="">name</var>]</dt>

   <dd>

    <p>Returns the indicated element or collection of elements.</p>

   </dd>

  </dl><div class=impl>

  <p>The <code><a href=#window>Window</a></code> interface <span title="support named
  properties">supports named properties</span>. The <span>names of the
  supported named properties</span> at any moment consist of:</p>

  <ul><li>the value of the <code title="">name</code> content attribute
   for all <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
   <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
   <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
   <code><a href=#the-object-element>object</a></code> elements in the <a href=#active-document>active document</a>
   that have a <code title="">name</code> content attribute, and</li>

   <li>the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> content
   attribute of any <a href=#html-elements title="HTML elements">HTML element</a> in
   the <a href=#active-document>active document</a> with an <code title=attr-id><a href=#the-id-attribute>id</a></code> content attribute.</li>

  </ul><p>When <dfn id=dom-window-nameditem title=dom-window-namedItem>the <code>Window</code>
  object is indexed for property retrieval</dfn> using a name <var title="">name</var>, then the user agent must return the value
  obtained using the following steps:</p>

  <ol><li>

    <p>Let <var title="">elements</var> be the list of <a href=#dom-window-nameditem-filter title=dom-window-namedItem-filter>named elements</a> with the
    name <var title="">name</var> in the <a href=#active-document>active document</a>.

    <p class=note>There will be at least one such element, by
    definition.<!-- (If there wasn't, then this algorithm wouldn't
    have been invoked by Web IDL.) --></p>

   </li>

   <li>

    <p>If <var title="">elements</var> contains an <code><a href=#the-iframe-element>iframe</a></code>
    element, then return the <code><a href=#windowproxy>WindowProxy</a></code> object of the
    <a href=#nested-browsing-context>nested browsing context</a> represented by the first such
    <code><a href=#the-iframe-element>iframe</a></code> element in <a href=#tree-order>tree order</a>, and abort
    these steps.</p>

   </li>

   <li>

    <p>Otherwise, if <var title="">elements</var> has only one
    element, return that element and abort these steps.</p>

   </li>

   <li>

    <p>Otherwise return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
    <code><a href=#document>Document</a></code> node, whose filter matches only <a href=#dom-window-nameditem-filter title=dom-window-namedItem-filter>named elements</a> with
    the name <var title="">name</var>.</p> <!-- the same one each time
    is returned, because of the rule under collections -->

   </li>

  </ol><p><dfn id=dom-window-nameditem-filter title=dom-window-nameditem-filter>Named elements</dfn>
  with the name <var title="">name</var>, for the purposes of the
  above algorithm, are those that are either:</p>

  <ul><li><code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
   <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
   <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or
   <code><a href=#the-object-element>object</a></code> elements that have a <code title=attr-name>name</code> content attribute whose value is <var title="">name</var>, or</li>

   <li><a href=#html-elements>HTML elements</a> elements that have an <code title=attr-id><a href=#the-id-attribute>id</a></code> content attribute whose value is <var title="">name</var>.</li>

  </ul></div>


  <div class=impl>

  <h4 id=garbage-collection-and-browsing-contexts><span class=secno>6.2.5 </span>Garbage collection and browsing contexts</h4>

  <p>A <a href=#browsing-context>browsing context</a> has a strong reference to each of
  its <code><a href=#document>Document</a></code>s and its <code><a href=#windowproxy>WindowProxy</a></code> object,
  and the user agent itself has a strong reference to its <a href=#top-level-browsing-context title="top-level browsing context">top-level browsing
  contexts</a>.</p>

  <p>A <code><a href=#document>Document</a></code> has a strong reference to its
  <code><a href=#window>Window</a></code> object.</p>

  <p class=note>A <code><a href=#window>Window</a></code> object <a href=#implied-strong-reference title="implied
  strong reference">has a strong reference</a> to its
  <code><a href=#document>Document</a></code> object through its <code title=dom-document><a href=#dom-document>document</a></code> attribute.  Thus, references
  from other scripts to either of those objects will keep both
  alive. Similarly, both <code><a href=#document>Document</a></code> and <code><a href=#window>Window</a></code>
  objects have <a href=#implied-strong-reference title="implied strong reference">implied strong
  references</a> to the <code><a href=#windowproxy>WindowProxy</a></code> object.</p>

  <p>Each <a href=#concept-script title=concept-script>script</a> has a strong
  reference to its <a href="#script's-browsing-context" title="script's browsing context">browsing
  context</a> and its <a href="#script's-document" title="script's
  document">document</a>.</p>

  <p>When a <a href=#browsing-context>browsing context</a> is to <dfn id=discard-a-document>discard a
  <code>Document</code></dfn>, the user agent must run the following
  steps:</p>

  <ol><li><p>Set the <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state to
   false.</li>

   <li><p>Run any <a href=#unloading-document-cleanup-steps>unloading document cleanup steps</a> for
   the <code><a href=#document>Document</a></code> that are defined by this specification or
   any other relevant specifications.</li>

   <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a>
   associated with the <code><a href=#document>Document</a></code> in any <a href=#task-source>task
   source</a>, without running those tasks.</li>

   <li><p><a href=#a-browsing-context-is-discarded title="a browsing context is discarded">Discard</a>
   all the <a href=#child-browsing-context title="child browsing context">child browsing
   contexts</a> of the <code><a href=#document>Document</a></code>.</li>

   <li><p>Lose the strong reference from the <code><a href=#document>Document</a></code>'s
   <a href=#browsing-context>browsing context</a> to the
   <code><a href=#document>Document</a></code>.</li>

  </ol><p class=note>Whenever a <code><a href=#document>Document</a></code> object is <a href=#discard-a-document title="discard a Document">discarded</a>, it is also removed from
  the list of <span>the worker's <code><a href=#document>Document</a></code>s</span> of each
  worker whose list contains that <code><a href=#document>Document</a></code>.</p>

  <p>When <dfn id=a-browsing-context-is-discarded>a <em><span>browsing context</span></em> is
  discarded</dfn>, the strong reference from the user agent itself to
  the <a href=#browsing-context>browsing context</a> must be severed, and all the
  <code><a href=#document>Document</a></code> objects for all the entries in the
  <a href=#browsing-context>browsing context</a>'s session history must be <a href=#discard-a-document title="discard a document">discarded</a> as well.</p>

  <p>User agents may <a href=#a-browsing-context-is-discarded title="a browsing context is
  discarded">discard</a> <a href=#top-level-browsing-context title="top-level browsing
  context">top-level browsing contexts</a> at any time (typically,
  in response to user requests, e.g. when a user closes a window
  containing one or more <a href=#top-level-browsing-context title="top-level browsing
  context">top-level browsing contexts</a>). Other <a href=#browsing-context title="browsing context">browsing contexts</a> must be discarded
  once their <code><a href=#windowproxy>WindowProxy</a></code> object is eligible for garbage
  collection.</p>

  </div>



  <h4 id=browser-interface-elements><span class=secno>6.2.6 </span>Browser interface elements</h4>

  <p>To allow Web pages to integrate with Web browsers, certain Web
  browser interface elements are exposed in a limited way to scripts
  in Web pages.</p>

  <p>Each interface element is represented by a <code><a href=#barprop>BarProp</a></code>
  object:</p>

  <pre class=idl>interface <dfn id=barprop>BarProp</dfn> {
           attribute boolean <a href=#dom-barprop-visible title=dom-BarProp-visible>visible</a>;
};</pre>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-window-locationbar><a href=#dom-window-locationbar>locationbar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   <dd>
    <p>Returns true if the location bar is visible; otherwise, returns false.</p>
   </dd>

   <dt><var title="">window</var> . <code title=dom-window-menubar><a href=#dom-window-menubar>menubar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   <dd>
    <p>Returns true if the menu bar is visible; otherwise, returns false.</p>
   </dd>

   <dt><var title="">window</var> . <code title=dom-window-personalbar><a href=#dom-window-personalbar>personalbar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   <!--<dt><var title="">window</var> . <code title="dom-window-directories">directories</code> . <code title="dom-BarProp-visible">visible</code></dt>-->
   <dd>
    <p>Returns true if the personal bar is visible; otherwise, returns false.</p>
   </dd>

   <dt><var title="">window</var> . <code title=dom-window-scrollbars><a href=#dom-window-scrollbars>scrollbars</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   <dd>
    <p>Returns true if the scroll bars are visible; otherwise, returns false.</p>
   </dd>

   <dt><var title="">window</var> . <code title=dom-window-statusbar><a href=#dom-window-statusbar>statusbar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   <dd>
    <p>Returns true if the status bar is visible; otherwise, returns false.</p>
   </dd>

   <dt><var title="">window</var> . <code title=dom-window-toolbar><a href=#dom-window-toolbar>toolbar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   <dd>
    <p>Returns true if the toolbar is visible; otherwise, returns false.</p>
   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-barprop-visible title=dom-BarProp-visible>visible</dfn> attribute, on
  getting, must return either true or a value determined by the user
  agent to most accurately represent the visibility state of the user
  interface element that the object represents, as described below. On
  setting, the new value must be discarded.</p>

  <p>The following <code><a href=#barprop>BarProp</a></code> objects exist for each
  <code><a href=#document>Document</a></code> object in a <a href=#browsing-context>browsing
  context</a>. Some of the user interface elements represented by
  these objects might have no equivalent in some user agents; for
  those user agents, except when otherwise specified, the object must
  act as if it was present and visible (i.e. its <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code> attribute must return
  true).</p>

  <dl><dt><dfn id=the-location-bar-barprop-object>The location bar <code>BarProp</code> object</dfn></dt>

   <dd>Represents the user interface element that contains a control
   that displays the <a href=#url>URL</a> of the <a href=#active-document>active
   document</a>, or some similar interface concept.</dd>

   <dt><dfn id=the-menu-bar-barprop-object>The menu bar <code>BarProp</code> object</dfn></dt>

   <dd>Represents the user interface element that contains a list of
   commands in menu form, or some similar interface concept.</dd>

   <dt><dfn id=the-personal-bar-barprop-object>The personal bar <code>BarProp</code> object</dfn></dt>

   <dd>Represents the user interface element that contains links to
   the user's favorite pages, or some similar interface concept.</dd>

   <dt><dfn id=the-scrollbar-barprop-object>The scrollbar <code>BarProp</code> object</dfn></dt>

   <dd>Represents the user interface element that contains a scrolling
   mechanism, or some similar interface concept.</dd>

   <dt><dfn id=the-status-bar-barprop-object>The status bar <code>BarProp</code> object</dfn></dt>

   <dd>Represents a user interface element found immediately below or
   after the document, as appropriate for the user's media. If the
   user agent has no such user interface element, then the object may
   act as if the corresponding user interface element was absent
   (i.e. its <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code>
   attribute may return false).</dd>

   <dt><dfn id=the-toolbar-barprop-object>The toolbar <code>BarProp</code> object</dfn></dt>

   <dd>Represents the user interface element found immediately above
   or before the document, as appropriate for the user's media. If the
   user agent has no such user interface element, then the object may
   act as if the corresponding user interface element was absent
   (i.e. its <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code>
   attribute may return false).</dd>

  </dl><p>The <dfn id=dom-window-locationbar title=dom-window-locationbar><code>locationbar</code></dfn>
  attribute must return <a href=#the-location-bar-barprop-object>the location bar <code>BarProp</code>
  object</a>.</p>

  <p>The <dfn id=dom-window-menubar title=dom-window-menubar><code>menubar</code></dfn>
  attribute must return <a href=#the-menu-bar-barprop-object>the menu bar <code>BarProp</code>
  object</a>.</p>

  <p>The <dfn id=dom-window-personalbar title=dom-window-personalbar><code>personalbar</code></dfn>
  attribute must return <a href=#the-personal-bar-barprop-object>the personal bar <code>BarProp</code>
  object</a>.</p>

  <p>The <dfn id=dom-window-scrollbars title=dom-window-scrollbars><code>scrollbars</code></dfn>
  attribute must return <a href=#the-scrollbar-barprop-object>the scrollbar <code>BarProp</code>
  object</a>.</p>

  <p>The <dfn id=dom-window-statusbar title=dom-window-statusbar><code>statusbar</code></dfn> attribute
  must return <a href=#the-status-bar-barprop-object>the status bar <code>BarProp</code>
  object</a>.</p>

  <p>The <dfn id=dom-window-toolbar title=dom-window-toolbar><code>toolbar</code></dfn>
  attribute must return <a href=#the-toolbar-barprop-object>the toolbar <code>BarProp</code>
  object</a>.</p>

<!--
  <p>For legacy reasons, the <dfn
  title="dom-window-directories"><code>directories</code></dfn>
  attribute must also return <span>the personal bar
  <code>BarProp</code> object</span>.</p>
-->

  </div>


  <div class=impl>

  <h4 id=the-windowproxy-object><span class=secno>6.2.7 </span>The <code><a href=#windowproxy>WindowProxy</a></code> object</h4>


  <p>As mentioned earlier, each <a href=#browsing-context>browsing context</a> has a
  <dfn id=windowproxy><code>WindowProxy</code></dfn> object. This object is unusual
  in that all operations that would be performed on it must be
  performed on the <code><a href=#window>Window</a></code> object of the <a href=#browsing-context>browsing
  context</a>'s <a href=#active-document>active document</a> instead. It is thus
  indistinguishable from that <code><a href=#window>Window</a></code> object in every way
  until the <a href=#browsing-context>browsing context</a> is navigated.</p>

  <p>There is no <code><a href=#windowproxy>WindowProxy</a></code> interface object.</p>

  <p class=note>The <code><a href=#windowproxy>WindowProxy</a></code> object allows scripts
  to act as if each <a href=#browsing-context>browsing context</a> had a single
  <code><a href=#window>Window</a></code> object, while still keeping separate
  <code><a href=#window>Window</a></code> objects for each <code><a href=#document>Document</a></code>.</p>

  <div class=example>

   <p>In the following example, the variable <var title="">x</var> is
   set to the <code><a href=#windowproxy>WindowProxy</a></code> object returned by the <code title=dom-window><a href=#dom-window>window</a></code> accessor on the global object. All
   of the expressions following the assignment return true, because in
   every respect, the <code><a href=#windowproxy>WindowProxy</a></code> object acts like the
   underlying <code><a href=#window>Window</a></code> object.</p>

   <pre>var x = window;
x instanceof Window; // true
x === this; // true</pre>

  </div>

  </div>



  <h3 id=origin-0><span class=secno>6.3 </span>Origin</h3>
  <!-- Hallowed are the Ori -->

  <p>The <dfn id=origin>origin</dfn> of a resource and the <dfn id=effective-script-origin>effective script
  origin</dfn> of a resource are both either opaque identifiers or
  tuples consisting of a scheme component, a host component, a port
  component, and optionally extra data.</p>

  <p class=note>The extra data could include the certificate of the
  site when using encrypted connections, to ensure that if the site's
  secure certificate changes, the origin is considered to change as
  well.</p>


  <div class=impl>

  <p>These characteristics are defined as follows:</p>

  <dl><dt>For URLs</dt>

   <dd>

    <p>The <a href=#origin>origin</a> and <a href=#effective-script-origin>effective script
    origin</a> of the <a href=#url>URL</a> is whatever is returned by
    the following algorithm:</p>

    <ol><li><p>Let <var title="">url</var> be the <a href=#url>URL</a> for
     which the <a href=#origin>origin</a> is being determined.</li>

     <li><p><a href=#parse-a-url title="parse a url">Parse</a> <var title="">url</var>.</li>

     <li><p>If <var title="">url</var> identifies a resource that is
     its own trust domain (e.g. it identifies an e-mail on an IMAP
     server or a post on an NNTP server) then return a globally unique
     identifier specific to the resource identified by <var title="">url</var>, so that if this algorithm is invoked again
     for <a href=#url title=URL>URLs</a> that identify the same resource,
     the same identifier will be returned.</li>

     <li><p>If <var title="">url</var> does not use a server-based
     naming authority, or if parsing <var title="">url</var> failed,
     or if <var title="">url</var> is not an <a href=#absolute-url>absolute
     URL</a>, then return a new globally unique
     identifier.</li>

     <li><p>Let <var title="">scheme</var> be the <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component of <var title="">url</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>

     <li><p>If the UA doesn't support the protocol given by <var title="">scheme</var>, then return a new globally unique
     identifier.</li>

     <li><p>If <var title="">scheme</var> is "<code title="">file</code>", then the user agent may return a
     UA-specific value.</li>

     <li><p>Let <var title="">host</var> be the <a href=#url-host title=url-host>&lt;host&gt;</a> component of <var title="">url</var>.</li>

     <li>

      <p>Apply the IDNA ToASCII algorithm to <var title="">host</var>,
      with both the AllowUnassigned and UseSTD3ASCIIRules flags
      set. Let <var title="">host</var> be the result of the ToASCII
      algorithm.</p>

      <p>If ToASCII fails to convert one of the components of the
      string, e.g. because it is too long or because it contains
      invalid characters, then return a new globally unique
      identifier. <a href=#refsRFC3490>[RFC3490]</a></p>

     </li>

     <li><p>Let <var title="">host</var> be the result of converting
     <var title="">host</var> <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">to
     ASCII lowercase</a>.</li>

     <li><p>If there is no <a href=#url-port title=url-port>&lt;port&gt;</a>
     component, then let <var title="">port</var> be the default port
     for the protocol given by <var title="">scheme</var>. Otherwise,
     let <var title="">port</var> be the <a href=#url-port title=url-port>&lt;port&gt;</a> component of <var title="">url</var>.</li>

     <li><p>Return the tuple (<var title="">scheme</var>, <var title="">host</var>, <var title="">port</var>).</li>

    </ol><p>In addition, if the <a href=#url>URL</a> is in fact associated with
    a <code><a href=#document>Document</a></code> object that was created by parsing the
    resource obtained from fetching <a href=#url>URL</a>, and this was
    done over a secure connection, then the server's secure
    certificate may be added to the origin as additional data.</p>

   </dd>

   <dt>For scripts</dt>

   <dd>

    <p>The <a href=#origin>origin</a> and <a href=#effective-script-origin>effective script
    origin</a> of a script are determined from another resource,
    called the <i>owner</i>:</p>

    <dl class=switch><dt>If a script is in a <code><a href=#script>script</a></code> element</dt>

     <dd>The owner is the <code><a href=#document>Document</a></code> to which the
     <code><a href=#script>script</a></code> element belongs.</dd>


     <dt>If a script is in an <a href=#event-handler-content-attributes title="event handler content
     attributes">event handler content attribute</a></dt>

     <dd>The owner is the <code><a href=#document>Document</a></code> to which the
     attribute node belongs.</dd>


     <dt>If a script is a function or other code reference created by
     another script</dt>

     <dd>The owner is the script that created it.</dd>


     <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> that was returned as the
     location of an HTTP redirect (<a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a> in
     other protocols)</dt>

     <dd>The owner is the <a href=#url>URL</a> that redirected to the
     <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a>.</dd>


     <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> in an attribute</dt>

     <dd>The owner is the <code><a href=#document>Document</a></code> of the element on
     which the attribute is found.</dd>


     <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> in a style sheet</dt>

     <dd>The owner is the <a href=#url>URL</a> of the style sheet.</dd>


     <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> to which a <a href=#browsing-context>browsing
     context</a> is being <a href=#navigate title=navigate>navigated</a>,
     the URL having been provided by the user (e.g. by using a
     <i>bookmarklet</i>)</dt>

     <dd>The owner is the <code><a href=#document>Document</a></code> of the <a href=#browsing-context>browsing
     context</a>'s <a href=#active-document>active document</a>.</dd>


     <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> to which a <a href=#browsing-context>browsing
     context</a> is being <a href=#navigate title=navigate>navigated</a>,
     the URL having been declared in markup</dt>

     <dd>The owner is the <code><a href=#document>Document</a></code> of the element
     (e.g. an <code><a href=#the-a-element>a</a></code> or <code><a href=#the-area-element>area</a></code> element) that
     declared the URL.</dd>


     <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> to which a <a href=#browsing-context>browsing
     context</a> is being <a href=#navigate title=navigate>navigated</a>,
     the URL having been provided by script</dt>

     <dd>The owner is the script that provided the URL.</dd>

    </dl><p>The <a href=#origin>origin</a> of the script is then equal to the
    <a href=#origin>origin</a> of the owner, and the <a href=#effective-script-origin>effective script
    origin</a> of the script is equal to the <a href=#effective-script-origin>effective script
    origin</a> of the owner.</p>

   </dd>

   <dt>For <code><a href=#document>Document</a></code> objects and images</dt>

   <dd>

    <dl class=switch><dt id=sandboxOrigin>If a <code><a href=#document>Document</a></code> is in a
     <a href=#browsing-context>browsing context</a> whose <a href=#sandboxed-origin-browsing-context-flag>sandboxed origin
     browsing context flag</a> was set when the
     <code><a href=#document>Document</a></code> was created</dt>

     <dt>If a <code><a href=#document>Document</a></code> was generated from a resource
     labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code></dt>

     <dd>The <a href=#origin>origin</a> is a globally unique identifier
     assigned when the <code><a href=#document>Document</a></code> is created.</dd>


     <dt>If a <code><a href=#document>Document</a></code> or image was returned by the
     <code>XMLHttpRequest</code> API</dt>

     <dd>The <a href=#origin>origin</a> is equal to the <span>XMLHttpRequest
     origin</span> of the <code>XMLHttpRequest</code> object. <a href=#refsXHR>[XHR]</a></dd>


     <dt>If a <code><a href=#document>Document</a></code> or image was generated from a
     <a href=#javascript-protocol title="javascript protocol"><code>javascript:</code>
     URL</a></dt>

     <dd>The <a href=#origin>origin</a> is equal to the <a href=#origin>origin</a>
     of the script of that <a href=#javascript-protocol title="javascript
     protocol"><code>javascript:</code> URL</a>.</dd>


     <dt>If a <code><a href=#document>Document</a></code> or image was served over the
     network and has an address that uses a URL scheme with a
     server-based naming authority</dt>

     <dd>The <a href=#origin>origin</a> is the <a href=#origin>origin</a> of the
     <a href="#the-document's-address" title="the document's address">address</a> of the
     <code><a href=#document>Document</a></code> or the <a href=#url>URL</a> of the image, as
     appropriate.</dd>


     <dt>If a <code><a href=#document>Document</a></code> or image was generated from a
     <code title="">data:</code> URL that was returned as the location
     of an HTTP redirect (<a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a> in
     other protocols)</dt>

     <dd>The <a href=#origin>origin</a> is the <a href=#origin>origin</a> of the
     <a href=#url>URL</a> that redirected to the <code title="">data:</code> URL.</dd>


     <dt>If a <code><a href=#document>Document</a></code> or image was generated from a
     <code title="">data:</code> URL found in another
     <code><a href=#document>Document</a></code> or in a script</dt>

     <dd>The <a href=#origin>origin</a> is the <a href=#origin>origin</a> of the
     <code><a href=#document>Document</a></code> or script that initiated the <a href=#navigate title=navigate>navigation</a> to that <a href=#url>URL</a>.</dd>


     <dt>If a <code><a href=#document>Document</a></code> has the <a href="#the-document's-address" title="the
     document's address">address</a>
     "<code><a href=#about:blank>about:blank</a></code>"</dt>

     <dd>The <a href=#origin>origin</a> of the <code><a href=#document>Document</a></code> is <a href=#about-blank-origin>the <span>origin</span> it was
     assigned when its browsing context was created</a>.</dd>


     <dt>If a <code><a href=#document>Document</a></code> is <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a></dt>

     <dd>The <a href=#origin>origin</a> of the <code><a href=#document>Document</a></code> is the
     <a href=#origin>origin</a> of the <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing
     context</a>'s <a href=#browsing-context-container>browsing context container</a>'s
     <code><a href=#document>Document</a></code>.</dd>


     <dt>If a <code><a href=#document>Document</a></code> or image was obtained in some
     other manner (e.g. a <code title="">data:</code> URL typed in by
     the user, a <code><a href=#document>Document</a></code> created using the <code title=dom-DOMImplementation-createDocument><a href=#dom-domimplementation-createdocument>createDocument()</a></code>
     API, etc)</dt>

     <dd>The <a href=#origin>origin</a> is a globally unique identifier
     assigned when the <code><a href=#document>Document</a></code> or image is created.</dd>

    </dl><p>When a <code><a href=#document>Document</a></code> is created, its <a href=#effective-script-origin>effective
    script origin</a> is initialized to the <a href=#origin>origin</a> of
    the <code><a href=#document>Document</a></code>. However, the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute can
    be used to change it.</p>

   </dd>

   <dt>For <code><a href=#audio>audio</a></code> and <code><a href=#video>video</a></code> elements</dt>

   <dd>

    <p>If value of the <a href=#media-element>media element</a>'s <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code> attribute is the
    empty string, the <a href=#origin>origin</a> is the same as the
    <a href=#origin>origin</a> of the element's <code><a href=#document>Document</a></code>'s
    <a href=#origin>origin</a>.</p>

    <p>Otherwise, the <a href=#origin>origin</a> is equal to the
    <a href=#origin>origin</a> of the <a href=#absolute-url>absolute URL</a> given by the
    <a href=#media-element>media element</a>'s <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code> attribute.</p>

   </dd>

  </dl><p>The <dfn id=unicode-serialization-of-an-origin>Unicode serialization of an origin</dfn> is the string
  obtained by applying the following algorithm to the given
  <a href=#origin>origin</a>:</p>

  <ol><li><p>If the <a href=#origin>origin</a> in question is not a
   scheme/host/port tuple, then return the literal string "<code title="">null</code>" and abort these steps.</li>

   <li><p>Otherwise, let <var title="">result</var> be the scheme part
   of the <a href=#origin>origin</a> tuple.</li>

   <li><p>Append the string "<code title="">://</code>" to <var title="">result</var>.</li>

   <li><p>Apply the IDNA ToUnicode algorithm to each component of the
   host part of the <a href=#origin>origin</a> tuple, and append the results
   &mdash; each component, in the same order, separated by U+002E FULL
   STOP characters (.) &mdash; to <var title="">result</var>. <a href=#refsRFC3490>[RFC3490]</a></li>

   <li><p>If the port part of the <a href=#origin>origin</a> tuple gives a port
   that is different from the default port for the protocol given by
   the scheme part of the <a href=#origin>origin</a> tuple, then append a
   U+003A COLON character (:) and the given port, in base ten, to
   <var title="">result</var>.</li>

   <li><p>Return <var title="">result</var>.</li>

  </ol><p>The <dfn id=ascii-serialization-of-an-origin>ASCII serialization of an origin</dfn> is the string
  obtained by applying the following algorithm to the given
  <a href=#origin>origin</a>:</p>

  <ol><li><p>If the <a href=#origin>origin</a> in question is not a
   scheme/host/port tuple, then return the literal string "<code title="">null</code>" and abort these steps.</li>

   <li><p>Otherwise, let <var title="">result</var> be the scheme part
   of the <a href=#origin>origin</a> tuple.</li>

   <li><p>Append the string "<code title="">://</code>" to <var title="">result</var>.</li>

   <li>

    <p>Apply the IDNA ToASCII algorithm the host part of the
    <a href=#origin>origin</a> tuple, with both the AllowUnassigned and
    UseSTD3ASCIIRules flags set, and append the results <var title="">result</var>.</p>

    <p>If ToASCII fails to convert one of the components of the
    string, e.g. because it is too long or because it contains invalid
    characters, then return the empty string and abort these steps. <a href=#refsRFC3490>[RFC3490]</a></p>

   </li>

   <li><p>If the port part of the <a href=#origin>origin</a> tuple gives a port
   that is different from the default port for the protocol given by
   the scheme part of the <a href=#origin>origin</a> tuple, then append a
   U+003A COLON character (:) and the given port, in base ten, to
   <var title="">result</var>.</li>

   <li><p>Return <var title="">result</var>.</li>

  </ol><p>Two <a href=#origin title=origin>origins</a> are said to be the
  <dfn id=same-origin>same origin</dfn> if the following algorithm returns true:</p>

  <ol><li><p>Let <var title="">A</var> be the first <a href=#origin>origin</a>
   being compared, and <var title="">B</var> be the second
   <a href=#origin>origin</a> being compared.</li>

   <li><p>If <var title="">A</var> and <var title="">B</var> are both
   opaque identifiers, and their value is equal, then return
   true.</li>

   <li><p>Otherwise, if either <var title="">A</var> or <var title="">B</var> or both are opaque identifiers, return
   false.</li>

   <li><p>If <var title="">A</var> and <var title="">B</var> have
   scheme components that are not identical, return false.</li>

   <li><p>If <var title="">A</var> and <var title="">B</var> have host
   components that are not identical, return false.</li>

   <li><p>If <var title="">A</var> and <var title="">B</var> have port
   components that are not identical, return false.</li>

   <li><p>If either <var title="">A</var> or <var title="">B</var>
   have additional data, but that data is not identical for both,
   return false.</li>

   <li><p>Return true.</li>

  </ol></div>


  <h4 id=relaxing-the-same-origin-restriction><span class=secno>6.3.1 </span>Relaxing the same-origin restriction</h4>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-domain><a href=#dom-document-domain>domain</a></code> [ = <var title="">domain</var> ]</dt>

   <dd>

    <p>Returns the current domain used for security checks.</p>

    <p>Can be set to a value that removes subdomains, to change the
    <a href=#effective-script-origin>effective script origin</a> to allow pages on other
    subdomains of the same domain (if they do the same thing) to
    access each other.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-domain title=dom-document-domain><code>domain</code></dfn>
  attribute on <code><a href=#document>Document</a></code> objects must be initialized to
  <a href="#the-document's-domain">the document's domain</a>, if it has one, and the empty
  string otherwise. If the value is an IPv6 address, then the square
  brackets from the host portion of the <a href=#url-host title=url-host>&lt;host&gt;</a> component must be omitted from
  the attribute's value.</p>

  <p>On getting, the attribute must return its current
  value, unless the document was created by
  <code>XMLHttpRequest</code>, in which case it must throw an
  <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception.</p>

  <p>On setting, the user agent must run the following algorithm:</p>

  <ol><li>

    <p>If the document was created by <code>XMLHttpRequest</code>,
    throw an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception and abort these
    steps.</p>

   </li>

   <li>

    <p>If the new value is an IP address, let <var title="">new
    value</var> be the new value. Otherwise, apply the IDNA ToASCII
    algorithm to the new value, with both the AllowUnassigned and
    UseSTD3ASCIIRules flags set, and let <var title="">new value</var>
    be the result of the ToASCII algorithm.</p>

    <p>If ToASCII fails to convert one of the components of the
    string, e.g. because it is too long or because it contains invalid
    characters, then throw a <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort
    these steps. <a href=#refsRFC3490>[RFC3490]</a></p>

   </li>

   <li>

    <p>If <var title="">new value</var> is not exactly equal to the
    current value of the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute, then
    run these substeps:</p>

    <ol><li>

      <p>If the current value is an IP address, throw a
      <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort these steps.</p>

     </li>

     <li>

      <p>If <var title="">new value</var>, prefixed by a U+002E FULL
      STOP (.), does not exactly match the end of the current value,
      throw a <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort these
      steps.</p>

     </li>

     <li>

      <p>If <var title="">new value</var> matches a suffix in the
      Public Suffix List, or, if <var title="">new value</var>,
      prefixed by a U+002E FULL STOP (.), matches the end of a
      suffix in the Public Suffix List, then throw a
      <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort these steps. <a href=#refsPSL>[PSL]</a></p>

      <p>Suffixes must be compared after applying the IDNA ToASCII
      algorithm to them, with both the AllowUnassigned and
      UseSTD3ASCIIRules flags set, in an <a href=#ascii-case-insensitive>ASCII
      case-insensitive</a> manner. <a href=#refsRFC3490>[RFC3490]</a></p>

     </li>

    </ol></li>

   <li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>

   <li>

    <p>Set the attribute's value to <var title="">new value</var>.</p>

   </li>

   <li>

    <p>Set the host part of the <a href=#effective-script-origin>effective script origin</a>
    tuple of the <code><a href=#document>Document</a></code> to <var title="">new
    value</var>.</p>

   </li>

   <li>

    <p>Set the port part of the <a href=#effective-script-origin>effective script origin</a>
    tuple of the <code><a href=#document>Document</a></code> to "manual override" (a value
    that, for the purposes of <a href=#same-origin title="same origin">comparing
    origins</a>, is identical to "manual override" but not
    identical to any other value).</p>

   </li>

  </ol><p>The <dfn id="the-document's-domain" title="the document's domain">domain</dfn> of a
  <code><a href=#document>Document</a></code> is the host part of the document's
  <a href=#origin>origin</a>, if that is a scheme/host/port tuple. If it
  isn't, then the document does not have a domain.</p>

  </div>

  <p class=note>The <code title=dom-document-domain><a href=#dom-document-domain>domain</a></code>
  attribute is used to enable pages on different hosts of a domain to
  access each others' DOMs.</p>

  <p class=warning>Do not use the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute when
  using shared hosting. If an untrusted third party is able to host an
  HTTP server at the same IP address but on a different port, then the
  same-origin protection that normally protects two different sites on
  the same host will fail, as the ports are ignored when comparing
  origins after the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute has
  been used.</p>



  <h3 id=history><span class=secno>6.4 </span>Session history and navigation</h3>

  <h4 id=the-session-history-of-browsing-contexts><span class=secno>6.4.1 </span>The session history of browsing contexts</h4>

  <p>The sequence of <code><a href=#document>Document</a></code>s in a <a href=#browsing-context>browsing
  context</a> is its <dfn id=session-history>session history</dfn>.</p>

  <p><code><a href=#history-0>History</a></code> objects provide a representation of the
  pages in the session history of <a href=#browsing-context title="browsing
  context">browsing contexts</a>. Each <a href=#browsing-context>browsing
  context</a>, including <a href=#nested-browsing-context title="nested browsing
  context">nested browsing contexts</a>, has a distinct session
  history.</p>

  <p>Each <code><a href=#document>Document</a></code> object in a <a href=#browsing-context>browsing
  context</a>'s <a href=#session-history>session history</a> is associated with a
  unique instance of the <code><a href=#history-0>History</a></code> object, although they
  all must model the same underlying <a href=#session-history>session history</a>.</p>

  <div class=impl>

  <p>The <dfn id=dom-history title=dom-history><code>history</code></dfn> attribute
  of the <code><a href=#window>Window</a></code> interface must return the object
  implementing the <code><a href=#history-0>History</a></code> interface for that
  <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>.</p>

  </div>

  <p><code><a href=#history-0>History</a></code> objects represent their <a href=#browsing-context>browsing
  context</a>'s session history as a flat list of <a href=#session-history-entry title="session history entry">session history entries</a>. Each
  <dfn id=session-history-entry>session history entry</dfn> consists of either a
  <a href=#url>URL</a> or a <a href=#state-object>state object</a>, or both<span class=impl>, and may in addition have a title, a
  <code><a href=#document>Document</a></code> object, form data, a scroll position, and
  other information associated with it</span>.</p>

  <div class=impl>

  <p class=note>This does not imply that the user interface need be
  linear. See the <a href=#history-notes>notes below</a>.</p>

  </div>

  <p class=note>Titles associated with <a href=#session-history-entry title="session history
  entry">session history entries</a> need not have any relation
  with the current <code><a href=#the-title-element-0>title</a></code> of the
  <code><a href=#document>Document</a></code>. The title of a <a href=#session-history-entry>session history
  entry</a> is intended to explain the state of the document at
  that point, so that the user can navigate the document's
  history.</p>

  <p>URLs without associated <a href=#state-object title="state object">state
  objects</a> are added to the session history as the user (or
  script) navigates from page to page.</p>

  <p>A <dfn id=state-object>state object</dfn> is an object representing a user
  interface state.</p>

  <p>Pages can <a href=#dom-history-pushstate title=dom-history-pushState>add</a> <a href=#state-object title="state object">state objects</a> between their entry in the
  session history and the next ("forward") entry. These are then <a href=#event-popstate title=event-popstate>returned to the script</a> when the user
  (or script) goes back in the history, thus enabling authors to use
  the "navigation" metaphor even in one-page applications.</p>

  <div class=note>

   <p><a href=#state-object title="state object">State objects</a> are intended to
   be used for two main purposes: first, storing a preparsed
   description of the state in the <a href=#url>URL</a> so that in the
   simple case an author doesn't have to do the parsing (though one
   would still need the parsing for handling <a href=#url title=URL>URLs</a> passed around by users, so it's only a minor
   optimization), and second, so that the author can store state that
   one wouldn't store in the URL because it only applies to the current
   <code><a href=#document>Document</a></code> instance and it would have to be reconstructed
   if a new <code><a href=#document>Document</a></code> were opened.</p>

   <p>An example of the latter would be something like keeping track of
   the precise coordinate from which a popup <code><a href=#the-div-element>div</a></code> was made
   to animate, so that if the user goes back, it can be made to animate
   to the same location. Or alternatively, it could be used to keep a
   pointer into a cache of data that would be fetched from the server
   based on the information in the <a href=#url>URL</a>, so that when going
   back and forward, the information doesn't have to be fetched
   again.</p>

  </div>

  <hr><p>At any point, one of the entries in the session history is the
  <dfn id=current-entry>current entry</dfn>. This is the entry representing the
  <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
  context</a>. The <a href=#current-entry>current entry</a> is usually an entry
  for the <a href=#dom-location-href title=dom-location-href>location</a> of the
  <code><a href=#document>Document</a></code>. However, it can also be one of the entries
  for <a href=#state-object title="state object">state objects</a> added to the
  history by that document.</p>

  <p>Entries that consist of <a href=#state-object title="state object">state
  objects</a> share the same <code><a href=#document>Document</a></code> as the entry for
  the page that was active when they were added.</p>

  <p>Contiguous entries that differ just by fragment identifier also
  share the same <code><a href=#document>Document</a></code>.</p>

  <p class=note>All entries that share the same
  <code><a href=#document>Document</a></code> (and that are therefore merely different
  states of one particular document) are contiguous by definition.</p>

  <div class=impl>

  <p>User agents may <a href=#discard-a-document title="discard a Document">discard</a>
  the <code><a href=#document>Document</a></code> objects of entries other than the
  <a href=#current-entry>current entry</a> that are not referenced from any script,
  reloading the pages afresh when the user or script navigates back to
  such pages. This specification does not specify when user agents
  should discard <code><a href=#document>Document</a></code> objects and when they should
  cache them.</p>

  <p>Entries that have had their <code><a href=#document>Document</a></code> objects
  discarded must, for the purposes of the algorithms given below, act
  as if they had not. When the user or script navigates back or
  forwards to a page which has no in-memory DOM objects, any other
  entries that shared the same <code><a href=#document>Document</a></code> object with it
  must share the new object as well.</p>

  </div>


  <h4 id=the-history-interface><span class=secno>6.4.2 </span>The <code><a href=#history-0>History</a></code> interface</h4>

  <pre class=idl>interface <dfn id=history-0>History</dfn> {
  readonly attribute long <a href=#dom-history-length title=dom-history-length>length</a>;
  void <a href=#dom-history-go title=dom-history-go>go</a>(in optional long delta);
  void <a href=#dom-history-back title=dom-history-back>back</a>();
  void <a href=#dom-history-forward title=dom-history-forward>forward</a>();
  void <a href=#dom-history-pushstate title=dom-history-pushState>pushState</a>(in any data, in DOMString title, in optional DOMString url);
  void <a href=#dom-history-replacestate title=dom-history-replaceState>replaceState</a>(in any data, in DOMString title, in optional DOMString url);
};</pre>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-length><a href=#dom-history-length>length</a></code></dt>

   <dd>

    <p>Returns the number of entries in the <a href=#joint-session-history>joint session history</a>.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-go><a href=#dom-history-go>go</a></code>( [ <var title="">delta</var> ] )</dt>

   <dd>

    <p>Goes back or forward the specified number of steps in the <a href=#joint-session-history>joint session history</a>.</p>

    <p>A zero delta will reload the current page.</p>

    <p>If the delta is out of range, does nothing.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-back><a href=#dom-history-back>back</a></code>()</dt>

   <dd>

    <p>Goes back one step in the <a href=#joint-session-history>joint session history</a>.</p>

    <p>If there is no previous page, does nothing.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-forward><a href=#dom-history-forward>forward</a></code>()</dt>

   <dd>

    <p>Goes forward one step in the <a href=#joint-session-history>joint session history</a>.</p>

    <p>If there is no next page, does nothing.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState</a></code>(<var title="">data</var>, <var title="">title</var> [, <var title="">url</var> ] )</dt>

   <dd>

    <p>Pushes the given data onto the session history, with the given title, and, if provided, the given URL.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-replaceState><a href=#dom-history-replacestate>replaceState</a></code>(<var title="">data</var>, <var title="">title</var> [, <var title="">url</var> ] )</dt>

   <dd>

    <p>Updates the current entry in the session histor to have the given data, title, and, if provided, URL.</p>

   </dd>

  </dl><p>The <dfn id=joint-session-history>joint session history</dfn> of a <code><a href=#history-0>History</a></code>
  object is the union of all the <a href=#session-history title="session history">session
  histories</a> of all <a href=#browsing-context title="browsing context">browsing
  contexts</a> of all the <a href=#fully-active>fully active</a>
  <code><a href=#document>Document</a></code> objects that share the <code><a href=#history-0>History</a></code>
  object's <a href=#top-level-browsing-context>top-level browsing context</a>, with all the
  entries that are <a href=#current-entry title="current entry">current entries</a>
  in their respective <a href=#session-history title="session history">session
  histories</a> removed except for the <a href=#current-entry-of-the-joint-session-history>current entry of the
  joint session history</a>.</p>

  <p>The <dfn id=current-entry-of-the-joint-session-history>current entry of the joint session history</dfn> is the
  entry that most recently became a <a href=#current-entry>current entry</a> in its
  <a href=#session-history>session history</a>.</p>

  <p>Entries in the <a href=#joint-session-history>joint session history</a> are ordered
  chronologically by the time they were added to their respective
  <a href=#session-history title="session history">session histories</a>. (Since all
  these <a href=#browsing-context title="browsing context">browsing contexts</a> by
  definition share an <a href=#event-loop>event loop</a>, there is always a
  well-defined sequential order in which their <a href=#session-history title="session
  history">session histories</a> had their entries added.) Each
  entry has an index; the earliest entry has index 0, and the
  subsequent entries are numbered with consecutively increasing
  integers (1, 2, 3, etc).</p>

  <div class=impl>

  <p>The <dfn id=dom-history-length title=dom-history-length><code>length</code></dfn>
  attribute of the <code><a href=#history-0>History</a></code> interface must return the
  number of entries in the <a href=#joint-session-history>joint session history</a>.</p>

  <p>The actual entries are not accessible from script.</p>

  <p>When the <dfn id=dom-history-go title=dom-history-go><code>go(<var title="">delta</var>)</code></dfn> method is invoked, if the
  argument to the method was omitted or has the value zero, the user
  agent must act as if the <code title=dom-location-reload><a href=#dom-location-reload>location.reload()</a></code> method was
  called instead. Otherwise, the user agent must <a href=#traverse-the-history-by-a-delta>traverse the
  history by a delta</a> whose value is the value of the method's
  argument.</p>

  <p>When the <dfn id=dom-history-back title=dom-history-back><code>back()</code></dfn>
  method is invoked, the user agent must <a href=#traverse-the-history-by-a-delta>traverse the history by
  a delta</a> &minus;1.</p>

  <p>When the <dfn id=dom-history-forward title=dom-history-forward><code>forward()</code></dfn>method is
  invoked, the user agent must <a href=#traverse-the-history-by-a-delta>traverse the history by a
  delta</a> +1.</p>

  <p>To <dfn id=traverse-the-history-by-a-delta>traverse the history by a delta</dfn> <var title="">delta</var>, the user agent must <a href=#queue-a-task>queue a task</a>
  to run the following steps. The <a href=#task-source>task source</a> for the
  queued task is the <a href=#history-traversal-task-source>history traversal task source</a>.</p>

  <ol><li><p>Let <var title="">delta</var> be the argument to the
   method.</li>

   <li><p>If the index of the <a href=#current-entry-of-the-joint-session-history>current entry of the joint session
   history</a> plus <var title="">delta</var> is less than zero or
   greater than or equal to the number of items in the <a href=#joint-session-history>joint
   session history</a>, then the user agent must do nothing.</p>

   <li><p>Let <var title="">specified entry</var> be the entry in the
   <a href=#joint-session-history>joint session history</a> whose index is the sum of <var title="">delta</var> and the index of the <a href=#current-entry-of-the-joint-session-history>current entry of
   the joint session history</a>.</li>

   <li><p>Let <var title="">specified browsing context</var> be the
   <a href=#browsing-context>browsing context</a> of the <var title="">specified
   entry</var>.</li>

   <!-- XXX if going to another doc, try to unload the document here
   (firing beforeunload, unload, pagehide) -->

   <li><p><a href=#traverse-the-history>Traverse the history</a> of the <var title="">specified browsing context</var> to the <var title="">specified entry</var>.</p>

  </ol><p>When the user navigates through a <a href=#browsing-context>browsing context</a>,
  e.g. using a browser's back and forward buttons, the user agent must
  <a href=#traverse-the-history-by-a-delta>traverse the history by a delta</a> equivalent to the
  action specified by the user.</p>

  <hr><p>The <dfn id=dom-history-pushstate title=dom-history-pushState><code>pushState(<var title="">data</var>, <var title="">title</var>, <var title="">url</var>)</code></dfn> method adds a state object entry to
  the history.</p>

  <p>The <dfn id=dom-history-replacestate title=dom-history-replaceState><code>replaceState(<var title="">data</var>, <var title="">title</var>, <var title="">url</var>)</code></dfn> method updates the state object,
  title, and optionally the <a href=#url>URL</a> of the <a href=#current-entry>current
  entry</a> in the history.</p>

  <p>When either of these methods is invoked, the user agent must run
  the following steps:</p>

  <ol><li><p>Let <var title="">clone data</var> be a <a href=#structured-clone>structured
   clone</a> of the specified <var title="">data</var>. If this
   throws an exception, then rethrow that exception and abort these
   steps.</li>

   <li>

    <p>If a third argument is specified, run these substeps:</p>

    <ol><li><a href=#resolve-a-url title="resolve a url">Resolve</a> the value of the
     third argument, relative to the <a href=#entry-script>entry script</a>'s <a href="#script's-base-url" title="script's base URL">base URL</a>.</li>

     <li>If that fails, raise a <code><a href=#security_err>SECURITY_ERR</a></code> exception
     and abort these steps.</li>

     <li>Compare the resulting <a href=#absolute-url>absolute URL</a> to <a href="#the-document's-address">the
     document's address</a>. If any part of these two <a href=#url title=URL>URLs</a> differ other than the <a href=#url-path title=url-path>&lt;path&gt;</a>, <a href=#url-query title=url-query>&lt;query&gt;</a>, and <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> components, then
     raise a <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort these
     steps.</li>

     <li>If the <a href=#origin>origin</a> of the resulting <a href=#absolute-url>absolute
     URL</a> is not the same as the <a href=#origin>origin</a> of the
     <a href=#entry-script>entry script</a>'s <a href="#script's-document" title="script's
     document">document</a>, and either the <a href=#url-path title=url-path>&lt;path&gt;</a> or <a href=#url-query title=url-query>&lt;query&gt;</a> components of the two
     <a href=#url title=URL>URLs</a> compared in the previous step
     differ, raise a <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort
     these steps. (This prevents sandboxed content from spoofing other
     pages on the same origin.)</li>

    </ol><p>For the purposes of the comparisons in the above substeps, the
    <a href=#url-path title=url-path>&lt;path&gt;</a> and <a href=#url-query title=url-query>&lt;query&gt;</a> components can only be the
    same if the URLs are both <a href=#hierarchical-url title="hierarchical
    URL">hierarchical URLs</a>.</p>

   </li>

   <li>

    <p>If the method invoked was the <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> method:</p>

    <ol><li>

      <p>Remove all the entries in the <a href=#browsing-context>browsing context</a>'s
      <a href=#session-history>session history</a> after the <a href=#current-entry>current
      entry</a>. If the <a href=#current-entry>current entry</a> is the last
      entry in the session history, then no entries are
      removed.</p>

      <p class=note>This <a href=#history-notes>doesn't
      necessarily have to affect</a> the user agent's user
      interface.</p>

     </li>

     <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a> queued
     by the <a href=#history-traversal-task-source>history traversal task source</a>.</li>

     <li><p>Add a state object entry to the session history, after the
     <a href=#current-entry>current entry</a>, with <var title="">cloned data</var> as
     the state object, the given <var title="">title</var> as the title,
     and, if the third argument is present, the <a href=#absolute-url>absolute
     URL</a> that was found earlier in this algorithm as the
     <a href=#url>URL</a> of the entry.</li>

     <li><p>Update the <a href=#current-entry>current entry</a> to be the this newly
     added entry.</li>

    </ol><p>Otherwise, if the method invoked was the <code title=dom-history-replaceState><a href=#dom-history-replacestate>replaceState()</a></code> method:</p>

    <ol><li><p>Update the <a href=#current-entry>current entry</a> in the session
     history so that <var title="">cloned data</var> is the entry's
     new state object, the given <var title="">title</var> is the new
     title, and, if the third argument is present, the <a href=#absolute-url>absolute
     URL</a> that was found earlier in this algorithm is the
     entry's new <a href=#url>URL</a>.</li>

    </ol></li>

   <li>

    <p>If the third argument is present, set <a href="#the-document's-current-address">the document's
    current address</a> to the <a href=#absolute-url>absolute URL</a> that was
    found earlier in this algorithm.</p>

    <p class=note>Since this is neither a <a href=#navigate title=navigate>navigation</a> of the <a href=#browsing-context>browsing
    context</a> nor a <a href=#traverse-the-history title="traverse the history">history
    traversal</a>, it does not cause a <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code> event to be fired.</p>

   </li>

  </ol><p class=note>The <var title="">title</var> is purely
  advisory. User agents might use the title in the user interface.</p>

  <p>User agents may limit the number of state objects added to the
  session history per page. If a page hits the UA-defined limit, user
  agents must remove the entry immediately after the first entry for
  that <code><a href=#document>Document</a></code> object in the session history after
  having added the new entry. (Thus the state history acts as a FIFO
  buffer for eviction, but as a LIFO buffer for navigation.)</p>

  </div>

  <div class=example>

   <p>Consider a game where the user can navigate along a line, such
   that the user is always at some coordinate, and such that the user
   can bookmark the page corresponding to a particular coordinate, to
   return to it later.</p>

   <p>A static page implementing the x=5 position in such a game could
   look like the following:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;!-- this is http://example.com/line?x=5 --&gt;
&lt;title&gt;Line Game - 5&lt;/title&gt;
&lt;p&gt;You are at coordinate 5 on the line.&lt;/p&gt;
&lt;p&gt;
 &lt;a href="?x=6"&gt;Advance to 6&lt;/a&gt; or
 &lt;a href="?x=4"&gt;retreat to 4&lt;/a&gt;?
&lt;/p&gt;</pre>

   <p>The problem with such a system is that each time the user
   clicks, the whole page has to be reloaded. Here instead is another
   way of doing it, using script:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;!-- this starts off as http://example.com/line?x=5 --&gt;
&lt;title&gt;Line Game - 5&lt;/title&gt;
&lt;p&gt;You are at coordinate &lt;span id="coord"&gt;5&lt;/span&gt; on the line.&lt;/p&gt;
&lt;p&gt;
 &lt;a href="?x=6" onclick="go(1)"&gt;Advance to 6&lt;/a&gt; or
 &lt;a href="?x=4" onclick="go(-1)"&gt;retreat to 4&lt;/a&gt;?
&lt;/p&gt;
&lt;script&gt;
 var currentPage = 5; // prefilled by server
 function go(d) {
   history.pushState(currentPage, 'Line Game - ' + currentPage, '?x=' + currentPage);
   setupPage(currentPage + d);
 }
 onpopstate = function(event) {
   setupPage(event.state);
 }
 function setupPage(page) {
   currentPage = page;
   document.title = 'Line Game - ' + currentPage;
   document.getElementById('coord').textContent = currentPage;
   document.links[0].href = '?x=' + (currentPage+1);
   document.links[0].textContent = 'Advance to ' + (currentPage+1);
   document.links[1].href = '?x=' + (currentPage-1);
   document.links[1].textContent = 'retreat to ' + (currentPage-1);
 }
&lt;/script&gt;</pre>

   <p>In systems without script, this still works like the previous
   example. However, users that <em>do</em> have script support can
   now navigate much faster, since there is no network access for the
   same experience. Furthermore, contrary to the experience the user
   would have with just a na&iuml;ve script-based approach,
   bookmarking and navigating the session history still work.</p>

   <p>In the example above, the <var title="">data</var> argument to
   the <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> method
   is the same information as would be sent to the server, but in a
   more convenient form, so that the script doesn't have to parse the
   URL each time the user navigates.</p>

  </div>

  <div class=example>

   <p>Applications might not use the same title for a <a href=#session-history-entry>session
   history entry</a> as the value of the document's
   <code><a href=#the-title-element-0>title</a></code> element at that time. For example, here is a
   simple page that shows a block in the <code><a href=#the-title-element-0>title</a></code> element.
   Clearly, when navigating backwards to a previous state the user
   does not go back in time, and therefore it would be inappropriate
   to put the time in the session history title.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;TITLE&gt;Line&lt;/TITLE&gt;
&lt;SCRIPT&gt;
 setInterval(function () { document.title = 'Line - ' + new Date(); }, 1000);
 var i = 1;
 function inc() {
   set(i+1);
   history.pushState(i, 'Line - ' + i);
 }
 function set(newI) {
   i = newI;
   document.forms.F.I.value = newI;
 }
&lt;/SCRIPT&gt;
&lt;BODY ONPOPSTATE="recover(event.state)"&gt;
&lt;FORM NAME=F&gt;
State: &lt;OUTPUT NAME=I&gt;1&lt;/OUTPUT&gt; &lt;INPUT VALUE="Increment" TYPE=BUTTON ONCLICK="inc()"&gt;
&lt;/FORM&gt;</pre>

  </div>



  <h4 id=the-location-interface><span class=secno>6.4.3 </span>The <code><a href=#location>Location</a></code> interface</h4>

  <p>Each <code><a href=#document>Document</a></code> object in a <a href=#browsing-context>browsing
  context</a>'s session history is associated with a unique
  instance of a <code><a href=#location>Location</a></code> object.</p>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-location><a href=#dom-document-location>location</a></code> [ = <var title="">value</var> ]</dt>
   <dt><var title="">window</var> . <code title=dom-location><a href=#dom-location>location</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a <code><a href=#location>Location</a></code> object with the current page's location.</p>

    <p>Can be set, to navigate to another page.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-location title=dom-document-location><code>location</code></dfn> attribute
  of the <code><a href=#htmldocument>HTMLDocument</a></code> interface must return the
  <code><a href=#location>Location</a></code> object for that <code><a href=#document>Document</a></code> object,
  if it is in a <a href=#browsing-context>browsing context</a>, and null otherwise.</p>

  <p>The <dfn id=dom-location title=dom-location><code>location</code></dfn>
  attribute of the <code><a href=#window>Window</a></code> interface must return the
  <code><a href=#location>Location</a></code> object for that <code><a href=#window>Window</a></code> object's
  <code><a href=#document>Document</a></code>.</p>

  </div>

  <p><code><a href=#location>Location</a></code> objects provide a representation of <a href="#the-document's-current-address" title="the document's current address">their document's current
  address</a>, and allow the <a href=#current-entry>current entry</a> of the
  <a href=#browsing-context>browsing context</a>'s session history to be changed, by
  adding or replacing entries in the <code title=dom-history><a href=#dom-history>history</a></code> object.</p>

  <pre class=idl>interface <dfn id=location>Location</dfn> {
  stringifier attribute DOMString <a href=#dom-location-href title=dom-location-href>href</a>;
  void <a href=#dom-location-assign title=dom-location-assign>assign</a>(in DOMString url);
  void <a href=#dom-location-replace title=dom-location-replace>replace</a>(in DOMString url);
  void <a href=#dom-location-reload title=dom-location-reload>reload</a>();

  // <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a> <!-- blame brendan for these "innovative" names -->
           attribute DOMString <a href=#dom-location-protocol title=dom-location-protocol>protocol</a>;
           attribute DOMString <a href=#dom-location-host title=dom-location-host>host</a>;
           attribute DOMString <a href=#dom-location-hostname title=dom-location-hostname>hostname</a>;
           attribute DOMString <a href=#dom-location-port title=dom-location-port>port</a>;
           attribute DOMString <a href=#dom-location-pathname title=dom-location-pathname>pathname</a>;
           attribute DOMString <a href=#dom-location-search title=dom-location-search>search</a>;
           attribute DOMString <a href=#dom-location-hash title=dom-location-hash>hash</a>;

  // resolving relative URLs
  DOMString <a href=#dom-location-resolveurl title=dom-location-resolveURL>resolveURL</a>(in DOMString url);
};</pre>

  <dl class=domintro><dt><var title="">location</var> . <code title=dom-location-href><a href=#dom-location-href>href</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current page's location.</p>

    <p>Can be set, to navigate to another page.</p>

   </dd>

   <dt><var title="">location</var> . <code title=dom-location-assign><a href=#dom-location-assign>assign</a></code>(<var title="">url</var>)</dt>

   <dd>

    <p>Navigates to the given page.</p>

   </dd>

   <dt><var title="">location</var> . <code title=dom-location-replace><a href=#dom-location-replace>replace</a></code>(<var title="">url</var>)</dt>

   <dd>

    <p>Removes the current page from the session history and navigates to the given page.</p>

   </dd>

   <dt><var title="">location</var> . <code title=dom-location-reload><a href=#dom-location-reload>reload</a></code>()</dt>

   <dd>

    <p>Reloads the current page.</p>

   </dd>

   <dt><var title="">url</var> = <var title="">location</var> . <code title=dom-location-resolveURL><a href=#dom-location-resolveurl>resolveURL</a></code>(<var title="">url</var>)</dt>

   <dd>

    <p>Resolves the given relative URL to an absolute URL.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-location-href title=dom-location-href><code>href</code></dfn>
  attribute must return <a href="#the-document's-current-address" title="the document's current
  address">the current address</a> of the associated
  <code><a href=#document>Document</a></code> object, as an <a href=#absolute-url>absolute URL</a>.</p>

  <p>On setting, <!-- READ ME WHEN EDITING THIS: Mozilla does this,
  but IE doesn't. What should we do?: the behavior depends on the
  context in which the script that set the attribute is running. If
  the script ran as the direct result of the execution of a
  <code>script</code> element in the document represented by the
  <code>Location</code> object's associated <code>Document</code>
  object, then the user agent must act as if the <code
  title="dom-location-replace">replace()</code> method had been called
  with the new value as its argument. Otherwise,--> the user agent
  must act as if the <code title=dom-location-assign><a href=#dom-location-assign>assign()</a></code>
  method had been called with the new value as its argument.</p><!--
  v2: may wish to allow replace instead as a UI improvement -->

  <!-- we could change the magic .location setter to simply refer
  straight to assign(), so we don't have two levels of indirection -->

  <p>When the <dfn id=dom-location-assign title=dom-location-assign><code>assign(<var title="">url</var>)</code></dfn> method is invoked, the UA must
  <a href=#resolve-a-url title="resolve a url">resolve</a> the argument, relative to
  the <a href=#entry-script>entry script</a>'s <a href="#script's-base-url" title="script's base URL">base
  URL</a>, and if that is successful, must <a href=#navigate>navigate</a>
  the <a href=#browsing-context>browsing context</a> to the specified <var title="">url</var>. If the <a href=#browsing-context>browsing context</a>'s
  <a href=#session-history>session history</a> contains only one
  <code><a href=#document>Document</a></code>, and that was the <code><a href=#about:blank>about:blank</a></code>
  <code><a href=#document>Document</a></code> created when the <a href=#browsing-context>browsing context</a>
  was created, then the navigation must be done with
  <a href=#replacement-enabled>replacement enabled</a>.</p> <!-- READ ME WHEN EDITING
  THIS: IE and Firefox only seem to treat it that way if the DOM is
  still a virgin DOM; Safari doesn't check that. Thus this might need
  changing if testing shows the IE/Firefox behaviour is required
  here. -->

  <p>When the <dfn id=dom-location-replace title=dom-location-replace><code>replace(<var title="">url</var>)</code></dfn> method is invoked, the UA must
  <a href=#resolve-a-url title="resolve a url">resolve</a> the argument, relative to
  the <a href=#entry-script>entry script</a>'s <a href="#script's-base-url" title="script's base URL">base
  URL</a>, and if that is successful, <a href=#navigate>navigate</a> the
  <a href=#browsing-context>browsing context</a> to the specified <var title="">url</var> with <a href=#replacement-enabled>replacement enabled</a>.</p>

  <p>Navigation for the <code title=dom-location-assign><a href=#dom-location-assign>assign()</a></code> and <code title=dom-location-replace><a href=#dom-location-replace>replace()</a></code> methods must be done
  with the <a href="#script's-browsing-context" title="script's browsing context">browsing
  context</a> of the script that invoked the method as the
  <a href=#source-browsing-context>source browsing context</a>.</p>

  <p>If the <a href=#resolve-a-url title="resolve a url">resolving</a> step of the
  <code title=dom-location-assign><a href=#dom-location-assign>assign()</a></code> and <code title=dom-location-replace><a href=#dom-location-replace>replace()</a></code> methods is not
  successful, then the user agent must instead throw a
  <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception.</p>

  <p>When the <dfn id=dom-location-reload title=dom-location-reload><code>reload()</code></dfn> method is
  invoked, the user agent must run the appropriate steps from the
  following list:</p>

  <dl class=switch><dt>If the currently executing <a href=#concept-task title=concept-task>task</a> is the dispatch of a <code title=event-resize>resize</code> event in response to the user
   resizing the <a href=#browsing-context>browsing context</a></dt>

   <dd><p>Repaint the <a href=#browsing-context>browsing context</a> and abort these
   steps.</dd> <!-- this theoretically would have no effect but in
   practice can be useful to work around rendering bugs. -->

   <dt>Otherwise</dt>

   <dd><p><a href=#navigate>Navigate</a> the <a href=#browsing-context>browsing context</a> to
   <a href="#the-document's-current-address">the document's current address</a> with
   <a href=#replacement-enabled>replacement enabled</a>. The <a href=#source-browsing-context>source browsing
   context</a> must be the <a href=#browsing-context>browsing context</a> being
   navigated.</dd> <!-- it appears that document.reload() always
   uses GET and does not, e.g., re-POST. -->

   <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/141 -->

  </dl><p>When a user requests that the current page be reloaded through a
  user interface element, the user agent should <a href=#navigate>navigate</a>
  the <a href=#browsing-context>browsing context</a> to the same resource as
  <code><a href=#document>Document</a></code>, with <a href=#replacement-enabled>replacement enabled</a>. In the
  case of non-idempotent methods (e.g. HTTP POST), the user agent
  should prompt the user to confirm the operation first, since
  otherwise transactions (e.g. purchases or database modifications)
  could be repeated. User agents may allow the user to explicitly
  override any caches when reloading.</p>

  </div>

  <p>The <code><a href=#location>Location</a></code> interface also has the complement of
  <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a>, <dfn id=dom-location-protocol title=dom-location-protocol><code>protocol</code></dfn>, <dfn id=dom-location-host title=dom-location-host><code>host</code></dfn>, <dfn id=dom-location-port title=dom-location-port><code>port</code></dfn>, <dfn id=dom-location-hostname title=dom-location-hostname><code>hostname</code></dfn>, <dfn id=dom-location-pathname title=dom-location-pathname><code>pathname</code></dfn>, <dfn id=dom-location-search title=dom-location-search><code>search</code></dfn>, and <dfn id=dom-location-hash title=dom-location-hash><code>hash</code></dfn>. <span class=impl>These must follow the rules given for URL decomposition IDL
  attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a>
  being <a href="#the-document's-current-address" title="the document's current address">the current
  address</a> of the associated <code><a href=#document>Document</a></code> object, as an
  <a href=#absolute-url>absolute URL</a> (same as the <code title=dom-location-href><a href=#dom-location-href>href</a></code> attribute), and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
  same as setting the <code title=dom-location-href><a href=#dom-location-href>href</a></code>
  attribute to the new output value.</span></p>

  <div class=impl>

  <hr><p>The <dfn id=dom-location-resolveurl title=dom-location-resolveURL><code>resolveURL(<var title="">url</var>)</code></dfn> method must <a href=#resolve-a-url title="resolve a
  url">resolve</a> its <var title="">url</var> argument, relative
  to the <a href=#entry-script>entry script</a>'s <a href="#script's-base-url" title="script's base
  URL">base URL</a>, and if that succeeds, return the resulting
  <a href=#absolute-url>absolute URL</a>. If it fails, it must throw a
  <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception instead.</p>

  </div>


  <div class=impl>

  <h5 id=security-location><span class=secno>6.4.3.1 </span>Security</h5>

  <p id=security-3>User agents must raise a
  <code><a href=#security_err>SECURITY_ERR</a></code> exception whenever any of the members of a
  <code><a href=#location>Location</a></code> object are accessed by scripts whose
  <a href=#effective-script-origin>effective script origin</a> is not the <a href=#same-origin title="same
  origin">same</a> as the <code><a href=#location>Location</a></code> object's associated
  <code><a href=#document>Document</a></code>'s <a href=#effective-script-origin>effective script origin</a>, with
  the following exceptions:</p>

  <ul><li>The <code title=dom-location-href><a href=#dom-location-href>href</a></code> setter, if the
   script is running in a <a href=#browsing-context>browsing context</a> that is
   <a href=#allowed-to-navigate>allowed to navigate</a> the browsing context with which
   the <code><a href=#location>Location</a></code> object is associated

   <li>The <code title=dom-location-replace><a href=#dom-location-replace>replace()</a></code> method,
   if the script is running in a <a href=#browsing-context>browsing context</a> that is
   <a href=#allowed-to-navigate>allowed to navigate</a> the browsing context with which
   the <code><a href=#location>Location</a></code> object is associated

  </ul></div>


  <div class=impl>

  <h4 id=history-notes><span class=secno>6.4.4 </span>Implementation notes for session history</h4>
  <!-- don't change the ID without updating multiple internal links -->

  <p><i>This section is non-normative.</i></p>

  <p>The <code><a href=#history-0>History</a></code> interface is not meant to place
  restrictions on how implementations represent the session history to
  the user.</p>

  <p>For example, session history could be implemented in a tree-like
  manner, with each page having multiple "forward" pages. This
  specification doesn't define how the linear list of pages in the
  <code title=dom-history><a href=#dom-history>history</a></code> object are derived from the
  actual session history as seen from the user's perspective.</p>

  <p>Similarly, a page containing two <code><a href=#the-iframe-element>iframe</a></code>s has a <code title=dom-history><a href=#dom-history>history</a></code> object distinct from the
  <code><a href=#the-iframe-element>iframe</a></code>s' <code title=dom-history><a href=#dom-history>history</a></code>
  objects, despite the fact that typical Web browsers present the user
  with just one "Back" button, with a session history that interleaves
  the navigation of the two inner frames and the outer page.</p>

  <p><strong>Security</strong>: It is suggested that to avoid letting
  a page "hijack" the history navigation facilities of a UA by abusing
  <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code>, the UA
  provide the user with a way to jump back to the previous page
  (rather than just going back to the previous state). For example,
  the back button could have a drop down showing just the pages in the
  session history, and not showing any of the states. Similarly, an
  aural browser could have two "back" commands, one that goes back to
  the previous state, and one that jumps straight back to the previous
  page.</p>

  <p>In addition, a user agent could ignore calls to <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> that are invoked on
  a timer, or from event listeners that are not triggered in response
  to a clear user action, or that are invoked in rapid succession.</p>

  </div>


  <h3 id=browsing-the-web><span class=secno>6.5 </span>Browsing the Web</h3>

  <div class=impl>

  <h4 id=navigating-across-documents><span class=secno>6.5.1 </span>Navigating across documents</h4>

  <p>Certain actions cause the <a href=#browsing-context>browsing context</a> to
  <i><a href=#navigate>navigate</a></i> to a new resource. Navigation always involves
  <dfn id=source-browsing-context>source browsing context</dfn>, which is the browsing context
  which was responsible for starting the navigation.</p>

  <p class=example>For example, <a href=#following-hyperlinks title="following
  hyperlinks">following a hyperlink</a>, <a href=#concept-form-submit title=concept-form-submit>form submission</a>, and the <code title=dom-open><a href=#dom-open>window.open()</a></code> and <code title=dom-location-assign><a href=#dom-location-assign>location.assign()</a></code> methods can all
  cause a browsing context to navigate.</p>

  <p>A user agent may provide various ways for the user to explicitly
  cause a browsing context to navigate, in addition to those defined
  in this specification.</p>

  <!-- NAVIGATE <dfn>navigate</dfn> -->
  <p>When a browsing context is <dfn id=navigate title=navigate>navigated</dfn>
  to a new resource, the user agent must run the following steps:</p>

  <ol><li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>

   <li id=sandboxLinks>

    <p>If the <a href=#source-browsing-context>source browsing context</a> is not the same as
    the <a href=#browsing-context>browsing context</a> being navigated, and the
    <a href=#source-browsing-context>source browsing context</a> is not one of the <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
    contexts</a> of the <a href=#browsing-context>browsing context</a> being
    navigated, and the <a href=#browsing-context>browsing context</a> being navigated is
    not both a <a href=#top-level-browsing-context>top-level browsing context</a> and one of the
    <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
    contexts</a> of the <a href=#source-browsing-context>source browsing context</a>, and
    the <a href=#source-browsing-context>source browsing context</a> had its <a href=#sandboxed-navigation-browsing-context-flag>sandboxed
    navigation browsing context flag</a> set when its <a href=#active-document>active
    document</a> was created, then abort these steps.</p>

    <p>Otherwise, if the <a href=#browsing-context>browsing context</a> being navigated
    is a <a href=#top-level-browsing-context>top-level browsing context</a>, and is one of the
    <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
    contexts</a> of the <a href=#source-browsing-context>source browsing context</a>, and
    the <a href=#source-browsing-context>source browsing context</a> had its <a href=#sandboxed-top-level-navigation-browsing-context-flag>sandboxed
    top-level navigation browsing context flag</a> set when its
    <a href=#active-document>active document</a> was created, then abort these
    steps.</p>

    <p>In both cases, the user agent may additionally offer to open
    the new resource in a new <a href=#top-level-browsing-context>top-level browsing context</a>
    or in the <a href=#top-level-browsing-context>top-level browsing context</a> of the
    <a href=#source-browsing-context>source browsing context</a>, at the user's option, in
    which case the user agent must <a href=#navigate>navigate</a> that
    designated <a href=#top-level-browsing-context>top-level browsing context</a> to the new
    resource as if the user had requested it independently.</p>

   </li>

   <li id=seamlessLinks><p>If the <a href=#source-browsing-context>source browsing
   context</a> is the same as the <a href=#browsing-context>browsing context</a>
   being navigated, and this browsing context has its <a href=#seamless-browsing-context-flag>seamless
   browsing context flag</a> set, then find the nearest
   <a href=#ancestor-browsing-context>ancestor browsing context</a> that does not have its
   <a href=#seamless-browsing-context-flag>seamless browsing context flag</a> set, and continue these
   steps as if <em>that</em> <a href=#browsing-context>browsing context</a> was the one
   that was going to be <a href=#navigate title=navigate>navigated</a>
   instead.</li>

   <li><p>If there is a preexisting attempt to navigate the
   <a href=#browsing-context>browsing context</a>, and the <a href=#source-browsing-context>source browsing
   context</a> is the same as the <a href=#browsing-context>browsing context</a>
   being navigated, and that attempt is currently
   running the <a href=#unload-a-document>unload a document</a> algorithm, and the
   <a href=#origin>origin</a> of the <a href=#url>URL</a> of the resource being
   loaded in that navigation is not the <a href=#same-origin>same origin</a> as
   the <a href=#origin>origin</a> of the <a href=#url>URL</a> of the resource
   being loaded in <em>this</em> navigation, then abort these steps
   without affecting the preexisting attempt to navigate the
   <a href=#browsing-context>browsing context</a>.</li>
   <!-- http://www.hixie.ch/tests/adhoc/html/navigation/unload/ -->

   <li><p>If there is a preexisting attempt to navigate the
   <a href=#browsing-context>browsing context</a>, and either that attempt has not yet
   <a href=#concept-navigate-mature title=concept-navigate-mature>matured</a> (i.e. it has
   not passed the point of making its <code><a href=#document>Document</a></code> the
   <a href=#active-document>active document</a>), or that navigation's resource is not
   to be fetched using HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or equivalent</a>, or its
   resource's <a href=#absolute-url>absolute URL</a> differs from this attempt's by
   more than the presence, absence, or value of the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component, then cancel
   that preexisting attempt to navigate the <a href=#browsing-context>browsing
   context</a>.</li>

   <li id=navigate-fragid-step><p><i>Fragment identifiers</i>: If
   the <a href=#absolute-url>absolute URL</a> of the new resource is the same as
   the <a href="#the-document's-address" title="the document's address">address</a> of the
   <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing context</a>
   being navigated, ignoring any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> components of those
   <a href=#url title=URL>URLs</a>, and the new resource is to be
   fetched using HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   equivalent</a>, and the <a href=#absolute-url>absolute URL</a> of the new
   resource has a <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
   component (even if it is empty), then <a href=#scroll-to-fragid title=navigate-fragid>navigate to that fragment identifier</a>
   and abort these steps.</li>

   <li><p>Cancel <em>any</em> preexisting attempt to navigate the
   <a href=#browsing-context>browsing context</a>.</li>

   <li><p>If the new resource is to be handled using a mechanism that
   does not affect the browsing context, e.g. ignoring the navigation
   request altogether because the specified scheme is not one of the
   supported protocols, then abort these steps and proceed with that
   mechanism instead.</li>

   <li><p><a href=#prompt-to-unload-a-document title="prompt to unload a document">Prompt to
   unload</a> the <code><a href=#document>Document</a></code> object. If the user
   <a href=#refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be unloaded</a>, then
   these steps must be aborted.</li>

   <li>

    <p>If the new resource is to be handled by displaying some sort of
    inline content, e.g. an error message because the specified scheme
    is not one of the supported protocols, or an inline prompt to
    allow the user to select <a href=#dom-navigator-registerprotocolhandler title=dom-navigator-registerProtocolHandler>a registered
    handler</a> for the given scheme, then <a href=#read-ua-inline title=navigate-ua-inline>display the inline content</a> and
    abort these steps.</p>

    <p class=note>In the case of a registered handler being used,
    the algorithm will be reinvoked with a new URL to handle the
    request.</p>

   </li>

   <li>

    <p>If the new resource is to be fetched using HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or equivalent</a>, then
    check if there are any <a href=#relevant-application-cache title="relevant application
    cache">relevant application caches</a> that are identified by a
    URL with the <a href=#same-origin>same origin</a> as the URL in question, and
    that have this URL as one of their entries, excluding entries
    marked as <a href=#concept-appcache-foreign title=concept-appcache-foreign>foreign</a>. If so, then the
    user agent must then get the resource from the <a href=#concept-appcache-selection title=concept-appcache-selection>most appropriate application
    cache</a> of those that match.</p>

    <p class=example>For example, imagine an HTML page with an
    associated application cache displaying an image and a form, where
    the image is also used by several other application caches. If the
    user right-clicks on the image and chooses "View Image", then the
    user agent could decide to show the image from any of those
    caches, but it is likely that the most useful cache for the user
    would be the one that was used for the aforementioned HTML
    page. On the other hand, if the user submits the form, and the
    form does a POST submission, then the user agent will not use an
    application cache at all; the submission will be made to the
    network.</p>

    <p>Otherwise, unless it has already been obtained<!-- it's
    obtained by <object>, for instance -->, <a href=#fetch>fetch</a> the new
    resource, with the <i>manual redirect flag</i> set.</p>

    <p>If the resource is being fetched using a method other than one
    <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>equivalent to</a>
    HTTP's GET<!-- or HEAD (but that can't happen) -->, or, if the
    <a href=#navigate title=navigate>navigation algorithm</a> was invoked as
    a result of the <a href=#concept-form-submit title=concept-form-submit>form submission
    algorithm</a>, then the <a href=#fetch title=fetch>fetching
    algorithm</a> must be invoked from the <a href=#origin>origin</a> of
    the <a href=#active-document>active document</a> of the <a href=#source-browsing-context>source browsing
    context</a>, if any.</p> <!-- potentially http-origin privacy
    sensitive -->

    <p>If the <a href=#browsing-context>browsing context</a> being navigated is a
    <a href=#child-browsing-context>child browsing context</a> for an <code><a href=#the-iframe-element>iframe</a></code> or
    <code><a href=#the-object-element>object</a></code> element, then the <a href=#fetch title=fetch>fetching
    algorithm</a> must be invoked from the <code><a href=#the-iframe-element>iframe</a></code> or
    <code><a href=#the-object-element>object</a></code> element's <a href=#browsing-context-scope-origin>browsing context scope
    origin</a>, if it has one.</p> <!-- potentially http-origin
    privacy sensitive -->

   </li>

   <li>

    <p>At this point, unless this step has already been reached once
    before in the execution of this instance of the algorithm, the
    user agents must return to whatever algorithm invoked the
    navigation steps and must continue these steps asynchronously.</p>

   </li>

   <li>

    <p>If fetching the resource results in a redirect, and either the
    <a href=#url>URL</a> of the target of the redirect has the <a href=#same-origin>same
    origin</a> as the original resource, or the resource is being
    obtained using the POST method or a safe method (in HTTP terms),
    return to <a href=#navigate-fragid-step>the step labeled
    "fragment identifiers"</a> with the new resource.</p>

    <p>Otherwise, if fetching the resource results in a redirect but
    the <a href=#url>URL</a> of the target of the redirect does not have
    the <a href=#same-origin>same origin</a> as the original resource and the
    resource is being obtained using a method that is neither the POST
    method nor a safe method (in HTTP terms), then abort these
    steps. The user agent may indicate to the user that the navigation
    has been aborted for security reasons.</p>

   </li>

   <li><p>Wait for one or more bytes to be available or for the user
   agent to establish that the resource in question is empty. During
   this time, the user agent may allow the user to cancel this
   navigation attempt or start other navigation attempts.</li>

   <li>

    <p>If the resource was not fetched from an <a href=#application-cache>application
    cache</a>, and was to be fetched using HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or equivalent</a>, and its
    URL <a href=#concept-appcache-matches-fallback title=concept-appcache-matches-fallback>matches the
    fallback namespace</a> of one or more <a href=#relevant-application-cache title="relevant
    application cache">relevant application caches</a>, and the
    user didn't cancel the navigation attempt during the previous
    step, and the navigation attempt failed (e.g. the server returned
    a 4xx or 5xx status code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>, or
    there was a DNS error), then:</p> <!-- note that a redirect can
    never reach this point as it is handled earlier, meaning that a
    captive portal captures URLs in fallback namespaces and you can't
    ever get to the fallback file of a resource if you have a captive
    portal -->

    <p>Let <var title="">candidate</var> be the <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback resource</a>
    specified for the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a> in
    question. If multiple application caches match, the user agent
    must use the fallback of the <a href=#concept-appcache-selection title=concept-appcache-selection>most appropriate application
    cache</a> of those that match.</p>

    <p>If <var title="">candidate</var> is not marked as <a href=#concept-appcache-foreign title=concept-appcache-foreign>foreign</a>, then the user
    agent must discard the failed load and instead continue along
    these steps using <var title="">candidate</var> as the
    resource. <a href="#the-document's-address">The document's address</a>, if appropriate,
    will still be the originally requested URL, not the fallback URL,
    but the user agent may indicate to the user that the original page
    load failed, that the page used was a fallback resource, and what
    the URL of the fallback resource actually is.</p>

   </li>

   <li><p>If the document's out-of-band metadata (e.g. HTTP headers),
   not counting any <a href=#content-type title=Content-Type>type information</a>
   (such as the Content-Type HTTP header), requires some sort of
   processing that will not affect the browsing context, then perform
   that processing and abort these steps.</p>

   <div class=note>
    <p>Such processing might be triggered by, amongst other things, the
    following:</p>
    <ul class=brief><li>HTTP status codes (e.g. 204 No Content or 205 Reset Content)</li>
     <li>HTTP Content-Disposition headers</li>
     <li>Network errors</li>
    </ul></div>

    <!-- theorectically, HTTP 205 processing would occur here,
    resetting all forms with no other effect. However, it seems nobody
    actually wants to use this ability, so requiring it here seems
    like unnecessary work. -->

    <p>HTTP 401 responses that do not include a challenge recognized
    by the user agent must be processed as if they had no challenge,
    e.g. rendering the entity body as if the response had been 200
    OK.</p>

    <p>User agents may show the entity body of an HTTP 401 response
    even when the response do include a recognized challenge, with the
    option to login being included in a non-modal fashion, to enable
    the information provided by the server to be used by the user
    before authenticating. Similarly, user agents should allow the
    user to authenticate (in a non-modal fashion) against
    authentication challenges included in other responses such as HTTP
    200 OK responses, effectively allowing resources to present HTTP
    login forms without requiring their use.</p>

   </li>

   <li><p>Let <var title="">type</var> be <a href=#content-type-sniffing-0 title="Content-Type
   sniffing">the sniffed type of the resource</a>.</li>

   <li><p>If the user agent has been configured to process resources
   of the given <var title="">type</var> using some mechanism other
   than rendering the content in a <a href=#browsing-context>browsing context</a>, then
   skip this step. Otherwise, if the <var title="">type</var> is one
   of the following types, jump to the appropriate entry in the
   following list, and process the resource as described there:</p>

    <dl class=switch><!-- an <span>HTML MIME type</span> --><dt>"<code><a href=#text/html>text/html</a></code>"</dt>
     <dt>"<code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>"</dt>
     <dd>Follow the steps given in the <a href=#read-html title=navigate-html>HTML document</a> section, and abort
     these steps.</dd>

     <!-- an <span>XML MIME type</span> -->
     <dt>Any type ending in "<code title="">+xml</code>"</dt> <!-- no need to say that the _subtype_ ends in "+xml" so long as the "sniffed type" algorithm continues to drop parameters -->
     <dt>"<code>application/xml</code>"</dt>
     <dt>"<code>text/xml</code>"</dt>
     <dd>Follow the steps given in the <a href=#read-xml title=navigate-xml>XML
     document</a> section. If that section determines that the
     content is <em>not</em> to be displayed as a generic XML
     document, then proceed to the next step in this overall set of
     steps. Otherwise, abort these steps.</dd>

     <dt>"<code>text/plain</code>"</dt>
     <dd>Follow the steps given in the <a href=#read-text title=navigate-text>plain text file</a> section, and abort
     these steps.</dd>

     <dt>A supported image type</dt>
     <dd>Follow the steps given in the <a href=#read-image title=navigate-image>image</a> section, and abort these
     steps.</dd>

     <dt>A type that will use an external application to render the
     content in the <a href=#browsing-context>browsing context</a></dt>
     <dd>Follow the steps given in the <a href=#read-plugin title=navigate-plugin>plugin</a> section, and abort these
     steps.</dd>

    </dl><p><dfn id="set-the-document's-address" title="set the document's address">Setting the document's
    address</dfn>: If there is no <dfn id=override-url>override URL</dfn>, then any
    <code><a href=#document>Document</a></code> created by these steps must have its <a href="#the-document's-address" title="the document's address">address</a> set to the
    <a href=#url>URL</a> that was originally to be <a href=#fetch title=fetch>fetched</a>, ignoring any other data that was
    used to obtain the resource (e.g. the entity body in the case of a
    POST submission is not part of <a href="#the-document's-address">the document's
    address</a>, nor is the URL of the fallback resource in the
    case of the original load having failed and that URL having been
    found to match a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
    namespace</a>). However, if there <em>is</em> an <a href=#override-url>override
    URL</a>, then any <code><a href=#document>Document</a></code> created by these steps
    must have its <a href="#the-document's-address" title="the document's address">address</a>
    set to that <a href=#url>URL</a> instead.</p>

    <p class=note>An <a href=#override-url title="override URL">override URL</a>
    is set when <a href=#concept-js-deref title=concept-js-deref>dereferencing a
    <code>javascript:</code> URL</a>.</p>

    <p><dfn id=create-a-document-object title="create a Document object">Creating a new
    <code>Document</code> object</dfn>: When a <code><a href=#document>Document</a></code>
    is created as part of the above steps, a new <code><a href=#window>Window</a></code>
    object must be created and associated with the
    <code><a href=#document>Document</a></code>, with one exception: if the <a href=#browsing-context>browsing
    context</a>'s only entry in its <a href=#session-history>session history</a> is
    the <code><a href=#about:blank>about:blank</a></code> <code><a href=#document>Document</a></code> that was added
    when the <a href=#browsing-context>browsing context</a> was created, and navigation
    is occurring with <a href=#replacement-enabled>replacement enabled</a>, and that
    <code><a href=#document>Document</a></code> has the <a href=#same-origin>same origin</a> as the new
    <code><a href=#document>Document</a></code>, then the <code><a href=#window>Window</a></code> object of that
    <code><a href=#document>Document</a></code> must be used instead, and the <code title=dom-document><a href=#dom-document>document</a></code> attribute of the
    <code><a href=#window>Window</a></code> object must be changed to point to the new
    <code><a href=#document>Document</a></code> instead.</p>

   </li>

   <li id=navigate-non-Document>

    <p><i>Non-document content</i>: If, given <var title="">type</var>, the new resource is to be handled by
    displaying some sort of inline content, e.g. a native rendering of
    the content, an error message because the specified type is not
    supported, or an inline prompt to allow the user to select <a href=#dom-navigator-registercontenthandler title=dom-navigator-registerContentHandler>a registered
    handler</a> for the given type, then <a href=#read-ua-inline title=navigate-ua-inline>display the inline content</a> and
    abort these steps.</p>

    <p class=note>In the case of a registered handler being used,
    the algorithm will be reinvoked with a new URL to handle the
    request.</p>

   </li>

   <li><p>Otherwise, the document's <var title="">type</var> is such
   that the resource will not affect the browsing context,
   e.g. because the resource is to be handed to an external
   application. Process the resource appropriately.</p>

  </ol><hr><p>Some of the sections below, to which the above algorithm defers
  in certain cases, require the user agent to <dfn id=update-the-session-history-with-the-new-page>update the session
  history with the new page</dfn>. When a user agent is required to do
  this, it must <a href=#queue-a-task>queue a task</a> to run the following
  steps:</p>

  <ol><li><p><a href=#unload-a-document title="unload a document">Unload</a> the
   <code><a href=#document>Document</a></code> object of the <a href=#current-entry>current entry</a>,
   with the <var title="">recycle</var> parameter set to
   false.</li>

   <li>

    <dl><dt>If the navigation was initiated for <dfn id=entry-update>entry update</dfn> of
     an entry</dt>

     <dd>

      <ol><li><p>Replace the <code><a href=#document>Document</a></code> of the entry being
       updated, and any other entries that referenced the same
       document as that entry, with the new
       <code><a href=#document>Document</a></code>.</li>

       <li><p><a href=#traverse-the-history>Traverse the history</a> to the new
       entry.</li>

      </ol><p class=note>This can only happen if the entry being updated
      is no the <a href=#current-entry>current entry</a>, and can never happen with
      <a href=#replacement-enabled>replacement enabled</a>. (It happens when the user
      tried to traverse to a session history entry that no longer had
      a <code><a href=#document>Document</a></code> object.)</p>

     </dd>


     <dt>Otherwise</dt>

     <dd>

      <ol><li>

        <p>Remove all the entries in the <a href=#browsing-context>browsing
        context</a>'s <a href=#session-history>session history</a> after the
        <a href=#current-entry>current entry</a>. If the <a href=#current-entry>current entry</a>
        is the last entry in the session history, then no entries are
        removed.</p>

        <p class=note>This <a href=#history-notes>doesn't
        necessarily have to affect</a> the user agent's user
        interface.</p>

       </li>

       <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a>
       queued by the <a href=#history-traversal-task-source>history traversal task
       source</a>.</li> <!-- so the network is racing
       history.back(), in the case of setting location.href="" and
       then calling history.back() -->

       <li><p>Append a new entry at the end of the <code><a href=#history-0>History</a></code>
       object representing the new resource and its
       <code><a href=#document>Document</a></code> object and related state.</li>

       <li><p><a href=#traverse-the-history>Traverse the history</a> to the new entry. If
       the navigation was initiated with <a href=#replacement-enabled>replacement
       enabled</a>, then the traversal must itself be initiated
       with <a href=#replacement-enabled>replacement enabled</a>.</p>

       </li>

      </ol></dd>

    </dl></li>

   <li><p>The <a href=#navigate title=navigate>navigation algorithm</a> has
   now <dfn id=concept-navigate-mature title=concept-navigate-mature>matured</dfn>.</li>

   <li><p><i>Fragment identifier loop</i>: <a href=#spin-the-event-loop>Spin the event
   loop</a> for a user-agent-defined amount of time, as desired by
   the user agent implementor. (This is intended to allow the user
   agent to optimize the user experience in the face of performance
   concerns.)</li>

   <li><p>If the <code><a href=#document>Document</a></code> object has no parser, or its
   parser has <a href=#stop-parsing title="stop parsing">stopped parsing</a>, or
   the user agent has reason to believe the user is no longer
   interested in scrolling to the fragment identifier, then abort
   these steps.</li>

   <li><p><a href=#scroll-to-the-fragment-identifier>Scroll to the fragment identifier</a> given in
   <a href="#the-document's-current-address">the document's current address</a>. If this fails to find
   <a href=#the-indicated-part-of-the-document title="the indicated part of the document">an indicated part
   of the document</a>, then return to the <i>fragment identifier
   loop</i> step.</li>

  </ol><p>The <a href=#task-source>task source</a> for this <a href=#concept-task title=concept-task>task</a> is the <a href=#networking-task-source>networking task
  source</a>.</p>


  <h4 id=read-html><span class=secno>6.5.2 </span><dfn title=navigate-html>Page load processing model for HTML files</dfn></h4>

  <p>When an HTML document is to be loaded in a <a href=#browsing-context>browsing
  context</a>, the user agent must <a href=#queue-a-task>queue a task</a> to
  <a href=#create-a-document-object>create a <code>Document</code> object</a>, mark it as being
  an <a href=#html-documents title="HTML documents">HTML document</a>, create an
  <a href=#html-parser>HTML parser</a>, and associate it with the document. Each
  <a href=#concept-task title=concept-task>task</a> that the <a href=#networking-task-source>networking
  task source</a> places on the <a href=#task-queue>task queue</a> while the
  <a href=#fetch title=fetch>fetching algorithm</a> runs must then fill
  the parser's <a href=#the-input-stream>input stream</a> with the fetched bytes and
  cause the <a href=#html-parser>HTML parser</a> to perform the appropriate
  processing of the input stream.</p>

  <p class=note>The <a href=#the-input-stream>input stream</a> converts bytes into
  characters for use in the <a href=#tokenization title=tokenization>tokenizer</a>. This process relies, in part,
  on character encoding information found in the real <a href=#content-type title=Content-Type>Content-Type metadata</a> of the resource;
  the "sniffed type" is not used for this purpose.</p>

  <!-- next two paragraphs are nearly identical to the navigate-text
  section, keep them in sync -->

  <p>When no more bytes are available, the user agent must <a href=#queue-a-task>queue
  a task</a> for the parser to process the implied EOF character,
  which eventually causes a <code title=event-load>load</code> event
  to be fired.</p>

  <p>After creating the <code><a href=#document>Document</a></code> object, but before any
  script execution, certainly before the parser <a href=#stop-parsing title="stop
  parsing">stops</a>, the user agent must <a href=#update-the-session-history-with-the-new-page>update the session
  history with the new page</a>.</p>

  <p class=note><a href=#concept-appcache-init title=concept-appcache-init>Application
  cache selection</a> happens <a href=#parser-appcache>in the
  HTML parser</a>.</p>

  <p>The <a href=#task-source>task source</a> for the two tasks mentioned in this
  section must be the <a href=#networking-task-source>networking task source</a>.</p>



  <h4 id=read-xml><span class=secno>6.5.3 </span><dfn title=navigate-xml>Page load processing model for XML files</dfn></h4>

  <p>When faced with displaying an XML file inline, user agents must
  first <a href=#create-a-document-object>create a <code>Document</code> object</a>, following
  the requirements of the XML and Namespaces in XML recommendations,
  RFC 3023, DOM3 Core, and other relevant specifications. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a> <a href=#refsRFC3023>[RFC3023]</a> <a href=#refsDOMCORE>[DOMCORE]</a></p>

  <p>The actual HTTP headers and other metadata, not the headers as
  mutated or implied by the algorithms given in this specification,
  are the ones that must be used when determining the character
  encoding according to the rules given in the above
  specifications. Once the character encoding is established, the
  <a href="#document's-character-encoding">document's character encoding</a> must be set to that
  character encoding.</p>

  <p>If the root element, as parsed according to the XML
  specifications cited above, is found to be an <code><a href=#the-html-element-0>html</a></code>
  element with an attribute <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> whose value is not the
  empty string, then, as soon as the element is <a href=#insert-an-element-into-a-document title="insert an
  element into a document">inserted into the document</a>, the user
  agent must <a href=#resolve-a-url title="resolve a url">resolve</a> the value of
  that attribute relative to that element, and if that is successful,
  must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
  selection algorithm</a> with the resulting <a href=#absolute-url>absolute
  URL</a> with any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component removed as
  the manifest URL, and passing in the newly-created
  <code><a href=#document>Document</a></code>. Otherwise, if the attribute is absent, its
  value is the empty string, or resolving its value fails, then as
  soon as the root element is <a href=#insert-an-element-into-a-document title="insert an element into a
  document">inserted into the document</a>, the user agent must run
  the <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
  algorithm</a> with no manifest, and passing in the
  <code><a href=#document>Document</a></code>.</p>

  <p class=note>Because the processing of the <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute happens
  only once the root element is parsed, any URLs referenced by
  processing instructions before the root element (such as <code title="">&lt;?xml-stylesheet?&gt;</code> and <code title="">&lt;?xbl?&gt;</code> PIs) will be fetched from the network and
  cannot be cached.</p><!-- v2: fix this somehow -->

  <p>User agents may examine the namespace of the root
  <code><a href=#element>Element</a></code> node of this <code><a href=#document>Document</a></code> object to
  perform namespace-based dispatch to alternative processing tools,
  e.g. determining that the content is actually a syndication feed and
  passing it to a feed handler. If such processing is to take place,
  abort the steps in this section, and jump to <a href=#navigate-non-Document>the next step</a> (labeled
  "non-document content") in the <a href=#navigate>navigate</a> steps
  above.</p>

  <p>Otherwise, then, with the newly created <code><a href=#document>Document</a></code>,
  the user agents must <a href=#update-the-session-history-with-the-new-page>update the session history with the new
  page</a>. User agents may do this before the complete document
  has been parsed (thus achieving <i>incremental rendering</i>), and
  must do this before any scripts are to be executed.</p>

  <p>Error messages from the parse process (e.g. XML namespace
  well-formedness errors) may be reported inline by mutating the
  <code><a href=#document>Document</a></code>.</p>


  <h4 id=read-text><span class=secno>6.5.4 </span><dfn title=navigate-text>Page load processing model for text files</dfn></h4>

  <p>When a plain text document is to be loaded in a <a href=#browsing-context>browsing
  context</a>, the user agent should <a href=#queue-a-task>queue a task</a> to
  <a href=#create-a-document-object>create a <code>Document</code> object</a>, mark it as being
  an <a href=#html-documents title="HTML documents">HTML document</a>, create an
  <a href=#html-parser>HTML parser</a>, associate it with the document, act as if
  the tokenizer had emitted a start tag token with the tag name "pre"
  followed by a single U+000A LINE FEED (LF) character<!-- to get
  eaten, so that a leading LF in the text/plain stream doesn't get
  eaten itself-->, and switch the <a href=#html-parser>HTML parser</a>'s tokenizer
  to the <a href=#plaintext-state>PLAINTEXT state</a>.  Each <a href=#concept-task title=concept-task>task</a> that the <a href=#networking-task-source>networking task
  source</a> places on the <a href=#task-queue>task queue</a> while the <a href=#fetch title=fetch>fetching algorithm</a> runs must then fill the
  parser's <a href=#the-input-stream>input stream</a> with the fetched bytes and cause
  the <a href=#html-parser>HTML parser</a> to perform the appropriate processing
  of the input stream.</p>

  <p>The rules for how to convert the bytes of the plain text document
  into actual characters are defined in RFC 2046, RFC 2646, and
  subsequent versions thereof. <a href=#refsRFC2046>[RFC2046]</a> <a href=#refsRFC2646>[RFC2646]</a></p>

  <p>The <a href="#document's-character-encoding">document's character encoding</a> must be set to the
  character encoding used to decode the document.</p>

  <p>Upon creation of the <code><a href=#document>Document</a></code> object, the user agent
  must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
  selection algorithm</a> with no manifest, and passing in the
  newly-created <code><a href=#document>Document</a></code>.</p>

  <!-- next two paragraphs are nearly identical to the navigate-html
  section and similar to the "navigate-ua-inline" section, and the
  next three are similar to the navigate-image and navigate-plugin
  sections; keep them all in sync -->

  <p>When no more bytes are available, the user agent must <a href=#queue-a-task>queue
  a task</a> for the parser to process the implied EOF character,
  which eventually causes a <code title=event-load>load</code> event
  to be fired.</p>

  <p>After creating the <code><a href=#document>Document</a></code> object, but potentially
  before the page has finished parsing, the user agent must
  <a href=#update-the-session-history-with-the-new-page>update the session history with the new page</a>.</p>

  <p>User agents may add content to the <code><a href=#the-head-element-0>head</a></code> element of
  the <code><a href=#document>Document</a></code>, e.g. linking to a style sheet or an XBL
  binding, providing script, giving the document a <code><a href=#the-title-element-0>title</a></code>,
  etc.</p>

  <p>The <a href=#task-source>task source</a> for the two tasks mentioned in this
  section must be the <a href=#networking-task-source>networking task source</a>.</p>


  <h4 id=read-image><span class=secno>6.5.5 </span><dfn title=navigate-image>Page load processing model for images</dfn></h4>

  <p>When an image resource is to be loaded in a <a href=#browsing-context>browsing
  context</a>, the user agent should <a href=#create-a-document-object>create a
  <code>Document</code> object</a>, mark it as being an <a href=#html-documents title="HTML documents">HTML document</a>, append an
  <code><a href=#the-html-element-0>html</a></code> element to the <code><a href=#document>Document</a></code>, append a
  <code><a href=#the-head-element-0>head</a></code> element and a <code><a href=#the-body-element-0>body</a></code> element to the
  <code><a href=#the-html-element-0>html</a></code> element, append an <code><a href=#the-img-element>img</a></code> to the
  <code><a href=#the-body-element-0>body</a></code> element, and set the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute of the <code><a href=#the-img-element>img</a></code>
  element to the address of the image.</p>

  <!-- next three paragraphs are similar to the navigate-text section,
  keep them in sync -->

  <p>Then, the user agent must act as if it had <a href=#stop-parsing title="stop
  parsing">stopped parsing</a>.</p>

  <p>Upon creation of the <code><a href=#document>Document</a></code> object, the user agent
  must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
  selection algorithm</a> with no manifest, and passing in the
  newly-created <code><a href=#document>Document</a></code>.</p>

  <p>After creating the <code><a href=#document>Document</a></code> object, but potentially
  before the page has finished fully loading, the user agent must
  <a href=#update-the-session-history-with-the-new-page>update the session history with the new page</a>.</p>

  <p>User agents may add content to the <code><a href=#the-head-element-0>head</a></code> element of
  the <code><a href=#document>Document</a></code>, or attributes to the <code><a href=#the-img-element>img</a></code>
  element, e.g. to link to a style sheet or an XBL binding, to provide
  a script, to give the document a <code><a href=#the-title-element-0>title</a></code>, etc.</p>


  <h4 id=read-plugin><span class=secno>6.5.6 </span><dfn title=navigate-plugin>Page load processing model for content that uses plugins</dfn></h4>

  <p>When a resource that requires an external resource to be rendered
  is to be loaded in a <a href=#browsing-context>browsing context</a>, the user agent
  should <a href=#create-a-document-object>create a <code>Document</code> object</a>, mark it
  as being an <a href=#html-documents title="HTML documents">HTML document</a>,
  append an <code><a href=#the-html-element-0>html</a></code> element to the <code><a href=#document>Document</a></code>,
  append a <code><a href=#the-head-element-0>head</a></code> element and a <code><a href=#the-body-element-0>body</a></code> element
  to the <code><a href=#the-html-element-0>html</a></code> element, append an <code><a href=#the-embed-element>embed</a></code> to
  the <code><a href=#the-body-element-0>body</a></code> element, and set the <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute of the
  <code><a href=#the-embed-element>embed</a></code> element to the address of the resource.</p>

  <!-- next three paragraphs are similar to the navigate-text section,
  keep them in sync -->

  <p>Then, the user agent must act as if it had <a href=#stop-parsing title="stop
  parsing">stopped parsing</a>.</p>

  <p>Upon creation of the <code><a href=#document>Document</a></code> object, the user agent
  must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
  selection algorithm</a> with no manifest, and passing in the
  newly-created <code><a href=#document>Document</a></code>.</p>

  <p>After creating the <code><a href=#document>Document</a></code> object, but potentially
  before the page has finished fully loading, the user agent must
  <a href=#update-the-session-history-with-the-new-page>update the session history with the new page</a>.</p>

  <p>User agents may add content to the <code><a href=#the-head-element-0>head</a></code> element of
  the <code><a href=#document>Document</a></code>, or attributes to the <code><a href=#the-embed-element>embed</a></code>
  element, e.g. to link to a style sheet or an XBL binding, or to give
  the document a <code><a href=#the-title-element-0>title</a></code>.</p>

  <p class=note id=sandboxPluginNavigate>If the <a href=#sandboxed-plugins-browsing-context-flag>sandboxed
  plugins browsing context flag</a> was set on the <a href=#browsing-context>browsing
  context</a> when the <code><a href=#document>Document</a></code> was created, the
  synthesized <code><a href=#the-embed-element>embed</a></code> element will <a href=#sandboxPluginEmbed>fail to render the content</a>.</p>


  <h4 id=read-ua-inline><span class=secno>6.5.7 </span><dfn title=navigate-ua-inline>Page load processing model for inline content that doesn't have a DOM</dfn></h4>

  <p>When the user agent is to display a user agent page inline in a
  <a href=#browsing-context>browsing context</a>, the user agent should <a href=#create-a-document-object>create a
  <code>Document</code> object</a>, mark it as being an <a href=#html-documents title="HTML documents">HTML document</a>, and then either
  associate that <code><a href=#document>Document</a></code> with a custom rendering that is
  not rendered using the normal <code><a href=#document>Document</a></code> rendering rules,
  or mutate that <code><a href=#document>Document</a></code> until it represents the content
  the user agent wants to render.</p>

  <!-- next two paragraphs are similar to the navigate-text section,
  keep them in sync -->

  <p>Once the page has been set up, the user agent must act as if it
  had <a href=#stop-parsing title="stop parsing">stopped parsing</a>.</p>

  <p>Upon creation of the <code><a href=#document>Document</a></code> object, the user agent
  must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
  selection algorithm</a> with no manifest, passing in the
  newly-created <code><a href=#document>Document</a></code>.</p>

  <p>After creating the <code><a href=#document>Document</a></code> object, but potentially
  before the page has been completely set up, the user agent must
  <a href=#update-the-session-history-with-the-new-page>update the session history with the new page</a>.</p>



  <h4 id=scroll-to-fragid><span class=secno>6.5.8 </span><dfn title=navigate-fragid>Navigating to a fragment identifier</dfn></h4>

  <p>When a user agent is supposed to navigate to a fragment
  identifier, then the user agent must <a href=#queue-a-task>queue a task</a> to
  run the following steps:</p>

  <ol><li>

    <p>Remove all the entries in the <a href=#browsing-context>browsing context</a>'s
    <a href=#session-history>session history</a> after the <a href=#current-entry>current
    entry</a>. If the <a href=#current-entry>current entry</a> is the last entry
    in the session history, then no entries are removed.</p>

    <p class=note>This <a href=#history-notes>doesn't necessarily
    have to affect</a> the user agent's user interface.</p>

   </li>

   <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a> queued by
   the <a href=#history-traversal-task-source>history traversal task source</a>.</li>

   <li><p>Append a new entry at the end of the <code><a href=#history-0>History</a></code>
   object representing the new resource and its <code><a href=#document>Document</a></code>
   object and related state. Its <a href=#url>URL</a> must be set to the
   address to which the user agent was <a href=#navigate title=navigate>navigating</a>. The title must be left
   unset.</li>

   <li><p><a href=#traverse-the-history>Traverse the history</a> to the new entry. This
   will <a href=#scroll-to-the-fragment-identifier>scroll to the fragment identifier</a> given in what
   is now <a href="#the-document's-current-address">the document's current address</a>.</li>

  </ol><p class=note>If the scrolling fails because the relevant ID has
  not yet been parsed, then the original <a href=#navigate title=navigate>navigation</a> algorithm will take care of the
  scrolling instead, as the last few steps of its <a href=#update-the-session-history-with-the-new-page>update the
  session history with the new page</a> algorithm.</p>

  <hr><p>When the user agent is required to <dfn id=scroll-to-the-fragment-identifier>scroll to the fragment
  identifier</dfn>, it must change the scrolling position of the
  document, or perform some other action, such that <a href=#the-indicated-part-of-the-document>the
  indicated part of the document</a> is brought to the user's
  attention. If there is no indicated part, then the user agent must
  not scroll anywhere.</p>

  <p><dfn id=the-indicated-part-of-the-document>The indicated part of the document</dfn> is the one that the
  fragment identifier, if any, identifies. The semantics of the
  fragment identifier in terms of mapping it to a specific DOM Node is
  defined by the specification that defines the <a href=#mime-type>MIME type</a>
  used by the <code><a href=#document>Document</a></code> (for example, the processing of
  fragment identifiers for <a href=#xml-mime-type title="XML MIME type">XML MIME
  types</a> is the responsibility of RFC3023). <a href=#refsRFC3023>[RFC3023]</a></p>

  <p>For HTML documents (and <a href=#html-mime-type title="HTML MIME type">HTML MIME
  types</a>), the following processing model must be followed to
  determine what <a href=#the-indicated-part-of-the-document>the indicated part of the document</a>
  is.</p>

  <ol><li><p><a href=#parse-a-url title="parse a url">Parse</a> the <a href=#url>URL</a>,
   and let <var title="">fragid</var> be the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component of the
   URL.</li><!-- parsing can't fail, since we checked earlier on
   when navigating -->

   <li><p>If <var title="">fragid</var> is the empty string, then
   <a href=#the-indicated-part-of-the-document>the indicated part of the document</a> is the top of the
   document; stop the algorithm here.</li>

   <li><p>Let <var title="">decoded fragid</var> be the result of
   expanding any sequences of percent-encoded octets in <var title="">fragid</var> that are valid UTF-8 sequences into Unicode
   characters as defined by UTF-8. If any percent-encoded octets in
   that string are not valid UTF-8 sequences, then skip this step and
   the next one.</p>

   <li><p>If this step was not skipped and there is an element in the
   DOM that has an ID exactly equal to <var title="">decoded
   fragid</var>, then the first such element in tree order is
   <a href=#the-indicated-part-of-the-document>the indicated part of the document</a>; stop the algorithm
   here.</li>

   <li><p>If there is an <code><a href=#the-a-element>a</a></code> element in the DOM that has a
   <code title=attr-a-name><a href=#attr-a-name>name</a></code> attribute whose value is
   exactly equal to <var title="">fragid</var> (<em>not</em> <var title="">decoded fragid</var>), then the first such element in tree
   order is <a href=#the-indicated-part-of-the-document>the indicated part of the document</a>; stop the
   algorithm here.</li>

   <li><p>If <var title="">fragid</var> is an <a href=#ascii-case-insensitive>ASCII
   case-insensitive</a> match for the string <code title="">top</code>, then <a href=#the-indicated-part-of-the-document>the indicated part of the
   document</a> is the top of the document; stop the algorithm
   here.</li>

   <li><p>Otherwise, there is no <a href=#the-indicated-part-of-the-document title="the indicated part of
   the document">indicated part of the document</a>.</li>

  </ol><p>For the purposes of the interaction of HTML with Selectors' <code title=selector-target>:target</code> pseudo-class, the
  <dfn id=target-element><i>target element</i></dfn> is <a href=#the-indicated-part-of-the-document>the indicated part of the
  document</a>, if that is an element; otherwise there is no
  <i><a href=#target-element>target element</a></i>. <a href=#refsSELECTORS>[SELECTORS]</a></p>

  </div>



  <h4 id=history-traversal><span class=secno>6.5.9 </span>History traversal</h4> <!-- session history -->

  <div class=impl>

  <p>When a user agent is required to <dfn id=traverse-the-history>traverse the history</dfn>
  to a <i>specified entry</i>, optionally with <a href=#replacement-enabled>replacement
  enabled</a>, the user agent must act as follows:</p>

  <ol><li><p>If there is no longer a <code><a href=#document>Document</a></code> object for the
   entry in question, the user agent must <a href=#navigate>navigate</a> the
   browsing context to the location for that entry to perform an
   <a href=#entry-update>entry update</a> of that entry, and abort these steps. The
   "<a href=#navigate>navigate</a>" algorithm reinvokes this "traverse"
   algorithm to complete the traversal, at which point there
   <em>is</em> a <code><a href=#document>Document</a></code> object and so this step gets
   skipped. The navigation must be done using the same <a href=#source-browsing-context>source
   browsing context</a> as was used the first time this entry was
   created. (This can never happen with <a href=#replacement-enabled>replacement
   enabled</a>.)</li>

   <li><p>If the <a href=#current-entry>current entry</a>'s title was not set by the
   <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> or <code title=dom-history-replaceState><a href=#dom-history-replacestate>replaceState()</a></code> methods,
   then set its title to the value returned by the <code title=dom-document-title><a href=#document.title>document.title</a></code> IDL
   attribute.</li>

   <li>

    <p>If appropriate, update the <a href=#current-entry>current entry</a> in the
    <a href=#browsing-context>browsing context</a>'s <code><a href=#document>Document</a></code> object's
    <code><a href=#history-0>History</a></code> object to reflect any state that the user
    agent wishes to persist. The entry is then said to be <dfn id=an-entry-with-persisted-user-state>an
    entry with persisted user state</dfn>.</p>

    <p class=example>For example, some user agents might want to
    persist the scroll position, or the values of form controls.</p>

   </li>

   <li><p>If the <i>specified entry</i> has a different
   <code><a href=#document>Document</a></code> object than the <a href=#current-entry>current entry</a>
   then the user agent must run the following substeps:</p>

    <ol><li>If the browsing context is a <a href=#top-level-browsing-context>top-level browsing
     context</a>, but not an <a href=#auxiliary-browsing-context>auxiliary browsing
     context</a>, and the <a href=#origin>origin</a> of the
     <code><a href=#document>Document</a></code> of the <i>specified entry</i> is not the
     <a href=#same-origin title="same origin">same</a> as the <a href=#origin>origin</a>
     of the <code><a href=#document>Document</a></code> of the <a href=#current-entry>current entry</a>,
     then the following sub-sub-steps must be run:

      <ol><li>The current <a href=#browsing-context-name>browsing context name</a> must be
       stored with all the entries in the history that are associated
       with <code><a href=#document>Document</a></code> objects with the <a href=#same-origin>same
       origin</a> as the <a href=#active-document>active document</a> <em>and</em>
       that are contiguous with the <a href=#current-entry>current entry</a>.</li>

       <li id=resetBCName>The browsing context's <a href=#browsing-context-name>browsing
       context name</a> must be unset.</li>

      </ol></li>

     <li id=appcache-history-2>The user agent must make the
     <i>specified entry</i>'s <code><a href=#document>Document</a></code> object the
     <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
     context</a>.</li>

     <li>If the <i>specified entry</i> has a <a href=#browsing-context-name>browsing
     context name</a> stored with it, then the following
     sub-sub-steps must be run:

      <ol><li>The browsing context's <a href=#browsing-context-name>browsing context name</a>
       must be set to the name stored with the specified entry.</li>

       <li>Any <a href=#browsing-context-name>browsing context name</a> stored with the
       entries in the history that are associated with
       <code><a href=#document>Document</a></code> objects with the <a href=#same-origin>same origin</a>
       as the new <a href=#active-document>active document</a>, and that are
       contiguous with the specified entry, must be cleared.</li>

      </ol></li>

     <li id=history-autocomplete><p>If the <i>specified entry</i>'s
     <code><a href=#document>Document</a></code> has any <code><a href=#the-input-element>input</a></code> elements whose
     <a href=#resulting-autocompletion-state>resulting autocompletion state</a> is <i title="">off</i>, invoke the <a href=#concept-form-reset-control title=concept-form-reset-control>reset algorithm</a> of each
     of those elements.</li>

     <li><p>If the <a href=#current-document-readiness>current document readiness</a> of the
     <i>specified entry</i>'s <code><a href=#document>Document</a></code> is "complete",
     <a href=#queue-a-task>queue a task</a> to fire a <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code> event at the
     <code><a href=#window>Window</a></code> object of that <code><a href=#document>Document</a></code>, but
     with its <code title=dom-event-target><a href=#dom-event-target>target</a></code> set to the
     <code><a href=#document>Document</a></code> object (and the <code title=dom-event-currentTarget>currentTarget</code> set to the
     <code><a href=#window>Window</a></code> object), using the
     <code><a href=#pagetransitionevent>PageTransitionEvent</a></code> interface, with the <code title=dom-PageTransitionEvent-persisted><a href=#dom-pagetransitionevent-persisted>persisted</a></code>
     attribute set to true. This event must not bubble, must not be
     cancelable, and has no default action.</li>

    </ol></li>

   <li><p>Set <a href="#the-document's-current-address">the document's current address</a> to the URL
   of the <i>specified entry</i>.</li>

   <li><p>If the <i>specified entry</i> has a URL that differs from
   the <a href=#current-entry>current entry</a>'s only by its fragment identifier,
   and the two share the same <code><a href=#document>Document</a></code> object, then let
   <var title="">hash changed</var> be true, and let <var title="">old
   URL</var> be the URL of the <a href=#current-entry>current entry</a> and <var title="">new URL</var> be the URL of the <i>specified
   entry</i>. Otherwise, let <var title="">hash changed</var> be
   false.</li>

   <li><p>If the traversal was initiated with <dfn id=replacement-enabled>replacement
   enabled</dfn>, remove the entry immediately before the
   <var title="">specified entry</var> in the session history.</p>

   <li><p>If the <i>specified entry</i> is not <a href=#an-entry-with-persisted-user-state>an entry with
   persisted user state</a>, but its URL has a fragment identifier,
   <a href=#scroll-to-the-fragment-identifier>scroll to the fragment identifier</a>.</li>

   <li><p>If the entry is <a href=#an-entry-with-persisted-user-state>an entry with persisted user
   state</a>, the user agent may update aspects of the document and
   its rendering, for instance the scroll position or values of form
   fields, that it had previously recorded.</li>

   <li>

    <p>If the <i>specified entry</i> is a state object or the first
    entry for a <code><a href=#document>Document</a></code>, the user agent must run the
    following substeps:</p>

    <ol><li><p>If the entry is a <a href=#state-object>state object</a> entry, let <var title="">state</var> be a <a href=#structured-clone>structured clone</a> of that
     state object. Otherwise, let <var title="">state</var> be
     null.</li>

     <li>

      <p>Run the appropriate steps according to the conditions
      described:</p>

      <dl class=switch><dt>If the <a href=#current-document-readiness>current document readiness</a> is set to the
       string "complete"</dt>

       <dd><p><a href=#queue-a-task>Queue a task</a> to fire a <code title=event-popstate><a href=#event-popstate>popstate</a></code> event at the
       <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code>, using
       the <code><a href=#popstateevent>PopStateEvent</a></code> interface, with the <code title=dom-PopStateEvent-state><a href=#dom-popstateevent-state>state</a></code> attribute set to
       the value of <var title="">state</var>. This event must bubble
       but not be cancelable and has no default action.</dd>

       <dt>Otherwise</dt>

       <dd><p>Let the <code><a href=#document>Document</a></code>'s <dfn id=pending-state-object>pending state
       object</dfn> be <var title="">state</var>. (If there was already
       a <a href=#pending-state-object>pending state object</a>, the previous one is
       discarded.)</p>

       <p class=note>The event will then be fired just after the <code title=event-load>load</code> event.</dd>

      </dl></li>

    </ol></li>

   <li><p>If <var title="">hash changed</var> is true, then
   <a href=#queue-a-task>queue a task</a> to fire a <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code> event at the
   <a href=#browsing-context>browsing context</a>'s <code><a href=#window>Window</a></code> object, using
   the <code><a href=#hashchangeevent>HashChangeEvent</a></code> interface, with the <code title=dom-HashChangeEvent-oldURL><a href=#dom-hashchangeevent-oldurl>oldURL</a></code> attribute set to
   <var title="">old URL</var> and the <code title=dom-HashChangeEvent-newURL><a href=#dom-hashchangeevent-newurl>newURL</a></code> attribute set to
   <var title="">new URL</var>. This event must bubble but not be
   cancelable and has no default action.</li>

   <li><p>The <a href=#current-entry>current entry</a> is now the <i>specified
   entry</i>.</li>

  </ol><p>The <a href=#pending-state-object>pending state object</a> must be initially null.</p>

  <p>The <a href=#task-source>task source</a> for the tasks mentioned above is the
  <a href=#dom-manipulation-task-source>DOM manipulation task source</a>.</p>


  <h5 id=event-definitions><span class=secno>6.5.9.1 </span>Event definitions</h5>

  </div>

  <p>The <dfn id=event-popstate title=event-popstate><code>popstate</code></dfn> event
  is fired when navigating to a <a href=#session-history-entry>session history entry</a>
  that represents a state object.</p>

  <pre class=idl>interface <dfn id=popstateevent>PopStateEvent</dfn> : <a href=#event>Event</a> {
  readonly attribute any <a href=#dom-popstateevent-state title=dom-PopStateEvent-state>state</a>;
  void <a href=#dom-popstateevent-initpopstateevent title=dom-PopStateEvent-initPopStateEvent>initPopStateEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any stateArg);
};</pre>

  <dl class=domintro><dt><var title="">event</var> . <code title=dom-PopStateEvent-state><a href=#dom-popstateevent-state>state</a></code></dt>

   <dd>

    <p>Returns a copy of the information that was provided to <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> or <code title=dom-history-replaceState><a href=#dom-history-replacestate>replaceState()</a></code>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-popstateevent-initpopstateevent title=dom-PopStateEvent-initPopStateEvent><code>initPopStateEvent()</code></dfn>
  method must initialize the event in a manner analogous to the
  similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

  <p>The <dfn id=dom-popstateevent-state title=dom-PopStateEvent-state><code>state</code></dfn>
  attribute represents the context information for the event, or null,
  if the state represented is the initial state of the
  <code><a href=#document>Document</a></code>.</p>

  </div>

  <hr><p>The <dfn id=event-hashchange title=event-hashchange><code>hashchange</code></dfn>
  event is fired when navigating to a <a href=#session-history-entry>session history
  entry</a> whose <a href=#url>URL</a> differs from that of the
  previous one only in the fragment identifier.</p>

  <pre class=idl>interface <dfn id=hashchangeevent>HashChangeEvent</dfn> : <a href=#event>Event</a> {
  readonly attribute any <a href=#dom-hashchangeevent-oldurl title=dom-HashChangeEvent-oldURL>oldURL</a>;
  readonly attribute any <a href=#dom-hashchangeevent-newurl title=dom-HashChangeEvent-newURL>newURL</a>;
  void <a href=#dom-hashchangeevent-inithashchangeevent title=dom-HashChangeEvent-initHashChangeEvent>initHashChangeEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString oldURLArg, in DOMString newURLArg);
};</pre>

  <dl class=domintro><dt><var title="">event</var> . <code title=dom-HashChangeEvent-oldURL><a href=#dom-hashchangeevent-oldurl>oldURL</a></code></dt>

   <dd>

    <p>Returns the <a href=#url>URL</a> of the <a href=#session-history-entry>session history
    entry</a> that was previously current.</p>

   </dd>


   <dt><var title="">event</var> . <code title=dom-HashChangeEvent-newURL><a href=#dom-hashchangeevent-newurl>newURL</a></code></dt>

   <dd>

    <p>Returns the <a href=#url>URL</a> of the <a href=#session-history-entry>session history
    entry</a> that is now current.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-hashchangeevent-inithashchangeevent title=dom-HashChangeEvent-initHashChangeEvent><code>initHashChangeEvent()</code></dfn>
  method must initialize the event in a manner analogous to the
  similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

  <p>The <dfn id=dom-hashchangeevent-oldurl title=dom-HashChangeEvent-oldURL><code>oldURL</code></dfn>
  attribute represents context information for the event, specifically
  the URL of the <a href=#session-history-entry>session history entry</a> that was traversed
  from.</p>

  <p>The <dfn id=dom-hashchangeevent-newurl title=dom-HashChangeEvent-newURL><code>newURL</code></dfn>
  attribute represents context information for the event, specifically
  the URL of the <a href=#session-history-entry>session history entry</a> that was traversed
  to.</p>

  </div>

  <hr><p>The <dfn id=event-pageshow title=event-pageshow><code>pageshow</code></dfn> event
  is fired when traversing <em>to</em> a <a href=#session-history-entry>session history
  entry</a>.</p>

  <p>The <dfn id=event-pagehide title=event-pagehide><code>pagehide</code></dfn>
  event is fired when traversing <em>from</em> a <a href=#session-history-entry>session history
  entry</a>.</p>

  <pre class=idl>interface <dfn id=pagetransitionevent>PageTransitionEvent</dfn> : <a href=#event>Event</a> {
  readonly attribute any <a href=#dom-pagetransitionevent-persisted title=dom-PageTransitionEvent-persisted>persisted</a>;
  void <a href=#dom-pagetransitionevent-initpagetransitionevent title=dom-PageTransitionEvent-initPageTransitionEvent>initPageTransitionEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any persistedArg);
};</pre>

  <dl class=domintro><dt><var title="">event</var> . <code title=dom-PageTransitionEvent-persisted><a href=#dom-pagetransitionevent-persisted>persisted</a></code></dt>

   <dd>

    <p>Returns false if the page is newly being loaded (and the <code title=event-load>load</code> event will fire). Otherwise, returns true.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-pagetransitionevent-initpagetransitionevent title=dom-PageTransitionEvent-initPageTransitionEvent><code>initPageTransitionEvent()</code></dfn>
  method must initialize the event in a manner analogous to the
  similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

  <p>The <dfn id=dom-pagetransitionevent-persisted title=dom-PageTransitionEvent-persisted><code>persisted</code></dfn>
  attribute represents the context information for the event.</p>

  </div>



  <h4 id=unloading-documents><span class=secno>6.5.10 </span>Unloading documents</h4>

  <div class=impl>

  <p>A <code><a href=#document>Document</a></code> has a <var title=concept-document-salvageable>salvageable</var> state, which
  is initially true.</p>

  <p>When a user agent is to <dfn id=prompt-to-unload-a-document>prompt to unload a document</dfn>,
  it must run the following steps.</p>

  <ol><li><p>Let <var title="">event</var> be a new
   <code><a href=#beforeunloadevent>BeforeUnloadEvent</a></code> event object with the name <code title=event-beforeunload>beforeunload</code>, which does not
   bubble but is cancelable.</li>

   <li><p><i>Dispatch</i>: Dispatch <var title="">event</var> at the
   <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object.</li>

   <li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>

   <li><p>If any event listeners were triggered by the earlier
   <i>dispatch</i> step, then set the <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state to
   false.</li>

   <li>

    <p>If the <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code>
    attribute of the <var title="">event</var> object is not the empty
    string, or if the event was canceled, then the user agent should
    ask the user to confirm that they wish to unload the document.</p>

    <p>The prompt shown by the user agent may include the string of
    the <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code>
    attribute, or some leading subset thereof. (A user agent may want
    to truncate the string to 1024 characters for display, for
    instance.)</p>

    <p>The user agent must <a href=#pause>pause</a> while waiting for the
    user's response.</p>

    <p>If the user did not confirm the page navigation, then the user
    agent <dfn id=refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be unloaded</dfn>.</p>

   </li>

   <li><p>If this algorithm was invoked by another instance of the
   "prompt to unload a document" algorithm (i.e. through the steps
   below that invoke this algorithm for all descendant browsing
   contexts), then abort these steps here.</li>

   <li><p>Let <var title="">descendants</var> be the <a href=#list-of-the-descendant-browsing-contexts>list of the
   descendant browsing contexts</a> of the
   <code><a href=#document>Document</a></code>.</li>

   <li>

    <p>If <var title="">descendants</var> is not an empty list, then
    for each <a href=#browsing-context>browsing context</a> <var title="">b</var> in
    <var title="">descendants</var> run the following substeps:</p>

    <ol><li><p><a href=#prompt-to-unload-a-document title="prompt to unload a document">Prompt to
     unload</a> the <a href=#active-document>active document</a> of the
     <a href=#browsing-context>browsing context</a> <var title="">b</var>. If the user
     <a href=#refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be unloaded</a>, then
     the user implicitly also <a href=#refused-to-allow-the-document-to-be-unloaded title="refused to allow the
     document to be unloaded">refused to allow <em>this</em> document
     to be unloaded</a>; abort these steps.</p>

     <li><p>If <var title=concept-document-salvageable>salvageable</var> state of
     the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
     context</a> <var title="">b</var> is false, then set the <var title=concept-document-salvageable>salvageable</var> state of
     <em>this</em> document to false also.</li>

    </ol></li>

  </ol><p>When a user agent is to <dfn id=unload-a-document>unload a document</dfn>, it must run
  the following steps. These steps are passed an argument, <var title="">recycle</var>, which is either true or false, indicating
  whether the <code><a href=#document>Document</a></code> object is going to be
  re-used. (This is set by the <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> method.)</p>

  <ol><li><p>Fire a <code title=event-pagehide><a href=#event-pagehide>pagehide</a></code> event at
   the <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code>, but
   with its <code title=dom-event-target><a href=#dom-event-target>target</a></code> set to the
   <code><a href=#document>Document</a></code> object (and the <code title=dom-event-currentTarget>currentTarget</code> set to the
   <code><a href=#window>Window</a></code> object), using the
   <code><a href=#pagetransitionevent>PageTransitionEvent</a></code> interface, with the <code title=dom-PageTransitionEvent-persisted><a href=#dom-pagetransitionevent-persisted>persisted</a></code>
   attribute set to true. This event must not bubble, must not be
   cancelable, and has no default action.</li>

   <li><p><i>Unload event</i>: <a href=#fire-a-simple-event>Fire a simple event</a> named
   <code title=event-unload>unload</code> at the
   <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object.</li>

   <li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>

   <li><p>If any event listeners were triggered by the earlier
   <i>unload event</i> step, then set the <code><a href=#document>Document</a></code>
   object's <var title=concept-document-salvageable>salvageable</var> state to
   false.</li>

   <li><p>Run any <a href=#unloading-document-cleanup-steps>unloading document cleanup steps</a> for
   <code><a href=#document>Document</a></code> that are defined by this specification or any
   other relevant specifications.</li>

   <li><p>If this algorithm was invoked by another instance of the
   "unload a document" algorithm (i.e. through the steps below that
   invoke this algorithm for all descendant browsing contexts), then
   abort these steps here.</li>

   <li><p>Let <var title="">descendants</var> be the <a href=#list-of-the-descendant-browsing-contexts>list of the
   descendant browsing contexts</a> of the
   <code><a href=#document>Document</a></code>.</li>

   <li>

    <p>If <var title="">descendants</var> is not an empty list, then
    for each <a href=#browsing-context>browsing context</a> <var title="">b</var> in
    <var title="">descendants</var> run the following substeps:</p>

    <ol><li><p><a href=#unload-a-document title="unload a document">Unload</a> the
     <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing context</a>
     <var title="">b</var> with the <var title="">recycle</var>
     parameter set to false.</li>

     <li><p>If <var title=concept-document-salvageable>salvageable</var> state of
     the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
     context</a> <var title="">b</var> is false, then set the <var title=concept-document-salvageable>salvageable</var> state of
     <em>this</em> document to false also.</li>

    </ol></li>

   <li><p>If <var title=concept-document-salvageable>salvageable</var> and <var title="">recycle</var> are both false, then the
   <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> must <a href=#discard-a-document title="discard a document">discard the
   <code>Document</code></a>.</li>

  </ol><p>This specification defines the following <dfn id=unloading-document-cleanup-steps>unloading document
  cleanup steps</dfn>. Other specifications can define more.</p>

  <ol><li><p>If there are any outstanding transactions that have
   callbacks that involve <a href=#concept-script title=concept-script>scripts</a>
   whose <a href="#script's-global-object" title="script's global object">global object</a> is
   the <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object, roll them
   back (without invoking any of the callbacks) and set the
   <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state to
   false. <a href=#refsWEBSQL>[WEBSQL]</a> </li>

   <li><p><span>Close the WebSocket connection</span> of any
   <code>WebSocket</code> objects that were created by the <code title=dom-WebSocket>WebSocket()</code> constructor visible on the
   <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object. If this
   affected any <code>WebSocket</code> objects, the set
   <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state to
   false.
   
   <a href=#refsWEBSOCKET>[WEBSOCKET]</a>
   
   </li>

   <li><p>If the <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state is
   false, empty the <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code>'s
   <a href=#list-of-active-timeouts>list of active timeouts</a> and its <a href=#list-of-active-intervals>list of active
   intervals</a>.</li>

  </ol><h5 id=event-definition><span class=secno>6.5.10.1 </span>Event definition</h5>

  </div>

  <pre class=idl>interface <dfn id=beforeunloadevent>BeforeUnloadEvent</dfn> : <a href=#event>Event</a> {
           attribute DOMString <a href=#dom-beforeunloadevent-returnvalue title=dom-BeforeUnloadEvent-returnValue>returnValue</a>;
};</pre>

  <dl class=domintro><dt><var title="">event</var> . <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current return value of the event (the message to show the user).</p>

    <p>Can be set, to update the message.</p>

   </dd>

  </dl><p class=note>There are no <code><a href=#beforeunloadevent>BeforeUnloadEvent</a></code>-specific
  initialization methods.</p>

  <div class=impl>

  <p>The <dfn id=dom-beforeunloadevent-returnvalue title=dom-BeforeUnloadEvent-returnValue><code>returnValue</code></dfn>
  attribute represents the message to show the user. When the event is
  created, the attribute must be set to the empty string. On getting,
  it must return the last value it was set to. On setting, the
  attribute must be set to the new value.</p>

  </div>


  <div class=impl>

  <h4 id=aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</h4>

  <p>If the user cancels any instance of the <a href=#fetch title=fetch>fetching algorithm</a> in the context of a
  <code><a href=#document>Document</a></code> in a <a href=#browsing-context>browsing context</a>, then, if
  that <code><a href=#document>Document</a></code> is an <a href=#active-document>active document</a>, the
  user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> named <code title=event-abort>abort</code> at that
  <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object.</p>

  <!-- I'd love to make this more precise, anyone have any suggestions
  on what it should say? -->

  </div>


  <h3 id=offline><span class=secno>6.6 </span>Offline Web applications</h3>

  <!-- v2 ideas for appcache:

     * A way to limit what gets download when the user agent is
       updating the application cache and it turns out the server has
       changed EVERY page because every page has a dynamic "site last
       modified" date on it.

       http://groups.google.com/group/gears-users/browse_thread/thread/efbd808325df607a/c73adb34f9b63cf7?hl=en&q=whatwg#c73adb34f9b63cf7


     * Multiuser appcaches.

       If the application code (HTML, JS, CSS) is all the same for two
       users, then appcache works for multiple users by just having
       the data for the users separate from the logic.

       This is the expected model for most apps. For example, your
       typical blog has just one set of CSS for all users.

       For systems where the user affects what HTML, JS, and CSS is
       served back, the spec as written pretty much requires that
       there be one app per user, and one generic "login" app that
       then redirects to one of those other apps - and where each app
       has a different base URL, separate manifest, etc.

       An alternative that we could explore in a future version is to
       have the manifest include a manifest name, and then have script
       that allows you to "activate" a particular manifest name for a
       given appcache.

       So each appcache group would be futher subdivided into named
       subgroups, and for a given manifest URL with such a group of
       subgroups, one subgroup would be the default one at a time. The
       inactive ones would just lie dormant, but and the active ones
       would act like now, but there'd be a scripted way to change the
       default (and maybe query what available variants exist for the
       current appcache), so that you could log back in as someone
       else by just making the script pick the other user's variant,
       and then reloading.

  -->

  <h4 id=introduction-3><span class=secno>6.6.1 </span>Introduction</h4>

  <p><i>This section is non-normative.</i></p>

  <p>In order to enable users to continue interacting with Web
  applications and documents even when their network connection is
  unavailable &mdash; for instance, because they are traveling outside
  of their ISP's coverage area &mdash; authors can provide a manifest
  which lists the files that are needed for the Web application to
  work offline and which causes the user's browser to keep a copy of
  the files for use offline.</p>

  <p>To illustrate this, consider a simple clock applet consisting of
  an HTML page "<code title="">clock.html</code>", a CSS style sheet
  "<code title="">clock.css</code>", and a JavaScript script "<code title="">clock.js</code>".</p>

  <p>Before adding the manifest, these three files might look like
  this:</p>

  <pre>&lt;!-- clock.html --&gt;
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Clock&lt;/title&gt;
  &lt;script src="clock.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="clock.css"&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;The time is: &lt;output id="clock"&gt;&lt;/output&gt;&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>
  <pre>/* clock.css */
output { font: 2em sans-serif; }</pre>
  <pre>/* clock.js */
setTimeout(function () {
    document.getElementById('clock').value = new Date();
}, 1000);</pre>

  <p>If the user tries to open the "<code title="">clock.html</code>"
  page while offline, though, the user agent (unless it happens to
  have it still in the local cache) will fail with an error.</p>

  <p>The author can instead provide a manifest of the three files:</p>

  <pre>CACHE MANIFEST
clock.html
clock.css
clock.js</pre>

  <p>With a small change to the HTML file, the manifest (served as
  <code><a href=#text/cache-manifest>text/cache-manifest</a></code>) is linked to the application:</p>

  <pre>&lt;!-- clock.html --&gt;
&lt;!DOCTYPE HTML&gt;
&lt;html manifest="clock.manifest"&gt;
 &lt;head&gt;
  &lt;title&gt;Clock&lt;/title&gt;
  &lt;script src="clock.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="clock.css"&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;The time is: &lt;output id="clock"&gt;&lt;/output&gt;&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  <p>Now, if the user goes to the page, the browser will cache the
  files and make them available even when the user is offline.</p>

  <p class=note>Authors are encouraged to include the main page in
  the manifest also, but in practice the page that referenced the
  manifest is automatically cached even if it isn't explicitly
  mentioned.</p>

  <p class=note>HTTP cache headers and restrictions on caching pages
  served over TLS (encrypted, using <code title="">https:</code>) are
  overridden by manifests. Thus, pages will not expire from an
  application cache before the user agent has updated it, and even
  applications served over TLS can be made to work offline.</p>

<!--(doesn't currently function)
  <p><a href="http://www.whatwg.org/demos/offline/clock/clock2.html">View this example online</a>.</p>
-->

  <h5 id=appcacheevents><span class=secno>6.6.1.1 </span>Event summary</h5>

  <p><i>This section is non-normative.</i></p>

  <p>When the user visits a page that declares a manifest, the browser
  will try to update the cache. It does this by fetching a copy of the
  manifest and, if the manifest has changed since the user agent last
  saw it, redownloading all the resources it mentions and caching them
  anew.</p>

  <p>As this is going on, a number of events get fired on the
  <code><a href=#applicationcache>ApplicationCache</a></code> object to keep the script updated as
  to the state of the cache update, so that the user can be notified
  appropriately. The events are as follows:</p>

  <table><thead><tr><th> Event name
     <th> Interface
     <th> Dispatched when...
     <th> Next events
   <tbody><tr><td> <dfn id=event-appcache-checking title=event-appcache-checking><code>checking</code></dfn>
     <td> <code><a href=#event>Event</a></code>
     <td> The user agent is checking for an update, or attempting to download the manifest for the first time. <strong>This is always the first event in the sequence.</strong>
     <td> <code title=event-appcache-noupdate><a href=#event-appcache-noupdate>noupdate</a></code>, <code title=event-appcache-downloading><a href=#event-appcache-downloading>downloading</a></code>, <code title=event-appcache-obsolete><a href=#event-appcache-obsolete>obsolete</a></code>, <code title=event-appcache-error><a href=#event-appcache-error>error</a></code>
    <tr><td> <dfn id=event-appcache-noupdate title=event-appcache-noupdate><code>noupdate</code></dfn>
     <td> <code><a href=#event>Event</a></code>
     <td> The manifest hadn't changed.
     <td> Last event in sequence.
    <tr><td> <dfn id=event-appcache-downloading title=event-appcache-downloading><code>downloading</code></dfn>
     <td> <code><a href=#event>Event</a></code>
     <td> The user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time.
     <td> <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>, <code title=event-appcache-error><a href=#event-appcache-error>error</a></code>, <code title=event-appcache-cached><a href=#event-appcache-cached>cached</a></code>, <code title=event-appcache-updateready><a href=#event-appcache-updateready>updateready</a></code>
    <tr><td> <dfn id=event-appcache-progress title=event-appcache-progress><code>progress</code></dfn>
     <td> <code>ProgressEvent</code>
     <td> The user agent is downloading resources listed by the manifest.
     <td> <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>, <code title=event-appcache-error><a href=#event-appcache-error>error</a></code>, <code title=event-appcache-cached><a href=#event-appcache-cached>cached</a></code>, <code title=event-appcache-updateready><a href=#event-appcache-updateready>updateready</a></code>
    <tr><td> <dfn id=event-appcache-cached title=event-appcache-cached><code>cached</code></dfn>
     <td> <code><a href=#event>Event</a></code>
     <td> The resources listed in the manifest have been downloaded, and the application is now cached.
     <td> Last event in sequence.
    <tr><td> <dfn id=event-appcache-updateready title=event-appcache-updateready><code>updateready</code></dfn>
     <td> <code><a href=#event>Event</a></code>
     <td> The resources listed in the manifest have been newly redownloaded, and the script can use <code title=dom-appcache-swapCache><a href=#dom-appcache-swapcache>swapCache()</a></code> to switch to the new cache.
     <td> Last event in sequence.
    <tr><td> <dfn id=event-appcache-obsolete title=event-appcache-obsolete><code>obsolete</code></dfn>
     <td> <code><a href=#event>Event</a></code>
     <td> The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
     <td> Last event in sequence.
    <tr><td rowspan=4> <dfn id=event-appcache-error title=event-appcache-error><code>error</code></dfn>
     <td rowspan=4> <code><a href=#event>Event</a></code>
     <td> The manifest was a 404 or 410 page, so the attempt to cache the application has been aborted.
     <td rowspan=3> Last event in sequence.
    <tr><td> The manifest hadn't changed, but the page referencing the manifest failed to download properly.
    <tr><td> A fatal error occurred while fetching the resources listed in the manifest.
    <tr><td> The manifest changed while the update was being run.
     <td> The user agent will try fetching the files again momentarily.
  </table><div class=impl>

  <h4 id=appcache><span class=secno>6.6.2 </span>Application caches</h4>

  <p>An <dfn id=application-cache>application cache</dfn> is a set of cached resources
  consisting of:</p>

  <ul><li>

    <p>One or more resources (including their out-of-band metadata,
    such as HTTP headers, if any), identified by URLs, each falling
    into one (or more) of the following categories:</p>

    <dl><dt><dfn id=concept-appcache-master title=concept-appcache-master>Master entries</dfn>

     <dd>Documents that were added to the cache because a
     <a href=#browsing-context>browsing context</a> was <a href=#navigate title=navigate>navigated</a> to that document and the
     document indicated that this was its cache, using the <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute.


     <dt><dfn id=concept-appcache-manifest title=concept-appcache-manifest>The manifest</dfn>

     <dd>The resource corresponding to the URL that was given in a
     master entry's <code><a href=#the-html-element-0>html</a></code> element's <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute. The
     manifest is fetched and processed during the <a href=#application-cache-download-process>application
     cache download process</a>. All the <a href=#concept-appcache-master title=concept-appcache-master>master entries</a> have
     the <a href=#same-origin title="same origin">same origin</a> as the manifest.


     <dt><dfn id=concept-appcache-explicit title=concept-appcache-explicit>Explicit entries</dfn>

     <dd>Resources that were listed in the cache's <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> in an <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit
     section</a>. Explicit entries can also be marked as <dfn id=concept-appcache-foreign title=concept-appcache-foreign>foreign</dfn>, which means that
     they have a <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code>
     attribute but that it doesn't point at this cache's <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>.


     <dt><dfn id=concept-appcache-fallback title=concept-appcache-fallback>Fallback entries</dfn>

     <dd>Resources that were listed in the cache's <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> in a <a href=#concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback
     section</a>.


    </dl><p class=note>A URL in the list can be flagged with multiple
    different types, and thus an entry can end up being categorized as
    multiple entries. For example, an entry can be a manifest entry
    and an explicit entry at the same time, if the manifest is listed
    within the manifest.</p>

   </li>

   <li>Zero or more <dfn id=concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
   namespaces</dfn>: URLs, used as <a href=#concept-appcache-matches-fallback title=concept-appcache-matches-fallback>prefix match
   patterns</a>, each of which is mapped to a <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entry</a>. Each
   namespace URL has the <a href=#same-origin>same origin</a> as <a href=#concept-appcache-manifest title=concept-appcache-manifest>the manifest</a>.</li>

   <li>Zero or more URLs that form the <dfn id=concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist
   namespaces</dfn>.

   <li>An <dfn id=concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   wildcard flag</dfn>, which is either <i title="">open</i> or <i title="">blocking</i>.</li>

  </ul><p>Each <a href=#application-cache>application cache</a> has a <dfn id=concept-appcache-completeness title=concept-appcache-completeness>completeness flag</dfn>, which is
  either <i>complete</i> or <i>incomplete</i>.</p>

  <hr><p>An <dfn id=application-cache-group>application cache group</dfn> is a group of <a href=#application-cache title="application cache">application caches</a>, identified by
  the <a href=#absolute-url>absolute URL</a> of a resource <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> which is used to
  populate the caches in the group.</p>

  <p>An <a href=#application-cache>application cache</a> is <dfn id=concept-appcache-newer title=concept-appcache-newer>newer</dfn> than another if it was
  created after the other (in other words, <a href=#application-cache title="application
  cache">application caches</a> in an <a href=#application-cache-group>application cache
  group</a> have a chronological order).</p>

  <p>Only the newest <a href=#application-cache>application cache</a> in an
  <a href=#application-cache-group>application cache group</a> can have its <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> set to
  <i>incomplete</i>; the others are always all <i>complete</i>.</p>

  <p>Each <a href=#application-cache-group>application cache group</a> has an <dfn id=concept-appcache-status title=concept-appcache-status>update status</dfn>, which is one of
  the following: <i>idle</i>, <i>checking</i>, <i>downloading</i>.</p>

  <p>A <dfn id=relevant-application-cache>relevant application cache</dfn> is an <a href=#application-cache>application
  cache</a> that is the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> in its <a href=#application-cache-group title="application cache group">group</a> to be
  <i>complete</i>.</p>

  <p>Each <a href=#application-cache-group>application cache group</a> has a <dfn id=concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
  entries</dfn>. Each entry in this list consists of a resource and a
  corresponding <code><a href=#document>Document</a></code> object. It is used during the
  <a href=#application-cache-download-process>application cache download process</a> to ensure that new
  master entries are cached even if the <a href=#application-cache-download-process>application cache
  download process</a> was already running for their
  <a href=#application-cache-group>application cache group</a> when they were loaded.</p>

  <p>An <a href=#application-cache-group>application cache group</a> can be marked as <dfn id=concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</dfn>, meaning that it
  must be ignored when looking at what <a href=#application-cache-group title="application cache
  group">application cache groups</a> exist.</p>

  <hr><p>A <dfn id=cache-host>cache host</dfn> is a <code><a href=#document>Document</a></code> or a
  <code>SharedWorkerGlobalScope</code> object. A <a href=#cache-host>cache
  host</a> can be associated with an <a href=#application-cache>application
  cache</a>.
  
  <a href=#refsWEBWORKERS>[WEBWORKERS]</a>
  
  </p>

  <p>A <code><a href=#document>Document</a></code> initially is not associated with an
  <a href=#application-cache>application cache</a>, but can become associated with one
  early during the page load process, when steps <a href=#parser-appcache>in the parser</a> and in the <a href=#navigate title=navigate>navigation</a> sections cause <a href=#concept-appcache-init title=concept-appcache-init>cache selection</a> to occur.</p>

  <p>A <code>SharedWorkerGlobalScope</code> can be associated with an
  <a href=#application-cache>application cache</a> when it is created.
  
  <a href=#refsWEBWORKERS>[WEBWORKERS]</a>
  
  </p>

  <p>Each <a href=#cache-host>cache host</a> has an associated
  <code><a href=#applicationcache>ApplicationCache</a></code> object.</p>

  <hr><p>Multiple <a href=#application-cache title="application cache">application
  caches</a> in different <a href=#application-cache-group title="application cache
  group">application cache groups</a> can contain the same
  resource, e.g. if the manifests all reference that resource. If the
  user agent is to <dfn id=concept-appcache-selection title=concept-appcache-selection>select an
  application cache</dfn> from a list of <a href=#relevant-application-cache title="relevant
  application cache">relevant application caches</a> that contain a
  resource, the user agent must use the application cache that the
  user most likely wants to see the resource from, taking into account
  the following:</p>

  <ul><li>which application cache was most recently updated,

   <li>which application cache was being used to display the
   resource from which the user decided to look at the new resource,
   and

   <li>which application cache the user prefers.

  </ul><hr><p>A URL <dfn id=concept-appcache-matches-fallback title=concept-appcache-matches-fallback>matches a
  fallback namespace</dfn> if there exists a <a href=#relevant-application-cache>relevant
  application cache</a> whose <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>'s URL has the
  <a href=#same-origin>same origin</a> as the URL in question, and that has a
  <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>
  that is a <a href=#prefix-match>prefix match</a> for the URL being examined. If
  multiple fallback namespaces match the same URL, the longest one is
  the one that matches. A URL looking for a fallback namespace can
  match more than one application cache at a time, but only matches
  one namespace in each cache.</p>

  <div class=example>

   <p>If a manifest <code title="">http://example.com/app1/manifest</code> declares that
   <code title="">http://example.com/resources/images</code> is a
   fallback namespace, and the user navigates to <code title="">HTTP://EXAMPLE.COM:80/resources/images/cat.png</code>,
   then the user agent will decide that the application cache
   identified by <code title="">http://example.com/app1/manifest</code> contains a
   namespace with a match for that URL.</p>

   <!-- "resolve a url" canonicalises the case for the scheme and host
   and removes the port if it is the default -->

  </div>

  </div>



  <h4 id=manifests><span class=secno>6.6.3 </span>The cache manifest syntax</h4>


  <h5 id=a-sample-manifest><span class=secno>6.6.3.1 </span>A sample manifest</h5>

  <p><i>This section is non-normative.</i></p>

  <p>This example manifest requires two images and a style sheet to be
  cached and whitelists a CGI script.</p>

  <pre>CACHE MANIFEST
# the above line is required

# this is a comment
# there can be as many of these anywhere in the file
# they are all ignored
  # comments can have spaces before them
  # but must be alone on the line

# blank lines are ignored too

# these are files that need to be cached they can either be listed
# first, or a "CACHE:" header could be put before them, as is done
# lower down.
images/sound-icon.png
images/background.png
# note that each file has to be put on its own line

# here is a file for the online whitelist -- it isn't cached, and
# references to this file will bypass the cache, always hitting the
# network (or trying to, if the user is offline).
NETWORK:
comm.cgi

# here is another set of files to cache, this time just the CSS file.
CACHE:
style/default.css</pre>

  <p>It could equally well be written as follows:</p>

  <pre>CACHE MANIFEST
NETWORK:
comm.cgi
CACHE:
style/default.css
images/sound-icon.png
images/background.png</pre>

  <hr><p>The following manifest defines a catch-all error page that is
  displayed for any page on the site while the user is offline. It
  also specifies that the <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
  wildcard flag</a> is <i title="">open</i>, meaning that accesses
  to resources on other sites will not be blocked. (Resources on the
  same site are already not blocked because of the catch-all fallback
  namespace.)</p>

  <p>So long as all pages on the site reference this manifest, they
  will get cached locally as they are fetched, so that subsequent hits
  to the same page will load the page immediately from the
  cache. Until the manifest is changed, those pages will not be
  fetched from the server again. When the manifest changes, then all
  the files will be redownloaded.</p>

  <p>Subresources, such as style sheets, images, etc, would only be
  cached using the regular HTTP caching semantics, however.</p>

  <pre>CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*</pre>


  <h5 id=writing-cache-manifests><span class=secno>6.6.3.2 </span>Writing cache manifests</h5>

  <p>Manifests must be served using the
  <code><a href=#text/cache-manifest>text/cache-manifest</a></code> <a href=#mime-type>MIME type</a>. All
  resources served using the <code><a href=#text/cache-manifest>text/cache-manifest</a></code>
  <a href=#mime-type>MIME type</a> must follow the syntax of application cache
  manifests, as described in this section.</p>

  <p>An application cache manifest is a text file, whose text is
  encoded using UTF-8. Data in application cache manifests is
  line-based. Newlines must be represented by U+000A LINE FEED (LF)
  characters, U+000D CARRIAGE RETURN (CR) characters, or U+000D
  CARRIAGE RETURN (CR) U+000A LINE FEED (LF) pairs.</p>

  <p class=note>This is a <a href=#willful-violation>willful violation</a> of two
  aspects of RFC 2046, which requires all <code title="">text/*</code>
  types to support an open-ended set of character encodings and only
  allows CRLF line breaks. These requirements, however, are outdated;
  UTF-8 is now widely used, such that supporting other encodings is no
  longer necessary, and use of CR, LF, and CRLF line breaks is
  commonly supported and indeed sometimes CRLF is <em>not</em>
  supported by text editors. <a href=#refsRFC2046>[RFC2046]</a></p>
  <!-- also RFC 2045 for charset -->

  <p>The first line of an application cache manifest must consist of
  the string "CACHE", a single U+0020 SPACE character, the string
  "MANIFEST", and either a U+0020 SPACE character, a U+0009 CHARACTER
  TABULATION (tab) character, a U+000A LINE FEED (LF) character, or a
  U+000D CARRIAGE RETURN (CR) character. The first line may optionally
  be preceded by a U+FEFF BYTE ORDER MARK (BOM) character. If any
  other text is found on the first line, it is ignored.</p>

  <p>Subsequent lines, if any, must all be one of the following:</p>

  <dl><dt>A blank line
   <dd>
    <p>Blank lines must consist of zero or more U+0020 SPACE and
    U+0009 CHARACTER TABULATION (tab) characters only.</p>

   <dt>A comment
   <dd>
    <p>Comment lines must consist of zero or more U+0020 SPACE and
    U+0009 CHARACTER TABULATION (tab) characters, followed by a single
    U+0023 NUMBER SIGN character (#), followed by zero or more
    characters other than U+000A LINE FEED (LF) and U+000D CARRIAGE
    RETURN (CR) characters.</p>

    <p class=note>Comments must be on a line on their own. If they
    were to be included on a line with a URL, the "#" would be
    mistaken for part of a fragment identifier.</p>

   <dt>A section header
   <dd>
    <p>Section headers change the current section. There are three
    possible section headers:

    <dl><dt><code>CACHE:</code>
     <dd>Switches to the <dfn id=concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit section</dfn>.

     <dt><code>FALLBACK:</code>
     <dd>Switches to the <dfn id=concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback section</dfn>.

     <dt><code>NETWORK:</code>
     <dd>Switches to the <dfn id=concept-appcache-manifest-network title=concept-appcache-manifest-network>online whitelist section</dfn>.

    </dl><p>Section header lines must consist of zero or more U+0020 SPACE
    and U+0009 CHARACTER TABULATION (tab) characters, followed by one
    of the names above (including the U+003A COLON character (:))
    followed by zero or more U+0020 SPACE and U+0009 CHARACTER
    TABULATION (tab) characters.</p>

    <p>Ironically, by default, the current section is the
    <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit section</a>.</p>

   <dt>Data for the current section
   <dd>
    <p>The format that data lines must take depends on the current
    section.</p>

    <p>When the current section is the <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit
    section</a>, data lines must consist of zero or more U+0020
    SPACE and U+0009 CHARACTER TABULATION (tab) characters, a
    <a href=#valid-url>valid URL</a> identifying a resource other than the
    manifest itself, and then zero or more U+0020 SPACE and U+0009
    CHARACTER TABULATION (tab) characters.</p>

    <p>When the current section is the <a href=#concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback
    section</a>, data lines must consist of zero or more U+0020
    SPACE and U+0009 CHARACTER TABULATION (tab) characters, a
    <a href=#valid-url>valid URL</a> identifying a resource other than the
    manifest itself, one or more U+0020 SPACE and U+0009 CHARACTER
    TABULATION (tab) characters, another <a href=#valid-url>valid URL</a>
    identifying a resource other than the manifest itself, and then
    zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab)
    characters.</p>

    <p>When the current section is the <a href=#concept-appcache-manifest-network title=concept-appcache-manifest-network>online whitelist
    section</a>, data lines must consist of zero or more U+0020
    SPACE and U+0009 CHARACTER TABULATION (tab) characters, either a
    single U+002A ASTERISK character (*) <!--
    concept-appcache-onlinewhitelist-wildcard --> or a <a href=#valid-url>valid
    URL</a> identifying a resource other than the manifest itself,
    and then zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION
    (tab) characters.</p>

<!--
    <p class="note">The URLs in data lines can't be empty strings,
    since those would be relative URLs to the manifest itself. Such
    lines would be confused with blank or invalid lines, anyway.</p>
-->

  </dl><p>Manifests may contain sections more than once. Sections may be
  empty.</p>

  <p>If the manifest's <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a>
  is <code title="">https:</code> or another scheme intended for
  encrypted data transfer, then all URLs in <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit sections</a>
  must have the <a href=#same-origin>same origin</a> as the manifest itself.</p>

  <p>URLs that are to be fallback pages associated with <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespaces</a>, and
  those namespaces themselves, must be given in <a href=#concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback sections</a>,
  with the namespace being the first URL of the data line, and the
  corresponding fallback page being the second URL. All the other
  pages to be cached must be listed in <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit
  sections</a>.</p>

  <p><a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>Fallback
  namespaces</a> and <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entries</a> must have
  the <a href=#same-origin>same origin</a> as the manifest itself.</p>

  <p>A <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
  namespace</a> must not be listed more than once.</p>

  <p>Namespaces that the user agent is to put into the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a>
  must all be specified in <a href=#concept-appcache-manifest-network title=concept-appcache-manifest-network>online whitelist
  sections</a>. (This is needed for any URL that the page is
  intending to use to communicate back to the server.) To specify that
  all URLs are automatically whitelisted in this way, a U+002A
  ASTERISK character character (*) may be specified as one of the
  URLs. <!-- concept-appcache-onlinewhitelist-wildcard --></p>

  <p>Authors should not include namespaces in the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a> for
  which another namespace in the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a> is
  a <a href=#prefix-match>prefix match</a>.</p>

  <p>Relative URLs must be given relative to the manifest's own
  URL. All URLs in the manifest must have the same <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> as the manifest itself
  (either explicitly or implicitly, through the use of relative
  URLs).</p>

  <p>URLs in manifests must not have fragment identifiers (i.e. the
  U+0023 NUMBER SIGN character isn't allowed in URLs in
  manifests).</p>

  <p><a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>Fallback
  namespaces</a> and namespaces in the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a> are
  matched by <a href=#prefix-match>prefix match</a>.</p>


  <div class=impl>

  <h5 id=parsing-cache-manifests><span class=secno>6.6.3.3 </span>Parsing cache manifests</h5>

  <p>When a user agent is to <dfn id=parse-a-manifest>parse a manifest</dfn>, it means
  that the user agent must run the following steps:</p>

  <ol><li><p>The user agent must decode the byte stream corresponding with
   the manifest to be parsed, treating it as UTF-8. Bytes or sequences
   of bytes that are not valid UTF-8 sequences must be interpreted as
   a U+FFFD REPLACEMENT CHARACTER. <!--All U+0000 NULL characters must
   be replaced by U+FFFD REPLACEMENT CHARACTERs. (this isn't black-box
   testable since neither U+0000 nor U+FFFD are valid anywhere in the
   syntax and thus both will be treated the same anyway)--></li>

   <li><p>Let <var title="">base URL</var> be the <a href=#absolute-url>absolute
   URL</a> representing the manifest.</li>

   <li><p>Let <var title="">explicit URLs</var> be an initially empty
   list of <a href=#absolute-url title="absolute URL">absolute URLs</a> for <a href=#concept-appcache-explicit title=concept-appcache-explicit>explicit entries</a>.</li>

   <li><p>Let <var title="">fallback URLs</var> be an initially empty
   mapping of <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
   namespaces</a> to <a href=#absolute-url title="absolute URL">absolute
   URLs</a> for <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback
   entries</a>.</li>

   <li><p>Let <var title="">online whitelist namespaces</var> be an
   initially empty list of <a href=#absolute-url title="absolute URL">absolute
   URLs</a> for an <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online
   whitelist</a>.</li>

   <li><p>Let <var title="">online whitelist wildcard flag</var> be <i title="">blocking</i>. <!--
   concept-appcache-onlinewhitelist-wildcard --></li>

   <li><p>Let <var title="">input</var> be the decoded text of the
   manifest's byte stream.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the first
   character.</li>

   <li><p>If <var title="">position</var> is pointing at a U+FEFF BYTE
   ORDER MARK (BOM) character, then advance <var title="">position</var> to the next character.</li>

   <li><p>If the characters starting from <var title="">position</var>
   are "CACHE", followed by a U+0020 SPACE character, followed by
   "MANIFEST", then advance <var title="">position</var> to the next
   character after those. Otherwise, this isn't a cache manifest;
   abort this algorithm with a failure while checking for the magic
   signature.</li>

   <li><p>If the character at <var title="">position</var> is neither
   a U+0020 SPACE character, a U+0009 CHARACTER TABULATION (tab)
   character, U+000A LINE FEED (LF) character, nor a U+000D CARRIAGE
   RETURN (CR) character, then this isn't a cache manifest; abort this
   algorithm with a failure while checking for the magic
   signature.</li>

   <li><p>This is a cache manifest. The algorithm cannot fail beyond
   this point (though bogus lines can get ignored).</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
   <em>not</em> U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)
   characters, and ignore those characters. (Extra text on the first
   line, after the signature, is ignored.)</li>

   <li><p>Let <var title="">mode</var> be "explicit".</li>

   <li><p><i>Start of line</i>: If <var title="">position</var> is
   past the end of <var title="">input</var>, then jump to the last
   step. Otherwise, <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> that
   are U+000A LINE FEED (LF), U+000D CARRIAGE RETURN (CR), U+0020
   SPACE, or U+0009 CHARACTER TABULATION (tab) characters.</li>
   <!-- strips leading spaces, ignores space-only lines, ignores blank lines -->

   <li><p>Now, <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> that are
   <em>not</em> U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)
   characters, and let the result be <var title="">line</var>.</li>

   <li><p>Drop any trailing U+0020 SPACE and U+0009 CHARACTER
   TABULATION (tab) characters at the end of <var title="">line</var>.</li>

   <li><p>If <var title="">line</var> is the empty string, then jump
   back to the step labeled "start of line".</li>

   <li><p>If the first character in <var title="">line</var> is a
   U+0023 NUMBER SIGN character (#), then jump back to the step
   labeled "start of line".</li>

   <li><p>If <var title="">line</var> equals "CACHE:" (the word
   "CACHE" followed by a U+003A COLON character (:)), then set <var title="">mode</var> to "explicit" and jump back to the step
   labeled "start of line".</li>

   <li><p>If <var title="">line</var> equals "FALLBACK:" (the word
   "FALLBACK" followed by a U+003A COLON character (:)), then set <var title="">mode</var> to "fallback" and jump back to the step
   labeled "start of line".</li>

   <li><p>If <var title="">line</var> equals "NETWORK:" (the word
   "NETWORK" followed by a U+003A COLON character (:)), then set <var title="">mode</var> to "online whitelist" and jump back to the step
   labeled "start of line".</li>

   <li><p>If <var title="">line</var> ends with a U+003A COLON
   character (:), then set <var title="">mode</var> to "unknown" and
   jump back to the step labeled "start of line".</li>

   <li><p>This is either a data line or it is syntactically
   incorrect.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">line</var>, initially pointing at the start of the
   string.</li>

   <li><p>Let <var title="">tokens</var> be a list of strings,
   initially empty.</li>

   <li>

    <p>While <var title="">position</var> doesn't point past the end
    of <var title="">line</var>:</p>

    <ol><li><p>Let <var title="">current token</var> be an empty
     string.</li>

     <li><p>While <var title="">position</var> doesn't point past the
     end of <var title="">line</var> and the character at <var title="">position</var> is neither a U+0020 SPACE nor a U+0009
     CHARACTER TABULATION (tab) character, add the character at <var title="">position</var> to <var title="">current token</var> and
     advance <var title="">position</var> to the next character in
     <var title="">input</var>.</li>

     <li><p>Add <var title="">current token</var> to the <var title="">tokens</var> list.</li>

     <li><p>While <var title="">position</var> doesn't point past the
     end of <var title="">line</var> and the character at <var title="">position</var> is either a U+0020 SPACE or a U+0009
     CHARACTER TABULATION (tab) character, advance <var title="">position</var> to the next character in <var title="">input</var>.</li>

    </ol></li>

   <li>

    <p>Process <var title="">tokens</var> as follows:</p>

    <dl class=switch><dt>If <var title="">mode</var> is "explicit"</dt>

     <dd>

      <p><a href=#resolve-a-url title="resolve a url">Resolve</a> the first item in
      <var title="">tokens</var>, relative to <var title="">base
      URL</var>; ignore the rest.</p>

      <p>If this fails, then jump back to the step labeled "start of
      line".</p>

      <p>If the resulting <a href=#absolute-url>absolute URL</a> has a different
      <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component than
      the manifest's URL (compared in an <a href=#ascii-case-insensitive>ASCII
      case-insensitive</a> manner), then jump back to the step
      labeled "start of line". If the manifest's <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> is <code title="">https:</code> or another scheme intended for encrypted
      data transfer, and the resulting <a href=#absolute-url>absolute URL</a> does
      not have the <a href=#same-origin>same origin</a> as the manifest's URL,
      then jump back to the step labeled "start of line".</p>

      <p>Drop the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
      component of the resulting <a href=#absolute-url>absolute URL</a>, if it has
      one.</p>

      <p>Add the resulting <a href=#absolute-url>absolute URL</a> to the <var title="">explicit URLs</var>.</p>

     </dd>

     <dt>If <var title="">mode</var> is "fallback"</dt>

     <dd>

      <p>Let <var title="">part one</var> be the first token in <var title="">tokens</var>, and let <var title="">part two</var> be
      the second token in <var title="">tokens</var>.</p>

      <p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">part
      one</var> and <var title="">part two</var>, relative to <var title="">base URL</var>.</p>

      <p>If either fails, then jump back to the step labeled "start of
      line".</p>

      <p>If the <a href=#absolute-url>absolute URL</a> corresponding to either <var title="">part one</var> or <var title="">part two</var> does not
      have the <a href=#same-origin>same origin</a> as the manifest's URL, then
      jump back to the step labeled "start of line".</p> <!-- SECURITY
      -->

      <p>Drop any the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> components of the
      resulting <a href=#absolute-url title="absolute URL">absolute URLs</a>.</p>

      <p>If the <a href=#absolute-url>absolute URL</a> corresponding to <var title="">part one</var> is already in the <var title="">fallback
      URLs</var> mapping as a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>,
      then jump back to the step labeled "start of line".</p>

      <p>Otherwise, add the <a href=#absolute-url>absolute URL</a> corresponding to
      <var title="">part one</var> to the <var title="">fallback
      URLs</var> mapping as a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>,
      mapped to the <a href=#absolute-url>absolute URL</a> corresponding to <var title="">part two</var> as the <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entry</a>.</p>

     </dd>

     <dt>If <var title="">mode</var> is "online whitelist"</dt>

     <dd>

      <p>If the first item in <var title="">tokens</var> is a U+002A
      ASTERISK character (*), then set <var title="">online whitelist
      wildcard flag</var> to <i title="">open</i> and jump back to the
      step labeled "start of line".</p>

      <p>Otherwise, <a href=#resolve-a-url title="resolve a url">resolve</a> the
      first item in <var title="">tokens</var>, relative to <var title="">base URL</var>; ignore the rest.</p>

      <p>If this fails, then jump back to the step labeled "start of
      line".</p>

      <p>If the resulting <a href=#absolute-url>absolute URL</a> has a different
      <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component than
      the manifest's URL (compared in an <a href=#ascii-case-insensitive>ASCII
      case-insensitive</a> manner), then jump back to the step
      labeled "start of line".</p>

      <p>Drop the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
      component of the resulting <a href=#absolute-url>absolute URL</a>, if it has
      one.</p>

      <p>Add the resulting <a href=#absolute-url>absolute URL</a> to the <var title="">online whitelist namespaces</var>.</p>

     </dd>

     <dt>If <var title="">mode</var> is "unknown"</dt>

     <dd>

      <p>Do nothing. The line is ignored.</p>

     </dd>

    </dl></li>

   <li><p>Jump back to the step labeled "start of line". (That step
   jumps to the next, and last, step when the end of the file is
   reached.)</li>

   <li><p>Return the <var title="">explicit URLs</var> list, the <var title="">fallback URLs</var> mapping, the <var title="">online
   whitelist namespaces</var>, and the <var title="">online whitelist
   wildcard flag</var>.</li>

  </ol><div class=note>

   <p>If a resource is listed in the <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit section</a>
   or as a <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback
   entry</a> in the <a href=#concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback section</a>,
   the resource will always be taken from the cache, regardless of any
   other matching entries in the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespaces</a> or
   <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist
   namespaces</a>.</p>

   <p>When a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
   namespace</a> and an <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist
   namespace</a> overlap, the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist
   namespace</a> has priority.</p>

   <p>The <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   wildcard flag</a> is applied last, only for URLs that match
   neither the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online
   whitelist namespace</a> nor the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a> and
   that are not listed in the <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit
   section</a>.</p>

  </div>


  <h4 id=downloading-or-updating-an-application-cache><span class=secno>6.6.4 </span>Downloading or updating an application cache</h4>

  <p>When the user agent is required (by other parts of this
  specification) to start the <dfn id=application-cache-download-process>application cache download
  process</dfn> for an <a href=#absolute-url>absolute URL</a> purported to identify
  a <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>, or for an
  <a href=#application-cache-group>application cache group</a>, potentially given a particular
  <a href=#cache-host>cache host</a>, and potentially given a <a href=#concept-appcache-master title=concept-appcache-master>master</a> resource, the user
  agent must run the steps below. These steps are always run
  asynchronously, in parallel with the <a href=#event-loop>event loop</a> <a href=#concept-task title=concept-task>tasks</a>.</p>

  <p>Some of these steps have requirements that only apply if the user
  agent <dfn id=shows-caching-progress>shows caching progress</dfn>. Support for this is
  optional. Caching progress UI could consist of a progress bar or
  message panel in the user agent's interface, or an overlay, or
  something else. Certain events fired during the <a href=#application-cache-download-process>application
  cache download process</a> allow the script to override the display
  of such an interface. The goal of this is to allow Web applications
  to provide more seamless update mechanisms, hiding from the user the
  mechanics of the application cache mechanism. User agents may
  display user interfaces independent of this, but are encouraged to
  not show prominent update progress notifications for applications
  that cancel the relevant events.</p>

  <p class=note>These events are delayed until after the <code title=event-load>load</code> event has fired.</p>

  <p>The <a href=#application-cache-download-process>application cache download process</a> steps are as
  follows:

  <ol><li><p>Optionally, wait until the permission to start the
   <a href=#application-cache-download-process>application cache download process</a> has been obtained
   from the user and until the user agent is confident that the
   network is available. This could include doing nothing until the
   user explicitly opts-in to caching the site, or could involve
   prompting the user for permission. The algorithm might never get
   past this point. (This step is particularly intended to be used by
   user agents running on severely space-constrained devices or in
   highly privacy-sensitive environments).</li>

   <li>

    <p>Atomically, so as to avoid race conditions, perform the
    following substeps:</p>

    <ol><li>

      <p>Pick the appropriate substeps:</p>

      <dl class=switch><dt>If these steps were invoked with an <a href=#absolute-url>absolute
       URL</a> purported to identify a <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a></dt>

       <dd>

        <p>Let <var title="">manifest URL</var> be that <a href=#absolute-url>absolute
        URL</a>.</p>

        <p>If there is no <a href=#application-cache-group>application cache group</a>
        identified by <var title="">manifest URL</var>, then create a
        new <a href=#application-cache-group>application cache group</a> identified by <var title="">manifest URL</var>. Initially, it has no <a href=#application-cache title="application cache">application caches</a>. One will
        be created later in this algorithm.</p>

       </dd>


       <dt>If these steps were invoked with an <a href=#application-cache-group>application cache
       group</a></dt>

       <dd>

        <p>Let <var title="">manifest URL</var> be the <a href=#absolute-url>absolute
        URL</a> of the <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> used to
        identify the <a href=#application-cache-group>application cache group</a> to be
        updated.</p>

       </dd>

      </dl></li>

     <li><p>Let <var title="">cache group</var> be the
     <a href=#application-cache-group>application cache group</a> identified by <var title="">manifest URL</var>.</li>

     <li><p>If these steps were invoked with a <a href=#concept-appcache-master title=concept-appcache-master>master</a> resource, then add
     the resource, along with the resource's <code><a href=#document>Document</a></code>, to
     <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
     entries</a>.</li>

     <li><p>If these steps were invoked with a <a href=#cache-host>cache
     host</a>, and the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> is <i>checking</i> or
     <i>downloading</i>, then <a href=#queue-a-post-load-task>queue a post-load task</a> to
     <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-appcache-checking><a href=#event-appcache-checking>checking</a></code> that is
     cancelable at the <code><a href=#applicationcache>ApplicationCache</a></code> singleton of that
     <a href=#cache-host>cache host</a>. The default action of this event must
     be, if the user agent <a href=#shows-caching-progress>shows caching progress</a>, the
     display of some sort of user interface indicating to the user
     that the user agent is checking to see if it can download the
     application.</li>

     <li><p>If these steps were invoked with a <a href=#cache-host>cache
     host</a>, and the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> is <i>downloading</i>, then also
     <a href=#queue-a-post-load-task>queue a post-load task</a> to <a href=#fire-a-simple-event>fire a simple
     event</a> named <code title=event-appcache-downloading><a href=#event-appcache-downloading>downloading</a></code> that is
     cancelable at the <code><a href=#applicationcache>ApplicationCache</a></code> singleton of that
     <a href=#cache-host>cache host</a>. The default action of this event must
     be, if the user agent <a href=#shows-caching-progress>shows caching progress</a>, the
     display of some sort of user interface indicating to the user the
     application is being downloaded.</li>

     <li><p>If the <a href=#concept-appcache-status title=concept-appcache-status>status</a>
     of the <var title="">cache group</var> is either <i>checking</i>
     or <i>downloading</i>, then abort this instance of the
     <a href=#application-cache-download-process>application cache download process</a>, as an update is
     already in progress.</li>

     <li><p>Set the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> to <i>checking</i>.</p>

     <li><p>For each <a href=#cache-host>cache host</a> associated with an
     <a href=#application-cache>application cache</a> in <var title="">cache
     group</var>, <a href=#queue-a-post-load-task>queue a post-load task</a> to <a href=#fire-a-simple-event>fire a
     simple event</a> that is cancelable named <code title=event-appcache-checking><a href=#event-appcache-checking>checking</a></code> at the
     <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
     host</a>. The default action of these events must be, if the
     user agent <a href=#shows-caching-progress>shows caching progress</a>, the display of
     some sort of user interface indicating to the user that the user
     agent is checking for the availability of updates.</li>

    </ol><p class=note>The remainder of the steps run asynchronously.</p>

    <p>If <var title="">cache group</var> already has an
    <a href=#application-cache>application cache</a> in it, then this is an <dfn id=concept-appcache-upgrade title=concept-appcache-upgrade>upgrade attempt</dfn>. Otherwise,
    this is a <dfn id=concept-appcache-cache title=concept-appcache-cache>cache
    attempt</dfn>.</p>

   </li>

   <li><p>If this is a <a href=#concept-appcache-cache title=concept-appcache-cache>cache
   attempt</a>, then this algorithm was invoked with a <a href=#cache-host>cache
   host</a>; <a href=#queue-a-post-load-task>queue a post-load task</a> to <a href=#fire-a-simple-event>fire a
   simple event</a> named <code title=event-appcache-checking><a href=#event-appcache-checking>checking</a></code> that is cancelable
   at the <code><a href=#applicationcache>ApplicationCache</a></code> singleton of that <a href=#cache-host>cache
   host</a>. The default action of this event must be, if the user
   agent <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort
   of user interface indicating to the user that the user agent is
   checking for the availability of updates.</li>

   <li>

    <p><i>Fetching the manifest</i>: <a href=#fetch>Fetch</a> the resource
    from <var title="">manifest URL</var>, and let <var title="">manifest</var> be that resource.</p> <!-- http-origin
    privacy sensitive, though it doesn't matter, since this can never
    be cross-origin -->

    <p>If the resource is labeled with the <a href=#mime-type>MIME type</a>
    <code><a href=#text/cache-manifest>text/cache-manifest</a></code>, parse <var title="">manifest</var> according to the <a href=#parse-a-manifest title="parse a
    manifest">rules for parsing manifests</a>, obtaining a list of
    <a href=#concept-appcache-explicit title=concept-appcache-explicit>explicit entries</a>,
    <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entries</a>
    and the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
    namespaces</a> that map to them, entries for the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a>,
    and a value for the <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
    wildcard flag</a>.</p>

   </li>

   <li>

    <p>If <i>fetching the manifest</i> fails due to a 404 or 410
    response <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or
    equivalent</a>, then run these substeps:</p>

    <ol><li><p>Mark <var title="">cache group</var> as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>. This <var title="">cache group</var> no longer exists for any purpose other
     than the processing of <code><a href=#document>Document</a></code> objects already
     associated with an <a href=#application-cache>application cache</a> in the <var title="">cache group</var>.</li>

     <li><p>Let <var title="">task list</var> be an empty list of
     <a href=#concept-task title=concept-task>tasks</a>.</p>

     <li><p>For each <a href=#cache-host>cache host</a> associated with an
     <a href=#application-cache>application cache</a> in <var title="">cache
     group</var>, create a <a href=#concept-task title=concept-task>task</a> to
     <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-appcache-obsolete><a href=#event-appcache-obsolete>obsolete</a></code> that is
     cancelable at the <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the
     <a href=#cache-host>cache host</a>, and add it to <var title="">task
     list</var>. The default action of these events must be, if the
     user agent <a href=#shows-caching-progress>shows caching progress</a>, the display of
     some sort of user interface indicating to the user that the
     application is no longer available for offline use.</li>

     <li><p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
     entries</a>, create a <a href=#concept-task title=concept-task>task</a>
     to <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named
     <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> (not <code title=event-appcache-obsolete><a href=#event-appcache-obsolete>obsolete</a></code>!) at the
     <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
     host</a> the <code><a href=#document>Document</a></code> for this entry, if there
     still is one, and add it to <var title="">task list</var>. The
     default action of this event must be, if the user agent
     <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
     user interface indicating to the user that the user agent failed
     to save the application for offline use.</li>

     <li><p>If <var title="">cache group</var> has an
     <a href=#application-cache>application cache</a> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
     <i>incomplete</i>, then discard that <a href=#application-cache>application
     cache</a>.</p>

     <li><p>If appropriate, remove any user interface indicating that
     an update for this cache is in progress.</li>

     <li><p>Let the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> be <i>idle</i>.</li>

     <li><p>For each <a href=#concept-task title=concept-task>task</a> in <var title="">task list</var>, <a href=#queue-a-post-load-task title="queue a post-load
     task">queue that task as a post-load task</a>.</li>

     <li><p>Abort the <a href=#application-cache-download-process>application cache download
     process</a>.</li>

    </ol></li>

   <li>

    <p>Otherwise, if <i>fetching the manifest</i> fails in some other
    way (e.g. the server returns another 4xx or 5xx response <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>, or
    there is a DNS error, or the connection times out, or the user
    cancels the download, or the parser for manifests fails when
    checking the magic signature), or if the server returned a
    redirect, or if the resource is labeled with a <a href=#mime-type>MIME
    type</a> other than <code><a href=#text/cache-manifest>text/cache-manifest</a></code>, then run
    the <a href=#cache-failure-steps>cache failure steps</a>.</p>

   </li>

   <li>

    <p>If this is an <a href=#concept-appcache-upgrade title=concept-appcache-upgrade>upgrade
    attempt</a> and the newly downloaded <var title="">manifest</var> is byte-for-byte identical to the manifest
    found in the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a>
    <a href=#application-cache>application cache</a> in <var title="">cache group</var>,
    or the server reported it as "304 Not Modified" <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>, then
    run these substeps:</p>

    <ol><li><p>Let <var title="">cache</var> be the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
     cache</a> in <var title="">cache group</var>.</li>

     <li><p>Let <var title="">task list</var> be an empty list of
     <a href=#concept-task title=concept-task>tasks</a>.</p>

     <li>

      <p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
      entries</a>, wait for the resource for this entry to have
      either completely downloaded or failed.</p>

      <p>If the download failed (e.g. the connection times out, or the
      user cancels the download), then create a <a href=#concept-task title=concept-task>task</a> to <a href=#fire-a-simple-event>fire a simple
      event</a> that is cancelable named <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> at the
      <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
      host</a> the <code><a href=#document>Document</a></code> for this entry, if there
      still is one, and add it to <var title="">task list</var>. The
      default action of this event must be, if the user agent
      <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
      user interface indicating to the user that the user agent failed
      to save the application for offline use.</p>

      <p>Otherwise, associate the <code><a href=#document>Document</a></code> for this entry
      with <var title="">cache</var>; store the resource for this
      entry in <var title="">cache</var>, if it isn't already there,
      and categorize its entry as a <a href=#concept-appcache-master title=concept-appcache-master>master entry</a>. If the
      resource's <a href=#url>URL</a> has a <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component, it must
      be removed from the entry in <var title="">cache</var>
      (application caches never include fragment identifiers).</p>

      <p class=note>HTTP caching rules, such as <code title="">Cache-Control: no-store</code>, are ignored for the
      purposes of the <a href=#application-cache-download-process>application cache download
      process</a>.</p>

     </li>

     <li><p>For each <a href=#cache-host>cache host</a> associated with an
     <a href=#application-cache>application cache</a> in <var title="">cache
     group</var>, create a <a href=#concept-task title=concept-task>task</a> to
     <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named <code title=event-appcache-noupdate><a href=#event-appcache-noupdate>noupdate</a></code> at the
     <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
     host</a>, and add it to <var title="">task list</var>. The
     default action of these events must be, if the user agent
     <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
     user interface indicating to the user that the application is up
     to date.</li>

     <li><p>Empty <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
     entries</a>.</li>

     <li><p>If appropriate, remove any user interface indicating that
     an update for this cache is in progress.</li>

     <li><p>Let the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> be <i>idle</i>.</li>

     <li><p>For each <a href=#concept-task title=concept-task>task</a> in <var title="">task list</var>, <a href=#queue-a-post-load-task title="queue a post-load
     task">queue that task as a post-load task</a>.</li>

     <li><p>Abort the <a href=#application-cache-download-process>application cache download
     process</a>.</li>

    </ol></li>

   <li><p>Let <var title="">new cache</var> be a newly created
   <a href=#application-cache>application cache</a> in <var title="">cache
   group</var>. Set its <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> to
   <i>incomplete</i>.</li>

   <li><p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   entries</a>, associate the <code><a href=#document>Document</a></code> for this entry
   with <var title="">new cache</var>.</li>

   <li><p>Set the <a href=#concept-appcache-status title=concept-appcache-status>status</a>
   of <var title="">cache group</var> to <i>downloading</i>.</li>

   <li><p>For each <a href=#cache-host>cache host</a> associated with an
   <a href=#application-cache>application cache</a> in <var title="">cache group</var>,
   <a href=#queue-a-post-load-task>queue a post-load task</a> to <a href=#fire-a-simple-event>fire a simple
   event</a> that is cancelable named <code title=event-appcache-downloading><a href=#event-appcache-downloading>downloading</a></code> at the
   <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   host</a>. The default action of these events must be, if the
   user agent <a href=#shows-caching-progress>shows caching progress</a>, the display of some
   sort of user interface indicating to the user that a new version is
   being downloaded.</li>

   <li><p>Let <var title="">file list</var> be an empty list of
   URLs with flags.</li>

   <li><p>Add all the URLs in the list of <a href=#concept-appcache-explicit title=concept-appcache-explicit>explicit entries</a> obtained
   by parsing <var title="">manifest</var> to <var title="">file
   list</var>, each flagged with "explicit entry".</li>

   <li><p>Add all the URLs in the list of <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entries</a> obtained
   by parsing <var title="">manifest</var> to <var title="">file
   list</var>, each flagged with "fallback entry".</li>

   <li><p>If this is an <a href=#concept-appcache-upgrade title=concept-appcache-upgrade>upgrade
   attempt</a>, then add all the URLs of <a href=#concept-appcache-master title=concept-appcache-master>master entries</a> in the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
   cache</a> in <var title="">cache group</var> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
   <i>complete</i> to <var title="">file list</var>, each flagged with
   "master entry".</li>

   <li><p>If any URL is in <var title="">file list</var> more than
   once, then merge the entries into one entry for that URL, that
   entry having all the flags that the original entries had.</li>

   <li>

    <p>For each URL in <var title="">file list</var>, run the
    following steps. These steps may be run in parallel for two or
    more of the URLs at a time.</p>

    <ol><li>

      <p>If the resource URL being processed was flagged as neither an
      "explicit entry" nor or a "fallback entry", then the user agent
      may skip this URL.</p>

      <p class=note>This is intended to allow user agents to expire
      resources not listed in the manifest from the cache. Generally,
      implementors are urged to use an approach that expires
      lesser-used resources first.</p>

     </li>

     <li><p>For each <a href=#cache-host>cache host</a> associated with an
     <a href=#application-cache>application cache</a> in <var title="">cache
     group</var>, <a href=#queue-a-post-load-task>queue a post-load task</a> to fire an event
     with the name <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>, which does not
     bubble, which is cancelable, and which uses the
     <code>ProgressEvent</code> interface, at the
     <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
     host</a>. The <code title=dom-ProgressEvents-lengthComputable>lengthComputable</code>
     attribute must be set to true, the <code title=dom-ProgressEvents-total>total</code> attribute must be
     set to the number of files in <var title="">file list</var>, and
     the <code title=dom-ProgressEvents-loaded>loaded</code>
     attribute must be set to the number of number of files in <var title="">file list</var> that have been either downloaded or
     skipped so far. The default action of these events must be, if
     the user agent <a href=#shows-caching-progress>shows caching progress</a>, the display
     of some sort of user interface indicating to the user that a file
     is being downloaded in preparation for updating the
     application. <a href=#refsPROGRESS>[PROGRESS]</a></li>

     <li>

      <p><a href=#fetch>Fetch</a> the resource, from the <a href=#origin>origin</a>
      of the <a href=#url>URL</a> <var title="">manifest URL</var>. If
      this is an <a href=#concept-appcache-upgrade title=concept-appcache-upgrade>upgrade
      attempt</a>, then use the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
      cache</a> in <var title="">cache group</var> as an HTTP
      cache, and honor HTTP caching semantics (such as expiration,
      ETags, and so forth) with respect to that cache. User agents may
      also have other caches in place that are also honored.</p> <!--
      not http-origin privacy sensitive -->

      <p class=note>If the resource in question is already being
      downloaded for other reasons then the existing download process
      can sometimes be used for the purposes of this step, as defined
      by the <a href=#fetch title=fetch>fetching</a> algorithm.</p>

      <p class=example>An example of a resource that might already
      be being downloaded is a large image on a Web page that is being
      seen for the first time. The image would get downloaded to
      satisfy the <code><a href=#the-img-element>img</a></code> element on the page, as well as
      being listed in the cache manifest. According to the rules for
      <a href=#fetch title=fetch>fetching</a> that image only need be
      downloaded once, and it can be used both for the cache and for
      the rendered Web page.</p>

     </li>

     <li>

      <p>If the previous step fails (e.g. the server returns a 4xx or
      5xx response <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or
      equivalent</a>, or there is a DNS error, or the connection
      times out, or the user cancels the download), or if the server
      returned a redirect, then run the first appropriate step from
      the following list:</p>

      <dl class=switch><dt>If the URL being processed was flagged as an "explicit
       entry" or a "fallback entry"</dt>

       <dd>

        <p>Run the <a href=#cache-failure-steps>cache failure steps</a>.</p>

        <p class=note>Redirects are fatal because they are either
        indicative of a network problem (e.g. a captive portal); or
        would allow resources to be added to the cache under URLs that
        differ from any URL that the networking model will allow
        access to, leaving orphan entries; or would allow resources to
        be stored under URLs different than their true URLs. All of
        these situations are bad.</p>

       </dd>

       <dt>If the error was a 404 or 410 HTTP response <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a></dt>

       <dd>

        <p>Skip this resource. It is dropped from the cache.</p>

       </dd>

       <dt>Otherwise</dt>

       <dd>

        <p>Copy the resource and its metadata from the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
        cache</a> in <var title="">cache group</var> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a>
        is <i>complete</i>, and act as if that was the fetched
        resource, ignoring the resource obtained from the network.</p>

       </dd>

      </dl><p>User agents may warn the user of these errors as an aid to
      development.</p>

      <p class=note>These rules make errors for resources listed in
      the manifest fatal, while making it possible for other resources
      to be removed from caches when they are removed from the server,
      without errors, and making non-manifest resources survive
      server-side errors.</p>

     </li>

     <li><p>Otherwise, the fetching succeeded. Store the resource in
     the <var title="">new cache</var>.</li>

     <li><p>If the URL being processed was flagged as an "explicit
     entry" in <var title="">file list</var>, then categorize the
     entry as an <a href=#concept-appcache-explicit title=concept-appcache-explicit>explicit
     entry</a>.</li>

     <li><p>If the URL being processed was flagged as a "fallback
     entry" in <var title="">file list</var>, then categorize the
     entry as a <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback
     entry</a>.</li>

     <li><p>If the URL being processed was flagged as an "master
     entry" in <var title="">file list</var>, then categorize the
     entry as a <a href=#concept-appcache-master title=concept-appcache-master>master
     entry</a>.</li>

     <li><p>As an optimization, if the resource is an HTML or XML file
     whose root element is an <code><a href=#the-html-element-0>html</a></code> element with a <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute whose value
     doesn't match the manifest URL of the application cache being
     processed, then the user agent should mark the entry as being
     <a href=#concept-appcache-foreign title=concept-appcache-foreign>foreign</a>.</p>

    </ol></li>

   <li><p>For each <a href=#cache-host>cache host</a> associated with an
   <a href=#application-cache>application cache</a> in <var title="">cache group</var>,
   <a href=#queue-a-post-load-task>queue a post-load task</a> to fire an event with the name
   <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>, which does
   not bubble, which is cancelable, and which uses the
   <code>ProgressEvent</code> interface, at the
   <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   host</a>. The <code title=dom-ProgressEvents-lengthComputable>lengthComputable</code>
   attribute must be set to true, the <code title=dom-ProgressEvents-total>total</code> and the <code title=dom-ProgressEvents-loaded>loaded</code> attributes must be
   set to the number of number of files in <var title="">file
   list</var>. The default action of these events must be, if the user
   agent <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort
   of user interface indicating to the user that all the files have
   been downloaded. <a href=#refsPROGRESS>[PROGRESS]</a></li>

   <li><p>Store the list of <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespaces</a>,
   and the URLs of the <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entries</a> that they
   map to, in <var title="">new cache</var>.</li>

   <li><p>Store the URLs that form the new <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a> in
   <var title="">new cache</var>.</li>

   <li><p>Store the value of the new <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   wildcard flag</a> in <var title="">new cache</var>.</li>

   <li>

    <p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
    entries</a>, wait for the resource for this entry to have
    either completely downloaded or failed.</p>

    <p>If the download failed (e.g. the connection times out, or the
    user cancels the download), then run these substeps:</p>

    <ol><li><p>Unassociate the <code><a href=#document>Document</a></code> for this entry from
     <var title="">new cache</var>.</li>

     <li><p><a href=#queue-a-post-load-task>Queue a post-load task</a> to <a href=#fire-a-simple-event>fire a simple
     event</a> that is cancelable named <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> at the
     <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the
     <code><a href=#document>Document</a></code> for this entry, if there still is one. The
     default action of this event must be, if the user agent
     <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
     user interface indicating to the user that the user agent failed
     to save the application for offline use.</p>

     <li>

      <p>If this is a <a href=#concept-appcache-cache title=concept-appcache-cache>cache
      attempt</a> and this entry is the last entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
      entries</a>, then run these further substeps:</p>

      <ol><li><p>Discard <var title="">cache group</var> and its only
       <a href=#application-cache>application cache</a>, <var title="">new
       cache</var>.</p>

       <li><p>If appropriate, remove any user interface indicating
       that an update for this cache is in progress.</li>

       <li><p>Abort the <a href=#application-cache-download-process>application cache download
       process</a>.</li>

      </ol></li>

     <li><p>Otherwise, remove this entry from <var title="">cache
     group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list
     of pending master entries</a>.</li>

    </ol><p>Otherwise, store the resource for this entry in <var title="">new cache</var>, if it isn't already there, and
    categorize its entry as a <a href=#concept-appcache-master title=concept-appcache-master>master entry</a>.</p>

   </li>

   <li>

    <p><a href=#fetch>Fetch</a> the resource from <var title="">manifest
    URL</var> again, and let <var title="">second manifest</var> be
    that resource.</p> <!-- http-origin privacy sensitive, though it
    doesn't matter, since this can never be cross-origin -->

   </li>

   <li>

    <p>If the previous step failed for any reason, or if the fetching
    attempt involved a redirect, or if <var title="">second
    manifest</var> and <var title="">manifest</var> are not
    byte-for-byte identical, then schedule a rerun of the entire
    algorithm with the same parameters after a short delay, and run
    the <a href=#cache-failure-steps>cache failure steps</a>.</p>

   </li>

   <li>

    <p>Otherwise, store <var title="">manifest</var> in <var title="">new cache</var>, if it's not there already, and
    categorize its entry as <a href=#concept-appcache-manifest title=concept-appcache-manifest>the manifest</a>.</p>

   </li>

   <li><p>Set the <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> of
   <var title="">new cache</var> to <i>complete</i>.</li>

   <li><p>Let <var title="">task list</var> be an empty list of <a href=#concept-task title=concept-task>tasks</a>.</p>

   <li>

    <p>If this is a <a href=#concept-appcache-cache title=concept-appcache-cache>cache
    attempt</a>, then for each <a href=#cache-host>cache host</a> associated
    with an <a href=#application-cache>application cache</a> in <var title="">cache
    group</var>, create a <a href=#concept-task title=concept-task>task</a> to
    <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named <code title=event-appcache-cached><a href=#event-appcache-cached>cached</a></code> at the
    <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
    host</a>, and add it to <var title="">task list</var>. The
    default action of these events must be, if the user agent
    <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
    user interface indicating to the user that the application has
    been cached and that they can now use it offline.</p>

    <p>Otherwise, it is an <a href=#concept-appcache-upgrade title=concept-appcache-upgrade>upgrade attempt</a>. For each
    <a href=#cache-host>cache host</a> associated with an <a href=#application-cache>application
    cache</a> in <var title="">cache group</var>, create a <a href=#concept-task title=concept-task>task</a> to <a href=#fire-a-simple-event>fire a simple
    event</a> that is cancelable named <code title=event-appcache-updateready><a href=#event-appcache-updateready>updateready</a></code> at the
    <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
    host</a>, and add it to <var title="">task list</var>. The
    default action of these events must be, if the user agent
    <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
    user interface indicating to the user that a new version is
    available and that they can activate it by reloading the page.</p>

   </li>

   <li><p>If appropriate, remove any user interface indicating that
   an update for this cache is in progress.</li>

   <li><p>Set the <a href=#concept-appcache-status title=concept-appcache-status>update
   status</a> of <var title="">cache group</var> to
   <i>idle</i>.</li>

   <li><p>For each <a href=#concept-task title=concept-task>task</a> in <var title="">task list</var>, <a href=#queue-a-post-load-task title="queue a post-load
   task">queue that task as a post-oad task</a>.</li>

  </ol><p>The <dfn id=cache-failure-steps>cache failure steps</dfn> are as follows:</p>

  <ol><li><p>Let <var title="">task list</var> be an empty list of <a href=#concept-task title=concept-task>tasks</a>.</p>

   <li>

    <p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
    entries</a>, run the following further substeps. These steps
    may be run in parallel for two or more entries at a time.</p>

    <ol><li><p>Wait for the resource for this entry to have either
     completely downloaded or failed.</p>

     <li><p>Unassociate the <code><a href=#document>Document</a></code> for this entry from
     its <a href=#application-cache>application cache</a>, if it has one.</li>

     <li><p>Create a <a href=#concept-task title=concept-task>task</a> to
     <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> at the
     <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the
     <code><a href=#document>Document</a></code> for this entry, if there still is one, and
     add it to <var title="">task list</var>. The default action of
     these events must be, if the user agent <a href=#shows-caching-progress>shows caching
     progress</a>, the display of some sort of user interface
     indicating to the user that the user agent failed to save the
     application for offline use.</p>

    </ol></li>

   <li><p>For each <a href=#cache-host>cache host</a> still associated with an
   <a href=#application-cache>application cache</a> in <var title="">cache group</var>,
   create a <a href=#concept-task title=concept-task>task</a> to <a href=#fire-a-simple-event>fire a
   simple event</a> that is cancelable named <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> at the
   <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   host</a>, and add it to <var title="">task list</var>. The
   default action of these events must be, if the user agent
   <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
   user interface indicating to the user that the user agent failed to
   save the application for offline use.</li>

   <li><p>Empty <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   entries</a>.</li>

   <li><p>If <var title="">cache group</var> has an <a href=#application-cache>application
   cache</a> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
   <i>incomplete</i>, then discard that <a href=#application-cache>application
   cache</a>.</p>

   <li><p>If appropriate, remove any user interface indicating that an
   update for this cache is in progress.</li>

   <li><p>Let the <a href=#concept-appcache-status title=concept-appcache-status>status</a>
   of <var title="">cache group</var> be <i>idle</i>.</li>

   <li><p>If this was a <a href=#concept-appcache-cache title=concept-appcache-cache>cache
   attempt</a>, discard <var title="">cache group</var>
   altogether.</p>

   <li><p>For each <a href=#concept-task title=concept-task>task</a> in <var title="">task list</var>, <a href=#queue-a-post-load-task title="queue a post-load
   task">queue that task as a post-load task</a>.</li>

   <li><p>Abort the <a href=#application-cache-download-process>application cache download
   process</a>.</li>

  </ol><p>Attempts to <a href=#fetch>fetch</a> resources as part of the
  <a href=#application-cache-download-process>application cache download process</a> may be done with
  cache-defeating semantics, to avoid problems with stale or
  inconsistent intermediary caches.</p>

  <hr><p>User agents may invoke the <a href=#application-cache-download-process>application cache download
  process</a>, in the background, for any <a href=#application-cache>application
  cache</a>, at any time (with no <a href=#cache-host>cache host</a>). This
  allows user agents to keep caches primed and to update caches even
  before the user visits a site.</p>

  <hr><p>Each <code><a href=#document>Document</a></code> has a list of <dfn id=pending-application-cache-download-process-tasks>pending application
  cache download process tasks</dfn> that is used to delay events
  fired by the algorithm above until the document's <code title=event-load>load</code> event has fired. When the
  <code><a href=#document>Document</a></code> is created, the list must be empty.</p>

  <p>When the steps above say to <dfn id=queue-a-post-load-task>queue a post-load task</dfn>
  <var title="">task</var>, where <var title="">task</var> is a <a href=#concept-task title=concept-task>task</a> that dispatches an event on a
  target <code><a href=#applicationcache>ApplicationCache</a></code> object <var title="">target</var>, the user agent must run the appropriate steps
  from the following list:</p>

  <dl><dt>If <var title="">target</var>'s <code><a href=#document>Document</a></code> has
   <a href=#completely-loaded>completely loaded</a></dt>

   <dd><p><a href=#queue-a-task title="queue a task">Queue</a> the task <var title="">task</var>.</dd>

   <dt>Otherwise</dt>

   <dd><p>Add <var title="">task</var> to <var title="">target</var>'s
   <code><a href=#document>Document</a></code>'s list of <a href=#pending-application-cache-download-process-tasks>pending application cache
   download process tasks</a>.</dd>

  </dl><p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#networking-task-source>networking task
  source</a>.</p>




  <h4 id=the-application-cache-selection-algorithm><span class=secno>6.6.5 </span>The application cache selection algorithm</h4>

  <p>When the <dfn id=concept-appcache-init title=concept-appcache-init>application cache
  selection algorithm</dfn> algorithm is invoked with a
  <code><a href=#document>Document</a></code> <var title="">document</var> and optionally a
  manifest <a href=#url>URL</a> <var title="">manifest URL</var>, the user
  agent must run the first applicable set of steps from the following
  list:</p>

  <dl class=switch><dt>If there is a <var title="">manifest URL</var>, and <var title="">document</var> was loaded from an <a href=#application-cache>application
   cache</a>, and the URL of the <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> of that cache's
   <a href=#application-cache-group>application cache group</a> is <em>not</em> the same as
   <var title="">manifest URL</var></dt>

   <dd>

    <p>Mark the entry for the resource from which <var title="">document</var> was taken in the <a href=#application-cache>application
    cache</a> from which it was loaded as <a href=#concept-appcache-foreign title=concept-appcache-foreign>foreign</a>.</p>

    <p>Restart the current navigation from the top of the <a href=#navigate title=navigate>navigation algorithm</a>, undoing any changes
    that were made as part of the initial load (changes can be avoided
    by ensuring that the step to <a href=#update-the-session-history-with-the-new-page>update the session history with
    the new page</a> is only ever completed <em>after</em> this
    <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
    algorithm</a> is run, though this is not required).</p>

    <p class=note>The navigation will not result in the same
    resource being loaded, because "foreign" entries are never picked
    during navigation.</p>

    <p>User agents may notify the user of the inconsistency between
    the cache manifest and the document's own metadata, to aid in
    application development.</p>

   </dd>


   <dt>If <var title="">document</var> was loaded from an
   <a href=#application-cache>application cache</a><!--[redundant], and either there is
   no <var title="">manifest URL</var>, or the URL of the <span
   title="concept-appcache-manifest">manifest</span> of the cache's
   <span>application cache group</span> is the same as <var
   title="">manifest URL</var>--></dt>

   <dd>

    <p>Associate <var title="">document</var> with the
    <a href=#application-cache>application cache</a> from which it was loaded. Invoke,
    in the background, the <a href=#application-cache-download-process>application cache download
    process</a> for that <a href=#application-cache>application cache</a>'s
    <a href=#application-cache-group>application cache group</a>, with <var title="">document</var> as the <a href=#cache-host>cache host</a>.</p>

   </dd>


   <dt>If <var title="">document</var> <!--[redundant] was not loaded
   from an <span>application cache</span>, but it--> was loaded using
   HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   equivalent</a>, and, there is a <var title="">manifest
   URL</var>, and <var title="">manifest URL</var> has the <a href=#same-origin>same
   origin</a> as <var title="">document</var></dt>

   <dd>

    <p>Invoke, in the background, the <a href=#application-cache-download-process>application cache download
    process</a> for <var title="">manifest URL</var>, with <var title="">document</var> as the <a href=#cache-host>cache host</a> and with
    the resource from which <var title="">document</var> was parsed as
    the <a href=#concept-appcache-master title=concept-appcache-master>master</a>
    resource.</p>

   </dd>


   <dt>Otherwise</dt> <!-- not from cache and either no <var
   title="">manifest URL</var>, or non-GET, or wrong-origin manifest -->

   <dd>

    <p>The <code><a href=#document>Document</a></code> is not associated with any
    <a href=#application-cache>application cache</a>.</p>

    <p>If there was a <var title="">manifest URL</var>, the user agent
    may report to the user that it was ignored, to aid in application
    development.</p>

   </dd>

  </dl><h4 id=changesToNetworkingModel><span class=secno>6.6.6 </span>Changes to the networking model</h4>

  <p>When a <a href=#cache-host>cache host</a> is associated with an
  <a href=#application-cache>application cache</a> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
  <i>complete</i>, any and all loads for resources related to that
  <a href=#cache-host>cache host</a> other than those for <a href=#child-browsing-context title="child
  browsing context">child browsing contexts</a> must go through the
  following steps instead of immediately invoking the mechanisms
  appropriate to that resource's scheme:</p>

  <ol><li><p>If the resource is not to be fetched using the HTTP GET
   mechanism <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   equivalent</a>, or if its <a href=#url>URL</a> has a different <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component than the
   <a href=#application-cache>application cache</a>'s <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>, then
   <a href=#fetch>fetch</a> the resource normally and abort these
   steps.</li>

   <li><p>If the resource's URL is <a href=#concept-appcache-master title=concept-appcache-master>a master entry</a>, <a href=#concept-appcache-manifest title=concept-appcache-manifest>the manifest</a>, <a href=#concept-appcache-explicit title=concept-appcache-explicit>an explicit entry</a>, or
   <a href=#concept-appcache-fallback title=concept-appcache-fallback>a fallback entry</a> in
   the <a href=#application-cache>application cache</a>, then get the resource from the
   cache (instead of fetching it), and abort these steps.</li>

   <li><p>If there is an entry in the <a href=#application-cache>application cache</a>'s
   <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online
   whitelist</a> that has the <a href=#same-origin>same origin</a> as the
   resource's URL and that is a <a href=#prefix-match>prefix match</a> for the
   resource's URL, then <a href=#fetch>fetch</a> the resource normally and
   abort these steps.</li>

   <li>

    <p>If the resource's URL has the <a href=#same-origin>same origin</a> as the
    manifest's URL, and there is a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>
    <var title="">f</var> in the <a href=#application-cache>application cache</a> that
    is a <a href=#prefix-match>prefix match</a> for the resource's URL, then:</p>

    <p><a href=#fetch>Fetch</a> the resource normally. If this results in a
    redirect to a resource with another <a href=#origin>origin</a>
    (indicative of a captive portal), or a 4xx or 5xx status code
    <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>,
    or if there were network errors (but not if the user canceled the
    download), then instead get, from the cache, the resource of the
    <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entry</a>
    corresponding to the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>
    <var title="">f</var>. Abort these steps.</p>

   </li>

   <li><p>If the <a href=#application-cache>application cache</a>'s <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   wildcard flag</a> is <i title="">open</i>, then
   <a href=#fetch>fetch</a> the resource normally and abort these
   steps.</li>

   <li><p>Fail the resource load as if there had been a generic
   network error.</li>

  </ol><p class=note>The above algorithm ensures that so long as the
  <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online
  whitelist wildcard flag</a> is <i title="">blocking</i>,
  resources that are not present in the <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> will always fail
  to load (at least, after the <a href=#application-cache>application cache</a> has been
  primed the first time), making the testing of offline applications
  simpler.</p>

  </div>


  <h4 id=expiring-application-caches><span class=secno>6.6.7 </span>Expiring application caches</h4>

  <p>As a general rule, user agents should not expire application
  caches, except on request from the user, or after having been left
  unused for an extended period of time.</p>

  <p>Application caches and cookies have similar implications with
  respect to privacy (e.g. if the site can identify the user when
  providing the cache, it can store data in the cache that can be used
  for cookie resurrection). Implementors are therefore encouraged to
  expose application caches in a manner related to HTTP cookies,
  allowing caches to be expunged together with cookies and other
  origin-specific data.</p>

  <p class=example>For example, a user agent could have a "delete
  site-specific data" feature that clears all cookies, application
  caches, local storage, databases, etc, from an origin all at
  once.</p>



  <h4 id=application-cache-api><span class=secno>6.6.8 </span>Application cache API</h4>

  <pre class=idl>interface <dfn id=applicationcache>ApplicationCache</dfn> {

  // <a href=#concept-appcache-status title=concept-appcache-status>update status</a>
  const unsigned short <a href=#dom-appcache-uncached title=dom-appcache-UNCACHED>UNCACHED</a> = 0;
  const unsigned short <a href=#dom-appcache-idle title=dom-appcache-IDLE>IDLE</a> = 1;
  const unsigned short <a href=#dom-appcache-checking title=dom-appcache-CHECKING>CHECKING</a> = 2;
  const unsigned short <a href=#dom-appcache-downloading title=dom-appcache-DOWNLOADING>DOWNLOADING</a> = 3;
  const unsigned short <a href=#dom-appcache-updateready title=dom-appcache-UPDATEREADY>UPDATEREADY</a> = 4;
  const unsigned short <a href=#dom-appcache-obsolete title=dom-appcache-OBSOLETE>OBSOLETE</a> = 5;
  readonly attribute unsigned short <a href=#dom-appcache-status title=dom-appcache-status>status</a>;

  // updates
  void <a href=#dom-appcache-update title=dom-appcache-update>update</a>();
  void <a href=#dom-appcache-swapcache title=dom-appcache-swapCache>swapCache</a>();

  // events
           attribute <a href=#function>Function</a> <a href=#handler-appcache-onchecking title=handler-appcache-onchecking>onchecking</a>;
           attribute <a href=#function>Function</a> <a href=#handler-appcache-onerror title=handler-appcache-onerror>onerror</a>;
           attribute <a href=#function>Function</a> <a href=#handler-appcache-onnoupdate title=handler-appcache-onnoupdate>onnoupdate</a>;
           attribute <a href=#function>Function</a> <a href=#handler-appcache-ondownloading title=handler-appcache-ondownloading>ondownloading</a>;
           attribute <a href=#function>Function</a> <a href=#handler-appcache-onprogress title=handler-appcache-onprogress>onprogress</a>;
           attribute <a href=#function>Function</a> <a href=#handler-appcache-onupdateready title=handler-appcache-onupdateready>onupdateready</a>;
           attribute <a href=#function>Function</a> <a href=#handler-appcache-oncached title=handler-appcache-oncached>oncached</a>;
           attribute <a href=#function>Function</a> <a href=#handler-appcache-onobsolete title=handler-appcache-onobsolete>onobsolete</a>;
};
<a href=#applicationcache>ApplicationCache</a> implements <a href=#eventtarget>EventTarget</a>;</pre>

  <dl class=domintro><dt><var title="">cache</var> = <var title="">window</var> . <code title=dom-applicationCache><a href=#dom-applicationcache>applicationCache</a></code></dt>
   <dd>

    <p>(In a window.) Returns the <code><a href=#applicationcache>ApplicationCache</a></code> object that applies to the <a href=#active-document>active document</a> of that <code><a href=#window>Window</a></code>.</p>

   </dd>

   <dt><var title="">cache</var> = <var title="">self</var> . <code title=dom-applicationCache><a href=#dom-applicationcache>applicationCache</a></code></dt>
   <dd>

    <p>(In a shared worker.) Returns the <code><a href=#applicationcache>ApplicationCache</a></code> object that applies to the current shared worker.
    
    <a href=#refsWEBWORKERS>[WEBWORKERS]</a>
    
    </p>

   </dd>

   <dt><var title="">cache</var> . <code title=dom-appcache-status><a href=#dom-appcache-status>status</a></code></dt>
   <dd>

    <p>Returns the current status of the application cache, as given by the constants defined below.</p>

   </dd>

   <dt><var title="">cache</var> . <code title=dom-appcache-update><a href=#dom-appcache-update>update</a></code>()</dt>
   <dd>

    <p>Invokes the <a href=#application-cache-download-process>application cache download process</a>.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if there is no application cache to update.</p>

   </dd>

   <dt><var title="">cache</var> . <code title=dom-appcache-swapCache><a href=#dom-appcache-swapcache>swapCache</a></code>()</dt>
   <dd>

    <p>Switches to the most recent application cache, if there is a
    newer one. If there isn't, throws an
    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception.</p>

    <p>This does not cause previously-loaded resources to be reloaded;
    for example, images do not suddenly get reloaded and style sheets
    and scripts do not get reparsed or reevaluated. The only change is
    that subsequent requests for cached resources will obtain the
    newer copies.</p>

   </dd>

  </dl><div class=impl>

  <p>There is a one-to-one mapping from <a href=#cache-host title="cache host">cache
  hosts</a> to <code><a href=#applicationcache>ApplicationCache</a></code> objects. The <dfn id=dom-applicationcache title=dom-applicationCache><code>applicationCache</code></dfn>
  attribute on <code><a href=#window>Window</a></code> objects must return the
  <code><a href=#applicationcache>ApplicationCache</a></code> object associated with the
  <code><a href=#window>Window</a></code> object's <a href=#active-document>active document</a>. The <dfn id=dom-sharedworkerglobalscope-applicationcache title=dom-SharedWorkerGlobalScope-applicationCache><code>applicationCache</code></dfn>
  attribute on <code>SharedWorkerGlobalScope</code> objects must
  return the <code><a href=#applicationcache>ApplicationCache</a></code> object associated with the
  worker.
  
  <a href=#refsWEBWORKERS>[WEBWORKERS]</a>
  
  </p>

  <p class=note>A <code><a href=#window>Window</a></code> or
  <code>SharedWorkerGlobalScope</code> object has an associated
  <code><a href=#applicationcache>ApplicationCache</a></code> object even if that <a href=#cache-host>cache
  host</a> has no actual <a href=#application-cache>application cache</a>.</p>

  <hr><p>The <dfn id=dom-appcache-status title=dom-appcache-status><code>status</code></dfn>
  attribute, on getting, must return the current state of the
  <a href=#application-cache>application cache</a> that the
  <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache host</a> is
  associated with, if any. This must be the appropriate value from the
  following list:</p>

  </div>

  <dl><dt><dfn id=dom-appcache-uncached title=dom-appcache-UNCACHED><code>UNCACHED</code></dfn>
   (numeric value 0)</dt>

   <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   host</a> is not associated with an <a href=#application-cache>application
   cache</a> at this time.</dd>

   <dt><dfn id=dom-appcache-idle title=dom-appcache-IDLE><code>IDLE</code></dfn>
   (numeric value 1)</dt>

   <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   host</a> is associated with an <a href=#application-cache>application cache</a>
   whose <a href=#application-cache-group>application cache group</a>'s <a href=#concept-appcache-status title=concept-appcache-status>update status</a> is
   <i>idle</i>, and that <a href=#application-cache>application cache</a> is the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> cache in its
   <a href=#application-cache-group>application cache group</a>, and the <a href=#application-cache-group>application
   cache group</a> is not marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>.</dd>

   <dt><dfn id=dom-appcache-checking title=dom-appcache-CHECKING><code>CHECKING</code></dfn>
   (numeric value 2)</dt>

   <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   host</a> is associated with an <a href=#application-cache>application cache</a>
   whose <a href=#application-cache-group>application cache group</a>'s <a href=#concept-appcache-status title=concept-appcache-status>update status</a> is
   <i>checking</i>.</dd>

   <dt><dfn id=dom-appcache-downloading title=dom-appcache-DOWNLOADING><code>DOWNLOADING</code></dfn>
   (numeric value 3)</dt>

   <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   host</a> is associated with an <a href=#application-cache>application cache</a>
   whose <a href=#application-cache-group>application cache group</a>'s <a href=#concept-appcache-status title=concept-appcache-status>update status</a> is
   <i>downloading</i>.</dd>

   <dt><dfn id=dom-appcache-updateready title=dom-appcache-UPDATEREADY><code>UPDATEREADY</code></dfn>
   (numeric value 4)</dt>

   <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   host</a> is associated with an <a href=#application-cache>application cache</a>
   whose <a href=#application-cache-group>application cache group</a>'s <a href=#concept-appcache-status title=concept-appcache-status>update status</a> is
   <i>idle</i>, and whose <a href=#application-cache-group>application cache group</a> is not
   marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>,
   but that <a href=#application-cache>application cache</a> is <em>not</em> the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> cache in its
   group.</dd>

   <dt><dfn id=dom-appcache-obsolete title=dom-appcache-OBSOLETE><code>OBSOLETE</code></dfn>
   (numeric value 5)</dt>

   <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   host</a> is associated with an <a href=#application-cache>application cache</a>
   whose <a href=#application-cache-group>application cache group</a> is marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>.</dd>

  </dl><div class=impl>

  <hr><p>If the <dfn id=dom-appcache-update title=dom-appcache-update><code>update()</code></dfn> method is
  invoked, the user agent must invoke the <a href=#application-cache-download-process>application cache
  download process</a>, in the background, for the <a href=#application-cache>application
  cache</a> with which the <code><a href=#applicationcache>ApplicationCache</a></code> object's
  <a href=#cache-host>cache host</a> is associated, but without giving that
  <a href=#cache-host>cache host</a> to the algorithm. If there is no such
  <a href=#application-cache>application cache</a>, or if it is marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>, then the method
  must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception instead.</p>

  <p>If the <dfn id=dom-appcache-swapcache title=dom-appcache-swapCache><code>swapCache()</code></dfn> method
  is invoked, the user agent must run the following steps:

  <ol><li><p>Check that <code><a href=#applicationcache>ApplicationCache</a></code> object's
   <a href=#cache-host>cache host</a> is associated with an <a href=#application-cache>application
   cache</a>. If it is not, then raise an
   <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
   steps.</li>

   <li><p>Let <var title="">cache</var> be the <a href=#application-cache>application
   cache</a> with which the <code><a href=#applicationcache>ApplicationCache</a></code> object's
   <a href=#cache-host>cache host</a> is associated. (By definition, this is the
   same as the one that was found in the previous step.)</li>

   <li><p>If <var title="">cache</var>'s <a href=#application-cache-group>application cache
   group</a> is marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>, then unassociate
   the <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache host</a>
   from <var title="">cache</var> and abort these steps. (Resources
   will now load from the network instead of the cache.)</li>

   <li><p>Check that there is an application cache in the same
   <a href=#application-cache-group>application cache group</a> as <var title="">cache</var>
   whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness
   flag</a> is <i>complete</i> and that is <a href=#concept-appcache-newer title=concept-appcache-newer>newer</a> than <var title="">cache</var>. If there is not, then raise an
   <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
   steps.</li>

   <li><p>Let <var title="">new cache</var> be the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
   cache</a> in the same <a href=#application-cache-group>application cache group</a> as
   <var title="">cache</var> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
   <i>complete</i>.</li>

   <li><p>Unassociate the <code><a href=#applicationcache>ApplicationCache</a></code> object's
   <a href=#cache-host>cache host</a> from <var title="">cache</var> and instead
   associate it with <var title="">new cache</var>.</li>

  </ol><p>The following are the <a href=#event-handlers>event handlers</a> (and their
  corresponding <a href=#event-handler-event-type title="event handler event type">event handler
  event types</a>) that must be supported, as IDL attributes, by
  all objects implementing the <code><a href=#applicationcache>ApplicationCache</a></code>
  interface:</p>

  <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn id=handler-appcache-onchecking title=handler-appcache-onchecking><code>onchecking</code></dfn> <td> <code title=event-appcache-checking><a href=#event-appcache-checking>checking</a></code>
    <tr><td><dfn id=handler-appcache-onerror title=handler-appcache-onerror><code>onerror</code></dfn> <td> <code title=event-appcache-error><a href=#event-appcache-error>error</a></code>
    <tr><td><dfn id=handler-appcache-onnoupdate title=handler-appcache-onnoupdate><code>onnoupdate</code></dfn> <td> <code title=event-appcache-noupdate><a href=#event-appcache-noupdate>noupdate</a></code>
    <tr><td><dfn id=handler-appcache-ondownloading title=handler-appcache-ondownloading><code>ondownloading</code></dfn> <td> <code title=event-appcache-downloading><a href=#event-appcache-downloading>downloading</a></code>
    <tr><td><dfn id=handler-appcache-onprogress title=handler-appcache-onprogress><code>onprogress</code></dfn> <td> <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>
    <tr><td><dfn id=handler-appcache-onupdateready title=handler-appcache-onupdateready><code>onupdateready</code></dfn> <td> <code title=event-appcache-updateready><a href=#event-appcache-updateready>updateready</a></code>
    <tr><td><dfn id=handler-appcache-oncached title=handler-appcache-oncached><code>oncached</code></dfn> <td> <code title=event-appcache-cached><a href=#event-appcache-cached>cached</a></code>
    <tr><td><dfn id=handler-appcache-onobsolete title=handler-appcache-onobsolete><code>onobsolete</code></dfn> <td> <code title=event-appcache-obsolete><a href=#event-appcache-obsolete>obsolete</a></code>
  </table></div>


  <h4 id=browser-state><span class=secno>6.6.9 </span>Browser state</h4>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-onLine><a href=#dom-navigator-online>onLine</a></code></dt>

   <dd>

    <p>Returns false if the user agent is definitely offline
    (disconnected from the network). Returns true if the user agent
    might be online.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-navigator-online title=dom-navigator-onLine><code>navigator.onLine</code></dfn>
  attribute must return false if the user agent will not contact the
  network when the user follows links or when a script requests a
  remote page (or knows that such an attempt would fail), and must
  return true otherwise.</p>

  <p>When the value that would be returned by the <code title=dom-navigator-onLine><a href=#dom-navigator-online>navigator.onLine</a></code> attribute of
  the <code><a href=#window>Window</a></code> changes from true to false, the user agent
  must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
  named <dfn id=event-offline title=event-offline><code>offline</code></dfn> at the
  <code><a href=#window>Window</a></code> object.</p>

  <p>On the other hand, when the value that would be returned by the
  <code title=dom-navigator-onLine><a href=#dom-navigator-online>navigator.onLine</a></code> attribute
  of the <code><a href=#window>Window</a></code> changes from false to true, the user
  agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
  event</a> named <dfn id=event-online title=event-online><code>online</code></dfn> at the
  <code><a href=#window>Window</a></code> object.</p>

  <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#networking-task-source>networking task
  source</a>.</p>

  </div>

  <p class=note>This attribute is inherently unreliable. A computer
  can be connected to a network without having Internet access.</p>



  <h2 id=webappapis><span class=secno>7 </span>Web application APIs</h2>

  <h3 id=scripting><span class=secno>7.1 </span>Scripting</h3>

  <h4 id=introduction-4><span class=secno>7.1.1 </span>Introduction</h4>

  <p>Various mechanisms can cause author-provided executable code to
  run in the context of a document. These mechanisms include, but are
  probably not limited to:</p>

  <ul><li>Processing of <code><a href=#script>script</a></code> elements.</li>

   <li>Processing of inline <code title="javascript
   protocol"><a href=#javascript-protocol>javascript:</a></code> URLs (e.g. the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute of <code><a href=#the-img-element>img</a></code>
   elements, or an <code title="">@import</code> rule in a CSS
   <code><a href=#the-style-element>style</a></code> element block).</li>

   <li>Event handlers, whether registered through the DOM using <code title="">addEventListener()</code>, by explicit <a href=#event-handler-content-attributes>event handler
   content attributes</a>, by <a href=#event-handler-idl-attributes>event handler IDL
   attributes</a>, or otherwise.</li>

   <li>Processing of technologies like XBL or SVG that have their own
   scripting features.</li>

  </ul><div class=impl>

  <h4 id=enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</h4>

  <p><dfn id=concept-bc-script title=concept-bc-script>Scripting is enabled</dfn> in a
  <em><a href=#browsing-context>browsing context</a></em> when all of the
  following conditions are true:</p>

  <ul><li>The user agent supports scripting.</li>

   <li>The user has not disabled scripting for this <a href=#browsing-context>browsing
   context</a> at this time. (User agents may provide users with
   the option to disable scripting globally, or in a finer-grained
   manner, e.g. on a per-origin basis.)</li>

   <li id=sandboxScriptBlocked>The <a href=#browsing-context>browsing context</a> did
   not have the <a href=#sandboxed-scripts-browsing-context-flag>sandboxed scripts browsing context flag</a>
   set when the <a href=#browsing-context>browsing context</a>'s <a href=#active-document>active
   document</a> was created.</li>

  </ul><p><dfn id=concept-bc-noscript title=concept-bc-noscript>Scripting is disabled</dfn> in a
  <a href=#browsing-context>browsing context</a> when any of the above conditions are
  false (i.e. when scripting is not <a href=#concept-bc-script title=concept-bc-script>enabled</a>).</p>

  <hr><p><dfn id=concept-n-script title=concept-n-script>Scripting is enabled</dfn> for a
  <em>node</em> if the <code><a href=#document>Document</a></code> object of the node (the
  node itself, if it is itself a <code><a href=#document>Document</a></code> object) has an
  associated <a href=#browsing-context>browsing context</a>, and <a href=#concept-bc-script title=concept-bc-script>scripting is enabled</a> in that
  <a href=#browsing-context>browsing context</a>.</p>

  <p><dfn id=concept-n-noscript title=concept-n-noscript>Scripting is disabled</dfn> for a
  node if there is no such <a href=#browsing-context>browsing context</a>, or if <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is disabled</a> in that
  <a href=#browsing-context>browsing context</a>.</p>

  </div>


  <div class=impl>

  <!-- SCRIPT EXEC (marks areas related to creation of scripts) -->
  <h4 id=processing-model-1><span class=secno>7.1.3 </span>Processing model</h4>

  <h5 id=definitions-0><span class=secno>7.1.3.1 </span>Definitions</h5>

  <p>A <dfn id=concept-script title=concept-script>script</dfn> has:</p>

  <dl><dt>A <dfn id=script-execution-environment>script execution environment</dfn></dt>

   <dd>

    <p>The characteristics of the script execution environment depend
    on the language, and are not defined by this specification.</p>

    <p class=example>In JavaScript, the script execution environment
    consists of the interpreter, the stack of <i>execution
    contexts</i>, the <i>global code</i> and <i>function code</i> and
    the Function objects resulting, and so forth.</p>

   </dd>

   <dt>A <dfn id=list-of-code-entry-points>list of code entry-points</dfn></dt>

   <dd>

    <p>Each code entry-point represents a block of executable code
    that the script exposes to other scripts and to the user
    agent.</p>

    <p class=example>Each Function object in a JavaScript
    <a href=#script-execution-environment>script execution environment</a> has a corresponding code
    entry-point, for instance.</p>

    <p>The main program code of the script, if any, is the
    <dfn id=initial-code-entry-point><i>initial code entry-point</i></dfn>. Typically, the code
    corresponding to this entry-point is executed immediately after
    the script is parsed.</p>

    <p class=example>In JavaScript, this corresponds to the
    execution context of the global code.</p>

   </dd>

   <dt>A relationship with the <dfn id="script's-global-object">script's global object</dfn></dt>

   <dd>

    <p>An object that provides the APIs that the code can use.</p>

    <p class=example>This is typically a <code><a href=#window>Window</a></code>
    object. In JavaScript, this corresponds to the <i>global
    object</i>.</p>

    <p class=note>When a <a href="#script's-global-object">script's global object</a> is an
    empty object, it can't do anything that interacts with the
    environment.</p>

    <p>If the <a href="#script's-global-object">script's global object</a> is a
    <code><a href=#window>Window</a></code> object, then in JavaScript, the ThisBinding of
    the global execution context for this script must be the
    <code><a href=#window>Window</a></code> object's <code><a href=#windowproxy>WindowProxy</a></code> object,
    rather than the global object. <a href=#refsECMA262>[ECMA262]</a></p>

    <p class=note>This is a <a href=#willful-violation>willful violation</a> of the
    JavaScript specification current at the time of writing
    (ECMAScript edition 5, as defined in section 10.4.1.1 Initial
    Global Execution Context, step 3). The JavaScript specification
    requires that the <code title="">this</code> keyword in the global
    scope return the global object, but this is not compatible with
    the security design prevalent in implementations as specified
    herein. <a href=#refsECMA262>[ECMA262]</a></p>

   </dd>

   <dt>A relationship with the <dfn id="script's-browsing-context">script's browsing context</dfn></dt>

   <dd>

    <p>A <a href=#browsing-context>browsing context</a> that is assigned responsibility
    for actions taken by the script.</p>

    <p class=example>When a script creates and <a href=#navigate title=navigate>navigates</a> a new <a href=#top-level-browsing-context>top-level browsing
    context</a>, the <code title=dom-opener><a href=#dom-opener>opener</a></code>
    attribute of the new <a href=#browsing-context>browsing context</a>'s
    <code><a href=#window>Window</a></code> object will be set to the <a href="#script's-browsing-context">script's
    browsing context</a>'s <code><a href=#windowproxy>WindowProxy</a></code> object.</p>

   </dd>

   <dt>A relationship with the <dfn id="script's-document">script's document</dfn></dt>

   <dd>

    <p>A <code><a href=#document>Document</a></code> that is assigned responsibility for
    actions taken by the script.</p>

    <p class=example>When a script <a href=#fetch title=fetch>fetches</a> a resource, the <a href="#the-document's-current-address" title="the
    document's current address">current address</a> of the
    <a href="#script's-document">script's document</a> will be used to set the <code title=http-referer>Referer</code> (sic) header.</p>

   </dd>

   <dt>A <dfn id="script's-url-character-encoding" title="script's URL character encoding">URL character encoding</dfn></dt>

   <dd>

    <p>A character encoding, set when the script is created, used to
    encode URLs. <span id=sce-not-copy title="">If the character
    encoding is set from another source, e.g. a <a href="#document's-character-encoding">document's
    character encoding</a>, then the <a href="#script's-url-character-encoding">script's URL character
    encoding</a> must follow the source, so that if the source's
    changes, so does the script's.</span></p>

   </dd>

   <dt>A <dfn id="script's-base-url" title="script's base URL">base URL</dfn></dt>

   <dd>

    <p>A <a href=#url>URL</a>, set when the script is created, used to
    resolve relative URLs. <span id=sbu-not-copy title="">If the
    base URL is set from another source, e.g. a <a href=#document-base-url>document base
    URL</a>, then the <a href="#script's-base-url">script's base URL</a> must follow
    the source, so that if the source's changes, so does the
    script's.</span></p>

   </dd>

  </dl></div>


  <div class=impl>

  <h5 id=calling-scripts><span class=secno>7.1.3.2 </span>Calling scripts</h5>

  <p>When a user agent is to <dfn id=jump-to-a-code-entry-point>jump to a code entry-point</dfn> for
  a <a href=#concept-script title=concept-script>script</a>, for example to invoke
  an event listener defined in that <a href=#concept-script title=concept-script>script</a>, the user agent must run the
  following steps:</p>

  <ol><li><p>If the <a href="#script's-global-object">script's global object</a> is a
   <code><a href=#window>Window</a></code> object whose <code><a href=#document>Document</a></code> object is
   not <a href=#fully-active>fully active</a>, then abort these steps without doing
   anything. The callback is not fired.</p>

   <li><p>Set the <a href=#entry-script>entry script</a> to be the <a href=#concept-script title=concept-script>script</a> being invoked.</li>

   <li><p>Make the <a href=#script-execution-environment title="script execution environment">script
   execution environment</a> for the <a href=#concept-script title=concept-script>script</a> execute the code for the given
   code entry-point.</li>

   <li><p>Set the <a href=#entry-script>entry script</a> back to whatever it was
   when this algorithm started.</li>

  </ol><p>This algorithm is not invoked by one script calling another.</p>

  </div>


  <div class=impl>

  <h5 id=creating-scripts><span class=secno>7.1.3.3 </span>Creating scripts</h5>

  <p>When the specification says that a <a href=#concept-script title=concept-script>script</a> is to be <dfn id=create-a-script title="create a
  script">created</dfn>, given some script source, its scripting
  language, a global object, a browsing context, a URL character
  encoding, and a base URL, the user agent must run the following
  steps:</p>

  <ol><li><p>If <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is
   disabled</a> for <a href=#browsing-context>browsing context</a> passed to this
   algorithm, then abort these steps, as if the script did nothing but
   return void.</p>

   <li><p>Set up a <a href=#script-execution-environment>script execution environment</a> as
   appropriate for the scripting language.</li>

   <li><p>Parse/compile/initialize the source of the script using the
   <a href=#script-execution-environment>script execution environment</a>, as appropriate for the
   scripting language, and thus obtain the <a href=#list-of-code-entry-points>list of code
   entry-points</a> for the script. If the semantics of the
   scripting language and the given source code are such that there is
   executable code to be immediately run, then the <i><a href=#initial-code-entry-point>initial code
   entry-point</a></i> is the entry-point for that code.</li>

   <li><p>Set up the <a href="#script's-global-object">script's global object</a>, the
   <a href="#script's-browsing-context">script's browsing context</a>, the <a href="#script's-document">script's
   document</a>, the <a href="#script's-url-character-encoding">script's URL character encoding</a>,
   and the <a href="#script's-base-url">script's base URL</a> from the settings passed to
   this algorithm.</li>

   <li><p><a href=#jump-to-a-code-entry-point title="jump to a code entry-point">Jump</a> to the
   <a href=#concept-script title=concept-script>script</a>'s <i><a href=#initial-code-entry-point>initial code
   entry-point</a></i>.</li>

  </ol><hr><p>When the user agent is to <dfn id=create-an-impotent-script>create an impotent script</dfn>,
  given some script source, its scripting language, and a browsing
  context, the user agent must <a href=#create-a-script>create a script</a>, using the
  given script source and scripting language, using a new empty object
  as the global object, and using the given browsing context as the
  browsing context. The URL character encoding and base URL for the
  resulting <a href=#concept-script title=concept-script>script</a> are not
  important as no APIs are exposed to the script.</p>

  <hr><p>When the specification says that a <a href=#concept-script title=concept-script>script</a> is to be <dfn id=create-a-script-from-a-node title="create a
  script from a node">created from a node</dfn> <var title="">node</var>, given some script source and its scripting
  language, the user agent must <a href=#create-a-script>create a script</a>, using
  the given script source and scripting language, and using <a href=#the-script-settings-determined-from-the-node>the
  script settings determined from the node</a> <var title="">node</var>.</p>

  <p><dfn id=the-script-settings-determined-from-the-node>The script settings determined from the node</dfn> <var title="">node</var> are computed as follows:</p>

  <ol><li><p>Let <var title="">document</var> be the
   <code><a href=#document>Document</a></code> of <var title="">node</var> (or <var title="">node</var> itself if it is a
   <code><a href=#document>Document</a></code>).</li>

   <li><p>The browsing context is the <a href=#browsing-context>browsing context</a> of
   <var title="">document</var>.</p>

   <li><p>The global object is the <code><a href=#window>Window</a></code> object of
   <var title="">document</var>.</li>

   <li><p>The URL character encoding is the <a href="#document's-character-encoding" title="document's
   character encoding">character encoding</a> of <var title="">document</var>. (<a href=#sce-not-copy>This is a
   reference, not a copy</a>.)</li>

   <li><p>The base URL is the <a href=#document-base-url title="document base URL">base
   URL</a> of <var title="">document</var>. (<a href=#sbu-not-copy>This is a reference, not a copy</a>.)</li>

  </ol></div>


  <div class=impl>

  <h5 id=killing-scripts><span class=secno>7.1.3.4 </span>Killing scripts</h5>

  <p>User agents may impose resource limitations on scripts, for
  example CPU quotas, memory limits, total execution time limits, or
  bandwidth limitations. When a script exceeds a limit, the user agent
  may either throw a <code><a href=#quota_exceeded_err>QUOTA_EXCEEDED_ERR</a></code> exception, abort
  the script without an exception, prompt the user, or throttle script
  execution.</p>

  <div class=example>

   <p>For example, the following script never terminates. A user agent
   could, after waiting for a few seconds, prompt the user to either
   terminate the script or let it continue.</p>

   <pre>&lt;script&gt;
 while (true) { /* loop */ }
&lt;/script&gt;</pre>

  </div>

  <p>User agents are encouraged to allow users to disable scripting
  whenever the user is prompted either by a script (e.g. using the
  <code title=dom-alert><a href=#dom-alert>window.alert()</a></code> API) or because of a
  script's actions (e.g. because it has exceeded a time limit).</p>

  <p>If scripting is disabled while a script is executing, the script
  should be terminated immediately.</p>

  </div>


  <div class=impl>

  <h4 id=event-loops><span class=secno>7.1.4 </span>Event loops</h4>

  <h5 id=definitions-1><span class=secno>7.1.4.1 </span>Definitions</h5>

  <p>To coordinate events, user interaction, scripts, rendering,
  networking, and so forth, user agents must use <dfn id=event-loop title="event
  loop">event loops</dfn> as described in this section.</p>

  <p>There must be at least one <a href=#event-loop>event loop</a> per user
  agent, and at most one <a href=#event-loop>event loop</a> per <a href=#unit-of-related-similar-origin-browsing-contexts>unit of
  related similar-origin browsing contexts</a>.</p>

  <p>An <a href=#event-loop>event loop</a> always has at least one <a href=#browsing-context>browsing
  context</a>. If an <a href=#event-loop>event loop</a>'s <a href=#browsing-context title="browsing context">browsing contexts</a> all go away, then
  the <a href=#event-loop>event loop</a> goes away as well. A <a href=#browsing-context>browsing
  context</a> always has an <a href=#event-loop>event loop</a> coordinating
  its activities.</p>

  
  <p class=note>Other specifications can define new kinds of event
  loops that aren't associated with browsing contexts; in particular,
  the Web Workers specification does so.</p>
  

  <p>An <a href=#event-loop>event loop</a> has one or more <dfn id=task-queue title="task
  queue">task queues</dfn>. A <a href=#task-queue>task queue</a> is an ordered
  list of <dfn id=concept-task title=concept-task>tasks</dfn>, which can be:</p>

  <dl><dt>Events</dt>

   <dd>

    <p>Asynchronously dispatching an <code><a href=#event>Event</a></code> object at a
    particular <code><a href=#eventtarget>EventTarget</a></code> object is a task.</p>

    <p class=note>Not all events are dispatched using the <a href=#task-queue>task
    queue</a>, many are dispatched synchronously during other
    tasks.</p>

   </dd>


   <dt>Parsing</dt>

   <dd><p>The <a href=#html-parser>HTML parser</a> tokenizing a single byte, and
   then processing any resulting tokens, is a task.</dd>


   <dt>Callbacks</dt>

   <dd><p>Calling a callback asynchronously is a task.</dd>


   <dt>Using a resource</dt>

   <dd><p>When an algorithm <a href=#fetch title=fetch>fetches</a> a
   resource, if the fetching occurs asynchronously then the processing
   of the resource once some or all of the resource is available is a
   task.</dd>


   <dt>Reacting to DOM manipulation</dt>

   <dd><p>Some elements have tasks that trigger in response to DOM
   manipulation, e.g. when that element is <a href=#insert-an-element-into-a-document title="insert an
   element into a document">inserted into the document</a>.</p>

  </dl><p>When a user agent is to <dfn id=queue-a-task>queue a task</dfn>, it must add the
  given task to one of the <a href=#task-queue title="task queue">task queues</a>
  of the relevant <a href=#event-loop>event loop</a>. All the tasks from one
  particular <dfn id=task-source>task source</dfn> (e.g. the callbacks generated by
  timers, the events dispatched for mouse movements, the tasks queued
  for the parser) must always be added to the same <a href=#task-queue>task
  queue</a>, but tasks from different <a href=#task-source title="task
  source">task sources</a> may be placed in different <a href=#task-queue title="task queue">task queues</a>.</p>

  <p class=example>For example, a user agent could have one
  <a href=#task-queue>task queue</a> for mouse and key events (the <a href=#user-interaction-task-source>user
  interaction task source</a>), and another for everything
  else. The user agent could then give keyboard and mouse events
  preference over other tasks three quarters of the time, keeping the
  interface responsive but not starving other task queues, and never
  processing events from any one <a href=#task-source>task source</a> out of
  order.</p>

  <p>Each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> onto a <a href=#task-queue>task queue</a> of
  an <a href=#event-loop>event loop</a> defined by this specification is
  associated with a <code><a href=#document>Document</a></code>; if the task was queued in
  the context of an element, then it is the element's
  <code><a href=#document>Document</a></code>; if the task was queued in the context of a
  <a href=#browsing-context>browsing context</a>, then it is the <a href=#browsing-context>browsing
  context</a>'s <a href=#active-document>active document</a> at the time the task
  was queued; if the task was queued by or for a <a href=#concept-script title=concept-script>script</a> then the document is the
  <a href="#script's-document">script's document</a>.</p>

  <p>A user agent is required to have one <dfn id=storage-mutex>storage
  mutex</dfn>. This mutex is used to control access to shared state
  like cookies. At any one point, the <a href=#storage-mutex>storage mutex</a> is
  either free, or owned by a particular <a href=#event-loop>event loop</a> or
  instance of the <a href=#fetch title=fetch>fetching</a> algorithm.</p>

  <p>Whenever a <a href=#concept-script title=concept-script>script</a> calls into
  a <a href=#plugin>plugin</a>, and whenever a <a href=#plugin>plugin</a> calls into
  a <a href=#concept-script title=concept-script>script</a>, the user agent must
  release the <a href=#storage-mutex>storage mutex</a>.</p>


  <h5 id=processing-model-2><span class=secno>7.1.4.2 </span>Processing model</h5>

  <p>An <a href=#event-loop>event loop</a> must continually run through the
  following steps for as long as it exists:</p>

  <ol><li><p>Run the oldest <a href=#concept-task title=concept-task>task</a> on one
   of the <a href=#event-loop>event loop</a>'s <a href=#task-queue title="task queue">task
   queues</a>, ignoring tasks whose associated
   <code><a href=#document>Document</a></code>s are not <a href=#fully-active>fully active</a>. The user
   agent may pick any <a href=#task-queue>task queue</a>.</li>

   <li><p>If the <a href=#storage-mutex>storage mutex</a> is now owned by the
   <a href=#event-loop>event loop</a>, release it so that it is once again
   free.</p>

   <li><p>Remove that task from its <a href=#task-queue>task queue</a>.</li>

   <li><p>If any asynchronously-running algorithms are <dfn id=await-a-stable-state title="await a stable state">awaiting a stable state</dfn>, then
   run their <dfn id=synchronous-section>synchronous section</dfn> and then resume running
   their asynchronous algorithm.</p>

   <p class=note>A <a href=#synchronous-section>synchronous section</a> never mutates
   the DOM, runs any script, or has any other side-effects.</p>

   <p class=note>Steps in <a href=#synchronous-section title="synchronous
   section">synchronous sections</a> are marked with
   &#8987;.</li>

   <li><p>If necessary, update the rendering or user interface of any
   <code><a href=#document>Document</a></code> or <a href=#browsing-context>browsing context</a> to reflect
   the current state.</li>

   <li><p>Return to the first step of the <a href=#event-loop>event
   loop</a>.</li>

  </ol><hr><p>When an algorithm says to <dfn id=spin-the-event-loop>spin the event loop</dfn> until
  a condition <var title="">goal</var> is met, the user agent must run
  the following steps:</p>

  <ol><li><p>Let <var title="">task source</var> be the <a href=#task-source>task
   source</a> of the currently running <a href=#concept-task title=concept-task>task</a>.</li>

   <li><p>Stop the currently running <a href=#concept-task title=concept-task>task</a>, allowing the <a href=#event-loop>event
   loop</a> to resume, but continue these steps
   asynchronously.</li>

   <li><p>Wait until the condition <var title="">goal</var> is
   met.</li>

   <li><p><a href=#queue-a-task>Queue a task</a> to continue running these steps,
   using the <a href=#task-source>task source</a> <var title="">task
   source</var>. Wait until this task runs before continuing these
   steps.</li>

   <li><p>Return to the caller.</li>

  </ol><hr><p>Some of the algorithms in this specification, for historical
  reasons, require the user agent to <dfn id=pause>pause</dfn> while running a
  <a href=#concept-task title=concept-task>task</a> until some condition has been
  met. While a user agent has a paused <a href=#concept-task title=concept-task>task</a>, the corresponding <a href=#event-loop>event
  loop</a> must not run further <a href=#concept-task title=concept-task>tasks</a>, and any script in the currently
  running <a href=#concept-task title=concept-task>task</a> must block. User
  agents should remain responsive to user input while paused, however,
  albeit in a reduced capacity since the <a href=#event-loop>event loop</a> will
  not be doing anything.</p>

  <hr><p>When a user agent is to <dfn id=obtain-the-storage-mutex>obtain the storage mutex</dfn> as
  part of running a <a href=#concept-task title=concept-task>task</a>, it must
  run through the following steps:</p>

  <ol><li><p>If the <a href=#storage-mutex>storage mutex</a> is already owned by this
   <a href=#concept-task title=concept-task>task</a>'s <a href=#event-loop>event loop</a>,
   then abort these steps.</li>

   <li><p>Otherwise, <a href=#pause>pause</a> until the <a href=#storage-mutex>storage
   mutex</a> can be taken by the <a href=#event-loop>event loop</a>.</li>

   <li><p>Take ownership of the <a href=#storage-mutex>storage mutex</a>.</li>

  </ol></div>


  <div class=impl>

  <h5 id=generic-task-sources><span class=secno>7.1.4.3 </span>Generic task sources</h5>

  <p>The following <a href=#task-source title="task source">task sources</a> are
  used by a number of mostly unrelated features in this and other
  specifications.</p>

  <dl><dt>The <dfn id=dom-manipulation-task-source>DOM manipulation task source</dfn></dt>

   <dd>

    <p>This <a href=#task-source>task source</a> is used for features that react
    to DOM manipulations, such as things that happen asynchronously
    when an element is <a href=#insert-an-element-into-a-document title="insert an element into a
    document">inserted into the document</a>.</p>

    <!--
    <p>Asynchronous mutation events must be dispatched using <span
    title="concept-task">tasks</span> <span title="queue a
    task">queued</span> with the <span>DOM manipulation task
    source</span>. <a href="#refsDOMEVENTS">[DOMEVENTS]</a></p>
    -->

   </dd>

   <dt>The <dfn id=user-interaction-task-source>user interaction task source</dfn></dt>

   <dd>

    <p>This <a href=#task-source>task source</a> is used for features that react
    to user interaction, for example keyboard or mouse input.</p>

    <p>Asynchronous events sent in response to user input (e.g. <code title=event-click><a href=#event-click>click</a></code> events) must be dispatched using
    <a href=#concept-task title=concept-task>tasks</a> <a href=#queue-a-task title="queue a
    task">queued</a> with the <a href=#user-interaction-task-source>user interaction task
    source</a>. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

   </dd>

   <dt>The <dfn id=networking-task-source>networking task source</dfn></dt>

   <dd>

    <p>This <a href=#task-source>task source</a> is used for features that trigger
    in response to network activity.</p>

    <!-- XHR should use this -->

   </dd>

   <dt>The <dfn id=history-traversal-task-source>history traversal task source</dfn></dt>

   <dd>

    <p>This <a href=#task-source>task source</a> is used to queue calls to <code title=dom-history-back><a href=#dom-history-back>history.back()</a></code> and similar
    APIs.</p>

   </dd>

  </dl></div>



  <div class=impl>

  <!-- SCRIPT EXEC -->
  <h4 id=javascript-protocol><span class=secno>7.1.5 </span><dfn title="javascript protocol">The <code title="">javascript:</code> protocol</dfn></h4>

  <p>When a <a href=#url>URL</a> using the <code title="">javascript:</code> protocol is <dfn id=concept-js-deref title=concept-js-deref>dereferenced</dfn>, the user agent must run
  the following steps:</p>

  <ol><li><p>Let the script source be the string obtained using the
   content retrieval operation defined for <code title="">javascript:</code> URLs. <a href=#refsJSURL>[JSURL]</a></li>

   <li>

    <p>Use the appropriate step from the following list:</p>

    <dl><dt>If a <a href=#browsing-context>browsing context</a> is being <a href=#navigate title=navigate>navigated</a> to a <code>javascript:</code>
     URL, and the <a href=#active-document>active document</a> of that browsing
     context has the <a href=#same-origin>same origin</a> as the script given by
     that URL</dt>

     <dd>

      <!-- http://www.hixie.ch/tests/adhoc/html/navigation/javascript-url/ -->

      <p>Let <var title="">address</var> be the <a href="#the-document's-address" title="the
      document's address">address</a> of the <a href=#active-document>active
      document</a> of the <a href=#browsing-context>browsing context</a> being
      navigated.</p>

      <p>If <var title="">address</var> is <code><a href=#about:blank>about:blank</a></code>,
      and the <a href=#browsing-context>browsing context</a> being navigated has a
      <a href=#creator-browsing-context>creator browsing context</a>, then let <var title="">address</var> be the <a href="#the-document's-address" title="the document's
      address">address</a> of the <a href=#creator-document>creator
      <code>Document</code></a> instead.</p>

      <p><a href=#create-a-script-from-a-node title="create a script from a node">Create a
      script</a> from the <code><a href=#document>Document</a></code> node of the
      <a href=#active-document>active document</a>, using the aforementioned script
      source, and assuming the scripting language is JavaScript.</p>

      <p>Let <var title="">result</var> be the return value of the
      <i><a href=#initial-code-entry-point>initial code entry-point</a></i> of this <a href=#concept-script title=concept-script>script</a>. If an exception was
      raised, let <var title="">result</var> be void instead. (The
      result will be void also if <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is disabled</a>.)</p>

      <p>When it comes time to <a href="#set-the-document's-address">set the document's address</a>
      in the <a href=#navigate title=navigate>navigation algorithm</a>, use
      <var title="">address</var> as the <a href=#override-url>override
      URL</a>.</p>

     </dd>

     <dt>If the <code><a href=#document>Document</a></code> object of the element,
     attribute, or style sheet from which the <code>javascript:</code>
     URL was reached has an associated <a href=#browsing-context>browsing
     context</a></dt>

     <dd>

      <p><a href=#create-an-impotent-script>Create an impotent script</a> using the
      aforementioned script source, with the scripting language set to
      JavaScript, and with the <code><a href=#document>Document</a></code>'s object's
      <a href=#browsing-context>browsing context</a> as the browsing context.</p>

      <p>Let <var title="">result</var> be the return value of the
      <i><a href=#initial-code-entry-point>initial code entry-point</a></i> of this <a href=#concept-script title=concept-script>script</a>. If an exception was
      raised, let <var title="">result</var> be void instead. (The
      result will be void also if <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is disabled</a>.)</p>

     </dd>

     <dt>Otherwise</dt>

     <dd>

      <p>Let <var title="">result</var> be void.</p>

     </dd>

    </dl></li>

   <li>

    <p>If the result of executing the script is void (there is no
    return value), then the URL must be treated in a manner equivalent
    to an HTTP resource with an HTTP 204 No Content response.</p>

    <p>Otherwise, the URL must be treated in a manner equivalent to an
    HTTP resource with a 200 OK response whose <a href=#content-type title=Content-Type>Content-Type metadata</a> is
    <code><a href=#text/html>text/html</a></code> and whose response body is the return value
    converted to a string value.</p>

    <p class=note>Certain contexts, in particular <code><a href=#the-img-element>img</a></code>
    elements, ignore the <a href=#content-type title=Content-Type>Content-Type
    metadata</a>.</p>

   </li>

  </ol><div class=example>

   <p>So for example a <code title="">javascript:</code> URL for a
   <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute of an
   <code><a href=#the-img-element>img</a></code> element would be evaluated in the context of an
   empty object as soon as the attribute is set; it would then be
   sniffed to determine the image type and decoded as an image.</p>

   <p>A <code title="">javascript:</code> URL in an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute of an <code><a href=#the-a-element>a</a></code>
   element would only be evaluated when the link was <a href=#following-hyperlinks title="following hyperlinks">followed</a>.</p>

   <p>The <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute of an
   <code><a href=#the-iframe-element>iframe</a></code> element would be evaluated in the context of
   the <code><a href=#the-iframe-element>iframe</a></code>'s own <a href=#browsing-context>browsing context</a>; once
   evaluated, its return value (if it was not void) would replace that
   <a href=#browsing-context>browsing context</a>'s document, thus changing the
   variables visible in that <a href=#browsing-context>browsing context</a>.</p>

  </div>

  </div>



  <h4 id=events><span class=secno>7.1.6 </span>Events</h4>

  <div class=impl>

  <h5 id=event-handler-attributes><span class=secno>7.1.6.1 </span>Event handlers</h5>

  </div>

  <!--test: <a href="http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A...%3Cscript%3E%0Aw(a%3Ddocument.implementation.createDocument(null%2C%20null%2C%20null))%3B%0Aw(a.appendChild(a.createElementNS('http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%2C%20'html')))%3B%0Aw(b%3Da.firstChild.appendChild(a.createElementNS('http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%2C%20'body')))%3B%0Aw(b.test%20%3D%20w)%3B%0Aw(b.setAttribute('onclick'%2C%20'test(%22fire%3A%20%22%20%2B%20event)'))%3B%0Aw(b.onclick)%3B%0Aw(e%3Da.createEvent('Event'))%3B%0Aw(e.initEvent('click'%2C%20false%2C%20false))%3B%0Aw(b.dispatchEvent(e))%3B%0A%3C%2Fscript%3E">test</a>-->

  <p>Many objects can have <dfn id=event-handlers>event handlers</dfn> specified. These
  act as bubbling event listeners for the object on which they are
  specified.</p>

  <p>An <a href=#event-handlers title="event handlers">event handler</a> can either
  have the value null or be set to a <code><a href=#function>Function</a></code>
  object. <span class=impl>Initially, event handlers must be set to
  null.</span></p>

  <p>Event handlers are exposed in one or two ways.</p>

  <p>The first way, common to all event handlers, is as an <a href=#event-handler-idl-attributes title="event handler IDL attributes">event handler IDL
  attribute</a>.</p>

  <p>The second way is as an <a href=#event-handler-content-attributes title="event handler content
  attributes">event handler content attribute</a>. Event handlers
  on <a href=#html-elements>HTML elements</a> and some of the event handlers on
  <code><a href=#window>Window</a></code> objects are exposed in this way.</p>

  <div class=impl>

  <hr><p><dfn id=event-handler-idl-attributes>Event handler IDL attributes</dfn>, on setting, must set the
  corresponding event handler to their new value, and on
  getting, must return whatever the current value of the corresponding
  event handler is (possibly null).</p>

  <p>If an <a href=#event-handler-idl-attributes title="event handler IDL attributes">event handler
  IDL attribute</a> exposes an <a href=#event-handlers title="event handlers">event
  handler</a> of an object that doesn't exist, it must always
  return null on getting and must do nothing on setting.</p>

  <p class=note>This can happen in particular for <a href=#event-handler-idl-attributes title="event
  handler IDL attributes">event handler IDL attribute</a> on
  <code><a href=#the-body-element-0>body</a></code> elements that do not have corresponding
  <code><a href=#window>Window</a></code> objects.</p>

  <p class=note>Certain event handler IDL attributes have additional
  requirements, in particular the <code title=handler-MessagePort-onmessage><a href=#handler-messageport-onmessage>onmessage</a></code> attribute of
  <code><a href=#messageport>MessagePort</a></code> objects.</p>

  <hr></div>

  <p><dfn id=event-handler-content-attributes>Event handler content attributes</dfn>, when specified, must
  contain valid JavaScript code matching the <code title="">FunctionBody</code> production. <a href=#refsECMA262>[ECMA262]</a></p>

  <div class=impl>

  <!-- SCRIPT EXEC -->
  <p>When an <a href=#event-handler-content-attributes title="event handler content attributes">event
  handler content attribute</a> is set, if the element is owned by
  a <code><a href=#document>Document</a></code> that is in a <a href=#browsing-context>browsing context</a>,
  and <a href=#concept-bc-script title=concept-bc-script>scripting is enabled</a> for
  that <a href=#browsing-context>browsing context</a>, the user agent must run the
  following steps to create a <a href=#concept-script title=concept-script>script</a> after setting the content
  attribute to its new value:</p>

  <ol><li><p>Set up a <a href=#script-execution-environment>script execution environment</a> for
   JavaScript.</li>

   <li>

    <p>Using this script execution environment, create a function
    object (as defined in ECMAScript edition 5 section 13.2 Creating
    Function Objects), with:</p>

    <dl><dt>Parameter list <var title="">FormalParameterList</var></dt>

     <dd>

      <dl class=switch><dt>If the attribute is the <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code> attribute of the
       <code><a href=#window>Window</a></code> object</dt>

       <dd>Let the function have three arguments, named <code title="">event</code>, <code title="">source</code>, and <code title="">fileno</code>.</dd>

       <dt>Otherwise</dt>

       <dd>Let the function have a single argument called <code title="">event</code>.</dd>

      </dl></dd>

     <dt>Function body <var title="">FunctionBody</var></dt>

     <dd>The <a href=#event-handler-content-attributes title="event handler content attributes">event
     handler content attribute</a>'s new value.</dd>

     <dt>Lexical Environment <var title="">Scope</var></dt>

     <dd>

      <ol><li>Let <var title="">Scope</var> be the result of
       NewObjectEnvironment(the element's <code><a href=#document>Document</a></code>, the
       <var title="">global environment</var>).</li>

       <li>If the element has a <a href=#form-owner>form owner</a>, let <var title="">Scope</var> be the result of NewObjectEnvironment(the
       element's <a href=#form-owner>form owner</a>, <var title="">Scope</var>).</li>

       <li>Let <var title="">Scope</var> be the result of
       NewObjectEnvironment(the element's object, <var title="">Scope</var>).</li>

      </ol><p class=note>NewObjectEnvironment() is defined in ECMAScript
      edition 5 section 10.2.2.3 NewObjectEnvironment (O, E). <a href=#refsECMA262>[ECMA262]</a></p>

     </dd>

     <dt>Boolean flag <var title="">Strict</var></dt>

     <dd>False.</dd>

    </dl><p>Let this new function be the only entry in the script's
    <a href=#list-of-code-entry-points>list of code entry-points</a>.</p>

   </li>

   <li><p>If the previous steps failed to compile the script, then set
   the corresponding <a href=#event-handlers title="event handlers">event handler</a>
   to null and abort these steps.</li>

   <li><p>Set up the <a href="#script's-global-object">script's global object</a>, the
   <a href="#script's-browsing-context">script's browsing context</a>, the <a href="#script's-document">script's
   document</a>, the <a href="#script's-url-character-encoding">script's URL character encoding</a>,
   and the <a href="#script's-base-url">script's base URL</a> from <a href=#the-script-settings-determined-from-the-node>the script
   settings determined from the node</a> on which the attribute is
   being set.</li>

   <li><p>Set the corresponding <a href=#event-handlers title="event handlers">event
   handler</a> to the aforementioned function.</li>

  </ol><p>When an event handler content attribute is removed, the user
  agent must set the corresponding <a href=#event-handlers title="event handlers">event
  handler</a> to null.</p>
  <!--
  http://software.hixie.ch/utilities/js/live-dom-viewer/saved/245 onload
  http://software.hixie.ch/utilities/js/live-dom-viewer/saved/247 onclick
  see http://www.w3.org/Bugs/Public/show_bug.cgi?id=7626#c5 for reasoning
  -->

  </div>

  <p class=note>When an <a href=#event-handler-content-attributes title="event handler content
  attributes">event handler content attribute</a> is set on an
  element owned by a <code><a href=#document>Document</a></code> that is not in a
  <a href=#browsing-context>browsing context</a>, the corresponding event handler is
  not changed.</p>

  <!-- v2: we should probably support HTML4's Content-Script-Type header here. -->

  <div class=impl>

  <hr><p>All <a href=#event-handlers>event handlers</a> on an object, whether an element
  or some other object, and whether set to null or to a
  <code><a href=#function>Function</a></code> object, must be registered as event listeners
  on the object when it is created, as if the <code title=dom-EventTarget-addEventListener>addEventListener()</code>
  method on the object's <code><a href=#eventtarget>EventTarget</a></code> interface had been
  invoked, with the event type (<var title=dom-event-type>type</var>
  argument) equal to the type corresponding to the event handler (the
  <dfn id=event-handler-event-type>event handler event type</dfn>), the listener set to be a
  target and bubbling phase listener (<var title=dom-event-useCapture>useCapture</var> argument set to
  false), and the event listener itself (<var title=dom-event-listener>listener</var> argument) set to do
  nothing while the event handler's value is not a
  <code><a href=#function>Function</a></code> object, and set to invoke the <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback of the
  <code><a href=#function>Function</a></code> object associated with the event handler
  otherwise.</p>

  </div>

  <p class=note><a href=#event-handlers>Event handlers</a> <span class=impl>therefore</span> always fire before event listeners
  attached using <code title=dom-EventTarget-addEventListener>addEventListener()</code>.</p>

  <div class=impl>

  <p class=note>The <var title=dom-event-listener>listener</var>
  argument is emphatically <em>not</em> the <a href=#event-handlers title="event
  handlers">event handler</a> itself.</p>

  <p class=note>The interfaces implemented by the event object do
  not influence whether an <a href=#event-handlers title="event handlers">event
  handler</a> is triggered or not.</p>

  <p>When an <a href=#event-handlers title="event handlers">event handler</a>'s
  <code><a href=#function>Function</a></code> object is invoked, its <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback must be invoked
  with one argument, set to the <code><a href=#event>Event</a></code> object of the event
  in question.</p>

  <p>The handler's return value must then be processed as follows:</p>

  <dl class=switch><dt>If the event type is <code class=event-mouseover>mouseover</code></dt>

   <dd><p>If the return value is a boolean with the value true, then
   the event must be canceled.</dd>

   <dt>If the event object is a <code><a href=#beforeunloadevent>BeforeUnloadEvent</a></code> object</dt>

   <dd><p>If the return value is a string, and the event object's
   <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code>
   attribute's value is the empty string, then set the <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code>
   attribute's value to the return value.</dd>

   <dt>Otherwise</dt>

   <dd><p>If the return value is a boolean with the value false, then
   the event must be canceled.</dd>

  </dl></div>

  <!-- IE actually uncancels the event if the function returns true -->

  <hr><p>The <code><a href=#function>Function</a></code> interface represents a function in the
  scripting language being used. It is represented in IDL as
  follows:</p>

  <pre class=idl>[Callback=FunctionOnly, NoInterfaceObject]
interface <dfn id=function>Function</dfn> {
  any <a href=#dom-function-call title=dom-function-call>call</a>(in any... arguments);
};</pre>

  <p>The <dfn id=dom-function-call title=dom-function-call><code>call(...)</code></dfn>
  method is the object's callback.</p>

  <p class=note>In JavaScript, any <code title="">Function</code>
  object implements this interface.</p>

  <p>If the <code><a href=#function>Function</a></code> object is a JavaScript <code title="">Function</code>, then when it is invoked by the user agent,
  the user agent must set the <var title="">thisArg</var> (as defined
  by ECMAScript edition 5 section 10.4.3 Entering Function Code) to
  the <a href=#event-handlers title="event handlers">event handler</a>'s object. <a href=#refsECMA262>[ECMA262]</a></p>

  <div class=example>

   <p>For example, the following document fragment:</p>

   <pre>&lt;body onload="alert(this)" onclick="alert(this)"&gt;</pre>

   <p>...leads to an alert saying "<code title="">[object&nbsp;Window]</code>" when the document is loaded,
   and an alert saying "<code title="">[object&nbsp;HTMLBodyElement]</code>" whenever the user
   clicks something in the page.</p>

  </div>

  <p>The return value of the function is affects whether the event is
  canceled or not: <span class=impl>as described above,</span> if
  the return value is false, the event is canceled (except for <code class=event-mouseover>mouseover</code> events, where the return
  value has to be true to cancel the event). With <code title=event-beforeunload>beforeunload</code> events, the value is
  instead used to determine the message to show the user.</p>


  <div class=impl>

  <h5 id=event-handlers-on-elements,-document-objects,-and-window-objects><span class=secno>7.1.6.2 </span>Event handlers on elements, <code><a href=#document>Document</a></code> objects, and <code><a href=#window>Window</a></code> objects</h5>

  <p>The following are the <a href=#event-handlers>event handlers</a> (and their
  corresponding <a href=#event-handler-event-type title="event handler event type">event handler
  event types</a>) that must be supported by all <a href=#html-elements>HTML
  elements</a>, as both content attributes and IDL attributes, and
  on <code><a href=#document>Document</a></code> and <code><a href=#window>Window</a></code> objects, as IDL
  attributes.</p>

  <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn id=handler-onabort title=handler-onabort><code>onabort</code></dfn> <td> <code title=event-abort>abort</code>
    <tr><td><dfn id=handler-oncanplay title=handler-oncanplay><code>oncanplay</code></dfn> <td> <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code>
    <tr><td><dfn id=handler-oncanplaythrough title=handler-oncanplaythrough><code>oncanplaythrough</code></dfn> <td> <code title=event-media-canplaythrough><a href=#event-media-canplaythrough>canplaythrough</a></code>
    <tr><td><dfn id=handler-onchange title=handler-onchange><code>onchange</code></dfn> <td> <code title=event-change>change</code> <!-- widely used -->
    <tr><td><dfn id=handler-onclick title=handler-onclick><code>onclick</code></dfn> <td> <code title=event-click><a href=#event-click>click</a></code> <!-- widely used -->
    <tr><td><dfn id=handler-oncontextmenu title=handler-oncontextmenu><code>oncontextmenu</code></dfn> <td> <code title=event-contextmenu>contextmenu</code> <!-- widely used -->
    <tr><td><dfn id=handler-ondblclick title=handler-ondblclick><code>ondblclick</code></dfn> <td> <code title=event-dblclick>dblclick</code> <!-- widely used -->
    <tr><td><dfn id=handler-ondrag title=handler-ondrag><code>ondrag</code></dfn> <td> <code title=event-drag><a href=#event-drag>drag</a></code>
    <tr><td><dfn id=handler-ondragend title=handler-ondragend><code>ondragend</code></dfn> <td> <code title=event-dragend><a href=#event-dragend>dragend</a></code>
    <tr><td><dfn id=handler-ondragenter title=handler-ondragenter><code>ondragenter</code></dfn> <td> <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code>
    <tr><td><dfn id=handler-ondragleave title=handler-ondragleave><code>ondragleave</code></dfn> <td> <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code>
    <tr><td><dfn id=handler-ondragover title=handler-ondragover><code>ondragover</code></dfn> <td> <code title=event-dragover><a href=#event-dragover>dragover</a></code>
    <tr><td><dfn id=handler-ondragstart title=handler-ondragstart><code>ondragstart</code></dfn> <td> <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> <!-- widely used -->
    <tr><td><dfn id=handler-ondrop title=handler-ondrop><code>ondrop</code></dfn> <td> <code title=event-drop><a href=#event-drop>drop</a></code>
    <tr><td><dfn id=handler-ondurationchange title=handler-ondurationchange><code>ondurationchange</code></dfn> <td> <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code>
    <tr><td><dfn id=handler-onemptied title=handler-onemptied><code>onemptied</code></dfn> <td> <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code>
    <tr><td><dfn id=handler-onended title=handler-onended><code>onended</code></dfn> <td> <code title=event-media-ended><a href=#event-media-ended>ended</a></code>
    <tr><td><dfn id=handler-onformchange title=handler-onformchange><code>onformchange</code></dfn> <td> <code title=event-formchange>formchange</code>
    <tr><td><dfn id=handler-onforminput title=handler-onforminput><code>onforminput</code></dfn> <td> <code title=event-forminput>forminput</code>
    <tr><td><dfn id=handler-oninput title=handler-oninput><code>oninput</code></dfn> <td> <code title=event-input>input</code>
    <tr><td><dfn id=handler-oninvalid title=handler-oninvalid><code>oninvalid</code></dfn> <td> <code title=event-invalid>invalid</code>
    <tr><td><dfn id=handler-onkeydown title=handler-onkeydown><code>onkeydown</code></dfn> <td> <code title=event-keydown>keydown</code> <!-- widely used -->
    <tr><td><dfn id=handler-onkeypress title=handler-onkeypress><code>onkeypress</code></dfn> <td> <code title=event-keypress>keypress</code> <!-- widely used -->
    <tr><td><dfn id=handler-onkeyup title=handler-onkeyup><code>onkeyup</code></dfn> <td> <code title=event-keyup>keyup</code> <!-- widely used -->
    <tr><td><dfn id=handler-onloadeddata title=handler-onloadeddata><code>onloadeddata</code></dfn> <td> <code title=event-media-loadeddata><a href=#event-media-loadeddata>loadeddata</a></code>
    <tr><td><dfn id=handler-onloadedmetadata title=handler-onloadedmetadata><code>onloadedmetadata</code></dfn> <td> <code title=event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code>
    <tr><td><dfn id=handler-onloadstart title=handler-onloadstart><code>onloadstart</code></dfn> <td> <code title=event-media-loadstart><a href=#event-media-loadstart>loadstart</a></code>
    <tr><td><dfn id=handler-onmousedown title=handler-onmousedown><code>onmousedown</code></dfn> <td> <code title=event-mousedown>mousedown</code> <!-- widely used -->
    <tr><td><dfn id=handler-onmousemove title=handler-onmousemove><code>onmousemove</code></dfn> <td> <code title=event-mousemove>mousemove</code> <!-- widely used -->
    <tr><td><dfn id=handler-onmouseout title=handler-onmouseout><code>onmouseout</code></dfn> <td> <code title=event-mouseout>mouseout</code> <!-- widely used -->
    <tr><td><dfn id=handler-onmouseover title=handler-onmouseover><code>onmouseover</code></dfn> <td> <code title=event-mouseover>mouseover</code> <!-- widely used -->
    <tr><td><dfn id=handler-onmouseup title=handler-onmouseup><code>onmouseup</code></dfn> <td> <code title=event-mouseup>mouseup</code> <!-- widely used -->
    <tr><td><dfn id=handler-onmousewheel title=handler-onmousewheel><code>onmousewheel</code></dfn> <td> <code title=event-mousewheel>mousewheel</code> <!-- widely used -->
    <tr><td><dfn id=handler-onpause title=handler-onpause><code>onpause</code></dfn> <td> <code title=event-media-pause><a href=#event-media-pause>pause</a></code>
    <tr><td><dfn id=handler-onplay title=handler-onplay><code>onplay</code></dfn> <td> <code title=event-media-play><a href=#event-media-play>play</a></code>
    <tr><td><dfn id=handler-onplaying title=handler-onplaying><code>onplaying</code></dfn> <td> <code title=event-media-playing><a href=#event-media-playing>playing</a></code>
    <tr><td><dfn id=handler-onprogress title=handler-onprogress><code>onprogress</code></dfn> <td> <code title=event-media-progress><a href=#event-media-progress>progress</a></code>
    <tr><td><dfn id=handler-onratechange title=handler-onratechange><code>onratechange</code></dfn> <td> <code title=event-media-ratechange><a href=#event-media-ratechange>ratechange</a></code>
    <tr><td><dfn id=handler-onreadystatechange title=handler-onreadystatechange><code>onreadystatechange</code></dfn> <td> <code title=event-readystatechange>readystatechange</code>
    <tr><td><dfn id=handler-onscroll title=handler-onscroll><code>onscroll</code></dfn> <td> <code title=event-scroll>scroll</code> <!-- widely used --> <!-- [CSSOM] -->
    <tr><td><dfn id=handler-onseeked title=handler-onseeked><code>onseeked</code></dfn> <td> <code title=event-media-seeked><a href=#event-media-seeked>seeked</a></code>
    <tr><td><dfn id=handler-onseeking title=handler-onseeking><code>onseeking</code></dfn> <td> <code title=event-media-seeking><a href=#event-media-seeking>seeking</a></code>
    <tr><td><dfn id=handler-onselect title=handler-onselect><code>onselect</code></dfn> <td> <code title=event-select>select</code> <!-- widely used --> <!-- [CSSOM] -->
    <tr><td><dfn id=handler-onshow title=handler-onshow><code>onshow</code></dfn> <td> <code title=event-show>show</code>
    <tr><td><dfn id=handler-onstalled title=handler-onstalled><code>onstalled</code></dfn> <td> <code title=event-media-stalled><a href=#event-media-stalled>stalled</a></code>
    <tr><td><dfn id=handler-onsubmit title=handler-onsubmit><code>onsubmit</code></dfn> <td> <code title=event-submit>submit</code> <!-- widely used -->
    <tr><td><dfn id=handler-onsuspend title=handler-onsuspend><code>onsuspend</code></dfn> <td> <code title=event-media-suspend><a href=#event-media-suspend>suspend</a></code>
    <tr><td><dfn id=handler-ontimeupdate title=handler-ontimeupdate><code>ontimeupdate</code></dfn> <td> <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code>
    <tr><td><dfn id=handler-onvolumechange title=handler-onvolumechange><code>onvolumechange</code></dfn> <td> <code title=event-media-volumechange><a href=#event-media-volumechange>volumechange</a></code>
    <tr><td><dfn id=handler-onwaiting title=handler-onwaiting><code>onwaiting</code></dfn> <td> <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code>

<!-- not supported, use dnd: -->
<!--<tr><td><dfn title="handler-onbeforecopy"><code>onbeforecopy</code></dfn> <td> <code title="event-beforecopy">beforecopy</code>--> <!-- widely used -->
<!--<tr><td><dfn title="handler-oncopy"><code>oncopy</code></dfn> <td> <code title="event-copy">copy</code>--> <!-- widely used -->
<!--<tr><td><dfn title="handler-onpaste"><code>onpaste</code></dfn> <td> <code title="event-paste">paste</code>--> <!-- widely used -->
<!-- not supported yet (v2?): -->
<!--<tr><td><dfn title="handler-onselectstart"><code>onselectstart</code></dfn> <td> <code title="event-selectstart">selectstart</code>--> <!-- widely used -->
  </table><hr><p>The following are the <a href=#event-handlers>event handlers</a> (and their
  corresponding <a href=#event-handler-event-type title="event handler event type">event handler
  event types</a>) that must be supported by all <a href=#html-elements>HTML
  elements</a> other than <code><a href=#the-body-element-0>body</a></code>, as both content
  attributes and IDL attributes, and on <code><a href=#document>Document</a></code> objects,
  as IDL attributes:</p>

  <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn id=handler-onblur title=handler-onblur><code>onblur</code></dfn> <td> <code title=event-blur>blur</code> <!-- widely used -->
    <tr><td><dfn id=handler-onerror title=handler-onerror><code>onerror</code></dfn> <td> <code title=event-error>error</code>
    <tr><td><dfn id=handler-onfocus title=handler-onfocus><code>onfocus</code></dfn> <td> <code title=event-focus>focus</code> <!-- widely used -->
    <tr><td><dfn id=handler-onload title=handler-onload><code>onload</code></dfn> <td> <code title=event-load>load</code>
  </table><hr><p>The following are the <a href=#event-handlers>event handlers</a> (and their
  corresponding <a href=#event-handler-event-type title="event handler event type">event handler
  event types</a>) that must be supported by <code><a href=#window>Window</a></code>
  objects, as IDL attributes on the <code><a href=#window>Window</a></code> object, and
  with corresponding content attributes and IDL attributes exposed on
  the <code><a href=#the-body-element-0>body</a></code> and <code><a href=#frameset>frameset</a></code> elements:</p>

  <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn id=handler-window-onafterprint title=handler-window-onafterprint><code>onafterprint</code></dfn> <td> <code title=event-afterprint>afterprint</code>
    <tr><td><dfn id=handler-window-onbeforeprint title=handler-window-onbeforeprint><code>onbeforeprint</code></dfn> <td> <code title=event-beforeprint>beforeprint</code>
    <tr><td><dfn id=handler-window-onbeforeunload title=handler-window-onbeforeunload><code>onbeforeunload</code></dfn> <td> <code title=event-beforeunload>beforeunload</code>
    <tr><td><dfn id=handler-window-onblur title=handler-window-onblur><code>onblur</code></dfn> <td> <code title=event-blur>blur</code>
    <tr><td><dfn id=handler-window-onerror title=handler-window-onerror><code>onerror</code></dfn> <td> <code title=event-error>error</code>
    <tr><td><dfn id=handler-window-onfocus title=handler-window-onfocus><code>onfocus</code></dfn> <td> <code title=event-focus>focus</code>
    <tr><td><dfn id=handler-window-onhashchange title=handler-window-onhashchange><code>onhashchange</code></dfn> <td> <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code> <!-- new -->
    <tr><td><dfn id=handler-window-onload title=handler-window-onload><code>onload</code></dfn> <td> <code title=event-load>load</code> <!-- widely used -->
    <tr><td><dfn id=handler-window-onmessage title=handler-window-onmessage><code>onmessage</code></dfn> <td> <code title=event-message><a href=#event-message>message</a></code> <!-- new for postMessage -->
    <tr><td><dfn id=handler-window-onoffline title=handler-window-onoffline><code>onoffline</code></dfn> <td> <code title=event-offline><a href=#event-offline>offline</a></code> <!-- new -->
    <tr><td><dfn id=handler-window-ononline title=handler-window-ononline><code>ononline</code></dfn> <td> <code title=event-online><a href=#event-online>online</a></code> <!-- new -->
    <tr><td><dfn id=handler-window-onpagehide title=handler-window-onpagehide><code>onpagehide</code></dfn> <td> <code title=event-pagehide><a href=#event-pagehide>pagehide</a></code> <!-- new -->
    <tr><td><dfn id=handler-window-onpageshow title=handler-window-onpageshow><code>onpageshow</code></dfn> <td> <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code> <!-- new -->
    <tr><td><dfn id=handler-window-onpopstate title=handler-window-onpopstate><code>onpopstate</code></dfn> <td> <code title=event-popstate><a href=#event-popstate>popstate</a></code> <!-- new -->
    <tr><td><dfn id=handler-window-onredo title=handler-window-onredo><code>onredo</code></dfn> <td> <code title=event-redo><a href=#event-redo>redo</a></code> <!-- new -->
    <tr><td><dfn id=handler-window-onresize title=handler-window-onresize><code>onresize</code></dfn> <td> <code title=event-resize>resize</code> <!-- widely used --> <!-- [CSSOM] -->
    <tr><td><dfn id=handler-window-onstorage title=handler-window-onstorage><code>onstorage</code></dfn> <td> <code title=event-storage>storage</code> <!-- new -->
    <tr><td><dfn id=handler-window-onundo title=handler-window-onundo><code>onundo</code></dfn> <td> <code title=event-undo><a href=#event-undo>undo</a></code> <!-- new -->
    <tr><td><dfn id=handler-window-onunload title=handler-window-onunload><code>onunload</code></dfn> <td> <code title=event-unload>unload</code> <!-- widely used -->
  </table><p class=note>The <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code>
  handler is also used for <a href=#runtime-script-errors>reporting script errors</a>.</p>

  </div>


  <div class=impl>

  <h5 id=event-firing><span class=secno>7.1.6.3 </span>Event firing</h5>

  <p>Certain operations and methods are defined as firing events on
  elements. For example, the <code title=dom-click><a href=#dom-click>click()</a></code>
  method on the <code><a href=#htmlelement>HTMLElement</a></code> interface is defined as
  firing a <code title=event-click><a href=#event-click>click</a></code> event on the
  element. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

  <p><dfn id=fire-a-click-event title="fire a click event">Firing a <code title=event-click>click</code> event</dfn> means that a <code title=event-click><a href=#event-click>click</a></code> event, which bubbles and is
  cancelable, and which uses the <code>MouseEvent</code> interface,
  must be dispatched at the given target. The event object must have
  its <code title="">screenX</code>, <code title="">screenY</code>,
  <code title="">clientX</code>, <code title="">clientY</code>, and
  <code title="">button</code> attributes set to 0, its <code title="">ctrlKey</code>, <code title="">shiftKey</code>, <code title="">altKey</code>, and <code title="">metaKey</code> attributes
  set according to the current state of the key input device, if any
  (false for any keys that are not available), its <code title="">detail</code> attribute set to 1, and its <code title="">relatedTarget</code> attribute set to null. The <code title="">getModifierState()</code> method on the object must return
  values appropriately describing the state of the key input device at
  the time the event is created.</p>

  <p><dfn id=fire-a-simple-event title="fire a simple event">Firing a simple event named <var title="">e</var></dfn> means that an event with the name <var title="">e</var>, which does not bubble (except where otherwise
  stated) and is not cancelable (except where otherwise stated), and
  which uses the <code><a href=#event>Event</a></code> interface, must be dispatched at
  the given target.</p>

<!--
  <p><dfn title="fire a progress event">Firing a progress event named
  <var title="">e</var></dfn>, optionally in the context of a
  particular instance of the <span title="fetch">fetching
  algorithm</span>, means that an event with the name <var
  title="">e</var>, which does not bubble (except where otherwise
  stated) and is not cancelable (except where otherwise stated), and
  which uses the <code>ProgressEvent</code> interface, must be
  dispatched at the given target element. If there is a <span
  title="fetch">fetching algorithm</span>, and the <span>URL</span>
  being <span title="fetch">fetched</span> has the <span>same
  origin</span> as the <code>Document</code> of the target element,
  then the <code
  title="dom-ProgressEvents-lengthComputable">lengthComputable</code>
  attribute must be set to true if the <span title="fetch">fetching
  algorithm</span>'s subject has a known <span
  title="concept-fetch-total">size</span>; the <code
  title="dom-ProgressEvents-total">total</code> attribute must be set
  to the subject's <span title="concept-fetch-total">size</span> if it
  is known and zero otherwise; and the <code
  title="dom-ProgressEvents-loaded">loaded</code> attribute must be
  set to the <span title="concept-fetch-loaded">number of bytes
  downloaded</span>, excluding HTTP headers <span
  title="concept-http-equivalent-headers">or
  equivalent</span>. Otherwise, the <code
  title="dom-ProgressEvents-lengthComputable">lengthComputable</code>
  attribute must be set to false, and the <code
  title="dom-ProgressEvents-total">total</code> and the <code
  title="dom-ProgressEvents-loaded">loaded</code> attributes must be
  set to zero. <a href="#r-e-f-sPROGRESS">[PROGRESS]</a></p>
(also fix reference in line above)-->

  <p>The default action of these event is to do nothing except where
  otherwise stated.</p>

  </div>


  <div class=impl>

  <h5 id=events-and-the-window-object><span class=secno>7.1.6.4 </span>Events and the <code><a href=#window>Window</a></code> object</h5>

  <p>When an event is dispatched at a DOM node in a
  <code><a href=#document>Document</a></code> in a <a href=#browsing-context>browsing context</a>, if the
  event is not a <code title=event-load>load</code> event, the user
  agent must also dispatch the event to the <code><a href=#window>Window</a></code>, as
  follows:</p>

  <ol><li>In the capture phase, the event must propagate to the
   <code><a href=#window>Window</a></code> object before propagating to any of the nodes,
   as if the <code><a href=#window>Window</a></code> object was the parent of the
   <code><a href=#document>Document</a></code> in the dispatch chain.</li>

   <li>In the bubble phase, the event must propagate up to the
   <code><a href=#window>Window</a></code> object at the end of the phase, unless bubbling
   has been prevented, again as if the <code><a href=#window>Window</a></code> object was
   the parent of the <code><a href=#document>Document</a></code> in the dispatch chain.</li>

  </ol></div>


  <div class=impl>

  <h5 id=runtime-script-errors><span class=secno>7.1.6.5 </span>Runtime script errors</h5>

  <p><i>This section only applies to user agents that support
  scripting in general and JavaScript in particular.</i></p>

  <p>Whenever an uncaught runtime script error occurs in one of the
  scripts associated with a <code><a href=#document>Document</a></code>, the user agent must
  <a href=#report-the-error>report the error</a> using the <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code> <a href=#event-handlers title="event
  handlers">event handler</a> of the <a href="#script's-global-object">script's global
  object</a>. If the error is still <i title=concept-error-nothandled><a href=#concept-error-nothandled>not handled</a></i> after this, then
  the error may be reported to the user.</p>

  <hr><p>When the user agent is required to <dfn id=report-the-error title="report the
  error">report an error</dfn> <var title="">error</var> using the
  <a href=#event-handlers title="event handlers">event handler</a> <var title="">onerror</var>, it must run these steps, after which the
  error is either <dfn id=concept-error-handled title=concept-error-handled><i>handled</i></dfn> or <dfn id=concept-error-nothandled title=concept-error-nothandled><i>not handled</i></dfn>:</p>

  <dl class=switch><dt>If the value of <var title="">onerror</var> is a
   <code><a href=#function>Function</a></code></dt>

   <dd>

    <p>The function must be invoked with three arguments. The three
    arguments passed to the function are all <code>DOMString</code>s;
    the first must give the message that the UA is considering
    reporting, the second must give the <a href=#absolute-url>absolute URL</a> of
    the resource in which the error occurred, and the third must give
    the line number in that resource on which the error occurred.</p>

    <p>If the function returns false, then the error is <i title=concept-error-handled><a href=#concept-error-handled>handled</a></i>. Otherwise, the error is
    <i title=concept-error-nothandled><a href=#concept-error-nothandled>not handled</a></i>.</p>

    <p>Any uncaught exceptions thrown or errors caused by this
    function may be reported to the user immediately after the error
    that the function was called for; the <a href=#report-the-error title="report the
    error">report an error</a> algorithm must not be used to handle
    exceptions thrown or errors caused by this function.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>The error is <i title=concept-error-nothandled><a href=#concept-error-nothandled>not handled</a></i>.</p>

   </dd>

  </dl></div>


  <h3 id=timers><span class=secno>7.2 </span>Timers</h3>

  <p>The <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout()</a></code>
  and <code title=dom-windowtimers-setInterval><a href=#dom-windowtimers-setinterval>setInterval()</a></code>
  methods allow authors to schedule timer-based callbacks.</p>

<pre class=idl>[Supplemental, NoInterfaceObject]
interface <dfn id=windowtimers>WindowTimers</dfn> {
  long <a href=#dom-windowtimers-settimeout title=dom-windowtimers-setTimeout>setTimeout</a>(in any handler, in optional any timeout, in any... args);
  void <a href=#dom-windowtimers-cleartimeout title=dom-windowtimers-clearTimeout>clearTimeout</a>(in long handle);
  long <a href=#dom-windowtimers-setinterval title=dom-windowtimers-setInterval>setInterval</a>(in any handler, in optional any timeout, in any... args);
  void <a href=#dom-windowtimers-clearinterval title=dom-windowtimers-clearInterval>clearInterval</a>(in long handle);
};
<a href=#window>Window</a> implements <a href=#windowtimers>WindowTimers</a>;</pre>

  <dl class=domintro><dt><var title="">handle</var> = <var title="">window</var> . <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt>

   <dd>

    <p>Schedules a timeout to run <var title="">handler</var> after
    <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>

   </dd>

   <dt><var title="">handle</var> = <var title="">window</var> . <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt>

   <dd>

    <p>Schedules a timeout to compile and run <var title="">code</var>
    after <var title="">timeout</var> milliseconds.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-windowtimers-clearTimeout><a href=#dom-windowtimers-cleartimeout>clearTimeout</a></code>( <var title="">handle</var> )</dt>

   <dd>

    <p>Cancels the timeout set with <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout()</a></code> identified by <var title="">handle</var>.</p>

   </dd>

   <dt><var title="">handle</var> = <var title="">window</var> . <code title=dom-windowtimers-setInterval><a href=#dom-windowtimers-setinterval>setInterval</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt>

   <dd>

    <p>Schedules a timeout to run <var title="">handler</var> every
    <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>

   </dd>

   <dt><var title="">handle</var> = <var title="">window</var> . <code title=dom-windowtimers-setInterval><a href=#dom-windowtimers-setinterval>setInterval</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt>

   <dd>

    <p>Schedules a timeout to compile and run <var title="">code</var>
    every <var title="">timeout</var> milliseconds.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-windowtimers-clearInterval><a href=#dom-windowtimers-clearinterval>clearInterval</a></code>( <var title="">handle</var> )</dt>

   <dd>

    <p>Cancels the timeout set with <code title=dom-windowtimers-setInterval><a href=#dom-windowtimers-setinterval>setInterval()</a></code> identified by <var title="">handle</var>.</p>

   </dd>

  </dl><p class=note>This API does not guarantee that timers will fire
  exactly on schedule. Delays due to CPU load, other tasks, etc, are
  to be expected.</p>

  <div class=impl>

  <p class=note>The <code><a href=#windowtimers>WindowTimers</a></code> interface adds to the
  <code><a href=#window>Window</a></code> interface and the <code>WorkerUtils</code>
  interface (part of Web Workers).</p>

  <p>Each object that implements the <code><a href=#windowtimers>WindowTimers</a></code>
  interface has a <dfn id=list-of-active-timeouts>list of active timeouts</dfn> and a <dfn id=list-of-active-intervals>list
  of active intervals</dfn>. Each entry in these lists is identified
  by a number, which must be unique within its list for the lifetime
  of the object that implements the <code><a href=#windowtimers>WindowTimers</a></code>
  interface.</p>

  <hr><p>The <dfn id=dom-windowtimers-settimeout title=dom-windowtimers-setTimeout><code>setTimeout()</code></dfn>
  method must run the following steps:

  <ol><li><p>Let <var title="">handle</var> be a user-agent-defined integer
   that is greater than zero that will identify the timeout to be set
   by this call.</li>

   <li><p>Add an entry to the <a href=#list-of-active-timeouts>list of active timeouts</a> for
   <var title="">handle</var>.</li>

   <li><p><a href=#get-the-timed-task>Get the timed task</a> <var title="">handle</var> in
   the <a href=#list-of-active-timeouts>list of active timeouts</a>, and let <var title="">task</var> be the result.</li>

   <li><p><a href=#get-the-timeout>Get the timeout</a>, and let <var title="">timeout</var> be the result.</li>

   <li><p>If the currently running <a href=#concept-task title=concept-task>task</a> is a task that was created by the
   <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout()</a></code>
   method, and <var title="">timeout</var> is less than 4, then
   increase <var title="">timeout</var> to 4.</li>

   <li><p>Return <var title="">handle</var>, and then continue running
   this algorithm asynchronously.</li>

   <li>

    <p>If the <a href=#method-context>method context</a> is a <code><a href=#window>Window</a></code>
    object, wait until the <code><a href=#document>Document</a></code> associated with the
    <a href=#method-context>method context</a> has been <a href=#fully-active>fully active</a> for
    a further <var title="">timeout</var> milliseconds (not
    necessarily consecutively).</p>

    <p>Otherwise, if the <a href=#method-context>method context</a> is a
    <code>WorkerUtils</code> object, wait until <var title="">timeout</var> milliseconds have passed with the worker
    not suspended (not necessarily consecutively).</p>

    <p>Otherwise, act as described in the specification that defines
    that the <code><a href=#windowtimers>WindowTimers</a></code> interface is implemented by
    some other object.</p>

   </li>

   <li><p>Wait until any invocations of this algorithm started before
   this one whose <var title="">timeout</var> is equal to or less than
   this one's have completed.</li>

   <li><p><a href=#queue-a-task title="queue a task">Queue</a> the <var title="">task</var> <a href=#concept-task title=concept-task>task</a>.</li>

  </ol><p>The <dfn id=dom-windowtimers-cleartimeout title=dom-windowtimers-clearTimeout><code>clearTimeout()</code></dfn>
  method must clear the entry identified as <var title="">handle</var>
  from the <a href=#list-of-active-timeouts>list of active timeouts</a> of the
  <code><a href=#windowtimers>WindowTimers</a></code> object on which the method was invoked,
  where <var title="">handle</var> is the argument passed to the
  method.</p>

  <hr><p>The <dfn id=dom-windowtimers-setinterval title=dom-windowtimers-setInterval><code>setInterval()</code></dfn>
  method must run the following steps:

  <ol><li><p>Let <var title="">handle</var> be a user-agent-defined integer
   that is greater than zero that will identify the interval to be set
   by this call.</li>

   <li><p>Add an entry to the <a href=#list-of-active-intervals>list of active intervals</a> for
   <var title="">handle</var>.</li>

   <li><p><a href=#get-the-timed-task>Get the timed task</a> <var title="">handle</var> in
   the <a href=#list-of-active-intervals>list of active intervals</a>, and let <var title="">task</var> be the result.</li>

   <li><p><a href=#get-the-timeout>Get the timeout</a>, and let <var title="">timeout</var> be the result.</li>

   <li><p>If <var title="">timeout</var> is less than 10, then
   increase <var title="">timeout</var> to 10.</li> <!-- (but see
   note below about IE) -->

   <li><p>Return <var title="">handle</var>, and then continue running
   this algorithm asynchronously.</li>

   <!-- Note: IE doesn't actually run intervals with duration zero, it
   aborts roughly here in the algorithm for them. -->

   <li>

    <p><i title="">Wait</i>: If the <a href=#method-context>method context</a> is a
    <code><a href=#window>Window</a></code> object, wait until the <code><a href=#document>Document</a></code>
    associated with the <a href=#method-context>method context</a> has been <a href=#fully-active>fully
    active</a> for a further <var title="">interval</var>
    milliseconds (not necessarily consecutively).</p>

    <p>Otherwise, if the <a href=#method-context>method context</a> is a
    <code>WorkerUtils</code> object, wait until <var title="">interval</var> milliseconds have passed with the worker
    not suspended (not necessarily consecutively).</p>

    <p>Otherwise, act as described in the specification that defines
    that the <code><a href=#windowtimers>WindowTimers</a></code> interface is implemented by
    some other object.</p>

   </li>

   <li><p><a href=#queue-a-task title="queue a task">Queue</a> the <var title="">task</var> <a href=#concept-task title=concept-task>task</a>.</li>

   <li><p>Return to the step labeled <i>wait</i>.</li>

  </ol><p>The <dfn id=dom-windowtimers-clearinterval title=dom-windowtimers-clearInterval><code>clearInterval()</code></dfn>
  method must clear the entry identified as <var title="">handle</var>
  from the <a href=#list-of-active-intervals>list of active intervals</a> of the
  <code><a href=#windowtimers>WindowTimers</a></code> object on which the method was invoked,
  where <var title="">handle</var> is the argument passed to the
  method.</p>

  <hr><p>The <dfn id=method-context>method context</dfn>, when referenced by the algorithms
  in this section, is the object on which the method for which the
  algorithm is running is implemented (a <code><a href=#window>Window</a></code> or
  <code>WorkerUtils</code> object).</p>

  <p>When the above methods are invoked and try to <dfn id=get-the-timed-task>get the timed
  task</dfn> <var title="">handle</var> in list <var title="">list</var>,
  they must run the following steps:</p>

  <ol><li>

    <p>If the first argument to the invoked method is an object that
    has an internal [[Call]] method, then return a <a href=#concept-task title=concept-task>task</a> that checks if the entry for <var title="">handle</var> in <var title="">list</var> has been cleared,
    and if it has not, calls the aforementioned [[Call]] method with
    as its arguments the third and subsequent arguments to the invoked
    method (if any), and abort these steps.</p>

    <p>Otherwise, continue with the remaining steps.</p>

   </li>

   <li><p>Apply the ToString() abstract operation to the first
   argument to the method, and let <var title="">script source</var>
   be the result. <a href=#refsECMA262>[ECMA262]</a></li>

   <li><p>Let <var title="">script language</var> be
   JavaScript.</li>

   <li>

    <p>If the <a href=#method-context>method context</a> is a <code><a href=#window>Window</a></code>
    object, let <var title="">global object</var> be the <a href=#method-context>method
    context</a>, let <var title="">browsing context</var> be the
    <a href=#browsing-context>browsing context</a> with which <var title="">global
    object</var> is associated, let <var title="">character
    encoding</var> be the <a href="#document's-character-encoding" title="document's character
    encoding">character encoding</a> of the <code><a href=#document>Document</a></code>
    associated with <var title="">global object</var> (<a href=#sce-not-copy>this is a reference, not a copy</a>), and let
    <var title="">base URL</var> be the <a href=#document-base-url title="document base
    URL">base URL</a> of the <code><a href=#document>Document</a></code> associated with
    <var title="">global object</var> (<a href=#sbu-not-copy>this is
    a reference, not a copy</a>).</p>

    <p>Otherwise, if the <a href=#method-context>method context</a> is a
    <code>WorkerUtils</code> object, let <var title="">global
    object</var>, <var title="">browsing context</var>, <var title="">document</var>, <var title="">character encoding</var>,
    and <var title="">base URL</var> be the <a href="#script's-global-object">script's global
    object</a>, <a href="#script's-browsing-context">script's browsing context</a>,
    <a href="#script's-document">script's document</a>, <a href="#script's-url-character-encoding">script's URL character
    encoding</a>, and <a href="#script's-base-url">script's base URL</a> (respectively)
    of the <a href=#concept-script title=concept-script>script</a> that the
    <span>run a worker</span> algorithm created when it created the
    <a href=#method-context>method context</a>.</p>

    <p>Otherwise, act as described in the specification that defines
    that the <code><a href=#windowtimers>WindowTimers</a></code> interface is implemented by
    some other object.</p>

   </li>

   <li><p>Return a <a href=#concept-task title=concept-task>task</a> that checks
   if the entry for <var title="">handle</var> in <var title="">list</var> has been cleared, and if it has not, <a href=#create-a-script title="create a script">creates a script</a> using <var title="">script source</var> as the script source, <var title="">scripting language</var> as the scripting language, <var title="">global object</var> as the global object, <var title="">browsing context</var> as the browsing context, <var title="">document</var> as the document, <var title="">character
   encoding</var> as the URL character encoding, and <var title="">base URL</var> as the base URL.</li>

  </ol><p>When the above methods are to <dfn id=get-the-timeout>get the timeout</dfn>, they
  must run the following steps:</p>

  <ol><li><p>Let <var title="">timeout</var> be the second argument to
   the method, or zero if the argument was omitted.</li>

   <li><p>Apply the ToString() abstract operation to <var title="">timeout</var>, and let <var title="">timeout</var>
   be the result. <a href=#refsECMA262>[ECMA262]</a></li>

   <li><p>Apply the ToNumber() abstract operation to <var title="">timeout</var>, and let <var title="">timeout</var> be the
   result. <a href=#refsECMA262>[ECMA262]</a></li>

   <li><p>If <var title="">timeout</var> is an Infinity value, a
   Not-a-Number (NaN) value, or negative, let <var title="">timeout</var> be zero.</li>

   <li><p>Round <var title="">timeout</var> down to the nearest
   integer, and let <var title="">timeout</var> be the
   result.</li>

   <li><p>Return <var title="">timeout</var>.</li>

  </ol><hr><p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <dfn id=timer-task-source>timer task
  source</dfn>.</p>

  </div>



  <h3 id=user-prompts><span class=secno>7.3 </span>User prompts</h3>

  <!--
   v2 ideas:
    * in-window modal dialogs
       - escape/enter handling
       - dragging the window out of the tab
    * in-window non-modal palettes
       - with a solution for the mobile space
  -->

  <h4 id=simple-dialogs><span class=secno>7.3.1 </span>Simple dialogs</h4>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-alert><a href=#dom-alert>alert</a></code>(<var title="">message</var>)</dt>
   <dd>

    <p>Displays a modal alert with the given message, and waits for the user to dismiss it.</p>

    <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

   <dt><var title="">result</var> = <var title="">window</var> . <code title=dom-confirm><a href=#dom-confirm>confirm</a></code>(<var title="">message</var>)</dt>
   <dd>

    <p>Displays a modal OK/Cancel prompt with the given message, waits
    for the user to dismiss it, and returns true if the user clicks OK
    and false if the user clicks Cancel.</p>

    <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

   <dt><var title="">result</var> = <var title="">window</var> . <code title=dom-prompt><a href=#dom-prompt>prompt</a></code>(<var title="">message</var> [, <var title="">default</var>] )</dt>
   <dd>

    <p>Displays a modal text field prompt with the given message,
    waits for the user to dismiss it, and returns the value that the
    user entered. If the user cancels the prompt, then returns null
    instead. If the second argument is present, then the given value
    is used as a default.</p>

    <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-alert title=dom-alert><code>alert(<var title="">message</var>)</code></dfn> method, when invoked, must
  release the <a href=#storage-mutex>storage mutex</a> and show the given <var title="">message</var> to the user. The user agent may make the
  method wait for the user to acknowledge the message before
  returning; if so, the user agent must <a href=#pause>pause</a> while the
  method is waiting.</p>

  <p>The <dfn id=dom-confirm title=dom-confirm><code>confirm(<var title="">message</var>)</code></dfn> method, when invoked, must
  release the <a href=#storage-mutex>storage mutex</a> and show the given <var title="">message</var> to the user, and ask the user to respond with
  a positive or negative response. The user agent must then
  <a href=#pause>pause</a> as the method waits for the user's response. If
  the user responds positively, the method must return true, and if
  the user responds negatively, the method must return false.</p>

  <p>The <dfn id=dom-prompt title=dom-prompt><code>prompt(<var title="">message</var>, <var title="">default</var>)</code></dfn>
  method, when invoked, must release the <a href=#storage-mutex>storage mutex</a>,
  show the given <var title="">message</var> to the user, and ask the
  user to either respond with a string value or abort. The user agent
  must then <a href=#pause>pause</a> as the method waits for the user's
  response. The second argument is optional. If the second argument
  (<var title="">default</var>) is present, then the response must be
  defaulted to the value given by <var title="">default</var>. If the
  user aborts, then the method must return null; otherwise, the method
  must return the string that the user responded with.</p>

  </div>


  <h4 id=printing><span class=secno>7.3.2 </span>Printing</h4>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-print><a href=#dom-print>print</a></code>()</dt>

   <dd>

    <p>Prompts the user to print the page.</p>

    <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-print title=dom-print><code>print()</code></dfn> method,
  when invoked, must run the <a href=#printing-steps>printing steps</a>.</p>

  <p>User agents should also run the <a href=#printing-steps>printing steps</a>
  whenever the user asks for the opportunity to <a href=#obtain-a-physical-form>obtain a
  physical form</a> (e.g. printed copy), or the representation of a
  physical form (e.g. PDF copy), of a document.</p>

  <p>The <dfn id=printing-steps>printing steps</dfn> are as follows:</p>

  <ol><li>

    <p>The user agent may display a message to the user and/or may
    abort these steps.</p>

    <p class=example>For instance, a kiosk browser could silently
    ignore any invocations of the <code title=dom-print><a href=#dom-print>print()</a></code> method.</p>

    <p class=example>For instance, a browser on a mobile device
    could detect that there are no printers in the vicinity and
    display a message saying so before continuing to offer a "save to
    PDF" option.</p>

   </li>

   <li>

    <p>The user agent must <a href=#fire-a-simple-event>fire a simple event</a> named
    <code title=event-beforeprint>beforeprint</code> at the
    <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code> that is
    being printed, as well as any <a href=#nested-browsing-context title="nested browsing
    context">nested browsing contexts</a> in it.</p>

    <p class=example>The <code title=event-beforeprint>beforeprint</code> event can be used
    to annotate the printed copy, for instance adding the time at
    which the document was printed.</p>

   </li>

   <li>

    <p>The user agent must release the <a href=#storage-mutex>storage mutex</a>.</p>

   </li>

   <li>

    <p>The user agent should offer the user the opportunity to
    <a href=#obtain-a-physical-form>obtain a physical form</a> (or the representation of a
    physical form) of the document. The user agent may wait for the
    user to either accept or decline before returning; if so, the user
    agent must <a href=#pause>pause</a> while the method is waiting. Even if
    the user agent doesn't wait at this point, the user agent must use
    the state of the relevant documents as they are at this point in
    the algorithm if and when it eventually creates the alternate
    form.</p>

   </li>

   <li>

    <p>The user agent must <a href=#fire-a-simple-event>fire a simple event</a> named
    <code title=event-afterprint>afterprint</code> at the
    <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code> that is
    being printed, as well as any <a href=#nested-browsing-context title="nested browsing
    context">nested browsing contexts</a> in it.</p>

    <p class=example>The <code title=event-afterprint>afterprint</code> event can be used
    to revert annotations added in the earlier event, as well as
    showing post-printing UI. For instance, if a page is walking the
    user through the steps of applying for a home loan, the script
    could automatically advance to the next step after having printed
    a form or other.</p>

   </li>

  </ol></div>


  <h4 id=dialogs-implemented-using-separate-documents><span class=secno>7.3.3 </span>Dialogs implemented using separate documents</h4>

  <dl class=domintro><dt><var title="">result</var> = <var title="">window</var> . <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog</a></code>(<var title="">url</var> [, <var title="">argument</var>] )</dt>

   <dd>

    <p>Prompts the user with the given page, waits for that page to
    close, and returns the return value.</p>

    <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-showmodaldialog title=dom-showModalDialog><code>showModalDialog(<var title="">url</var>, <var title="">argument</var><!--, <var
  title="">features</var>-->)</code></dfn> method, when invoked, must
  cause the user agent to run the following steps:</p>

  <ol><li>

    <p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">url</var> relative to the <a href=#entry-script>entry script</a>'s
    <a href="#script's-base-url" title="script's base URL">base URL</a>.</p>

    <p>If this fails, then throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception
    and abort these steps.</p>

   </li>

   <li>

    <p>Release the <a href=#storage-mutex>storage mutex</a>.</p>

   </li>

   <li>

    <p>If the user agent is configured such that this invocation of
    <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> is
    somehow disabled, then return the empty string and abort these
    steps.</p>

    <p class=note>User agents are expected to disable this method in
    certain cases to avoid user annoyance (e.g. as part of their popup
    blocker feature). For instance, a user agent could require that a
    site be white-listed before enabling this method, or the user
    agent could be configured to only allow one modal dialog at a
    time.</p>

   </li>

   <li>

    <p>Let <var title="">the list of background browsing
    contexts</var> be a list of all the browsing contexts that:</p>

    <ul><li>are part of the same <a href=#unit-of-related-browsing-contexts>unit of related browsing
     contexts</a> as the browsing context of the
     <code><a href=#window>Window</a></code> object on which the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method was
     called, and that</li>

     <li>have an <a href=#active-document>active document</a> whose
     <a href=#origin>origin</a> is the <a href=#same-origin title="same origin">same</a>
     as the <a href=#origin>origin</a> of the <a href=#concept-script title=concept-script>script</a> that called the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method at
     the time the method was called,</li> <!-- Note that changing
     document.domain to talk to another domain doesn't make you able
     to block that domain -->

    </ul><p>...as well as any browsing contexts that are nested inside any
    of the browsing contexts matching those conditions.</p>

   </li>

   <li>

    <p>Disable the user interface for all the browsing contexts in
    <var title="">the list of background browsing contexts</var>. This
    should prevent the user from navigating those browsing contexts,
    causing events to be sent to those browsing context, or editing
    any content in those browsing contexts. However, it does not
    prevent those browsing contexts from receiving events from sources
    other than the user, from running scripts, from running
    animations, and so forth.</p>

   </li>

   <li>

    <p>Create a new <a href=#auxiliary-browsing-context>auxiliary browsing context</a>, with the
    <a href=#opener-browsing-context>opener browsing context</a> being the browsing context of
    the <code><a href=#window>Window</a></code> object on which the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method was
    called. The new auxiliary browsing context has no name.</p>

    <p class=note>This <a href=#browsing-context>browsing context</a>'s
    <code><a href=#document>Document</a></code>s' <code><a href=#window>Window</a></code> objects all implement
    the <code><a href=#windowmodal>WindowModal</a></code> interface.</p>

   </li>

   <li>

    <p>Let the <a href=#dialog-arguments>dialog arguments</a> of the new browsing
    context be set to the value of <var title="">argument</var>, or
    the 'undefined' value if the argument was omitted.</p>

   </li>

   <li>

    <p>Let the <a href="#dialog-arguments'-origin">dialog arguments' origin</a> be the
    <a href=#origin>origin</a> of the <a href=#concept-script title=concept-script>script</a> that called the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method.</p>

   </li>

   <li>

    <p><a href=#navigate>Navigate</a> the new <a href=#browsing-context>browsing context</a> to
    the <a href=#absolute-url>absolute URL</a> that resulted from <a href=#resolve-a-url title="resolve a url">resolving</a> <var title="">url</var>
    earlier, with <a href=#replacement-enabled>replacement enabled</a>, and with the <a href="#script's-browsing-context" title="script's browsing context">browsing context</a> of the
    <a href=#concept-script title=concept-script>script</a> that invoked the method
    as the <a href=#source-browsing-context>source browsing context</a>.</p>

   </li>

   <li>

    <p><a href=#spin-the-event-loop>Spin the event loop</a> until the new <a href=#browsing-context>browsing
    context</a> is closed. (The user agent must allow the user to
    indicate that the <a href=#browsing-context>browsing context</a> is to be
    closed.)</p>

   </li>

   <li>

    <p>Reenable the user interface for all the browsing contexts in
    <var title="">the list of background browsing contexts</var>.</p>

   </li>

   <li>

    <p>Return the <a href=#auxiliary-browsing-context>auxiliary browsing context</a>'s
    <a href=#return-value>return value</a>.</p>

   </li>

  </ol><p>The <code><a href=#window>Window</a></code> objects of <code><a href=#document>Document</a></code>s hosted
  by <a href=#browsing-context title="browsing context">browsing contexts</a> created
  by the above algorithm must all have the <code><a href=#windowmodal>WindowModal</a></code>
  interface added to their <code><a href=#window>Window</a></code> interface:</p>

  </div>

  <pre class=idl>[Supplemental, NoInterfaceObject] interface <dfn id=windowmodal>WindowModal</dfn> {
  readonly attribute any <a href=#dom-windowmodal-dialogarguments title=dom-WindowModal-dialogArguments>dialogArguments</a>;
           attribute DOMString <a href=#dom-windowmodal-returnvalue title=dom-WindowModal-returnValue>returnValue</a>;
};</pre>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-WindowModal-dialogArguments><a href=#dom-windowmodal-dialogarguments>dialogArguments</a></code></dt>

   <dd>

    <p>Returns the <var title="">argument</var> argument that was
    passed to the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-WindowModal-returnValue><a href=#dom-windowmodal-returnvalue>returnValue</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current return value for the window.</p>

    <p>Can be set, to change the value that will be returned by the
    <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code>
    method.</p>

   </dd>

  </dl><div class=impl>

  <p>Such browsing contexts have associated <dfn id=dialog-arguments>dialog
  arguments</dfn>, which are stored along with the <dfn id="dialog-arguments'-origin">dialog
  arguments' origin</dfn>. These values are set by the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method in the
  algorithm above, when the browsing context is created, based on the
  arguments provided to the method.</p>

  <p>The <dfn id=dom-windowmodal-dialogarguments title=dom-WindowModal-dialogArguments><code>dialogArguments</code></dfn>
  IDL attribute, on getting, must check whether its browsing context's
  <a href=#active-document>active document</a>'s <a href=#origin>origin</a> is the <a href=#same-origin title="same origin">same</a> as the <a href="#dialog-arguments'-origin">dialog arguments'
  origin</a>. If it is, then the browsing context's <a href=#dialog-arguments>dialog
  arguments</a> must be returned unchanged. Otherwise, if the
  <a href=#dialog-arguments>dialog arguments</a> are an object, then the empty string
  must be returned, and if the <a href=#dialog-arguments>dialog arguments</a> are not
  an object, then the stringification of the <a href=#dialog-arguments>dialog
  arguments</a> must be returned.

  <p>These browsing contexts also have an associated <dfn id=return-value>return
  value</dfn>. The <a href=#return-value>return value</a> of a browsing context
  must be initialized to the empty string when the browsing context is
  created.</p>

  <p>The <dfn id=dom-windowmodal-returnvalue title=dom-WindowModal-returnValue><code>returnValue</code></dfn>
  IDL attribute, on getting, must return the <a href=#return-value>return value</a>
  of its browsing context, and on setting, must set the <a href=#return-value>return
  value</a> to the given new value.</p>

  </div>

  <p class=note>The <code title=dom-window-close><a href=#dom-window-close>window.close()</a></code> method can be used to
  close the browsing context.</p>




  <h3 id=system-state-and-capabilities><span class=secno>7.4 </span>System state and capabilities</h3>

  <div class=impl>

  <p>The <dfn id=dom-navigator title=dom-navigator><code>navigator</code></dfn>
  attribute of the <code><a href=#window>Window</a></code> interface must return an
  instance of the <code><a href=#navigator>Navigator</a></code> interface, which represents
  the identity and state of the user agent (the client), and allows
  Web pages to register themselves as potential protocol and content
  handlers:</p>

  </div>

  <pre class=idl>interface <dfn id=navigator>Navigator</dfn> {
  // objects implementing this interface also implement the interfaces given below
};
<a href=#navigator>Navigator</a> implements <a href=#navigatorid>NavigatorID</a>;
<a href=#navigator>Navigator</a> implements <a href=#navigatoronline>NavigatorOnLine</a>;
<a href=#navigator>Navigator</a> implements <a href=#navigatorabilities>NavigatorAbilities</a>;

[Supplemental, NoInterfaceObject]
interface <dfn id=navigatorid>NavigatorID</dfn> {<!--
  readonly attribute DOMString <span title="dom-navigator-appCodeName">appCodeName</span>;-->
  readonly attribute DOMString <a href=#dom-navigator-appname title=dom-navigator-appName>appName</a>;
  readonly attribute DOMString <a href=#dom-navigator-appversion title=dom-navigator-appVersion>appVersion</a>;
  readonly attribute DOMString <a href=#dom-navigator-platform title=dom-navigator-platform>platform</a>;
  readonly attribute DOMString <a href=#dom-navigator-useragent title=dom-navigator-userAgent>userAgent</a>;
};

[Supplemental, NoInterfaceObject]
interface <dfn id=navigatoronline>NavigatorOnLine</dfn> {
  readonly attribute boolean <a href=#dom-navigator-online title=dom-navigator-onLine>onLine</a>;
};

[Supplemental, NoInterfaceObject]
interface <dfn id=navigatorabilities>NavigatorAbilities</dfn> {
  // content handler registration
  void <a href=#dom-navigator-registerprotocolhandler title=dom-navigator-registerProtocolHandler>registerProtocolHandler</a>(in DOMString scheme, in DOMString url, in DOMString title);
  void <a href=#dom-navigator-registercontenthandler title=dom-navigator-registerContentHandler>registerContentHandler</a>(in DOMString mimeType, in DOMString url, in DOMString title);
  void <a href=#dom-navigator-yieldforstorageupdates title=dom-navigator-yieldForStorageUpdates>yieldForStorageUpdates</a>();
<!--  v2: cookieEnabled geolocator javaEnabled mozIsLocallyAvailable preference
  readonly attribute <span>MimeTypeArray</span> <span title="dom-navigator-mimeTypes">mimeTypes</span>;
  readonly attribute <span>PluginArray</span> <span title="dom-navigator-plugins">plugins</span>;
  (the latter is used in a <video> element demo now, so we might need to pull this forward from v2!)
-->};</pre>

  <div class=impl>

  <p>These interfaces are defined separately so that other
  specifications can re-use parts of the <code><a href=#navigator>Navigator</a></code>
  interface.</p>

   <!-- v2: also, see window.external.AddSearchProvider() and similar DOM APIs from IE -->

   <!-- v2: also, could expose languages:
   <dt><dfn title="dom-navigator-browserLanguage"><code>browserLanguage</code></dfn></dt> <!- - Opera and IE only - ->
   <dd><p>Must return either null or a language tag representing the language the browser uses in its interface.</p></dd>
   <dt><dfn title="dom-navigator-userLanguage"><code>userLanguage</code></dfn></dt> <!- - Opera and IE only - ->
   <dt><dfn title="dom-navigator-language"><code>language</code></dfn></dt> <!- - Opera, Safari, and Mozilla only - ->
   <dd><p>Must return either null or a language tag representing the user's preferred language.</p></dd>
   -->

  </div>


  <h4 id=client-identification><span class=secno>7.4.1 </span>Client identification</h4>

  <p>In certain cases, despite the best efforts of the entire
  industry, Web browsers have bugs and limitations that Web authors
  are forced to work around.</p>

  <p>This section defines a collection of attributes that can be used
  to determine, from script, the kind of user agent in use, in order
  to work around these issues.</p>

  <p>Client detection should always be limited to detecting known
  current versions; future versions and unknown versions should always
  be assumed to be fully compliant.</p>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-appName><a href=#dom-navigator-appname>appName</a></code></dt>
   <dd>
    <p>Returns the name of the browser.</p>
   </dd>

   <dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-appVersion><a href=#dom-navigator-appversion>appVersion</a></code></dt>
   <dd>
    <p>Returns the version of the browser.</p>
   </dd>

   <dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-platform><a href=#dom-navigator-platform>platform</a></code></dt>
   <dd>
    <p>Returns the name of the platform.</p>
   </dd>

   <dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-userAgent><a href=#dom-navigator-useragent>userAgent</a></code></dt>
   <dd>
    <p>Returns the complete User-Agent header.</p>
   </dd>

  </dl><div class=impl>

  <dl><!-- redundant
   <dt><dfn title="dom-navigator-appCodeName"><code>appCodeName</code></dfn></dt>
   <dd><p>Must return the string "<code title="">Mozilla</code>".</p></dd>
   --><!-- appMinorVersion: IE only. In IE8b1, returns " Beta" (with the space) --><dt><dfn id=dom-navigator-appname title=dom-navigator-appName><code>appName</code></dfn></dt>
   <dd><p>Must return either the string "<code title="">Netscape</code>" or the full name of the browser, e.g. "<code title="">Mellblom Browsernator</code>".</dd>

   <dt><dfn id=dom-navigator-appversion title=dom-navigator-appVersion><code>appVersion</code></dfn></dt>
   <dd><p>Must return either the string "<code title="">4.0</code>" or a string representing the version of the browser in detail, e.g. "<code title="">1.0 (VMS; en-US) Mellblomenator/9000</code>".</dd>

   <!-- buildID: Mozilla only -->

   <!-- oscpu: Mozilla only -->

   <dt><dfn id=dom-navigator-platform title=dom-navigator-platform><code>platform</code></dfn></dt>
   <dd><p>Must return either the empty string or a string representing the platform on which the browser is executing, e.g. "<code title="">MacIntel</code>", "<code title="">Win32</code>", "<code title="">FreeBSD i386</code>", "<code title="">WebTV OS</code>".</dd>

   <!-- product: Mozilla and Safari only; always returns "Gecko" -->

   <!-- productSub: Mozilla and Safari only; returns same as buildID in Mozilla, and returns the fixed string "20030107" in Safari -->

   <!-- securityPolicy: Mozilla only; always returns "" -->

   <!-- taintEnabled(): Opera, IE and Mozilla have this function as one that always returns false -->

   <dt><dfn id=dom-navigator-useragent title=dom-navigator-userAgent><code>userAgent</code></dfn></dt>
   <dd><p>Must return the string used for the value of the "<code title="">User-Agent</code>" header in HTTP requests, or the empty string if no such header is ever sent.</dd>

   <!-- vendor: Mozilla and Safari only; always returns "" in Mozilla, and returns the fixed string "Apple Computer, Inc." in Safari -->

   <!-- vendorSub: Mozilla and Safari only; always returns "" -->

  </dl></div>


  <h4 id=custom-handlers><span class=secno>7.4.2 </span>Custom scheme and content handlers</h4>

  <p>The <dfn id=dom-navigator-registerprotocolhandler title=dom-navigator-registerProtocolHandler><code>registerProtocolHandler()</code></dfn>
  method allows Web sites to register themselves as possible handlers
  for particular schemes. For example, an online telephone messaging
  service could register itself as a handler of the <code>sms:</code>
  scheme (<a href=#refsRFC5724>[RFC5724]</a>), so that if the user
  clicks on such a link, he is given the opportunity to use that Web
  site. Analogously, the <dfn id=dom-navigator-registercontenthandler title=dom-navigator-registerContentHandler><code>registerContentHandler()</code></dfn>
  method allows Web sites to register themselves as possible handlers
  for content in a particular <a href=#mime-type>MIME type</a>. For example, the
  same online telephone messaging service could register itself as a
  handler for <code>text/directory</code> files (<a href=#refsRFC2425>[RFC2425]</a>), so that if the user has no
  native application capable of handling vCards (<a href=#refsRFC2426>[RFC2426]</a>), his Web browser can instead
  suggest he use that site to view contact information stored on
  vCards that he opens.</p>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-registerProtocolHandler><a href=#dom-navigator-registerprotocolhandler>registerProtocolHandler</a></code>(<var title="">scheme</var>, <var title="">url</var>, <var title="">title</var>)</dt>
   <dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler</a></code>(<var title="">mimeType</var>, <var title="">url</var>, <var title="">title</var>)</dt>

   <dd>

    <p>Registers a handler for the given scheme or content type, at
    the given URL, with the given title.</p>

    <p>The string "<code title="">%s</code>" in the URL is used as a
    placeholder for where to put the URL of the content to be
    handled.</p>

    <p>Throws a <code><a href=#security_err>SECURITY_ERR</a></code> exception if the user agent
    blocks the registration (this might happen if trying to register
    as a handler for "http", for instance).</p>

    <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> if the "<code title="">%s</code>" string is missing in the URL.</p>

   </dd>

  </dl><div class=impl>

  <p>User agents may, within the constraints described in this
  section, do whatever they like when the methods are called. A UA
  could, for instance, prompt the user and offer the user the
  opportunity to add the site to a shortlist of handlers, or make the
  handlers his default, or cancel the request. UAs could provide such
  a UI through modal UI or through a non-modal transient notification
  interface. UAs could also simply silently collect the information,
  providing it only when relevant to the user.</p>

  <p>User agents should keep track of which sites have registered
  handlers (even if the user has declined such registrations) so that
  the user is not repeatedly prompted with the same request.</p>

  <p>The arguments to the methods have the following meanings and
  corresponding implementation requirements:</p>

  <dl><dt><var title="">protocol</var> (<code title=dom-navigator-registerProtocolHandler><a href=#dom-navigator-registerprotocolhandler>registerProtocolHandler()</a></code> only)</dt>

   <dd>

    <p>A scheme, such as <code>ftp</code> or <code>sms</code>. The
    scheme must be compared in an <a href=#ascii-case-insensitive>ASCII case-insensitive</a>
    manner by user agents for the purposes of comparing with the
    scheme part of URLs that they consider against the list of
    registered handlers.</p>

    <p>The <var title="">scheme</var> value, if it contains a colon
    (as in "<code>ftp:</code>"), will never match anything, since
    schemes don't contain colons.</p>

    <p class=note>This feature is not intended to be used with
    non-standard protocols.</p>

   </dd>

   <dt><var title="">mimeType</var> (<code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code> only)</dt>

   <dd>

    <p>A <a href=#mime-type>MIME type</a>, such as
    <code>model/vnd.flatland.3dml</code> or
    <code>application/vnd.google-earth.kml+xml</code>. The <a href=#mime-type>MIME
    type</a> must be compared in an <a href=#ascii-case-insensitive>ASCII
    case-insensitive</a> manner by user agents for the purposes of
    comparing with MIME types of documents that they consider against
    the list of registered handlers.</p>

    <p>User agents must compare the given values only to the MIME
    type/subtype parts of content types, not to the complete type
    including parameters. Thus, if <var title="">mimeType</var> values
    passed to this method include characters such as commas or
    whitespace, or include MIME parameters, then the handler being
    registered will never be used.</p>

    <p class=note>The type is compared to the <a href=#mime-type>MIME type</a>
    used by the user agent <em>after</em> the sniffing algorithms have
    been applied.</p>

   </dd>


   <dt><var title="">url</var></dt>

   <dd>

    <p>A string used to build the <a href=#url>URL</a> of the page that
    will handle the requests.</p>

    <p>When the user agent uses this URL, it must replace the first
    occurrence of the exact literal string "<code title="">%s</code>"
    with an escaped version of the <a href=#absolute-url>absolute URL</a> of the
    content in question (as defined below), then <a href=#resolve-a-url title="resolve
    a url">resolve</a> the resulting URL, relative to the <a href="#script's-base-url" title="script's base URL">base URL</a> of the <a href=#entry-script>entry
    script</a> at the time the <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code>
    or <code title=dom-navigator-registerProtocolHandler><a href=#dom-navigator-registerprotocolhandler>registerProtocolHandler()</a></code>
    methods were invoked, and then <a href=#navigate>navigate</a> an
    appropriate <a href=#browsing-context>browsing context</a> to the resulting URL
    using the GET method (<a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
    equivalent</a> for non-HTTP URLs).</p>

    <p>To get the escaped version of the <a href=#absolute-url>absolute URL</a> of
    the content in question, the user agent must replace every
    character in that <a href=#absolute-url>absolute URL</a> that doesn't match the
    &lt;query&gt; production defined in RFC 3986 by the
    percent-encoded form of that character. <a href=#refsRFC3986>[RFC3986]</a></p>

    <div class=example>

     <p>If the user had visited a site at <code title="">http://example.com/</code> that made the following
     call:</p>

     <pre>navigator.registerContentHandler('application/x-soup', 'soup?url=%s', 'SoupWeb&trade;')</pre>

     <p>...and then, much later, while visiting <code title="">http://www.example.net/</code>, clicked on a link such
     as:</p>

     <pre>&lt;a href="chickenk&iuml;wi.soup"&gt;Download our Chicken K&iuml;wi soup!&lt;/a&gt;</pre>

     <p>...then, assuming this <code>chickenk&iuml;wi.soup</code> file
     was served with the <a href=#mime-type>MIME type</a>
     <code>application/x-soup</code>, the UA might navigate to the
     following URL:</p>

     <pre>http://example.com/soup?url=http://www.example.net/chickenk%C3%AFwi.soup</pre>

     <p>This site could then fetch the <code>chickenk&iuml;wi.soup</code>
     file and do whatever it is that it does with soup (synthesize it
     and ship it to the user, or whatever).</p>

    </div>

   </dd>

   <dt><var title="">title</var></dt>

   <dd>

    <p>A descriptive title of the handler, which the UA might use to
    remind the user what the site in question is.</p>

   </dd>

  </dl><p>User agents should raise <code><a href=#security_err>SECURITY_ERR</a></code> exceptions if
  the methods are called with <var title="">scheme</var> or <var title="">mimeType</var> values that the UA deems to be
  "privileged". For example, a site attempting to register a handler
  for <code>http</code> URLs or <code><a href=#text/html>text/html</a></code> content in a
  Web browser would likely cause an exception to be raised.</p>

  <p>User agents must raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the
  <var title="">url</var> argument passed to one of these methods does
  not contain the exact literal string "<code>%s</code>", or if <a href=#resolve-a-url title="resolve a url">resolving</a> the <var title="">url</var>
  argument with the first occurrence of the string "<code title="">%s</code>" removed, relative to the <a href=#entry-script>entry
  script</a>'s <a href="#script's-base-url" title="script's base URL">base URL</a>, is
  not successful.</p>

  <p>User agents must not raise any other exceptions (other than
  binding-specific exceptions, such as for an incorrect number of
  arguments in an JavaScript implementation).</p>

  <p>This section does not define how the pages registered by these
  methods are used, beyond the requirements on how to process the <var title="">url</var> value (see above). To some extent, the <a href=#navigate title=navigate>processing model for navigating across
  documents</a> defines some cases where these methods are
  relevant, but in general UAs may use this information wherever they
  would otherwise consider handing content to native plugins or helper
  applications.</p>

  <p>UAs must not use registered content handlers to handle content
  that was returned as part of a non-GET transaction (or rather, as
  part of any non-idempotent transaction), as the remote site would
  not be able to fetch the same data.</p>

  </div>


  <div class=impl>

  <h5 id=security-and-privacy><span class=secno>7.4.2.1 </span>Security and privacy</h5>

  <p>These mechanisms can introduce a number of concerns, in
  particular privacy concerns.</p>

  <p><strong>Hijacking all Web usage.</strong> User agents should not
  allow schemes that are key to its normal operation, such as
  <code>http</code> or <code>https</code>, to be rerouted through
  third-party sites. This would allow a user's activities to be
  trivially tracked, and would allow user information, even in secure
  connections, to be collected.</p>

  <p><strong>Hijacking defaults.</strong> It is strongly recommended
  that user agents do not automatically change any defaults, as this
  could lead the user to send data to remote hosts that the user is
  not expecting. New handlers registering themselves should never
  automatically cause those sites to be used.</p>

  <p><strong>Registration spamming.</strong> User agents should
  consider the possibility that a site will attempt to register a
  large number of handlers, possibly from multiple domains (e.g. by
  redirecting through a series of pages each on a different domain,
  and each registering a handler for <code>video/mpeg</code> &mdash;
  analogous practices abusing other Web browser features have been
  used by pornography Web sites for many years). User agents should
  gracefully handle such hostile attempts, protecting the user.</p>

  <p><strong>Misleading titles.</strong> User agents should not rely
  wholly on the <var title="">title</var> argument to the methods when
  presenting the registered handlers to the user, since sites could
  easily lie. For example, a site <code>hostile.example.net</code>
  could claim that it was registering the "Cuddly Bear Happy Content
  Handler". User agents should therefore use the handler's domain in
  any UI along with any title.</p>

  <p><strong>Hostile handler metadata.</strong> User agents should
  protect against typical attacks against strings embedded in their
  interface, for example ensuring that markup or escape characters in
  such strings are not executed, that null bytes are properly handled,
  that over-long strings do not cause crashes or buffer overruns, and
  so forth.</p>

  <p><strong>Leaking Intranet URLs.</strong> The mechanism described
  in this section can result in secret Intranet URLs being leaked, in
  the following manner:</p>

  <ol><li>The user registers a third-party content handler as the default
   handler for a content type.</li>

   <li>The user then browses his corporate Intranet site and accesses
   a document that uses that content type.</li>

   <li>The user agent contacts the third party and hands the third
   party the URL to the Intranet content.</li>

  </ol><p>No actual confidential file data is leaked in this manner, but
  the URLs themselves could contain confidential information. For
  example, the URL could be
  <code>http://www.corp.example.com/upcoming-aquisitions/the-sample-company.egf</code>,
  which might tell the third party that Example Corporation is
  intending to merge with The Sample Company. Implementors might wish
  to consider allowing administrators to disable this feature for
  certain subdomains, content types, or schemes.</p>

  <p><strong>Leaking secure URLs.</strong> User agents should not send
  HTTPS URLs to third-party sites registered as content handlers, in
  the same way that user agents do not send <code title=http-referer>Referer</code> (sic) HTTP headers from secure
  sites to third-party sites.</p>

  <p><strong>Leaking credentials.</strong> User agents must never send
  username or password information in the URLs that are escaped and
  included sent to the handler sites. User agents may even avoid
  attempting to pass to Web-based handlers the URLs of resources
  that are known to require authentication to access, as such sites
  would be unable to access the resources in question without
  prompting the user for credentials themselves (a practice that would
  require the user to know whether to trust the third-party handler, a
  decision many users are unable to make or even understand).</p>

  </div>


  <div class=impl>

  <h5 id=sample-handler-impl><span class=secno>7.4.2.2 </span>Sample user interface</h5>

  <p><i>This section is non-normative.</i></p>

  <p>A simple implementation of this feature for a desktop Web browser
  might work as follows.</p>

  <p>The <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code>
  method could display a modal dialog box:</p>

  <p><img alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the &quot;kittens.example.org&quot; domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'." src=images/sample-content-handler-registration.png></p>

  <p>In this dialog box, "Kittens at work" is the title of the page
  that invoked the method, "http://kittens.example.org/" is the URL of
  that page, "application/x-meowmeow" is the string that was passed to
  the <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code>
  method as its first argument (<var title="">mimeType</var>),
  "http://kittens.example.org/?show=%s" was the second argument (<var title="">url</var>), and "Kittens-at-work displayer" was the third
  argument (<var title="">title</var>).</p>

  <p>If the user clicks the Cancel button, then nothing further
  happens. If the user clicks the "Trust" button, then the handler is
  remembered.</p>

  <p>When the user then attempts to fetch a URL that uses the
  "application/x-meowmeow" <a href=#mime-type>MIME type</a>, then it might
  display a dialog as follows:</p>

  <p><img alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the &quot;Kittens-at-work displayer&quot; application at &quot;kittens.example.org&quot;', with a checkbox labeld 'Always do this for resources using the &quot;application/x-meowmeow&quot; type in future.', and with two buttons, 'Ok' and 'Cancel'." src=images/sample-content-handler.png></p>

  <p>In this dialog, the third option is the one that was primed by
  the site registering itself earlier.</p>

  <p>If the user does select that option, then the browser, in
  accordance with the requirements described in the previous two
  sections, will redirect the user to
  "http://kittens.example.org/?show=data%3Aapplication/x-meowmeow;base64,S2l0dGVucyBhcmUgdGhlIGN1dGVzdCE%253D".</p>

  <p>The <code title=dom-navigator-registerProtocolHandler><a href=#dom-navigator-registerprotocolhandler>registerProtocolHandler()</a></code>
  method would work equivalently, but for schemes instead of unknown
  content types.</p>

  </div>



  <h4 id=manually-releasing-the-storage-mutex><span class=secno>7.4.3 </span>Manually releasing the storage mutex</h4>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>yieldForStorageUpdates</a></code>()</dt>

   <dd>

    <p>If a script uses the <code title=dom-document-cookie><a href=#dom-document-cookie>document.cookie</a></code> API, or the
    <code title=dom-localStorage>localStorage</code> API, the
    browser will block other scripts from accessing cookies or storage
    until the first script finishes.
    
    <a href=#refsWEBSTORAGE>[WEBSTORAGE]</a>
    
    </p>

    <p>Calling the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
    method tells the user agent to unblock any other scripts that may
    be blocked, even though the script hasn't returned.</p>

    <p>Values of cookies and items in the <code>Storage</code> objects
    of <code title=dom-localStorage>localStorage</code> attributes
    can change after calling this method, whence its name.
    
    <a href=#refsWEBSTORAGE>[WEBSTORAGE]</a>
    
    </p>

   </dd>

  </dl><div class=impl>

   <p>The <dfn id=dom-navigator-yieldforstorageupdates title=dom-navigator-yieldForStorageUpdates><code>yieldForStorageUpdates()</code></dfn>
   method, when invoked, must, if the <a href=#storage-mutex>storage mutex</a> is
   owned by the <a href=#event-loop>event loop</a> of the <a href=#concept-task title=concept-task>task</a> that resulted in the method being
   called, release the <a href=#storage-mutex>storage mutex</a> so that it is once
   again free. Otherwise, it must do nothing.</p>

  </div>




  <h2 id=editing><span class=secno>8 </span><dfn>User interaction</dfn></h2>


  <h3 id=the-hidden-attribute><span class=secno>8.1 </span>The <dfn title=attr-hidden><code>hidden</code></dfn> attribute</h3>

  <p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> content attribute set. The <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute is a <a href=#boolean-attribute>boolean
  attribute</a>. When specified on an element, it indicates that
  the element is not yet, or is no longer, relevant. <span class=impl>User agents should not render elements that have the
  <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute
  specified.</span></p>

  <div class=example>

   <p>In the following skeletal example, the attribute is used to hide
   the Web game's main screen until the user logs in:</p>

   <pre>  &lt;h1&gt;The Example Game&lt;/h1&gt;
  &lt;section id="login"&gt;
   &lt;h2&gt;Login&lt;/h2&gt;
   &lt;form&gt;
    ...
    &lt;!-- calls login() once the user's credentials have been checked --&gt;
   &lt;/form&gt;
   &lt;script&gt;
    function login() {
      // switch screens
      document.getElementById('login').hidden = true;
      document.getElementById('game').hidden = false;
    }
   &lt;/script&gt;
  &lt;/section&gt;
  &lt;section id="game" hidden&gt;
   ...
  &lt;/section&gt;</pre>

  </div>

  <p>The <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute must not be
  used to hide content that could legitimately be shown in another
  presentation. For example, it is incorrect to use <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> to hide panels in a tabbed dialog,
  because the tabbed interface is merely a kind of overflow
  presentation &mdash; one could equally well just show all the form
  controls in one big page with a scrollbar. It is similarly incorrect
  to use this attribute to hide content just from one presentation
  &mdash; if something is marked <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>, it is hidden from all
  presentations, including, for instance, screen readers.</p>

  <!-- for example, "<a hidden href=#content>Skip to content</a>" would be inappropriate. -->
  <!-- (but only add that example if you first add some more good valid examples -->

  <p>Elements that are not <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>
  should not link to or refer to elements that are <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>.</p>

  <div class=example>

   <p>For example, it would be incorrect to use the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute to link to a
   section marked with the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>
   attribute. If the content is not applicable or relevant, then there
   is no reason to link to it.</p>

   <p>It would similarly be incorrect to use the ARIA <code title=attr-aria-describedby>aria-describedby</code> attribute to
   refer to descriptions that are themselves <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>. Hiding a section means that it
   is not applicable or relevant to anyone at the current time, so
   clearly it cannot be a valid description of content the user can
   interact with.</p>

  </div>

  <p>Elements in a section hidden by the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute are still active,
  e.g. scripts and form controls in such sections still execute
  and submit respectively. Only their presentation to the user
  changes.</p>

  <div class=impl>

  <p>The <dfn id=dom-hidden title=dom-hidden><code>hidden</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the content attribute of the
  same name.</p>

  </div>



  <h3 id=activation><span class=secno>8.2 </span>Activation</h3>

  <!-- v2 idea: HTMLImageElement.click(x, y); or clickPoint(), if
       click() can't be done in IE; can this be emulated in IE by
       posting a synthetic mouse click event with those X and Y
       coords? (ack Csaba Gabor)
  -->

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-click><a href=#dom-click>click</a></code>()</dt>

   <dd>

    <p>Acts as if the element was clicked.</p>

   </dd>

  </dl><div class=impl>

  <p>Each element has a <var title="">click in progress</var> flag,
  initially set to false.</p>

  <p>The <dfn id=dom-click title=dom-click><code>click()</code></dfn> method must
  run these steps:</p>

  <ol><li><p>If the element's <var title="">click in progress</var> flag
   is set to true, then abort these steps.</li>

   <li><p>Set the <var title="">click in progress</var> flag on the
   element to true.</li>

   <li><p>If the element has a defined <a href=#activation-behavior>activation behavior</a>,
   <a href=#run-synthetic-click-activation-steps>run synthetic click activation steps</a> on the
   element. Otherwise, <a href=#fire-a-click-event>fire a <code>click</code> event</a> at
   the element.</li>

   <li><p>Set the <var title="">click in progress</var> flag on the
   element to false.</li>

  </ol></div>


  <h3 id=scrolling-elements-into-view><span class=secno>8.3 </span>Scrolling elements into view</h3> <!-- maybe this should move to [CSSOM] -->

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-scrollIntoView><a href=#dom-scrollintoview>scrollIntoView</a></code>( [ <var title="">top</var> ] )</dt>

   <dd>

    <p>Scrolls the element into view. If the <var title="">top</var>
    argument is true, then the element will be scrolled to the top of
    the viewport, otherwise it'll be scrolled to the bottom. The
    default is the top.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-scrollintoview title=dom-scrollIntoView><code>scrollIntoView([<var title="">top</var>])</code></dfn> method, when called, must cause
  the element on which the method was called to have the attention of
  the user called to it.</p>

  <p class=note>In a speech browser, this could happen by having the
  current playback position move to the start of the given
  element.</p>

  <p>If the element in question cannot be brought to the user's
  attention, e.g. because it is <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>, or is not <a href=#being-rendered>being
  rendered</a>, then the user agent must do nothing instead.</p>

  <p>In visual user agents, if the argument is present and has the
  value false, the user agent should scroll the element into view such
  that both the bottom and the top of the element are in the viewport,
  with the bottom of the element aligned with the bottom of the
  viewport. If it isn't possible to show the entire element in that
  way, or if the argument is omitted or is true, then the user agent
  should instead align the top of the element with the top of the
  viewport. If the entire scrollable part of the content is visible
  all at once (e.g. if a page is shorter than the viewport), then the
  user agent should not scroll anything. Visual user agents should
  further scroll horizontally as necessary to bring the element to the
  attention of the user.</p>

  <p>Non-visual user agents may ignore the argument, or may treat it
  in some media-specific manner most useful to the user.</p>

  </div>


  <h3 id=focus><span class=secno>8.4 </span>Focus</h3>

  <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%20%0A...%3Cform%3E%3Cinput%20name%3Da%20onfocus%3D%22value%2B%3D1%3Bd.name%3D%27a%27%3Bname%3D%27d%27%3Bb.focus()%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22value%2B%3D1%3Bc.focus()%22%3E%0A%3Cinput%20name%3Dc%20onfocus%3D%22value%2B%3D1%3Bd.focus()%22%3E%0A%3Cinput%20name%3Dd%20onfocus%3D%22value%2B%3D1%3Ba.focus()%22%3E -->

  <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A...%3Cform%3E%0A%3Ctextarea%20name%3Dt%20cols%3D100%20rows%3D3%3E%3C%2Ftextarea%3E%3Cp%3E%0A%3Cinput%20name%3Da%20onfocus%3D%22t.value%2B%3D%27af1%20%27%3Bb.focus()%3Balert(document.activeElement.name)%3Bt.value%2B%3D%27af2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27ab%20%27%3B%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22t.value%2B%3D%27bf1%20%27%3Bc.focus()%3Bt.value%2B%3D%27bf2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27bb%20%27%3B%22%3E%0A%3Cinput%20name%3Dc%20onfocus%3D%22t.value%2B%3D%27cf1%20%27%3Bc.focus()%3Bt.value%2B%3D%27cf2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27cb%20%27%3B%22%3E%0A -->

  <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cbody%20onload%3D%22document.forms%5B0%5D.a.focus()%22%3E%0A...%3Cform%3E%0A%3Ctextarea%20name%3Dt%20cols%3D100%20rows%3D3%3E%3C%2Ftextarea%3E%3Cp%3E%0A%3Cinput%20name%3Da%20onblur%3D%22t.value%2B%3D'ab%20'%3B%20b.focus()%3B%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22t.value%2B%3D'bf1%20'%3Ba.focus()%3Bt.value%2B%3D'bf2%20'%3B%22%20onblur%3D%22t.value%2B%3D'bb%20'%3B%22%3E -->

  <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cbody%3E...%3Cform%3E%0A%3Ctextarea%20name%3Dt%20cols%3D100%20rows%3D3%3E%3C%2Ftextarea%3E%3Cp%3E%0A%3Cinput%20name%3Da%20onfocus%3D%22t.value%2B%3D%27af%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27ab1%20%27%3Bb.focus()%3Bt.value%2B%3D%27ab2%20%27%3B%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22t.value%2B%3D%27bf1%20%27%3Ba.focus()%3Bt.value%2B%3D%27bf2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27bb%20%27%3B%22%3E -->

  <!-- v2: more things to define, if no other specs define them:
   - define onfocus/onblur behaviour for Window
   - Other things to look at are IE's focus APIs (HTMLElement.setActive(),
     onBeforeActivate, onActivate, onBeforeDeactivate, onDeactivate):
       https://bugzilla.mozilla.org/show_bug.cgi?id=296471
       https://bugzilla.mozilla.org/show_bug.cgi?id=296469
       http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setactive.asp
       http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeactivate.asp
  -->

  <div class=impl>

  <p>When an element is <i>focused</i>, key events received by the
  document must be targeted at that element. There may be no element
  focused; when no element is focused, key events received by the
  document must be targeted at <a href=#the-body-element>the body element</a>.</p>

  <p>User agents may track focus for each <a href=#browsing-context>browsing
  context</a> or <code><a href=#document>Document</a></code> individually, or may support
  only one focused element per <a href=#top-level-browsing-context>top-level browsing context</a>
  &mdash; user agents should follow platform conventions in this
  regard.</p>

  <p>Which elements within a <a href=#top-level-browsing-context>top-level browsing context</a>
  currently have focus must be independent of whether or not the
  <a href=#top-level-browsing-context>top-level browsing context</a> itself has the <i>system
  focus</i>.</p>

  <p class=note>When an element is focused, the element matches the
  CSS <code>:focus</code> pseudo-class.</p>

  </div>


  <h4 id=sequential-focus-navigation><span class=secno>8.4.1 </span>Sequential focus navigation</h4>

  <p>The <dfn id=attr-tabindex title=attr-tabindex><code>tabindex</code></dfn>
  content attribute specifies whether the element is focusable,
  whether it can be reached using sequential focus navigation, and the
  relative order of the element for the purposes of sequential focus
  navigation. The name "tab index" comes from the common use of the
  "tab" key to navigate through the focusable elements. The term
  "tabbing" refers to moving forward through the focusable elements
  that can be reached using sequential focus navigation.</p>

  <p>The <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute, if
  specified, must have a value that is a <a href=#valid-integer>valid
  integer</a>.</p>

  <div class=impl>

  <p>If the attribute is specified, it must be parsed using the
  <a href=#rules-for-parsing-integers>rules for parsing integers</a>. The attribute's values have
  the following meanings:</p>

  <dl><dt>If the attribute is omitted or parsing the value returns an
   error</dt>

   <dd>

    <p>The user agent should follow platform conventions to determine if
    the element is to be focusable and, if so, whether the element can
    be reached using sequential focus navigation, and if so, what its
    relative order should be.</p>

   </dd>

   <dt id=negative-tabindex>If the value is a negative integer</dt>

   <dd>

    <p>The user agent must allow the element to be focused, but should
    not allow the element to be reached using sequential focus
    navigation.</p>

   </dd>

   <dt>If the value is a zero</dt>

   <dd>

    <p>The user agent must allow the element to be focused, should
    allow the element to be reached using sequential focus navigation,
    and should follow platform conventions to determine the element's
    relative order.</p>

   </dd>

   <dt>If the value is greater than zero</dt>

   <dd>

    <p>The user agent must allow the element to be focused, should
    allow the element to be reached using sequential focus navigation,
    and should place the element in the sequential focus navigation
    order so that it is:</p>

    <ul><li>before any focusable element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has been
     omitted or whose value, when parsed, returns an error,</li>

     <li>before any focusable element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value equal
     to or less than zero,</li>

     <li>after any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
     greater than zero but less than the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the
     element,</li>

     <li>after any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value equal
     to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
     attribute on the element but that is earlier in the document in
     <a href=#tree-order>tree order</a> than the element,</li>

     <li>before any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value equal
     to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
     attribute on the element but that is later in the document in
     <a href=#tree-order>tree order</a> than the element, and</li>

     <li>before any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
     greater than the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the
     element.</li>

    </ul></dd>

  </dl><p>An element is <dfn id=specially-focusable>specially focusable</dfn> if the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute's definition above
  defines the element to be focusable.</p>

  <p>An element that is <a href=#specially-focusable>specially focusable</a> but does not
  otherwise have an <a href=#activation-behavior>activation behavior</a> defined has an
  <a href=#activation-behavior>activation behavior</a> that does nothing.</p>

  <p class=note>This means that an element that is only focusable
  because of its <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute
  will fire a <code title=event-click><a href=#event-click>click</a></code> event in response
  to a non-mouse activation (e.g. hitting the "enter" key while the
  element is focused).</p>

  <p>The <dfn id=dom-tabindex title=dom-tabIndex><code>tabIndex</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> content attribute. If the
  attribute is not present, or parsing its value returns an error,
  then the IDL attribute must return 0 for elements that are focusable
  and &minus;1 for elements that are not focusable.</p>

  </div>



  <div class=impl>

  <h4 id=focus-management><span class=secno>8.4.2 </span>Focus management</h4>

  <p>An element is <dfn id=focusable>focusable</dfn> if the user agent's default
  behavior allows it to be focusable or if the element is
  <a href=#specially-focusable>specially focusable</a>, but only if the element is either
  <a href=#being-rendered>being rendered</a> or <!-- CANVAS-FOCUS-FALLBACK --> is a
  descendant of a <code><a href=#the-canvas-element>canvas</a></code> element that
  <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a>.</p>

  <p>User agents should make the following elements
  <a href=#focusable>focusable</a>, unless platform conventions dictate
  otherwise:</p>

  <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>

   <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>

   <li><code><a href=#the-button-element>button</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

   <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
   <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state and that
   are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

   <li><code><a href=#the-select-element>select</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

   <li><code><a href=#the-textarea-element>textarea</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>

   <li><code><a href=#the-command>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>

   <li>Elements with a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
   attribute set, if that would enable the user agent to allow the
   user to begin a drag operations for those elements without the use
   of a pointing device</li>

  </ul><p>In addition, each shape that is generated for an
  <code><a href=#the-area-element>area</a></code> element should be <a href=#focusable>focusable</a>, unless
  platform conventions dictate otherwise. (A single <code><a href=#the-area-element>area</a></code>
  element can correspond to multiple shapes, since image maps can be
  reused with multiple images on a page.)</p>

  <hr><p>The <dfn id=focusing-steps>focusing steps</dfn> are as follows:</p>

  <ol><li><p>If focusing the element will remove the focus from another
   element, then run the <a href=#unfocusing-steps>unfocusing steps</a> for that
   element.</li>

   <li>

    <p>Make the element the currently focused element in its
    <a href=#top-level-browsing-context>top-level browsing context</a>.</p>

    <p>Some elements, most notably <code><a href=#the-area-element>area</a></code>, can correspond
    to more than one distinct focusable area. If a particular area was
    indicated when the element was focused, then that is the area that
    must get focus; otherwise, e.g. when using the <code title=dom-focus><a href=#dom-focus>focus()</a></code> method, the first such region in
    tree order is the one that must be focused.</p>

   </li>

   <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-focus>focus</code> at the element.</li>

  </ol><p>User agents must synchronously run the <a href=#focusing-steps>focusing
  steps</a> for an element whenever the user moves the focus to a
  <a href=#focusable>focusable</a> element.</p>

  <p>The <dfn id=unfocusing-steps>unfocusing steps</dfn> are as follows:</p>

  <ol><li><p>If the element is an <code><a href=#the-input-element>input</a></code> element, and the
   <code title=event-input-change><a href=#event-input-change>change</a></code> event applies to the
   element, and the element does not have a defined <a href=#activation-behavior>activation
   behavior</a>, and the user has changed the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or its list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>
   while the control was focused without committing that change, then
   <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at the element, then
   <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code>
   events</a> at the element's <a href=#form-owner>form owner</a>.</p>

   <li><p>Unfocus the element.</li>

   <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-blur>blur</code> at the element.</li>

  </ol><p>When an element that is focused stops being a
  <a href=#focusable>focusable</a> element, or stops being focused without
  another element being explicitly focused in its stead, the user
  agent should synchronously run the <a href=#focusing-steps>focusing steps</a> for
  <a href=#the-body-element>the body element</a>, if there is one; if there is not,
  then the user agent should synchronously run the <a href=#unfocusing-steps>unfocusing
  steps</a> for the affected element only.</p>

  <p class=example>For example, this might happen because the
  element is removed from its <code><a href=#document>Document</a></code>, or has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute added. It would also
  happen to an <code><a href=#the-input-element>input</a></code> element when the element gets <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</p>

  </div>


  <h4 id=document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</h4>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code></dt>

   <dd>

    <p>Returns the currently focused element.</p>

   </dd>

   <dt><var title="">document</var> . <code title=dom-document-hasFocus><a href=#dom-document-hasfocus>hasFocus</a></code>()</dt>

   <dd>

    <p>Returns true if the document has focus; otherwise, returns false.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-window-focus><a href=#dom-window-focus>focus</a></code>()</dt>

   <dd>

    <p>Focuses the window. Use of this method is discouraged. Allow the user to control window focus instead.</p>

   </dd>

   <dt><var title="">window</var> . <code title=dom-window-blur><a href=#dom-window-blur>blur</a></code>()</dt>

   <dd>

    <p>Unfocuses the window. Use of this method is discouraged. Allow the user to control window focus instead.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-document-activeelement title=dom-document-activeElement><code>activeElement</code></dfn>
  attribute on <code><a href=#htmldocument>HTMLDocument</a></code> objects must return the
  element in the document that is focused. If no element in the
  <code><a href=#document>Document</a></code> is focused, this must return <a href=#the-body-element>the body
  element</a>.</p>

  <p>The <dfn id=dom-document-hasfocus title=dom-document-hasFocus><code>hasFocus()</code></dfn> method
  on <code><a href=#htmldocument>HTMLDocument</a></code> objects must return true if the
  document's <a href=#browsing-context>browsing context</a> is focused, and all its
  <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
  contexts</a> are also focused, and the <a href=#top-level-browsing-context>top-level browsing
  context</a> has the <i>system focus</i>.</p>

  <p>The <dfn id=dom-window-focus title=dom-window-focus><code>focus()</code></dfn>
  method on the <code><a href=#window>Window</a></code> object, when invoked, provides a
  hint to the user agent that the script believes the user might be
  interested in the contents of the <a href=#browsing-context>browsing context</a> of
  the <code><a href=#window>Window</a></code> object on which the method was invoked.</p>

  <p>User agents are encouraged to have this <code title=dom-window-focus><a href=#dom-window-focus>focus()</a></code> method trigger some kind of
  notification.</p>

  <p>The <dfn id=dom-window-blur title=dom-window-blur><code>blur()</code></dfn> method
  on the <code><a href=#window>Window</a></code> object, when invoked, provides a hint to
  the user agent that the script believes the user probably is not
  currently interested in the contents of the <a href=#browsing-context>browsing
  context</a> of the <code><a href=#window>Window</a></code> object on which the method
  was invoked, but that the contents might become interesting again in
  the future.</p>

  <p>User agents are encouraged to ignore calls to this <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code> method entirely.</p>

  <p class=note>Historically the <code title=dom-window-blur><a href=#dom-window-blur>focus()</a></code> and <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code> methods actually affected the
  system focus, but hostile sites widely abuse this behavior to the
  user's detriment.</p>

  </div>


  <h4 id=element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</h4>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-focus><a href=#dom-focus>focus</a></code>()</dt>

   <dd>

    <p>Focuses the element.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-blur><a href=#dom-blur>blur</a></code>()</dt>

   <dd>

    <p>Unfocuses the element. Use of this method is discouraged. Focus
    another element instead.</p>

    <p>Do not use this method to hide the focus ring if you find the
    focus ring unsightly. Instead, use a CSS rule to override the
    'outline' property.</p>

    <div class=example>

     <p>For example, to hide the outline from links, you could use:</p>

     <pre>:link:focus, :visited:focus { outline: none; }</pre>

    </div>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-focus title=dom-focus><code>focus()</code></dfn> method,
  when invoked, must run the following algorithm:</p>

  <ol><li><p>If the element is marked as <i><a href=#locked-for-focus>locked for focus</a></i>, then abort
   these steps.</li>

   <li><p>If the element is not <a href=#focusable>focusable</a>, then abort these
   steps.</li>

   <li><p>Mark the element as <dfn id=locked-for-focus>locked for focus</dfn>.</li>

   <li><p>If the element is not already focused, run the <a href=#focusing-steps>focusing
   steps</a> for the element.</li>

   <li><p>Unmark the element as <i><a href=#locked-for-focus>locked for focus</a></i>.</li>

  </ol><p>The <dfn id=dom-blur title=dom-blur><code>blur()</code></dfn> method, when
  invoked, should run the <a href=#focusing-steps>focusing steps</a> for <a href=#the-body-element>the
  body element</a>, if there is one; if there is not, then it
  should run the <a href=#unfocusing-steps>unfocusing steps</a> for the element on
  which the method was called instead. User agents may selectively or
  uniformly ignore calls to this method for usability reasons.</p>

  <p class=example>For example, if the <code title=dom-blur><a href=#dom-blur>blur()</a></code> method is unwisely being used to
  remove the focus ring for aesthetics reasons, the page would become
  unusable by keyboard users. Ignoring calls to this method would thus
  allow keyboard users to interact with the page.</p>

  </div>




  <h3 id=the-accesskey-attribute><span class=secno>8.5 </span>The <dfn title=attr-accesskey><code>accesskey</code></dfn> attribute</h3>

  <p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute set. The
  <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute's value is
  used by the user agent as a guide for creating a keyboard shortcut
  that activates or focuses the element.</p>

  <p>If specified, the value must be an <a href=#ordered-set-of-unique-space-separated-tokens>ordered set of unique
  space-separated tokens</a>, each of which must be exactly one
  Unicode code point in length.</p>

  <div class=impl>

  <p>An element's <dfn id=assigned-access-key>assigned access key</dfn> is a key combination
  derived from the element's <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute as
  follows:</p>

  <ol><li><p>If the element has no <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute, then skip to the
   <i>fallback</i> step below.</li>

   <li><p>Otherwise, the user agent must <a href=#split-a-string-on-spaces title="split a string
   on spaces">split the attribute's value on spaces</a>, and let
   <var title="">keys</var> be the resulting tokens.</li>

   <li>

    <p>For each value in <var title="">keys</var> in turn, in the
    order the tokens appeared in the attribute's value, run the
    following substeps:</p>

    <ol><li><p>If the value is not a string exactly one Unicode code
     point in length, then skip the remainder of these steps for this
     value.</li>

     <li><p>If the value does not correspond to a key on the system's
     keyboard, then skip the remainder of these steps for this
     value.</li>

     <li><p>If the user agent can find a combination of modifier keys
     that, with the key that corresponds to the value given in the
     attribute, can be used as a shortcut key, then the user agent may
     assign that combination of keys as the element's <a href=#assigned-access-key>assigned
     access key</a> and abort these steps.</li>

    </ol></li>

   <li><p><i>Fallback</i>: Optionally, the user agent may assign a key
   combination of its choosing as the element's <a href=#assigned-access-key>assigned access
   key</a> and then abort these steps.</li>

   <li><p>If this step is reached, the element has no <a href=#assigned-access-key>assigned
   access key</a>.</li>

  </ol><p>Once a user agent has selected and assigned an access key for an
  element, the user agent should not change the element's
  <a href=#assigned-access-key>assigned access key</a> unless the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute is changed
  or the element is moved to another <code><a href=#document>Document</a></code>.</p>

  <p>When the user presses the key combination corresponding to the
  <a href=#assigned-access-key>assigned access key</a> for an element, if the element
  <a href=#concept-command title=concept-command>defines a command</a>, and the
  command's <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden
  State</a> facet is false (visible), and the command's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet is
  also false (enabled), then the user agent must trigger the <a href=#command-facet-action title=command-facet-Action>Action</a> of the command.</p>

  <p>User agents may expose elements that have an <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute in other ways as
  well, e.g. in a menu displayed in response to a specific key
  combination.</p>

  </div>

  <div class=impl>

  <p>The <dfn id=dom-accesskey title=dom-accessKey><code>accessKey</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute.</p>

  <p>The <dfn id=dom-accesskeylabel title=dom-accessKeyLabel><code>accessKeyLabel</code></dfn> IDL
  attribute must return a string that represents the element's
  <a href=#assigned-access-key>assigned access key</a>, if any. If the element does not
  have one, then the IDL attribute must return the empty string.</p>

  </div>

  <div class=example>

   <p>In the following example, a variety of links are given with
   access keys so that keyboard users familiar with the site can
   more quickly navigate to the relevant pages:</p>

   <pre>&lt;nav&gt;
 &lt;p&gt;
  &lt;a title="Consortium Activities" accesskey="A" href="/Consortium/activities"&gt;Activities&lt;/a&gt; |
  &lt;a title="Technical Reports and Recommendations" accesskey="T" href="/TR/"&gt;Technical Reports&lt;/a&gt; |
  &lt;a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex"&gt;Site Index&lt;/a&gt; |
  &lt;a title="About This Site" accesskey="B" href="/Consortium/"&gt;About Consortium&lt;/a&gt; |
  &lt;a title="Contact Consortium" accesskey="C" href="/Consortium/contact"&gt;Contact&lt;/a&gt;
 &lt;/p&gt;
&lt;/nav&gt;</pre>

  </div>

  <div class=example>

   <p>In the following example, the search field is given two possible
   access keys, "s" and "0" (in that order). A user agent on a device
   with a full keyboard might pick
   <kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd></kbd> as the
   shortcut key, while a user agent on a small device with just a
   numeric keypad might pick just the plain unadorned key
   <kbd><kbd>0</kbd></kbd>:</p>

   <pre>&lt;form action="/search"&gt;
 &lt;label&gt;Search: &lt;input type="search" name="q" accesskey="s 0"&gt;&lt;/label&gt;
 &lt;input type="submit"&gt;
&lt;/form&gt;</pre>

  </div>

  <div class=example>

   <p>In the following example, a button has possible access keys
   described. A script then tries to update the button's label to
   advertise the key combination the user agent selected.</p>

   <pre>&lt;input type=submit accesskey="N @ 1" value="Compose"&gt;
...
&lt;script&gt;
 function labelButton(button) {
   if (button.accessKeyLabel)
     button.value += ' (' + button.accessKeyLabel + ')';
 }
 var inputs = document.getElementsByTagName('input');
 for (var i = 0; i &lt; inputs.length; i += 1) {
   if (inputs[i].type == "submit")
     labelButton(inputs[i]);
 }
&lt;/script&gt;</pre>

   <p>On one user agent, the button's label might become
   "<samp>Compose (&#8984;N)</samp>". On another, it might become
   "<samp>Compose (Alt+&#8679;+1)</samp>". If the user agent doesn't
   assign a key, it will be just "<samp>Compose</samp>". The exact
   string depends on what the <a href=#assigned-access-key>assigned access key</a> is, and
   on how the user agent represents that key combination.</p>

  </div>



  <h3 id=selection><span class=secno>8.6 </span>The text selection APIs</h3>

  <p>Every <a href=#browsing-context>browsing context</a> has <dfn id=the-selection title="the
  selection">a selection</dfn>. The selection can be empty, and the
  selection can have more than one range (a disjointed selection). The
  user agent should allow the user to change the selection. User
  agents are not required to let the user select more than one range,
  and may collapse multiple ranges in the selection to a single range
  when the user interacts with the selection. (But, of course, the
  user agent may let the user create selections with multiple
  ranges.)</p>

  <p>This one selection must be shared by all the content of the
  browsing context (though not by nested <a href=#browsing-context title="browsing
  context">browsing contexts</a>), including any editing hosts in
  the document. (Editing hosts that are not inside a document cannot
  have a selection.)</p>

  <div class=impl>

  <p>If the selection is empty (collapsed, so that it has only one
  segment and that segment's start and end points are the same) then
  the selection's position should equal the caret position. When the
  selection is not empty, this specification does not define the caret
  position; user agents should follow platform conventions in deciding
  whether the caret is at the start of the selection, the end of the
  selection, or somewhere else.</p>

  <p>On some platforms (such as those using Wordstar editing
  conventions), the caret position is totally independent of the start
  and end of the selection, even when the selection is empty. On such
  platforms, user agents may ignore the requirement that the cursor
  position be linked to the position of the selection altogether.</p>

  </div>

  <p>Mostly for historical reasons, in addition to the <a href=#browsing-context>browsing
  context</a>'s <a href=#the-selection title="the selection">selection</a>, each
  <code><a href=#the-textarea-element>textarea</a></code> and <code><a href=#the-input-element>input</a></code> element has an
  independent selection. These are the <dfn id=text-field-selection title="text field
  selection">text field selections</dfn>.</p>

  <div class=impl>

  <p>User agents may selectively ignore attempts to use the API to
  adjust the selection made after the user has modified the
  selection. For example, if the user has just selected part of a
  word, the user agent could ignore attempts to use the API call to
  immediately unselect the selection altogether, but could allow
  attempts to change the selection to select the entire word.</p>

  <p>User agents may also allow the user to create selections that are
  not exposed to the API.</p>

  </div>

  <!-- v2DATAGRID v2DGS:
  <p>The <code>datagrid</code> and <code>select</code> elements also
  have selections, indicating which items have been picked by the
  user. These are not discussed in this section.</p>
  -->
  <p>The <code><a href=#the-select-element>select</a></code> element also has a selection, indicating
  which items have been picked by the user. This is not discussed in
  this section.</p>

  <p class=note>This specification does not specify how selections
  are presented to the user. <!-- The Selectors specification, in
  conjunction with CSS, can be used to style text selections using the
  <code title="selector-selection">::selection</code>
  pseudo-element. <a href="#refsSELECTORS">[SELECTORS]</a> <a
  href="#refsCSS">[CSS]</a> --></p>



  <h4 id=documentSelection><span class=secno>8.6.1 </span>APIs for the browsing context selection</h4>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-getSelection><a href=#dom-getselection>getSelection</a></code>()</dt>
   <dt><var title="">document</var> . <code title=dom-document-getSelection><a href=#dom-document-getselection>getSelection</a></code>()</dt>

   <dd>

    <p>Returns the <code><a href=#selection-0>Selection</a></code> object for the window, which
    stringifies to the text of the current selection.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-getselection title=dom-getSelection><code>getSelection()</code></dfn> method on
  the <code><a href=#window>Window</a></code> interface must return the
  <code><a href=#selection-0>Selection</a></code> object representing <a href=#the-selection>the
  selection</a> of that <code><a href=#window>Window</a></code> object's
  <a href=#browsing-context>browsing context</a>.

  <p>For historical reasons, the <dfn id=dom-document-getselection title=dom-document-getSelection><code>getSelection()</code></dfn>
  method on the <code><a href=#htmldocument>HTMLDocument</a></code> interface must return the
  same <code><a href=#selection-0>Selection</a></code> object.</p>

  </div>

  <pre class=idl>interface <dfn id=selection-0>Selection</dfn> {
  readonly attribute Node <a href=#dom-selection-anchornode title=dom-selection-anchorNode>anchorNode</a>;
  readonly attribute long <a href=#dom-selection-anchoroffset title=dom-selection-anchorOffset>anchorOffset</a>;
  readonly attribute Node <a href=#dom-selection-focusnode title=dom-selection-focusNode>focusNode</a>;
  readonly attribute long <a href=#dom-selection-focusoffset title=dom-selection-focusOffset>focusOffset</a>;
  readonly attribute boolean <a href=#dom-selection-iscollapsed title=dom-selection-isCollapsed>isCollapsed</a>;
  void <a href=#dom-selection-collapse title=dom-selection-collapse>collapse</a>(in Node parentNode, in long offset);
  void <a href=#dom-selection-collapsetostart title=dom-selection-collapseToStart>collapseToStart</a>();
  void <a href=#dom-selection-collapsetoend title=dom-selection-collapseToEnd>collapseToEnd</a>();
  void <a href=#dom-selection-selectallchildren title=dom-selection-selectAllChildren>selectAllChildren</a>(in Node parentNode);
  void <a href=#dom-selection-deletefromdocument title=dom-selection-deleteFromDocument>deleteFromDocument</a>();
  readonly attribute long <a href=#dom-selection-rangecount title=dom-selection-rangeCount>rangeCount</a>;
  Range <a href=#dom-selection-getrangeat title=dom-selection-getRangeAt>getRangeAt</a>(in long index);
  void <a href=#dom-selection-addrange title=dom-selection-addRange>addRange</a>(in Range range);
  void <a href=#dom-selection-removerange title=dom-selection-removeRange>removeRange</a>(in Range range);
  void <a href=#dom-selection-removeallranges title=dom-selection-removeAllRanges>removeAllRanges</a>();
  <a href=#dom-selection-tostring title=dom-selection-toString>stringifier</a> DOMString ();
};</pre>
<!--
  See also:
    http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl
  This spec doesn't have everything from there yet, in particular
  selectionLanguageChange() and containsNode() are missing. They are missing
  because I couldn't work out how to define them in terms of Ranges.

  I also haven't included extend():

    void <span title="dom-selection-extend">extend</span>(in Node parentNode, in long offset);
    // raise if no range
    // raise WRONG_DOCUMENT_ERR if parentNode not in document
    // do something

  ...mostly because I can't work out how to describe what it does quickly.
-->

  <p>The <code><a href=#selection-0>Selection</a></code> interface represents a list of
  <code><a href=#range>Range</a></code> objects. The first item in the list has index 0,
  and the last item has index <var title="">count</var>-1, where <var title="">count</var> is the number of ranges in the list. <a href=#refsDOMRANGE>[DOMRANGE]</a></p>

  <p>All of the members of the <code><a href=#selection-0>Selection</a></code> interface are
  defined in terms of operations on the <code><a href=#range>Range</a></code> objects
  represented by this object. These operations can raise exceptions,
  as defined for the <code><a href=#range>Range</a></code> interface; this can therefore
  result in the members of the <code><a href=#selection-0>Selection</a></code> interface
  raising exceptions as well, in addition to any explicitly called out
  below.</p>

  <dl class=domintro><dt><var title="">selection</var> . <code title=dom-selection-anchorNode><a href=#dom-selection-anchornode>anchorNode</a></code></dt>

   <dd>

    <p>Returns the element that contains the start of the selection.</p>

    <p>Returns null if there's no selection.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-anchorOffset><a href=#dom-selection-anchoroffset>anchorOffset</a></code></dt>

   <dd>

    <p>Returns the offset of the start of the selection relative to the element that contains the start of the selection.</p>

    <p>Returns 0 if there's no selection.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-focusNode><a href=#dom-selection-focusnode>focusNode</a></code></dt>

   <dd>

    <p>Returns the element that contains the end of the selection.</p>

    <p>Returns null if there's no selection.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-focusOffset><a href=#dom-selection-focusoffset>focusOffset</a></code></dt>

   <dd>

    <p>Returns the offset of the end of the selection relative to the element that contains the end of the selection.</p>

    <p>Returns 0 if there's no selection.</p>

   </dd>

   <dt><var title="">collapsed</var> = <var title="">selection</var> . <code title=dom-selection-isCollapsed><a href=#dom-selection-iscollapsed>isCollapsed</a></code>()</dt>

   <dd>

    <p>Returns true if there's no selection or if the selection is empty. Otherwise, returns false.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-collapse><a href=#dom-selection-collapse>collapse</a></code>(<var title="">parentNode</var>, <var title="">offset</var>)</dt>

   <dd>

    <p>Replaces the selection with an empty one at the given position.</p>

    <p>Throws a <code><a href=#wrong_document_err>WRONG_DOCUMENT_ERR</a></code> exception if the given node is in a different document.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-collapseToStart><a href=#dom-selection-collapsetostart>collapseToStart</a></code>()</dt>

   <dd>

    <p>Replaces the selection with an empty one at the position of the start of the current selection.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if there is no selection.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-collapseToEnd><a href=#dom-selection-collapsetoend>collapseToEnd</a></code>()</dt>

   <dd>

    <p>Replaces the selection with an empty one at the position of the end of the current selection.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if there is no selection.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-selectAllChildren><a href=#dom-selection-selectallchildren>selectAllChildren</a></code>(<var title="">parentNode</var>)</dt>

   <dd>

    <p>Replaces the selection with one that contains all the contents of the given element.</p>

    <p>Throws a <code><a href=#wrong_document_err>WRONG_DOCUMENT_ERR</a></code> exception if the given node is in a different document.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-deleteFromDocument><a href=#dom-selection-deletefromdocument>deleteFromDocument</a></code>()</dt>

   <dd>

    <p>Deletes the selection.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-rangeCount><a href=#dom-selection-rangecount>rangeCount</a></code></dt>

   <dd>

    <p>Returns the number of ranges in the selection.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-getRangeAt><a href=#dom-selection-getrangeat>getRangeAt</a></code>(<var title="">index</var>)</dt>

   <dd>

    <p>Returns the given range.</p>

    <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the value is out of range.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-addRange><a href=#dom-selection-addrange>addRange</a></code>(<var title="">range</var>)</dt>

   <dd>

    <p>Adds the given range to the selection.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-removeRange><a href=#dom-selection-removerange>removeRange</a></code>(<var title="">range</var>)</dt>

   <dd>

    <p>Removes the given range from the selection, if the range was one of the ones in the selection.</p>

   </dd>

   <dt><var title="">selection</var> . <code title=dom-selection-removeAllRanges><a href=#dom-selection-removeallranges>removeAllRanges</a></code>()</dt>

   <dd>

    <p>Removes all the ranges in the selection.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-selection-anchornode title=dom-selection-anchorNode><code>anchorNode</code></dfn>
  attribute must return the value returned by the <code title=dom-Range-startContainer><a href=#dom-range-startcontainer>startContainer</a></code> attribute of the last
  <code><a href=#range>Range</a></code> object in the list, or null if the list is
  empty.</p>

  <p>The <dfn id=dom-selection-anchoroffset title=dom-selection-anchorOffset><code>anchorOffset</code></dfn>
  attribute must return the value returned by the <code title=dom-Range-startOffset><a href=#dom-range-startoffset>startOffset</a></code> attribute of the last <code><a href=#range>Range</a></code>
  object in the list, or 0 if the list is empty.</p>

  <p>The <dfn id=dom-selection-focusnode title=dom-selection-focusNode><code>focusNode</code></dfn>
  attribute must return the value returned by the <code title=dom-Range-endContainer><a href=#dom-range-endcontainer>endContainer</a></code> attribute of the last
  <code><a href=#range>Range</a></code> object in the list, or null if the list is
  empty.</p>

  <p>The <dfn id=dom-selection-focusoffset title=dom-selection-focusOffset><code>focusOffset</code></dfn>
  attribute must return the value returned by the <code title=dom-Range-endOffset><a href=#dom-range-endoffset>endOffset</a></code> attribute of the last <code><a href=#range>Range</a></code>
  object in the list, or 0 if the list is empty.</p>

  <p>The <dfn id=dom-selection-iscollapsed title=dom-selection-isCollapsed><code>isCollapsed</code></dfn>
  attribute must return true if there are zero ranges, or if there is
  exactly one range and its <code title=dom-Range-collapsed><a href=#dom-range-collapsed>collapsed</a></code> attribute
  is itself true. Otherwise it must return false.</p>

  <p>The <dfn id=dom-selection-collapse title=dom-selection-collapse><code>collapse(<var title="">parentNode</var>, <var title="">offset</var>)</code></dfn>
  method must raise a <code><a href=#wrong_document_err>WRONG_DOCUMENT_ERR</a></code> DOM exception if
  <var title="">parentNode</var>'s <code><a href=#document>Document</a></code> is not the
  <code><a href=#htmldocument>HTMLDocument</a></code> object with which the
  <code><a href=#selection-0>Selection</a></code> object is associated. Otherwise it is, and
  the method must remove all the ranges in the <code><a href=#selection-0>Selection</a></code>
  list, then create a new <code><a href=#range>Range</a></code> object, add it to the
  list, and invoke its <code title=dom-Range-setStart()>setStart()</code> and <code title=dom-Range-setEnd()>setEnd()</code> methods with the <var title="">parentNode</var> and <var title="">offset</var> values as
  their arguments.</p>

  <p>The <dfn id=dom-selection-collapsetostart title=dom-selection-collapseToStart><code>collapseToStart()</code></dfn>
  method must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> DOM exception if
  there are no ranges in the list. Otherwise, it must invoke the <code title=dom-selection-collapse><a href=#dom-selection-collapse>collapse()</a></code> method with the
  <code title=dom-Range-startContainer><a href=#dom-range-startcontainer>startContainer</a></code> and <code title=dom-Range-startOffset><a href=#dom-range-startoffset>startOffset</a></code> values of the first <code><a href=#range>Range</a></code>
  object in the list as the arguments.</p>

  <p>The <dfn id=dom-selection-collapsetoend title=dom-selection-collapseToEnd><code>collapseToEnd()</code></dfn>
  method must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> DOM exception if
  there are no ranges in the list. Otherwise, it must invoke the <code title=dom-selection-collapse><a href=#dom-selection-collapse>collapse()</a></code> method with the
  <code title=dom-Range-endContainer><a href=#dom-range-endcontainer>endContainer</a></code> and <code title=dom-Range-endOffset><a href=#dom-range-endoffset>endOffset</a></code> values of the last <code><a href=#range>Range</a></code>
  object in the list as the arguments.</p>

  <p>The <dfn id=dom-selection-selectallchildren title=dom-selection-selectAllChildren><code>selectAllChildren(<var title="">parentNode</var>)</code></dfn>
  method must invoke the <code title=dom-selection-collapse><a href=#dom-selection-collapse>collapse()</a></code> method with the
  <var title="">parentNode</var> value as the first argument and 0 as the
  second argument, and must then invoke the <code title=dom-Range-selectNodeContents()>selectNodeContents()</code> method on the first (and only)
  range in the list with the <var title="">parentNode</var> value as the
  argument.</p>

  <p>The <dfn id=dom-selection-deletefromdocument title=dom-selection-deleteFromDocument><code>deleteFromDocument()</code></dfn>
  method must invoke the <code title=dom-Range-deleteContents()>deleteContents()</code> method
  on each range in the list, if any, from first to last.</p>

  <p>The <dfn id=dom-selection-rangecount title=dom-selection-rangeCount><code>rangeCount</code></dfn>
  attribute must return the number of ranges in the list.</p>

  <p>The <dfn id=dom-selection-getrangeat title=dom-selection-getRangeAt><code>getRangeAt(<var title="">index</var>)</code></dfn>
  method must return the <var title="">index</var>th range in the list. If
  <var title="">index</var> is less than zero or greater or equal to the value
  returned by the <code title=dom-selection-rangeCount><a href=#dom-selection-rangecount>rangeCount</a></code> attribute, then
  the method must raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> DOM
  exception.</p>

  <p>The <dfn id=dom-selection-addrange title=dom-selection-addRange><code>addRange(<var title="">range</var>)</code></dfn>
  method must add the given <var title="">range</var> Range object to the list
  of selections, at the end (so the newly added range is the new last
  range). Duplicates are not prevented; a range may be added more than
  once in which case it appears in the list more than once, which (for
  example) will cause <a href=#dom-selection-tostring title=dom-selection-toString>stringification</a> to return the
  range's text twice.</p>

  <p>The <dfn id=dom-selection-removerange title=dom-selection-removeRange><code>removeRange(<var title="">range</var>)</code></dfn>
  method must remove the first occurrence of <var title="">range</var> in the
  list of ranges, if it appears at all.</p>

  <p>The <dfn id=dom-selection-removeallranges title=dom-selection-removeAllRanges><code>removeAllRanges()</code></dfn>
  method must remove all the ranges from the list of ranges, such that
  the <code title=dom-selection-rangeCount><a href=#dom-selection-rangecount>rangeCount</a></code>
  attribute returns 0 after the <code title=dom-selection-removeAllRanges><a href=#dom-selection-removeallranges>removeAllRanges()</a></code>
  method is invoked (and until a new range is added to the list,
  either through this interface or via user interaction).</p>

  <p>Objects implementing this interface must <dfn id=dom-selection-tostring title=dom-selection-toString>stringify</dfn> to a concatenation
  of the results of invoking the <code title="">toString()</code>
  method of the <code><a href=#range>Range</a></code> object on each of the ranges of the
  selection, in the order they appear in the list (first to last).</p>

  </div>

  <div class=example>
   <p>In the following document fragment, the emphasized parts
   indicate the selection.</p>
   <pre>&lt;p&gt;The cute girl likes <em>the </em>&lt;cite&gt;<em>Oxford English</em> Dictionary&lt;/cite&gt;.&lt;/p&gt;</pre>
   <p>If a script invoked <code title="">window.getSelection().toString()</code>, the return value
   would be "<code>the Oxford English</code>".</p>
  </div>

  <!-- v2DATAGRID v2DGS:
  <p class="note">The <code>Selection</code> interface has no relation
  to the <code>DataGridSelection</code> interface.</p>
  -->


  <h4 id=textFieldSelection><span class=secno>8.6.2 </span>APIs for the text field selections</h4>

  <!-- v2 idea: DOM Range APIs to expose the textarea/input edited
  value (ack martijnw) -->

  <p>The <code><a href=#the-input-element>input</a></code> and <code><a href=#the-textarea-element>textarea</a></code> elements define
  the following members in their DOM interfaces for handling their
  text selection:</p>

  <pre class="idl extract">  void <a href=#dom-textarea/input-select title=dom-textarea/input-select>select</a>();
           attribute unsigned long <a href=#dom-textarea/input-selectionstart title=dom-textarea/input-selectionStart>selectionStart</a>;
           attribute unsigned long <a href=#dom-textarea/input-selectionend title=dom-textarea/input-selectionEnd>selectionEnd</a>;
  void <a href=#dom-textarea/input-setselectionrange title=dom-textarea/input-setSelectionRange>setSelectionRange</a>(in unsigned long start, in unsigned long end);</pre>
  <!-- v2: also add textLength? it seems to be widely used -->

  <p>These methods and attributes expose and control the selection of
  <code><a href=#the-input-element>input</a></code> and <code><a href=#the-textarea-element>textarea</a></code> text fields.</p>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select</a></code>()</dt>

   <dd>

    <p>Selects everything in the text field.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-textarea/input-selecionStart>selectionStart</code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the offset to the start of the selection.</p>

    <p>Can be set, to change the start of the selection.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-textarea/input-selecionEnd>selectionEnd</code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the offset to the end of the selection.</p>

    <p>Can be set, to change the end of the selection.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange</a></code>(<var title="">start</var>, <var title="">end</var>)</dt>

   <dd>

    <p>Changes the selection to cover the given substring.</p>

   </dd>

  </dl><div class=impl>

  <p>When these methods and attributes are used with
  <code><a href=#the-input-element>input</a></code> elements while they don't apply, they must raise
  an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. Otherwise, they must
  act as described below.</p>

  <p>The <dfn id=dom-textarea/input-select title=dom-textarea/input-select><code>select()</code></dfn> method
  must cause the contents of the text field to be fully selected.</p>

  <p>The <dfn id=dom-textarea/input-selectionstart title=dom-textarea/input-selectionStart><code>selectionStart</code></dfn>
  attribute must, on getting, return the offset (in logical order) to
  the character that immediately follows the start of the
  selection. If there is no selection, then it must return the offset
  (in logical order) to the character that immediately follows the
  text entry cursor.</p>

  <p>On setting, it must act as if the <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
  method had been called, with the new value as the first argument,
  and the current value of the <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>
  attribute as the second argument, unless the current value of the
  <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> is
  less than the new value, in which case the second argument must also
  be the new value.</p>

  <p>The <dfn id=dom-textarea/input-selectionend title=dom-textarea/input-selectionEnd><code>selectionEnd</code></dfn>
  attribute must, on getting, return the offset (in logical order) to
  the character that immediately follows the end of the selection. If
  there is no selection, then it must return the offset (in logical
  order) to the character that immediately follows the text entry
  cursor.</p>

  <p>On setting, it must act as if the <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
  method had been called, with the current value of the <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>
  attribute as the first argument, and new value as the second
  argument.</p>

  <p>The <dfn id=dom-textarea/input-setselectionrange title=dom-textarea/input-setSelectionRange><code>setSelectionRange(<var title="">start</var>, <var title="">end</var>)</code></dfn> method
  must set the selection of the text field to the sequence of
  characters starting with the character at the <var title="">start</var>th position (in logical order) and ending with
  the character at the <span title="">(<var title="">end</var>-1)</span>th position. Arguments greater than the
  length of the value in the text field must be treated as pointing at
  the end of the text field. If <var title="">end</var> is less than
  or equal to <var title="">start</var> then the start of the
  selection and the end of the selection must both be placed
  immediately before the character with offset <var title="">end</var>. In UAs where there is no concept of an empty
  selection, this must set the cursor to be just before the character
  with offset <var title="">end</var>.</p>

  </div>

  <div class=example>

   <p>To obtain the currently selected text, the following JavaScript
   suffices:</p>

   <pre>var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);</pre>

   <p>...where <var title="">control</var> is the <code><a href=#the-input-element>input</a></code>
   or <code><a href=#the-textarea-element>textarea</a></code> element.</p>

  </div>

  <p>Characters with no visible rendering, such as U+200D ZERO WIDTH
  JOINER, still count as characters. Thus, for instance, the selection
  can include just an invisible character, and the text insertion
  cursor can be placed to one side or another of such a character.</p>



  <h3 id=contenteditable><span class=secno>8.7 </span>The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute</h3>

  <p>The <dfn id=attr-contenteditable title=attr-contenteditable><code>contenteditable</code></dfn>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a> whose keywords are
  the empty string, <code title="">true</code>, and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the <i>true</i> state. The <code title="">false</code> keyword maps to the <i>false</i> state. In
  addition, there is a third state, the <i>inherit</i> state, which is
  the <i>missing value default</i> (and the <i>invalid value
  default</i>).</p>

  <p>The <i>true</i> state indicates that the element is editable. The
  <i>inherit</i> state indicates that the element is editable if its
  parent is. The <i>false</i> state indicates that the element is not
  editable.</p>

  <div class=impl>

  <p>Specifically, if an <a href=#html-elements title="HTML elements">HTML
  element</a> has a <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
  the true state, or it has its <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
  the inherit state and if its nearest ancestor <a href=#html-elements title="HTML
  elements">HTML element</a> with the <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
  a state other than the inherit state has its attribute set to the
  true state, or if it and its ancestors all have their <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
  the inherit state but the <code><a href=#document>Document</a></code> has <code title=dom-document-designMode><a href=#designMode>designMode</a></code> enabled, then the
  UA must treat the element as <dfn id=editable>editable</dfn> (as described
  below).</p>

  <p>Otherwise, either the <a href=#html-elements title="HTML elements">HTML
  element</a> has a <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
  the false state, or its <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute is set
  to the inherit state and its nearest ancestor <a href=#html-elements title="HTML
  elements">HTML element</a> with the <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
  a state other than the inherit state has its attribute set to the
  false state, or all its ancestors have their <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
  the inherit state and the <code><a href=#document>Document</a></code> itself has <code title=dom-document-designMode><a href=#designMode>designMode</a></code> disabled; either
  way, the element is not editable.</p>

  </div>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-contentEditable><a href=#dom-contenteditable>contentEditable</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns "<code title="">true</code>", "<code title="">false</code>", or "<code title="">inherit</code>", based
    on the state of the <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute.</p>

    <p>Can be set, to change that state.</p>

    <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the new value
    isn't one of those strings.</p>

   </dd>

   <dt><var title="">element</var> . <code title=dom-isContentEditable><a href=#dom-iscontenteditable>isContentEditable</a></code></dt>

   <dd>

    <p>Returns true if the element is editable; otherwise, returns false.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-contenteditable title=dom-contentEditable><code>contentEditable</code></dfn> IDL
  attribute, on getting, must return the string "<code title="">true</code>" if the content attribute is set to the true
  state, <code title="">false</code>" if the content attribute is set
  to the false state, and "<code title="">inherit</code>"
  otherwise. On setting, if the new value is an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> match for the string "<code title="">inherit</code>" then the content attribute must be removed,
  if the new value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
  the string "<code title="">true</code>" then the content attribute
  must be set to the string "<code title="">true</code>", if the new
  value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
  "<code title="">false</code>" then the content attribute must be set
  to the string "<code title="">false</code>", and otherwise the
  attribute setter must raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception.</p>

  <p>The <dfn id=dom-iscontenteditable title=dom-isContentEditable><code>isContentEditable</code></dfn>
  IDL attribute, on getting, must return true if the element is
  <a href=#editable>editable</a>, and false otherwise.</p>

  <p>If an element is <a href=#editable>editable</a> and its parent element is
  not, or if an element is <a href=#editable>editable</a> and it has no parent
  element, then the element is an <dfn id=editing-host>editing host</dfn>. Editable
  elements can be nested. User agents must make editing hosts
  focusable (which typically means they enter the <a href=#attr-tabindex title=attr-tabindex>tab order</a>). An editing host can contain
  non-editable sections, these are handled as described below. An
  editing host can contain non-editable sections that contain further
  editing hosts.</p>

  <p>When an editing host has focus, it must have a <dfn id=caret-position>caret
  position</dfn> that specifies where the current editing position
  is. It may also have a <a href=#the-selection title="the
  selection">selection</a>.</p>

  <p class=note>How the caret and selection are represented depends
  entirely on the UA.</p>

  <!-- v2: would be useful to have a way to mark an element as
  unremovable. -->

  </div>


  <div class=impl>

  <h4 id=user-editing-actions><span class=secno>8.7.1 </span>User editing actions</h4>

  <p>There are several actions that the user agent should allow the
  user to perform while the user is interacting with an editing
  host. How exactly each action is triggered is not defined for every
  action, but when it is not defined, suggested key bindings are
  provided to guide implementors.</p>

  <dl><dt>Move the caret</dt>

   <dd><p>User agents must allow users to move the caret to any
   position within an editing host, even into nested editable
   elements. This could be triggered as the default action of <code title=event-keydown>keydown</code> events with various key
   identifiers and as the default action of <code title=event-mousedown>mousedown</code> events.</dd>


   <dt>Change the selection</dt>

   <dd><p>User agents must allow users to change <a href=#the-selection>the
   selection</a> within an editing host, even into nested editable
   elements. User agents may prevent selections from being made in
   ways that cross from editable elements into non-editable elements
   (e.g. by making each non-editable descendant atomically selectable,
   but not allowing text selection within them). This could be
   triggered as the default action of <code title=event-keydown>keydown</code> events with various key
   identifiers and as the default action of <code title=event-mousedown>mousedown</code> events.</dd>


   <dt id=contenteditable-insertText>Insert text</dt>

   <dd><p>This action must be triggered as the default action of a
   <code title=event-textInput>textInput</code> event, and may be
   triggered by other commands as well. It must cause the user agent
   to insert the specified text (given by the event object's <code title="">data</code> attribute in the case of the <code title=event-textInput>textInput</code> event) at the caret.</p>

   <p>If the caret is positioned somewhere where <a href=#phrasing-content>phrasing
   content</a> is not allowed (e.g. inside an empty <code><a href=#the-ol-element>ol</a></code>
   element), then the user agent must not insert the text directly at
   the caret position. In such cases the behavior is UA-dependent,
   but user agents must not, in response to a request to insert text,
   generate a DOM that is less conformant than the DOM prior to the
   request.</p>

   <p>User agents should allow users to insert new paragraphs into
   elements that contains only content other than paragraphs.</p>

   <div class=example>
    <p>For example, given the markup:</p>
    <pre>&lt;section&gt;
 &lt;dl&gt;
  &lt;dt&gt; Ben &lt;/dt&gt;
  &lt;dd&gt; Goat &lt;/dd&gt;
 &lt;/dl&gt;
&lt;/section&gt;</pre>
    <p>...the user agent should allow the user to insert
    <code><a href=#the-p-element>p</a></code> elements before and after the <code><a href=#the-dl-element>dl</a></code>
    element, as children of the <code><a href=#the-section-element>section</a></code> element.</p>
   </div>

   </dd>


   <dt id=contenteditable-breakBlock>Break block</dt>

   <dd><p>UAs should offer a way for the user to request that the
   current paragraph be broken at the caret, e.g. as the default
   action of a <code title=event-keydown>keydown</code> event whose
   identifier is the "Enter" key and that has no modifiers set.</p>

   <p>The exact behavior is UA-dependent, but user agents must not,
   in response to a request to break a paragraph, generate a DOM that
   is less conformant than the DOM prior to the request.</dd>


   <dt id=contenteditable-br>Insert a line separator</dt>

   <dd><p>UAs should offer a way for the user to request an explicit
   line break at the caret position without breaking the paragraph,
   e.g. as the default action of a <code title=event-keydown>keydown</code> event whose identifier is the
   "Enter" key and that has a shift modifier set. Line separators are
   typically found within a poem verse or an address. To insert a line
   break, the user agent must insert a <code><a href=#the-br-element>br</a></code> element.</p>

   <p>If the caret is positioned somewhere where <a href=#phrasing-content>phrasing
   content</a> is not allowed (e.g. in an empty <code><a href=#the-ol-element>ol</a></code>
   element), then the user agent must not insert the <code><a href=#the-br-element>br</a></code>
   element directly at the caret position. In such cases the behavior
   is UA-dependent, but user agents must not, in response to a request
   to insert a line separator, generate a DOM that is less conformant
   than the DOM prior to the request.</dd>


   <dt id=contenteditable-delete>Delete</dt>

   <dd><p>UAs should offer a way for the user to delete text and
   elements, including non-editable descendants, e.g. as the default
   action of <code title=event-keydown>keydown</code> events whose
   identifiers are "U+0008" or "U+007F".</p>

   <p>Five edge cases in particular need to be considered carefully
   when implementing this feature: backspacing at the start of an
   element, backspacing when the caret is immediately after an
   element, forward-deleting at the end of an element,
   forward-deleting when the caret is immediately before an element,
   and deleting a <a href=#the-selection title="the selection">selection</a> whose
   start and end points do not share a common parent node.</p>

   <p>In any case, the exact behavior is UA-dependent, but user
   agents must not, in response to a request to delete text or an
   element, generate a DOM that is less conformant than the DOM prior
   to the request.</dd>


   <dt id=contenteditable-wrapSemantic>Insert, and wrap text in,
   semantic elements</dt>

   <dd><p>UAs should offer the user the ability to mark text and
   paragraphs with semantics that HTML can express.</p>

   <p>UAs should similarly offer a way for the user to insert empty
   semantic elements to subsequently fill by entering text
   manually.</p>

   <p>UAs should also offer a way to remove those semantics from
   marked up text, and to remove empty semantic element that have been
   inserted.</p>

   <p>In response to a request from a user to mark text up in italics,
   user agents should use the <code><a href=#the-i-element>i</a></code> element to represent the
   semantic. The <code><a href=#the-em-element>em</a></code> element should be used only if the
   user agent is sure that the user means to indicate stress
   emphasis.</p>

   <p>In response to a request from a user to mark text up in bold,
   user agents should use the <code><a href=#the-b-element>b</a></code> element to represent the
   semantic. The <code><a href=#the-strong-element>strong</a></code> element should be used only if
   the user agent is sure that the user means to indicate
   importance.</p>

   <p>The exact behavior is UA-dependent, but user agents must not,
   in response to a request to wrap semantics around some text or to
   insert or remove a semantic element, generate a DOM that is less
   conformant than the DOM prior to the request.</dd>


   <dt>Select and move non-editable elements nested inside editing hosts</dt>

   <dd><p>UAs should offer a way for the user to move images and other
   non-editable parts around the content within an editing host. This
   may be done using the <a href=#dnd>drag and drop</a> mechanism. User
   agents must not, in response to a request to move non-editable
   elements nested inside editing hosts, generate a DOM that is less
   conformant than the DOM prior to the request.</dd>


   <dt>Edit form controls nested inside editing hosts</dt>

   <dd><p>When an <a href=#editable>editable</a> form control is edited, the
   changes must be reflected in both its current value <em>and</em>
   its default value. For <code><a href=#the-input-element>input</a></code> elements this means
   updating the <code title=dom-input-defaultValue><a href=#dom-input-defaultvalue>defaultValue</a></code> IDL attribute as
   well as the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL
   attribute; for <code><a href=#the-select-element>select</a></code> elements it means updating the
   <code><a href=#the-option-element>option</a></code> elements' <code title=dom-option-defaultSelected><a href=#dom-option-defaultselected>defaultSelected</a></code> IDL
   attribute as well as the <code title=dom-option-selected><a href=#dom-option-selected>selected</a></code> IDL attribute; for
   <code><a href=#the-textarea-element>textarea</a></code> elements this means updating the <code title=dom-textarea-defaultValue><a href=#dom-textarea-defaultvalue>defaultValue</a></code> IDL attribute
   as well as the <code title=dom-textarea-value><a href=#dom-textarea-value>value</a></code> IDL
   attribute. (Updating the <code title="">default*</code> IDL
   attributes causes content attributes to be updated as well.)</dd>

  </dl><p>User agents may perform several commands per user request; for
  example if the user selects a block of text and hits
  <kbd><kbd>Enter</kbd></kbd>, the UA might interpret that as a
  request to delete the content of <a href=#the-selection>the selection</a> followed
  by a request to break the paragraph at that position.</p>

  <p>User agents may add <a href=#dom-changes>DOM changes</a> entries to the
  <a href=#undo-transaction-history>undo transaction history</a> of the <a href=#editing-host>editing
  host</a>'s <code><a href=#document>Document</a></code> object each time an action is
  triggered.</p>

  <p>All of the actions defined above, whether triggered by the user
  or programmatically (e.g. by <code title=dom-document-execCommand><a href=#execCommand>execCommand()</a></code> commands),
  must fire mutation events as appropriate.</p>

  </div>



  <h4 id=making-entire-documents-editable><span class=secno>8.7.2 </span>Making entire documents editable</h4>

  <div class=impl>

  <p>Documents have a <dfn id=designMode title=dom-document-designMode><code>designMode</code></dfn>, which
  can be either enabled or disabled.</p>

  </div>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-designMode><a href=#designMode>designMode</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns "<code title="">on</code>" if the document is editable,
    and "<code title="">off</code>" if it isn't.</p>

    <p>Can be set, to change the document's current state.</p>

   </dd>

  </dl><div class=impl>

  <p>The <code title=dom-document-designMode><a href=#designMode>designMode</a></code> IDL
  attribute on the <code><a href=#document>Document</a></code> object takes two values,
  "<code title="">on</code>" and "<code title="">off</code>". When it
  is set, the new value must be compared in an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> manner to these two values. If it matches
  the "<code title="">on</code>" value, then <code title=dom-document-designMode><a href=#designMode>designMode</a></code> must be enabled,
  and if it matches the "<code title="">off</code>" value, then <code title=dom-document-designMode><a href=#designMode>designMode</a></code> must be
  disabled. Other values must be ignored.</p>

  <p>When <code title=dom-document-designMode><a href=#designMode>designMode</a></code> is
  enabled, the IDL attribute must return the value "<code title="">on</code>", and when it is disabled, it must return the
  value "<code title="">off</code>".</p>

  <p>The last state set must persist until the document is destroyed
  or the state is changed. Initially, documents must have their <code title=dom-document-designMode><a href=#designMode>designMode</a></code> disabled.</p>

  </div>



  <h3 id=spelling-and-grammar-checking><span class=secno>8.8 </span>Spelling and grammar checking</h3>

  <div class=impl>

  <p>User agents can support the checking of spelling and grammar of
  editable text, either in form controls (such as the value of
  <code><a href=#the-textarea-element>textarea</a></code> elements), or in elements in an <a href=#editing-host>editing
  host</a> (using <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code>).</p>

  <p>For each element, user agents must establish a <dfn id=concept-spellcheck-default title=concept-spellcheck-default>default behavior</dfn>, either
  through defaults or through preferences expressed by the user. There
  are three possible default behaviors for each element:</p>

  <dl><dt><dfn id=concept-spellcheck-default-true title=concept-spellcheck-default-true>true-by-default</dfn>

   <dd>The element will be checked for spelling and grammar if its
   contents are editable.

   <dt><dfn id=concept-spellcheck-default-false title=concept-spellcheck-default-false>false-by-default</dfn>

   <dd>The element will never be checked for spelling and grammar.

   <dt><dfn id=concept-spellcheck-default-inherit title=concept-spellcheck-default-inherit>inherit-by-default</dfn>

   <dd>The element's default behavior is the same as its parent
   element's. Elements that have no parent element cannot have this as
   their default behavior.

  </dl><hr></div>

  <p>The <dfn id=attr-spellcheck title=attr-spellcheck><code>spellcheck</code></dfn>
  attribute is an <a href=#enumerated-attribute>enumerated attribute</a> whose keywords are
  the empty string, <code title="">true</code> and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the <i>true</i> state. The <code title="">false</code> keyword maps to the <i>false</i> state. In
  addition, there is a third state, the <i>default</i> state, which is
  the <i>missing value default</i> (and the <i>invalid value
  default</i>).</p>

  <p>The <i>true</i> state indicates that the element is to have its
  spelling and grammar checked. The <i>default</i> state indicates
  that the element is to act according to a default behavior, possibly
  based on the parent element's own <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> state. The <i>false</i>
  state indicates that the element is not to be checked.</p>

  <div class=impl>

  <hr></div>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-spellcheck><a href=#dom-spellcheck>spellcheck</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns "<code title="">true</code>", "<code title="">false</code>", or "<code title="">default</code>", based
    on the state of the <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> attribute.</p>

    <p>Can be set, to change that state.</p>

    <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the new value
    isn't one of those strings.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-spellcheck title=dom-spellcheck><code>spellcheck</code></dfn> IDL
  attribute, on getting, must return the string "<code title="">true</code>" if the content attribute is set to the true
  state, <code title="">false</code>" if the content attribute is set
  to the false state, and "<code title="">default</code>"
  otherwise. On setting, if the new value is an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> match for the string "<code title="">default</code>" then the content attribute must be removed,
  if the new value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
  the string "<code title="">true</code>" then the content attribute
  must be set to the string "<code title="">true</code>", if the new
  value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
  "<code title="">false</code>" then the content attribute must be set
  to the string "<code title="">false</code>", and otherwise the
  attribute setter must raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception.</p>

  <p class=note>The <code title=dom-spellcheck><a href=#dom-spellcheck>spellcheck</a></code>
  IDL attribute is not affected by user preferences that override the
  <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content attribute,
  and therefore might not reflect the actual spellchecking state.</p>

  <p>On setting, if the new value is true, then the element's <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content attribute must be
  set to the literal string "<code title="">true</code>", otherwise it
  must be set to the literal string "<code title="">false</code>".

  <hr><p>User agents must only consider the following pieces of text as
  checkable for the purposes of this feature:</p>

  <ul><li>The value of <code><a href=#the-input-element>input</a></code> elements to which the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute applies,
   whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attributes are not
   in the <a href=#password-state title=attr-input-type-password>Password</a>
   state, and that are not <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i> (i.e. that do not
   have the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>
   attribute specified and that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>).</li>

   <li>The value of <code><a href=#the-textarea-element>textarea</a></code> elements that do not have a
   <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute and
   that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</li>

   <li>Text in <a href=#text-node title="text node">text nodes</a> that are
   children of <a href=#editable>editable</a> elements.</li>

   <li>Text in attributes of <a href=#editable>editable</a> elements.</li>

  </ul><p>For text that is part of a <a href=#text-node>text node</a>, the element
  with which the text is associated is the element that is the
  immediate parent of the first character of the word, sentence, or
  other piece of text. For text in attributes, it is the attribute's
  element. For the values of <code><a href=#the-input-element>input</a></code> and
  <code><a href=#the-textarea-element>textarea</a></code> elements, it is the element itself.</p>

  <p>To determine if a word, sentence, or other piece of text in an
  applicable element (as defined above) is to have spelling- and/or
  grammar-checking enabled, the UA must use the following
  algorithm:</p>

  <ol><!-- user override --><li>If the user has disabled the checking for this text, then the
   checking is disabled.</li>

   <li>Otherwise, if the user has forced the checking for this text to
   always be enabled, then the checking is enabled.</li>

   <!-- content attribute: on, off -->

   <li>Otherwise, if the element with which the text is associated has
   a <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content
   attribute, then: if that attribute is in the <i>true</i> state,
   then checking is enabled; otherwise, if that attribute is in the
   <i>false</i> state, then checking is disabled.</li>

   <!-- inherit, if there is one to inherit from -->

   <li>Otherwise, if there is an ancestor element with a <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content attribute that is
   not in the <i>default</i> state, then: if the nearest such
   ancestor's <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content
   attribute is in the <i>true</i> state, then checking is enabled;
   otherwise, checking is disabled.</li>

   <!-- default -->

   <li>Otherwise, if the element's <a href=#concept-spellcheck-default title=concept-spellcheck-default>default behavior</a> is <a href=#concept-spellcheck-default-true title=concept-spellcheck-default-true>true-by-default</a>,
   then checking is enabled.</li>

   <li>Otherwise, if the element's <a href=#concept-spellcheck-default title=concept-spellcheck-default>default behavior</a> is <a href=#concept-spellcheck-default-false title=concept-spellcheck-default-false>false-by-default</a>,
   then checking is disabled.</li>

   <!-- default inheritance -->

   <li>Otherwise, if the element's parent element has <em>its</em>
   checking enabled, then checking is enabled.</li>

   <li>Otherwise, checking is disabled.</li>

  </ol><p>If the checking is enabled for a word/sentence/text, the user
  agent should indicate spelling and/or grammar errors in that
  text. User agents should take into account the other semantics given
  in the document when suggesting spelling and grammar
  corrections. User agents may use the language of the element to
  determine what spelling and grammar rules to use, or may use the
  user's preferred language settings. UAs should use
  <code><a href=#the-input-element>input</a></code> element attributes such as <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> to ensure that the
  resulting value is valid, where possible.</p>

  <p>If checking is disabled, the user agent should not indicate
  spelling or grammar errors for that text.</p>

  <div class=example>

   <p>The element with ID "a" in the following example would be the
   one used to determine if the word "Hello" is checked for spelling
   errors. In this example, it would not be.</p>

   <pre>&lt;div contenteditable="true"&gt;
 &lt;span spellcheck="false" id="a"&gt;Hell&lt;/span&gt;&lt;em&gt;o!&lt;/em&gt;
&lt;/div&gt;</pre>

   <p>The element with ID "b" in the following example would have
   checking enabled (the leading space character in the attribute's
   value on the <code><a href=#the-input-element>input</a></code> element causes the attribute to be
   ignored, so the ancestor's value is used instead, regardless of the
   default).</p>

   <pre>&lt;p spellcheck="true"&gt;
 &lt;label&gt;Name: &lt;input spellcheck=" false" id="b"&gt;&lt;/label&gt;
&lt;/p&gt;</pre>

  </div>

  </div>

  <p class=note>This specification does not define the user
  interface for spelling and grammar checkers. A user agent could
  offer on-demand checking, could perform continuous checking while
  the checking is enabled, or could use other interfaces.</p>


  <h3 id=dnd><span class=secno>8.9 </span><dfn>Drag and drop</dfn></h3>

<!-- v2 ideas for drag and drop:

     * being able to animate a drop target:

       > To implement this with simple interface I've proposed, events
       > should be handled either by existing elements (like list
       > items that compare their size and position of dragged element
       > to decide whether element should be dropped before or after)
       > or handled by container that would probably need to calculate
       > positions of it's children and create new element to show
       > drop target. Smooth Mac-like drag'n'drop can be implemented
       > by animating drop target's padding/margin. So that's quite a
       > bit of code that's going to be reinvented each time someone
       > implements reordering.

       <hyatt> :droptarget
       <hyatt> or something
       <hyatt> we don't support a pseudo-class for the drop target but that's a great idea
       <Hixie_> yeah, thinking about that too
       <Hixie_> :drop-target, :drop-target(above), :drop-target(below) and having ondragover be able to say "not on me, but next to me maybe"

     * We should let drop targets communicate back to drag sources if
       they want to communicate. (e.g. expose Window, and thus
       postMessage(), on the dataTransfer object on drop.)

       We should let drag sources provide a set of options via a
       context menu when the drop happens. (So that, e.g., the source
       can know whether a capabilities URI that it is passing along is
       supposed to be read-write access or read-only access to the
       object being dragged.)

       We should let potential drop targets see the types (but not the
       contents!) of dragged data so they can establish if they care
       or not. (dataTransfer.hasType())

       Ack: Ben Laurie (@g)

     * Promises. Should be able to say "if you accept this drop, then
       I can provide the File object that corresponds to it
       eventually".

     * Exposing more information about each item. Best idea (from
       Eduard Pascual) is to have a new attribute on dataTransfer
       that's a list of items, each of which has:

        dataTransfer.items = DataTransferItems

         DataTransferItems.length
                          .getItem(n) = DataTransferItem
                          .add(stringData, type)
                          .add(blobData)
                          .add(fileData)
                          .add(dataTransferItem)
                          .clear()

         DataTransferItem.kind = 'string', 'file', 'blob', ...
                         .type = MIME type
                         .binary = boolean
                         .getTextData(function callback (data)) - throws if binary is true
                         .getBlob() - returns File or Blob

-->

  <p>This section defines an event-based drag-and-drop mechanism.</p>

  <p>This specification does not define exactly what a
  <em>drag-and-drop operation</em> actually is.</p>

  <p>On a visual medium with a pointing device, a drag operation could
  be the default action of a <code title=event-mousedown>mousedown</code> event that is followed by a
  series of <code title=event-mousemove>mousemove</code> events, and
  the drop could be triggered by the mouse being released.</p>

  <p>On media without a pointing device, the user would probably have
  to explicitly indicate his intention to perform a drag-and-drop
  operation, stating what he wishes to drag and what he wishes to
  drop, respectively.</p>

  <div class=impl>

  <p>However it is implemented, drag-and-drop operations must have a
  starting point (e.g. where the mouse was clicked, or the start of
  <a href=#the-selection>the selection</a> or element that was selected for the
  drag), may have any number of intermediate steps (elements that the
  mouse moves over during a drag, or elements that the user picks as
  possible drop points as he cycles through possibilities), and must
  either have an end point (the element above which the mouse button
  was released, or the element that was finally selected), or be
  canceled. The end point must be the last element selected as a
  possible drop point before the drop occurs (so if the operation is
  not canceled, there must be at least one element in the middle
  step).</p>

  </div>


  <h4 id=introduction-5><span class=secno>8.9.1 </span>Introduction</h4>

  <p><i>This section is non-normative.</i></p>

  <p>To make an element draggable is simple: give the element a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> attribute, and set an event
  listener for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> that
  stores the data being dragged.</p>

  <p>The event handler typically needs to check that it's not a text
  selection that is being dragged, and then needs to store data into
  the <code><a href=#datatransfer>DataTransfer</a></code> object and set the allowed effects
  (copy, move, link, or some combination).</p>

  <p>For example:</p>

  <pre>&lt;p&gt;What fruits do you like?&lt;/p&gt;
&lt;ol ondragstart="dragStartHandler(event)"&gt;
 &lt;li draggable data-value="fruit-apple"&gt;Apples&lt;/li&gt;
 &lt;li draggable data-value="fruit-orange"&gt;Oranges&lt;/li&gt;
 &lt;li draggable data-value="fruit-pear"&gt;Pears&lt;/li&gt;
&lt;/ol&gt;
&lt;script&gt;
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragStartHandler(event) {
    if (event.target instanceof HTMLLIElement) {
      // use the element's data-value="" attribute as the value to be moving:
      event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
      event.effectAllowed = 'move'; // only allow moves
    } else {
      event.preventDefault(); // don't allow selection to be dragged
    }
  }
&lt;/script&gt;</pre>

  <hr><p>To accept a drop, the drop target has to listen to at least three
  events. First, the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code>
  event, which is used to determine whether or not the drop target is
  to accept the drop. If the drop is to be accepted, then this event
  has to be canceled. Second, the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event, which is used to
  determine what feedback is to be shown to the user. If the event is
  canceled, then the feedback (typically the cursor) is updated based
  on the <code title=dom-DataTransfer-DropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
  attribute's value, as set by the event handler; otherwise, the
  default behavior (typically to do nothing) is used instead. Finally,
  the <code title=event-drop><a href=#event-drop>drop</a></code> event, which allows the
  actual drop to be performed. This event also needs to be canceled,
  so that the <code title=dom-DataTransfer-DropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute's
  value can be used by the source (otherwise it's reset).</p>

  <p>For example:</p>

  <pre>&lt;p&gt;Drop your favorite fruits below:&lt;/p&gt;
&lt;ol class="dropzone"
    ondragenter="dragEnterHandler(event)"
    ondragover="dragOverHandler(event)"
    ondrop="dropHandler(event)"&gt;
&lt;/ol&gt;
&lt;script&gt;
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragEnterHandler(event) {
    // cancel the event if the drag contains data of our type
    if (event.dataTransfer.types.contains(internalDNDType))
      event.preventDefault();
  }
  function dragOverHandler(event) {
    event.dataTransfer.dropEffect = 'move';
    event.preventDefault();
  }
  function dropHandler(event) {
    // drop the data
    var li = document.createElement('li');
    var data = event.dataTransfer.getData(internalDNDType);
    if (data == 'fruit-apple') {
      li.textContent = 'Apples';
    } else if (data == 'fruit-orange') {
      li.textContent = 'Oranges';
    } else if (data == 'fruit-pear') {
      li.textContent = 'Pears';
    } else {
      li.textContent = 'Unknown Fruit';
    }
    event.target.appendChild(li);
  }
&lt;/script&gt;</pre>

  <hr><p>To remove the original element (the one that was dragged) from
  the display, the <code title=event-dragend><a href=#event-dragend>dragend</a></code> event
  can be used.</p>

  <p>For our example here, that means updating the original markup to
  handle that event:</p>


  <pre>&lt;p&gt;What fruits do you like?&lt;/p&gt;
&lt;ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)"&gt;
 <em>...as before...</em>
&lt;/ol&gt;
&lt;script&gt;
  function dragStartHandler(event) {
    // <em>...as before...</em>
  }
  function dragEndHandler(event) {
    // remove the dragged element
    event.target.parentNode.removeChild(event.target);
  }
&lt;/script&gt;</pre>




  <h4 id=the-dragevent-and-datatransfer-interfaces><span class=secno>8.9.2 </span>The <code><a href=#dragevent>DragEvent</a></code> and <code><a href=#datatransfer>DataTransfer</a></code> interfaces</h4>

  <p>The drag-and-drop processing model involves several events. They
  all use the <code><a href=#dragevent>DragEvent</a></code> interface.</p>

  <pre class=idl>interface <dfn id=dragevent>DragEvent</dfn> : <span>MouseEvent</span> {
  readonly attribute <a href=#datatransfer>DataTransfer</a> <a href=#dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer>dataTransfer</a>;

  void <a href=#dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent>initDragEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg<!-- used to be viewArg, back when we had views -->, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in EventTarget relatedTargetArg, in <a href=#datatransfer>DataTransfer</a> dataTransferArg);
};</pre>

  <dl class=domintro><dt><var title="">event</var> . <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#datatransfer>DataTransfer</a></code> object for the event.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent><code>initDragEvent()</code></dfn>
  method must initialize the event in a manner analogous to the
  similarly-named method in the DOM Events interfaces, except that the
  <var title="">dummyArg</var> argument must be ignored. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

  <p>The <dfn id=dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer><code>dataTransfer</code></dfn>
  attribute of the <code><a href=#dragevent>DragEvent</a></code> interface represents the
  context information for the event.</p>

  </div>

  <pre class=idl>interface <dfn id=datatransfer>DataTransfer</dfn> {
           attribute DOMString <a href=#dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect>dropEffect</a>;
           attribute DOMString <a href=#dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed>effectAllowed</a>;

  readonly attribute DOMStringList <a href=#dom-datatransfer-types title=dom-DataTransfer-types>types</a>;
  void <a href=#dom-datatransfer-cleardata title=dom-DataTransfer-clearData>clearData</a>(in optional DOMString format);
  void <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>setData</a>(in DOMString format, in DOMString data);
  DOMString <a href=#dom-datatransfer-getdata title=dom-DataTransfer-getData>getData</a>(in DOMString format);
  readonly attribute <span>FileList</span> <a href=#dom-datatransfer-files title=dom-DataTransfer-files>files</a>;

  void <a href=#dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage>setDragImage</a>(in Element image, in long x, in long y);
  void <a href=#dom-datatransfer-addelement title=dom-DataTransfer-addElement>addElement</a>(in Element element);
};</pre>

  <p><code><a href=#datatransfer>DataTransfer</a></code> objects can hold pieces of data, each
  associated with a unique format. Formats are generally given by
  <a href=#mime-type title="MIME type">MIME types</a>, with some values
  special-cased for legacy reasons. However, the API does not enforce
  this; non-MIME-type values can be added as well. All formats are
  identified by strings that are <a href=#converted-to-ascii-lowercase>converted to ASCII
  lowercase</a> by the API.</p>

  <dl class=domintro><dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the kind of operation that is currently selected. If
    the kind of operation isn't one of those that is allowed by the
    <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
    attribute, then the operation will fail.</p>

    <p>Can be set, to change the selected operation.</p>

    <p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">link</code>, and <code title="">move</code>.</p>

   </dd>

   <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the kinds of operations that are to be allowed.</p>

    <p>Can be set, to change the allowed operations.</p>

    <p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">link</code>, <code title="">linkMove</code>, <code title="">move</code>, <code title="">all</code>, and <code title="">uninitialized</code>,</p>

   </dd>

   <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-types><a href=#dom-datatransfer-types>types</a></code></dt>

   <dd>

    <p>Returns a <code>DOMStringList</code> listing the formats that
    were set in the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>
    event. In addition, if any files are being dragged, then one of
    the types will be the string "<code title="">Files</code>".</p>

   </dd>

   <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData</a></code>( [ <var title="">format</var> ] )</dt>

   <dd>

    <p>Removes the data of the specified formats. Removes all data if
    the argument is omitted.</p>

   </dd>

   <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-setData><a href=#dom-datatransfer-setdata>setData</a></code>(<var title="">format</var>, <var title="">data</var>)</dt>

   <dd>

    <p>Adds the specified data.</p>

   </dd>

   <dt><var title="">data</var> = <var title="">dataTransfer</var> . <code title=dom-DataTransfer-getData><a href=#dom-datatransfer-getdata>getData</a></code>(<var title="">format</var>)</dt>

   <dd>

    <p>Returns the specified data. If there is no such data, returns the empty string.</p>

   </dd>

   <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-files><a href=#dom-datatransfer-files>files</a></code></dt>

   <dd>

    <p>Returns a <code>FileList</code> of the files being dragged, if any.</p>

   </dd>

   <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</dt>

   <dd>

    <p>Uses the given element to update the drag feedback, replacing any previously specified feedback.</p>

   </dd>

   <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement</a></code>(<var title="">element</var>)</dt>

   <dd>

    <p>Adds the given element to the list of elements used to render the drag feedback.</p>

   </dd>

  </dl><div class=impl>

  <p>When a <code><a href=#datatransfer>DataTransfer</a></code> object is created, it must be
  initialized as follows:</p>

  <ul><li>The <code><a href=#datatransfer>DataTransfer</a></code> object must initially contain no
   data, no elements, and have no associated image.</li>

   <li>The <code><a href=#datatransfer>DataTransfer</a></code> object's <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
   attribute must be set to "<code title="">uninitialized</code>".</li>

   <li>The <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
   attribute must be set to "<code title="">none</code>".</li>

  </ul><p>The <dfn id=dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect><code>dropEffect</code></dfn>
  attribute controls the drag-and-drop feedback that the user is given
  during a drag-and-drop operation.</p>

  <p>The attribute must ignore any attempts to set it to a value other
  than <code title="">none</code>, <code title="">copy</code>, <code title="">link</code>, and <code title="">move</code>. On getting,
  the attribute must return the last of those four values that it was
  set to.</p>

  <p>The <dfn id=dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed><code>effectAllowed</code></dfn>
  attribute is used in the drag-and-drop processing model to
  initialize the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
  during the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code> events.</p>

  <p>The attribute must ignore any attempts to set it to a value other
  than <code title="">none</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">link</code>, <code title="">linkMove</code>, <code title="">move</code>, <code title="">all</code>, and <code title="">uninitialized</code>. On getting, the attribute must return
  the last of those values that it was set to.</p>

  <p>The <dfn id=dom-datatransfer-types title=dom-DataTransfer-types><code>types</code></dfn>
  attribute must return a <a href=#live>live</a> <code>DOMStringList</code>
  that contains the list of formats that were added to the
  <code><a href=#datatransfer>DataTransfer</a></code> object in the corresponding <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event. The same object must
  be returned each time. If any files were included in the drag, then
  the <code>DOMStringList</code> object must in addition include the
  string "<code title="">Files</code>". (This value can be
  distinguished from the other values because it is not
  lowercase.)</p>

  <p>The <dfn id=dom-datatransfer-cleardata title=dom-DataTransfer-clearData><code>clearData()</code></dfn>
  method, when called with no arguments, must clear the
  <code><a href=#datatransfer>DataTransfer</a></code> object of all data (for all formats).</p>

  <p class=note>The <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> method does
  not affect whether any files were included in the drag, so the <code title=dom-DataTransfer-types><a href=#dom-datatransfer-types>types</a></code> attribute's list might
  still not be empty after calling <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> (it would
  still contain the "<code title="">Files</code>" string if any files
  were included in the drag).</p>

  <p>When called with an argument, the <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData(<var title="">format</var>)</a></code> method must clear the
  <code><a href=#datatransfer>DataTransfer</a></code> object of any data associated with the
  given <var title="">format</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII
  lowercase</a>. If <var title="">format</var> (after conversion to
  lowercase) is the value "<code title="">text</code>", then it must
  be treated as "<code title="">text/plain</code>". If the <var title="">format</var> (after conversion to lowercase) is "<code title="">url</code>", then it must be treated as "<code title="">text/uri-list</code>".</p>

  <p>The <dfn id=dom-datatransfer-setdata title=dom-DataTransfer-setData><code>setData(<var title="">format</var>, <var title="">data</var>)</code></dfn> method
  must add <var title="">data</var> to the data stored in the
  <code><a href=#datatransfer>DataTransfer</a></code> object, labeled as being of the type <var title="">format</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII
  lowercase</a>. This must replace any previous data that had been
  set for that format. If <var title="">format</var> (after conversion
  to lowercase) is the value "<code title="">text</code>", then it
  must be treated as "<code title="">text/plain</code>". If the <var title="">format</var> (after conversion to lowercase) is "<code title="">url</code>", then it must be treated as "<code title="">text/uri-list</code>".</p>

  <p>The <dfn id=dom-datatransfer-getdata title=dom-DataTransfer-getData><code>getData(<var title="">format</var>)</code></dfn> method must return the data that
  is associated with the type <var title="">format</var>
  <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>, if any, and must return
  the empty string otherwise. If <var title="">format</var> (after
  conversion to lowercase) is the value "<code title="">text</code>",
  then it must be treated as "<code title="">text/plain</code>". If
  the <var title="">format</var> (after conversion to lowercase) is
  "<code title="">url</code>", then the data associated with the
  "<code title="">text/uri-list</code>" format must be parsed as
  appropriate for <code title="">text/uri-list</code> data, and the
  first URL from the list must be returned. If there is no data with
  that format, or if there is but it has no URLs, then the method must
  return the empty string. <a href=#refsRFC2483>[RFC2483]</a></p>

  <p>The <dfn id=dom-datatransfer-files title=dom-DataTransfer-files><code>files</code></dfn>
  attribute must return the <code>FileList</code> object that contains
  the files that are stored in the <code><a href=#datatransfer>DataTransfer</a></code>
  object. There is one such object per <code><a href=#datatransfer>DataTransfer</a></code>
  object.</p>

  <p class=note>This version of the API does not expose the types of
  the files during the drag.</p>

  <p>The <dfn id=dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage><code>setDragImage(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method sets which element to use <a href=#base-dnd-feedback>to generate the drag feedback</a>. The
  <var title="">element</var> argument can be any
  <code><a href=#element>Element</a></code>; if it is an <code><a href=#the-img-element>img</a></code> element, then the
  user agent should use the element's image (at its intrinsic size) to
  generate the feedback, otherwise the user agent should base the
  feedback on the given element (but the exact mechanism for doing so
  is not specified).</p>

  <p>The <dfn id=dom-datatransfer-addelement title=dom-DataTransfer-addElement><code>addElement(<var title="">element</var>)</code></dfn> method is an alternative way of
  specifying how the user agent is to <a href=#base-dnd-feedback>render the drag feedback</a>. It adds an
  element to the <code><a href=#datatransfer>DataTransfer</a></code> object.</p>

  <p class=note>The difference between <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> and
  <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> is
  that the latter automatically generates the image based on the
  current rendering of the elements added, whereas the former uses the
  exact specified image.</p>

  </div>


  <h4 id=dndevents><span class=secno>8.9.3 </span>Events fired during a drag-and-drop action</h4>

  <p>The following events are involved in the drag-and-drop
  model.</p>

  <div class=impl>

  <p>Whenever the processing model described below causes one of these
  events to be fired, the event fired must use the
  <code><a href=#dragevent>DragEvent</a></code> interface defined above, must have the
  bubbling and cancelable behaviors given in the table below, and must
  have the context information set up as described after the table,
  with the <code title=dom-UIEvent-detail>detail</code> attribute
  set to zero, the mouse and key attributes set according to the state
  of the input devices as they would be for user interaction events,
  and the <code title="">relatedTarget</code> attribute set to
  null.</p>

  <p>If there is no relevant pointing device, the object must have its
  <code title="">screenX</code>, <code title="">screenY</code>, <code title="">clientX</code>, <code title="">clientY</code>, and <code title="">button</code> attributes set to 0.</p>

  <!-- interaction event spec point -->

  </div>

  <table><thead><tr><th> Event Name </th>
     <th> Target </th>
     <th> Bubbles? </th>
     <th> Cancelable? </th>
     <th> <code title=dom-DataTransfer-dataTransfer>dataTransfer</code> </th>
     <th> <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> </th>
     <th> <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> </th>
     <th> Default Action </th>
    <tbody><tr><td><dfn id=event-dragstart title=event-dragstart><code>dragstart</code></dfn></td>
     <td><a href=#source-node>Source node</a></td>
     <td>&#10003; Bubbles</td>
     <td>&#10003; Cancelable</td>
     <td>Contains <a href=#source-node>source node</a> unless a selection is being dragged, in which case it is empty; <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> returns any files included in the drag operation</td>
     <td><code title="">uninitialized</code></td>
     <td><code title="">none</code></td>
     <td>Initiate the drag-and-drop operation</td>
    <tr><td><dfn id=event-drag title=event-drag><code>drag</code></dfn></td>
     <td><a href=#source-node>Source node</a></td>
     <td>&#10003; Bubbles</td>
     <td>&#10003; Cancelable</td>
     <td>Empty</td>
     <td><a href=#effectAllowed-initialization>Same as last event</a></td>
     <td><code title="">none</code></td>
     <td>Continue the drag-and-drop operation</td>
    <tr><td><dfn id=event-dragenter title=event-dragenter><code>dragenter</code></dfn></td>
     <td><a href=#immediate-user-selection>Immediate user selection</a> or <a href=#the-body-element>the body element</a></td>
     <td>&#10003; Bubbles</td>
     <td>&#10003; Cancelable</td>
     <td>Empty</td>
     <td><a href=#effectAllowed-initialization>Same as last event</a></td>
     <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
     <td>Reject <a href=#immediate-user-selection>immediate user selection</a> as potential <a href=#current-target-element title="current target element">target element</a></td>
    <tr><td><dfn id=event-dragleave title=event-dragleave><code>dragleave</code></dfn></td>
     <td><a href=#current-target-element title="current target element">Previous target element</a></td>
     <td>&#10003; Bubbles</td>
     <td>&mdash;</td>
     <td>Empty</td>
     <td><a href=#effectAllowed-initialization>Same as last event</a></td>
     <td><code title="">none</code></td>
     <td>None</td>
    <tr><td><dfn id=event-dragover title=event-dragover><code>dragover</code></dfn></td>
     <td><a href=#current-target-element>Current target element</a></td>
     <td>&#10003; Bubbles</td>
     <td>&#10003; Cancelable</td>
     <td>Empty</td>
     <td><a href=#effectAllowed-initialization>Same as last event</a></td>
     <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
     <td>Reset the <a href=#current-drag-operation>current drag operation</a> to "none"</td>
    <tr><td><dfn id=event-drop title=event-drop><code>drop</code></dfn></td>
     <td><a href=#current-target-element>Current target element</a></td>
     <td>&#10003; Bubbles</td>
     <td>&#10003; Cancelable</td>
     <td><code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> returns data set in <code title=dom-dragstart>dragstart</code> event; <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> returns any files included in the drag operation</td>
     <td><a href=#effectAllowed-initialization>Same as last event</a></td>
     <td><a href=#current-drag-operation>Current drag operation</a></td>
     <td>Varies</td>
    <tr><td><dfn id=event-dragend title=event-dragend><code>dragend</code></dfn></td>
     <td><a href=#source-node>Source node</a></td>
     <td>&#10003; Bubbles</td>
     <td>&mdash;</td>
     <td>Empty</td>
     <td><a href=#effectAllowed-initialization>Same as last event</a></td>
     <td><a href=#current-drag-operation>Current drag operation</a></td>
     <td>Varies</td>
    </table><p class=note>"Empty" in the table above means that the <code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> and <code title=dom-dataTransfer-files><a href=#dom-datatransfer-files>files</a></code> attributes act as if
  there is no data being dragged.</p>

  <div class=impl>

  <p>The <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
  object's contents are empty (the <code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> and <code title=dom-dataTransfer-files><a href=#dom-datatransfer-files>files</a></code> attributes act as if
  there is no data being dragged) except for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> events and <code title=event-drop><a href=#event-drop>drop</a></code> events, for which the contents are
  set as described in the processing model, below.</p>

  <p id=effectAllowed-initialization>The <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
  attribute must be set to "<code title="">uninitialized</code>" for
  <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> events, and to
  whatever value the field had after the last drag-and-drop event was
  fired for all other events (only counting events fired by the user
  agent for the purposes of the drag-and-drop model described
  below).</p>

  <p id=dropEffect-initialization>The <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute must
  be set to "<code title="">none</code>" for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>, <code title=event-drag><a href=#event-drag>drag</a></code>, and <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> events (except when stated
  otherwise in the algorithms given in the sections below), to the
  value corresponding to the <a href=#current-drag-operation>current drag operation</a> for
  <code title=event-drop><a href=#event-drop>drop</a></code> and <code title=event-dragend><a href=#event-dragend>dragend</a></code> events, and to a value based on
  the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
  attribute's value and to the drag-and-drop source, as given by the
  following table, for the remaining events (<code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code>):</p>

  <table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
     <th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
    </thead><tr><td><code title="">none</code></td>
    <td><code title="">none</code></td>
   <tr><td><code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">all</code></td>
    <td><code title="">copy</code></td>
   <tr><td><code title="">link</code>, <code title="">linkMove</code></td>
    <td><code title="">link</code></td>
   <tr><td><code title="">move</code></td>
    <td><code title="">move</code></td>
   <tr><td><code title="">uninitialized</code> when what is being dragged is a selection from a text field</td>
    <td><code title="">move</code></td>
   <tr><td><code title="">uninitialized</code> when what is being dragged is a selection</td>
    <td><code title="">copy</code></td>
   <tr><td><code title="">uninitialized</code> when what is being dragged is an <code><a href=#the-a-element>a</a></code> element with an <code>href</code> attribute</td>
    <td><code title="">link</code></td>
   <tr><td>Any other case</td>
    <td><code title="">copy</code></td>
   </table></div>


  <div class=impl>

  <h4 id=drag-and-drop-processing-model><span class=secno>8.9.4 </span>Drag-and-drop processing model</h4>

  <p>When the user attempts to begin a drag operation, the user agent
  must first determine what is being dragged. If the drag operation
  was invoked on a selection, then it is the selection that is being
  dragged. Otherwise, it is the first element, going up the ancestor
  chain, starting at the node that the user tried to drag, that has
  the IDL attribute <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> set
  to true. If there is no such element, then nothing is being dragged,
  the drag-and-drop operation is never started, and the user agent
  must not continue with this algorithm.</p>

  <p class=note><code><a href=#the-img-element>img</a></code> elements and <code><a href=#the-a-element>a</a></code>
  elements with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
  attribute have their <code title=dom-draggable><a href=#dom-draggable>draggable</a></code>
  attribute set to true by default.</p>

  <p>If the user agent determines that something can be dragged, a
  <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event must then be
  fired at the <a href=#source-node>source node</a>.</p>

  <p>The <dfn id=source-node>source node</dfn> depends on the kind of drag and how it
  was initiated. If it is a selection that is being dragged, then the
  <a href=#source-node>source node</a> is the text node that the user started the
  drag on (typically the text node that the user originally
  clicked). If the user did not specify a particular node, for example
  if the user just told the user agent to begin a drag of "the
  selection", then the <a href=#source-node>source node</a> is the first text node
  containing a part of the selection. If it is not a selection that is
  being dragged, then the <a href=#source-node>source node</a> is the element that
  is being dragged.</p>

  <p>Multiple events are fired on the <a href=#source-node>source node</a> during
  the course of the drag-and-drop operation.</p>

  <hr><p>The <dfn id=list-of-dragged-nodes>list of dragged nodes</dfn> also depends on the kind of
  drag. If it is a selection that is being dragged, then the
  <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains, in <a href=#tree-order>tree
  order</a>, every node that is partially or completely included in
  the selection (including all their ancestors). Otherwise, the
  <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains only the <a href=#source-node>source
  node</a>.</p>

  <hr><p>If it is a selection that is being dragged, the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member of the
  event must be created with no nodes. Otherwise, it must be created
  containing just the <a href=#source-node>source node</a>. Script can use the
  <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> method
  to add further elements to the list of what is being dragged. (This
  list is only used for rendering the drag feedback.)</p>

  <p>The <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
  member of the event also has data added to it, as follows:</p>

  <ul><li>

    <p>If it is a selection that is being dragged, then the user agent
    must add the text of the selection to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
    associated with the <code title="">text/plain</code> format.</p>

   </li>

   <li>

    <p>If files are being dragged, then the user agent must add the
    files to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member's
    <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> attribute's
    <code>FileList</code> object. (Dragging files can only happen from
    outside a <a href=#browsing-context>browsing context</a>, for example from a file
    system manager application, and thus the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event is actually implied
    in this case.)</p>

   </li>



   <li>

    <p>The user agent must take the <a href=#list-of-dragged-nodes>list of dragged nodes</a>
    and <a href=#extracting-json title="extracting JSON">extract the microdata from those
    nodes into a JSON form</a>, and then must add the resulting
    string to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
    associated with the <code title="">application/microdata+json</code> format.</p>

   </li>


<!-- v2: deal with multiple vCards -->
<!--
   <li>

    <p>The user agent must take the <span>list of dragged nodes</span>
    and <span title="extracting a vCard">extract the vCard data from
    those nodes</span>, and then must add the resulting string to the
    <code title="dom-DragEvent-dataTransfer">dataTransfer</code>
    member, associated with the <code
    title="">text/directory;profile=vcard</code> format.</p>

   </li>

   <li>

    <p>The user agent must take the <span>list of dragged nodes</span>
    and <span title="extracting vEvent data">extract the vEvent data
    from those nodes</span>, and then must add the resulting string to
    the <code title="dom-DragEvent-dataTransfer">dataTransfer</code>
    member, associated with the <code
    title="">text/calendar;component=vevent</code> format.</p>

   </li>
-->

   <!-- v2: text/html -->

   <li>

    <p>The user agent must run the following steps:</p>

    <ol><li><p>Let <var title="">urls</var> be an empty list of <a href=#absolute-url title="absolute URL">absolute URLs</a>.</li>

     <li>

      <p>For each <var title="">node</var> in <var title="">nodes</var>:</p>

      <dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dt>

       <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute relative to
       the element.</dd>

       <dt>If the node is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-src><a href=#attr-img-src>src</a></code></dt>

       <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> content attribute relative to the
       element.</dd>

       <!-- v2: more -->

      </dl></li>

     <li><p>If <var title="">urls</var> is still empty, abort these
     steps.</li>

     <li><p>Let <var title="">url string</var> be the result of
     concatenating the strings in <var title="">urls</var>, in the
     order they were added, separated by a U+000D CARRIAGE RETURN
     U+000A LINE FEED character pair (CRLF).</li>

     <li><p>Add <var title="">url string</var> to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
     associated with the <code title="">text/uri-list</code>
     format.</li>

    </ol></li>

  </ul><hr><p>If the event is canceled, then the drag-and-drop operation must
  not occur; the user agent must not continue with this algorithm.</p>

  <p>If it is not canceled, then the drag-and-drop operation must be
  initiated.</p>

  <p class=note>Since events with no event listeners registered are,
  almost by definition, never canceled, drag-and-drop is always
  available to the user if the author does not specifically prevent
  it.</p>

  <p id=base-dnd-feedback>The drag-and-drop feedback must be
  generated from the first of the following sources that is
  available:</p>

  <ol><li>The element specified in the last call to the <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> method
   of the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
   object of the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event,
   if the method was called. In visual media, if this is used, the
   <var title="">x</var> and <var title="">y</var> arguments that were
   passed to that method should be used as hints for where to put the
   cursor relative to the resulting image. The values are expressed as
   distances in CSS pixels from the left side and from the top side of
   the image respectively. <a href=#refsCSS>[CSS]</a></li>

   <li>The elements that were added to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object, both
   before the event was fired, and during the handling of the event
   using the <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code>
   method, if any such elements were indeed added.</li>

   <li>The selection that the user is dragging.</li>

  </ol><p>The user agent must take a note of <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>the data that was placed</a> in
  the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
  object. This data will be made available again when the <code title=event-drop><a href=#event-drop>drop</a></code> event is fired.</p>

  <p>From this point until the end of the drag-and-drop operation,
  device input events (e.g. mouse and keyboard events) must be
  suppressed. In addition, the user agent must track all DOM changes
  made during the drag-and-drop operation, and add them to its <a href=#undo>undo history</a> as one atomic operation once the
  drag-and-drop operation has ended.</p>

  <p>During the drag operation, the element directly indicated by the
  user as the drop target is called the <dfn id=immediate-user-selection>immediate user
  selection</dfn>. (Only elements can be selected by the user; other
  nodes must not be made available as drop targets.)

  However, the <a href=#immediate-user-selection>immediate user selection</a> is not
  necessarily the <dfn id=current-target-element>current target element</dfn>, which is the
  element currently selected for the drop part of the drag-and-drop
  operation.

  The <a href=#immediate-user-selection>immediate user selection</a> changes as the user
  selects different elements (either by pointing at them with a
  pointing device, or by selecting them in some other way). The
  <a href=#current-target-element>current target element</a> changes when the <a href=#immediate-user-selection>immediate
  user selection</a> changes, based on the results of event
  listeners in the document, as described below.</p>

  <p>Both the <a href=#current-target-element>current target element</a> and the
  <a href=#immediate-user-selection>immediate user selection</a> can be null, which means no
  target element is selected. They can also both be elements in other
  (DOM-based) documents, or other (non-Web) programs altogether. (For
  example, a user could drag text to a word-processor.) The
  <a href=#current-target-element>current target element</a> is initially null.</p>

  <p>In addition, there is also a <dfn id=current-drag-operation>current drag operation</dfn>,
  which can take on the values "none", "copy", "link", and "move".
  Initially, it has the value "none". It is updated by the user agent
  as described in the steps below.</p>

  <p>User agents must, as soon as the drag operation is initiated and
  every 350ms (&plusmn;200ms) thereafter for as long as the drag
  operation is ongoing, <a href=#queue-a-task>queue a task</a> to perform the
  following steps in sequence:</p>

  <ol><li>

    <p>If the user agent is still performing the previous iteration of
    the sequence (if any) when the next iteration becomes due, the
    user agent must not execute the overdue iteration, effectively
    "skipping missed frames" of the drag-and-drop operation.</p>

   </li>

   <li>

    <p>The user agent must fire a <code title=event-drag><a href=#event-drag>drag</a></code>
    event at the <a href=#source-node>source node</a>. If this event is canceled,
    the user agent must set the <a href=#current-drag-operation>current drag operation</a> to
    none (no drag operation).</p>

   </li>

   <li>

    <p>Next, if the <code title=event-drag><a href=#event-drag>drag</a></code> event was not
    canceled and the user has not ended the drag-and-drop operation,
    the user agent must check the state of the drag-and-drop
    operation, as follows:</p>

    <ol><li>

      <p>First, if the user is indicating a different <a href=#immediate-user-selection>immediate
      user selection</a> than during the last iteration (or if this
      is the first iteration), and if this <a href=#immediate-user-selection>immediate user
      selection</a> is not the same as the <a href=#current-target-element>current target
      element</a>, then the <a href=#current-target-element>current target element</a> must
      be updated, as follows:</p>

      <dl class=switch><dt>If the new <a href=#immediate-user-selection>immediate user selection</a> is null, or
       is in a non-DOM document or application</dt>

       <dd><p>The user agent must set the <a href=#current-target-element>current target
       element</a> to the same value.</dd>

       <dt>Otherwise</dt>

       <dd>

        <p>The user agent must fire a <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event at the
        <a href=#immediate-user-selection>immediate user selection</a>.</p>

        <p>If the event is canceled, then the <a href=#current-target-element>current target
        element</a> must be set to the <a href=#immediate-user-selection>immediate user
        selection</a>.</p>

        <p>Otherwise, the user agent must act as follows:</p>

        <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text
         field (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code>
         element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code>
         attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
         <a href=#editable>editable</a> element</dt>

         <dd><p>The <a href=#current-target-element>current target element</a> must be set to
         the <a href=#immediate-user-selection>immediate user selection</a> anyway.</dd>

         <dt>If the <a href=#current-target-element>current target element</a> is
         <a href=#the-body-element>the body element</a></dt>

         <dd><p>The <a href=#current-target-element>current target element</a> is left
         unchanged.</dd>

         <dt>Otherwise</dt>

         <dd><p>The user agent must fire a <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event at <a href=#the-body-element>the
         body element</a>, and the <a href=#current-target-element>current target
         element</a> must be set to <a href=#the-body-element>the body element</a>,
         regardless of whether that event was canceled or not. (If
         <a href=#the-body-element>the body element</a> is null, then the <a href=#current-target-element>current
         target element</a> would be set to null too in this case,
         it wouldn't be set to the <code><a href=#document>Document</a></code>
         object.)</dd>

        </dl></dd>

      </dl></li>

     <li>

      <p>If the previous step caused the <a href=#current-target-element>current target
      element</a> to change, and if the previous target element was
      not null or a part of a non-DOM document, the user agent must fire
      a <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event at the
      previous target element.</p>

     </li>

     <li>

      <p>If the <a href=#current-target-element>current target element</a> is a DOM element,
      the user agent must fire a <code title=event-dragover><a href=#event-dragover>dragover</a></code> event at this <a href=#current-target-element>current
      target element</a>.</p>

      <p>If the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event is
      not canceled, the user agent must act as follows:</p>

      <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
       (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
       whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
       the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
       <a href=#editable>editable</a> element</dt>

       <dd><p>The user agent must set the <a href=#current-drag-operation>current drag
       operation</a> to either "copy" or "move", as appropriate
       given the platform conventions.</dd>

       <dt>Otherwise</dt>

       <dd><p>The user agent must reset the <a href=#current-drag-operation>current drag
       operation</a> to "none".</dd>

      </dl><p>Otherwise (if the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event <em>is</em>
      canceled), the <a href=#current-drag-operation>current drag operation</a> must be set
      based on the values the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> and
      <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
      attributes of the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
      had after the event was handled, as per the following table:</p>

      <table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
         <th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
         <th>Drag operation</th>
        </thead><tr><td><code title="">uninitialized</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, or <code title="">all</code></td>
        <td><code title="">copy</code></td>
        <td>"copy"</td>
       <tr><td><code title="">uninitialized</code>, <code title="">link</code>, <code title="">copyLink</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
        <td><code title="">link</code></td>
        <td>"link"</td>
       <tr><td><code title="">uninitialized</code>, <code title="">move</code>, <code title="">copyMove</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
        <td><code title="">move</code></td>
        <td>"move"</td>
       <tr><td colspan=2>Any other case</td>
        <td>"none"</td>
       </table><p>Then, regardless of whether the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event was canceled or
      not, the drag feedback (e.g. the mouse cursor) must be updated
      to match the <a href=#current-drag-operation>current drag operation</a>, as
      follows:</p>

      <table><thead><tr><th>Drag operation</th>
         <th>Feedback</th>
        </thead><tr><td>"copy"</td>
        <td>Data will be copied if dropped here.</td>
       <tr><td>"link"</td>
        <td>Data will be linked if dropped here.</td>
       <tr><td>"move"</td>
        <td>Data will be moved if dropped here.</td>
       <tr><td>"none"</td>
        <td>No operation allowed, dropping here will cancel the drag-and-drop operation.</td>
       </table></li>

     <li>

      <p>Otherwise, if the <a href=#current-target-element>current target element</a> is not a
      DOM element, the user agent must use platform-specific mechanisms
      to determine what drag operation is being performed (none, copy,
      link, or move). This sets the <em>current drag operation</em>.</p>

     </li>

    </ol></li>

   <li>

    <p>Otherwise, if the user ended the drag-and-drop operation (e.g.
    by releasing the mouse button in a mouse-driven drag-and-drop
    interface), or if the <code title=event-drag><a href=#event-drag>drag</a></code> event
    was canceled, then this will be the last iteration. The user agent
    must execute the following steps, then stop looping.</p>

    <ol><li>

      <p>If the <a href=#current-drag-operation>current drag operation</a> is none (no drag
      operation), or, if the user ended the drag-and-drop operation by
      canceling it (e.g. by hitting the <kbd>Escape</kbd> key), or if
      the <a href=#current-target-element>current target element</a> is null, then the drag
      operation failed. If the <a href=#current-target-element>current target element</a> is
      a DOM element, the user agent must fire a <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event at it; otherwise,
      if it is not null, it must use platform-specific conventions for
      drag cancellation.</p>

     </li>

     <li>

      <p>Otherwise, the drag operation was as success. If the
      <a href=#current-target-element>current target element</a> is a DOM element, the user
      agent must fire a <code title=event-drop><a href=#event-drop>drop</a></code> event at
      it; otherwise, it must use platform-specific conventions for
      indicating a drop.</p>

      <p>When the target is a DOM element, the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
      of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
      must be given the value representing the <a href=#current-drag-operation>current drag
      operation</a> (<code title="">copy</code>, <code title="">link</code>, or <code title="">move</code>), and the
      object must be set up so that the <code title=dom-DataTransfer-getData><a href=#dom-datatransfer-getdata>getData()</a></code> method will
      return the data that was added during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event, and the <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> attribute will
      return a <code>FileList</code> object with any files that were
      dragged.</p>

      <p>If the event is canceled, the <a href=#current-drag-operation>current drag
      operation</a> must be set to the value of the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
      of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object as
      it stood after the event was handled.</p>

      <p>Otherwise, the event is not canceled, and the user agent must
      perform the event's default action, which depends on the exact
      target as follows:</p>

      <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
       (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
       whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
       the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
       <a href=#editable>editable</a> element</dt>

       <dd>The user agent must insert the data associated with the
       <code>text/plain</code> format, if any, into the text field or
       <a href=#editable>editable</a> element in a manner consistent with
       platform-specific conventions (e.g. inserting it at the current
       mouse cursor position, or inserting it at the end of the
       field).</dd>

       <dt>Otherwise</dt>

       <dd>Reset the <a href=#current-drag-operation>current drag operation</a> to
       "none".</dd>

      </dl></li>

     <li>

      <p>Finally, the user agent must fire a <code title=event-dragend><a href=#event-dragend>dragend</a></code> event at the <a href=#source-node>source
      node</a>, with the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
      of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
      being set to the value corresponding to the <a href=#current-drag-operation>current drag
      operation</a>.</p>

      <p class=note>The <a href=#current-drag-operation>current drag operation</a> can
      change during the processing of the <code title=event-drop><a href=#event-drop>drop</a></code> event, if one was fired.</p>

      <p>The event is not cancelable. After the event has been
      handled, the user agent must act as follows:</p>

      <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
       (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
       whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
       the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state), and
       a <code title=event-drop><a href=#event-drop>drop</a></code> event was fired in the
       previous step, and the <a href=#current-drag-operation>current drag operation</a> is
       "move", and the source of the drag-and-drop operation is a
       selection in the DOM</dt>

       <dd>The user agent should delete the range representing the
       dragged selection from the DOM.</dd>

       <dt>If the <a href=#current-target-element>current target element</a> is a text field
       (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
       whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
       the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state), and
       a <code title=event-drop><a href=#event-drop>drop</a></code> event was fired in the
       previous step, and the <a href=#current-drag-operation>current drag operation</a> is
       "move", and the source of the drag-and-drop operation is a
       selection in a text field</dt>

       <dd>The user agent should delete the dragged selection from the
       relevant text field.</dd>

       <dt>Otherwise</dt>

       <dd>The event has no default action.</dd>

      </dl></li>

    </ol></li>

  </ol></div>


  <div class=impl>

  <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.9.4.1 </span>When the drag-and-drop operation starts or ends in another
  document</h5>

  <p>The model described above is independent of which
  <code><a href=#document>Document</a></code> object the nodes involved are from; the events
  must be fired as described above and the rest of the processing
  model must be followed as described above, irrespective of how many
  documents are involved in the operation.</p>

  </div>



  <div class=impl>

  <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.9.4.2 </span>When the drag-and-drop operation starts or ends in another
  application</h5>

  <p>If the drag is initiated in another application, the <a href=#source-node>source
  node</a> is not a DOM node, and the user agent must use
  platform-specific conventions instead when the requirements above
  involve the source node. User agents in this situation must act as
  if the dragged data had been added to the <code><a href=#datatransfer>DataTransfer</a></code>
  object when the drag started, even though no <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event was actually fired;
  user agents must similarly use platform-specific conventions when
  deciding on what drag feedback to use.</p>

  <p>All the format strings must be <a href=#converted-to-ascii-lowercase>converted to ASCII
  lowercase</a>. If the platform conventions do not use <a href=#mime-type title="MIME type">MIME types</a> to label the dragged data, the
  user agent must map the types to MIME types first.</p>

  <p>If a drag is started in a document but ends in another
  application, then the user agent must instead replace the parts of
  the processing model relating to handling the <em>target</em>
  according to platform-specific conventions.</p>

  <p>In any case, scripts running in the context of the document must
  not be able to distinguish the case of a drag-and-drop operation
  being started or ended in another application from the case of a
  drag-and-drop operation being started or ended in another document
  from another domain.</p>

  </div>


  <h4 id=the-draggable-attribute><span class=secno>8.9.5 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>

  <p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute set. The
  <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> attribute is an
  <a href=#enumerated-attribute>enumerated attribute</a>. It has three states. The first
  state is <i>true</i> and it has the keyword <code title="">true</code>. The second state is <i>false</i> and it has
  the keyword <code title="">false</code>. The third state is
  <i>auto</i>; it has no keywords but it is the <i>missing value
  default</i>.</p>

  <p>The <i>true</i> state means the element is draggable; the
  <i>false</i> state means that it is not. The <i>auto</i> state
  uses the default behavior of the user agent.</p>

  <dl class=domintro><dt><var title="">element</var> . <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns true if the element is draggable; otherwise, returns
    false.</p>

    <p>Can be set, to override the default and set the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-draggable title=dom-draggable><code>draggable</code></dfn> IDL
  attribute, whose value depends on the content attribute's in the way
  described below, controls whether or not the element is
  draggable. Generally, only text selections are draggable, but
  elements whose <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL
  attribute is true become draggable as well.</p>

  <p>If an element's <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
  content attribute has the state <i>true</i>, the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute must return
  true.</p>

  <p>Otherwise, if the element's <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute has the
  state <i>false</i>, the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute must return
  false.</p>

  <p>Otherwise, the element's <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute has the
  state <i>auto</i>. If the element is an <code><a href=#the-img-element>img</a></code> element,
  or, if the element is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute, the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute must return
  true.</p>

  <p>Otherwise, the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> DOM
  must return false.</p>

  <p>If the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute
  is set to the value false, the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute must be
  set to the literal value <code title="">false</code>. If the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute is set to the
  value true, the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
  content attribute must be set to the literal value <code title="">true</code>.</p>

  </div>


<!--
  <h4>Copy and paste</h4>

  <p>Copy-and-paste is a form of drag-and-drop: the "copy" part is
  equivalent to dragging content to another application (the
  "clipboard"), and the "paste" part is equivalent to dragging content
  <em>from</em> another application.</p>

  <p>Select-and-paste (a model used by mouse operations in the X
  Window System) is equivalent to a drag-and-drop operation where the
  source is the selection.</p>


  <div class="impl">

  <h5>Copy to clipboard</h5>

  <p>When the user invokes a copy operation, the user agent must act
  as if the user had invoked a drag on the current selection. If the
  drag-and-drop operation initiates, then the user agent must act as
  if the user had indicated (as the <span>immediate user
  selection</span>) a hypothetical application representing the
  clipboard. Then, the user agent must act as if the user had ended
  the drag-and-drop operation without canceling it. If the
  drag-and-drop operation didn't get canceled, the user agent should
  then follow the relevant platform-specific conventions for copy
  operations (e.g. updating the clipboard).</p>

  <p>The events involved in this process are the <code
  title="event-dragstart">dragstart</code>, <code
  title="event-drag">drag</code>, and <code
  title="event-dragend">dragend</code> events.</p>


  <h5>Cut to clipboard</h5>

  <p>When the user invokes a cut operation, the user agent must act as
  if the user had invoked a copy operation (see the previous section),
  followed, if the copy was completed successfully, by <a
  href="#contenteditable-delete">a selection delete operation</a>.</p>

  <p>The events involved in this process are the <code
  title="event-dragstart">dragstart</code>, <code
  title="event-drag">drag</code>, and <code
  title="event-dragend">dragend</code> events.</p>


  <h5>Paste from clipboard</h5>

  <p>When the user invokes a clipboard paste operation, the user agent
  must act as if the user had invoked a drag on a hypothetical
  application representing the clipboard, setting the data associated
  with the drag as the content on the clipboard (in whatever formats
  are available).</p>

  <p>Then, the user agent must act as if the user had indicated (as
  the <span>immediate user selection</span>) the element with the
  keyboard focus, and then ended the drag-and-drop operation without
  canceling it.</p>

  <p>The events involved in this process are the <code
  title="event-dragenter">dragenter</code>, <code
  title="event-dragover">dragover</code>, <code
  title="event-dragleave">dragleave</code>, and <code
  title="event-drop">drop</code> events.</p>


  <h5>Paste from selection</h5>

  <p>When the user invokes a selection paste operation, the user agent
  must act as if the user had invoked a drag on the current selection,
  then indicated (as the <span>immediate user selection</span>) the
  element with the keyboard focus, and then ended the drag-and-drop
  operation without canceling it.</p>

  <p>All the drag-and-drop events can be involved in this process.</p>

  </div>
-->


  <div class=impl>

  <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.9.6 </span>Security risks in the drag-and-drop model</h4>

  <p>User agents must not make the data added to the
  <code><a href=#datatransfer>DataTransfer</a></code> object during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event available to scripts
  until the <code title=event-drop><a href=#event-drop>drop</a></code> event, because
  otherwise, if a user were to drag sensitive information from one
  document to a second document, crossing a hostile third document in
  the process, the hostile document could intercept the data.</p>

  <p>For the same reason, user agents must consider a drop to be
  successful only if the user specifically ended the drag operation
  &mdash; if any scripts end the drag operation, it must be considered
  unsuccessful (canceled) and the <code title=event-drop><a href=#event-drop>drop</a></code>
  event must not be fired.</p>

  <p>User agents should take care to not start drag-and-drop
  operations in response to script actions. For example, in a
  mouse-and-window environment, if a script moves a window while the
  user has his mouse button depressed, the UA would not consider that
  to start a drag. This is important because otherwise UAs could cause
  data to be dragged from sensitive sources and dropped into hostile
  documents without the user's consent.</p>

  </div>


  <h3 id=undo><span class=secno>8.10 </span><dfn>Undo history</dfn></h3>

  <div class=impl>

  <h4 id=definitions-2><span class=secno>8.10.1 </span>Definitions</h4>

  <p>The user agent must associate an <dfn id=undo-transaction-history>undo transaction
  history</dfn> with each <code><a href=#htmldocument>HTMLDocument</a></code> object.</p>

  <p>The <a href=#undo-transaction-history>undo transaction history</a> is a list of
  entries. The entries are of two types: <a href=#dom-changes>DOM changes</a> and
  <a href=#undo-object title="undo object">undo objects</a>.</p>

  <p>Each <dfn id=dom-changes>DOM changes</dfn> entry in the <a href=#undo-transaction-history>undo transaction
  history</a> consists of batches of one or more of the
  following:</p>

  <ul><li>Changes to the content attributes of an <code><a href=#element>Element</a></code>
   node.</li>

   <li>Changes to the DOM hierarchy of nodes that are descendants of
   the <code><a href=#htmldocument>HTMLDocument</a></code> object (<code title=dom-Node-parentNode><a href=#dom-node-parentnode>parentNode</a></code>, <code title=dom-Node-childNodes><a href=#dom-node-childnodes>childNodes</a></code>).</li>

   <li>Changes to internal state, such as a form control's <a href=#concept-fe-value title=concept-fe-value>value</a> or <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
   flag</a>.</li>

  </ul><p><dfn id=undo-object>Undo object</dfn> entries consist of objects representing
  state that scripts running in the document are managing. For
  example, a Web mail application could use an <a href=#undo-object>undo
  object</a> to keep track of the fact that a user has moved an
  e-mail to a particular folder, so that the user can undo the
  action and have the e-mail return to its former location.</p>

  <p>Broadly speaking, <a href=#dom-changes>DOM changes</a> entries are handled by
  the UA in response to user edits of form controls and <a href=#editing-host title="editing host">editing hosts</a> on the page, and
  <a href=#undo-object>undo object</a> entries are handled by script in response
  to higher-level user actions (such as interactions with server-side
  state, or in the implementation of a drawing tool).</p>

  </div>


  <h4 id=the-undomanager-interface><span class=secno>8.10.2 </span>The <code><a href=#undomanager>UndoManager</a></code> interface</h4>

  <p>To manage <a href=#undo-object>undo object</a> entries in the <a href=#undo-transaction-history>undo
  transaction history</a>, the <code><a href=#undomanager>UndoManager</a></code>
  interface can be used:</p>

  <pre class=idl>interface <dfn id=undomanager>UndoManager</dfn> {
  readonly attribute unsigned long <a href=#dom-undomanager-length title=dom-UndoManager-length>length</a>;
  getter any <a href=#dom-undomanager-item title=dom-UndoManager-item>item</a>(in unsigned long index);
  readonly attribute unsigned long <a href=#dom-undomanager-position title=dom-UndoManager-position>position</a>;
  unsigned long <a href=#dom-undomanager-add title=dom-UndoManager-add>add</a>(in any data, in DOMString title);
  void <a href=#dom-undomanager-remove title=dom-UndoManager-remove>remove</a>(in unsigned long index);
  void <a href=#dom-undomanager-clearundo title=dom-UndoManager-clearUndo>clearUndo</a>();
  void <a href=#dom-undomanager-clearredo title=dom-UndoManager-clearRedo>clearRedo</a>();
};</pre>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-undoManager><a href=#dom-undomanager>undoManager</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#undomanager>UndoManager</a></code> object.</p>

   </dd>

   <dt><var title="">undoManager</var> . <code title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></code></dt>
   <dd>

    <p>Returns the number of entries in the undo history.</p>

   </dd>

   <dt><var title="">data</var> = <var title="">undoManager</var> . <code title=dom-UndoManager-item><a href=#dom-undomanager-item>item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">undoManager</var>[<var title="">index</var>]</dt>
   <dd>

    <p>Returns the entry with index <var title="">index</var> in the undo history.</p>

    <p>Returns null if <var title="">index</var> is out of range.</p>

   </dd>

   <dt><var title="">undoManager</var> . <code title=dom-UndoManager-position><a href=#dom-undomanager-position>position</a></code></dt>
   <dd>

    <p>Returns the number of the current entry in the undo history. (Entries at and past this point are <em>redo</em> entries.)</p>

   </dd>

   <dt><var title="">undoManager</var> . <code title=dom-UndoManager-add><a href=#dom-undomanager-add>add</a></code>(<var title="">data</var>, <var title="">title</var>)</dt>
   <dd>

    <p>Adds the specified entry to the undo history.</p>

   </dd>

   <dt><var title="">undoManager</var> . <code title=dom-UndoManager-remove><a href=#dom-undomanager-remove>remove</a></code>(<var title="">index</var>)</dt>
   <dd>

    <p>Removes the specified entry to the undo history.</p>

    <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the given index is out of range.</p>

   </dd>

   <dt><var title="">undoManager</var> . <code title=dom-UndoManager-clearUndo><a href=#dom-undomanager-clearundo>clearUndo</a></code>()</dt>
   <dd>

    <p>Removes all entries before the current position in the undo history.</p>

   </dd>

   <dt><var title="">undoManager</var> . <code title=dom-UndoManager-clearRedo><a href=#dom-undomanager-clearredo>clearRedo</a></code>()</dt>
   <dd>

    <p>Removes all entries at and after the current position in the undo history.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-undomanager title=dom-undoManager><code>undoManager</code></dfn>
  attribute of the <code><a href=#window>Window</a></code> interface must return the
  object implementing the <code><a href=#undomanager>UndoManager</a></code> interface for that
  <code><a href=#window>Window</a></code> object's associated
  <code><a href=#htmldocument>HTMLDocument</a></code> object.</p>

  <p><code><a href=#undomanager>UndoManager</a></code> objects represent their document's
  <a href=#undo-transaction-history>undo transaction history</a>. Only <a href=#undo-object>undo object</a>
  entries are visible with this API, but this does not mean that
  <a href=#dom-changes>DOM changes</a> entries are absent from the <a href=#undo-transaction-history>undo
  transaction history</a>.</p>

  <p>The <dfn id=dom-undomanager-length title=dom-UndoManager-length><code>length</code></dfn>
  attribute must return the number of <a href=#undo-object>undo object</a> entries
  in the <a href=#undo-transaction-history>undo transaction history</a>. This is the <var title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></var>.</p>

  <p>The object's <span>indices of the supported indexed
  properties</span> are the numbers in the range zero to <span title=""><var title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></var>-1</span>, unless the
  <var title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></var> is zero, in which
  case there are no <span>supported indexed properties</span>.</p>

  <p>The <dfn id=dom-undomanager-item title=dom-UndoManager-item><code>item(<var title="">n</var>)</code></dfn> method must return the <var title="">n</var>th <a href=#undo-object>undo object</a> entry in the <a href=#undo-transaction-history>undo
  transaction history</a>, if there is one, or null otherwise.</p>

  <p>The <a href=#undo-transaction-history>undo transaction history</a> has a <dfn id=undo-position title="undo
  position">current position</dfn>. This is the position between two
  entries in the <a href=#undo-transaction-history>undo transaction history</a>'s list where
  the previous entry represents what needs to happen if the user
  invokes the "undo" command (the "undo" side, lower numbers), and the
  next entry represents what needs to happen if the user invokes the
  "redo" command (the "redo" side, higher numbers).</p>

  <p>The <dfn id=dom-undomanager-position title=dom-UndoManager-position><code>position</code></dfn>
  attribute must return the index of the <a href=#undo-object>undo object</a>
  entry nearest to the <a href=#undo-position>undo position</a>, on the "redo"
  side. If there are no <a href=#undo-object>undo object</a> entries on the "redo"
  side, then the attribute must return the same as the <code title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></code> attribute. If there are
  no <a href=#undo-object>undo object</a> entries on the "undo" side of the
  <a href=#undo-position>undo position</a>, the <code title=dom-UndoManager-position><a href=#dom-undomanager-position>position</a></code> attribute returns
  zero.</p>

  <p class=note>Since the <a href=#undo-transaction-history>undo transaction history</a>
  contains both <a href=#undo-object>undo object</a> entries and <a href=#dom-changes>DOM
  changes</a> entries, but the <code title=dom-UndoManager-position><a href=#dom-undomanager-position>position</a></code> attribute only
  returns indices relative to <a href=#undo-object>undo object</a> entries, it is
  possible for several "undo" or "redo" actions to be performed
  without the value of the <code title=dom-UndoManager-position><a href=#dom-undomanager-position>position</a></code> attribute
  changing.</p>

  <p>The <dfn id=dom-undomanager-add title=dom-UndoManager-add><code>add(<var title="">data</var>,
  <var title="">title</var>)</code></dfn> method's behavior depends on the
  current state. Normally, it must insert the <var title="">data</var> object
  passed as an argument into the <a href=#undo-transaction-history>undo transaction history</a>
  immediately before the <a href=#undo-position>undo position</a>, optionally
  remembering the given <var title="">title</var> to use in the UI. If the
  method is called <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>during an undo
  operation</a>, however, the object must instead be added
  immediately <em>after</em> the <a href=#undo-position>undo position</a>.</p>

  <p>If the method is called and there is neither <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>an undo operation in progress</a> nor <a href=#redo:-moving-forward-in-the-undo-transaction-history title=do-redo>a redo operation in progress</a> then any entries
  in the <a href=#undo-transaction-history>undo transaction history</a> after the <a href=#undo-position>undo
  position</a> must be removed (as if <code title=dom-UndoManager-clearRedo><a href=#dom-undomanager-clearredo>clearRedo()</a></code> had been
  called).</p>

  <p>The <dfn id=dom-undomanager-remove title=dom-UndoManager-remove><code>remove(<var title="">index</var>)</code></dfn> method must remove the <a href=#undo-object>undo
  object</a> entry with the specified <var title="">index</var>. If
  the index is less than zero or greater than or equal to <code title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></code> then the method must
  raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. <a href=#dom-changes>DOM
  changes</a> entries are unaffected by this method.</p>

  <p>The <dfn id=dom-undomanager-clearundo title=dom-UndoManager-clearUndo><code>clearUndo()</code></dfn>
  method must remove all entries in the <a href=#undo-transaction-history>undo transaction
  history</a> before the <a href=#undo-position>undo position</a>, be they
  <a href=#dom-changes>DOM changes</a> entries or <a href=#undo-object>undo object</a>
  entries.</p>

  <p>The <dfn id=dom-undomanager-clearredo title=dom-UndoManager-clearRedo><code>clearRedo()</code></dfn>
  method must remove all entries in the <a href=#undo-transaction-history>undo transaction
  history</a> after the <a href=#undo-position>undo position</a>, be they
  <a href=#dom-changes>DOM changes</a> entries or <a href=#undo-object>undo object</a>
  entries.</p>

  </div>


  <div class=impl>

  <h4 id=undo:-moving-back-in-the-undo-transaction-history><span class=secno>8.10.3 </span><dfn title=do-undo>Undo: moving back in the undo transaction history</dfn></h4>

  <p>When the user invokes an undo operation, or when the <code title=dom-document-execCommand><a href=#execCommand>execCommand()</a></code> method is
  called with the <code title=command-undo><a href=#command-undo>undo</a></code> command, the
  user agent must perform an undo operation.</p>

  <p>If the <a href=#undo-position>undo position</a> is at the start of the
  <a href=#undo-transaction-history>undo transaction history</a>, then the user agent must do
  nothing.</p>

  <p>If the entry immediately before the <a href=#undo-position>undo position</a> is
  a <a href=#dom-changes>DOM changes</a> entry, then the user agent must remove
  that <a href=#dom-changes>DOM changes</a> entry, reverse the DOM changes that
  were listed in that entry, and, if the changes were reversed with no
  problems, add a new <a href=#dom-changes>DOM changes</a> entry (consisting of
  the opposite of those DOM changes) to the <a href=#undo-transaction-history>undo transaction
  history</a> on the other side of the <a href=#undo-position>undo
  position</a>.</p>

  <p>If the DOM changes cannot be undone (e.g. because the DOM state
  is no longer consistent with the changes represented in the entry),
  then the user agent must simply remove the <a href=#dom-changes>DOM changes</a>
  entry, without doing anything else.</p>

  <p>If the entry immediately before the <a href=#undo-position>undo position</a> is
  an <a href=#undo-object>undo object</a> entry, then the user agent must first
  remove that <a href=#undo-object>undo object</a> entry from the <a href=#undo-transaction-history>undo
  transaction history</a>, and then must fire an <code title=event-undo><a href=#event-undo>undo</a></code> event at the <code><a href=#window>Window</a></code>
  object, using the <a href=#undo-object>undo object</a> entry's associated undo
  object as the event's data.</p>

  <p>Any calls to <code title=dom-undoManager-add><a href=#dom-undomanager-add>add()</a></code> while
  the event is being handled will be used to populate the redo
  history, and will then be used if the user invokes the "redo"
  command to undo his undo.</p>


  <h4 id=redo:-moving-forward-in-the-undo-transaction-history><span class=secno>8.10.4 </span><dfn title=do-redo>Redo: moving forward in the undo transaction history</dfn></h4>

  <p>When the user invokes a redo operation, or when the <code title=dom-document-execCommand><a href=#execCommand>execCommand()</a></code> method is
  called with the <code title=command-redo><a href=#command-redo>redo</a></code> command, the
  user agent must perform a redo operation.</p>

  <p>This is mostly the opposite of an <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>undo
  operation</a>, but the full definition is included here for
  completeness.</p>

  <p>If the <a href=#undo-position>undo position</a> is at the end of the <a href=#undo-transaction-history>undo
  transaction history</a>, then the user agent must do nothing.</p>

  <p>If the entry immediately after the <a href=#undo-position>undo position</a> is
  a <a href=#dom-changes>DOM changes</a> entry, then the user agent must remove
  that <a href=#dom-changes>DOM changes</a> entry, reverse the DOM changes that
  were listed in that entry, and, if the changes were reversed with no
  problems, add a new <a href=#dom-changes>DOM changes</a> entry (consisting of
  the opposite of those DOM changes) to the <a href=#undo-transaction-history>undo transaction
  history</a> on the other side of the <a href=#undo-position>undo
  position</a>.</p>

  <p>If the DOM changes cannot be redone (e.g. because the DOM state
  is no longer consistent with the changes represented in the entry),
  then the user agent must simply remove the <a href=#dom-changes>DOM changes</a>
  entry, without doing anything else.</p>

  <p>If the entry immediately after the <a href=#undo-position>undo position</a> is
  an <a href=#undo-object>undo object</a> entry, then the user agent must first
  remove that <a href=#undo-object>undo object</a> entry from the <a href=#undo-transaction-history>undo
  transaction history</a>, and then must fire a <code title=event-redo><a href=#event-redo>redo</a></code> event at the <code><a href=#window>Window</a></code>
  object, using the <a href=#undo-object>undo object</a> entry's associated undo
  object as the event's data.</p>

  </div>


  <h4 id=the-undomanagerevent-interface-and-the-undo-and-redo-events><span class=secno>8.10.5 </span>The <code><a href=#undomanagerevent>UndoManagerEvent</a></code> interface and the <code title=event-undo><a href=#event-undo>undo</a></code> and <code title=event-redo><a href=#event-redo>redo</a></code> events</h4>

  <pre class=idl>interface <dfn id=undomanagerevent>UndoManagerEvent</dfn> : <a href=#event>Event</a> {
  readonly attribute any <a href=#dom-undomanagerevent-data title=dom-UndoManagerEvent-data>data</a>;
  void <a href=#dom-undomanagerevent-initundomanagerevent title=dom-UndoManagerEvent-initUndoManagerEvent>initUndoManagerEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dataArg);
};</pre>

  <dl class=domintro><dt><var title="">event</var>  . <code title=dom-UndoManagerEvent-data><a href=#dom-undomanagerevent-data>data</a></code></dt>

   <dd>

    <p>Returns the data that was passed to the <code title=dom-undomanager-add><a href=#dom-undomanager-add>add()</a></code> method.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-undomanagerevent-initundomanagerevent title=dom-UndoManagerEvent-initUndoManagerEvent><code>initUndoManagerEvent()</code></dfn>
  method must initialize the event in a manner analogous to the
  similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

  <p>The <dfn id=dom-undomanagerevent-data title=dom-UndoManagerEvent-data><code>data</code></dfn>
  attribute represents the <a href=#undo-object>undo object</a> for the event.</p>

  <p>The <dfn id=event-undo title=event-undo><code>undo</code></dfn> and <dfn id=event-redo title=event-redo><code>redo</code></dfn> events do not bubble,
  cannot be canceled, and have no default action. When the user agent
  fires one of these events it must use the
  <code><a href=#undomanagerevent>UndoManagerEvent</a></code> interface, with the <code title=dom-UndoManagerEvent-data><a href=#dom-undomanagerevent-data>data</a></code> field containing the
  relevant <a href=#undo-object>undo object</a>.</p>

  </div>


  <div class=impl>

  <h4 id=implementation-notes><span class=secno>8.10.6 </span>Implementation notes</h4>

  <p>How user agents present the above conceptual model to the user is
  not defined. The undo interface could be a filtered view of the
  <a href=#undo-transaction-history>undo transaction history</a>, it could manipulate the
  <a href=#undo-transaction-history>undo transaction history</a> in ways not described above,
  and so forth. For example, it is possible to design a UA that
  appears to have separate <a href=#undo-transaction-history title="undo transaction history">undo
  transaction histories</a> for each form control; similarly, it is
  possible to design systems where the user has access to more undo
  information than is present in the official (as described above)
  <a href=#undo-transaction-history>undo transaction history</a> (such as providing a
  tree-based approach to document state). Such UI models should be
  based upon the single <a href=#undo-transaction-history>undo transaction history</a>
  described in this section, however, such that to a script there is
  no detectable difference.</p>

  </div>





  <h3 id=editing-apis><span class=secno>8.11 </span>Editing APIs</h3>

  <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-execCommand><a href=#execCommand>execCommand</a></code>(<var title="">commandId</var> [, <var title="">showUI</var> [, <var title="">value</var> ] ] )</dt>

   <dd>

    <p>Runs the action specified by the first argument, as described
    in the list below. The second and third arguments sometimes affect
    the action. (If they don't they are ignored.)</p>

   </dd>

   <dt><var title="">document</var> . <code title=dom-document-queryCommandEnabled><a href=#dom-document-querycommandenabled>queryCommandEnabled</a></code>(<var title="">commandId</var>)</dt>

   <dd>

    <p>Returns whether the given command is enabled, as described in the list below.</p>

   </dd>

   <dt><var title="">document</var> . <code title=dom-document-queryCommandIndeterm><a href=#dom-document-querycommandindeterm>queryCommandIndeterm</a></code>(<var title="">commandId</var>)</dt>

   <dd>

    <p>Returns whether the given command is indeterminate, as described in the list below.</p>

   </dd>

   <dt><var title="">document</var> . <code title=dom-document-queryCommandState><a href=#dom-document-querycommandstate>queryCommandState</a></code>(<var title="">commandId</var>)</dt>

   <dd>

    <p>Returns the state of the command, as described in the list below.</p>

   </dd>

   <dt><var title="">document</var> . <code title=dom-document-queryCommandSupported><a href=#dom-document-querycommandsupported>queryCommandSupported</a></code>(<var title="">commandId</var>)</dt>

   <dd>

    <p>Returns true if the command is supported; otherwise, returns false.</p>

   </dd>

   <dt><var title="">document</var> . <code title=dom-document-queryCommandValue><a href=#dom-document-querycommandvalue>queryCommandValue</a></code>(<var title="">commandId</var>)</dt>

   <dd>

    <p>Returns the value of the command, as described in the list below.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=execCommand title=dom-document-execCommand><code>execCommand(<var title="">commandId</var>, <var title="">showUI</var>, <var title="">value</var>)</code></dfn> method on the
  <code><a href=#htmldocument>HTMLDocument</a></code> interface allows scripts to perform
  actions on the <a href=#the-selection title="the selection">current selection</a>
  or at the current caret position. Generally, these commands would be
  used to implement editor UI, for example having a "delete" button on
  a toolbar.</p>

  <p>There are three variants to this method, with one, two, and three
  arguments respectively. The <var title="">showUI</var> and <var title="">value</var> parameters, even if specified, are ignored
  except where otherwise stated.</p>

  <p>When <code title=dom-document-execCommand><a href=#execCommand>execCommand()</a></code>
  is invoked, the user agent must follow the following steps:</p>

  <ol><li>If the given <var title="">commandId</var> maps to an entry in
   the list below whose "Enabled When" entry has a condition that is
   currently false, do nothing; abort these steps.</li>

   <li>Otherwise, execute the "Action" listed below for the given <var title="">commandId</var>.</li>

  </ol></div>

  <p>A document is <dfn id=ready-for-editing-host-commands>ready for editing host commands</dfn> if it
  has a selection that is entirely within an <a href=#editing-host>editing
  host</a>, or if it has no selection but its caret is inside an
  <a href=#editing-host>editing host</a>.</p>

  <div class=impl>

  <p>The <dfn id=dom-document-querycommandenabled title=dom-document-queryCommandEnabled><code>queryCommandEnabled(<var title="">commandId</var>)</code></dfn> method, when invoked, must
  return true if the condition listed below under "Enabled When" for
  the given <var title="">commandId</var> is true, and false
  otherwise.</p>

  <p>The <dfn id=dom-document-querycommandindeterm title=dom-document-queryCommandIndeterm><code>queryCommandIndeterm(<var title="">commandId</var>)</code></dfn> method, when invoked, must
  return true if the condition listed below under "Indeterminate When"
  for the given <var title="">commandId</var> is true, and false
  otherwise.</p>

  <p>The <dfn id=dom-document-querycommandstate title=dom-document-queryCommandState><code>queryCommandState(<var title="">commandId</var>)</code></dfn> method, when invoked, must
  return the value expressed below under "State" for the given <var title="">commandId</var>.</p>

  <p>The <dfn id=dom-document-querycommandsupported title=dom-document-queryCommandSupported><code>queryCommandSupported(<var title="">commandId</var>)</code></dfn> method, when invoked, must
  return true if the given <var title="">commandId</var> is in the
  list below, and false otherwise.</p>

  <p>The <dfn id=dom-document-querycommandvalue title=dom-document-queryCommandValue><code>queryCommandValue(<var title="">commandId</var>)</code></dfn> method, when invoked, must
  return the value expressed below under "Value" for the given <var title="">commandId</var>.</p>

  </div>

  <p>The possible values for <var title="">commandId</var>, and their
  corresponding meanings, are as follows. <span class=impl>These
  values must be compared to the argument in an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> manner.</span></p>

  <dl><dt><dfn id=command-bold title=command-bold><code>bold</code></dfn></dt>
   <dd><strong>Summary</strong>: Toggles whether the selection is bold.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   semantics</a> of the <em><code><a href=#the-b-element>b</a></code></em> element (or, again,
   unwrapped, or have that semantic inserted or removed, as defined by
   the UA).</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: True if the selection, or the caret, if
   there is no selection, is, or is contained within, a
   <code><a href=#the-b-element>b</a></code> element. False otherwise.</dd>
   <dd><strong>Value</strong>: The string "<code title="">true</code>"
   if the expression given for the "State" above is true, the string
   "<code title="">false</code>" otherwise.</dd>

   <dt><dfn id=command-createlink title=command-createLink><code>createLink</code></dfn></dt>
   <dd><strong>Summary</strong>: Toggles whether the selection is a
   link or not. If the second argument is true, and a link is to be
   added, the user agent will ask the user for the address. Otherwise,
   the third argument will be used as the address.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   semantics</a> of the <em><code><a href=#the-a-element>a</a></code></em> element (or, again,
   unwrapped, or have that semantic inserted or removed, as defined by
   the UA). If the user agent creates an <code><a href=#the-a-element>a</a></code> element or
   modifies an existing <code><a href=#the-a-element>a</a></code> element, then if the <var title="">showUI</var> argument is present and has the value false,
   then the value of the <var title="">value</var> argument must be
   used as the <a href=#url>URL</a> of the link. Otherwise, the user agent
   should prompt the user for the URL of the link.</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-delete title=command-delete><code>delete</code></dfn></dt>
   <dd><strong>Summary</strong>: Deletes the selection or the
   character before the cursor.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had performed <a href=#contenteditable-delete>a backspace
   operation</a>.</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-formatblock title=command-formatBlock><code>formatBlock</code></dfn></dt>
   <dd><strong>Summary</strong>: Wraps the selection in the element
   given by the second argument. If the second argument doesn't
   specify an element that is a <dfn id=formatblock-candidate><code title="">formatBlock</code>
   candidate</dfn>, does nothing.</dd>
   <dd class=impl>
    <p><strong>Action</strong>: The user agent must run the following
    steps:</p>
    <ol><li><p>If the <var title="">value</var> argument wasn't
     specified, abort these steps without doing anything.</li>
     <li><p>If the <var title="">value</var> argument has a leading
     U+003C LESS-THAN SIGN character (&lt;) and a trailing U+003E
     GREATER-THAN SIGN character (&gt;), then remove the first and last
     characters from <var title="">value</var>.</li>
     <li>
      <p>If <var title="">value</var> is (now) an <a href=#ascii-case-insensitive>ASCII
      case-insensitive</a> match for the tag name of an element
      defined by this specification that is defined to be a
      <a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>, then,
      for every position in the selection, take the nearest
      <a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>
      ancestor element of that position that contains only
      <a href=#phrasing-content>phrasing content</a>, and, if that element is
      <a href=#editable>editable</a>, is not an <a href=#editing-host>editing host</a>, and
      has a parent element whose content model allows that parent to
      contain any <a href=#flow-content>flow content</a>, replace it with an
      element in the HTML namespace whose name is <var title="">value</var>, and move all the children that were in it
      to the new element, and copy all the attributes that were on it
      to the new element.</p>
      <p>If there is no selection, then, where in the description
      above refers to the selection, the user agent must act as if the
      selection was an empty range (with just one position) at the
      caret position.</p>
     </li>
    </ol></dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-forwarddelete title=command-forwardDelete><code>forwardDelete</code></dfn></dt>
   <dd><strong>Summary</strong>: Deletes the selection or the
   character after the cursor.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had performed <a href=#contenteditable-delete>a forward delete
   operation</a>.</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-insertimage title=command-insertImage><code>insertImage</code></dfn></dt>
   <dd><strong>Summary</strong>: Toggles whether the selection is an
   image or not. If the second argument is true, and an image is to be
   added, the user agent will ask the user for the address. Otherwise,
   the third argument will be used as the address.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act
   as if the user had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   semantics</a> of the <em><code><a href=#the-img-element>img</a></code></em> element (or, again,
   unwrapped, or have that semantic inserted or removed, as defined by
   the UA). If the user agent creates an <code><a href=#the-img-element>img</a></code> element or
   modifies an existing <code><a href=#the-img-element>img</a></code> element, then if the <var title="">showUI</var> argument is present and has the value false,
   then the value of the <var title="">value</var> argument must be
   used as the <a href=#url>URL</a> of the image. Otherwise, the user
   agent should prompt the user for the URL of the image.</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-inserthtml title=command-insertHTML><code>insertHTML</code></dfn></dt>
   <dd><strong>Summary</strong>: Replaces the selection with the value
   of the third argument parsed as HTML.</dd>
   <dd class=impl>
    <p><strong>Action</strong>: The user agent must run the following
    steps:</p>
    <ol><li><p>If the document is an <a href=#xml-documents title="XML documents">XML
     document</a>, then throw an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code>
     exception and abort these steps.</li><!-- v2 support XML? -->
     <li><p>If the <var title="">value</var> argument wasn't
     specified, abort these steps without doing anything.</li>
     <li><p>If there is a selection, act as if the user had requested
     that <a href=#contenteditable-delete>the selection be
     deleted</a>.</li>
     <li><p>Invoke the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing algorithm</a>
     with an arbitrary orphan <code><a href=#the-body-element-0>body</a></code> element owned by the
     same <code><a href=#document>Document</a></code> as the <i><a href=#context>context</a></i> element and with
     the <var title="">value</var> argument as <i><a href=#the-input-element>input</a></i>.</li>
     <li><p>Insert the nodes returned by the previous step into the
     document at the location of the caret, firing any mutation events
     as appropriate.</li>
    </ol></dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-insertlinebreak title=command-insertLineBreak><code>insertLineBreak</code></dfn></dt>
   <dd><strong>Summary</strong>: Inserts a line break.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had <a href=#contenteditable-br>requested a line
   separator</a>.</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-insertorderedlist title=command-insertOrderedList><code>insertOrderedList</code></dfn></dt>
   <dd><strong>Summary</strong>: Toggles whether the selection is an ordered list.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   semantics</a> of the <code><a href=#the-ol-element>ol</a></code> element (or unwrapped, or, if
   there is no selection, have that semantic inserted or removed
   &mdash; the exact behavior is UA-defined).</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-insertunorderedlist title=command-insertUnorderedList><code>insertUnorderedList</code></dfn></dt>
   <dd><strong>Summary</strong>: Toggles whether the selection is an unordered list.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   semantics</a> of the <code><a href=#the-ul-element>ul</a></code> element (or unwrapped, or, if
   there is no selection, have that semantic inserted or removed
   &mdash; the exact behavior is UA-defined).</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-insertparagraph title=command-insertParagraph><code>insertParagraph</code></dfn></dt>
   <dd><strong>Summary</strong>: Inserts a paragraph break.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had performed a <a href=#contenteditable-breakBlock>break
   block</a> editing action.</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-inserttext title=command-insertText><code>insertText</code></dfn></dt>
   <dd><strong>Summary</strong>: Inserts the text given in the third parameter.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had <a href=#contenteditable-insertText>inserted text</a>
   corresponding to the <var title="">value</var> parameter.</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-italic title=command-italic><code>italic</code></dfn></dt>
   <dd><strong>Summary</strong>: Toggles whether the selection is italic.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   semantics</a> of the <em><code><a href=#the-i-element>i</a></code></em> element (or, again,
   unwrapped, or have that semantic inserted or removed, as defined by
   the UA).</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: True if the selection, or the caret, if
   there is no selection, is, or is contained within, a
   <code><a href=#the-i-element>i</a></code> element. False otherwise.</dd>
   <dd><strong>Value</strong>: The string "<code title="">true</code>"
   if the expression given for the "State" above is true, the string
   "<code title="">false</code>" otherwise.</dd>

   <dt><dfn id=command-redo title=command-redo><code>redo</code></dfn></dt>
   <dd><strong>Summary</strong>: Acts as if the user had requested a redo.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must <a href=#redo:-moving-forward-in-the-undo-transaction-history title=do-redo>move forward one step</a> in its <a href=#undo-transaction-history>undo
   transaction history</a>, restoring the associated state. If the
   <a href=#undo-position>undo position</a> is at the end of the <a href=#undo-transaction-history>undo
   transaction history</a>, the user agent must do nothing. See the
   <a href=#undo>undo history</a>.</dd>
   <dd><strong>Enabled When</strong>: The <a href=#undo-position>undo position</a>
   is not at the end of the <a href=#undo-transaction-history>undo transaction
   history</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-selectall title=command-selectAll><code>selectAll</code></dfn></dt>
   <dd><strong>Summary</strong>: Selects all the editable content.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must change the
   selection so that all the content in the currently focused
   <a href=#editing-host>editing host</a> is selected. If no <a href=#editing-host>editing
   host</a> is focused, then the content of the entire document
   must be selected.</dd>
   <dd><strong>Enabled When</strong>: Always.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-subscript title=command-subscript><code>subscript</code></dfn></dt>
   <dd><strong>Summary</strong>: Toggles whether the selection is subscripted.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   semantics</a> of the <em><code><a href=#the-sub-and-sup-elements>sub</a></code></em> element (or, again,
   unwrapped, or have that semantic inserted or removed, as defined by
   the UA).</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: True if the selection, or the caret, if
   there is no selection, is, or is contained within, a
   <code><a href=#the-sub-and-sup-elements>sub</a></code> element. False otherwise.</dd>
   <dd><strong>Value</strong>: The string "<code title="">true</code>"
   if the expression given for the "State" above is true, the string
   "<code title="">false</code>" otherwise.</dd>

   <dt><dfn id=command-superscript title=command-superscript><code>superscript</code></dfn></dt>
   <dd><strong>Summary</strong>: Toggles whether the selection is superscripted.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   semantics</a> of the <code><a href=#the-sub-and-sup-elements>sup</a></code> element (or unwrapped, or, if
   there is no selection, have that semantic inserted or removed
   &mdash; the exact behavior is UA-defined).</dd>
   <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   editing host commands</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: True if the selection, or the caret, if
   there is no selection, is, or is contained within, a
   <code><a href=#the-sub-and-sup-elements>sup</a></code> element. False otherwise.</dd>
   <dd><strong>Value</strong>: The string "<code title="">true</code>"
   if the expression given for the "State" above is true, the string
   "<code title="">false</code>" otherwise.</dd>

   <dt><dfn id=command-undo title=command-undo><code>undo</code></dfn></dt>
   <dd><strong>Summary</strong>: Acts as if the user had requested an undo.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>move back one step</a> in its <a href=#undo-transaction-history>undo
   transaction history</a>, restoring the associated state. If the
   <a href=#undo-position>undo position</a> is at the start of the <a href=#undo-transaction-history>undo
   transaction history</a>, the user agent must do nothing. See the
   <a href=#undo>undo history</a>.</dd>
   <dd><strong>Enabled When</strong>: The <a href=#undo-position>undo position</a>
   is not at the start of the <a href=#undo-transaction-history>undo transaction
   history</a>.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-unlink title=command-unlink><code>unlink</code></dfn></dt>
   <dd><strong>Summary</strong>: Removes all links from the selection.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must remove all
   <code><a href=#the-a-element>a</a></code> elements that have <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes and that are partially
   or completely included in the current selection.</dd>
   <dd><strong>Enabled When</strong>: The document has a selection
   that is entirely within an <a href=#editing-host>editing host</a> and that
   contains (either partially or completely) at least one
   <code><a href=#the-a-element>a</a></code> element that has an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt><dfn id=command-unselect title=command-unselect><code>unselect</code></dfn></dt>
   <dd><strong>Summary</strong>: Unselects everything.</dd>
   <dd class=impl><strong>Action</strong>: The user agent must change the
   selection so that nothing is selected.</dd>
   <dd><strong>Enabled When</strong>: Always.</dd>
   <dd><strong>Indeterminate When</strong>: Never.</dd>
   <dd><strong>State</strong>: Always false.</dd>
   <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

   <dt class=impl><code><var title="">vendorID</var>-<var title="">customCommandID</var></code></dt>
   <dd class=impl><strong>Action</strong>: User agents may implement
   vendor-specific extensions to this API. Vendor-specific extensions
   to the list of commands should use the syntax <code><var title="">vendorID</var>-<var title="">customCommandID</var></code>
   so as to prevent clashes between extensions from different vendors
   and future additions to this specification.</dd>
   <dd class=impl><strong>Enabled When</strong>: UA-defined.</dd>
   <dd class=impl><strong>Indeterminate When</strong>: UA-defined.</dd>
   <dd class=impl><strong>State</strong>: UA-defined.</dd>
   <dd class=impl><strong>Value</strong>: UA-defined.</dd>

   <dt class=impl>Anything else</dt>
   <dd class=impl><strong>Action</strong>: User agents must do nothing.</dd>
   <dd class=impl><strong>Enabled When</strong>: Never.</dd>
   <dd class=impl><strong>Indeterminate When</strong>: Never.</dd>
   <dd class=impl><strong>State</strong>: Always false.</dd>
   <dd class=impl><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>

  </dl><!--
v2 (well, really v0):
 "forecolor", "hilitecolor", "fontname", "fontsize", "justifyleft",
 "justifycenter", "justifyright", "justifyfull", "indent", "outdent"
--><h2 id=comms><span class=secno>9 </span>Communication</h2>

  <div data-component="Web Messaging (editor: Ian Hickson)">



  <h3 id=event-definitions-0><span class=secno>9.1 </span>Event definitions</h3>

  <p>Messages in <span>server-sent events</span>, <span>Web
  sockets</span>, <a href=#web-messaging>cross-document messaging</a>, and
  <a href=#channel-messaging>channel messaging</a> use the <dfn id=event-message title=event-message><code>message</code></dfn> event.
  
  <a href=#refsEVENTSOURCE>[EVENTSOURCE]</a>
  <a href=#refsWEBSOCKET>[WEBSOCKET]</a>
  
  </p>

  <p>The following interface is defined for this event:</p>

  <pre class=idl>interface <dfn id=messageevent>MessageEvent</dfn> : <a href=#event>Event</a> {
  readonly attribute any <a href=#dom-messageevent-data title=dom-MessageEvent-data>data</a>;
  readonly attribute DOMString <a href=#dom-messageevent-origin title=dom-MessageEvent-origin>origin</a>;
  readonly attribute DOMString <a href=#dom-messageevent-lasteventid title=dom-MessageEvent-lastEventId>lastEventId</a>;
  readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-messageevent-source title=dom-MessageEvent-source>source</a>;
  readonly attribute <a href=#messageportarray>MessagePortArray</a> <a href=#dom-messageevent-ports title=dom-MessageEvent-ports>ports</a>;
  void <a href=#dom-messageevent-initmessageevent title=dom-MessageEvent-initMessageEvent>initMessageEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dataArg, in DOMString originArg, in DOMString lastEventIdArg, in <a href=#windowproxy>WindowProxy</a> sourceArg, in <a href=#messageportarray>MessagePortArray</a> portsArg);
};</pre>

  <dl class=domintro><dt><var title="">event</var> . <code title=dom-MessageEvent-data><a href=#dom-messageevent-data>data</a></code></dt>

   <dd>

    <p>Returns the data of the message.</p>

   </dd>

   <dt><var title="">event</var> . <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code></dt>

   <dd>

    <p>Returns the origin of the message, for <span>server-sent
    events</span> and <a href=#web-messaging>cross-document messaging</a>.</p>

   </dd>

   <dt><var title="">event</var> . <code title=dom-MessageEvent-lastEventId><a href=#dom-messageevent-lasteventid>lastEventId</a></code></dt>

   <dd>

    <p>Returns the last event ID, for <span>server-sent
    events</span>.</p>

   </dd>

   <dt><var title="">event</var> . <code title=dom-MessageEvent-source><a href=#dom-messageevent-source>source</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#windowproxy>WindowProxy</a></code> of the source window, for
    <a href=#web-messaging>cross-document messaging</a>.</p>

   </dd>

   <dt><var title="">event</var> . <code title=dom-MessageEvent-ports><a href=#dom-messageevent-ports>ports</a></code></dt>

   <dd>

    <p>Returns the <code><a href=#messageportarray>MessagePortArray</a></code> sent with the
    message, for <a href=#web-messaging>cross-document messaging</a> and
    <a href=#channel-messaging>channel messaging</a>.</p>

   </dd>

  </dl><div class=impl>

  <p>The <dfn id=dom-messageevent-initmessageevent title=dom-MessageEvent-initMessageEvent><code>initMessageEvent()</code></dfn>
  method must initialize the event in a manner analogous to the
  similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

  <p>The <dfn id=dom-messageevent-data title=dom-MessageEvent-data><code>data</code></dfn>
  attribute represents the message being sent.</p>

  <p>The <dfn id=dom-messageevent-origin title=dom-MessageEvent-origin><code>origin</code></dfn> attribute
  represents, in <span>server-sent events</span> and
  <a href=#web-messaging>cross-document messaging</a>, the <a href=#origin>origin</a> of
  the document that sent the message (typically the scheme, hostname,
  and port of the document, but not its path or fragment
  identifier).</p>

  <p>The <dfn id=dom-messageevent-lasteventid title=dom-MessageEvent-lastEventId><code>lastEventId</code></dfn>
  attribute represents, in <span>server-sent events</span>, the <span title=concept-event-stream-last-event-id>last event ID
  string</span> of the event source.</p>

  <p>The <dfn id=dom-messageevent-source title=dom-MessageEvent-source><code>source</code></dfn> attribute
  represents, in <a href=#web-messaging>cross-document messaging</a>, the
  <code><a href=#windowproxy>WindowProxy</a></code> of the <a href=#browsing-context>browsing context</a> of the
  <code><a href=#window>Window</a></code> object from which the message came.</p>

  <p>The <dfn id=dom-messageevent-ports title=dom-MessageEvent-ports><code>ports</code></dfn>
  attribute represents, in <a href=#web-messaging>cross-document messaging</a> and
  <a href=#channel-messaging>channel messaging</a> the <code><a href=#messageportarray>MessagePortArray</a></code>
  being sent, if any.</p>

  <p>Except where otherwise specified, when the user agent creates and
  dispatches a <code title=event-message><a href=#event-message>message</a></code> event in the
  algorithms described in the following sections, the <code title=dom-MessageEvent-lastEventId><a href=#dom-messageevent-lasteventid>lastEventId</a></code> attribute
  must be the empty string, the <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code> attribute must be the
  empty string, the <code title=dom-MessageEvent-source><a href=#dom-messageevent-source>source</a></code> attribute must be
  null, and the <code title=dom-MessageEvent-ports><a href=#dom-messageevent-ports>ports</a></code>
  attribute must be null.</p>

  </div>


  </div><!--data-component-->




  <div data-component="Web Messaging (editor: Ian Hickson)">

  

  <h3 id=web-messaging><span class=secno>9.2 </span><dfn id=crossDocumentMessages>Cross-document messaging</dfn></h3>

  <p>Web browsers, for security and privacy reasons, prevent documents
  in different domains from affecting each other; that is, cross-site
  scripting is disallowed.</p>

  <p>While this is an important security feature, it prevents pages
  from different domains from communicating even when those pages are
  not hostile. This section introduces a messaging system that allows
  documents to communicate with each other regardless of their source
  domain, in a way designed to not enable cross-site scripting
  attacks.</p>

  <div class=impl>

  <p>The <a href=#task-source>task source</a> for the <a href=#concept-task title=concept-task>tasks</a> in <a href=#web-messaging>cross-document
  messaging</a> is the <dfn id=posted-message-task-source>posted message task source</dfn>.</p>

  </div>


  <h4 id=introduction-6><span class=secno>9.2.1 </span>Introduction</h4>

  <p><i>This section is non-normative.</i></p>

  <div class=example>

   <p>For example, if document A contains an <code><a href=#the-iframe-element>iframe</a></code>
   element that contains document B, and script in document A calls
   <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> on the
   <code><a href=#window>Window</a></code> object of document B, then a message event will
   be fired on that object, marked as originating from the
   <code><a href=#window>Window</a></code> of document A. The script in document A might
   look like:</p>

   <pre>var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');</pre>

   <p>To register an event handler for incoming events, the script
   would use <code title="">addEventListener()</code> (or similar
   mechanisms). For example, the script in document B might look
   like:</p>

   <pre>window.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}</pre>

   <p>This script first checks the domain is the expected domain, and
   then looks at the message, which it either displays to the user, or
   responds to by sending a message back to the document which sent
   the message in the first place.</p>

  </div>


  <h4 id=security-postmsg><span class=secno>9.2.2 </span>Security</h4>

  <div class=impl>

  <h5 id=authors><span class=secno>9.2.2.1 </span>Authors</h5>

  </div>

  <p class=warning id=security-4>Use of this API requires extra
  care to protect users from hostile entities abusing a site for their
  own purposes.</p>

  <p>Authors should check the <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code> attribute to ensure
  that messages are only accepted from domains that they expect to
  receive messages from. Otherwise, bugs in the author's message
  handling code could be exploited by hostile sites.</p>

  <p>Furthermore, even after checking the <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code> attribute, authors
  should also check that the data in question is of the expected
  format. Otherwise, if the source of the event has been attacked
  using a cross-site scripting flaw, further unchecked processing of
  information sent using the <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> method could
  result in the attack being propagated into the receiver.</p>

  <p>Authors should not use the wildcard keyword (*) in the <var title="">targetOrigin</var> argument in messages that contain any
  confidential information, as otherwise there is no way to guarantee
  that the message is only delivered to the recipient to which it was
  intended.</p>


  <div class=impl>

  <h5 id=user-agents><span class=secno>9.2.2.2 </span>User agents</h5>

  <p>The integrity of this API is based on the inability for scripts
  of one <a href=#origin>origin</a> to post arbitrary events (using <code title="">dispatchEvent()</code> or otherwise) to objects in other
  origins (those that are not the <a href=#same-origin title="same
  origin">same</a>).</p>

  <p class=note>Implementors are urged to take extra care in the
  implementation of this feature. It allows authors to transmit
  information from one domain to another domain, which is normally
  disallowed for security reasons. It also requires that UAs be
  careful to allow access to certain properties but not others.</p>

  </div>


  <h4 id=posting-messages><span class=secno>9.2.3 </span>Posting messages</h4>

  <dl class=domintro><dt><var title="">window</var> . <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage</a></code>(<var title="">message</var>, <var title="">targetOrigin</var> [, <var title="">ports</var> ])</dt>

   <dd>

    <p>Posts a message, optionally with an array of ports, to the
    given window.</p>

    <p>If the origin of the target window doesn't match the given
    origin, the message is discarded, to avoid information leakage. To
    send the message to the target regardless of origin, set the
    target origin to "<code title="">*</code>". To restrict the
    message to same-origin targets only, without needing to explicitly
    state the origin, set the target origin to "<code title="">/</code>".</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the <var title="">ports</var> array is not null and it contains either null
    entries or duplicate ports.</p>

   </dd>

  </dl><div class=impl>

  <p>When a script invokes the <dfn id=dom-window-postmessage title=dom-window-postMessage><code>postMessage(<var title="">message</var>, <var title="">targetOrigin</var>, <var title="">ports</var>)</code></dfn> method (with two or three
  arguments) on a <code><a href=#window>Window</a></code> object, the user agent must
  follow these steps:

  <ol><li>

    <p>If the value of the <var title="">targetOrigin</var> argument
    is neither a single U+002A ASTERISK character (*), a single U+002F
    SOLIDUS character (/), nor an <a href=#absolute-url>absolute URL</a> with a
    <code title=url-host-specific><a href=#url-host-specific>&lt;host-specific&gt;</a></code>
    component that is either empty or a single U+002F SOLIDUS
    character (/), then throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and
    abort the overall set of steps.</p>

   </li>

   <li>

    <p>Let <var title="">message clone</var> be the result of
    obtaining a <a href=#structured-clone>structured clone</a> of the <var title="">message</var> argument. If this throws an exception, then
    throw that exception and abort these steps.</p>

   </li>

   <li>

    <p>If the <var title="">ports</var> argument is present but either
    any of the entries in <var title="">ports</var> are null, or any
    <code><a href=#messageport>MessagePort</a></code> object is listed in <var title="">ports</var> more than once, or any of the
    <code><a href=#messageport>MessagePort</a></code> objects listed in <var title="">ports</var> have already been cloned once before, then
    throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
    steps.</p>

   </li>

   <li>

    <p>Let <var title="">new ports</var> be an empty array.</p>

    <p>If the <var title="">ports</var> argument is present, then for
    each port in <var title="">ports</var> in turn, obtain a new port
    by <a href=#clone-a-port title="clone a port">cloning</a> the port with the
    <code><a href=#window>Window</a></code> object on which the method was invoked as the
    owner of the clone, and append the clone to the <var title="">new
    ports</var> array.</p>

    <p class=note>If the original <var title="">ports</var> argument
    was omitted or empty, then the <var title="">new ports</var> array
    will be empty.</p>

   </li>

   <li>

    <p>Return from the <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> method, but
    asynchronously continue running these steps.</p>

   </li>

   <li>

    <p>If the <var title="">targetOrigin</var> argument is a single
    literal U+002F SOLIDUS character (/), and the
    <code><a href=#document>Document</a></code> of the <code><a href=#window>Window</a></code> object on which
    the method was invoked does not have the <a href=#same-origin>same origin</a>
    as the <a href=#entry-script>entry script</a>'s <a href="#script's-document" title="script's
    document">document</a>, then abort these steps silently.</p>

    <p>Otherwise, if the <var title="">targetOrigin</var> argument is
    an <a href=#absolute-url>absolute URL</a>, and the <code><a href=#document>Document</a></code> of the
    <code><a href=#window>Window</a></code> object on which the method was invoked does
    not have the <a href=#same-origin>same origin</a> as <var title="">targetOrigin</var>, then abort these steps silently.</p>

    <p>Otherwise, the <var title="">targetOrigin</var> argument is a
    single literal U+002A ASTERISK character (*), and no origin check
    is made.</p>

   </li>

   <li>

    <p>Create an event that uses the <code><a href=#messageevent>MessageEvent</a></code>
    interface, with the event name <code title=event-message><a href=#event-message>message</a></code>, which does not bubble, is
    not cancelable, and has no default action. The <code title=dom-MessageEvent-data><a href=#dom-messageevent-data>data</a></code> attribute must be set to
    the value of <var title="">message clone</var>, the <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code> attribute must be
    set to the <a href=#unicode-serialization-of-an-origin title="Unicode serialization of an
    origin">Unicode serialization</a> of the <a href=#origin>origin</a> of
    the script that invoked the method, the <code title=dom-MessageEvent-source><a href=#dom-messageevent-source>source</a></code> attribute must be
    set to the <a href="#script's-global-object">script's global object</a>'s
    <code><a href=#windowproxy>WindowProxy</a></code> object, and the <code title=dom-MessageEvent-ports><a href=#dom-messageevent-ports>ports</a></code> attribute must be set
    to the <var title="">new ports</var> array.</p> <!-- invariant:
    the global object is always a Window if the script can see this
    method -->

   </li>

   <li>

    <p><a href=#queue-a-task>Queue a task</a> to dispatch the event created in the
    previous step at the <code><a href=#window>Window</a></code> object on which the
    method was invoked. The <a href=#task-source>task source</a> for this <a href=#concept-task title=concept-task>task</a> is the <a href=#posted-message-task-source>posted message task
    source</a>.</p>

   </li>

  </ol></div>



  <h3 id=channel-messaging><span class=secno>9.3 </span><dfn>Channel messaging</dfn></h3>

  <h4 id=introduction-7><span class=secno>9.3.1 </span>Introduction</h4>

  <p><i>This section is non-normative.</i></p>

  <p>To enable independent pieces of code (e.g. running in different
  <a href=#browsing-context title="browsing context">browsing contexts</a>) to
  communicate directly, authors can use <a href=#channel-messaging>channel
  messaging</a>.</p>

  <p>Communication channels in this mechanisms are implemented as
  two-ways pipes, with a port at each end. Messages sent in one port
  are delivered at the other port, and vice-versa. Messages are
  asynchronous, and delivered as DOM events.</p>

  <p>To create a connection (two "entangled" ports), the <code title="">MessageChannel()</code> constructor is called:</p>

  <pre>var channel = new MessageChannel();</pre>

  <p>One of the ports is kept as the local port, and the other port is
  sent to the remote code, e.g. using <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code>:</p>

  <pre>otherWindow.postMessage('hello', 'http://example.com', [channel.port2]);</pre>

  <p>To send messages, the <code title=dom-MessagePort-postMessage><a href=#dom-messageport-postmessage>postMessage()</a></code> method on
  the port is used:</p>

  <pre>channel.port1.postMessage('hello');</pre>

  <p>To receive messages, one listens to <code title=event-message><a href=#event-message>message</a></code> events:</p>

  <pre>channel.port1.onmessage = handleMessage;
function handleMessage(event) {
  // message is in event.data
  // ...
}</pre>


  <h4 id=message-channels><span class=secno>9.3.2 </span>Message channels</h4>

  <pre class=idl>[<a href=#dom-messagechannel title=dom-MessageChannel>Constructor</a>]
interface <dfn id=messagechannel>MessageChannel</dfn> {
  readonly attribute <a href=#messageport>MessagePort</a> <a href=#dom-channel-port1 title=dom-channel-port1>port1</a>;
  readonly attribute <a href=#messageport>MessagePort</a> <a href=#dom-channel-port2 title=dom-channel-port2>port2</a>;
};</pre>

  <dl class=domintro><dt><var title="">channel</var> = new <code title=dom-MessageChannel><a href=#dom-messagechannel>MessageChannel</a></code>()</dt>

   <dd>

    <p>Returns a new <code><a href=#messagechannel>MessageChannel</a></code> object with two new <code><a href=#messageport>MessagePort</a></code> objects.</p>

   </dd>

   <dt><var title="">channel</var> . <code title=dom-MessageChannel-port1>port1</code></dt>

   <dd>

    <p>Returns the first <code><a href=#messageport>MessagePort</a></code> object.</p>

   </dd>

   <dt><var title="">channel</var> . <code title=dom-MessageChannel-port2>port2</code></dt>

   <dd>

    <p>Returns the second <code><a href=#messageport>MessagePort</a></code> object.</p>

   </dd>

  </dl><div class=impl>

  <p>When the <dfn id=dom-messagechannel title=dom-MessageChannel><code>MessageChannel()</code></dfn>
  constructor is called, it must run the following algorithm:</p>

  <ol><li><p><a href=#create-a-new-messageport-object>Create a new <code>MessagePort</code> object</a>
   owned by the <a href="#script's-global-object">script's global object</a>, and let <var title="">port1</var> be that object.</li>

   <li><p><a href=#create-a-new-messageport-object>Create a new <code>MessagePort</code> object</a>
   owned by the <a href="#script's-global-object">script's global object</a>, and let <var title="">port2</var> be that object.</li>

   <li><p><a href=#entangle>Entangle</a> the <var title="">port1</var> and <var title="">port2</var> objects.</li>

   <li><p>Instantiate a new <code><a href=#messagechannel>MessageChannel</a></code> object, and
   let <var title="">channel</var> be that object.</li>

   <li><p>Let the <code title=dom-channel-port1><a href=#dom-channel-port1>port1</a></code>
   attribute of the <var title="">channel</var> object be <var title="">port1</var>.</p>

   <li><p>Let the <code title=dom-channel-port2><a href=#dom-channel-port2>port2</a></code>
   attribute of the <var title="">channel</var> object be <var title="">port2</var>.</p>

   <li><p>Return <var title="">channel</var>.</li>

  </ol><p>This constructor must be visible when the <a href="#script's-global-object">script's global
  object</a> is either a <code><a href=#window>Window</a></code> object or an object
  implementing the <code>WorkerUtils</code> interface.</p>

  <p>The <dfn id=dom-channel-port1 title=dom-channel-port1><code>port1</code></dfn> and
  <dfn id=dom-channel-port2 title=dom-channel-port2><code>port2</code></dfn> attributes
  must return the values they were assigned when the
  <code><a href=#messagechannel>MessageChannel</a></code> object was created.</p>

  </div>



  <h4 id=message-ports><span class=secno>9.3.3 </span>Message ports</h4>

  <p>Each channel has two message ports. Data sent through one port is
  received by the other port, and vice versa.</p>

  <pre class=idl>typedef sequence&lt;MessagePort&gt; <dfn id=messageportarray>MessagePortArray</dfn>;

interface <dfn id=messageport>MessagePort</dfn> {
<!-- v2-onclose  readonly attribute boolean <span title="dom-MessagePort-active">active</span>;
-->  void <a href=#dom-messageport-postmessage title=dom-MessagePort-postMessage>postMessage</a>(in any message, in optional <a href=#messageportarray>MessagePortArray</a> ports);<!--
  <span>MessagePort</span> <span title="dom-MessagePort-startConversation">startConversation</span>(in any message);-->
  void <a href=#dom-messageport-start title=dom-MessagePort-start>start</a>();
  void <a href=#dom-messageport-close title=dom-MessagePort-close>close</a>();

  // event handlers
           attribute <a href=#function>Function</a> <a href=#handler-messageport-onmessage title=handler-MessagePort-onmessage>onmessage</a>;
};
<a href=#messageport>MessagePort</a> implements <a href=#eventtarget>EventTarget</a>;</pre>

  <dl class=domintro><!-- v2-onclose
   <dt><var title="">port</var> . <code title="dom-MessagePort-active">active</code></dt>

   <dd>

    <p>Returns true if the port is still active; otherwise, returns false.</p>

   </dd>
--><dt><var title="">port</var> . <code title=dom-MessagePort-poseMessage>postMessage</code>(<var title="">message</var> [, <var title="">ports</var>] )</dt>

   <dd>

    <p>Posts a message through the channel, optionally with the given
    ports.</p>

    <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the <var title="">ports</var> array is not null and it contains either null
    entries, duplicate ports, or the source or target port.</p>

   </dd>

   <dt><var title="">port</var> . <code title=dom-MessagePort-start><a href=#dom-messageport-start>start</a></code>()</dt>

   <dd>

    <p>Begins dispatching messages received on the port.</p>

   </dd>

   <dt><var title="">port</var> . <code title=dom-MessagePort-close><a href=#dom-messageport-close>close</a></code>()</dt>

   <dd>

    <p>Disconnects the port, so that it is no longer active.</p>

   </dd>

  </dl><div class=impl>

  <p>Each <code><a href=#messageport>MessagePort</a></code> object can be entangled with
  another (a symmetric relationship). Each <code><a href=#messageport>MessagePort</a></code>
  object also has a <a href=#task-source>task source</a> called the <dfn id=port-message-queue>port
  message queue</dfn>, initial empty. A <a href=#port-message-queue>port message
  queue</a> can be enabled or disabled, and is initially
  disabled. Once enabled, a port can never be disabled again (though
  messages in the queue can get moved to another queue or removed
  altogether, which has much the same effect).</p>

  <p>When the user agent is to <dfn id=create-a-new-messageport-object>create a new
  <code>MessagePort</code> object</dfn> owned by a <a href="#script's-global-object">script's
  global object</a> object <var title="">owner</var>, it must
  instantiate a new <code><a href=#messageport>MessagePort</a></code> object, and let its owner
  be <var title="">owner</var>.</p>

  <hr><p>When the user agent is to <dfn id=entangle>entangle</dfn> two
  <code><a href=#messageport>MessagePort</a></code> objects, it must run the following
  steps:</p>

  <ol><li>

    <p>If one of the ports is already entangled, then disentangle it
    and the port that it was entangled with.</p>

    <p class=note>If those two previously entangled ports were the
    two ports of a <code><a href=#messagechannel>MessageChannel</a></code> object, then that
    <code><a href=#messagechannel>MessageChannel</a></code> object no longer represents an actual
    channel: the two ports in that object are no longer entangled.</p>

   </li>

   <li><p>Associate the two ports to be entangled, so that they form
   the two parts of a new channel. (There is no
   <code><a href=#messagechannel>MessageChannel</a></code> object that represents this
   channel.)</li>

  </ol><hr><p>When the user agent is to <dfn id=clone-a-port>clone a port</dfn> <var title="">original port</var>, with the clone being owned by <var title="">owner</var>, it must run the following steps, which return
  a new <code><a href=#messageport>MessagePort</a></code> object. These steps must be run
  atomically.</p>

  <ol><li><p><a href=#create-a-new-messageport-object>Create a new <code>MessagePort</code> object</a>
   owned by <var title="">owner</var>, and let <var title="">new
   port</var> be that object.</li>

   <li><p>Move all the events in the <a href=#port-message-queue>port message queue</a>
   of <var title="">original port</var> to the <a href=#port-message-queue>port message
   queue</a> of <var title="">new port</var>, if any, leaving the
   <var title="">new port</var>'s <a href=#port-message-queue>port message queue</a> in
   its initial disabled state.</li>

   <li>

    <p>If the <var title="">original port</var> is entangled with
    another port, then run these substeps:</p>

    <ol><li><p>Let the <var title="">remote port</var> be the port with
     which the <var title="">original port</var> is entangled.</li>

     <li><p><a href=#entangle>Entangle</a> the <var title="">remote port</var>
     and <var title="">new port</var> objects. The <var title="">original port</var> object will be disentangled by this
     process.</li>

    </ol></li>

   <li><p>Return <var title="">new port</var>. It is the
   clone.</li>

  </ol><hr><!-- v2-onclose
  <p>The <dfn title="dom-MessagePort-active"><code>active</code></dfn>
  attribute must return true if the port is entangled, and false
  otherwise.</p>

  <hr>
--><p>The <dfn id=dom-messageport-postmessage title=dom-MessagePort-postMessage><code>postMessage()</code></dfn>
  method, when called on a port <var title="">source port</var>, must
  cause the user agent to run the following steps:</p>

  <ol><li><p>Let <var title="">target port</var> be the port with which
   <var title="">source port</var> is entangled, if any.</li>

   <li><p>If the method was called with a second argument <var title="">ports</var> and that argument isn't null, then, if any of
   the entries in <var title="">ports</var> are null, if any
   <code><a href=#messageport>MessagePort</a></code> object is listed in <var title="">ports</var> more than once, if any of the
   <code><a href=#messageport>MessagePort</a></code> objects listed in <var title="">ports</var> have already been cloned once before, or if
   any of the entries in <var title="">ports</var> are either the <var title="">source port</var> or the <var title="">target port</var>
   (if any), then throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
   exception.</li>

   <li><p>If there is no <var title="">target port</var> (i.e. if <var title="">source port</var> is not entangled), then abort these
   steps.</li>
   <!-- we don't raise an exception if there is no target port because
   this can happen at a moment's notice. we don't return false because
   if the port is _about_ to be closed, the message might not be
   listened for anyway. -->

   <li><p>Create an event that uses the <code><a href=#messageevent>MessageEvent</a></code>
   interface, with the name <code title=event-message><a href=#event-message>message</a></code>, which does not bubble, is not
   cancelable, and has no default action.</li>

   <li><p>Let <var title="">message</var> be the method's first
   argument.</li>

   <li><p>Let <var title="">message clone</var> be the result of
   obtaining a <a href=#structured-clone>structured clone</a> of <var title="">message</var>. If this throws an exception, then throw
   that exception and abort these steps.</li>

   <li><p>Let the <code title=dom-MessageEvent-data><a href=#dom-messageevent-data>data</a></code>
   attribute of the event have the value of <var title="">message
   clone</var>.</li>

   <li><p>If the method was called with a second argument <var title="">ports</var> and that argument isn't null, then run the
   following substeps:</p>

    <ol><li>

      <p>Let <var title="">new ports</var> be an empty array.</p>

      <p>For each port in <var title="">ports</var> in turn,
      obtain a new port by <a href=#clone-a-port title="clone a port">cloning</a>
      the port with the owner of the <var title="">target port</var>
      as the owner of the clone, and append the clone to the <var title="">new ports</var> array.</p>

      <p class=note>If the original <var title="">ports</var>
      array was empty, then the <var title="">new ports</var> array will
      also be empty.</p>

     </li>

     <li><p>Let the <code title=dom-MessageEvent-ports><a href=#dom-messageevent-ports>ports</a></code>
     attribute of the event be the <var title="">new ports</var>
     array.</li>

    </ol></li>

   <li><p>Add the event to the <a href=#port-message-queue>port message queue</a> of <var title="">target port</var>.</li>

  </ol><!--
  <hr>

  <p>The <dfn
  title="dom-MessagePort-startConversation"><code>startConversation(<var
  title="">message</var>)</code></dfn> method is a convenience method
  that simplifies create a new <code>MessageChannel</code> and
  invoking <code
  title="dom-MessagePort-postMessage">postMessage()</code> with one of
  the new ports. When invoked on a port <var title="">source
  port</var>, it must run the following steps:</p>

  <ol>

   <li><p>Let <var title="">message</var> be the method's first
   argument.</p></li>

   <li><p><span>Create a new <code>MessagePort</code> object</span>
   owned by the <span>script's global object</span>, and let <var
   title="">port1</var> be that object.</p></li>

   <li><p>If the <var title="">source port</var> is not entangled with
   another port, then return <var title="">port1</var> and abort these
   steps.</p></li>
   <!- - we don't raise an exception because this can happen moment's
   notice. we don't return null because then we'd end up with
   null derefs. better to just let the likely next postMessage call
   fall on the floor. - ->

   <li><p>Let <var title="">target port</var> be the port with which
   <var title="">source port</var> is entangled.</p></li>

   <li><p><span>Create a new <code>MessagePort</code> object</span>
   owned by the owner of the <var title="">target port</var>, and let
   <var title="">port2</var> be that object.</p></li>

   <li><p><span>Entangle</span> the <var title="">port1</var> and <var
   title="">port2</var> objects.</p></li>

   <li><p>Create an event that uses the <code>MessageEvent</code>
   interface, with the name <code
   title="event-message">message</code>, which does not bubble, is not
   cancelable, and has no default action.</p></li>

   <li><p>Let the <code title="dom-MessageEvent-data">data</code>
   attribute of the event have the value of <var
   title="">message</var>, the method's first argument.</p></li>

   <li><p>Let the <code
   title="dom-MessageEvent-ports">ports</code> attribute
   of the event be an array containing only <var
   title="">port2</var>.</p></li>

   <li><p>Return <var title="">port1</var> from the method, but
   continue with these steps.</p></li>

   <li><p>Add the event to the <span>port message queue</span> of <var
   title="">target port</var>.</p></li>

  </ol>
--><hr><p>The <dfn id=dom-messageport-start title=dom-MessagePort-start><code>start()</code></dfn>
  method must enable its port's <a href=#port-message-queue>port message queue</a>, if it
  is not already enabled.</p>

  <p>When a port's <a href=#port-message-queue>port message queue</a> is enabled, the
  <a href=#event-loop>event loop</a> must use it as one of its <a href=#task-source title="task
  source">task sources</a>.</p>

  <p class=note>If the <code><a href=#document>Document</a></code> of the port's event
  listeners' <a href="#script's-global-object" title="script's global object">global object</a>
  is not <a href=#fully-active>fully active</a>, then the messages are lost.</p>
  <!-- because of the jump-to-entry-point algorithm first step -->

  <hr><p>The <dfn id=dom-messageport-close title=dom-MessagePort-close><code>close()</code></dfn>
  method, when called on a port <var title="">local port</var> that is
  entangled with another port, must cause the user agents to
  disentangle the two ports. If the method is called on a port that is
  not entangled, then the method must do nothing.</p>

  <hr><p>The following are the <a href=#event-handlers>event handlers</a> (and their
  corresponding <a href=#event-handler-event-type title="event handler event type">event handler
  event types</a>) that must be supported, as IDL attributes, by
  all objects implementing the <code><a href=#messageport>MessagePort</a></code> interface:</p>

  <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn id=handler-messageport-onmessage title=handler-MessagePort-onmessage><code>onmessage</code></dfn> <td> <code title=event-message><a href=#event-message>message</a></code>
  </table><p>The first time a <code><a href=#messageport>MessagePort</a></code> object's <code title=handler-MessagePort-onmessage><a href=#handler-messageport-onmessage>onmessage</a></code> IDL attribute
  is set, the port's <a href=#port-message-queue>port message queue</a> must be enabled,
  as if the <code title=dom-MessagePort-start><a href=#dom-messageport-start>start()</a></code> method
  had been called.</p>

  </div>


  <h5 id=ports-and-garbage-collection><span class=secno>9.3.3.1 </span>Ports and garbage collection</h5>

  <div class=impl>

  <p>When a <code><a href=#messageport>MessagePort</a></code> object <var title="">o</var> is
  entangled, user agents must either act as if <var title="">o</var>'s
  entangled <code><a href=#messageport>MessagePort</a></code> object has a strong reference to
  <var title="">o</var>, or as if <var title="">o</var>'s owner has a
  strong reference to <var title="">o</var>.</p>

  <div class=note>

   <p>Thus, a message port can be received, given an event listener,
   and then forgotten, and so long as that event listener could
   receive a message, the channel will be maintained.</p>

   <p>Of course, if this was to occur on both sides of the channel,
   then both ports could be garbage collected, since they would not be
   reachable from live code, despite having a strong reference to each
   other.</p>

  </div>

  <p>Furthermore, a <code><a href=#messageport>MessagePort</a></code> object must not be
  garbage collected while there exists a message in a <a href=#task-queue>task
  queue</a> that is to be dispatched on that
  <code><a href=#messageport>MessagePort</a></code> object, or while the
  <code><a href=#messageport>MessagePort</a></code> object's <a href=#port-message-queue>port message queue</a> is
  open and there exists a <code title=event-message><a href=#event-message>message</a></code>
  event in that queue.</p>
  <!-- we might not need to explicitly say the first part if DOM
  Events is fixed to say that events on a task queue prevent GC -->

  <!-- ports in the ports attribute of a MessageEvent that isn't
  dispatched yet are safe because the MessageEvent is safe -->

  </div>

  <p class=note>Authors are strongly encouraged to explicitly close
  <code><a href=#messageport>MessagePort</a></code> objects to disentangle them, so that their
  resources can be recollected. Creating many <code><a href=#messageport>MessagePort</a></code>
  objects and discarding them without closing them can lead to high
  memory usage.</p>



  </div><!--data-component-->




  <h2 id=syntax><span class=secno>10 </span><dfn>The HTML syntax</dfn></h2>

  <p class=note>This section only describes the rules for resources
  labeled with an <a href=#html-mime-type>HTML MIME type</a>. Rules for XML resources
  are discussed in the section below entitled "<a href=#the-xhtml-syntax>The XHTML
  syntax</a>".</p>


  <h3 id=writing><span class=secno>10.1 </span>Writing HTML documents</h3>

  <div class=impl>

  <p><i>This section only applies to documents, authoring tools, and
  markup generators. In particular, it does not apply to conformance
  checkers; conformance checkers must use the requirements given in
  the next section ("parsing HTML documents").</i></p>

  </div>

  <p>Documents must consist of the following parts, in the given
  order:</p>

  <ol><li>Optionally, a single U+FEFF BYTE ORDER MARK (BOM) character.</li>

   <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   <a href=#space-character title="space character">space characters</a>.</li>

   <li>A <a href=#syntax-doctype title=syntax-doctype>DOCTYPE</a>.

   <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   <a href=#space-character title="space character">space characters</a>.</li>

   <li>The root element, in the form of an <code><a href=#the-html-element-0>html</a></code> <a href=#syntax-elements title=syntax-elements>element</a>.</li>

   <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   <a href=#space-character title="space character">space characters</a>.</li>

  </ol><p>The various types of content mentioned above are described in the
  next few sections.</p>

  <p>In addition, there are some restrictions on how <a href=#character-encoding-declaration title="character encoding declaration">character encoding
  declarations</a> are to be serialized, as discussed in the
  section on that topic.</p>

  <div class=note>

   <p>Space characters before the root <code><a href=#the-html-element-0>html</a></code> element, and
   space characters at the start of the <code><a href=#the-html-element-0>html</a></code> element and
   before the <code><a href=#the-head-element-0>head</a></code> element, will be dropped when the
   document is parsed; space characters <em>after</em> the root
   <code><a href=#the-html-element-0>html</a></code> element will be parsed as if they were at the end
   of the <code><a href=#the-body-element-0>body</a></code> element. Thus, space characters around the
   root element do not round-trip.</p>

   <p>It is suggested that newlines be inserted after the DOCTYPE,
   after any comments that are before the root element, after the
   <code><a href=#the-html-element-0>html</a></code> element's start tag (if it is not <a href=#syntax-tag-omission title=syntax-tag-omission>omitted</a>), and after any comments
   that are inside the <code><a href=#the-html-element-0>html</a></code> element but before the
   <code><a href=#the-head-element-0>head</a></code> element.</p>

  </div>

  <p>Many strings in the HTML syntax (e.g. the names of elements and
  their attributes) are case-insensitive, but only for characters in
  the ranges U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL
  LETTER Z) and U+0061 to U+007A (LATIN SMALL LETTER A to LATIN SMALL
  LETTER Z). For convenience, in this section this is just referred to
  as "case-insensitive".</p>


  <h4 id=the-doctype><span class=secno>10.1.1 </span>The DOCTYPE</h4>

  <p>A <dfn id=syntax-doctype title=syntax-doctype>DOCTYPE</dfn> is a <!-- mostly
  useless but nonetheless --> required preamble.</p>

  <p class=note>DOCTYPEs are required for legacy reasons. When
  omitted, browsers tend to use a different rendering mode that is
  incompatible with some specifications. Including the DOCTYPE in a
  document ensures that the browser makes a best-effort attempt at
  following the relevant specifications.</p>

  <p>A DOCTYPE must consist of the following characters, in this
  order:</p>

  <ol class=brief><li>A string that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">&lt;!DOCTYPE</code>".</li>
   <li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   <li>A string that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">HTML</code>".</li>
   <li>Optionally, a <a href=#doctype-legacy-string>DOCTYPE legacy string</a> or an <a href=#obsolete-permitted-doctype-string>obsolete permitted DOCTYPE string</a> (defined below).</li>
   <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
   <li>A U+003E GREATER-THAN SIGN character (&gt;).</li>
  </ol><p class=note>In other words, <code>&lt;!DOCTYPE HTML&gt;</code>,
  case-insensitively.</p>

  <hr><p>For the purposes of HTML generators that cannot output HTML
  markup with the short DOCTYPE "<code title="">&lt;!DOCTYPE
  HTML&gt;</code>", a <dfn id=doctype-legacy-string>DOCTYPE legacy string</dfn> may be inserted
  into the DOCTYPE (in the position defined above). This string must
  consist of:</p>

  <ol class=brief><li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   <li>A string that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">SYSTEM</code>".</li>
   <li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>quote mark</i>).</li>
   <li>The literal string "<code><a href=#about:legacy-compat>about:legacy-compat</a></code>".</li>
   <li>A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>quote mark</i>).</li>
  </ol><p class=note>In other words, <code>&lt;!DOCTYPE HTML SYSTEM
  "about:legacy-compat"&gt;</code> or <code>&lt;!DOCTYPE HTML SYSTEM
  'about:legacy-compat'&gt;</code>, case-insensitively except for the bit
  in single or double quotes.</p>

  <p>The <a href=#doctype-legacy-string>DOCTYPE legacy string</a> should not be used unless
  the document is generated from a system that cannot output the
  shorter string.</p>

  <hr><!-- see the parser section before changing this bit --><p>To help authors transition from HTML4 and XHTML1, an
  <dfn id=obsolete-permitted-doctype-string>obsolete permitted DOCTYPE string</dfn> can be inserted into
  the DOCTYPE (in the position defined above). This string must
  consist of:</p>

  <ol class=brief><li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   <li>A string that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">PUBLIC</code>".</li>
   <li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>first quote mark</i>).</li>
   <li>The string from one of the cells in the first column of the table below. The row to which this cell belongs is the <i>selected row</i>.</li>
   <li>A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>first quote mark</i>).</li>
   <li>If the cell in the second column of the <i>selected row</i> is not blank, one or more <a href=#space-character title="space character">space characters</a>.</li>
   <li>If the cell in the second column of the <i>selected row</i> is not blank, a U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>third quote mark</i>).</li>
   <li>If the cell in the second column of the <i>selected row</i> is not blank, the string from the cell in the second column of the <i>selected row</i>.</li>
   <li>If the cell in the second column of the <i>selected row</i> is not blank, a matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>third quote mark</i>).</li>
  </ol><table><caption>
    Allowed values for public and system identifiers in an <a href=#obsolete-permitted-doctype-string>obsolete permitted DOCTYPE string</a>.
   </caption>
   <thead><tr><th> Public identifier
     <th> System identifier
   <tbody><tr><td> <code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.0//EN</code>
     <td>
    <tr><td> <code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.0//EN</code>
     <td> <code title="">http://www.w3.org/TR/REC-html40/strict.dtd</code>
    <tr><td> <code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.01//EN</code>
     <td>
    <tr><td> <code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.01//EN</code>
     <td> <code title="">http://www.w3.org/TR/html4/strict.dtd</code>
    <tr><td> <code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN</code>
     <td> <code title="">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</code>
    <tr><td> <code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1//EN</code>
     <td> <code title="">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</code>
  </table><p>A <a href=#syntax-doctype title=syntax-doctype>DOCTYPE</a> containing an
  <a href=#obsolete-permitted-doctype-string>obsolete permitted DOCTYPE string</a> is an <dfn id=obsolete-permitted-doctype>obsolete
  permitted DOCTYPE</dfn>. Authors should not use <a href=#obsolete-permitted-doctype title="obsolete permitted DOCTYPE">obsolete permitted
  DOCTYPEs</a>, as they are unnecessarily long.</p>




  <h4 id=elements-0><span class=secno>10.1.2 </span>Elements</h4>

  <p>There are five different kinds of <dfn id=syntax-elements title=syntax-elements>elements</dfn>: <a href=#void-elements>void elements</a>,
  <a href=#raw-text-elements>raw text elements</a>, <a href=#rcdata-elements>RCDATA elements</a>,
  <a href=#foreign-elements>foreign elements</a>, and <a href=#normal-elements>normal elements</a>.</p>

  <dl><dt><dfn id=void-elements>Void elements</dfn></dt>

   <dd><code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-br-element>br</a></code>,
   <code><a href=#the-col-element>col</a></code>, <code><a href=#the-command>command</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
   <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#meta>meta</a></code>,
   <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code>,
   <code><a href=#the-wbr-element>wbr</a></code></dd>

   <dt><dfn id=raw-text-elements>Raw text elements</dfn></dt>

   <dd><code><a href=#script>script</a></code>, <code><a href=#the-style-element>style</a></code></dd> <!-- iframe and
   noscript don't count as raw text for syntax purposes -->

   <dt><dfn id=rcdata-elements>RCDATA elements</dfn></dt>

   <dd><code><a href=#the-textarea-element>textarea</a></code>, <code><a href=#the-title-element-0>title</a></code></dd>

   <dt><dfn id=foreign-elements>Foreign elements</dfn></dt>

   <dd>Elements from the <a href=#mathml-namespace>MathML namespace</a>
   and the <a href=#svg-namespace>SVG namespace</a>.</dd>

   <dt><dfn id=normal-elements>Normal elements</dfn></dt>

   <dd>All other allowed <a href=#html-elements>HTML elements</a> are normal
   elements.</dd>

  </dl><p><dfn id=syntax-tags title=syntax-tags>Tags</dfn> are used to delimit the start
  and end of elements in the markup. <a href=#raw-text-elements title="raw text
  elements">Raw text</a>, <a href=#rcdata-elements title="RCDATA
  elements">RCDATA</a>, and <a href=#normal-elements title="normal
  elements">normal</a> elements have a <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> to indicate where they
  begin, and an <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> to
  indicate where they end. The start and end tags of certain
  <a href=#normal-elements>normal elements</a> can be <a href=#syntax-tag-omission title=syntax-tag-omission>omitted</a>, as described
  later. Those that cannot be omitted must not be omitted. <a href=#void-elements>Void
  elements</a> only have a start tag; end tags must not be
  specified for <a href=#void-elements>void elements</a>. <a href=#foreign-elements>Foreign
  elements</a> must either have a start tag and an end tag, or a
  start tag that is marked as self-closing, in which case they must
  not have an end tag.</p>

  <p>The contents of the element must be placed between just after the
  start tag (which <a href=#syntax-tag-omission title=syntax-tag-omission>might be implied,
  in certain cases</a>) and just before the end tag (which again,
  <a href=#syntax-tag-omission title=syntax-tag-omission>might be implied in certain
  cases</a>). The exact allowed contents of each individual element
  depends on the content model of that element, as described earlier
  in this specification. Elements must not contain content that their
  content model disallows. In addition to the restrictions placed on
  the contents by those content models, however, the five types of
  elements have additional <em>syntactic</em> requirements.</p>

  <p><a href=#void-elements>Void elements</a> can't have any contents (since there's
  no end tag, no content can be put between the start tag and the end
  tag).</p>

  <p><a href=#raw-text-elements>Raw text elements</a> can have <a href=#syntax-text title=syntax-text>text</a>, though it has <a href=#cdata-rcdata-restrictions>restrictions</a> described
  below.</p>

  <p><a href=#rcdata-elements>RCDATA elements</a> can have <a href=#syntax-text title=syntax-text>text</a> and <a href=#syntax-charref title=syntax-charref>character references</a>, but the text
  must not contain an <a href=#syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous ampersand</a>.
  There are also <a href=#cdata-rcdata-restrictions>further
  restrictions</a> described below.</p>

  <p><a href=#foreign-elements>Foreign elements</a> whose start tag is marked as
  self-closing can't have any contents (since, again, as there's no
  end tag, no content can be put between the start tag and the end
  tag). <a href=#foreign-elements>Foreign elements</a> whose start tag is <em>not</em>
  marked as self-closing can have <a href=#syntax-text title=syntax-text>text</a>, <a href=#syntax-charref title=syntax-charref>character references</a>, <a href=#syntax-cdata title=syntax-cdata>CDATA sections</a>, other <a href=#syntax-elements title=syntax-elements>elements</a>, and <a href=#syntax-comments title=syntax-comments>comments</a>, but the text must not
  contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href=#syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous ampersand</a>.</p>

  <div class=note>

   <p>The HTML syntax does not support namespace
   declarations, even in <a href=#foreign-elements>foreign elements</a>.</p>

   <p>For instance, consider the following HTML fragment:</p>

   <pre>&lt;p&gt;
 &lt;svg&gt;
  &lt;metadata&gt;
   &lt;!-- this is invalid --&gt;
   &lt;cdr:license xmlns:cdr="http://www.example.com/cdr/metadata" name="MIT"/&gt;
  &lt;/metadata&gt;
 &lt;/svg&gt;
&lt;/p&gt;</pre>

   <p>The innermost element, <code title="">cdr:license</code>, is
   actually in the SVG namespace, as the "<code title="">xmlns:cdr</code>" attribute has no effect (unlike in
   XML). In fact, as the comment in the fragment above says, the
   fragment is actually non-conforming. This is because the SVG
   specification does not define any elements called "<code title="">cdr:license</code>" in the SVG namespace.</p>

  </div>

  <p><a href=#normal-elements>Normal elements</a> can have <a href=#syntax-text title=syntax-text>text</a>, <a href=#syntax-charref title=syntax-charref>character references</a>, other <a href=#syntax-elements title=syntax-elements>elements</a>, and <a href=#syntax-comments title=syntax-comments>comments</a>, but the text must not
  contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href=#syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous ampersand</a>. Some
  <a href=#normal-elements>normal elements</a> also have <a href=#element-restrictions>yet more restrictions</a> on what
  content they are allowed to hold, beyond the restrictions imposed by
  the content model and those described in this paragraph. Those
  restrictions are described below.</p>

  <p>Tags contain a <dfn id=syntax-tag-name title=syntax-tag-name>tag name</dfn>,
  giving the element's name. HTML elements all have names that only
  use characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
  NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
  Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER
  Z. In the HTML syntax, tag names, even those for <a href=#foreign-elements>foreign
  elements</a>, may be written with any mix of lower- and uppercase
  letters that, when converted to all-lowercase, matches the element's
  tag name; tag names are case-insensitive.</p>


  <h5 id=start-tags><span class=secno>10.1.2.1 </span>Start tags</h5>

  <p><dfn id=syntax-start-tag title=syntax-start-tag>Start tags</dfn> must have the
  following format:</p>

  <ol><li>The first character of a start tag must be a U+003C LESS-THAN
   SIGN character (&lt;).</li>

   <li>The next few characters of a start tag must be the element's
   <a href=#syntax-tag-name title=syntax-tag-name>tag name</a>.</li>

   <li>If there are to be any attributes in the next step, there must
   first be one or more <a href=#space-character title="space character">space
   characters</a>.</li>

   <li>Then, the start tag may have a number of attributes, the <a href=#syntax-attributes title=syntax-attributes>syntax for which</a> is described
   below. Attributes may be separated from each other by one or more
   <a href=#space-character title="space character">space characters</a>.</li>

   <li>After the attributes, or after the <a href=#syntax-tag-name title=syntax-tag-name>tag name</a> if there are no attributes,
   there may be one or more <a href=#space-character title="space character">space
   characters</a>. (Some attributes are required to be followed by
   a space. See the <a href=#syntax-attributes title=syntax-attributes>attributes
   section</a> below.)</li>

   <li>Then, if the element is one of the <a href=#void-elements>void elements</a>,
   or if the element is a <a href=#foreign-elements title="foreign elements">foreign
   element</a>, then there may be a single U+002F SOLIDUS character
   (/). This character has no effect on <a href=#void-elements>void elements</a>,
   but on <a href=#foreign-elements>foreign elements</a> it marks the start tag as
   self-closing.</li>

   <li>Finally, start tags must be closed by a U+003E GREATER-THAN
   SIGN character (&gt;).</li>

  </ol><h5 id=end-tags><span class=secno>10.1.2.2 </span>End tags</h5>

  <p><dfn id=syntax-end-tag title=syntax-end-tag>End tags</dfn> must have the
  following format:</p>

  <ol><li>The first character of an end tag must be a U+003C LESS-THAN
   SIGN character (&lt;).</li>

   <li>The second character of an end tag must be a U+002F SOLIDUS
   character (/).</li>

   <li>The next few characters of an end tag must be the element's
   <a href=#syntax-tag-name title=syntax-tag-name>tag name</a>.</li>

   <li>After the tag name, there may be one or more <a href=#space-character title="space
   character">space characters</a>.</li>

   <li>Finally, end tags must be closed by a U+003E GREATER-THAN SIGN
   character (&gt;).</li>

  </ol><h5 id=attributes-0><span class=secno>10.1.2.3 </span>Attributes</h5>

  <p><dfn id=syntax-attributes title=syntax-attributes>Attributes</dfn> for an element
  are expressed inside the element's start tag.</p>

  <p>Attributes have a name and a value. <dfn id=syntax-attribute-name title=syntax-attribute-name>Attribute names</dfn> must consist of
  one or more characters other than the <a href=#space-character title="space
  character">space characters</a>, U+0000 NULL, U+0022 QUOTATION
  MARK ("), U+0027 APOSTROPHE ('), U+003E GREATER-THAN SIGN
  (&gt;), U+002F SOLIDUS (/), and U+003D EQUALS SIGN (=) characters,
  the control characters, and any characters that are not defined by
  Unicode. In the HTML syntax, attribute names, even those for
  <a href=#foreign-elements>foreign elements</a>, may be written with any mix of lower-
  and uppercase letters that are an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> match for the attribute's name.</p>

  <p><dfn id=syntax-attribute-value title=syntax-attribute-value>Attribute values</dfn> are a
  mixture of <a href=#syntax-text title=syntax-text>text</a> and <a href=#syntax-charref title=syntax-charref>character references</a>, except with the
  additional restriction that the text cannot contain an <a href=#syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous ampersand</a>.</p>

  <p>Attributes can be specified in four different ways:</p>

  <dl><dt>Empty attribute syntax</dt>

   <dd>

    <p>Just the <a href=#syntax-attribute-name title=syntax-attribute-name>attribute
    name</a>. The value is implicitly the empty string.</p>

    <div class=example>

     <p>In the following example, the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is given with
     the empty attribute syntax:</p>

     <pre>&lt;input <em>disabled</em>&gt;</pre>

    </div>

    <p>If an attribute using the empty attribute syntax is to be
    followed by another attribute, then there must be a <a href=#space-character>space
    character</a> separating the two.</p>

   </dd>

   <dt id=unquoted>Unquoted attribute value syntax</dt>

   <dd>

    <p>The <a href=#syntax-attribute-name title=syntax-attribute-name>attribute name</a>,
    followed by zero or more <a href=#space-character title="space character">space
    characters</a>, followed by a single U+003D EQUALS SIGN
    character, followed by zero or more <a href=#space-character title="space
    character">space characters</a>, followed by the <a href=#syntax-attribute-value title=syntax-attribute-value>attribute value</a>, which, in
    addition to the requirements given above for attribute values,
    must not contain any literal <a href=#space-character title="space character">space
    characters</a>, any U+0022 QUOTATION MARK characters ("),
    U+0027 APOSTROPHE characters ('), U+003D EQUALS SIGN
    characters (=), U+003C LESS-THAN SIGN characters (&lt;), U+003E
    GREATER-THAN SIGN characters (&gt;), or U+0060 GRAVE ACCENT
    characters (`), and must not be the empty string.</p>

    <!-- The ` character is in this list on a temporary basis, waiting
         for IE to fix it's parsing bug whereby it treats ` as an
         attribute value delimiter. Otherwise, escaping software that
         tries to be clever and not use quotes when it doesn't need to
         could be tricked by an attacker.

         Posit a site that allows the user to input text that is used
         verbatim in two attributes, such that the user can set the
         first attribute's value to:

            `

         ...and the second to:

            ` onload='...payload...' end=x

         ...with the assumption that the site is going to not quote
         the first one, and quote the second one with double quotes:

            <body title=` class="` onload='...payload...' end=x">

         In IE, this is treated as:

            <body title=' class="'
                  onload='...payload...'
                  end='x"'>

    -->


    <div class=example>

     <p>In the following example, the <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute is given
     with the unquoted attribute value syntax:</p>

     <pre>&lt;input <em>value=yes</em>&gt;</pre>

    </div>

    <p>If an attribute using the unquoted attribute syntax is to be
    followed by another attribute or by the optional U+002F SOLIDUS
    character (/) allowed in step 6 of the <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> syntax above, then there
    must be a <a href=#space-character>space character</a> separating the two.</p>

   </dd>

   <dt>Single-quoted attribute value syntax</dt>

   <dd>

    <p>The <a href=#syntax-attribute-name title=syntax-attribute-name>attribute name</a>,
    followed by zero or more <a href=#space-character title="space character">space
    characters</a>, followed by a single U+003D EQUALS SIGN
    character, followed by zero or more <a href=#space-character title="space
    character">space characters</a>, followed by a single U+0027
    APOSTROPHE character ('), followed by the <a href=#syntax-attribute-value title=syntax-attribute-value>attribute value</a>, which, in
    addition to the requirements given above for attribute values,
    must not contain any literal U+0027 APOSTROPHE characters ('), and
    finally followed by a second single U+0027 APOSTROPHE character
    (').</p>

    <div class=example>

     <p>In the following example, the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is given with the
     single-quoted attribute value syntax:</p>

     <pre>&lt;input <em>type='checkbox'</em>&gt;</pre>

    </div>

    <p>If an attribute using the single-quoted attribute syntax is to
    be followed by another attribute, then there must be a <a href=#space-character>space
    character</a> separating the two.</p>

   </dd>

   <dt>Double-quoted attribute value syntax</dt>

   <dd>

    <p>The <a href=#syntax-attribute-name title=syntax-attribute-name>attribute name</a>,
    followed by zero or more <a href=#space-character title="space character">space
    characters</a>, followed by a single U+003D EQUALS SIGN
    character, followed by zero or more <a href=#space-character title="space
    character">space characters</a>, followed by a single U+0022
    QUOTATION MARK character ("), followed by the <a href=#syntax-attribute-value title=syntax-attribute-value>attribute value</a>, which, in
    addition to the requirements given above for attribute values,
    must not contain any literal U+0022 QUOTATION MARK characters ("),
    and finally followed by a second single U+0022 QUOTATION MARK
    character (").</p>

    <div class=example>

     <p>In the following example, the <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute is given with the
     double-quoted attribute value syntax:</p>

     <pre>&lt;input <em>name="be evil"</em>&gt;</pre>

    </div>

    <p>If an attribute using the double-quoted attribute syntax is to
    be followed by another attribute, then there must be a <a href=#space-character>space
    character</a> separating the two.</p>

   </dd>

  </dl><p>There must never be two or more attributes on the same start tag
  whose names are an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
  each other.</p>

  <hr><p>When a <a href=#foreign-elements title="foreign elements">foreign element</a> has
  one of the namespaced attributes given by the local name and
  namespace of the first and second cells of a row from the following
  table, it must be written using the name given by the third cell
  from the same row.</p>

  <table><thead><tr><th> Local name <th> Namespace <th> Attribute name
   <tbody><tr><td> <code title="">actuate</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:actuate</code>
    <tr><td> <code title="">arcrole</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:arcrole</code>
    <tr><td> <code title="">href</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:href</code>
    <tr><td> <code title="">role</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:role</code>
    <tr><td> <code title="">show</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:show</code>
    <tr><td> <code title="">title</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:title</code>
    <tr><td> <code title="">type</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:type</code>
    <tr><td> <code title="">base</code> <td> <a href=#xml-namespace>XML namespace</a> <!-- attr-xml-base --> <td> <code title="">xml:base</code>
    <tr><td> <code title="">lang</code> <td> <a href=#xml-namespace>XML namespace</a> <td> <code title="">xml:lang</code>
    <tr><td> <code title="">space</code> <td> <a href=#xml-namespace>XML namespace</a> <td> <code title="">xml:space</code>
    <tr><td> <code title="">xmlns</code> <td> <a href=#xmlns-namespace>XMLNS namespace</a> <td> <code title="">xmlns</code>
    <tr><td> <code title="">xlink</code> <td> <a href=#xmlns-namespace>XMLNS namespace</a> <td> <code title="">xmlns:xlink</code>
  </table><p>No other namespaced attribute can be expressed in <a href=#syntax>the
  HTML syntax</a>.</p>


  <h5 id=optional-tags><span class=secno>10.1.2.4 </span>Optional tags</h5>

  <p>Certain tags can be <dfn id=syntax-tag-omission title=syntax-tag-omission>omitted</dfn>.</p>

  <p class=note>Omitting an element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> does not mean the element
  is not present; it is implied, but it is still there. An HTML
  document always has a root <code><a href=#the-html-element-0>html</a></code> element, even if the
  string <code title="">&lt;html&gt;</code> doesn't appear anywhere in
  the markup.</p>

  <!-- <html> -->
  <p>An <code><a href=#the-html-element-0>html</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
  first thing inside the <code><a href=#the-html-element-0>html</a></code> element is not a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>

  <!-- </html> -->
  <p>An <code><a href=#the-html-element-0>html</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-html-element-0>html</a></code> element is not
  immediately followed by a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>

  <!-- <head> -->
  <p>A <code><a href=#the-head-element-0>head</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
  element is empty, or if the first thing inside the
  <code><a href=#the-head-element-0>head</a></code> element is an element.</p>

  <!-- </head> -->
  <p>A <code><a href=#the-head-element-0>head</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-head-element-0>head</a></code> element is not
  immediately followed by a <a href=#space-character>space character</a> or a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>

  <!-- <body> -->
  <p>A <code><a href=#the-body-element-0>body</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
  element is empty, or if the first thing inside the <code><a href=#the-body-element-0>body</a></code>
  element is not a <a href=#space-character>space character</a> or a <a href=#syntax-comments title=syntax-comments>comment</a>, except if the first thing
  inside the <code><a href=#the-body-element-0>body</a></code> element is a <code><a href=#script>script</a></code> or
  <code><a href=#the-style-element>style</a></code> element. <!-- Note that even if the </head> end
  tag is present, the parser makes <style> and <script> elements
  between </head> and <body> end up in the <head> instead of implying
  the <body> --></p>

  <!-- </body> -->
  <p>A <code><a href=#the-body-element-0>body</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-body-element-0>body</a></code> element is not
  immediately followed by a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>

  <!-- </li> -->
  <p>A <code><a href=#the-li-element>li</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-li-element>li</a></code> element is
  immediately followed by another <code><a href=#the-li-element>li</a></code> element or if there
  is no more content in the parent element.</p>

  <!-- </dt> -->
  <p>A <code><a href=#the-dt-element>dt</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-dt-element>dt</a></code> element is
  immediately followed by another <code><a href=#the-dt-element>dt</a></code> element or a
  <code><a href=#the-dd-element>dd</a></code> element.</p>

  <!-- </dd> -->
  <p>A <code><a href=#the-dd-element>dd</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-dd-element>dd</a></code> element is
  immediately followed by another <code><a href=#the-dd-element>dd</a></code> element or a
  <code><a href=#the-dt-element>dt</a></code> element, or if there is no more content in the
  parent element.</p>

  <!-- </p> -->
  <p>A <code><a href=#the-p-element>p</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-p-element>p</a></code> element is
  immediately followed by an <code><a href=#the-address-element>address</a></code>,
  <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-blockquote-element>blockquote</a></code>,
  <!--v2DATAGRID <code>datagrid</code>,--> <code><a href=#dir>dir</a></code>,
  <code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>,
  <code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>,
  <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>,
  <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-header-element>header</a></code>, <code><a href=#the-hgroup-element>hgroup</a></code>,
  <code><a href=#the-hr-element>hr</a></code>, <code><a href=#menus>menu</a></code>, <code><a href=#the-nav-element>nav</a></code>,
  <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-pre-element>pre</a></code>,
  <code><a href=#the-section-element>section</a></code>, <code><a href=#the-table-element>table</a></code>, or <code><a href=#the-ul-element>ul</a></code>,
  element, or if there is no more content in the parent element and
  the parent element is not an <code><a href=#the-a-element>a</a></code> element.</p>

  <!-- </rt> -->
  <p>An <code><a href=#the-rt-element>rt</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-rt-element>rt</a></code> element is
  immediately followed by an <code><a href=#the-rt-element>rt</a></code> or <code><a href=#the-rp-element>rp</a></code>
  element, or if there is no more content in the parent element.</p>

  <!-- </rp> -->
  <p>An <code><a href=#the-rp-element>rp</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-rp-element>rp</a></code> element is
  immediately followed by an <code><a href=#the-rt-element>rt</a></code> or <code><a href=#the-rp-element>rp</a></code>
  element, or if there is no more content in the parent element.</p>

  <!-- </optgroup> (the text assumes <optgroup> can only be inside a
  <select>; commented out text below can handle the non-<select> case
  if we ever allow it) -->
  <p>An <code><a href=#the-optgroup-element>optgroup</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
  <code><a href=#the-optgroup-element>optgroup</a></code> element <!--has an ancestor
  <code>select</code> element and--> is immediately followed by
  another <code><a href=#the-optgroup-element>optgroup</a></code> element, or if <!--all of the elements
  that are ancestors of the <code>optgroup</code> element, up to and
  including the first ancestor element that is not an
  <code>optgroup</code> element, have no more content--> there is no
  more content in the parent element.</p>
  <!-- so e.g. the max number of </optgroup>s are omitted here:
   <select><optgroup></select>
   <p id=x><optgroup></optgroup>x</p>
   <p id=x><optgroup><optgroup></optgroup></optgroup>x</p>
   <p><optgroup id=x><optgroup></optgroup>x</p>
   <p><optgroup><optgroup id=x>x</p>
  -->

  <!-- </option> -->
  <p>An <code><a href=#the-option-element>option</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-option-element>option</a></code> element is
  immediately followed by another <code><a href=#the-option-element>option</a></code> element, or if
  it is immediately followed by an <code><a href=#the-optgroup-element>optgroup</a></code> element, or
  if there is no more content in the parent element.</p>

  <!-- <colgroup> -->
  <p>A <code><a href=#the-colgroup-element>colgroup</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
  first thing inside the <code><a href=#the-colgroup-element>colgroup</a></code> element is a
  <code><a href=#the-col-element>col</a></code> element, and if the element is not immediately
  preceded by another <code><a href=#the-colgroup-element>colgroup</a></code> element whose <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> has been omitted. (It can't be
  omitted if the element is empty.)</p>

  <!-- </colgroup> -->
  <p>A <code><a href=#the-colgroup-element>colgroup</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
  <code><a href=#the-colgroup-element>colgroup</a></code> element is not immediately followed by a
  <a href=#space-character>space character</a> or a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>

  <!-- </thead> -->
  <p>A <code><a href=#the-thead-element>thead</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-thead-element>thead</a></code> element is
  immediately followed by a <code><a href=#the-tbody-element>tbody</a></code> or <code><a href=#the-tfoot-element>tfoot</a></code>
  element.</p>

  <!-- <tbody> -->
  <p>A <code><a href=#the-tbody-element>tbody</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
  first thing inside the <code><a href=#the-tbody-element>tbody</a></code> element is a
  <code><a href=#the-tr-element>tr</a></code> element, and if the element is not immediately
  preceded by a <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, or
  <code><a href=#the-tfoot-element>tfoot</a></code> element whose <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> has been omitted. (It can't be omitted if the element is
  empty.)</p>

  <!-- </tbody> -->
  <p>A <code><a href=#the-tbody-element>tbody</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-tbody-element>tbody</a></code> element is
  immediately followed by a <code><a href=#the-tbody-element>tbody</a></code> or <code><a href=#the-tfoot-element>tfoot</a></code>
  element, or if there is no more content in the parent element.</p>

  <!-- </tfoot> -->
  <p>A <code><a href=#the-tfoot-element>tfoot</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-tfoot-element>tfoot</a></code> element is
  immediately followed by a <code><a href=#the-tbody-element>tbody</a></code> element, or if there is
  no more content in the parent element.</p>

  <!-- </tr> -->
  <p>A <code><a href=#the-tr-element>tr</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-tr-element>tr</a></code> element is
  immediately followed by another <code><a href=#the-tr-element>tr</a></code> element, or if there
  is no more content in the parent element.</p>

  <!-- </td> -->
  <p>A <code><a href=#the-td-element>td</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-td-element>td</a></code> element is
  immediately followed by a <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code>
  element, or if there is no more content in the parent element.</p>

  <!-- </th> -->
  <p>A <code><a href=#the-th-element>th</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
  tag</a> may be omitted if the <code><a href=#the-th-element>th</a></code> element is
  immediately followed by a <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code>
  element, or if there is no more content in the parent element.</p>

  <p><strong>However</strong>, a <a href=#syntax-start-tag title=syntax-start-tag>start
  tag</a> must never be omitted if it has any attributes.</p>


  <h5 id=element-restrictions><span class=secno>10.1.2.5 </span>Restrictions on content models</h5>

  <p>For historical reasons, certain elements have extra restrictions
  beyond even the restrictions given by their content model.</p>

  <p>A <code><a href=#the-table-element>table</a></code> element must not contain <code><a href=#the-tr-element>tr</a></code>
  elements, even though these elements are technically allowed inside
  <code><a href=#the-table-element>table</a></code> elements according to the content models
  described in this specification. (If a <code><a href=#the-tr-element>tr</a></code> element is
  put inside a <code><a href=#the-table-element>table</a></code> in the markup, it will in fact imply
  a <code><a href=#the-tbody-element>tbody</a></code> start tag before it.)</p>

  <p>A single <a href=#syntax-newlines title=syntax-newlines>newline</a> may be
  placed immediately after the <a href=#syntax-start-tag title=syntax-start-tag>start
  tag</a> of <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-textarea-element>textarea</a></code>
  elements. This does not affect the processing of the element. The
  otherwise optional <a href=#syntax-newlines title=syntax-newlines>newline</a>
  <em>must</em> be included if the element's contents themselves start
  with a <a href=#syntax-newlines title=syntax-newlines>newline</a> (because
  otherwise the leading newline in the contents would be treated like
  the optional newline, and ignored).</p>

  <div class=example>
   <p>The following two <code><a href=#the-pre-element>pre</a></code> blocks are equivalent:</p>
   <pre>&lt;pre&gt;Hello&lt;/pre&gt;</pre>
   <pre>&lt;pre&gt;<br>Hello&lt;/pre&gt;</pre>
  </div>


  <h5 id=cdata-rcdata-restrictions><span class=secno>10.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</h5>

  <p>The text in <a href=#raw-text-elements title="raw text elements">raw text</a> and
  <a href=#rcdata-elements>RCDATA elements</a> must not contain any occurrences of the
  string "<code title="">&lt;/</code>" (U+003C LESS-THAN SIGN, U+002F
  SOLIDUS) followed by characters that case-insensitively match the
  tag name of the element followed by one of U+0009 CHARACTER
  TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D
  CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN (&gt;), or
  U+002F SOLIDUS (/).</p>


  <h4 id=text-1><span class=secno>10.1.3 </span>Text</h4>

  <p><dfn id=syntax-text title=syntax-text>Text</dfn> is allowed inside elements,
  attributes, and comments. Text must consist of Unicode characters.
  Text must not contain U+0000 characters. Text must not contain
  permanently undefined Unicode characters (noncharacters). Text must
  not contain control characters other than <a href=#space-character title="space
  character">space characters</a>. Extra constraints are placed on
  what is and what is not allowed in text based on where the text is
  to be put, as described in the other sections.</p>


  <h5 id=newlines><span class=secno>10.1.3.1 </span>Newlines</h5>

  <p><dfn id=syntax-newlines title=syntax-newlines>Newlines</dfn> in HTML may be
  represented either as U+000D CARRIAGE RETURN (CR) characters, U+000A
  LINE FEED (LF) characters, or pairs of U+000D CARRIAGE RETURN (CR),
  U+000A LINE FEED (LF) characters in that order.</p>

  <p>Where <a href=#syntax-charref title=syntax-charref>character references</a>
  are allowed, a character reference of a U+000A LINE FEED (LF)
  character (but not a U+000D CARRIAGE RETURN (CR) character) also
  represents a <a href=#syntax-newlines title=syntax-newlines>newline</a>.</p>


  <h4 id=character-references><span class=secno>10.1.4 </span>Character references</h4>

  <p>In certain cases described in other sections, <a href=#syntax-text title=syntax-text>text</a> may be mixed with <dfn id=syntax-charref title=syntax-charref>character references</dfn>. These can be used
  to escape characters that couldn't otherwise legally be included in
  <a href=#syntax-text title=syntax-text>text</a>.</p>

  <p>Character references must start with a U+0026 AMPERSAND character
  (&amp;). Following this, there are three possible kinds of character
  references:</p>

  <dl><dt>Named character references</dt>

   <dd>The ampersand must be followed by one of the names given in the
   <a href=#named-character-references>named character references</a> section, using the same
   case. <span class=impl>The name must be one that is terminated by
   a U+003B SEMICOLON character (;).</span></dd>


   <dt>Decimal numeric character reference</dt>

   <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
   character (#), followed by one or more digits in the range U+0030
   DIGIT ZERO (0) to U+0039 DIGIT NINE (9), representing a base-ten
   integer that corresponds to a Unicode code point that is allowed
   according to the definition below. The digits must then be followed
   by a U+003B SEMICOLON character (;).</dd>


   <dt>Hexadecimal numeric character reference</dt>

   <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
   character (#), which must be followed by either a U+0078 LATIN
   SMALL LETTER X character (x) or a U+0058 LATIN CAPITAL LETTER X
   character (X), which must then be followed by one or more digits in
   the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061
   LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, and U+0041
   LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F,
   representing a base-sixteen integer that corresponds to a Unicode
   code point that is allowed according to the definition below. The
   digits must then be followed by a U+003B SEMICOLON character
   (;).</dd>

  </dl><p>The numeric character reference forms described above are allowed
  to reference any Unicode code point other than U+0000, U+000D,
  permanently undefined Unicode characters (noncharacters), and
  control characters other than <a href=#space-character title="space character">space
  characters</a>.</p>

  <p>An <dfn id=syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous
  ampersand</dfn> is a U+0026 AMPERSAND character (&amp;) that is
  followed by one or more characters in the range U+0030 DIGIT ZERO
  (0) to U+0039 DIGIT NINE (9), U+0061 LATIN SMALL LETTER A to U+007A
  LATIN SMALL LETTER Z, and U+0041 LATIN CAPITAL LETTER A to U+005A
  LATIN CAPITAL LETTER Z, followed by a U+003B SEMICOLON character
  (;), where these characters do not match any of the names given in
  the <a href=#named-character-references>named character references</a> section.</p>


  <h4 id=cdata-sections><span class=secno>10.1.5 </span>CDATA sections</h4>

  <p><dfn id=syntax-cdata title=syntax-cdata>CDATA sections</dfn> must start with
  the character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION
  MARK, U+005B LEFT SQUARE BRACKET, U+0043 LATIN CAPITAL LETTER C,
  U+0044 LATIN CAPITAL LETTER D, U+0041 LATIN CAPITAL LETTER A, U+0054
  LATIN CAPITAL LETTER T, U+0041 LATIN CAPITAL LETTER A, U+005B LEFT
  SQUARE BRACKET (<code title="">&lt;![CDATA[</code>). Following this
  sequence, the CDATA section may have <a href=#syntax-text title=syntax-text>text</a>, with the additional restriction
  that the text must not contain the three character sequence U+005D
  RIGHT SQUARE BRACKET, U+005D RIGHT SQUARE BRACKET, U+003E
  GREATER-THAN SIGN (<code title="">]]&gt;</code>). Finally, the CDATA
  section must be ended by the three character sequence U+005D RIGHT
  SQUARE BRACKET, U+005D RIGHT SQUARE BRACKET, U+003E GREATER-THAN
  SIGN (<code title="">]]&gt;</code>).</p>

  <div class=example>

   <p>CDATA sections can only be used in foreign content (MathML or
   SVG). In this example, a CDATA section is used to escape the
   contents of an <code>ms</code> element:</p>

   <pre>&lt;p&gt;You can add a string to a number, but this stringifies the number:&lt;/p&gt;
&lt;math&gt;
 &lt;ms&gt;&lt;![CDATA[x&lt;y]]&gt;&lt;/ms&gt;
 &lt;mo&gt;+&lt;/mo&gt;
 &lt;mn&gt;3&lt;/mn&gt;
 &lt;mo&gt;=&lt;/mo&gt;
 &lt;ms&gt;&lt;![CDATA[x&lt;y3]]&gt;&lt;/ms&gt;
&lt;/math&gt;</pre>

  </div>


  <h4 id=comments><span class=secno>10.1.6 </span>Comments</h4>

  <p><dfn id=syntax-comments title=syntax-comments>Comments</dfn> must start with the
  four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION
  MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS (<code title="">&lt;!--</code>). Following this sequence, the comment may
  have <a href=#syntax-text title=syntax-text>text</a>, with the additional
  restriction that the text must not start with a single U+003E
  GREATER-THAN SIGN character (&gt;), nor start with a U+002D
  HYPHEN-MINUS character (-) followed by a U+003E GREATER-THAN SIGN
  (&gt;) character, nor contain two consecutive U+002D HYPHEN-MINUS
  characters (<code title="">--</code>), nor end with a U+002D
  HYPHEN-MINUS character (-). Finally, the comment must be ended by
  the three character sequence U+002D HYPHEN-MINUS, U+002D
  HYPHEN-MINUS, U+003E GREATER-THAN SIGN (<code title="">--&gt;</code>).</p>


  <div class=impl>

  <h3 id=parsing><span class=secno>10.2 </span>Parsing HTML documents</h3>

  <p><i>This section only applies to user agents, data mining tools,
  and conformance checkers.</i></p>

  <p class=note>The rules for parsing XML documents into DOM trees
  are covered by the next section, entitled "<a href=#the-xhtml-syntax>The XHTML
  syntax</a>".</p>

  <p>For <a href=#html-documents>HTML documents</a>, user agents must use the parsing
  rules described in this section to generate the DOM trees. Together,
  these rules define what is referred to as the <dfn id=html-parser>HTML
  parser</dfn>.</p>

  <div class=note>

   <p>While the HTML syntax described in this specification bears a
   close resemblance to SGML and XML, it is a separate language with
   its own parsing rules.</p>

   <p>Some earlier versions of HTML (in particular from HTML2 to
   HTML4) were based on SGML and used SGML parsing rules. However, few
   (if any) web browsers ever implemented true SGML parsing for HTML
   documents; the only user agents to strictly handle HTML as an SGML
   application have historically been validators. The resulting
   confusion &mdash; with validators claiming documents to have one
   representation while widely deployed Web browsers interoperably
   implemented a different representation &mdash; has wasted decades
   of productivity. This version of HTML thus returns to a non-SGML
   basis.</p>

   <p>Authors interested in using SGML tools in their authoring
   pipeline are encouraged to use XML tools and the XML serialization
   of HTML.</p>

  </div>

  <p>This specification defines the parsing rules for HTML documents,
  whether they are syntactically correct or not. Certain points in the
  parsing algorithm are said to be <dfn id=parse-error title="parse error">parse
  errors</dfn>. The error handling for parse errors is well-defined:
  user agents must either act as described below when encountering
  such problems, or must abort processing at the first error that they
  encounter for which they do not wish to apply the rules described
  below.</p>

  <p>Conformance checkers must report at least one parse error
  condition to the user if one or more parse error conditions exist in
  the document and must not report parse error conditions if none
  exist in the document. Conformance checkers may report more than one
  parse error condition if more than one parse error condition exists
  in the document. Conformance checkers are not required to recover
  from parse errors.</p>

  <p class=note>Parse errors are only errors with the
  <em>syntax</em> of HTML. In addition to checking for parse errors,
  conformance checkers will also verify that the document obeys all
  the other conformance requirements described in this
  specification.</p>

  <p>For the purposes of conformance checkers, if a resource is
  determined to be in <a href=#syntax>the HTML syntax</a>, then it is an
  <a href=#html-documents title="HTML documents">HTML document</a>.</p>

  </div>


  <div class=impl>

  <h4 id=overview-of-the-parsing-model><span class=secno>10.2.1 </span>Overview of the parsing model</h4>

  <p>The input to the HTML parsing process consists of a stream of
  Unicode characters, which is passed through a
  <a href=#tokenization>tokenization</a> stage followed by a <a href=#tree-construction>tree
  construction</a> stage. The output is a <code><a href=#document>Document</a></code>
  object.</p>

  <p class=note>Implementations that <a href=#non-scripted>do not
  support scripting</a> do not have to actually create a DOM
  <code><a href=#document>Document</a></code> object, but the DOM tree in such cases is
  still used as the model for the rest of the specification.</p>

  <p>In the common case, the data handled by the tokenization stage
  comes from the network, but <a href=#dynamic-markup-insertion title="dynamic markup
  insertion">it can also come from script</a>, e.g. using the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> API.</p>

  <p><img alt="" src=images/parsing-model-overview.png></p>

  <p id=nestedParsing>There is only one set of states for the
  tokenizer stage and the tree construction stage, but the tree
  construction stage is reentrant, meaning that while the tree
  construction stage is handling one token, the tokenizer might be
  resumed, causing further tokens to be emitted and processed before
  the first token's processing is complete.</p>

  <div class=example>

   <p>In the following example, the tree construction stage will be
   called upon to handle a "p" start tag token while handling the
   "script" start tag token:</p>

   <pre>...
&lt;script&gt;
 document.write('&lt;p&gt;');
&lt;/script&gt;
...</pre>

  </div>

  <p>To handle these cases, parsers have a <dfn id=script-nesting-level>script nesting
  level</dfn>, which must be initially set to zero, and a <dfn id=parser-pause-flag>parser
  pause flag</dfn>, which must be initially set to false.</p>

  </div>


  <div class=impl>

  <h4 id=the-input-stream><span class=secno>10.2.2 </span>The <dfn>input stream</dfn></h4>

  <p>The stream of Unicode characters that comprises the input to the
  tokenization stage will be initially seen by the user agent as a
  stream of bytes (typically coming over the network or from the local
  file system). The bytes encode the actual characters according to a
  particular <em>character encoding</em>, which the user agent must
  use to decode the bytes into characters.</p>

  <p class=note>For XML documents, the algorithm user agents must
  use to determine the character encoding is given by the XML
  specification. This section does not apply to XML documents. <a href=#refsXML>[XML]</a></p>


  <h5 id=determining-the-character-encoding><span class=secno>10.2.2.1 </span>Determining the character encoding</h5>

  <p>In some cases, it might be impractical to unambiguously determine
  the encoding before parsing the document. Because of this, this
  specification provides for a two-pass mechanism with an optional
  pre-scan. Implementations are allowed, as described below, to apply
  a simplified parsing algorithm to whatever bytes they have available
  before beginning to parse the document. Then, the real parser is
  started, using a tentative encoding derived from this pre-parse and
  other out-of-band metadata. If, while the document is being loaded,
  the user agent discovers an encoding declaration that conflicts with
  this information, then the parser can get reinvoked to perform a
  parse of the document with the real encoding.</p>

  <p id=documentEncoding>User agents must use the following
  algorithm (the <dfn id=encoding-sniffing-algorithm>encoding sniffing algorithm</dfn>) to determine
  the character encoding to use when decoding a document in the first
  pass. This algorithm takes as input any out-of-band metadata
  available to the user agent (e.g. the <a href=#content-type title=Content-Type>Content-Type metadata</a> of the document)
  and all the bytes available so far, and returns an encoding and a
  <dfn id=concept-encoding-confidence title=concept-encoding-confidence>confidence</dfn>. The
  confidence is either <i>tentative</i>, <i>certain</i>, or
  <i>irrelevant</i>. The encoding used, and whether the confidence in
  that encoding is <i>tentative</i> or <i>certain</i>, is <a href=#meta-charset-during-parse>used during the parsing</a> to
  determine whether to <a href=#change-the-encoding>change the encoding</a>. If no
  encoding is necessary, e.g. because the parser is operating on a
  stream of Unicode characters and doesn't have to use an encoding at
  all, then the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is
  <i>irrelevant</i>.</p>

  <ol><li><p>If the transport layer specifies an encoding, and it is
   supported, return that encoding with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
   <i>certain</i>, and abort these steps.</li>

   <li><p>The user agent may wait for more bytes of the resource to be
   available, either in this step or at any later step in this
   algorithm. For instance, a user agent might wait 500ms or 512
   bytes, whichever came first. In general preparsing the source to
   find the encoding improves performance, as it reduces the need to
   throw away the data structures used when parsing upon finding the
   encoding information. However, if the user agent delays too long to
   obtain data to determine the encoding, then the cost of the delay
   could outweigh any performance improvements from the
   preparse.</li>

   <li><p>For each of the rows in the following table, starting with
   the first one and going down, if there are as many or more bytes
   available than the number of bytes in the first column, and the
   first bytes of the file match the bytes given in the first column,
   then return the encoding given in the cell in the second column of
   that row, with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
   <i>certain</i>, and abort these steps:</p>

    <!-- this table is present in several forms in this file; keep them in sync -->
    <table><thead><tr><th>Bytes in Hexadecimal
       <th>Encoding
     <tbody><!-- nobody uses this
      <tr>
       <td>00 00 FE FF
       <td>UTF-32BE
      <tr>
       <td>FF FE 00 00
       <td>UTF-32LE
--><tr><td>FE FF
       <td>UTF-16BE
      <tr><td>FF FE
       <td>UTF-16LE
      <tr><td>EF BB BF
       <td>UTF-8
<!-- nobody uses this
      <tr>
       <td>DD 73 66 73
       <td>UTF-EBCDIC
-->
    </table><p class=note>This step looks for Unicode Byte Order Marks
   (BOMs).</li>

   <li><p>Otherwise, the user agent will have to search for explicit
   character encoding information in the file itself. This should
   proceed as follows:

    <p>Let <var title="">position</var> be a pointer to a byte in the
    input stream, initially pointing at the first byte. If at any
    point during these substeps the user agent either runs out of
    bytes or decides that scanning further bytes would not be
    efficient, then skip to the next step of the overall character
    encoding detection algorithm. User agents may decide that scanning
    <em>any</em> bytes is not efficient, in which case these substeps
    are entirely skipped.</p>

    <p>Now, repeat the following "two" steps until the algorithm
    aborts (either because user agent aborts, as described above, or
    because a character encoding is found):</p>

    <ol><li><p>If <var title="">position</var> points to:</p>

      <dl class=switch><dt>A sequence of bytes starting with: 0x3C 0x21 0x2D 0x2D (ASCII '&lt;!--')</dt>
       <dd>

        <p>Advance the <var title="">position</var> pointer so that it
        points at the first 0x3E byte which is preceded by two 0x2D
        bytes (i.e. at the end of an ASCII '--&gt;' sequence) and comes
        after the 0x3C byte that was found. (The two 0x2D bytes can be
        the same as the those in the '&lt;!--' sequence.)</p>

       </dd>

       <dt>A sequence of bytes starting with: 0x3C, 0x4D or 0x6D, 0x45 or 0x65, 0x54 or 0x74, 0x41 or 0x61, and finally one of 0x09, 0x0A, 0x0C, 0x0D, 0x20, 0x2F (case-insensitive ASCII '&lt;meta' followed by a space or slash)</dt>
       <dd>

        <ol><li><p>Advance the <var title="">position</var> pointer so
         that it points at the next 0x09, 0x0A, 0x0C, 0x0D, 0x20, or
         0x2F byte (the one in sequence of characters matched
         above).</li>

         <li><p>Let <var title="">attribute list</var> be an empty
         list of strings.</li> <!-- so long as we only care about
         http-equiv, content, and charset, this can be a 3-bit
         bitfield -->

         <li><p>Let <var title="">got pragma</var> be false.</li>

         <li><p>Let <var title="">mode</var> be null.</li>

         <li><p>Let <var title="">charset</var> be the null value
         (which, for the purposes of this algorithm, is distinct from
         an unrecognised encoding or the empty string).</li>

         <li><p><i>Attributes</i>: <a href=#concept-get-attributes-when-sniffing title=concept-get-attributes-when-sniffing>Get an
         attribute</a> and its value. If no attribute was sniffed,
         then jump to the <i>processing</i> step below.</li>

         <li><p>If the attribute's name is already in <var title="">attribute list</var>, then return to the step
         labeled <i>attributes</i>.</p>

         <li>

          <p>Run the appropriate step from the following list, if one
          applies:</p>

          <dl class=switch><dt>If the attribute's name is "<code title="">http-equiv</code>"</dt>

           <dd><p>If the attribute's value is "<code title="">content-type</code>", then set <var title="">got
           pragma</var> to true.</dd>

           <dt>If the attribute's name is "<code title="">charset</code>"</dt>

           <dd><p>If <var title="">charset</var> is still set to null,
           let <var title="">charset</var> be the encoding
           corresponding to the attribute's value, and set <var title="">mode</var> to "charset".</dd>

           <dt>If the attribute's name is "<code title="">content</code>"</dt>

           <dd><p>Apply the <a href=#algorithm-for-extracting-an-encoding-from-a-content-type>algorithm for extracting an encoding
           from a Content-Type</a>, giving the attribute's value as
           the string to parse. If an encoding is returned, and if
           <var title="">charset</var> is still set to null, let <var title="">charset</var> be the encoding returned, and set
           <var title="">mode</var> to "pragma".</dd>

          </dl></li>

         <li><p>Return to the step labeled <i>attributes</i>.</li>

         <li><p><i>Processing</i>: If <var title="">mode</var> is
         null, then jump to the second step of the overall "two step"
         algorithm.</li>

         <li><p>If <var title="">mode</var> is "pragma" but <var title="">got pragma</var> is false, then jump to the second
         step of the overall "two step" algorithm.</li>

         <li><p>If <var title="">charset</var> is a UTF-16 encoding,
         change the value of <var title="">charset</var> to
         UTF-8.</li>

         <li><p>If <var title="">charset</var> is not a supported
         character encoding, then jump to the second step of the
         overall "two step" algorithm.</li>

         <li><p>Return the encoding given by <var title="">charset</var>, with <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
         <i>tentative</i>, and abort all these steps.</li>

        </ol></dd>

       <dt>A sequence of bytes starting with a 0x3C byte (ASCII &lt;), optionally a 0x2F byte (ASCII /), and finally a byte in the range 0x41-0x5A or 0x61-0x7A (an ASCII letter)</dt>
       <dd>

        <ol><li><p>Advance the <var title="">position</var> pointer so
         that it points at the next 0x09 (ASCII TAB), 0x0A (ASCII LF),
         0x0C (ASCII FF), 0x0D (ASCII CR), 0x20 (ASCII space), or 0x3E
         (ASCII &gt;) byte.</li>

         <li><p>Repeatedly <a href=#concept-get-attributes-when-sniffing title=concept-get-attributes-when-sniffing>get an
         attribute</a> until no further attributes can be found,
         then jump to the second step in the overall "two step"
         algorithm.</li>

        </ol></dd>

       <dt>A sequence of bytes starting with: 0x3C 0x21 (ASCII '&lt;!')</dt>
       <dt>A sequence of bytes starting with: 0x3C 0x2F (ASCII '&lt;/')</dt>
       <dt>A sequence of bytes starting with: 0x3C 0x3F (ASCII '&lt;?')</dt>
       <dd>

        <p>Advance the <var title="">position</var> pointer so that it
        points at the first 0x3E byte (ASCII &gt;) that comes after the
        0x3C byte that was found.</p>

       </dd>

       <dt>Any other byte</dt>
       <dd>

        <p>Do nothing with that byte.</p>

       </dd>

      </dl></li>

     <li>Move <var title="">position</var> so it points at the next
     byte in the input stream, and return to the first step of this
     "two step" algorithm.</li>

    </ol><p>When the above "two step" algorithm says to <dfn id=concept-get-attributes-when-sniffing title=concept-get-attributes-when-sniffing>get an
    attribute</dfn>, it means doing this:</p>

    <ol><li><p>If the byte at <var title="">position</var> is one of 0x09
     (ASCII TAB), 0x0A (ASCII LF), 0x0C (ASCII FF), 0x0D (ASCII CR),
     0x20 (ASCII space), or 0x2F (ASCII /) then advance <var title="">position</var> to the next byte and redo this
     substep.</li>

     <li><p>If the byte at <var title="">position</var> is 0x3E (ASCII
     &gt;), then abort the "get an attribute" algorithm. There isn't
     one.</li>

     <li><p>Otherwise, the byte at <var title="">position</var> is the
     start of the attribute name. Let <var title="">attribute
     name</var> and <var title="">attribute value</var> be the empty
     string.</li>

     <li><p><i>Attribute name</i>: Process the byte at <var title="">position</var> as follows:</p>

      <dl class=switch><dt>If it is 0x3D (ASCII =), and the <var title="">attribute
       name</var> is longer than the empty string</dt>

       <dd>Advance <var title="">position</var> to the next byte and
       jump to the step below labeled <i>value</i>.</dd>

       <dt>If it is 0x09 (ASCII TAB), 0x0A (ASCII LF), 0x0C (ASCII
       FF), 0x0D (ASCII CR), or 0x20 (ASCII space)</dt>

       <dd>Jump to the step below labeled <i>spaces</i>.</dd>

       <dt>If it is 0x2F (ASCII /) or 0x3E (ASCII &gt;)</dt>

       <dd>Abort the "get an attribute" algorithm. The attribute's
       name is the value of <var title="">attribute name</var>, its
       value is the empty string.</dd>

       <dt>If it is in the range 0x41 (ASCII A) to 0x5A (ASCII
       Z)</dt>

       <dd>Append the Unicode character with code point <span title=""><var title="">b</var>+0x20</span> to <var title="">attribute
       name</var> (where <var title="">b</var> is the value of the
       byte at <var title="">position</var>).</dd>

       <dt>Anything else</dt>

       <dd>Append the Unicode character with the same code point as the
       value of the byte at <var title="">position</var>) to <var title="">attribute name</var>. (It doesn't actually matter how
       bytes outside the ASCII range are handled here, since only
       ASCII characters can contribute to the detection of a character
       encoding.)</dd>

      </dl></li>

     <li><p>Advance <var title="">position</var> to the next byte and
     return to the previous step.</li>

     <li><p><i>Spaces</i>: If the byte at <var title="">position</var> is one of 0x09 (ASCII TAB), 0x0A (ASCII
     LF), 0x0C (ASCII FF), 0x0D (ASCII CR), or 0x20 (ASCII space) then
     advance <var title="">position</var> to the next byte, then,
     repeat this step.</li>

     <li><p>If the byte at <var title="">position</var> is
     <em>not</em> 0x3D (ASCII =), abort the "get an attribute"
     algorithm. The attribute's name is the value of <var title="">attribute name</var>, its value is the empty
     string.</li>

     <li><p>Advance <var title="">position</var> past the 0x3D (ASCII
     =) byte.</li>

     <li><p><i>Value</i>: If the byte at <var title="">position</var> is one of 0x09 (ASCII TAB), 0x0A (ASCII
     LF), 0x0C (ASCII FF), 0x0D (ASCII CR), or 0x20 (ASCII space) then
     advance <var title="">position</var> to the next byte, then,
     repeat this step.</li>

     <li><p>Process the byte at <var title="">position</var> as
     follows:</p>

      <dl class=switch><dt>If it is 0x22 (ASCII ") or 0x27 (ASCII ')</dt>

       <dd>

        <ol><li>Let <var title="">b</var> be the value of the byte at
         <var title="">position</var>.</li>

         <li>Advance <var title="">position</var> to the next
         byte.</li>

         <li>If the value of the byte at <var title="">position</var>
         is the value of <var title="">b</var>, then advance <var title="">position</var> to the next byte and abort the "get
         an attribute" algorithm. The attribute's name is the value of
         <var title="">attribute name</var>, and its value is the
         value of <var title="">attribute value</var>.</li>

         <li>Otherwise, if the value of the byte at <var title="">position</var> is in the range 0x41 (ASCII A) to
         0x5A (ASCII Z), then append a Unicode character to <var title="">attribute value</var> whose code point is 0x20 more
         than the value of the byte at <var title="">position</var>.</li>

         <li>Otherwise, append a Unicode character to <var title="">attribute value</var> whose code point is the same as
         the value of the byte at <var title="">position</var>.</li>

         <li>Return to the second step in these substeps.</li>

        </ol></dd>

       <dt>If it is 0x3E (ASCII &gt;)</dt>

       <dd>Abort the "get an attribute" algorithm. The attribute's
       name is the value of <var title="">attribute name</var>, its
       value is the empty string.</dd>


       <dt>If it is in the range 0x41 (ASCII A) to 0x5A (ASCII
       Z)</dt>

       <dd>Append the Unicode character with code point <span title=""><var title="">b</var>+0x20</span> to <var title="">attribute
       value</var> (where <var title="">b</var> is the value of the
       byte at <var title="">position</var>). Advance <var title="">position</var> to the next byte.</dd>

       <dt>Anything else</dt>

       <dd>Append the Unicode character with the same code point as the
       value of the byte at <var title="">position</var>) to <var title="">attribute value</var>. Advance <var title="">position</var> to the next byte.</dd>

      </dl></li>

     <li><p>Process the byte at <var title="">position</var> as
     follows:</p>

      <dl class=switch><dt>If it is 0x09 (ASCII TAB), 0x0A (ASCII LF), 0x0C (ASCII
       FF), 0x0D (ASCII CR), 0x20 (ASCII space), or 0x3E (ASCII
       &gt;)</dt>

       <dd>Abort the "get an attribute" algorithm. The attribute's
       name is the value of <var title="">attribute name</var> and its
       value is the value of <var title="">attribute value</var>.</dd>

       <dt>If it is in the range 0x41 (ASCII A) to 0x5A (ASCII
       Z)</dt>

       <dd>Append the Unicode character with code point <span title=""><var title="">b</var>+0x20</span> to <var title="">attribute
       value</var> (where <var title="">b</var> is the value of the
       byte at <var title="">position</var>).</dd>

       <dt>Anything else</dt>

       <dd>Append the Unicode character with the same code point as the
       value of the byte at <var title="">position</var>) to <var title="">attribute value</var>.</dd>

      </dl></li>

     <li><p>Advance <var title="">position</var> to the next byte and
     return to the previous step.</li>

    </ol><p>For the sake of interoperability, user agents should not use a
    pre-scan algorithm that returns different results than the one
    described above. (But, if you do, please at least let us know, so
    that we can improve this algorithm and benefit everyone...)</p>

   </li>

   <li><p>If the user agent has information on the likely encoding for
   this page, e.g. based on the encoding of the page when it was last
   visited, then return that encoding, with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
   <i>tentative</i>, and abort these steps.</li>

   <li>

    <p>The user agent may attempt to autodetect the character encoding
    from applying frequency analysis or other algorithms to the data
    stream. Such algorithms may use information about the resource
    other than the resource's contents, including the address of the
    resource. If autodetection succeeds in determining a character
    encoding, then return that encoding, with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
    <i>tentative</i>, and abort these steps. <a href=#refsUNIVCHARDET>[UNIVCHARDET]</a></p>

    <p class=note>The UTF-8 encoding has a highly detectable bit
    pattern. Documents that contain bytes with values greater than
    0x7F which match the UTF-8 pattern are very likely to be UTF-8,
    while documents with byte sequences that do not match it are very
    likely not. User-agents are therefore encouraged to search for
    this common encoding. <a href=#refsPPUTF8>[PPUTF8]</a> <a href=#refsUTF8DET>[UTF8DET]</a></p>

   </li>

   <li>

    <p>Otherwise, return an implementation-defined or user-specified
    default character encoding, with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
    <i>tentative</i>.</p>

    <p>In controlled environments or in environments where the
    encoding of documents can be prescribed (for example, for user
    agents intended for dedicated use in new networks), the
    comprehensive <code title="">UTF-8</code> encoding is
    suggested.</p>

    <p>In other environments, the default encoding is typically
    dependent on the user's locale (an approximation of the languages,
    and thus often encodings, of the pages that the user is likely to
    frequent). The following table gives suggested defaults based on
    the user's locale, for compatibility with legacy content. Locales
    are identified by BCP 47 language tags. <a href=#refsBCP47>[BCP47]</a></p>

    <!-- based on mozilla 1.9.1 localizations:
         http://mxr.mozilla.org/l10n-mozilla1.9.1/find?string=global%2Fintl.properties&tree=l10n-mozilla1.9.1&hint= -->

    <table><thead><tr><th>Locale language
       <th>Suggested default encoding
     <tbody><tr><td>ar
       <td>UTF-8

      <tr><td>be
       <td>ISO-8859-5

      <tr><td>bg
       <td>windows-1251

      <tr><td>cs<!-- -CZ -->
       <td>ISO-8859-2

      <tr><td>cy
       <td>UTF-8

      <tr><td>fa<!-- -IR -->
       <td>UTF-8

      <tr><td>he<!-- -IL -->
       <td>windows-1255

      <tr><td>hr
       <td>UTF-8

      <tr><td>hu<!-- -HU -->
       <td>ISO-8859-2

      <tr><td>ja <!-- and ja-JP-mac -->
       <td>Windows-31J <!-- Shift_JIS -->

      <tr><td>kk
       <td>UTF-8

      <tr><td>ko<!-- -KR -->
       <td>windows-949 <!-- EUC-KR -->

      <tr><td>ku
       <td>windows-1254 <!-- ISO-8859-9 -->

      <tr><td>lt
       <td>windows-1257

      <tr><td>lv<!-- -LV -->
       <td>ISO-8859-13

      <tr><td>mk<!-- -MK -->
       <td>UTF-8

      <tr><td>or
       <td>UTF-8

      <tr><td>pl<!-- -PL -->
       <td>ISO-8859-2

      <tr><td>ro
       <td>UTF-8

      <tr><td>ru
       <td>windows-1251

      <tr><td>sk
       <td>windows-1250

      <tr><td>sl
       <td>ISO-8859-2

      <tr><td>sr
       <td>UTF-8

      <tr><td>th
       <td>windows-874 <!-- TIS-620 -->

      <tr><td>tr<!-- -TR -->
       <td>windows-1254 <!-- ISO-8859-9 -->

      <tr><td>uk
       <td>windows-1251

      <tr><td>vi
       <td>UTF-8

      <tr><td>zh-CN
       <td>GB18030

      <tr><td>zh-TW
       <td>Big5

      <tr><td>All other locales
       <td>windows-1252

    </table></li>

  </ol><p>The <a href="#document's-character-encoding">document's character encoding</a> must immediately
  be set to the value returned from this algorithm, at the same time
  as the user agent uses the returned value to select the decoder to
  use for the input stream.</p>

  <p class=note>This algorithm is a <a href=#willful-violation>willful violation</a>
  of the HTTP specification, which requires that the encoding be
  assumed to be ISO-8859-1 in the absence of a <a href=#character-encoding-declaration>character
  encoding declaration</a> to the contrary, and of RFC 2046,
  which requires that the encoding be assumed to be US-ASCII in the
  absence of a <a href=#character-encoding-declaration>character encoding declaration</a> to the
  contrary. This specification's third approach is motivated by a
  desire to be maximally compatible with legacy content. <a href=#refsHTTP>[HTTP]</a> <a href=#refsRFC2046>[RFC2046]</a></p>


  <h5 id=character-encodings-0><span class=secno>10.2.2.2 </span>Character encodings</h5>

  <p>User agents must at a minimum support the UTF-8 and Windows-1252
  encodings, but may support more.</p>

  <p class=note>It is not unusual for Web browsers to support dozens
  if not upwards of a hundred distinct character encodings.</p>

  <p>User agents must support the <a href=#preferred-mime-name>preferred MIME name</a> of
  every character encoding they support, and should support all the
  IANA-registered names and aliases of every character encoding they
  support. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>

  <p>When comparing a string specifying a character encoding with the
  name or alias of a character encoding to determine if they are
  equal, user agents must remove any leading or trailing <a href=#space-character title="space character">space characters</a> in both names, and
  then perform the comparison in an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> manner.</p>

  <hr><p>When a user agent would otherwise use an encoding given in the
  first column of the following table to either convert content to
  Unicode characters or convert Unicode characters to bytes, it must
  instead use the encoding given in the cell in the second column of
  the same row. When a byte or sequence of bytes is treated
  differently due to this encoding aliasing, it is said to have been
  <dfn id=misinterpreted-for-compatibility>misinterpreted for compatibility</dfn>.</p>

  <table><caption>Character encoding overrides</caption>
   <thead><tr><th> Input encoding <th> Replacement encoding <th> References
   <tbody><!-- how about EUC-JP? --><tr><td> EUC-KR <td> windows-949 <td>
         <a href=#refsEUCKR>[EUCKR]</a>
         <a href=#refsWIN949>[WIN949]</a>
    <tr><td> GB2312 <td> GBK <td>
         <a href=#refsRFC1345>[RFC1345]</a>
         <a href=#refsGBK>[GBK]</a>
    <tr><td> GB_2312-80 <td> GBK <td>
         <a href=#refsRFC1345>[RFC1345]</a>
         <a href=#refsGBK>[GBK]</a>
    <tr><td> ISO-8859-1 <td> windows-1252 <td>
         <a href=#refsRFC1345>[RFC1345]</a>
         <a href=#refsWIN1252>[WIN1252]</a>
    <tr><td> ISO-8859-9 <td> windows-1254 <td>
         <a href=#refsRFC1345>[RFC1345]</a>
         <a href=#refsWIN1254>[WIN1254]</a>
    <tr><td> ISO-8859-11 <td> windows-874 <td>
         <a href=#refsISO885911>[ISO885911]</a>
         <a href=#refsWIN874>[WIN874]</a>
    <tr><td> KS_C_5601-1987 <td> windows-949 <td>
         <a href=#refsRFC1345>[RFC1345]</a>
         <a href=#refsWIN949>[WIN949]</a>
    <tr><td> Shift_JIS <td> Windows-31J <td>
         <a href=#refsSHIFTJIS>[SHIFTJIS]</a>
         <a href=#refsWIN31J>[WIN31J]</a>
    <tr><td> TIS-620 <td> windows-874 <td>
         <a href=#refsTIS620>[TIS620]</a>
         <a href=#refsWIN874>[WIN874]</a>
    <tr><td> US-ASCII <td> windows-1252 <td>
         <a href=#refsRFC1345>[RFC1345]</a>
         <a href=#refsWIN1252>[WIN1252]</a>
   </table><p class=note>The requirement to treat certain encodings as other
  encodings according to the table above is a <a href=#willful-violation>willful
  violation</a> of the W3C Character Model specification, motivated
  by a desire for compatibility with legacy content. <a href=#refsCHARMOD>[CHARMOD]</a></p>

  <p>When a user agent is to use the UTF-16 encoding but no BOM has
  been found, user agents must default to UTF-16LE.</p>

  <p class=note>The requirement to default UTF-16 to LE rather than
  BE is a <a href=#willful-violation>willful violation</a> of RFC 2781, motivated by a
  desire for compatibility with legacy content. <a href=#refsRFC2781>[RFC2781]</a></p>

  <hr><p>User agents must not support the CESU-8, UTF-7, BOCU-1 and SCSU
  encodings. <a href=#refsCESU8>[CESU8]</a> <a href=#refsUTF7>[UTF7]</a> <a href=#refsBOCU1>[BOCU1]</a> <a href=#refsSCSU>[SCSU]</a></p>

  <p>Support for encodings based on EBCDIC is not recommended. This
  encoding is rarely used for publicly-facing Web content.</p>

  <p>Support for UTF-32 is not recommended. This encoding is rarely
  used, and frequently implemented incorrectly.</p>

  <p class=note>This specification does not make any attempt to
  support EBCDIC-based encodings and UTF-32 in its algorithms; support
  and use of these encodings can thus lead to unexpected behavior in
  implementations of this specification.</p>



  <h5 id=preprocessing-the-input-stream><span class=secno>10.2.2.3 </span>Preprocessing the input stream</h5>

  <p>Given an encoding, the bytes in the input stream must be
  converted to Unicode characters for the tokenizer, as described by
  the rules for that encoding, except that the leading U+FEFF BYTE
  ORDER MARK character, if any, must not be stripped by the encoding
  layer (it is stripped by the rule below).</p> <!-- this is to
  prevent two leading BOMs from being both stripped, once by the
  decoder, and once by the parser -->

  <p>Bytes or sequences of bytes in the original byte stream that
  could not be converted to Unicode code points must be converted to
  U+FFFD REPLACEMENT CHARACTERs.</p>

  <p class=note>Bytes or sequences of bytes in the original byte
  stream that did not conform to the encoding specification
  (e.g. invalid UTF-8 byte sequences in a UTF-8 input stream) are
  errors that conformance checkers are expected to report.</p>

  <p>Any byte or sequence of bytes in the original byte stream that is
  <a href=#misinterpreted-for-compatibility>misinterpreted for compatibility</a> is a <a href=#parse-error>parse
  error</a>.</p>

  <p>One leading U+FEFF BYTE ORDER MARK character must be ignored if
  any are present.</p>

  <p class=note>The requirement to strip a U+FEFF BYTE ORDER MARK
  character regardless of whether that character was used to determine
  the byte order is a <a href=#willful-violation>willful violation</a> of Unicode,
  motivated by a desire to increase the resilience of user agents in
  the face of na&iuml;ve transcoders.</p>

  <p>All U+0000 NULL characters and code points in the range U+D800 to
  U+DFFF<!-- surrogates not allowed e.g. in UTF-8, and we don't want
  them to suddenly turn into codepoints when they go through a UTF-16
  pipe --> in the input must be replaced by U+FFFD REPLACEMENT
  CHARACTERs. Any occurrences of such characters and code points are
  <a href=#parse-error title="parse error">parse errors</a>.</p>

  <p>Any occurrences of any characters in the ranges U+0001 to U+0008,
  <!-- HT, LF allowed --> <!-- U+000B is in the next list --> <!-- FF,
  CR allowed --> U+000E to U+001F, <!-- ASCII allowed --> U+007F
  <!--to U+0084, (U+0085 NEL not allowed), U+0086--> to U+009F, U+FDD0
  to U+FDEF, and characters U+000B, U+FFFE, U+FFFF, U+1FFFE, U+1FFFF,
  U+2FFFE, U+2FFFF, U+3FFFE, U+3FFFF, U+4FFFE, U+4FFFF, U+5FFFE,
  U+5FFFF, U+6FFFE, U+6FFFF, U+7FFFE, U+7FFFF, U+8FFFE, U+8FFFF,
  U+9FFFE, U+9FFFF, U+AFFFE, U+AFFFF, U+BFFFE, U+BFFFF, U+CFFFE,
  U+CFFFF, U+DFFFE, U+DFFFF, U+EFFFE, U+EFFFF, U+FFFFE, U+FFFFF,
  U+10FFFE, and U+10FFFF are <a href=#parse-error title="parse error">parse
  errors</a>. These are all control characters or permanently
  undefined Unicode characters (noncharacters).</p>

  <p>U+000D CARRIAGE RETURN (CR) characters and U+000A LINE FEED (LF)
  characters are treated specially. Any CR characters that are
  followed by LF characters must be removed, and any CR characters not
  followed by LF characters must be converted to LF characters. Thus,
  newlines in HTML DOMs are represented by LF characters, and there
  are never any CR characters in the input to the
  <a href=#tokenization>tokenization</a> stage.</p>

  <p>The <dfn id=next-input-character>next input character</dfn> is the first character in the
  input stream that has not yet been <dfn id=consumed>consumed</dfn>. Initially,
  the <i><a href=#next-input-character>next input character</a></i> is the first character in the
  input. The <dfn id=current-input-character>current input character</dfn> is the last character
  to have been <i><a href=#consumed>consumed</a></i>.</p>

  <p>The <dfn id=insertion-point>insertion point</dfn> is the position (just before a
  character or just before the end of the input stream) where content
  inserted using <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> is actually
  inserted. The insertion point is relative to the position of the
  character immediately after it, it is not an absolute offset into
  the input stream. Initially, the insertion point is
  undefined.</p>

  <p>The "EOF" character in the tables below is a conceptual character
  representing the end of the <a href=#the-input-stream>input stream</a>. If the parser
  is a <a href=#script-created-parser>script-created parser</a>, then the end of the
  <a href=#the-input-stream>input stream</a> is reached when an <dfn id=explicit-eof-character>explicit "EOF"
  character</dfn> (inserted by the <code title=dom-document-close><a href=#dom-document-close>document.close()</a></code> method) is
  consumed. Otherwise, the "EOF" character is not a real character in
  the stream, but rather the lack of any further characters.</p>


  <h5 id=changing-the-encoding-while-parsing><span class=secno>10.2.2.4 </span>Changing the encoding while parsing</h5>

  <p>When the parser requires the user agent to <dfn id=change-the-encoding>change the
  encoding</dfn>, it must run the following steps. This might happen
  if the <a href=#encoding-sniffing-algorithm>encoding sniffing algorithm</a> described above
  failed to find an encoding, or if it found an encoding that was not
  the actual encoding of the file.</p>

  <ol><li>If the new encoding is identical or equivalent to the encoding
   that is already being used to interpret the input stream, then set
   the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   <i>certain</i> and abort these steps. This happens when the
   encoding information found in the file matches what the
   <a href=#encoding-sniffing-algorithm>encoding sniffing algorithm</a> determined to be the
   encoding, and in the second pass through the parser if the first
   pass found that the encoding sniffing algorithm described in the
   earlier section failed to find the right encoding.</li>

   <li>If the encoding that is already being used to interpret the
   input stream is a UTF-16 encoding, then set the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   <i>certain</i> and abort these steps. The new encoding is ignored;
   if it was anything but the same encoding, then it would be clearly
   incorrect.</li>

   <li>If the new encoding is a UTF-16 encoding, change it to
   UTF-8.</li>

   <li>If all the bytes up to the last byte converted by the current
   decoder have the same Unicode interpretations in both the current
   encoding and the new encoding, and if the user agent supports
   changing the converter on the fly, then the user agent may change
   to the new converter for the encoding on the fly. Set the
   <a href="#document's-character-encoding">document's character encoding</a> and the encoding used to
   convert the input stream to the new encoding, set the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   <i>certain</i>, and abort these steps.</li>

   <li>Otherwise, <a href=#navigate>navigate</a> to the document again, with
   <a href=#replacement-enabled>replacement enabled</a>, and using the same <a href=#source-browsing-context>source
   browsing context</a>, but this time skip the <a href=#encoding-sniffing-algorithm>encoding
   sniffing algorithm</a> and instead just set the encoding to the
   new encoding and the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   <i>certain</i>. Whenever possible, this should be done without
   actually contacting the network layer (the bytes should be
   re-parsed from memory), even if, e.g., the document is marked as
   not being cacheable. If this is not possible and contacting the
   network layer would involve repeating a request that uses a method
   other than HTTP GET (<a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   equivalent</a> for non-HTTP URLs), then instead set the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   <i>certain</i> and ignore the new encoding. The resource will be
   misinterpreted. User agents may notify the user of the situation,
   to aid in application development.</li>

  </ol></div>


  <div class=impl>

  <h4 id=parse-state><span class=secno>10.2.3 </span>Parse state</h4>

  <h5 id=the-insertion-mode><span class=secno>10.2.3.1 </span>The insertion mode</h5>

  <p>The <dfn id=insertion-mode>insertion mode</dfn> is a state variable that controls
  the primary operation of the tree construction stage.</p>

  <p>Initially, the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-initial-insertion-mode title="insertion mode: initial">initial</a>". It can change to
  "<a href=#the-before-html-insertion-mode title="insertion mode: before html">before html</a>",
  "<a href=#the-before-head-insertion-mode title="insertion mode: before head">before head</a>",
  "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>", "<a href=#parsing-main-inheadnoscript title="insertion mode: in head noscript">in head noscript</a>",
  "<a href=#the-after-head-insertion-mode title="insertion mode: after head">after head</a>", "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>", "<a href=#parsing-main-incdata title="insertion mode: text">text</a>",
  "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>", "<a href=#parsing-main-intabletext title="insertion mode: in table text">in table text</a>", "<a href=#parsing-main-incaption title="insertion mode: in caption">in caption</a>", "<a href=#parsing-main-incolgroup title="insertion mode: in column group">in column group</a>",
  "<a href=#parsing-main-intbody title="insertion mode: in table body">in table body</a>",
  "<a href=#parsing-main-intr title="insertion mode: in row">in row</a>", "<a href=#parsing-main-intd title="insertion mode: in cell">in cell</a>", "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>", "<a href=#parsing-main-inselectintable title="insertion mode: in select in table">in select in
  table</a>", "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in
  foreign content</a>", "<a href=#parsing-main-afterbody title="insertion mode: after
  body">after body</a>", "<a href=#parsing-main-inframeset title="insertion mode: in
  frameset">in frameset</a>", "<a href=#parsing-main-afterframeset title="insertion mode: after
  frameset">after frameset</a>", "<a href=#the-after-after-body-insertion-mode title="insertion mode:
  after after body">after after body</a>", and "<a href=#the-after-after-frameset-insertion-mode title="insertion mode: after after frameset">after after
  frameset</a>" during the course of the parsing, as described in
  the <a href=#tree-construction>tree construction</a> stage. The insertion mode affects
  how tokens are processed and whether CDATA sections are
  supported.</p>

  <p>Seven of these modes, namely "<a href=#parsing-main-inhead title="insertion mode: in
  head">in head</a>", "<a href=#parsing-main-inbody title="insertion mode: in body">in
  body</a>", "<a href=#parsing-main-intable title="insertion mode: in table">in
  table</a>", "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
  body</a>", "<a href=#parsing-main-intr title="insertion mode: in row">in row</a>",
  "<a href=#parsing-main-intd title="insertion mode: in cell">in cell</a>", and "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>", are special, in
  that the other modes defer to them at various times. When the
  algorithm below says that the user agent is to do something
  "<dfn id=using-the-rules-for>using the rules for</dfn> the <var title="">m</var> insertion
  mode", where <var title="">m</var> is one of these modes, the user
  agent must use the rules described under the <var title="">m</var>
  <a href=#insertion-mode>insertion mode</a>'s section, but must leave the
  <a href=#insertion-mode>insertion mode</a> unchanged unless the rules in <var title="">m</var> themselves switch the <a href=#insertion-mode>insertion mode</a>
  to a new value.</p>

  <p>When the insertion mode is switched to "<a href=#parsing-main-incdata title="insertion
  mode: text">text</a>" or "<a href=#parsing-main-intabletext title="insertion mode: in table
  text">in table text</a>", the <dfn id=original-insertion-mode>original insertion mode</dfn>
  is also set. This is the insertion mode to which the tree
  construction stage will return.</p>

  <p>When the insertion mode is switched to "<a href=#parsing-main-inforeign title="insertion
  mode: in foreign content">in foreign content</a>", the
  <dfn id=secondary-insertion-mode>secondary insertion mode</dfn> is also set. This secondary mode
  is used within the rules for the "<a href=#parsing-main-inforeign title="insertion mode: in
  foreign content">in foreign content</a>" mode to handle HTML
  (i.e. not foreign) content.</p>

  <hr><p>When the steps below require the UA to <dfn id=reset-the-insertion-mode-appropriately>reset the insertion
  mode appropriately</dfn>, it means the UA must follow these
  steps:</p>

  <ol><li>Let <var title="">last</var> be false.</li>

   <li>Let <var title="">foreign</var> be false.</li>

   <li>Let <var title="">node</var> be the last node in the
   <a href=#stack-of-open-elements>stack of open elements</a>.</li>

   <li><i>Loop</i>: If <var title="">node</var> is the first node in
   the stack of open elements, then set <var title="">last</var> to
   true and set <var title="">node</var> to the <var title="">context</var> element. (<a href=#fragment-case>fragment case</a>)</li>

   <li>If <var title="">node</var> is a <code><a href=#the-select-element>select</a></code> element,
   then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>" and jump to the
   step labeled <i title="">end</i>. (<a href=#fragment-case>fragment case</a>)</li>

   <li>If <var title="">node</var> is a <code><a href=#the-td-element>td</a></code> or
   <code><a href=#the-th-element>th</a></code> element and <var title="">last</var> is false, then
   switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intd title="insertion
   mode: in cell">in cell</a>" and jump to the step labeled <i title="">end</i>.</li>

   <li>If <var title="">node</var> is a <code><a href=#the-tr-element>tr</a></code> element, then
   switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intr title="insertion
   mode: in row">in row</a>" and jump to the step labeled <i title="">end</i>.</li>

   <li>If <var title="">node</var> is a <code><a href=#the-tbody-element>tbody</a></code>,
   <code><a href=#the-thead-element>thead</a></code>, or <code><a href=#the-tfoot-element>tfoot</a></code> element, then switch the
   <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intbody title="insertion mode: in
   table body">in table body</a>" and jump to the step labeled <i title="">end</i>.</li>

   <li>If <var title="">node</var> is a <code><a href=#the-caption-element>caption</a></code> element,
   then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incaption title="insertion mode: in caption">in caption</a>" and jump to
   the step labeled <i title="">end</i>.</li>

   <li>If <var title="">node</var> is a <code><a href=#the-colgroup-element>colgroup</a></code> element,
   then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incolgroup title="insertion mode: in column group">in column group</a>" and
   jump to the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment
   case</a>)</li>

   <li>If <var title="">node</var> is a <code><a href=#the-table-element>table</a></code> element,
   then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>" and jump to the
   step labeled <i title="">end</i>.</li>

   <li>If <var title="">node</var> is a <code><a href=#the-head-element-0>head</a></code> element,
   then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" ("<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>"! <em> not "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>"</em>!) and jump to
   the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment
   case</a>)</li> <!-- This is only here for now in case people
   think that the spec accidentally omitted it and try to "fix"
   it. Note that noscript-in-head is also handled this way. This is
   all intentional. The only thing it doesn't handle is the
   scripting-disabled fragment parsing case for a <head> element
   containing a <noscript> which itself contains something other than
   a <link> or a <style> element; you'd expect that to break out of
   the <noscript> but it doesn't. This is an edge case that doesn't
   affect the spec, since the algorithm for fragment parsing is only
   used for innerHTML/outerHTML/insertAdjacentHTML(), where we know
   scripting is enabled. -->

   <li>If <var title="">node</var> is a <code><a href=#the-body-element-0>body</a></code> element,
   then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" and jump to the
   step labeled <i title="">end</i>.</li>

   <li>If <var title="">node</var> is a <code><a href=#frameset>frameset</a></code> element,
   then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inframeset title="insertion mode: in frameset">in frameset</a>" and jump to
   the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment
   case</a>)</li>

   <li>If <var title="">node</var> is an <code><a href=#the-html-element-0>html</a></code> element,
   then <!--: if the <span><code title="">head</code> element
   pointer</span> is null,--> switch the <a href=#insertion-mode>insertion mode</a>
   to "<a href=#the-before-head-insertion-mode title="insertion mode: before head">before
   head</a>"<!--, otherwise, switch the <span>insertion mode</span>
   to "<span title="insertion mode: after head">after head</span>".-->
   Then, <!-- in either case, --> jump to the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment case</a>)</li> <!-- if the
   head element pointer can ever be non-null when we're going through
   these steps, we'll need to uncomment out the commented-out bits -->

   <li>If <var title="">node</var> is an element from the <a href=#mathml-namespace>MathML
   namespace</a> or the <a href=#svg-namespace>SVG namespace</a>, then set the
   <var title="">foreign</var> flag to true.</li>

   <li>If <var title="">last</var> is true, then switch the
   <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in
   body">in body</a>" and jump to the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment case</a>)</li>

   <li>Let <var title="">node</var> now be the node before <var title="">node</var> in the <a href=#stack-of-open-elements>stack of open
   elements</a>.</li>

   <li>Return to the step labeled <i>loop</i>.</li>

   <li><i>End</i>: If <var title="">foreign</var> is true, switch the
   <a href=#secondary-insertion-mode>secondary insertion mode</a> to whatever the
   <a href=#insertion-mode>insertion mode</a> is set to, and switch the
   <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inforeign title="insertion mode: in
   foreign content">in foreign content</a>".</li>

  </ol><h5 id=the-stack-of-open-elements><span class=secno>10.2.3.2 </span>The stack of open elements</h5>

  <p>Initially, the <dfn id=stack-of-open-elements>stack of open elements</dfn> is empty. The
  stack grows downwards; the topmost node on the stack is the first
  one added to the stack, and the bottommost node of the stack is the
  most recently added node in the stack (notwithstanding when the
  stack is manipulated in a random access fashion as part of <a href=#adoptionAgency>the handling for misnested tags</a>).</p>

  <p>The "<a href=#the-before-html-insertion-mode title="insertion mode: before html">before
  html</a>" <a href=#insertion-mode>insertion mode</a> creates the
  <code><a href=#the-html-element-0>html</a></code> root element node, which is then added to the
  stack.</p>

  <p>In the <a href=#fragment-case>fragment case</a>, the <a href=#stack-of-open-elements>stack of open
  elements</a> is initialized to contain an <code><a href=#the-html-element-0>html</a></code>
  element that is created as part of <a href=#html-fragment-parsing-algorithm title="html fragment
  parsing algorithm">that algorithm</a>. (The <a href=#fragment-case>fragment
  case</a> skips the "<a href=#the-before-html-insertion-mode title="insertion mode: before
  html">before html</a>" <a href=#insertion-mode>insertion mode</a>.)</p>

  <p>The <code><a href=#the-html-element-0>html</a></code> node, however it is created, is the topmost
  node of the stack. It only gets popped off the stack when the parser
  <a href=#stop-parsing title="stop parsing">finishes</a>.</p>

  <p>The <dfn id=current-node>current node</dfn> is the bottommost node in this
  stack.</p>

  <p>The <dfn id=current-table>current table</dfn> is the last <code><a href=#the-table-element>table</a></code>
  element in the <a href=#stack-of-open-elements>stack of open elements</a>, if there is
  one. If there is no <code><a href=#the-table-element>table</a></code> element in the <a href=#stack-of-open-elements>stack of
  open elements</a> (<a href=#fragment-case>fragment case</a>), then the
  <a href=#current-table>current table</a> is the first element in the <a href=#stack-of-open-elements>stack
  of open elements</a> (the <code><a href=#the-html-element-0>html</a></code> element).</p>

  <p>Elements in the stack fall into the following categories:</p>

  <dl><dt><dfn id=special>Special</dfn></dt>
   <dd><p>The following HTML elements have varying levels of special
   parsing rules: <code><a href=#the-address-element>address</a></code>, <code><a href=#the-area-element>area</a></code>,
   <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-base-element>base</a></code>,
   <code><a href=#basefont>basefont</a></code>, <code><a href=#bgsound>bgsound</a></code>,
   <code><a href=#the-blockquote-element>blockquote</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-br-element>br</a></code>,
   <code><a href=#the-button-element>button</a></code>, <code><a href=#center>center</a></code>, <code><a href=#the-col-element>col</a></code>,
   <code><a href=#the-colgroup-element>colgroup</a></code>, <code><a href=#the-command>command</a></code>, <!--v2DDATAGRID
   <code>datagrid</code>-->, <code><a href=#the-dd-element>dd</a></code>, <code><a href=#the-details-element>details</a></code>,
   <code><a href=#dir>dir</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>,
   <code><a href=#the-dt-element>dt</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>,
   <code><a href=#the-figure-element>figure</a></code>, <code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>,
   <code><a href=#frame>frame</a></code>, <code><a href=#frameset>frameset</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>,
   <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>,
   <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-head-element-0>head</a></code>, <code><a href=#the-header-element>header</a></code>,
   <code><a href=#the-hgroup-element>hgroup</a></code>, <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <!--
   <code>image</code>, (commented out because this isn't an element
   that can end up on the stack, so it doesn't matter) -->
   <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#isindex-0>isindex</a></code>,
   <code><a href=#the-li-element>li</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#listing>listing</a></code>,
   <code><a href=#menus>menu</a></code>, <code><a href=#meta>meta</a></code>, <code><a href=#the-nav-element>nav</a></code>,
   <code><a href=#noembed>noembed</a></code>, <code><a href=#noframes>noframes</a></code>, <code><a href=#the-noscript-element>noscript</a></code>,
   <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-param-element>param</a></code>,
   <code><a href=#plaintext>plaintext</a></code>, <code><a href=#the-pre-element>pre</a></code>, <code><a href=#script>script</a></code>,
   <code><a href=#the-section-element>section</a></code>, <code><a href=#the-select-element>select</a></code>, <code><a href=#the-style-element>style</a></code>,
   <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-textarea-element>textarea</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>,
   <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-title-element-0>title</a></code>, <code><a href=#the-tr-element>tr</a></code>,
   <code><a href=#the-ul-element>ul</a></code>, <code><a href=#the-wbr-element>wbr</a></code>, and <code><a href=#xmp>xmp</a></code>.</dd>

   <dt><dfn id=scoping>Scoping</dfn></dt>
   <dd><p>The following HTML elements introduce new <a href=#has-an-element-in-scope title="has
   an element in scope">scopes</a> for various parts of the
   parsing: <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-caption-element>caption</a></code>,
   <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-object-element>object</a></code>,
   <code><a href=#the-table-element>table</a></code>, <code><a href=#the-td-element>td</a></code>, <code><a href=#the-th-element>th</a></code>, and SVG's
   <code>foreignObject</code>.</dd>

   <dt><dfn id=formatting>Formatting</dfn></dt>
   <dd><p>The following HTML elements are those that end up in the
   <a href=#list-of-active-formatting-elements>list of active formatting elements</a>: <code><a href=#the-a-element>a</a></code>,
   <code><a href=#the-b-element>b</a></code>, <code><a href=#big>big</a></code>, <code><a href=#the-code-element>code</a></code>,
   <code><a href=#the-em-element>em</a></code>, <code><a href=#font>font</a></code>, <code><a href=#the-i-element>i</a></code>,
   <code><a href=#nobr>nobr</a></code>, <code><a href=#s>s</a></code>, <code><a href=#the-small-element>small</a></code>,
   <code><a href=#strike>strike</a></code>, <code><a href=#the-strong-element>strong</a></code>, <code><a href=#tt>tt</a></code>, and
   <code><a href=#u>u</a></code>.</dd>

   <dt><dfn id=phrasing>Phrasing</dfn></dt>
   <dd><p>All other elements found while parsing an HTML
   document.</dd>

  </dl><p>The <a href=#stack-of-open-elements>stack of open elements</a> is said to <dfn id=has-an-element-in-the-specific-scope title="has an element in the specific scope">have an element in a
  specific scope</dfn> consisting of a list of element types <var title="">list</var> when the following algorithm terminates in a
  match state:</p>

  <ol><li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
   node</a> (the bottommost node of the stack).</li>

   <li><p>If <var title="">node</var> is the target node, terminate in
   a match state.</li>

   <li><p>Otherwise, if <var title="">node</var> is one of the element
   types in <var title="">list</var>, terminate in a failure
   state.</li>

   <li><p>Otherwise, set <var title="">node</var> to the previous
   entry in the <a href=#stack-of-open-elements>stack of open elements</a> and return to step
   2. (This will never fail, since the loop will always terminate in
   the previous step if the top of the stack &mdash; an
   <code><a href=#the-html-element-0>html</a></code> element &mdash; is reached.)</li>

  </ol><p>The <a href=#stack-of-open-elements>stack of open elements</a> is said to <dfn id=has-an-element-in-scope title="has an element in scope">have an element in scope</dfn> when
  it <a href=#has-an-element-in-the-specific-scope>has an element in the specific scope</a> consisting
  of the following element types:</p>

  <ul class=brief><li><code><a href=#the-applet-element>applet</a></code> in the HTML namespace</li>
   <li><code><a href=#the-caption-element>caption</a></code> in the HTML namespace</li>
   <li><code><a href=#the-html-element-0>html</a></code> in the HTML namespace</li> <!-- (This can only happen if the <var title="">node</var> is the topmost node of the <span>stack of open elements</span>, and prevents the next step from being invoked if there are no more elements in the stack.) -->
   <li><code><a href=#the-table-element>table</a></code> in the HTML namespace</li>
   <li><code><a href=#the-td-element>td</a></code> in the HTML namespace</li>
   <li><code><a href=#the-th-element>th</a></code> in the HTML namespace</li>
   <li><code><a href=#the-button-element>button</a></code> in the HTML namespace</li>
   <li><code><a href=#the-marquee-element>marquee</a></code> in the HTML namespace</li>
   <li><code><a href=#the-object-element>object</a></code> in the HTML namespace</li>
   <li><code title="">foreignObject</code> in the SVG namespace</li>
  </ul><p>The <a href=#stack-of-open-elements>stack of open elements</a> is said to <dfn id=has-an-element-in-list-item-scope title="has an element in list item scope">have an element in list
  item scope</dfn> when it <a href=#has-an-element-in-the-specific-scope>has an element in the specific
  scope</a> consisting of the following element types:</p>

  <ul class=brief><li>All the element types listed above for the <i><a href=#has-an-element-in-scope>has an element
   in scope</a></i> algorithm.</li>
   <li><code><a href=#the-ol-element>ol</a></code> in the HTML namespace</li>
   <li><code><a href=#the-ul-element>ul</a></code> in the HTML namespace</li>
  </ul><p>The <a href=#stack-of-open-elements>stack of open elements</a> is said to <dfn id=has-an-element-in-table-scope title="has an element in table scope">have an element in <em>table
  scope</em></dfn> when it <a href=#has-an-element-in-the-specific-scope>has an element in the specific
  scope</a> consisting of the following element types:</p>

  <ul class=brief><li><code><a href=#the-html-element-0>html</a></code> in the HTML namespace</li> <!-- (This can only happen if the <var title="">node</var> is the topmost node of the <span>stack of open elements</span>, and prevents the next step from being invoked if there are no more elements in the stack.) -->
   <li><code><a href=#the-table-element>table</a></code> in the HTML namespace</li>
  </ul><p>Nothing happens if at any time any of the elements in the
  <a href=#stack-of-open-elements>stack of open elements</a> are moved to a new location in,
  or removed from, the <code><a href=#document>Document</a></code> tree. In particular, the
  stack is not changed in this situation. This can cause, amongst
  other strange effects, content to be appended to nodes that are no
  longer in the DOM.</p>

  <p class=note>In some cases (namely, when <a href=#adoptionAgency>closing misnested formatting elements</a>),
  the stack is manipulated in a random-access fashion.</p>


  <h5 id=the-list-of-active-formatting-elements><span class=secno>10.2.3.3 </span>The list of active formatting elements</h5>

  <p>Initially, the <dfn id=list-of-active-formatting-elements>list of active formatting elements</dfn> is
  empty. It is used to handle mis-nested <a href=#formatting title=formatting>formatting element tags</a>.</p>

  <p>The list contains elements in the <a href=#formatting>formatting</a>
  category, and scope markers. The scope markers are inserted when
  entering <code><a href=#the-applet-element>applet</a></code> elements, buttons, <code><a href=#the-object-element>object</a></code>
  elements, marquees, table cells, and table captions, and are used to
  prevent formatting from "leaking" <em>into</em> <code><a href=#the-applet-element>applet</a></code>
  elements, buttons, <code><a href=#the-object-element>object</a></code> elements, marquees, and
  tables.</p>

  <p class=note>The scope markers are unrelated to the concept of an
  element being <a href=#has-an-element-in-scope title="has an element in scope">in
  scope</a>.</p>

  <p>In addition, each element in the <a href=#list-of-active-formatting-elements>list of active formatting
  elements</a> is associated with the token for which it was
  created, so that further elements can be created for that token if
  necessary.</p>

  <p>When the steps below require the UA to <dfn id=reconstruct-the-active-formatting-elements>reconstruct the
  active formatting elements</dfn>, the UA must perform the following
  steps:</p>

  <ol><li>If there are no entries in the <a href=#list-of-active-formatting-elements>list of active formatting
   elements</a>, then there is nothing to reconstruct; stop this
   algorithm.</li>

   <li>If the last (most recently added) entry in the <a href=#list-of-active-formatting-elements>list of
   active formatting elements</a> is a marker, or if it is an
   element that is in the <a href=#stack-of-open-elements>stack of open elements</a>, then
   there is nothing to reconstruct; stop this algorithm.</li>

   <li>Let <var title="">entry</var> be the last (most recently added)
   element in the <a href=#list-of-active-formatting-elements>list of active formatting
   elements</a>.</li>

   <li>If there are no entries before <var title="">entry</var> in the
   <a href=#list-of-active-formatting-elements>list of active formatting elements</a>, then jump to step
   8.</li>

   <li>Let <var title="">entry</var> be the entry one earlier than
   <var title="">entry</var> in the <a href=#list-of-active-formatting-elements>list of active formatting
   elements</a>.</li>

   <li>If <var title="">entry</var> is neither a marker nor an element
   that is also in the <a href=#stack-of-open-elements>stack of open elements</a>, go to step
   4.</li>

   <li>Let <var title="">entry</var> be the element one later than
   <var title="">entry</var> in the <a href=#list-of-active-formatting-elements>list of active formatting
   elements</a>.</li>

   <li><a href=#create-an-element-for-the-token>Create an element for the token</a> for which the
   element <var title="">entry</var> was created, to obtain <var title="">new element</var>.</li>

   <li>Append <var title="">new element</var> to the <a href=#current-node>current
   node</a> and push it onto the <a href=#stack-of-open-elements>stack of open
   elements</a> so that it is the new <a href=#current-node>current
   node</a>.</li>

   <li>Replace the entry for <var title="">entry</var> in the list
   with an entry for <var title="">new element</var>.</li>

   <li>If the entry for <var title="">new element</var> in the
   <a href=#list-of-active-formatting-elements>list of active formatting elements</a> is not the last
   entry in the list, return to step 7.</li>

  </ol><p>This has the effect of reopening all the formatting elements that
  were opened in the current body, cell, or caption (whichever is
  youngest) that haven't been explicitly closed.</p>

  <p class=note>The way this specification is written, the
  <a href=#list-of-active-formatting-elements>list of active formatting elements</a> always consists of
  elements in chronological order with the least recently added
  element first and the most recently added element last (except for
  while steps 8 to 11 of the above algorithm are being executed, of
  course).</p>

  <p>When the steps below require the UA to <dfn id=clear-the-list-of-active-formatting-elements-up-to-the-last-marker>clear the list of
  active formatting elements up to the last marker</dfn>, the UA must
  perform the following steps:</p>

  <ol><li>Let <var title="">entry</var> be the last (most recently added)
   entry in the <a href=#list-of-active-formatting-elements>list of active formatting elements</a>.</li>

   <li>Remove <var title="">entry</var> from the <a href=#list-of-active-formatting-elements>list of active
   formatting elements</a>.</li>

   <li>If <var title="">entry</var> was a marker, then stop the
   algorithm at this point. The list has been cleared up to the last
   marker.</li>

   <li>Go to step 1.</li>

  </ol><h5 id=the-element-pointers><span class=secno>10.2.3.4 </span>The element pointers</h5>

  <p>Initially, the <dfn id=head-element-pointer><code title="">head</code> element
  pointer</dfn> and the <dfn id=form-element-pointer><code title="">form</code> element
  pointer</dfn> are both null.</p>

  <p>Once a <code><a href=#the-head-element-0>head</a></code> element has been parsed (whether
  implicitly or explicitly) the <a href=#head-element-pointer><code title="">head</code>
  element pointer</a> gets set to point to this node.</p>

  <p>The <a href=#form-element-pointer><code title="">form</code> element pointer</a>
  points to the last <code><a href=#the-form-element>form</a></code> element that was opened and
  whose end tag has not yet been seen. It is used to make form
  controls associate with forms in the face of dramatically bad
  markup, for historical reasons.</p>


  <h5 id=other-parsing-state-flags><span class=secno>10.2.3.5 </span>Other parsing state flags</h5>

  <p>The <dfn id=scripting-flag>scripting flag</dfn> is set to "enabled" if <a href=#concept-n-script title=concept-n-script>scripting was enabled</a> for the
  <code><a href=#document>Document</a></code> with which the parser is associated when the
  parser was created, and "disabled" otherwise.</p>

  <p class=note>The <a href=#scripting-flag>scripting flag</a> can be enabled even
  when the parser was originally created for the <a href=#html-fragment-parsing-algorithm>HTML fragment
  parsing algorithm</a>, even though <code><a href=#script>script</a></code> elements
  don't execute in that case.</p>

  <p>The <dfn id=frameset-ok-flag>frameset-ok flag</dfn> is set to "ok" when the parser is
  created. It is set to "not ok" after certain tokens are seen.</p>

  </div>


  <div class=impl>

  <h4 id=tokenization><span class=secno>10.2.4 </span><dfn>Tokenization</dfn></h4>

  <p>Implementations must act as if they used the following state
  machine to tokenize HTML. The state machine must start in the
  <a href=#data-state>data state</a>. Most states consume a single character,
  which may have various side-effects, and either switches the state
  machine to a new state to <em>reconsume</em> the same character, or
  switches it to a new state (to consume the next character), or
  repeats the same state (to consume the next character). Some states
  have more complicated behavior and can consume several characters
  before switching to another state. In some cases, the tokenizer
  state is also changed by the tree construction stage.</p>

  <p>The exact behavior of certain states depends on the
  <a href=#insertion-mode>insertion mode</a> and the <a href=#stack-of-open-elements>stack of open
  elements</a>. Certain states also use a <dfn id=temporary-buffer><var>temporary
  buffer</var></dfn> to track progress.</p>

  <p>The output of the tokenization step is a series of zero or more
  of the following tokens: DOCTYPE, start tag, end tag, comment,
  character, end-of-file. DOCTYPE tokens have a name, a public
  identifier, a system identifier, and a <i>force-quirks
  flag</i>. When a DOCTYPE token is created, its name, public
  identifier, and system identifier must be marked as missing (which
  is a distinct state from the empty string), and the <i>force-quirks
  flag</i> must be set to <i>off</i> (its other state is
  <i>on</i>). Start and end tag tokens have a tag name, a
  <i>self-closing flag</i>, and a list of attributes, each of which
  has a name and a value. When a start or end tag token is created,
  its <i>self-closing flag</i> must be unset (its other state is that
  it be set), and its attributes list must be empty. Comment and
  character tokens have data.</p>

  <p>When a token is emitted, it must immediately be handled by the
  <a href=#tree-construction>tree construction</a> stage. The tree construction stage
  can affect the state of the tokenization stage, and can insert
  additional characters into the stream. (For example, the
  <code><a href=#script>script</a></code> element can result in scripts executing and
  using the <a href=#dynamic-markup-insertion>dynamic markup insertion</a> APIs to insert
  characters into the stream being tokenized.)</p>

  <p>When a start tag token is emitted with its <i>self-closing
  flag</i> set, if the flag is not <dfn id=acknowledge-self-closing-flag title="acknowledge
  self-closing flag">acknowledged</dfn> when it is processed by the
  tree construction stage, that is a <a href=#parse-error>parse error</a>.</p>

  <p>When an end tag token is emitted with attributes, that is a
  <a href=#parse-error>parse error</a>.</p>

  <p>When an end tag token is emitted with its <i>self-closing
  flag</i> set, that is a <a href=#parse-error>parse error</a>.</p>

  <p>An <dfn id=appropriate-end-tag-token>appropriate end tag token</dfn> is an end tag token whose
  tag name matches the tag name of the last start tag to have been
  emitted from this tokenizer, if any. If no start tag has been
  emitted from this tokenizer, then no end tag token is
  appropriate.</p>

  <p>Before each step of the tokenizer, the user agent must first
  check the <a href=#parser-pause-flag>parser pause flag</a>. If it is true, then the
  tokenizer must abort the processing of any nested invocations of the
  tokenizer, yielding control back to the caller.</p>

  <p>The tokenizer state machine consists of the states defined in the
  following subsections.</p>


  <!-- Order of the lists below is supposed to be non-error then
  error, by unicode, then EOF, ending with "anything else" -->


  <h5 id=data-state><span class=secno>10.2.4.1 </span><dfn>Data state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0026 AMPERSAND (&amp;)</dt>
   <dd>Switch to the <a href=#character-reference-in-data-state>character reference in data
   state</a>.</dd>

   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd>Switch to the <a href=#tag-open-state>tag open state</a>.</dd>

   <dt>EOF</dt>
   <dd>Emit an end-of-file token.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Stay in the <a href=#data-state>data state</a>.</dd>

  </dl><h5 id=character-reference-in-data-state><span class=secno>10.2.4.2 </span><dfn>Character reference in data state</dfn></h5>

  <p>Attempt to <a href=#consume-a-character-reference>consume a character reference</a>, with no
  <a href=#additional-allowed-character>additional allowed character</a>.</p>

  <p>If nothing is returned, emit a U+0026 AMPERSAND character
  token.</p>

  <p>Otherwise, emit the character token that was returned.</p>

  <p>Finally, switch to the <a href=#data-state>data state</a>.</p>


  <h5 id=rcdata-state><span class=secno>10.2.4.3 </span><dfn>RCDATA state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0026 AMPERSAND (&amp;)</dt>
   <dd>Switch to the <a href=#character-reference-in-rcdata-state>character reference in RCDATA
   state</a>.</dd>

   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd>Switch to the <a href=#rcdata-less-than-sign-state>RCDATA less-than sign state</a>.</dd>

   <dt>EOF</dt>
   <dd>Emit an end-of-file token.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Stay in the <a href=#rcdata-state>RCDATA state</a>.</dd>

  </dl><h5 id=character-reference-in-rcdata-state><span class=secno>10.2.4.4 </span><dfn>Character reference in RCDATA state</dfn></h5>

  <p>Attempt to <a href=#consume-a-character-reference>consume a character reference</a>, with no
  <a href=#additional-allowed-character>additional allowed character</a>.</p>

  <p>If nothing is returned, emit a U+0026 AMPERSAND character
  token.</p>

  <p>Otherwise, emit the character token that was returned.</p>

  <p>Finally, switch to the <a href=#rcdata-state>RCDATA state</a>.</p>


  <h5 id=rawtext-state><span class=secno>10.2.4.5 </span><dfn>RAWTEXT state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd>Switch to the <a href=#rawtext-less-than-sign-state>RAWTEXT less-than sign state</a>.</dd>

   <dt>EOF</dt>
   <dd>Emit an end-of-file token.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Stay in the <a href=#rawtext-state>RAWTEXT state</a>.</dd>

  </dl><h5 id=script-data-state><span class=secno>10.2.4.6 </span><dfn>Script data state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd>Switch to the <a href=#script-data-less-than-sign-state>script data less-than sign state</a>.</dd>

   <dt>EOF</dt>
   <dd>Emit an end-of-file token.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Stay in the <a href=#script-data-state>script data state</a>.</dd>

  </dl><h5 id=plaintext-state><span class=secno>10.2.4.7 </span><dfn>PLAINTEXT state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>EOF</dt>
   <dd>Emit an end-of-file token.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Stay in the <a href=#plaintext-state>PLAINTEXT state</a>.</dd>

  </dl><h5 id=tag-open-state><span class=secno>10.2.4.8 </span><dfn>Tag open state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0021 EXCLAMATION MARK (!)</dt>
   <dd>Switch to the <a href=#markup-declaration-open-state>markup declaration open state</a>.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>Switch to the <a href=#end-tag-open-state>end tag open state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Create a new start tag token, set its tag name to the
   lowercase version of the <a href=#current-input-character>current input character</a> (add 0x0020 to the
   character's code point), then switch to the <a href=#tag-name-state>tag name
   state</a>. (Don't emit the token yet; further details will
   be filled in before it is emitted.)</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Create a new start tag token, set its tag name to the
   <a href=#current-input-character>current input character</a>, then switch to the <a href=#tag-name-state>tag
   name state</a>. (Don't emit the token yet; further details will
   be filled in before it is emitted.)</dd>

   <dt>U+003F QUESTION MARK (?)</dt>
   <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#bogus-comment-state>bogus
   comment state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit a U+003C LESS-THAN SIGN
   character token and reconsume the <a href=#current-input-character>current input
   character</a> in the <a href=#data-state>data state</a>.</dd>

  </dl><h5 id=end-tag-open-state><span class=secno>10.2.4.9 </span><dfn>End tag open state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Create a new end tag token, set its tag name to the lowercase
   version of the <a href=#current-input-character>current input character</a> (add 0x0020 to
   the character's code point), then switch to the <a href=#tag-name-state>tag name
   state</a>. (Don't emit the token yet; further details will be
   filled in before it is emitted.)</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Create a new end tag token, set its tag name to the
   <a href=#current-input-character>current input character</a>, then switch to the <a href=#tag-name-state>tag
   name state</a>. (Don't emit the token yet; further details will
   be filled in before it is emitted.)</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit a U+003C LESS-THAN SIGN
   character token and a U+002F SOLIDUS character token. Reconsume
   the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#bogus-comment-state>bogus
   comment state</a>.</dd>

  </dl><h5 id=tag-name-state><span class=secno>10.2.4.10 </span><dfn>Tag name state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Switch to the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Append the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point) to the
   current tag token's tag name. Stay in the <a href=#tag-name-state>tag name
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   tag token's tag name. Stay in the <a href=#tag-name-state>tag name state</a>.</dd>

  </dl><h5 id=rcdata-less-than-sign-state><span class=secno>10.2.4.11 </span><dfn>RCDATA less-than sign state</dfn></h5>
  <!-- identical to the RAWTEXT less-than sign state, except s/RAWTEXT/RCDATA/g -->

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   <dd>Set the <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Switch
   to the <a href=#rcdata-end-tag-open-state>RCDATA end tag open state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token and reconsume the
   <a href=#current-input-character>current input character</a> in the <a href=#rcdata-state>RCDATA
   state</a>.</dd>

  </dl><h5 id=rcdata-end-tag-open-state><span class=secno>10.2.4.12 </span><dfn>RCDATA end tag open state</dfn></h5>
  <!-- identical to the RAWTEXT (and Script data) end tag open state, except s/RAWTEXT/RCDATA/g -->

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Create a new end tag token, and set its tag name to the
   lowercase version of the <a href=#current-input-character>current input character</a> (add
   0x0020 to the character's code point). Append the <a href=#current-input-character>current
   input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   switch to the <a href=#rcdata-end-tag-name-state>RCDATA end tag name state</a>. (Don't emit
   the token yet; further details will be filled in before it is
   emitted.)</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Create a new end tag token, and set its tag name to the
   <a href=#current-input-character>current input character</a>. Append the <a href=#current-input-character>current
   input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   switch to the <a href=#rcdata-end-tag-name-state>RCDATA end tag name state</a>. (Don't emit
   the token yet; further details will be filled in before it is
   emitted.)</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   character token, and reconsume the <a href=#current-input-character>current input
   character</a> in the <a href=#rcdata-state>RCDATA state</a>.</dd>

  </dl><h5 id=rcdata-end-tag-name-state><span class=secno>10.2.4.13 </span><dfn>RCDATA end tag name state</dfn></h5>
  <!-- identical to the RAWTEXT (and Script data) end tag name state, except s/RAWTEXT/RCDATA/g -->

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then switch to the <a href=#before-attribute-name-state>before attribute name
   state</a>. Otherwise, treat it as per the "anything else" entry
   below.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then switch to the <a href=#self-closing-start-tag-state>self-closing start tag
   state</a>. Otherwise, treat it as per the "anything else" entry
   below.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then emit the current tag token and switch to the
   <a href=#data-state>data state</a>. Otherwise, treat it as per the "anything
   else" entry below.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Append the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point) to the
   current tag token's tag name. Append the <a href=#current-input-character>current input
   character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   <a href=#rcdata-end-tag-name-state>RCDATA end tag name state</a>.</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   tag token's tag name. Append the <a href=#current-input-character>current input
   character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   <a href=#rcdata-end-tag-name-state>RCDATA end tag name state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   character token, a character token for each of the characters in
   the <var><a href=#temporary-buffer>temporary buffer</a></var> (in the order they were added to
   the buffer), and reconsume the <a href=#current-input-character>current input character</a>
   in the <a href=#rcdata-state>RCDATA state</a>.</dd>

  </dl><h5 id=rawtext-less-than-sign-state><span class=secno>10.2.4.14 </span><dfn>RAWTEXT less-than sign state</dfn></h5>
  <!-- identical to the RCDATA less-than sign state, except s/RCDATA/RAWTEXT/g -->

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   <dd>Set the <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Switch
   to the <a href=#rawtext-end-tag-open-state>RAWTEXT end tag open state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token and reconsume the
   <a href=#current-input-character>current input character</a> in the <a href=#rawtext-state>RAWTEXT
   state</a>.</dd>

  </dl><h5 id=rawtext-end-tag-open-state><span class=secno>10.2.4.15 </span><dfn>RAWTEXT end tag open state</dfn></h5>
  <!-- identical to the RCDATA (and Script data) end tag open state, except s/RCDATA/RAWTEXT/g -->

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Create a new end tag token, and set its tag name to the
   lowercase version of the <a href=#current-input-character>current input character</a> (add
   0x0020 to the character's code point). Append the <a href=#current-input-character>current
   input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   switch to the <a href=#rawtext-end-tag-name-state>RAWTEXT end tag name state</a>. (Don't emit
   the token yet; further details will be filled in before it is
   emitted.)</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Create a new end tag token, and set its tag name to the
   <a href=#current-input-character>current input character</a>. Append the <a href=#current-input-character>current
   input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   switch to the <a href=#rawtext-end-tag-name-state>RAWTEXT end tag name state</a>. (Don't emit
   the token yet; further details will be filled in before it is
   emitted.)</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   character token, and reconsume the <a href=#current-input-character>current input
   character</a> in the <a href=#rawtext-state>RAWTEXT state</a>.</dd>

  </dl><h5 id=rawtext-end-tag-name-state><span class=secno>10.2.4.16 </span><dfn>RAWTEXT end tag name state</dfn></h5>
  <!-- identical to the RCDATA (and Script data) end tag name state, except s/RCDATA/RAWTEXT/g -->

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then switch to the <a href=#before-attribute-name-state>before attribute name
   state</a>. Otherwise, treat it as per the "anything else" entry
   below.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then switch to the <a href=#self-closing-start-tag-state>self-closing start tag
   state</a>. Otherwise, treat it as per the "anything else" entry
   below.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then emit the current tag token and switch to the
   <a href=#data-state>data state</a>. Otherwise, treat it as per the "anything
   else" entry below.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Append the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point) to the
   current tag token's tag name. Append the <a href=#current-input-character>current input
   character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   <a href=#rawtext-end-tag-name-state>RAWTEXT end tag name state</a>.</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   tag token's tag name. Append the <a href=#current-input-character>current input
   character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   <a href=#rawtext-end-tag-name-state>RAWTEXT end tag name state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   character token, a character token for each of the characters in
   the <var><a href=#temporary-buffer>temporary buffer</a></var> (in the order they were added to
   the buffer), and reconsume the <a href=#current-input-character>current input character</a>
   in the <a href=#rawtext-state>RAWTEXT state</a>.</dd>

  </dl><h5 id=script-data-less-than-sign-state><span class=secno>10.2.4.17 </span><dfn>Script data less-than sign state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   <dd>Set the <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Switch
   to the <a href=#script-data-end-tag-open-state>script data end tag open state</a>.</dd>

   <dt>U+0021 EXCLAMATION MARK (!)</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token and a U+0021
   EXCLAMATION MARK character token. Switch to the <a href=#script-data-escape-start-state>script data
   escape start state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token and reconsume the
   <a href=#current-input-character>current input character</a> in the <a href=#script-data-state>script data
   state</a>.</dd>

  </dl><h5 id=script-data-end-tag-open-state><span class=secno>10.2.4.18 </span><dfn>Script data end tag open state</dfn></h5>
  <!-- identical to the RCDATA (and RAWTEXT) end tag open state, except s/RCDATA/Script data/g -->

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Create a new end tag token, and set its tag name to the
   lowercase version of the <a href=#current-input-character>current input character</a> (add
   0x0020 to the character's code point). Append the <a href=#current-input-character>current
   input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   switch to the <a href=#script-data-end-tag-name-state>script data end tag name state</a>. (Don't emit
   the token yet; further details will be filled in before it is
   emitted.)</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Create a new end tag token, and set its tag name to the
   <a href=#current-input-character>current input character</a>. Append the <a href=#current-input-character>current
   input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   switch to the <a href=#script-data-end-tag-name-state>script data end tag name state</a>. (Don't emit
   the token yet; further details will be filled in before it is
   emitted.)</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   character token, and reconsume the <a href=#current-input-character>current input
   character</a> in the <a href=#script-data-state>script data state</a>.</dd>

  </dl><h5 id=script-data-end-tag-name-state><span class=secno>10.2.4.19 </span><dfn>Script data end tag name state</dfn></h5>
  <!-- identical to the RCDATA (and RAWTEXT) end tag name state, except s/RCDATA/Script data/g -->

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then switch to the <a href=#before-attribute-name-state>before attribute name
   state</a>. Otherwise, treat it as per the "anything else" entry
   below.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then switch to the <a href=#self-closing-start-tag-state>self-closing start tag
   state</a>. Otherwise, treat it as per the "anything else" entry
   below.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then emit the current tag token and switch to the
   <a href=#data-state>data state</a>. Otherwise, treat it as per the "anything
   else" entry below.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Append the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point) to the
   current tag token's tag name. Append the <a href=#current-input-character>current input
   character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   <a href=#script-data-end-tag-name-state>script data end tag name state</a>.</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   tag token's tag name. Append the <a href=#current-input-character>current input
   character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   <a href=#script-data-end-tag-name-state>script data end tag name state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   character token, a character token for each of the characters in
   the <var><a href=#temporary-buffer>temporary buffer</a></var> (in the order they were added to
   the buffer), and reconsume the <a href=#current-input-character>current input character</a>
   in the <a href=#script-data-state>script data state</a>.</dd>

  </dl><h5 id=script-data-escape-start-state><span class=secno>10.2.4.20 </span><dfn>Script data escape start state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   <a href=#script-data-escape-start-dash-state>script data escape start dash state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   <a href=#script-data-state>script data state</a>.</dd>

  </dl><h5 id=script-data-escape-start-dash-state><span class=secno>10.2.4.21 </span><dfn>Script data escape start dash state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   <a href=#script-data-escaped-dash-dash-state>script data escaped dash dash state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   <a href=#script-data-state>script data state</a>.</dd>

  </dl><h5 id=script-data-escaped-state><span class=secno>10.2.4.22 </span><dfn>Script data escaped state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   <a href=#script-data-escaped-dash-state>script data escaped dash state</a>.</dd>

   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd><p>Switch to the <a href=#script-data-escaped-less-than-sign-state>script data escaped less-than sign
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Stay in the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>

  </dl><h5 id=script-data-escaped-dash-state><span class=secno>10.2.4.23 </span><dfn>Script data escaped dash state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   <a href=#script-data-escaped-dash-dash-state>script data escaped dash dash state</a>.</dd>

   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd><p>Switch to the <a href=#script-data-escaped-less-than-sign-state>script data escaped less-than sign
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Switch to the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>

  </dl><h5 id=script-data-escaped-dash-dash-state><span class=secno>10.2.4.24 </span><dfn>Script data escaped dash dash state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Emit a U+002D HYPHEN-MINUS character token. Stay in the
   <a href=#script-data-escaped-dash-dash-state>script data escaped dash dash state</a>.</dd>

   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd><p>Switch to the <a href=#script-data-escaped-less-than-sign-state>script data escaped less-than sign
   state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit a U+003E GREATER-THAN SIGN character token. Switch to the
   <a href=#script-data-state>script data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Switch to the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>

  </dl><h5 id=script-data-escaped-less-than-sign-state><span class=secno>10.2.4.25 </span><dfn>Script data escaped less-than sign state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   <dd>Set the <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Switch
   to the <a href=#script-data-escaped-end-tag-open-state>script data escaped end tag open state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token and the
   <a href=#current-input-character>current input character</a> as a character token. Set the
   <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Append the
   lowercase version of the <a href=#current-input-character>current input character</a> (add
   0x0020 to the character's code point) to the <var><a href=#temporary-buffer>temporary
   buffer</a></var>. Switch to the <a href=#script-data-double-escape-start-state>script data double escape start
   state</a>.</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token and the
   <a href=#current-input-character>current input character</a> as a character token. Set the
   <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Append the
   <a href=#current-input-character>current input character</a> to the <var><a href=#temporary-buffer>temporary
   buffer</a></var>. Switch to the <a href=#script-data-double-escape-start-state>script data double escape start
   state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token and reconsume the
   <a href=#current-input-character>current input character</a> in the <a href=#script-data-escaped-state>script data
   escaped state</a>.</dd>

  </dl><h5 id=script-data-escaped-end-tag-open-state><span class=secno>10.2.4.26 </span><dfn>Script data escaped end tag open state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Create a new end tag token, and set its tag name to the
   lowercase version of the <a href=#current-input-character>current input character</a> (add
   0x0020 to the character's code point). Append the <a href=#current-input-character>current
   input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   switch to the <a href=#script-data-escaped-end-tag-name-state>script data escaped end tag name
   state</a>. (Don't emit the token yet; further details will be
   filled in before it is emitted.)</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Create a new end tag token, and set its tag name to the
   <a href=#current-input-character>current input character</a>. Append the <a href=#current-input-character>current
   input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   switch to the <a href=#script-data-escaped-end-tag-name-state>script data escaped end tag name
   state</a>. (Don't emit the token yet; further details will be
   filled in before it is emitted.)</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   character token, and reconsume the <a href=#current-input-character>current input
   character</a> in the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>

  </dl><h5 id=script-data-escaped-end-tag-name-state><span class=secno>10.2.4.27 </span><dfn>Script data escaped end tag name state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then switch to the <a href=#before-attribute-name-state>before attribute name
   state</a>. Otherwise, treat it as per the "anything else" entry
   below.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then switch to the <a href=#self-closing-start-tag-state>self-closing start tag
   state</a>. Otherwise, treat it as per the "anything else" entry
   below.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   token</a>, then emit the current tag token and switch to the
   <a href=#data-state>data state</a>. Otherwise, treat it as per the "anything
   else" entry below.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Append the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point) to the
   current tag token's tag name. Append the <a href=#current-input-character>current input
   character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   <a href=#script-data-escaped-end-tag-name-state>script data escaped end tag name state</a>.</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   tag token's tag name. Append the <a href=#current-input-character>current input
   character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   <a href=#script-data-escaped-end-tag-name-state>script data escaped end tag name state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   character token, a character token for each of the characters in
   the <var><a href=#temporary-buffer>temporary buffer</a></var> (in the order they were added to
   the buffer), and reconsume the <a href=#current-input-character>current input character</a>
   in the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>

  </dl><h5 id=script-data-double-escape-start-state><span class=secno>10.2.4.28 </span><dfn>Script data double escape start state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dt>U+002F SOLIDUS (/)</dt>
   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. If the <var><a href=#temporary-buffer>temporary buffer</a></var> is the string "<code title="">script</code>", then switch to the <a href=#script-data-double-escaped-state>script data
   double escaped state</a>. Otherwise, switch to the <a href=#script-data-escaped-state>script
   data escaped state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Append the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point) to the
   <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the <a href=#script-data-double-escape-start-state>script data double
   escape start state</a>.</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Append the <a href=#current-input-character>current input character</a> to the
   <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the <a href=#script-data-double-escape-start-state>script data double
   escape start state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   <a href=#script-data-escaped-state>script data escaped state</a>.</dd>

  </dl><h5 id=script-data-double-escaped-state><span class=secno>10.2.4.29 </span><dfn>Script data double escaped state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   <a href=#script-data-double-escaped-dash-state>script data double escaped dash state</a>.</dd>

   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd><p>Emit a U+003C LESS-THAN SIGN character token. Switch to the
   <a href=#script-data-double-escaped-less-than-sign-state>script data double escaped less-than sign
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Stay in the <a href=#script-data-double-escaped-state>script data double escaped
   state</a>.</dd>

  </dl><h5 id=script-data-double-escaped-dash-state><span class=secno>10.2.4.30 </span><dfn>Script data double escaped dash state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   <a href=#script-data-double-escaped-dash-dash-state>script data double escaped dash dash state</a>.</dd>

   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd><p>Emit a U+003C LESS-THAN SIGN character token. Switch to the
   <a href=#script-data-double-escaped-less-than-sign-state>script data double escaped less-than sign
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Switch to the <a href=#script-data-double-escaped-state>script data double escaped
   state</a>.</dd>

  </dl><h5 id=script-data-double-escaped-dash-dash-state><span class=secno>10.2.4.31 </span><dfn>Script data double escaped dash dash state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Emit a U+002D HYPHEN-MINUS character token. Stay in the
   <a href=#script-data-double-escaped-dash-dash-state>script data double escaped dash dash state</a>.</dd>

   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd><p>Emit a U+003C LESS-THAN SIGN character token. Switch to the
   <a href=#script-data-double-escaped-less-than-sign-state>script data double escaped less-than sign
   state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit a U+003E GREATER-THAN SIGN character token. Switch to the
   <a href=#script-data-state>script data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Switch to the <a href=#script-data-double-escaped-state>script data double escaped
   state</a>.</dd>

  </dl><h5 id=script-data-double-escaped-less-than-sign-state><span class=secno>10.2.4.32 </span><dfn>Script data double escaped less-than sign state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   <dd>Emit a U+002F SOLIDUS character token. Set the <var><a href=#temporary-buffer>temporary
   buffer</a></var> to the empty string. Switch to the <a href=#script-data-double-escape-end-state>script data
   double escape end state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   <a href=#script-data-double-escaped-state>script data double escaped state</a>.</dd>

  </dl><h5 id=script-data-double-escape-end-state><span class=secno>10.2.4.33 </span><dfn>Script data double escape end state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dt>U+002F SOLIDUS (/)</dt>
   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. If the <var><a href=#temporary-buffer>temporary buffer</a></var> is the string "<code title="">script</code>", then switch to the <a href=#script-data-escaped-state>script data
   escaped state</a>. Otherwise, switch to the <a href=#script-data-double-escaped-state>script data
   double escaped state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Append the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point) to the
   <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the <a href=#script-data-double-escape-end-state>script data double
   escape end state</a>.</dd>

   <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   token. Append the <a href=#current-input-character>current input character</a> to the
   <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the <a href=#script-data-double-escape-end-state>script data double
   escape end state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   <a href=#script-data-double-escaped-state>script data double escaped state</a>.</dd>

  </dl><h5 id=before-attribute-name-state><span class=secno>10.2.4.34 </span><dfn>Before attribute name state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Stay in the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Start a new attribute in the current tag token. Set that
   attribute's name to the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point), and its
   value to the empty string. Switch to the <a href=#attribute-name-state>attribute name
   state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dt>U+0027 APOSTROPHE (')</dt>
   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dt>U+003D EQUALS SIGN (=)</dt>
   <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   entry below.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Start a new attribute in the current tag token. Set that
   attribute's name to the <a href=#current-input-character>current input character</a>, and its value to
   the empty string. Switch to the <a href=#attribute-name-state>attribute name
   state</a>.</dd>

  </dl><h5 id=attribute-name-state><span class=secno>10.2.4.35 </span><dfn>Attribute name state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Switch to the <a href=#after-attribute-name-state>after attribute name state</a>.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>

   <dt>U+003D EQUALS SIGN (=)</dt>
   <dd>Switch to the <a href=#before-attribute-value-state>before attribute value state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Append the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point) to the
   current attribute's name. Stay in the <a href=#attribute-name-state>attribute name
   state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dt>U+0027 APOSTROPHE (')</dt>
   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   entry below.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   attribute's name. Stay in the <a href=#attribute-name-state>attribute name
   state</a>.</dd>

  </dl><p>When the user agent leaves the attribute name state (and before
  emitting the tag token, if appropriate), the complete attribute's
  name must be compared to the other attributes on the same token;
  if there is already an attribute on the token with the exact same
  name, then this is a <a href=#parse-error>parse error</a> and the new
  attribute must be dropped, along with the value that gets
  associated with it (if any).</p>


  <h5 id=after-attribute-name-state><span class=secno>10.2.4.36 </span><dfn>After attribute name state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Stay in the <a href=#after-attribute-name-state>after attribute name state</a>.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>

   <dt>U+003D EQUALS SIGN (=)</dt>
   <dd>Switch to the <a href=#before-attribute-value-state>before attribute value state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Start a new attribute in the current tag token. Set that
   attribute's name to the lowercase version of the <a href=#current-input-character>current
   input character</a> (add 0x0020 to the character's code point),
   and its value to the empty string. Switch to the <a href=#attribute-name-state>attribute
   name state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dt>U+0027 APOSTROPHE (')</dt>
   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   entry below.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Start a new attribute in the current tag token. Set that
   attribute's name to the <a href=#current-input-character>current input character</a>, and
   its value to the empty string. Switch to the <a href=#attribute-name-state>attribute name
   state</a>.</dd>

  </dl><h5 id=before-attribute-value-state><span class=secno>10.2.4.37 </span><dfn>Before attribute value state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Stay in the <a href=#before-attribute-value-state>before attribute value state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dd>Switch to the <a href=#attribute-value-(double-quoted)-state>attribute value (double-quoted) state</a>.</dd>

   <dt>U+0026 AMPERSAND (&amp;)</dt>
   <dd>Switch to the <a href=#attribute-value-(unquoted)-state>attribute value (unquoted) state</a>
   and reconsume this <a href=#current-input-character>current input character</a>.</dd>

   <dt>U+0027 APOSTROPHE (')</dt>
   <dd>Switch to the <a href=#attribute-value-(single-quoted)-state>attribute value (single-quoted) state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the current tag token. Switch to
   the <a href=#data-state>data state</a>.</dd>

   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dt>U+003D EQUALS SIGN (=)</dt>
   <dt>U+0060 GRAVE ACCENT (`)</dt>
   <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   entry below.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   attribute's value. Switch to the <a href=#attribute-value-(unquoted)-state>attribute value (unquoted)
   state</a>.</dd>

  </dl><h5 id=attribute-value-(double-quoted)-state><span class=secno>10.2.4.38 </span><dfn>Attribute value (double-quoted) state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0022 QUOTATION MARK (")</dt>
   <dd>Switch to the <a href=#after-attribute-value-(quoted)-state>after attribute value (quoted)
   state</a>.</dd>

   <dt>U+0026 AMPERSAND (&amp;)</dt>
   <dd>Switch to the <a href=#character-reference-in-attribute-value-state>character reference in attribute value
   state</a>, with the <a href=#additional-allowed-character>additional allowed character</a>
   being U+0022 QUOTATION MARK (").</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   attribute's value. Stay in the <a href=#attribute-value-(double-quoted)-state>attribute value
   (double-quoted) state</a>.</dd>

  </dl><h5 id=attribute-value-(single-quoted)-state><span class=secno>10.2.4.39 </span><dfn>Attribute value (single-quoted) state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0027 APOSTROPHE (')</dt>
   <dd>Switch to the <a href=#after-attribute-value-(quoted)-state>after attribute value (quoted)
   state</a>.</dd>

   <dt>U+0026 AMPERSAND (&amp;)</dt>
   <dd>Switch to the <a href=#character-reference-in-attribute-value-state>character reference in attribute value
   state</a>, with the <a href=#additional-allowed-character>additional allowed character</a>
   being U+0027 APOSTROPHE (').</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   attribute's value. Stay in the <a href=#attribute-value-(single-quoted)-state>attribute value
   (single-quoted) state</a>.</dd>

  </dl><h5 id=attribute-value-(unquoted)-state><span class=secno>10.2.4.40 </span><dfn>Attribute value (unquoted) state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Switch to the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>

   <dt>U+0026 AMPERSAND (&amp;)</dt>
   <dd>Switch to the <a href=#character-reference-in-attribute-value-state>character reference in attribute value
   state</a>, with the <a href=#additional-allowed-character>additional allowed character</a>
   being U+003E GREATER-THAN SIGN (&gt;).</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dt>U+0027 APOSTROPHE (')</dt>
   <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   <dt>U+003D EQUALS SIGN (=)</dt>
   <dt>U+0060 GRAVE ACCENT (`)</dt>
   <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   entry below.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   attribute's value. Stay in the <a href=#attribute-value-(unquoted)-state>attribute value (unquoted)
   state</a>.</dd>

  </dl><h5 id=character-reference-in-attribute-value-state><span class=secno>10.2.4.41 </span><dfn>Character reference in attribute value state</dfn></h5>

  <p>Attempt to <a href=#consume-a-character-reference>consume a character reference</a>.</p>

  <p>If nothing is returned, append a U+0026 AMPERSAND character to
  the current attribute's value.</p>

  <p>Otherwise, append the returned character token to the current
  attribute's value.</p>

  <p>Finally, switch back to the attribute value state that you were
  in when were switched into this state.</p>


  <h5 id=after-attribute-value-(quoted)-state><span class=secno>10.2.4.42 </span><dfn>After attribute value (quoted) state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Switch to the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>

   <dt>U+002F SOLIDUS (/)</dt>
   <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the character in
   the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>

  </dl><h5 id=self-closing-start-tag-state><span class=secno>10.2.4.43 </span><dfn>Self-closing start tag state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Set the <i>self-closing flag</i> of the current tag
   token. Emit the current tag token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the character in
   the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>

  </dl><h5 id=bogus-comment-state><span class=secno>10.2.4.44 </span><dfn>Bogus comment state</dfn></h5>

  <p>Consume every character up to and including the first U+003E
  GREATER-THAN SIGN character (&gt;) or the end of the file (EOF),
  whichever comes first. Emit a comment token whose data is the
  concatenation of all the characters starting from and including
  the character that caused the state machine to switch into the
  bogus comment state, up to and including the character immediately
  before the last consumed character (i.e. up to the character just
  before the U+003E or EOF character). (If the comment was started
  by the end of the file (EOF), the token is empty.)</p>

  <p>Switch to the <a href=#data-state>data state</a>.</p>

  <p>If the end of the file was reached, reconsume the EOF
  character.</p>


  <h5 id=markup-declaration-open-state><span class=secno>10.2.4.45 </span><dfn>Markup declaration open state</dfn></h5>

  <p>If the next two characters are both U+002D HYPHEN-MINUS
  characters (-), consume those two characters, create a comment token
  whose data is the empty string, and switch to the <a href=#comment-start-state>comment
  start state</a>.</p>

  <p>Otherwise, if the next seven characters are an <a href=#ascii-case-insensitive>ASCII
  case-insensitive</a> match for the word "DOCTYPE", then consume
  those characters and switch to the <a href=#doctype-state>DOCTYPE state</a>.</p>

  <p>Otherwise, if the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
  content</a>" and the <a href=#current-node>current node</a> is not an element
  in the <a href=#html-namespace-0>HTML namespace</a> and the next seven characters are
  an <a href=#case-sensitive>case-sensitive</a> match for the string "[CDATA[" (the
  five uppercase letters "CDATA" with a U+005B LEFT SQUARE BRACKET
  character before and after), then consume those characters and
  switch to the <a href=#cdata-section-state>CDATA section state</a>.</p>

  <p>Otherwise, this is a <a href=#parse-error>parse error</a>. Switch to the
  <a href=#bogus-comment-state>bogus comment state</a>. The next character that is
  consumed, if any, is the first character that will be in the
  comment.</p>


  <h5 id=comment-start-state><span class=secno>10.2.4.46 </span><dfn>Comment start state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Switch to the <a href=#comment-start-dash-state>comment start dash state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Switch to the
   <a href=#data-state>data state</a>.</dd> <!-- see comment in comment end state
   -->

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume
   the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the comment
   token's data. Switch to the <a href=#comment-state>comment state</a>.</dd>

  </dl><h5 id=comment-start-dash-state><span class=secno>10.2.4.47 </span><dfn>Comment start dash state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Switch to the <a href=#comment-end-state>comment end state</a></dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Switch to
   the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume the
   EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see comment
   in comment end state -->

   <dt>Anything else</dt>
   <dd>Append a U+002D HYPHEN-MINUS character (-) and the
   <a href=#current-input-character>current input character</a> to the comment token's
   data. Switch to the <a href=#comment-state>comment state</a>.</dd>

  </dl><h5 id=comment-state><span class=secno>10.2.4.48 </span><dfn id=comment>Comment state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Switch to the <a href=#comment-end-dash-state>comment end dash state</a></dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume the
   EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see comment
   in comment end state -->

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the comment
   token's data. Stay in the <a href=#comment-state>comment state</a>.</dd>

  </dl><h5 id=comment-end-dash-state><span class=secno>10.2.4.49 </span><dfn>Comment end dash state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Switch to the <a href=#comment-end-state>comment end state</a></dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume the
   EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see comment
   in comment end state -->

   <dt>Anything else</dt>
   <dd>Append a U+002D HYPHEN-MINUS character (-) and the
   <a href=#current-input-character>current input character</a> to the comment token's
   data. Switch to the <a href=#comment-state>comment state</a>.</dd>

  </dl><h5 id=comment-end-state><span class=secno>10.2.4.50 </span><dfn>Comment end state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the comment token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd><a href=#parse-error>Parse error</a>. Append two U+002D HYPHEN-MINUS
   characters (-) and the <a href=#current-input-character>current input character</a> to the
   comment token's data. Switch to the <a href=#comment-end-space-state>comment end space
   state</a>.</dd>

   <dt>U+0021 EXCLAMATION MARK (!)</dt>
   <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#comment-end-bang-state>comment end bang
   state</a>.</dd>

   <dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd><a href=#parse-error>Parse error</a>. Append a U+002D HYPHEN-MINUS
   character (-) to the comment token's data. Stay in the
   <a href=#comment-end-state>comment end state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume
   the EOF character in the <a href=#data-state>data state</a>.</dd> <!-- For
   security reasons: otherwise, hostile user could put a <script> in
   a comment e.g. in a blog comment and then DOS the server so that
   the end tag isn't read, and then the commented <script> tag would
   be treated as live code -->

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Append two U+002D HYPHEN-MINUS
   characters (-) and the <a href=#current-input-character>current input character</a> to the
   comment token's data. Switch to the <a href=#comment-state>comment
   state</a>.</dd>

  </dl><h5 id=comment-end-bang-state><span class=secno>10.2.4.51 </span><dfn>Comment end bang state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Append two U+002D HYPHEN-MINUS characters (-) and a U+0021
   EXCLAMATION MARK character (!) to the comment token's data. Switch
   to the <a href=#comment-end-dash-state>comment end dash state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the comment token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume
   the EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see
   comment in comment end state -->

   <dt>Anything else</dt>
   <dd>Append two U+002D HYPHEN-MINUS characters (-), a U+0021
   EXCLAMATION MARK character (!), and the <a href=#current-input-character>current input
   character</a> to the comment token's data. Switch to the
   <a href=#comment-state>comment state</a>.</dd>

  </dl><h5 id=comment-end-space-state><span class=secno>10.2.4.52 </span><dfn>Comment end space state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the comment token's data. Stay in
   the <a href=#comment-end-space-state>comment end space state</a>.</dd>

   <dt>U+002D HYPHEN-MINUS (-)</dt>
   <dd>Switch to the <a href=#comment-end-dash-state>comment end dash state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the comment token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume
   the EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see
   comment in comment end state -->

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the comment token's data. Switch
   to the <a href=#comment-state>comment state</a>.</dd>

  </dl><h5 id=doctype-state><span class=secno>10.2.4.53 </span><dfn>DOCTYPE state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Switch to the <a href=#before-doctype-name-state>before DOCTYPE name state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Create a new DOCTYPE token. Set its
   <i>force-quirks flag</i> to <i>on</i>. Emit the token. Reconsume
   the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Reconsume the character in the
   <a href=#before-doctype-name-state>before DOCTYPE name state</a>.</dd>

  </dl><h5 id=before-doctype-name-state><span class=secno>10.2.4.54 </span><dfn>Before DOCTYPE name state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Stay in the <a href=#before-doctype-name-state>before DOCTYPE name state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Create a new DOCTYPE token. Set the token's name to the
   lowercase version of the <a href=#current-input-character>current input character</a> (add 0x0020 to the
   character's code point). Switch to the <a href=#doctype-name-state>DOCTYPE name
   state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Create a new DOCTYPE token. Set its
   <i>force-quirks flag</i> to <i>on</i>. Emit the token. Switch to
   the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Create a new DOCTYPE token. Set its
   <i>force-quirks flag</i> to <i>on</i>. Emit the token. Reconsume
   the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Create a new DOCTYPE token. Set the token's name to the
   <a href=#current-input-character>current input character</a>. Switch to the <a href=#doctype-name-state>DOCTYPE name
   state</a>.</dd>

  </dl><h5 id=doctype-name-state><span class=secno>10.2.4.55 </span><dfn>DOCTYPE name state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Switch to the <a href=#after-doctype-name-state>after DOCTYPE name state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   <dd>Append the lowercase version of the <a href=#current-input-character>current input
   character</a> (add 0x0020 to the character's code point) to the
   current DOCTYPE token's name. Stay in the <a href=#doctype-name-state>DOCTYPE name
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   DOCTYPE token's name. Stay in the <a href=#doctype-name-state>DOCTYPE name
   state</a>.</dd>

  </dl><h5 id=after-doctype-name-state><span class=secno>10.2.4.56 </span><dfn>After DOCTYPE name state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Stay in the <a href=#after-doctype-name-state>after DOCTYPE name state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>

    <p>If the six characters starting from the <a href=#current-input-character>current input
    character</a> are an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match
    for the word "PUBLIC", then consume those characters and switch to
    the <a href=#after-doctype-public-keyword-state>after DOCTYPE public keyword state</a>.</p>

    <p>Otherwise, if the six characters starting from the
    <a href=#current-input-character>current input character</a> are an <a href=#ascii-case-insensitive>ASCII
    case-insensitive</a> match for the word "SYSTEM", then consume
    those characters and switch to the <a href=#after-doctype-system-keyword-state>after DOCTYPE system
    keyword state</a>.</p>

    <p>Otherwise, this is the <a href=#parse-error>parse error</a>. Set the
    DOCTYPE token's <i>force-quirks flag</i> to <i>on</i>. Switch to
    the <a href=#bogus-doctype-state>bogus DOCTYPE state</a>.</p>

   </dd>

  </dl><h5 id=after-doctype-public-keyword-state><span class=secno>10.2.4.57 </span><dfn>After DOCTYPE public keyword state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Switch to the <a href=#before-doctype-public-identifier-state>before DOCTYPE public identifier
   state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's public
   identifier to the empty string (not missing), then switch to the
   <a href=#doctype-public-identifier-(double-quoted)-state>DOCTYPE public identifier (double-quoted) state</a>.</dd>

   <dt>U+0027 APOSTROPHE (')</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's public
   identifier to the empty string (not missing), then switch to the
   <a href=#doctype-public-identifier-(single-quoted)-state>DOCTYPE public identifier (single-quoted) state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   token. Switch to the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   DOCTYPE state</a>.</dd>

  </dl><h5 id=before-doctype-public-identifier-state><span class=secno>10.2.4.58 </span><dfn>Before DOCTYPE public identifier state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Stay in the <a href=#before-doctype-public-identifier-state>before DOCTYPE public identifier state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dd>Set the DOCTYPE token's public identifier to the empty string
   (not missing), then switch to the <a href=#doctype-public-identifier-(double-quoted)-state>DOCTYPE public identifier
   (double-quoted) state</a>.</dd>

   <dt>U+0027 APOSTROPHE (')</dt>
   <dd>Set the DOCTYPE token's public identifier to the empty string
   (not missing), then switch to the <a href=#doctype-public-identifier-(single-quoted)-state>DOCTYPE public identifier
   (single-quoted) state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   token. Switch to the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   DOCTYPE state</a>.</dd>

  </dl><h5 id=doctype-public-identifier-(double-quoted)-state><span class=secno>10.2.4.59 </span><dfn>DOCTYPE public identifier (double-quoted) state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0022 QUOTATION MARK (")</dt>
   <dd>Switch to the <a href=#after-doctype-public-identifier-state>after DOCTYPE public identifier state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   token. Switch to the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current DOCTYPE
   token's public identifier. Stay in the <a href=#doctype-public-identifier-(double-quoted)-state>DOCTYPE public
   identifier (double-quoted) state</a>.</dd>

  </dl><h5 id=doctype-public-identifier-(single-quoted)-state><span class=secno>10.2.4.60 </span><dfn>DOCTYPE public identifier (single-quoted) state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0027 APOSTROPHE (')</dt>
   <dd>Switch to the <a href=#after-doctype-public-identifier-state>after DOCTYPE public identifier state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   token. Switch to the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current DOCTYPE
   token's public identifier. Stay in the <a href=#doctype-public-identifier-(single-quoted)-state>DOCTYPE public
   identifier (single-quoted) state</a>.</dd>

  </dl><h5 id=after-doctype-public-identifier-state><span class=secno>10.2.4.61 </span><dfn>After DOCTYPE public identifier state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Switch to the <a href=#between-doctype-public-and-system-identifiers-state>between DOCTYPE public and system
   identifiers state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's system
   identifier to the empty string (not missing), then switch to the
   <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system identifier (double-quoted) state</a>.</dd>

   <dt>U+0027 APOSTROPHE (')</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's system
   identifier to the empty string (not missing), then switch to the
   <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system identifier (single-quoted) state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   DOCTYPE state</a>.</dd>

  </dl><h5 id=between-doctype-public-and-system-identifiers-state><span class=secno>10.2.4.62 </span><dfn>Between DOCTYPE public and system identifiers state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Stay in the <a href=#between-doctype-public-and-system-identifiers-state>between DOCTYPE public and system identifiers
   state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dd>Set the DOCTYPE token's system identifier to the empty string
   (not missing), then switch to the <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system identifier
   (double-quoted) state</a>.</dd>

   <dt>U+0027 APOSTROPHE (')</dt>
   <dd>Set the DOCTYPE token's system identifier to the empty string
   (not missing), then switch to the <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system identifier
   (single-quoted) state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   DOCTYPE state</a>.</dd>

  </dl><h5 id=after-doctype-system-keyword-state><span class=secno>10.2.4.63 </span><dfn>After DOCTYPE system keyword state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Switch to the <a href=#before-doctype-system-identifier-state>before DOCTYPE system identifier
   state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's system
   identifier to the empty string (not missing), then switch to the
   <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system identifier (double-quoted) state</a>.</dd>

   <dt>U+0027 APOSTROPHE (')</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's system
   identifier to the empty string (not missing), then switch to the
   <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system identifier (single-quoted) state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   token. Switch to the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   DOCTYPE state</a>.</dd>

  </dl><h5 id=before-doctype-system-identifier-state><span class=secno>10.2.4.64 </span><dfn>Before DOCTYPE system identifier state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Stay in the <a href=#before-doctype-system-identifier-state>before DOCTYPE system identifier state</a>.</dd>

   <dt>U+0022 QUOTATION MARK (")</dt>
   <dd>Set the DOCTYPE token's system identifier to the empty string
   (not missing), then switch to the <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system identifier
   (double-quoted) state</a>.</dd>

   <dt>U+0027 APOSTROPHE (')</dt>
   <dd>Set the DOCTYPE token's system identifier to the empty string
   (not missing), then switch to the <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system identifier
   (single-quoted) state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   token. Switch to the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   DOCTYPE state</a>.</dd>

  </dl><h5 id=doctype-system-identifier-(double-quoted)-state><span class=secno>10.2.4.65 </span><dfn>DOCTYPE system identifier (double-quoted) state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0022 QUOTATION MARK (")</dt>
   <dd>Switch to the <a href=#after-doctype-system-identifier-state>after DOCTYPE system identifier
   state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   token. Switch to the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   DOCTYPE token's system identifier. Stay in the <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system
   identifier (double-quoted) state</a>.</dd>

  </dl><h5 id=doctype-system-identifier-(single-quoted)-state><span class=secno>10.2.4.66 </span><dfn>DOCTYPE system identifier (single-quoted) state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0027 APOSTROPHE (')</dt>
   <dd>Switch to the <a href=#after-doctype-system-identifier-state>after DOCTYPE system identifier
   state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   token. Switch to the <a href=#data-state>data state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Append the <a href=#current-input-character>current input character</a> to the current
   DOCTYPE token's system identifier. Stay in the <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system
   identifier (single-quoted) state</a>.</dd>

  </dl><h5 id=after-doctype-system-identifier-state><span class=secno>10.2.4.67 </span><dfn>After DOCTYPE system identifier state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dd>Stay in the <a href=#after-doctype-system-identifier-state>after DOCTYPE system identifier
   state</a>.</dd>

   <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>EOF</dt>
   <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#bogus-doctype-state>bogus DOCTYPE
   state</a>. (This does <em>not</em> set the DOCTYPE token's
   <i>force-quirks flag</i> to <i>on</i>.)</dd>

  </dl><h5 id=bogus-doctype-state><span class=secno>10.2.4.68 </span><dfn>Bogus DOCTYPE state</dfn></h5>

  <p>Consume the <a href=#next-input-character>next input character</a>:</p>

  <dl class=switch><dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   <dd>Emit the DOCTYPE token. Switch to the <a href=#data-state>data
   state</a>.</dd>

   <dt>EOF</dt>
   <dd>Emit the DOCTYPE token. Reconsume the EOF character in the
   <a href=#data-state>data state</a>.</dd>

   <dt>Anything else</dt>
   <dd>Stay in the <a href=#bogus-doctype-state>bogus DOCTYPE state</a>.</dd>

  </dl><h5 id=cdata-section-state><span class=secno>10.2.4.69 </span><dfn>CDATA section state</dfn></h5>

  <p>Consume every character up to the next occurrence of the three
  character sequence U+005D RIGHT SQUARE BRACKET U+005D RIGHT SQUARE
  BRACKET U+003E GREATER-THAN SIGN (<code title="">]]&gt;</code>), or the
  end of the file (EOF), whichever comes first. Emit a series of
  character tokens consisting of all the characters consumed except
  the matching three character sequence at the end (if one was found
  before the end of the file).</p>

  <p>Switch to the <a href=#data-state>data state</a>.</p>

  <p>If the end of the file was reached, reconsume the EOF
  character.</p>



  <h5 id=tokenizing-character-references><span class=secno>10.2.4.70 </span>Tokenizing character references</h5>

  <p>This section defines how to <dfn id=consume-a-character-reference>consume a character
  reference</dfn>. This definition is used when parsing character
  references <a href=#character-reference-in-data-state title="character reference in data state">in
  text</a> and <a href=#character-reference-in-attribute-value-state title="character reference in attribute value
  state">in attributes</a>.</p>

  <p>The behavior depends on the identity of the next character (the
  one immediately after the U+0026 AMPERSAND character):</p>

  <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   <dt>U+000A LINE FEED (LF)</dt>
   <dt>U+000C FORM FEED (FF)</dt>
   <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   <dt>U+0020 SPACE</dt>
   <dt>U+003C LESS-THAN SIGN</dt>
   <dt>U+0026 AMPERSAND</dt>
   <dt>EOF</dt>
   <dt>The <dfn id=additional-allowed-character>additional allowed character</dfn>, if there is one</dt>

   <dd>Not a character reference. No characters are consumed, and
   nothing is returned. (This is not an error, either.)</dd>


   <dt>U+0023 NUMBER SIGN (#)</dt>

   <dd>

    <p>Consume the U+0023 NUMBER SIGN.</p>

    <p>The behavior further depends on the character after the U+0023
    NUMBER SIGN:</p>

    <dl class=switch><dt>U+0078 LATIN SMALL LETTER X</dt>
     <dt>U+0058 LATIN CAPITAL LETTER X</dt>

     <dd>

      <p>Consume the X.</p>

      <p>Follow the steps below, but using the range of characters
      U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061 LATIN
      SMALL LETTER A to U+0066 LATIN SMALL LETTER F, and U+0041 LATIN
      CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F (in other
      words, 0-9, A-F, a-f).</p>

      <p>When it comes to interpreting the number, interpret it as a
      hexadecimal number.</p>

     </dd>


     <dt>Anything else</dt>

     <dd>

      <p>Follow the steps below, but using the range of characters
      U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9).</p>

      <p>When it comes to interpreting the number, interpret it as a
      decimal number.</p>

     </dd>

    </dl><p>Consume as many characters as match the range of characters
    given above.</p>

    <p>If no characters match the range, then don't consume any
    characters (and unconsume the U+0023 NUMBER SIGN character and, if
    appropriate, the X character). This is a <a href=#parse-error>parse
    error</a>; nothing is returned.</p>

    <p>Otherwise, if the next character is a U+003B SEMICOLON, consume
    that too. If it isn't, there is a <a href=#parse-error>parse
    error</a>.</p>

    <p>If one or more characters match the range, then take them all
    and interpret the string of characters as a number (either
    hexadecimal or decimal as appropriate).</p>

    <p>If that number is one of the numbers in the first column of the
    following table, then this is a <a href=#parse-error>parse error</a>. Find the
    row with that number in the first column, and return a character
    token for the Unicode character given in the second column of that
    row.</p>

    <table><thead><tr><th>Number <th colspan=2>Unicode character
     <tbody><tr><td>0x00 <td>U+FFFD <td>REPLACEMENT CHARACTER
      <tr><td>0x0D <td>U+000D <td>CARRIAGE RETURN (CR)
      <tr><td>0x80 <td>U+20AC <td>EURO SIGN (&euro;)
      <tr><td>0x81 <td>U+0081 <td>&lt;control&gt;
      <tr><td>0x82 <td>U+201A <td>SINGLE LOW-9 QUOTATION MARK (&sbquo;)
      <tr><td>0x83 <td>U+0192 <td>LATIN SMALL LETTER F WITH HOOK (&fnof;)
      <tr><td>0x84 <td>U+201E <td>DOUBLE LOW-9 QUOTATION MARK (&bdquo;)
      <tr><td>0x85 <td>U+2026 <td>HORIZONTAL ELLIPSIS (&hellip;)
      <tr><td>0x86 <td>U+2020 <td>DAGGER (&dagger;)
      <tr><td>0x87 <td>U+2021 <td>DOUBLE DAGGER (&Dagger;)
      <tr><td>0x88 <td>U+02C6 <td>MODIFIER LETTER CIRCUMFLEX ACCENT (&circ;)
      <tr><td>0x89 <td>U+2030 <td>PER MILLE SIGN (&permil;)
      <tr><td>0x8A <td>U+0160 <td>LATIN CAPITAL LETTER S WITH CARON (&Scaron;)
      <tr><td>0x8B <td>U+2039 <td>SINGLE LEFT-POINTING ANGLE QUOTATION MARK (&lsaquo;)
      <tr><td>0x8C <td>U+0152 <td>LATIN CAPITAL LIGATURE OE (&OElig;)
      <tr><td>0x8D <td>U+008D <td>&lt;control&gt;
      <tr><td>0x8E <td>U+017D <td>LATIN CAPITAL LETTER Z WITH CARON (&#381;)
      <tr><td>0x8F <td>U+008F <td>&lt;control&gt;
      <tr><td>0x90 <td>U+0090 <td>&lt;control&gt;
      <tr><td>0x91 <td>U+2018 <td>LEFT SINGLE QUOTATION MARK (&lsquo;)
      <tr><td>0x92 <td>U+2019 <td>RIGHT SINGLE QUOTATION MARK (&rsquo;)
      <tr><td>0x93 <td>U+201C <td>LEFT DOUBLE QUOTATION MARK (&ldquo;)
      <tr><td>0x94 <td>U+201D <td>RIGHT DOUBLE QUOTATION MARK (&rdquo;)
      <tr><td>0x95 <td>U+2022 <td>BULLET (&bull;)
      <tr><td>0x96 <td>U+2013 <td>EN DASH (&ndash;)
      <tr><td>0x97 <td>U+2014 <td>EM DASH (&mdash;)
      <tr><td>0x98 <td>U+02DC <td>SMALL TILDE (&tilde;)
      <tr><td>0x99 <td>U+2122 <td>TRADE MARK SIGN (&trade;)
      <tr><td>0x9A <td>U+0161 <td>LATIN SMALL LETTER S WITH CARON (&scaron;)
      <tr><td>0x9B <td>U+203A <td>SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (&rsaquo;)
      <tr><td>0x9C <td>U+0153 <td>LATIN SMALL LIGATURE OE (&oelig;)
      <tr><td>0x9D <td>U+009D <td>&lt;control&gt;
      <tr><td>0x9E <td>U+017E <td>LATIN SMALL LETTER Z WITH CARON (&#382;)
      <tr><td>0x9F <td>U+0178 <td>LATIN CAPITAL LETTER Y WITH DIAERESIS (&Yuml;)
    </table><p>Otherwise, if the number is in the range 0xD800 to 0xDFFF<!--
    surrogates not allowed; see the comment in the "preprocessing the
    input stream" section for details --> or is greater than 0x10FFFF,
    then this is a <a href=#parse-error>parse error</a>. Return a U+FFFD
    REPLACEMENT CHARACTER.</p>

    <p>Otherwise, return a character token for the Unicode character
    whose code point is that number.

    <!-- this is the same as the equivalent list in the input stream
    section -->
    If the number is in the range 0x0001 to 0x0008, <!-- HT, LF
    allowed --> <!-- U+000B is in the next list --> <!-- FF, CR
    allowed --> 0x000E to 0x001F, <!-- ASCII allowed --> 0x007F <!--to
    0x0084, (0x0085 NEL not allowed), 0x0086--> to 0x009F, 0xFDD0 to
    0xFDEF, or is one of 0x000B, 0xFFFE, 0xFFFF, 0x1FFFE, 0x1FFFF,
    0x2FFFE, 0x2FFFF, 0x3FFFE, 0x3FFFF, 0x4FFFE, 0x4FFFF, 0x5FFFE,
    0x5FFFF, 0x6FFFE, 0x6FFFF, 0x7FFFE, 0x7FFFF, 0x8FFFE, 0x8FFFF,
    0x9FFFE, 0x9FFFF, 0xAFFFE, 0xAFFFF, 0xBFFFE, 0xBFFFF, 0xCFFFE,
    0xCFFFF, 0xDFFFE, 0xDFFFF, 0xEFFFE, 0xEFFFF, 0xFFFFE, 0xFFFFF,
    0x10FFFE, or 0x10FFFF, then this is a <a href=#parse-error>parse
    error</a>.</p>

   </dd>


   <dt>Anything else</dt>

   <dd>

    <p>Consume the maximum number of characters possible, with the
    consumed characters matching one of the identifiers in the first
    column of the <a href=#named-character-references>named character references</a> table (in a
    <a href=#case-sensitive>case-sensitive</a> manner).</p>

    <p>If no match can be made, then no characters are consumed, and
    nothing is returned. In this case, if the characters after the
    U+0026 AMPERSAND character (&amp;) consist of a sequence of one or
    more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
    NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
    Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL
    LETTER Z, followed by a U+003B SEMICOLON character (;), then this
    is a <a href=#parse-error>parse error</a>.</p>

    <p>If the character reference is being consumed <a href=#character-reference-in-attribute-value-state title="character reference in attribute value state">as part of an
    attribute</a>, and the last character matched is not a U+003B
    SEMICOLON character (;), and the next character is either a U+003D
    EQUALS SIGN character (=) or in the range U+0030 DIGIT ZERO (0) to
    U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+005A
    LATIN CAPITAL LETTER Z, or U+0061 LATIN SMALL LETTER A to U+007A
    LATIN SMALL LETTER Z, then, for historical reasons, all the
    characters that were matched after the U+0026 AMPERSAND character
    (&amp;) must be unconsumed, and nothing is returned.</p>
    <!-- "=" added because of http://www.w3.org/Bugs/Public/show_bug.cgi?id=9207#c5 -->

    <p>Otherwise, a character reference is parsed. If the last
    character matched is not a U+003B SEMICOLON character (;), there
    is a <a href=#parse-error>parse error</a>.</p>

    <p>Return a character token for the character corresponding to the
    character reference name (as given by the second column of the
    <a href=#named-character-references>named character references</a> table).</p>

    <div class=example>

     <p>If the markup contains (not in an attribute) the string <code title="">I'm &amp;notit; I tell you</code>, the character
     reference is parsed as "not", as in, <code title="">I'm &not;it;
     I tell you</code> (and this is a parse error). But if the markup
     was <code title="">I'm &amp;notin; I tell you</code>, the
     character reference would be parsed as "notin;", resulting in
     <code title="">I'm &notin; I tell you</code> (and no parse
     error).</p>

    </div>

   </dd>

  </dl></div>


  <div class=impl>

  <!-- v2: One thing that this doesn't define is handling deeply
  nested documents. There are compatibility requirements around that:
  you can't throw away the elements altogether, consider Tux made only
  with opening <font> elements, one per character. Seems that the best
  thing to do is to close some formatting elements from the middle of
  the stack when you hit a limit, or something. -->

  <h4 id=tree-construction><span class=secno>10.2.5 </span><dfn>Tree construction</dfn></h4>

  <p>The input to the tree construction stage is a sequence of tokens
  from the <a href=#tokenization>tokenization</a> stage. The tree construction
  stage is associated with a DOM <code><a href=#document>Document</a></code> object when a
  parser is created. The "output" of this stage consists of
  dynamically modifying or extending that document's DOM tree.</p>

  <p>This specification does not define when an interactive user agent
  has to render the <code><a href=#document>Document</a></code> so that it is available to
  the user, or when it has to begin accepting user input.</p>

  <p>As each token is emitted from the tokenizer, the user agent must
  process the token according to the rules given in the section
  corresponding to the current <a href=#insertion-mode>insertion mode</a>.</p>

  <p>When the steps below require the UA to <dfn id=insert-a-character>insert a
  character</dfn> into a node, if that node has a child immediately
  before where the character is to be inserted, and that child is a
  <code><a href=#text>Text</a></code> node, and that <code><a href=#text>Text</a></code> node was the last
  node that the parser inserted into the document, then the character
  must be appended to that <code><a href=#text>Text</a></code> node; otherwise, a new
  <code><a href=#text>Text</a></code> node whose data is just that character must be
  inserted in the appropriate place.</p>

  <div class=example>

   <p>Here are some sample inputs to the parser and the corresponding
   number of text nodes that they result in, assuming a user agent
   that executes scripts.</p>

   <table><thead><tr><th>Input <th>Number of text nodes
    <tbody><tr><td><pre>A&lt;script&gt;
var&nbsp;script&nbsp;=&nbsp;document.getElementsByTagName('script')[0];
document.body.removeChild(script);
&lt;/script&gt;B</pre>
      <td>Two adjacent text nodes in the document, containing "A" and "B".
     <tr><td><pre>A&lt;script&gt;
var&nbsp;text&nbsp;=&nbsp;document.createTextNode('B');
document.body.appendChild(text);
&lt;/script&gt;C</pre>
      <td>Four text nodes; "A" before the script, the script's contents, "B" after the script, and then, immediately after that, "C".
     <tr><td><pre>A&lt;script&gt;
var&nbsp;text&nbsp;=&nbsp;document.getElementsByTagName('script')[0].firstChild;
text.data&nbsp;=&nbsp;'B';
document.body.appendChild(text);
&lt;/script&gt;B</pre>
      <td>Two adjacent text nodes in the document, containing "A" and "BB".
     <tr><td><pre>A&lt;table&gt;B&lt;tr&gt;C&lt;/tr&gt;C&lt;/table&gt;</pre>
      <td>Three adjacent text nodes before the table, containing "A", "B", and "CC" respectively. (This is caused by <a href=#foster-parent title="foster parent">foster parenting</a>.)
     <tr><td><pre>A&lt;table&gt;&lt;tr&gt;&nbsp;B&lt;/tr&gt;&nbsp;B&lt;/table&gt;</pre>
      <td>Two adjacent text nodes before the table, containing "A" and "&nbsp;B&nbsp;B" (space-B-space-B) respectively. (This is caused by <a href=#foster-parent title="foster parent">foster parenting</a>.)
     <tr><td><pre>A&lt;table&gt;&lt;tr&gt;&nbsp;B&lt;/tr&gt;&nbsp;&lt;/em&gt;C&lt;/table&gt;</pre>
      <td>Three adjacent text nodes before the table, containing "A", "&nbsp;B" (space-B), and "C" respectively, and one text node inside the table (as a child of a <code><a href=#the-tbody-element>tbody</a></code>) with a single space character. (Space characters separated from non-space characters by non-character tokens are not affected by <a href=#foster-parent title="foster parent">foster parenting</a>, even if those other tokens then get ignored.)
   </table></div>

  <p id=mutation-during-parsing>DOM mutation events must not fire
  for changes caused by the UA parsing the document. (Conceptually,
  the parser is not mutating the DOM, it is constructing it.) This
  includes the parsing of any content inserted using <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> and <code title=dom-document-writeln><a href=#dom-document-writeln>document.writeln()</a></code> calls. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

  <p class=note>Not all of the tag names mentioned below are
  conformant tag names in this specification; many are included to
  handle legacy content. They still form part of the algorithm that
  implementations are required to implement to claim conformance.</p>

  <p class=note>The algorithm described below places no limit on the
  depth of the DOM tree generated, or on the length of tag names,
  attribute names, attribute values, text nodes, etc. While
  implementors are encouraged to avoid arbitrary limits, it is
  recognized that <a href=#hardwareLimitations>practical
  concerns</a> will likely force user agents to impose nesting depth
  constraints.</p>


  <h5 id=creating-and-inserting-elements><span class=secno>10.2.5.1 </span>Creating and inserting elements</h5>

  <p>When the steps below require the UA to <dfn id=create-an-element-for-the-token title="create an
  element for the token">create an element for a token</dfn> in a
  particular namespace, the UA must create a node implementing the
  interface appropriate for the element type corresponding to the tag
  name of the token in the given namespace (as given in the
  specification that defines that element, e.g. for an <code><a href=#the-a-element>a</a></code>
  element in the <a href=#html-namespace-0>HTML namespace</a>, this specification
  defines it to be the <code><a href=#htmlanchorelement>HTMLAnchorElement</a></code> interface), with
  the tag name being the name of that element, with the node being in
  the given namespace, and with the attributes on the node being those
  given in the given token.</p>

  <p>The interface appropriate for an element in the <a href=#html-namespace-0>HTML
  namespace</a> that is not defined in this specification (or
  <a href=#other-applicable-specifications>other applicable specifications</a>) is
  <code><a href=#htmlunknownelement>HTMLUnknownElement</a></code>. Element in other namespaces whose
  interface is not defined by that namespace's specification must use
  the interface <code><a href=#element>Element</a></code>.</p>

  <p>When a <a href=#category-reset title=category-reset>resettable element</a> is
  created in this manner, its <a href=#concept-form-reset-control title=concept-form-reset-control>reset algorithm</a> must be
  invoked once the attributes are set. (This initializes the element's
  <a href=#concept-fe-value title=concept-fe-value>value</a> and <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> based on the element's
  attributes.)</p>

  <hr><p>When the steps below require the UA to <dfn id=insert-an-html-element>insert an HTML
  element</dfn> for a token, the UA must first <a href=#create-an-element-for-the-token>create an element
  for the token</a> in the <a href=#html-namespace-0>HTML namespace</a>, and then
  append this node to the <a href=#current-node>current node</a>, and push it onto
  the <a href=#stack-of-open-elements>stack of open elements</a> so that it is the new
  <a href=#current-node>current node</a>.</p>

  <p>The steps below may also require that the UA insert an HTML
  element in a particular place, in which case the UA must follow the
  same steps except that it must insert or append the new node in the
  location specified instead of appending it to the <a href=#current-node>current
  node</a>. (This happens in particular during the parsing of
  tables with invalid content.)</p>

  <p>If an element created by the <a href=#insert-an-html-element>insert an HTML element</a>
  algorithm is a <a href=#form-associated-element>form-associated element</a>, and the
  <a href=#form-element-pointer><code title="">form</code> element pointer</a> is not null,
  and the newly created element doesn't have a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute, the user agent must
  <a href=#concept-form-association title=concept-form-association>associate</a> the newly
  created element with the <code><a href=#the-form-element>form</a></code> element pointed to by the
  <a href=#form-element-pointer><code title="">form</code> element pointer</a> before
  inserting it wherever it is to be inserted.</p>

  <hr><p>When the steps below require the UA to <dfn id=insert-a-foreign-element>insert a foreign
  element</dfn> for a token, the UA must first <a href=#create-an-element-for-the-token>create an element
  for the token</a> in the given namespace, and then append this
  node to the <a href=#current-node>current node</a>, and push it onto the
  <a href=#stack-of-open-elements>stack of open elements</a> so that it is the new
  <a href=#current-node>current node</a>. If the newly created element has an <code title="">xmlns</code> attribute in the <a href=#xmlns-namespace>XMLNS namespace</a>
  whose value is not exactly the same as the element's namespace, that
  is a <a href=#parse-error>parse error</a>. Similarly, if the newly created
  element has an <code title="">xmlns:xlink</code> attribute in the
  <a href=#xmlns-namespace>XMLNS namespace</a> whose value is not the <a href=#xlink-namespace>XLink
  Namespace</a>, that is a <a href=#parse-error>parse error</a>.</p>

  <p>When the steps below require the user agent to <dfn id=adjust-mathml-attributes>adjust MathML
  attributes</dfn> for a token, then, if the token has an attribute
  named <code title="">definitionurl</code>, change its name to <code title="">definitionURL</code> (note the case difference).</p>

  <p>When the steps below require the user agent to <dfn id=adjust-svg-attributes>adjust SVG
  attributes</dfn> for a token, then, for each attribute on the token
  whose attribute name is one of the ones in the first column of the
  following table, change the attribute's name to the name given in
  the corresponding cell in the second column. (This fixes the case of
  SVG attributes that are not all lowercase.)</p>

  <table><thead><tr><th> Attribute name on token <th> Attribute name on element
   <tbody><tr><td> <code title="">attributename</code> <td> <code title="">attributeName</code>
    <tr><td> <code title="">attributetype</code> <td> <code title="">attributeType</code>
    <tr><td> <code title="">basefrequency</code> <td> <code title="">baseFrequency</code>
    <tr><td> <code title="">baseprofile</code> <td> <code title="">baseProfile</code>
    <tr><td> <code title="">calcmode</code> <td> <code title="">calcMode</code>
    <tr><td> <code title="">clippathunits</code> <td> <code title="">clipPathUnits</code>
    <tr><td> <code title="">contentscripttype</code> <td> <code title="">contentScriptType</code>
    <tr><td> <code title="">contentstyletype</code> <td> <code title="">contentStyleType</code>
    <tr><td> <code title="">diffuseconstant</code> <td> <code title="">diffuseConstant</code>
    <tr><td> <code title="">edgemode</code> <td> <code title="">edgeMode</code>
    <tr><td> <code title="">externalresourcesrequired</code> <td> <code title="">externalResourcesRequired</code>
    <tr><td> <code title="">filterres</code> <td> <code title="">filterRes</code>
    <tr><td> <code title="">filterunits</code> <td> <code title="">filterUnits</code>
    <tr><td> <code title="">glyphref</code> <td> <code title="">glyphRef</code>
    <tr><td> <code title="">gradienttransform</code> <td> <code title="">gradientTransform</code>
    <tr><td> <code title="">gradientunits</code> <td> <code title="">gradientUnits</code>
    <tr><td> <code title="">kernelmatrix</code> <td> <code title="">kernelMatrix</code>
    <tr><td> <code title="">kernelunitlength</code> <td> <code title="">kernelUnitLength</code>
    <tr><td> <code title="">keypoints</code> <td> <code title="">keyPoints</code>
    <tr><td> <code title="">keysplines</code> <td> <code title="">keySplines</code>
    <tr><td> <code title="">keytimes</code> <td> <code title="">keyTimes</code>
    <tr><td> <code title="">lengthadjust</code> <td> <code title="">lengthAdjust</code>
    <tr><td> <code title="">limitingconeangle</code> <td> <code title="">limitingConeAngle</code>
    <tr><td> <code title="">markerheight</code> <td> <code title="">markerHeight</code>
    <tr><td> <code title="">markerunits</code> <td> <code title="">markerUnits</code>
    <tr><td> <code title="">markerwidth</code> <td> <code title="">markerWidth</code>
    <tr><td> <code title="">maskcontentunits</code> <td> <code title="">maskContentUnits</code>
    <tr><td> <code title="">maskunits</code> <td> <code title="">maskUnits</code>
    <tr><td> <code title="">numoctaves</code> <td> <code title="">numOctaves</code>
    <tr><td> <code title="">pathlength</code> <td> <code title="">pathLength</code>
    <tr><td> <code title="">patterncontentunits</code> <td> <code title="">patternContentUnits</code>
    <tr><td> <code title="">patterntransform</code> <td> <code title="">patternTransform</code>
    <tr><td> <code title="">patternunits</code> <td> <code title="">patternUnits</code>
    <tr><td> <code title="">pointsatx</code> <td> <code title="">pointsAtX</code>
    <tr><td> <code title="">pointsaty</code> <td> <code title="">pointsAtY</code>
    <tr><td> <code title="">pointsatz</code> <td> <code title="">pointsAtZ</code>
    <tr><td> <code title="">preservealpha</code> <td> <code title="">preserveAlpha</code>
    <tr><td> <code title="">preserveaspectratio</code> <td> <code title="">preserveAspectRatio</code>
    <tr><td> <code title="">primitiveunits</code> <td> <code title="">primitiveUnits</code>
    <tr><td> <code title="">refx</code> <td> <code title="">refX</code>
    <tr><td> <code title="">refy</code> <td> <code title="">refY</code>
    <tr><td> <code title="">repeatcount</code> <td> <code title="">repeatCount</code>
    <tr><td> <code title="">repeatdur</code> <td> <code title="">repeatDur</code>
    <tr><td> <code title="">requiredextensions</code> <td> <code title="">requiredExtensions</code>
    <tr><td> <code title="">requiredfeatures</code> <td> <code title="">requiredFeatures</code>
    <tr><td> <code title="">specularconstant</code> <td> <code title="">specularConstant</code>
    <tr><td> <code title="">specularexponent</code> <td> <code title="">specularExponent</code>
    <tr><td> <code title="">spreadmethod</code> <td> <code title="">spreadMethod</code>
    <tr><td> <code title="">startoffset</code> <td> <code title="">startOffset</code>
    <tr><td> <code title="">stddeviation</code> <td> <code title="">stdDeviation</code>
    <tr><td> <code title="">stitchtiles</code> <td> <code title="">stitchTiles</code>
    <tr><td> <code title="">surfacescale</code> <td> <code title="">surfaceScale</code>
    <tr><td> <code title="">systemlanguage</code> <td> <code title="">systemLanguage</code>
    <tr><td> <code title="">tablevalues</code> <td> <code title="">tableValues</code>
    <tr><td> <code title="">targetx</code> <td> <code title="">targetX</code>
    <tr><td> <code title="">targety</code> <td> <code title="">targetY</code>
    <tr><td> <code title="">textlength</code> <td> <code title="">textLength</code>
    <tr><td> <code title="">viewbox</code> <td> <code title="">viewBox</code>
    <tr><td> <code title="">viewtarget</code> <td> <code title="">viewTarget</code>
    <tr><td> <code title="">xchannelselector</code> <td> <code title="">xChannelSelector</code>
    <tr><td> <code title="">ychannelselector</code> <td> <code title="">yChannelSelector</code>
    <tr><td> <code title="">zoomandpan</code> <td> <code title="">zoomAndPan</code>
  </table><p>When the steps below require the user agent to <dfn id=adjust-foreign-attributes>adjust
  foreign attributes</dfn> for a token, then, if any of the attributes
  on the token match the strings given in the first column of the
  following table, let the attribute be a namespaced attribute, with
  the prefix being the string given in the corresponding cell in the
  second column, the local name being the string given in the
  corresponding cell in the third column, and the namespace being the
  namespace given in the corresponding cell in the fourth
  column. (This fixes the use of namespaced attributes, in particular
  <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attributes in
  the <span>XML namespace</span></a>.)</p>

  <table><thead><tr><th> Attribute name <th> Prefix <th> Local name <th> Namespace
   <tbody><tr><td> <code title="">xlink:actuate</code> <td> <code title="">xlink</code> <td> <code title="">actuate</code> <td> <a href=#xlink-namespace>XLink namespace</a>
    <tr><td> <code title="">xlink:arcrole</code> <td> <code title="">xlink</code> <td> <code title="">arcrole</code> <td> <a href=#xlink-namespace>XLink namespace</a>
    <tr><td> <code title="">xlink:href</code> <td> <code title="">xlink</code> <td> <code title="">href</code> <td> <a href=#xlink-namespace>XLink namespace</a>
    <tr><td> <code title="">xlink:role</code> <td> <code title="">xlink</code> <td> <code title="">role</code> <td> <a href=#xlink-namespace>XLink namespace</a>
    <tr><td> <code title="">xlink:show</code> <td> <code title="">xlink</code> <td> <code title="">show</code> <td> <a href=#xlink-namespace>XLink namespace</a>
    <tr><td> <code title="">xlink:title</code> <td> <code title="">xlink</code> <td> <code title="">title</code> <td> <a href=#xlink-namespace>XLink namespace</a>
    <tr><td> <code title="">xlink:type</code> <td> <code title="">xlink</code> <td> <code title="">type</code> <td> <a href=#xlink-namespace>XLink namespace</a>
    <tr><td> <code title="">xml:base</code> <td> <code title="">xml</code> <td> <code title="">base</code> <td> <a href=#xml-namespace>XML namespace</a> <!-- attr-xml-base -->
    <tr><td> <code title="">xml:lang</code> <td> <code title="">xml</code> <td> <code title="">lang</code> <td> <a href=#xml-namespace>XML namespace</a>
    <tr><td> <code title="">xml:space</code> <td> <code title="">xml</code> <td> <code title="">space</code> <td> <a href=#xml-namespace>XML namespace</a>
    <tr><td> <code title="">xmlns</code> <td> (none) <td> <code title="">xmlns</code> <td> <a href=#xmlns-namespace>XMLNS namespace</a>
    <tr><td> <code title="">xmlns:xlink</code> <td> <code title="">xmlns</code> <td> <code title="">xlink</code> <td> <a href=#xmlns-namespace>XMLNS namespace</a>
  </table><hr><p>The <dfn id=generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</dfn> and the
  <dfn id=generic-rcdata-element-parsing-algorithm>generic RCDATA element parsing algorithm</dfn> consist of the
  following steps. These algorithms are always invoked in response to
  a start tag token.</p>

  <ol><li><p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</li>

   <li><p>If the algorithm that was invoked is the <a href=#generic-raw-text-element-parsing-algorithm>generic raw
   text element parsing algorithm</a>, switch the tokenizer to the
   <a href=#rawtext-state>RAWTEXT state</a>; otherwise the algorithm invoked
   was the <a href=#generic-rcdata-element-parsing-algorithm>generic RCDATA element parsing algorithm</a>,
   switch the tokenizer to the <a href=#rcdata-state>RCDATA state</a>.</li>

   <li><p>Let the <a href=#original-insertion-mode>original insertion mode</a> be the current
   <a href=#insertion-mode>insertion mode</a>.</p>

   <li><p>Then, switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incdata title="insertion mode: text">text</a>".</li>

  </ol><h5 id=closing-elements-that-have-implied-end-tags><span class=secno>10.2.5.2 </span>Closing elements that have implied end tags</h5>

  <p>When the steps below require the UA to <dfn id=generate-implied-end-tags>generate implied end
  tags</dfn>, then, while the <a href=#current-node>current node</a> is a
  <code><a href=#the-dd-element>dd</a></code> element, a <code><a href=#the-dt-element>dt</a></code> element, an
  <code><a href=#the-li-element>li</a></code> element, an <code><a href=#the-option-element>option</a></code> element, an
  <code><a href=#the-optgroup-element>optgroup</a></code> element, a <code><a href=#the-p-element>p</a></code> element, an
  <code><a href=#the-rp-element>rp</a></code> element, or an <code><a href=#the-rt-element>rt</a></code> element, the UA must
  pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
  elements</a>.</p>

  <p>If a step requires the UA to generate implied end tags but lists
  an element to exclude from the process, then the UA must perform the
  above steps as if that element was not in the above list.</p>


  <h5 id=foster-parenting><span class=secno>10.2.5.3 </span>Foster parenting</h5>

  <p>Foster parenting happens when content is misnested in tables.</p>

  <p>When a node <var title="">node</var> is to be <dfn id=foster-parent title="foster
  parent">foster parented</dfn>, the node <var title="">node</var>
  must be inserted into the <i><a href=#foster-parent-element>foster parent element</a></i>.</p>

  <p>The <dfn id=foster-parent-element>foster parent element</dfn> is the parent element of the
  last <code><a href=#the-table-element>table</a></code> element in the <a href=#stack-of-open-elements>stack of open
  elements</a>, if there is a <code><a href=#the-table-element>table</a></code> element and it has
  such a parent element. If there is no <code><a href=#the-table-element>table</a></code> element in
  the <a href=#stack-of-open-elements>stack of open elements</a> (<a href=#fragment-case>fragment
  case</a>), then the <i><a href=#foster-parent-element>foster parent element</a></i> is the first
  element in the <a href=#stack-of-open-elements>stack of open elements</a> (the
  <code><a href=#the-html-element-0>html</a></code> element). Otherwise, if there is a
  <code><a href=#the-table-element>table</a></code> element in the <a href=#stack-of-open-elements>stack of open
  elements</a>, but the last <code><a href=#the-table-element>table</a></code> element in the
  <a href=#stack-of-open-elements>stack of open elements</a> has no parent, or its parent
  node is not an element, then the <i><a href=#foster-parent-element>foster parent element</a></i> is
  the element before the last <code><a href=#the-table-element>table</a></code> element in the
  <a href=#stack-of-open-elements>stack of open elements</a>.</p>

  <p>If the <i><a href=#foster-parent-element>foster parent element</a></i> is the parent element of the
  last <code><a href=#the-table-element>table</a></code> element in the <a href=#stack-of-open-elements>stack of open
  elements</a>, then <var title="">node</var> must be inserted
  immediately <em>before</em> the last <code><a href=#the-table-element>table</a></code> element in
  the <a href=#stack-of-open-elements>stack of open elements</a> in the <i><a href=#foster-parent-element>foster parent
  element</a></i>; otherwise, <var title="">node</var> must be
  <em>appended</em> to the <i><a href=#foster-parent-element>foster parent element</a></i>.</p>



  <h5 id=the-initial-insertion-mode><span class=secno>10.2.5.4 </span>The "<dfn title="insertion mode: initial">initial</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-initial-insertion-mode title="insertion
  mode: initial">initial</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dd>
    <p>Ignore the token.</p>
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <code><a href=#document>Document</a></code>
    object with the <code title="">data</code> attribute set to the
    data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>

    <p>If the DOCTYPE token's name is not a
    <a href=#case-sensitive>case-sensitive</a> match for the string "<code title="">html</code>", or the token's public identifier is not
    missing, or the token's system identifier is neither missing nor a
    <a href=#case-sensitive>case-sensitive</a> match for the string
    "<code><a href=#about:legacy-compat>about:legacy-compat</a></code>", and none of the sets of
    conditions in the following list are matched, then there is a
    <a href=#parse-error>parse error</a>.</p>

    <ul><!-- only things that trigger no-quirks mode and were valid in
     some other spec are allowed in this list --><li>The DOCTYPE token's name is a <a href=#case-sensitive>case-sensitive</a>
     match for the string "<code title="">html</code>", the token's
     public identifier is the <a href=#case-sensitive>case-sensitive</a> string
     "<code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.0//EN</code>", and
     the token's system identifier is either missing or the
     <a href=#case-sensitive>case-sensitive</a> string "<code title="">http://www.w3.org/TR/REC-html40/strict.dtd</code>".</li>

     <li>The DOCTYPE token's name is a <a href=#case-sensitive>case-sensitive</a>
     match for the string "<code title="">html</code>", the token's
     public identifier is the <a href=#case-sensitive>case-sensitive</a> string
     "<code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.01//EN</code>", and
     the token's system identifier is either missing or the
     <a href=#case-sensitive>case-sensitive</a> string "<code title="">http://www.w3.org/TR/html4/strict.dtd</code>".</li>

     <li>The DOCTYPE token's name is a <a href=#case-sensitive>case-sensitive</a>
     match for the string "<code title="">html</code>", the token's
     public identifier is the <a href=#case-sensitive>case-sensitive</a> string
     "<code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN</code>",
     and the token's system identifier is the
     <a href=#case-sensitive>case-sensitive</a> string "<code title="">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</code>".</li>

     <li>The DOCTYPE token's name is a <a href=#case-sensitive>case-sensitive</a>
     match for the string "<code title="">html</code>", the token's
     public identifier is the <a href=#case-sensitive>case-sensitive</a> string
     "<code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1//EN</code>", and
     the token's system identifier is the <a href=#case-sensitive>case-sensitive</a>
     string "<code title="">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</code>".</li>

    </ul><p>Conformance checkers may, based on the values (including
    presence or lack thereof) of the DOCTYPE token's name, public
    identifier, or system identifier, switch to a conformance checking
    mode for another language (e.g. based on the DOCTYPE token a
    conformance checker could recognize that the document is an
    HTML4-era document, and defer to an HTML4 conformance
    checker.)</p>

    <p>Append a <code><a href=#documenttype>DocumentType</a></code> node to the
    <code><a href=#document>Document</a></code> node, with the <code title="">name</code>
    attribute set to the name given in the DOCTYPE token, or the empty
    string if the name was missing; the <code title="">publicId</code>
    attribute set to the public identifier given in the DOCTYPE token,
    or the empty string if the public identifier was missing; the
    <code title="">systemId</code> attribute set to the system
    identifier given in the DOCTYPE token, or the empty string if the
    system identifier was missing; and the other attributes specific
    to <code><a href=#documenttype>DocumentType</a></code> objects set to null and empty lists
    as appropriate. Associate the <code><a href=#documenttype>DocumentType</a></code> node with
    the <code><a href=#document>Document</a></code> object so that it is returned as the
    value of the <code title="">doctype</code> attribute of the
    <code><a href=#document>Document</a></code> object.</p>

    <p id=quirks-mode-doctypes>Then, if the DOCTYPE token matches
    one of the conditions in the following list, then set the
    <code><a href=#document>Document</a></code> to <a href=#quirks-mode>quirks mode</a>:</p>

    <ul class=brief><li> The <i>force-quirks flag</i> is set to <i>on</i>. </li>
     <li> The name is set to anything other than "<code title="">html</code>" (compared <a href=#case-sensitive title=case-sensitive>case-sensitively</a>). </li>
     <li> The public identifier starts with: "<code title="">+//Silmaril//dtd html Pro v0r11 19970101//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//AdvaSoft Ltd//DTD HTML 3.0 asWedit + extensions//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//AS//DTD HTML 3.0 asWedit + extensions//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Level 1//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Level 2//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Strict Level 1//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Strict Level 2//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Strict//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.1E//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 3.0//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML 3.0//EN//</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 3.2 Final//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 3.2//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 3//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Level 0//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Level 0//EN//2.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Level 1//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Level 1//EN//2.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Level 2//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Level 2//EN//2.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Level 3//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Level 3//EN//3.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict Level 0//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict Level 0//EN//2.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict Level 1//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict Level 1//EN//2.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict Level 2//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict Level 2//EN//2.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict Level 3//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict Level 3//EN//3.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict//EN//2.0</code>" </li>-->
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict//EN//3.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML//EN//2.0</code>" </li>-->
   <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML//EN//3.0</code>" </li>-->
     <li> The public identifier starts with: "<code title="">-//Metrius//DTD Metrius Presentational//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 2.0 HTML Strict//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 2.0 HTML//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 2.0 Tables//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 3.0 HTML Strict//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 3.0 HTML//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 3.0 Tables//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Netscape Comm. Corp.//DTD HTML//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Netscape Comm. Corp.//DTD Strict HTML//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//O'Reilly and Associates//DTD HTML 2.0//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//O'Reilly and Associates//DTD HTML Extended 1.0//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//O'Reilly and Associates//DTD HTML Extended Relaxed 1.0//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//SoftQuad//DTD HoTMetaL PRO 4.0::19971010::extensions to HTML 4.0//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Spyglass//DTD HTML 2.0 Extended//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//SQ//DTD HTML 2.0 HoTMetaL + extensions//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Sun Microsystems Corp.//DTD HotJava HTML//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//Sun Microsystems Corp.//DTD HotJava Strict HTML//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3 1995-03-24//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3.2 Draft//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3.2 Final//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3.2//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3.2S Draft//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 4.0 Frameset//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 4.0 Transitional//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML Experimental 19960712//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML Experimental 970421//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD W3 HTML//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3O//DTD W3 HTML 3.0//<!--EN--></code>" </li>
   <!--<li> The public identifier is set to: "<code title="">-//W3O//DTD W3 HTML 3.0//EN//</code>" </li>-->
     <li> The public identifier is set to: "<code title="">-//W3O//DTD W3 HTML Strict 3.0//EN//</code>" </li>
     <li> The public identifier starts with: "<code title="">-//WebTechs//DTD Mozilla HTML 2.0//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//WebTechs//DTD Mozilla HTML//<!--EN--></code>" </li>
     <li> The public identifier is set to: "<code title="">-/W3C/DTD HTML 4.0 Transitional/EN</code>" </li>
     <li> The public identifier is set to: "<code title="">HTML</code>" </li>
     <li> The system identifier is set to: "<code title="">http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd</code>" </li>
     <li> The system identifier is missing and the public identifier starts with: "<code title="">-//W3C//DTD HTML 4.01 Frameset//<!--EN--></code>" </li>
     <li> The system identifier is missing and the public identifier starts with: "<code title="">-//W3C//DTD HTML 4.01 Transitional//<!--EN--></code>" </li>
    </ul><p>Otherwise, if the DOCTYPE token matches one of the conditions
    in the following list, then set the <code><a href=#document>Document</a></code> to
    <a href=#limited-quirks-mode>limited-quirks mode</a>:</p>

    <ul class=brief><li> The public identifier starts with: "<code title="">-//W3C//DTD XHTML 1.0 Frameset//<!--EN--></code>" </li>
     <li> The public identifier starts with: "<code title="">-//W3C//DTD XHTML 1.0 Transitional//<!--EN--></code>" </li>
     <li> The system identifier is not missing and the public identifier starts with: "<code title="">-//W3C//DTD HTML 4.01 Frameset//<!--EN--></code>" </li>
     <li> The system identifier is not missing and the public identifier starts with: "<code title="">-//W3C//DTD HTML 4.01 Transitional//<!--EN--></code>" </li>
    </ul><p>The system identifier and public identifier strings must be
    compared to the values given in the lists above in an <a href=#ascii-case-insensitive>ASCII
    case-insensitive</a> manner. A system identifier whose value is
    the empty string is not considered missing for the purposes of the
    conditions above.</p>

    <p>Then, switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-before-html-insertion-mode title="insertion mode: before html">before html</a>".</p>

   </dd>

   <dt>Anything else</dt>
   <dd>

    <p>If the document is <em>not</em> <a href=#an-iframe-srcdoc-document>an <code>iframe</code>
    <code title=attr-iframe-srcdoc>srcdoc</code> document</a>,
    then this is a <a href=#parse-error>parse error</a>; set the
    <code><a href=#document>Document</a></code> to <a href=#quirks-mode>quirks mode</a>.</p>

    <p>In any case, switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-before-html-insertion-mode title="insertion mode: before html">before html</a>", then
    reprocess the current token.</p>

   </dd>

  </dl><h5 id=the-before-html-insertion-mode><span class=secno>10.2.5.5 </span>The "<dfn title="insertion mode: before html">before html</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-before-html-insertion-mode title="insertion
  mode: before html">before html</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <code><a href=#document>Document</a></code>
    object with the <code title="">data</code> attribute set to the
    data given in the comment token.</p>
   </dd>

   <dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dd>
    <p>Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>

    <p><a href=#create-an-element-for-the-token>Create an element for the token</a> in the <a href=#html-namespace-0>HTML
    namespace</a>. Append it to the <code><a href=#document>Document</a></code>
    object. Put this element in the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p id=parser-appcache>If the <code><a href=#document>Document</a></code> is being
    loaded as part of <a href=#navigate title=navigate>navigation</a> of a
    <a href=#browsing-context>browsing context</a>, then: if the newly created element
    has a <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute
    whose value is not the empty string, then <a href=#resolve-a-url title="resolve a
    url">resolve</a> the value of that attribute to an
    <a href=#absolute-url>absolute URL</a>, relative to the newly created element,
    and if that is successful, run the <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
    algorithm</a> with the resulting <a href=#absolute-url>absolute URL</a> with
    any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component
    removed; otherwise, if there is no such attribute, or its value is
    the empty string, or resolving its value fails, run the <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
    algorithm</a> with no manifest. The algorithm must be passed
    the <code><a href=#document>Document</a></code> object.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-before-head-insertion-mode title="insertion mode: before head">before head</a>".</p>

   </dd>

   <dt>An end tag whose tag name is one of: "head", "body", "html", "br"</dt>
   <dd>
    <p>Act as described in the "anything else" entry below.</p>
   </dd>

   <dt>Any other end tag</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>

    <p>Create an <code><a href=#the-html-element-0>html</a></code> element. Append it to the
    <code><a href=#document>Document</a></code> object. Put this element in the <a href=#stack-of-open-elements>stack
    of open elements</a>.</p>

    <p>If the <code><a href=#document>Document</a></code> is being loaded as part of <a href=#navigate title=navigate>navigation</a> of a <a href=#browsing-context>browsing
    context</a>, then: run the <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
    algorithm</a> with no manifest, passing it the
    <code><a href=#document>Document</a></code> object.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-before-head-insertion-mode title="insertion mode: before head">before head</a>", then
    reprocess the current token.</p>

   </dd>

  </dl><p>The root element can end up being removed from the
  <code><a href=#document>Document</a></code> object, e.g. by scripts; nothing in particular
  happens in such cases, content continues being appended to the nodes
  as described in the next section.</p>


  <h5 id=the-before-head-insertion-mode><span class=secno>10.2.5.6 </span>The "<dfn title="insertion mode: before head">before head</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-before-head-insertion-mode title="insertion
  mode: before head">before head</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dd>
    <p>Ignore the token.</p> <!-- :-( -->
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "head"</dt>
   <dd>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Set the <a href=#head-element-pointer><code title="">head</code> element pointer</a>
    to the newly created <code><a href=#the-head-element-0>head</a></code> element.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>".</p>

   </dd>

   <dt>An end tag whose tag name is one of: "head", "body", "html", "br"</dt>
   <dd>

    <p>Act as if a start tag token with the tag name "head" and no
    attributes had been seen, then reprocess the current token.</p>

   </dd>

   <dt>Any other end tag</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>

   </dd>

   <dt>Anything else</dt>
   <dd>

    <p>Act as if a start tag token with the tag name "head" and no
    attributes had been seen, then reprocess the current
    token.</p>

   </dd>

  </dl><h5 id=parsing-main-inhead><span class=secno>10.2.5.7 </span>The "<dfn title="insertion mode: in head">in head</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inhead title="insertion
  mode: in head">in head</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dd>
    <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
    the <a href=#current-node>current node</a>.</p>
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>A start tag whose tag name is one of: "base", "command",
   "link"</dt>
   <dd>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
    pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
    token's <i>self-closing flag</i></a>, if it is set.</p>

   </dd>

   <dt>A start tag whose tag name is "meta"</dt>
   <dd>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
    pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
    token's <i>self-closing flag</i></a>, if it is set.</p>

    <p id=meta-charset-during-parse>If the element has a <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute, and its
    value is a supported encoding, and the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is
    currently <i>tentative</i>, then <a href=#change-the-encoding>change the
    encoding</a> to the encoding given by the value of the
    <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute.</p>

    <p>Otherwise, if the element has an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute whose
    value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
    string "<code title="">Content-Type</code>", and the element has a
    <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, and
    applying the <a href=#algorithm-for-extracting-an-encoding-from-a-content-type>algorithm for extracting an encoding from a
    Content-Type</a> to that attribute's value returns a supported
    encoding <var title="">encoding</var>, and the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is currently
    <i>tentative</i>, then <a href=#change-the-encoding>change the encoding</a> to the
    encoding <var title="">encoding</var>.</p>

   </dd>

   <dt>A start tag whose tag name is "title"</dt>
   <dd>
    <p>Follow the <a href=#generic-rcdata-element-parsing-algorithm>generic RCDATA element parsing algorithm</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "noscript", if the <a href=#scripting-flag>scripting flag</a> is enabled</dt>
   <dt>A start tag whose tag name is one of: "noframes", "style"</dt>
   <dd>
    <p>Follow the <a href=#generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "noscript", if the <a href=#scripting-flag>scripting flag</a> is disabled</dt>
   <dd>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inheadnoscript title="insertion mode: in head noscript">in head
    noscript</a>".</p>

   </dd>

   <dt id=scriptTag>A start tag whose tag name is "script"</dt>
   <dd>

    <p>Run these steps:</p>

    <ol><li><p><a href=#create-an-element-for-the-token>Create an element for the token</a> in the
     <a href=#html-namespace-0>HTML namespace</a>.</li>

     <li>

      <p>Mark the element as being <a href=#parser-inserted>"parser-inserted"</a>.</p>

      <p class=note>This ensures that, if the script is external,
      any <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code>
      calls in the script will execute in-line, instead of blowing the
      document away, as would happen in most other cases. It also
      prevents the script from executing until the end tag is
      seen.</p>

     </li>

     <li><p>If the parser was originally created for the <a href=#html-fragment-parsing-algorithm>HTML
     fragment parsing algorithm</a>, then mark the
     <code><a href=#script>script</a></code> element as <a href=#already-started>"already
     started"</a>. (<a href=#fragment-case>fragment case</a>)</li>

     <li><p>Append the new element to the <a href=#current-node>current node</a>
     and push it onto the <a href=#stack-of-open-elements>stack of open
     elements</a>.</li>

     <li><p>Switch the tokenizer to the <a href=#script-data-state>script data
     state</a>.</li>

     <li><p>Let the <a href=#original-insertion-mode>original insertion mode</a> be the current
     <a href=#insertion-mode>insertion mode</a>.</p>

     <li><p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incdata title="insertion mode: text">text</a>".</li>

    </ol></dd>

   <dt>An end tag whose tag name is "head"</dt>
   <dd>

    <p>Pop the <a href=#current-node>current node</a> (which will be the
    <code><a href=#the-head-element-0>head</a></code> element) off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-after-head-insertion-mode title="insertion mode: after head">after head</a>".</p>

   </dd>

   <dt>An end tag whose tag name is one of: "body", "html", "br"</dt>
   <dd>
    <p>Act as described in the "anything else" entry below.</p>
   </dd>

   <dt>A start tag whose tag name is "head"</dt>
   <dt>Any other end tag</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>

    <!-- can't get here with an EOF and a fragment case -->

    <p>Act as if an end tag token with the tag name "head" had
    been seen, and reprocess the current token.</p>

   </dd>

  </dl><h5 id=parsing-main-inheadnoscript><span class=secno>10.2.5.8 </span>The "<dfn title="insertion mode: in head noscript">in head noscript</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inheadnoscript title="insertion
  mode: in head noscript">in head noscript</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>An end tag whose tag name is "noscript"</dt>
   <dd>

    <p>Pop the <a href=#current-node>current node</a> (which will be a
    <code><a href=#the-noscript-element>noscript</a></code> element) from the <a href=#stack-of-open-elements>stack of open
    elements</a>; the new <a href=#current-node>current node</a> will be a
    <code><a href=#the-head-element-0>head</a></code> element.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>".</p>

   </dd>

   <dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dt>A comment token</dt>
   <dt>A start tag whose tag name is one of: "link", "meta", "noframes", "style"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>An end tag whose tag name is "br"</dt>
   <dd>
    <p>Act as described in the "anything else" entry below.</p>
   </dd>

   <dt>A start tag whose tag name is one of: "head", "noscript"</dt>
   <dt>Any other end tag</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>

    <!-- can't get here with an EOF and a fragment case -->

    <p><a href=#parse-error>Parse error</a>. Act as if an end tag with the tag
    name "noscript" had been seen and reprocess the current
    token.</p>

   </dd>

  </dl><h5 id=the-after-head-insertion-mode><span class=secno>10.2.5.9 </span>The "<dfn title="insertion mode: after head">after head</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-after-head-insertion-mode title="insertion
  mode: after head">after head</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dd>
    <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
    the <a href=#current-node>current node</a>.</p>
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "body"</dt>
   <dd>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>".</p>

   </dd>

   <dt>A start tag whose tag name is "frameset"</dt>
   <dd>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inframeset title="insertion mode: in frameset">in frameset</a>".</p>

   </dd>

   <dt>A start tag token whose tag name is one of: "base", "link",
   "meta", "noframes", "script", "style", "title"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>.</p>

    <p>Push the node pointed to by the <a href=#head-element-pointer><code title="">head</code> element pointer</a> onto the
    <a href=#stack-of-open-elements>stack of open elements</a>.</p>

    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>

    <p>Remove the node pointed to by the <a href=#head-element-pointer><code title="">head</code> element pointer</a> from the <a href=#stack-of-open-elements>stack
    of open elements</a>.</p>

    <p class=note>The <a href=#head-element-pointer><code title="">head</code> element
    pointer</a> cannot be null at this point.</p>

   </dd>

   <dt>An end tag whose tag name is one of: "body", "html", "br"</dt>
   <dd>
    <p>Act as described in the "anything else" entry below.</p>
   </dd>

   <dt>A start tag whose tag name is "head"</dt>
   <dt>Any other end tag</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>
    <p>Act as if a start tag token with the tag name "body" and no
    attributes had been seen, then set the <a href=#frameset-ok-flag>frameset-ok
    flag</a> back to "ok", and then reprocess the current
    token.</p>
   </dd>

  </dl><h5 id=parsing-main-inbody><span class=secno>10.2.5.10 </span>The "<dfn title="insertion mode: in body">in body</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inbody title="insertion
  mode: in body">in body</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token</dt>
   <dd>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-a-character title="insert a character">Insert the token's
    character</a> into the <a href=#current-node>current node</a>.</p>

    <p>If the token is not one of U+0009 CHARACTER TABULATION, U+000A
    LINE FEED (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN
    (CR), or U+0020 SPACE, then set the <a href=#frameset-ok-flag>frameset-ok
    flag</a> to "not ok".</p>

   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. For each attribute on the token,
    check to see if the attribute is already present on the top
    element of the <a href=#stack-of-open-elements>stack of open elements</a>. If it is not,
    add the attribute and its corresponding value to that element.</p>
   </dd>

   <dt>A start tag token whose tag name is one of: "base", "command",
   "link", "meta", "noframes", "script", "style", "title"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "body"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>.</p>

    <p>If the second element on the <a href=#stack-of-open-elements>stack of open
    elements</a> is not a <code><a href=#the-body-element-0>body</a></code> element, or, if the
    <a href=#stack-of-open-elements>stack of open elements</a> has only one node on it,
    then ignore the token. (<a href=#fragment-case>fragment case</a>)</p>

    <p>Otherwise, for each attribute on the token, check to see if
    the attribute is already present on the <code><a href=#the-body-element-0>body</a></code>
    element (the second element) on the <a href=#stack-of-open-elements>stack of open
    elements</a>. If it is not, add the attribute and its
    corresponding value to that element.</p>

   </dd>

   <dt>A start tag whose tag name is "frameset"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>.</p>

    <p>If the second element on the <a href=#stack-of-open-elements>stack of open
    elements</a> is not a <code><a href=#the-body-element-0>body</a></code> element, or, if the
    <a href=#stack-of-open-elements>stack of open elements</a> has only one node on it,
    then ignore the token. (<a href=#fragment-case>fragment case</a>)</p>

    <p>If the <a href=#frameset-ok-flag>frameset-ok flag</a> is set to "not ok", ignore
    the token.</p>

    <p>Otherwise, run the following steps:</p>

    <ol><li><p>Remove the second element on the <a href=#stack-of-open-elements>stack of open
     elements</a> from its parent node, if it has one.</li>

     <li><p>Pop all the nodes from the bottom of the <a href=#stack-of-open-elements>stack of
     open elements</a>, from the <a href=#current-node>current node</a> up to,
     but not including, the root <code><a href=#the-html-element-0>html</a></code> element.</p>

     <li><p><a href=#insert-an-html-element>Insert an HTML element</a> for the
     token.</li>

     <li><p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inframeset title="insertion mode: in frameset">in frameset</a>".</p>

    </ol></dd>

   <dt>An end-of-file token</dt>
   <dd>

    <p>If there is a node in the <a href=#stack-of-open-elements>stack of open elements</a>
    that is not either a <code><a href=#the-dd-element>dd</a></code> element, a <code><a href=#the-dt-element>dt</a></code>
    element, an <code><a href=#the-li-element>li</a></code> element, a <code><a href=#the-p-element>p</a></code> element, a
    <code><a href=#the-tbody-element>tbody</a></code> element, a <code><a href=#the-td-element>td</a></code> element, a
    <code><a href=#the-tfoot-element>tfoot</a></code> element, a <code><a href=#the-th-element>th</a></code> element, a
    <code><a href=#the-thead-element>thead</a></code> element, a <code><a href=#the-tr-element>tr</a></code> element, the
    <code><a href=#the-body-element-0>body</a></code> element, or the <code><a href=#the-html-element-0>html</a></code> element, then
    this is a <a href=#parse-error>parse error</a>.</p> <!-- (some of those are
    fragment cases) -->

    <p><a href=#stop-parsing>Stop parsing</a>.</p>

   </dd>

   <dt>An end tag whose tag name is "body"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have a <code>body</code> element
    in scope</a>, this is a <a href=#parse-error>parse error</a>; ignore the
    token.</p>

    <!-- if we get here, the insertion mode here is forcibly "in
    body". -->

    <p>Otherwise, if there is a node in the <a href=#stack-of-open-elements>stack of open
    elements</a> that is not either a <code><a href=#the-dd-element>dd</a></code> element, a
    <code><a href=#the-dt-element>dt</a></code> element, an <code><a href=#the-li-element>li</a></code> element, an
    <code><a href=#the-optgroup-element>optgroup</a></code> element, an <code><a href=#the-option-element>option</a></code> element, a
    <code><a href=#the-p-element>p</a></code> element, an <code><a href=#the-rp-element>rp</a></code> element, an
    <code><a href=#the-rt-element>rt</a></code> element, a <code><a href=#the-tbody-element>tbody</a></code> element, a
    <code><a href=#the-td-element>td</a></code> element, a <code><a href=#the-tfoot-element>tfoot</a></code> element, a
    <code><a href=#the-th-element>th</a></code> element, a <code><a href=#the-thead-element>thead</a></code> element, a
    <code><a href=#the-tr-element>tr</a></code> element, the <code><a href=#the-body-element-0>body</a></code> element, or the
    <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
    error</a>.</p> <!-- (some of those are fragment cases, e.g. for
    <tbody> you'd have hit the first paragraph since the <body>
    wouldn't be in scope, unless it was a fragment case) -->

    <!-- If we ever change the frameset-ok flag to an insertion mode,
    then we'd have to somehow keep track of its state when we switch
    to after-body. -->

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-afterbody title="insertion mode: after body">after body</a>".</p>

   </dd>

   <dt>An end tag whose tag name is "html"</dt>
   <dd>

    <p>Act as if an end tag with tag name "body" had been seen,
    then, if that token wasn't ignored, reprocess the current
    token.</p>

   </dd>

   <!-- start tags for non-phrasing flow content elements -->

   <!-- the normal ones -->
   <dt>A start tag whose tag name is one of: "address", "article",
   "aside", "blockquote", "center", <!--v2DATAGRID"datagrid",-->
   "details", "dir", "div", "dl", "fieldset", "figure", "footer",
   "header", "hgroup", "menu", "nav", "ol", "p", "section", "ul"</dt>
   <dd>

    <!-- As of May 2008 this doesn't match any browser exactly, but is
    as close to what IE does as I can get without doing the non-tree
    DOM nonsense, and thus should actually afford better compatibility
    when implemented by the other browsers. -->

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
    an element in scope">has a <code>p</code> element in
    scope</a>, then act as if an end tag with the tag name
    "p" had been seen.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

   </dd>

   <!-- as normal, but close h1-h6 if it's the current node -->
   <dt>A start tag whose tag name is one of: "h1", "h2", "h3", "h4",
   "h5", "h6"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
    an element in scope">has a <code>p</code> element in
    scope</a>, then act as if an end tag with the tag name
    "p" had been seen.</p>

    <p>If the <a href=#current-node>current node</a> is an element whose tag name
    is one of "h1", "h2", "h3", "h4", "h5", or "h6", then this is a
    <a href=#parse-error>parse error</a>; pop the <a href=#current-node>current node</a> off
    the <a href=#stack-of-open-elements>stack of open elements</a>.</p>
    <!-- See https://bugs.webkit.org/show_bug.cgi?id=12646 -->

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

   </dd>

   <!-- as normal, but drops leading newline -->
   <dt>A start tag whose tag name is one of: "pre", "listing"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
    an element in scope">has a <code>p</code> element in
    scope</a>, then act as if an end tag with the tag name
    "p" had been seen.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>If the next token is a U+000A LINE FEED (LF) character
    token, then ignore that token and move on to the next
    one. (Newlines at the start of <code><a href=#the-pre-element>pre</a></code> blocks are
    ignored as an authoring convenience.)</p>

    <!-- <pre>[CR]X will eat the [CR], <pre>&#x10;X will eat the
    &#x10;, but <pre>&#x13;X will not eat the &#x13;. -->

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>

   </dd>

   <!-- as normal, but interacts with the form element pointer -->
   <dt>A start tag whose tag name is "form"</dt>
   <dd>

    <p>If the <a href=#form-element-pointer><code title=form>form</code> element
    pointer</a> is not null, then this is a <a href=#parse-error>parse
    error</a>; ignore the token.</p>

    <p>Otherwise:</p>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
    an element in scope">has a <code>p</code> element in
    scope</a>, then act as if an end tag with the tag name
    "p" had been seen.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, and set the
    <a href=#form-element-pointer><code title=form>form</code> element pointer</a> to
    point to the element created.</p>

   </dd>

   <!-- as normal, but imply </li> when there's another <li> open in weird cases -->
   <dt>A start tag whose tag name is "li"</dt>
   <dd>

    <p>Run these steps:</p>

    <ol><li><p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</li>

     <li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
     node</a> (the bottommost node of the stack).</li>

     <li><p><i>Loop</i>: If <var title="">node</var> is an
     <code><a href=#the-li-element>li</a></code> element, then act as if an end tag with the tag
     name "li" had been seen, then jump to the last step.</li>

     <li><p>If <var title="">node</var> is not in the
     <a href=#formatting>formatting</a> category, and is not in the
     <a href=#phrasing>phrasing</a> category, and is not an
     <code><a href=#the-address-element>address</a></code>, <code><a href=#the-div-element>div</a></code>, or <code><a href=#the-p-element>p</a></code>
     element, then jump to the last step.</li> <!-- an element
     <foo> is in this list if the following markup:

         <!DOCTYPE html><body><ol><li><foo><li>

     ...results in the second <li> not being (in any way) a descendant
     of the first <li>, or if <foo> is a formatting element that gets
     reopened later. -->

     <li><p>Otherwise, set <var title="">node</var> to the previous
     entry in the <a href=#stack-of-open-elements>stack of open elements</a> and return to
     the step labeled <i>loop</i>.</li>

     <li>

      <p>This is the last step.</p>

      <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
      an element in scope">has a <code>p</code> element in
      scope</a>, then act as if an end tag with the tag name
      "p" had been seen.</p>

      <p>Finally, <a href=#insert-an-html-element>insert an HTML element</a> for the
      token.</p>

     </li>

    </ol></dd>

   <!-- as normal, but imply </dt> or </dd> when there's another <dt> or <dd> open in weird cases  -->
   <dt>A start tag whose tag name is one of: "dd", "dt"</dt>
   <dd>

    <p>Run these steps:</p>

    <ol><li><p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</li>

     <li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
     node</a> (the bottommost node of the stack).</li>

     <li><p><i>Loop</i>: If <var title="">node</var> is a
     <code><a href=#the-dd-element>dd</a></code> or <code><a href=#the-dt-element>dt</a></code> element, then act as if an end
     tag with the same tag name as <var title="">node</var> had been
     seen, then jump to the last step.</li>

     <li><p>If <var title="">node</var> is not in the
     <a href=#formatting>formatting</a> category, and is not in the
     <a href=#phrasing>phrasing</a> category, and is not an
     <code><a href=#the-address-element>address</a></code>, <code><a href=#the-div-element>div</a></code>, or <code><a href=#the-p-element>p</a></code>
     element, then jump to the last step.</li> <!-- an element
     <foo> is in this list if the following markup:

         <!DOCTYPE html><body><dl><dt><foo><dt>

     ...results in the second <dt> not being (in any way) a descendant
     of the first <dt>, or if <foo> is a formatting element that gets
     reopened later. -->

     <li><p>Otherwise, set <var title="">node</var> to the previous
     entry in the <a href=#stack-of-open-elements>stack of open elements</a> and return to
     the step labeled <i>loop</i>.</li>

     <li>

      <p>This is the last step.</p>

      <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
      an element in scope">has a <code>p</code> element in
      scope</a>, then act as if an end tag with the tag name
      "p" had been seen.</p>

      <p>Finally, <a href=#insert-an-html-element>insert an HTML element</a> for the
      token.</p>

     </li>

    </ol></dd>

   <!-- same as normal, but effectively ends parsing -->
   <dt>A start tag whose tag name is "plaintext"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
    an element in scope">has a <code>p</code> element in
    scope</a>, then act as if an end tag with the tag name
    "p" had been seen.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Switch the tokenizer to the <a href=#plaintext-state>PLAINTEXT state</a>.</p>

    <p class=note>Once a start tag with the tag name "plaintext" has
    been seen, that will be the last token ever seen other than
    character tokens (and the end-of-file token), because there is no
    way to switch out of the <a href=#plaintext-state>PLAINTEXT state</a>.</p>

   </dd>

   <!-- button is a hybrid -->
   <dt>A start tag whose tag name is "button"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
    an element in scope">has a <code>button</code> element in
    scope</a>, then this is a <a href=#parse-error>parse error</a>;
    act as if an end tag with the tag name "button" had been seen,
    then reprocess the token.</p>

    <p>Otherwise:</p>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>

   </dd>

   <!-- end tags for non-phrasing flow content elements (and button) -->

   <!-- the normal ones -->
   <dt>An end tag whose tag name is one of: "address", "article",
   "aside", "blockquote", "button", "center",
   <!--v2DATAGRID"datagrid",--> "details", "dir", "div", "dl",
   "fieldset", "figure", "footer", "header", "hgroup", "listing",
   "menu", "nav", "ol", "pre", "section", "ul"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
    with the same tag name as that of the token, then this is a
    <a href=#parse-error>parse error</a>; ignore the token.</p>

    <p>Otherwise, run these steps:</p>

    <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>

     <li><p>If the <a href=#current-node>current node</a> is not an element with
     the same tag name as that of the token, then this is a
     <a href=#parse-error>parse error</a>.</li>

     <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
     until an element with the same tag name as the token has been
     popped from the stack.</li>

    </ol></dd>

   <!-- removes the form element pointer instead of the matching node -->
   <dt>An end tag whose tag name is "form"</dt>
   <dd>

    <p>Let <var title="">node</var> be the element that the
    <a href=#form-element-pointer><code title="">form</code> element pointer</a> is set
    to.</p>

    <p>Set the <a href=#form-element-pointer><code title="">form</code> element pointer</a>
    to null.</p>

    <p>If <var title="">node</var> is null or the <a href=#stack-of-open-elements>stack of open
    elements</a> does not <a href=#has-an-element-in-scope title="has an element in
    scope">have <var title="">node</var> in scope</a>, then this is
    a <a href=#parse-error>parse error</a>; ignore the token.</p>

    <p>Otherwise, run these steps:</p>

    <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>

     <li><p>If the <a href=#current-node>current node</a> is not <var title="">node</var>, then this is a <a href=#parse-error>parse
     error</a>.</li>

     <li><p>Remove <var title="">node</var> from the <a href=#stack-of-open-elements>stack of
     open elements</a>.</li>

    </ol></dd>

   <!-- as normal, except </p> implies <p> if there's no <p> in scope, and needs care as the elements have optional tags -->
   <dt>An end tag whose tag name is "p"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
    with the same tag name as that of the token, then this is a
    <a href=#parse-error>parse error</a>; act as if a start tag with the tag name
    "p" had been seen, then reprocess the current token.</p>

    <p>Otherwise, run these steps:</p>

    <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>, except
     for elements with the same tag name as the token.</li>

     <li><p>If the <a href=#current-node>current node</a> is not an element with
     the same tag name as that of the token, then this is a
     <a href=#parse-error>parse error</a>.</li>

     <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
     until an element with the same tag name as the token has been
     popped from the stack.</li>

    </ol></dd>

   <!-- as normal, but needs care as the elements have optional tags, and are further scoped by <ol>/<ul> -->
   <dt>An end tag whose tag name is "li"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-list-item-scope title="has an element in list item scope">have an element in list
    item scope</a> with the same tag name as that of the token,
    then this is a <a href=#parse-error>parse error</a>; ignore the token.</p>

    <p>Otherwise, run these steps:</p>

    <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>, except
     for elements with the same tag name as the token.</li>

     <li><p>If the <a href=#current-node>current node</a> is not an element with
     the same tag name as that of the token, then this is a
     <a href=#parse-error>parse error</a>.</li>

     <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
     until an element with the same tag name as the token has been
     popped from the stack.</li>

    </ol></dd>

   <!-- as normal, but needs care as the elements have optional tags -->
   <dt>An end tag whose tag name is one of: "dd", "dt"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
    with the same tag name as that of the token, then this is a
    <a href=#parse-error>parse error</a>; ignore the token.</p>

    <p>Otherwise, run these steps:</p>

    <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>, except
     for elements with the same tag name as the token.</li>

     <li><p>If the <a href=#current-node>current node</a> is not an element with
     the same tag name as that of the token, then this is a
     <a href=#parse-error>parse error</a>.</li>

     <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
     until an element with the same tag name as the token has been
     popped from the stack.</li>

    </ol></dd>

   <!-- as normal, except acts as a closer for any of the h1-h6 elements -->
   <dt>An end tag whose tag name is one of: "h1", "h2", "h3", "h4", "h5", "h6"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
    whose tag name is one of "h1", "h2", "h3", "h4", "h5", or "h6",
    then this is a <a href=#parse-error>parse error</a>; ignore the token.</p>

    <p>Otherwise, run these steps:</p>

    <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>

     <li><p>If the <a href=#current-node>current node</a> is not an element with
     the same tag name as that of the token, then this is a
     <a href=#parse-error>parse error</a>.</li>

     <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
     until an element whose tag name is one of "h1", "h2", "h3", "h4",
     "h5", or "h6" has been popped from the stack.</li>

    </ol></dd>

   <!-- see also applet/marquee/object lower down -->

   <dt>An end tag whose tag name is "sarcasm"</dt>
   <dd>
    <p>Take a deep breath, then act as described in the "any other end
    tag" entry below.</p>
   </dd>

   <!-- ADOPTION AGENCY ELEMENTS
        Mozilla-only: bdo blink del ins sub sup q
        Safari-only: code dfn kbd nobr samp var wbr
        Both: a b big em font i s small strike strong tt u -->

   <dt>A start tag whose tag name is "a"</dt>
   <dd>

    <p>If the <a href=#list-of-active-formatting-elements>list of active formatting elements</a>
    contains an element whose tag name is "a" between the end of
    the list and the last marker on the list (or the start of the
    list if there is no marker on the list), then this is a
    <a href=#parse-error>parse error</a>; act as if an end tag with the tag
    name "a" had been seen, then remove that element from the
    <a href=#list-of-active-formatting-elements>list of active formatting elements</a> and the
    <a href=#stack-of-open-elements>stack of open elements</a> if the end tag didn't
    already remove it (it might not have if the element is not
    <a href=#has-an-element-in-table-scope title="has an element in table scope">in table
    scope</a>).</p>

    <p class=example>In the non-conforming stream
    <code>&lt;a&nbsp;href="a"&gt;a&lt;table&gt;&lt;a&nbsp;href="b"&gt;b&lt;/table&gt;x</code>,
    the first <code><a href=#the-a-element>a</a></code> element would be closed upon seeing the
    second one, and the "x" character would be inside a link to "b",
    not to "a". This is despite the fact that the outer <code><a href=#the-a-element>a</a></code>
    element is not in table scope (meaning that a regular
    <code>&lt;/a&gt;</code> end tag at the start of the table wouldn't
    close the outer <code><a href=#the-a-element>a</a></code> element). The result is that the
    two <code><a href=#the-a-element>a</a></code> elements are indirectly nested inside each
    other &mdash; non-conforming markup will often result in
    non-conforming DOMs when parsed.</p>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Add that
    element to the <a href=#list-of-active-formatting-elements>list of active formatting
    elements</a>.</p>

   </dd>

   <dt>A start tag whose tag name is one of: "b", "big", "code", "em",
   "font", "i", "s", "small", "strike", "strong", "tt", "u"</dt>
   <dd>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Add that
    element to the <a href=#list-of-active-formatting-elements>list of active formatting
    elements</a>.</p>

   </dd>

   <dt>A start tag whose tag name is "nobr"</dt>
   <dd>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has an
    element in scope">has a <code>nobr</code> element in scope</a>,
    then this is a <a href=#parse-error>parse error</a>; act as if an end tag with
    the tag name "nobr" had been seen, then once again
    <a href=#reconstruct-the-active-formatting-elements>reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Add that
    element to the <a href=#list-of-active-formatting-elements>list of active formatting
    elements</a>.</p>

   </dd>

   <dt id=adoptionAgency>An end tag whose tag name is one of: "a",
   "b", "big", "code", "em", "font", "i", "nobr", "s", "small",
   "strike", "strong", "tt", "u"</dt>
   <dd>

    <p>Run these steps:</p>

    <ol><li>

      <p>Let the <var title="">formatting element</var> be the
      last element in the <a href=#list-of-active-formatting-elements>list of active formatting
      elements</a> that:</p>

      <ul><li>is between the end of the list and the last scope
       marker in the list, if any, or the start of the list
       otherwise, and</li>

       <li>has the same tag name as the token.</li>

      </ul><p>If there is no such node, or, if that node is also in the
      <a href=#stack-of-open-elements>stack of open elements</a> but the element is not <a href=#has-an-element-in-scope title="has an element in scope">in scope</a>, then this is a
      <a href=#parse-error>parse error</a>; ignore the token, and abort these
      steps.</p>

      <p>Otherwise, if there is such a node, but that node is not
      in the <a href=#stack-of-open-elements>stack of open elements</a>, then this is a
      <a href=#parse-error>parse error</a>; remove the element from the list,
      and abort these steps.</p>

      <p>Otherwise, there is a <var title="">formatting
      element</var> and that element is in <a href=#stack-of-open-elements title="stack of
      open elements">the stack</a> and is <a href=#has-an-element-in-scope title="has an
      element in scope">in scope</a>. If the element is not the
      <a href=#current-node>current node</a>, this is a <a href=#parse-error>parse
      error</a>. In any case, proceed with the algorithm as
      written in the following steps.</p>

     </li>

     <li><p>Let the <var title="">furthest block</var> be the
     topmost node in the <a href=#stack-of-open-elements>stack of open elements</a> that
     is lower in the stack than the <var title="">formatting
     element</var>, and is not an element in the
     <a href=#phrasing>phrasing</a> or <a href=#formatting>formatting</a>
     categories. There might not be one.</li>

     <li><p>If there is no <var title="">furthest block</var>,
     then the UA must skip the subsequent steps and instead just
     pop all the nodes from the bottom of the <a href=#stack-of-open-elements>stack of open
     elements</a>, from the <a href=#current-node>current node</a> up to and
     including the <var title="">formatting element</var>, and
     remove the <var title="">formatting element</var> from the
     <a href=#list-of-active-formatting-elements>list of active formatting elements</a>.</li>

     <li><p>Let the <var title="">common ancestor</var> be the element
     immediately above the <var title="">formatting element</var> in the
     <a href=#stack-of-open-elements>stack of open elements</a>.</li>

     <li><p>Let a bookmark note the position of the <var title="">formatting element</var> in the <a href=#list-of-active-formatting-elements>list of active
     formatting elements</a> relative to the elements on either
     side of it in the list.</li>

     <li>

      <p>Let <var title="">node</var> and <var title="">last node</var> be the
      <var title="">furthest block</var>. Follow these steps:</p>

      <ol><li>Let <var title="">node</var> be the element immediately
       above <var title="">node</var> in the <a href=#stack-of-open-elements>stack of open
       elements</a>, or if <var title="">node</var> is no longer in
       the <a href=#stack-of-open-elements>stack of open elements</a> (e.g. because it got
       removed by the next step), the element that was immediately
       above <var title="">node</var> in the <a href=#stack-of-open-elements>stack of open
       elements</a> before <var title="">node</var> was
       removed.</li>

       <li>If <var title="">node</var> is not in the <a href=#list-of-active-formatting-elements>list of
       active formatting elements</a>, then remove <var title="">node</var> from the <a href=#stack-of-open-elements>stack of open
       elements</a> and then go back to step 1.</li>

       <li>Otherwise, if <var title="">node</var> is the <var title="">formatting element</var>, then go to the next step
       in the overall algorithm.</li>

       <li>Otherwise, if <var title="">last node</var> is the <var title="">furthest block</var>, then move the aforementioned
       bookmark to be immediately after the <var title="">node</var> in the <a href=#list-of-active-formatting-elements>list of active formatting
       elements</a>.</li>

       <li><a href=#create-an-element-for-the-token>Create an element for the token</a> for which the
       element <var title="">node</var> was created, replace the entry
       for <var title="">node</var> in the <a href=#list-of-active-formatting-elements>list of active
       formatting elements</a> with an entry for the new element,
       replace the entry for <var title="">node</var> in the
       <a href=#stack-of-open-elements>stack of open elements</a> with an entry for the new
       element, and let <var title="">node</var> be the new
       element.</li>

       <li>Insert <var title="">last node</var> into <var title="">node</var>, first removing it from its previous
       parent node if any.</li>

       <li>Let <var title="">last node</var> be <var title="">node</var>.</li>

       <li>Return to step 1 of this inner set of steps.</li>

      </ol></li>

     <li>

      <p>If the <var title="">common ancestor</var> node is a
      <code><a href=#the-table-element>table</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>,
      <code><a href=#the-thead-element>thead</a></code>, or <code><a href=#the-tr-element>tr</a></code> element, then,
      <a href=#foster-parent>foster parent</a> whatever <var title="">last
      node</var> ended up being in the previous step, first removing
      it from its previous parent node if any.</p>

      <p>Otherwise, append whatever <var title="">last node</var>
      ended up being in the previous step to the <var title="">common
      ancestor</var> node, first removing it from its previous parent
      node if any.</p>

     </li>

     <li><p><a href=#create-an-element-for-the-token>Create an element for the token</a> for which the
     <var title="">formatting element</var> was created.</li>

     <li><p>Take all of the child nodes of the <var title="">furthest
     block</var> and append them to the element created in the last
     step.</li>

     <li><p>Append that new element to the <var title="">furthest
     block</var>.</li>

     <li><p>Remove the <var title="">formatting element</var> from the
     <a href=#list-of-active-formatting-elements>list of active formatting elements</a>, and insert the
     new element into the <a href=#list-of-active-formatting-elements>list of active formatting
     elements</a> at the position of the aforementioned
     bookmark.</li>

     <li><p>Remove the <var title="">formatting element</var> from the
     <a href=#stack-of-open-elements>stack of open elements</a>, and insert the new element
     into the <a href=#stack-of-open-elements>stack of open elements</a> immediately below
     the position of the <var title="">furthest block</var> in that
     stack.</li>

     <li><p>Jump back to step 1 in this series of steps.</li>

    </ol><p class=note>Because of the way this algorithm causes elements
    to change parents, it has been dubbed the "adoption agency
    algorithm" (in contrast with other possible algorithms for dealing
    with misnested content, which included the "incest algorithm", the
    "secret affair algorithm", and the "Heisenberg algorithm").</p>

   </dd>

   <dt>A start tag token whose tag name is one of: "applet",
   "marquee", "object"</dt>
   <dd>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Insert a marker at the end of the <a href=#list-of-active-formatting-elements>list of active
    formatting elements</a>.</p>

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>

   </dd>

   <dt>An end tag token whose tag name is one of: "applet",
   "marquee", "object"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
    with the same tag name as that of the token, then this is a
    <a href=#parse-error>parse error</a>; ignore the token.</p>

    <p>Otherwise, run these steps:</p>

    <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>

     <li><p>If the <a href=#current-node>current node</a> is not an element with
     the same tag name as that of the token, then this is a
     <a href=#parse-error>parse error</a>.</li>

     <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
     until an element with the same tag name as the token has been
     popped from the stack.</li>

     <li><a href=#clear-the-list-of-active-formatting-elements-up-to-the-last-marker>Clear the list of active formatting elements up to the
     last marker</a>.</li>

    </ol></dd>

   <dt>A start tag whose tag name is "table"</dt>
   <dd>

    <p>If the <code><a href=#document>Document</a></code> is <em>not</em> set to
    <a href=#quirks-mode>quirks mode</a>, and the <a href=#stack-of-open-elements>stack of open
    elements</a> <a href=#has-an-element-in-scope title="has an element in scope">has a
    <code>p</code> element in scope</a>, then act as if an end tag
    with the tag name "p" had been seen.</p> <!-- i hate myself (this
    quirk was basically caused by acid2; if i'd realised we could
    change the specs when i wrote acid2, we could have avoided having
    any parsing-mode quirks) -Hixie -->

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>".</p>

   </dd>

   <dt>A start tag whose tag name is one of: "area", "basefont",
   "bgsound", "br", "embed", "img", "input", "keygen", "wbr"</dt>
   <dd>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
    pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
    token's <i>self-closing flag</i></a>, if it is set.</p>

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p> <!--
    shouldn't really do it for <area>, <basefont>, and <bgsound> -->

   </dd>

   <dt>A start tag whose tag name is one of: "param", "source", "track"</dt>
   <dd>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
    pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
    token's <i>self-closing flag</i></a>, if it is set.</p>

   </dd>

   <dt>A start tag whose tag name is "hr"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
    an element in scope">has a <code>p</code> element in
    scope</a>, then act as if an end tag with the tag name
    "p" had been seen.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
    pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
    token's <i>self-closing flag</i></a>, if it is set.</p>

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>

   </dd>

   <dt>A start tag whose tag name is "image"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Change the token's tag name
    to "img" and reprocess it. (Don't ask.)</p> <!-- As of
    2005-12, studies showed that around 0.2% of pages used the
    <image> element. -->
   </dd>

   <dt id=isindex>A start tag whose tag name is "isindex"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>.</p>

    <p>If the <a href=#form-element-pointer><code title="">form</code> element
    pointer</a> is not null, then ignore the token.</p>

    <p>Otherwise:</p>

    <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
    token's <i>self-closing flag</i></a>, if it is set.</p> <!--
    purely to reduce the number of errors (we don't care if they
    included the /, they're not supposed to be including the tag at
    all! -->

    <p>Act as if a start tag token with the tag name "form" had been seen.</p>

    <p>If the token has an attribute called "action", set the
    <code title=attr-form-action>action</code> attribute on the
    resulting <code><a href=#the-form-element>form</a></code> element to the value of the
    "action" attribute of the token.</p>

    <p>Act as if a start tag token with the tag name "hr" had been
    seen.</p>

    <p>Act as if a start tag token with the tag name "label" had been
    seen.</p>

    <p>Act as if a stream of character tokens had been seen (see below
    for what they should say).</p>

    <p>Act as if a start tag token with the tag name "input" had been
    seen, with all the attributes from the "isindex" token except
    "name", "action", and "prompt". Set the <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute of the resulting
    <code><a href=#the-input-element>input</a></code> element to the value "<code title="">isindex</code>".</p>

    <p>Act as if a stream of character tokens had been seen (see
    below for what they should say).</p>

    <p>Act as if an end tag token with the tag name "label" had been
    seen.</p>

    <p>Act as if a start tag token with the tag name "hr" had been
    seen.</p>

    <p>Act as if an end tag token with the tag name "form" had been
    seen.</p>

    <p>If the token has an attribute with the name "prompt", then the
    first stream of characters must be the same string as given in
    that attribute, and the second stream of characters must be
    empty. Otherwise, the two streams of character tokens together
    should, together with the <code><a href=#the-input-element>input</a></code> element, express the
    equivalent of "This is a searchable index. Enter search keywords:
    (input field)" in the user's preferred language.</p>

   </dd>

   <dt>A start tag whose tag name is "textarea"</dt>
   <dd>

    <p>Run these steps:</p>

    <ol><li><p><a href=#insert-an-html-element>Insert an HTML element</a> for the
     token.</li>

     <li><p>If the next token is a U+000A LINE FEED (LF) character
     token, then ignore that token and move on to the next
     one. (Newlines at the start of <code><a href=#the-textarea-element>textarea</a></code> elements are
     ignored as an authoring convenience.)</li>

     <!-- see comment in <pre> start tag bit -->

     <li><p>Switch the tokenizer to the <a href=#rcdata-state>RCDATA
     state</a>.</li>

     <li><p>Let the <a href=#original-insertion-mode>original insertion mode</a> be the
     current <a href=#insertion-mode>insertion mode</a>.</p>

     <li><p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not
     ok".</li>

     <li><p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incdata title="insertion mode: text">text</a>".</li>

    </ol></dd>

   <dt>A start tag whose tag name is "xmp"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
    an element in scope">has a <code>p</code> element in
    scope</a>, then act as if an end tag with the tag name
    "p" had been seen.</p>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>

    <p>Follow the <a href=#generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</a>.</p>

   </dd>

   <dt>A start tag whose tag name is "iframe"</dt>
   <dd>

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>

    <p>Follow the <a href=#generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</a>.</p>

   </dd>

   <dt>A start tag whose tag name is "noembed"</dt>
   <dt>A start tag whose tag name is "noscript", if the <a href=#scripting-flag>scripting flag</a> is enabled</dt>
   <dd>

    <p>Follow the <a href=#generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</a>.</p>

   </dd>

   <dt>A start tag whose tag name is "select"</dt>
   <dd>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>

    <p>If the <a href=#insertion-mode>insertion mode</a> is one of <a href=#parsing-main-intable title="insertion mode: in table">in table</a>", "<a href=#parsing-main-incaption title="insertion mode: in caption">in caption</a>", "<a href=#parsing-main-incolgroup title="insertion mode: in column group">in column group</a>",
    "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
    body</a>", "<a href=#parsing-main-intr title="insertion mode: in row">in
    row</a>", or "<a href=#parsing-main-intd title="insertion mode: in cell">in
    cell</a>", then switch the <a href=#insertion-mode>insertion mode</a> to
    "<a href=#parsing-main-inselectintable title="insertion mode: in select in table">in select in
    table</a>". Otherwise, switch the <a href=#insertion-mode>insertion mode</a>
    to "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>".</p>

   </dd>

   <dt>A start tag whose tag name is one of: "optgroup", "option"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has an
    element in scope">has an <code>option</code> element in
    scope</a>, then act as if an end tag with the tag name "option"
    had been seen.</p>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

   </dd>

   <dt>A start tag whose tag name is one of: "rp", "rt"</dt>
   <dd>

    <!-- the parsing rules for ruby really don't match IE much at all,
         but in practice the markup used is very simple and so strict
         compatibility with IE isn't required. For example, as defined
         here we get very, very different behaviour than IE for
         pathological cases like:

           <ruby><ol><li><p>a<rt>b
           <ruby>a<rt>b<p>c

         But in practice most ruby markup falls into these cases:

           <ruby>a<rt>b</ruby>
           <ruby>a<rp>b<rt>c<rp>d</ruby>
           <ruby>a<rt>b</rt></ruby>
           <ruby>a<rp>b</rp><rt>c</rt><rp>d</rp></ruby>

    -->

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has an
    element in scope">has a <code>ruby</code> element in scope</a>,
    then <a href=#generate-implied-end-tags>generate implied end tags</a>. If the <a href=#current-node>current
    node</a> is not then a <code><a href=#the-ruby-element>ruby</a></code> element, this is a
    <a href=#parse-error>parse error</a>; pop all the nodes from the <a href=#current-node>current
    node</a> up to the node immediately before the bottommost
    <code><a href=#the-ruby-element>ruby</a></code> element on the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

   </dd>

   <dt>An end tag whose tag name is "br"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Act as if a start tag token with
    the tag name "br" had been seen. Ignore the end tag token.</p>
   </dd>

   <dt>A start tag whose tag name is "math"</dt>
   <dd>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#adjust-mathml-attributes>Adjust MathML attributes</a> for the token. (This
    fixes the case of MathML attributes that are not all
    lowercase.)</p>

    <p><a href=#adjust-foreign-attributes>Adjust foreign attributes</a> for the token. (This
    fixes the use of namespaced attributes, in particular XLink.)</p>

    <p><a href=#insert-a-foreign-element>Insert a foreign element</a> for the token, in the
    <a href=#mathml-namespace>MathML namespace</a>.</p>

    <!-- If we ever change the frameset-ok flag to an insertion mode,
    the following change would be implied, except we'd have to do it
    even in the face of a self-closed tag:
    <p>Set the <span>frameset-ok flag</span> to "not ok".</p>
    -->

    <p>If the token has its <i>self-closing flag</i> set, pop the
    <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a> and <a href=#acknowledge-self-closing-flag title="acknowledge self-closing
    flag">acknowledge the token's <i>self-closing flag</i></a>.</p>

    <p>Otherwise, if the <a href=#insertion-mode>insertion mode</a> is not already
    "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
    content</a>", let the <a href=#secondary-insertion-mode>secondary insertion mode</a> be
    the current <a href=#insertion-mode>insertion mode</a>, and then switch the
    <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inforeign title="insertion mode: in
    foreign content">in foreign content</a>".</p>

   </dd>

   <dt>A start tag whose tag name is "svg"</dt>
   <dd>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#adjust-svg-attributes>Adjust SVG attributes</a> for the token. (This fixes
    the case of SVG attributes that are not all lowercase.)</p>

    <p><a href=#adjust-foreign-attributes>Adjust foreign attributes</a> for the token. (This
    fixes the use of namespaced attributes, in particular XLink in
    SVG.)</p>

    <p><a href=#insert-a-foreign-element>Insert a foreign element</a> for the token, in the
    <a href=#svg-namespace>SVG namespace</a>.</p>

    <!-- If we ever change the frameset-ok flag to an insertion mode,
    the following change would be implied, except we'd have to do it
    even in the face of a self-closed tag:
    <p>Set the <span>frameset-ok flag</span> to "not ok".</p>
    -->

    <p>If the token has its <i>self-closing flag</i> set, pop the
    <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a> and <a href=#acknowledge-self-closing-flag title="acknowledge self-closing
    flag">acknowledge the token's <i>self-closing flag</i></a>.</p>

    <p>Otherwise, if the <a href=#insertion-mode>insertion mode</a> is not already
    "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
    content</a>", let the <a href=#secondary-insertion-mode>secondary insertion mode</a> be
    the current <a href=#insertion-mode>insertion mode</a>, and then switch the
    <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inforeign title="insertion mode: in
    foreign content">in foreign content</a>".</p>

   </dd>

   <dt>A start <!--or end--> tag whose tag name is one of: "caption",
   "col", "colgroup", "frame", "head", "tbody", "td", "tfoot", "th",
   "thead", "tr"</dt>
   <!--<dt>An end tag whose tag name is one of: "area", "base",
   "basefont", "bgsound", "command", "embed", "hr", "iframe", "image",
   "img", "input", "isindex", "keygen", "link", "meta", "noembed",
   "noframes", "param", "script", "select", "source", "style",
   "table", "textarea", "title", "track", "wbr"</dt>-->
   <!--<dt>An end tag whose tag name is "noscript", if the
   <span>scripting flag</span> is enabled</dt>-->
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
    <!-- end tags are commented out because since they can never end
    up on the stack anyway, the default end tag clause will
    automatically handle them. we don't want to have text in the spec
    that is just an optimisation, as that detracts from the spec
    itself -->
   </dd>

   <dt>Any other start tag</dt>
   <dd>

    <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
    any.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p class=note>This element will be a <a href=#phrasing>phrasing</a>
    element.</p>

   </dd>

   <dt>Any other end tag</dt>
   <dd>

    <p>Run these steps:</p>

    <ol><li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
     node</a> (the bottommost node of the stack).</li>

     <li><p>If <var title="">node</var> has the same tag name as
     the token, then:</p>

      <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>

       <li><p>If the tag name of the end tag token does not match
       the tag name of the <a href=#current-node>current node</a>, this is a
       <a href=#parse-error>parse error</a>.</li>

       <li><p>Pop all the nodes from the <a href=#current-node>current node</a> up
       to <var title="">node</var>, including <var title="">node</var>, then stop these steps.</li>

      </ol></li>

     <li><p>Otherwise, if <var title="">node</var> is in neither the
     <a href=#formatting>formatting</a> category nor the <a href=#phrasing>phrasing</a>
     category, then this is a <a href=#parse-error>parse error</a>; ignore the
     token, and abort these steps.</li>

     <li><p>Set <var title="">node</var> to the previous entry in the
     <a href=#stack-of-open-elements>stack of open elements</a>.</li>

     <li><p>Return to step 2.</li>

    </ol></dd>

  </dl><h5 id=parsing-main-incdata><span class=secno>10.2.5.11 </span>The "<dfn title="insertion mode: text">text</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-incdata title="insertion
  mode: text">text</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token</dt>
   <dd>

    <p><a href=#insert-a-character title="insert a character">Insert the token's
    character</a> into the <a href=#current-node>current node</a>.</p>

   </dd>

   <dt>An end-of-file token</dt>
   <dd>

    <!-- can't be the fragment case -->
    <p><a href=#parse-error>Parse error</a>.</p>

    <p>If the <a href=#current-node>current node</a> is a <code><a href=#script>script</a></code>
    element, mark the <code><a href=#script>script</a></code> element as <a href=#already-started>"already
    started"</a>.</p>

    <p>Pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to the <a href=#original-insertion-mode>original
    insertion mode</a> and reprocess the current token.</p>

   </dd>

   <dt id=scriptEndTag>An end tag whose tag name is "script"</dt>
   <dd>

    <p>Let <var title="">script</var> be the <a href=#current-node>current node</a>
    (which will be a <code><a href=#script>script</a></code> element).</p>

    <p>Pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to the <a href=#original-insertion-mode>original
    insertion mode</a>.</p>

    <p>Let the <var title="">old insertion point</var> have the
    same value as the current <a href=#insertion-point>insertion point</a>. Let
    the <a href=#insertion-point>insertion point</a> be just before the <a href=#next-input-character>next
    input character</a>.</p>

    <p>Increment the parser's <a href=#script-nesting-level>script nesting level</a> by
    one.</p>

    <p><a href=#running-a-script title="running a script">Run</a> the <var title="">script</var>. This might cause some script to execute,
    which might cause <a href=#dom-document-write title=dom-document-write>new characters
    to be inserted into the tokenizer</a>, and might cause the
    tokenizer to output more tokens, resulting in a <a href=#nestedParsing>reentrant invocation of the parser</a>.</p>

    <p>Decrement the parser's <a href=#script-nesting-level>script nesting level</a> by
    one. If the parser's <a href=#script-nesting-level>script nesting level</a> is zero,
    then set the <a href=#parser-pause-flag>parser pause flag</a> to false.</p>

    <p>Let the <a href=#insertion-point>insertion point</a> have the value of the <var title="">old insertion point</var>. (In other words, restore the
    <a href=#insertion-point>insertion point</a> to its previous value. This value
    might be the "undefined" value.)</p>

    <p id=scriptTagParserResumes>At this stage, if there is a
    <a href=#pending-parsing-blocking-script>pending parsing-blocking script</a>, then:</p>

    <dl class=switch><dt>If the <a href=#script-nesting-level>script nesting level</a> is not zero:</dt>

     <dd>

      <p>Set the <a href=#parser-pause-flag>parser pause flag</a> to true, and abort the
      processing of any nested invocations of the tokenizer, yielding
      control back to the caller. (Tokenization will resume when the
      caller returns to the "outer" tree construction stage.)</p>

      <p class=note>The tree construction stage of this particular
      parser is <a href=#nestedParsing>being called reentrantly</a>,
      say from a call to <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code>.</p>

     </dd>


     <dt>Otherwise:</dt>

     <dd>

      <p>Run these steps:</p>

      <ol><li><p>Let <var title="">the script</var> be the <a href=#pending-parsing-blocking-script>pending
       parsing-blocking script</a>. There is no longer a <a href=#pending-parsing-blocking-script>pending
       parsing-blocking script</a>.</li>

       <li><p>Block the <a href=#tokenization title=tokenization>tokenizer</a>
       for this instance of the <a href=#html-parser>HTML parser</a>, such that
       the <a href=#event-loop>event loop</a> will not run <a href=#concept-task title=concept-task>tasks</a> that invoke the <a href=#tokenization title=tokenization>tokenizer</a>.</li>

       <li><p><a href=#spin-the-event-loop>Spin the event loop</a> until there is no <a href=#a-style-sheet-blocking-scripts title="a style sheet blocking scripts">style sheet blocking
       scripts</a> and <var title="">the script</var>'s
       <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag is set.</li>

       <li><p>Unblock the <a href=#tokenization title=tokenization>tokenizer</a>
       for this instance of the <a href=#html-parser>HTML parser</a>, such that
       <a href=#concept-task title=concept-task>tasks</a> that invoke the <a href=#tokenization title=tokenization>tokenizer</a> can again be
       run.</li>

       <li><p>Let the <a href=#insertion-point>insertion point</a> be just before the
       <a href=#next-input-character>next input character</a>.</li>

       <li><p>Increment the parser's <a href=#script-nesting-level>script nesting level</a>
       by one (it should be zero before this step, so this sets it to
       one).</li>

       <li><p><a href=#executing-a-script-block title="executing a script block">Execute</a>
       <var title="">the script</var>.</li>

       <li><p>Decrement the parser's <a href=#script-nesting-level>script nesting level</a>
       by one. If the parser's <a href=#script-nesting-level>script nesting level</a> is
       zero (which it always should be at this point), then set the
       <a href=#parser-pause-flag>parser pause flag</a> to false.</p>

       <li><p>Let the <a href=#insertion-point>insertion point</a> be undefined
       again.</li>

       <li><p>If there is once again a <a href=#pending-parsing-blocking-script>pending parsing-blocking
       script</a>, then repeat these steps from step 1.</li>

      </ol></dd>

    </dl></dd>

   <dt>Any other end tag</dt>
   <dd>

    <p>Pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to the <a href=#original-insertion-mode>original
    insertion mode</a>.</p>

   </dd>

  </dl><h5 id=parsing-main-intable><span class=secno>10.2.5.12 </span>The "<dfn title="insertion mode: in table">in table</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intable title="insertion
  mode: in table">in table</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token</dt>
   <dd>

     <p>Let the <dfn id=pending-table-character-tokens><var>pending table character tokens</var></dfn>
     be an empty list of tokens.</p>

     <p>Let the <a href=#original-insertion-mode>original insertion mode</a> be the current
     <a href=#insertion-mode>insertion mode</a>.</p>

     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intabletext title="insertion mode: in table text">in table text</a>" and
     reprocess the token.</p>

   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "caption"</dt>
   <dd>

    <p><a href=#clear-the-stack-back-to-a-table-context>Clear the stack back to a table context</a>. (See
    below.)</p>

    <p>Insert a marker at the end of the <a href=#list-of-active-formatting-elements>list of active
    formatting elements</a>.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then
    switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incaption title="insertion mode: in caption">in caption</a>".</p>

   </dd>

   <dt>A start tag whose tag name is "colgroup"</dt>
   <dd>

    <p><a href=#clear-the-stack-back-to-a-table-context>Clear the stack back to a table context</a>. (See
    below.)</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then
    switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incolgroup title="insertion mode: in column group">in column
    group</a>".</p>

   </dd>

   <dt>A start tag whose tag name is "col"</dt>
   <dd>
    <p>Act as if a start tag token with the tag name "colgroup"
    had been seen, then reprocess the current token.</p>
   </dd>

   <dt>A start tag whose tag name is one of: "tbody", "tfoot", "thead"</dt>
   <dd>

    <p><a href=#clear-the-stack-back-to-a-table-context>Clear the stack back to a table context</a>. (See
    below.)</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then
    switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
    body</a>".</p>

   </dd>

   <dt>A start tag whose tag name is one of: "td", "th", "tr"</dt>
   <dd>
    <p>Act as if a start tag token with the tag name "tbody" had
    been seen, then reprocess the current token.</p>
   </dd>

   <dt>A start tag whose tag name is "table"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>. Act as if an end tag token with
    the tag name "table" had been seen, then, if that token wasn't
    ignored, reprocess the current token.</p>

    <p class=note>The fake end tag token here can only be
    ignored in the <a href=#fragment-case>fragment case</a>.</p>

   </dd>

   <dt>An end tag whose tag name is "table"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
    scope</a> with the same tag name as the token, this is a
    <a href=#parse-error>parse error</a>. Ignore the token. (<a href=#fragment-case>fragment
    case</a>)</p>

    <p>Otherwise:</p>

    <p>Pop elements from this stack until a <code><a href=#the-table-element>table</a></code>
    element has been popped from the stack.</p>

    <p><a href=#reset-the-insertion-mode-appropriately>Reset the insertion mode appropriately</a>.</p>

   </dd>

   <dt>An end tag whose tag name is one of: "body", "caption",
   "col", "colgroup", "html", "tbody", "td", "tfoot", "th",
   "thead", "tr"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is one of: "style", "script"</dt>
   <dd>

    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>

   </dd>

   <dt>A start tag whose tag name is "input"</dt>
   <dd>

    <p>If the token does not have an attribute with the name "type",
    or if it does, but that attribute's value is not an <a href=#ascii-case-insensitive>ASCII
    case-insensitive</a> match for the string "<code title="">hidden</code>", then: act as described in the "anything
    else" entry below.</p>

    <p>Otherwise:</p>

    <p><a href=#parse-error>Parse error</a>.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Pop that <code><a href=#the-input-element>input</a></code> element off the <a href=#stack-of-open-elements>stack of
    open elements</a>.</p>

   </dd>

   <dt>A start tag whose tag name is "form"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>.</p>

    <p>If the <a href=#form-element-pointer><code title=form>form</code> element
    pointer</a> is not null, ignore the token.</p>

    <p>Otherwise:</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

    <p>Pop that <code><a href=#the-form-element>form</a></code> element off the <a href=#stack-of-open-elements>stack of
    open elements</a>.</p>

   </dd>

   <!-- "form" end tag falls through to in-body, which does the right thing -->

   <dt>An end-of-file token</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is not the root
    <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
    error</a>.</p>

    <p class=note>It can only be the <a href=#current-node>current node</a> in
    the <a href=#fragment-case>fragment case</a>.</p>

    <p><a href=#stop-parsing>Stop parsing</a>.</p>

   </dd>

   <dt>Anything else</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>. Process the token <a href=#using-the-rules-for>using the
    rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in
    body</a>" <a href=#insertion-mode>insertion mode</a>, except that if the
    <a href=#current-node>current node</a> is a <code><a href=#the-table-element>table</a></code>,
    <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-thead-element>thead</a></code>, or
    <code><a href=#the-tr-element>tr</a></code> element, then, whenever a node would be inserted
    into the <a href=#current-node>current node</a>, it must instead be <a href=#foster-parent title="foster parent">foster parented</a>.</p>

   </dd>

  </dl><p>When the steps above require the UA to <dfn id=clear-the-stack-back-to-a-table-context>clear the stack
  back to a table context</dfn>, it means that the UA must, while
  the <a href=#current-node>current node</a> is not a <code><a href=#the-table-element>table</a></code>
  element or an <code><a href=#the-html-element-0>html</a></code> element, pop elements from the
  <a href=#stack-of-open-elements>stack of open elements</a>.</p>

  <p class=note>The <a href=#current-node>current node</a> being an
  <code><a href=#the-html-element-0>html</a></code> element after this process is a <a href=#fragment-case>fragment
  case</a>.</p>



  <h5 id=parsing-main-intabletext><span class=secno>10.2.5.13 </span>The "<dfn title="insertion mode: in table text">in table text</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intabletext title="insertion
  mode: in table text">in table text</a>", tokens must be handled
  as follows:</p>

  <dl class=switch><dt>A character token</dt>
   <dd>

    <p>Append the character token to the <var><a href=#pending-table-character-tokens>pending table character
    tokens</a></var> list.</p>

   </dd>


   <dt>Anything else</dt>
   <dd>

    <p>If any of the tokens in the <var><a href=#pending-table-character-tokens>pending table character
    tokens</a></var> list are character tokens that are not one of U+0009
    CHARACTER TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED
    (FF), U+000D CARRIAGE RETURN (CR), or U+0020 SPACE, then
    reprocess those character tokens using the rules given in the
    "anything else" entry in the <a href=#parsing-main-intable title="insertion mode: in
    table">in table</a>" insertion mode.</p>

    <p>Otherwise, <a href=#insert-a-character title="insert a character">insert the
    characters</a> given by the <var><a href=#pending-table-character-tokens>pending table character
    tokens</a></var> list into the <a href=#current-node>current node</a>.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to the <a href=#original-insertion-mode>original
    insertion mode</a> and reprocess the token.</p>

   </dd>

  </dl><h5 id=parsing-main-incaption><span class=secno>10.2.5.14 </span>The "<dfn title="insertion mode: in caption">in caption</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-incaption title="insertion
  mode: in caption">in caption</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>An end tag whose tag name is "caption"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
    scope</a> with the same tag name as the token, this is a
    <a href=#parse-error>parse error</a>. Ignore the token. (<a href=#fragment-case>fragment
    case</a>)</p>

    <p>Otherwise:</p>

    <p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</p>

    <p>Now, if the <a href=#current-node>current node</a> is not a
    <code><a href=#the-caption-element>caption</a></code> element, then this is a <a href=#parse-error>parse
    error</a>.</p>

    <p>Pop elements from this stack until a <code><a href=#the-caption-element>caption</a></code>
    element has been popped from the stack.</p>

    <p><a href=#clear-the-list-of-active-formatting-elements-up-to-the-last-marker>Clear the list of active formatting elements up to
    the last marker</a>.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>".</p>

   </dd>

   <dt>A start tag whose tag name is one of: "caption", "col",
   "colgroup", "tbody", "td", "tfoot", "th", "thead", "tr"</dt>
   <dt>An end tag whose tag name is "table"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>. Act as if an end tag with the tag
    name "caption" had been seen, then, if that token wasn't
    ignored, reprocess the current token.</p>

    <p class=note>The fake end tag token here can only be
    ignored in the <a href=#fragment-case>fragment case</a>.</p>

   </dd>

   <dt>An end tag whose tag name is one of: "body", "col",
   "colgroup", "html", "tbody", "td", "tfoot", "th", "thead",
   "tr"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

  </dl><h5 id=parsing-main-incolgroup><span class=secno>10.2.5.15 </span>The "<dfn title="insertion mode: in column group">in column group</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-incolgroup title="insertion
  mode: in column group">in column group</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dd>
    <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
    the <a href=#current-node>current node</a>.</p>
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "col"</dt>
   <dd>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
    pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
    token's <i>self-closing flag</i></a>, if it is set.</p>

   </dd>

   <dt>An end tag whose tag name is "colgroup"</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is the root
    <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
    error</a>; ignore the token. (<a href=#fragment-case>fragment
    case</a>)</p>

    <p>Otherwise, pop the <a href=#current-node>current node</a> (which will be
    a <code><a href=#the-colgroup-element>colgroup</a></code> element) from the <a href=#stack-of-open-elements>stack of open
    elements</a>. Switch the <a href=#insertion-mode>insertion mode</a> to
    "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>".</p>

   </dd>

   <dt>An end tag whose tag name is "col"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>An end-of-file token</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is the root <code><a href=#the-html-element-0>html</a></code>
    element, then <a href=#stop-parsing>stop parsing</a>. (<a href=#fragment-case>fragment
    case</a>)</p>

    <p>Otherwise, act as described in the "anything else" entry
    below.</p>

   </dd>

   <dt>Anything else</dt>
   <dd>

    <p>Act as if an end tag with the tag name "colgroup" had been
    seen, and then, if that token wasn't ignored, reprocess the
    current token.</p>

    <p class=note>The fake end tag token here can only be
    ignored in the <a href=#fragment-case>fragment case</a>.</p>

   </dd>

  </dl><h5 id=parsing-main-intbody><span class=secno>10.2.5.16 </span>The "<dfn title="insertion mode: in table body">in table body</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intbody title="insertion
  mode: in table body">in table body</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A start tag whose tag name is "tr"</dt>
   <dd>

    <p><a href=#clear-the-stack-back-to-a-table-body-context>Clear the stack back to a table body
    context</a>. (See below.)</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then switch
    the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intr title="insertion mode:
    in row">in row</a>".</p>

   </dd>

   <dt>A start tag whose tag name is one of: "th", "td"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Act as if a start tag with
    the tag name "tr" had been seen, then reprocess the current
    token.</p>
   </dd>

   <dt>An end tag whose tag name is one of: "tbody", "tfoot",
   "thead"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
    scope</a> with the same tag name as the token, this is a
    <a href=#parse-error>parse error</a>. Ignore the token.</p>

    <p>Otherwise:</p>

    <p><a href=#clear-the-stack-back-to-a-table-body-context>Clear the stack back to a table body
    context</a>. (See below.)</p>

    <p>Pop the <a href=#current-node>current node</a> from the <a href=#stack-of-open-elements>stack of
    open elements</a>. Switch the <a href=#insertion-mode>insertion mode</a>
    to "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>".</p>

   </dd>

   <dt>A start tag whose tag name is one of: "caption", "col",
   "colgroup", "tbody", "tfoot", "thead"</dt>
   <dt>An end tag whose tag name is "table"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have a
    <code>tbody</code>, <code>thead</code>, or <code>tfoot</code>
    element in table scope</a>, this is a <a href=#parse-error>parse
    error</a>. Ignore the token. (<a href=#fragment-case>fragment
    case</a>)</p>

    <p>Otherwise:</p>

    <p><a href=#clear-the-stack-back-to-a-table-body-context>Clear the stack back to a table body
    context</a>. (See below.)</p>

    <p>Act as if an end tag with the same tag name as the
    <a href=#current-node>current node</a> ("tbody", "tfoot", or "thead") had
    been seen, then reprocess the current token.</p>

   </dd>

   <dt>An end tag whose tag name is one of: "body", "caption",
   "col", "colgroup", "html", "td", "th", "tr"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

  </dl><p>When the steps above require the UA to <dfn id=clear-the-stack-back-to-a-table-body-context>clear the stack
  back to a table body context</dfn>, it means that the UA must,
  while the <a href=#current-node>current node</a> is not a <code><a href=#the-tbody-element>tbody</a></code>,
  <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-thead-element>thead</a></code>, or <code><a href=#the-html-element-0>html</a></code>
  element, pop elements from the <a href=#stack-of-open-elements>stack of open
  elements</a>.</p>

  <p class=note>The <a href=#current-node>current node</a> being an
  <code><a href=#the-html-element-0>html</a></code> element after this process is a <a href=#fragment-case>fragment
  case</a>.</p>


  <h5 id=parsing-main-intr><span class=secno>10.2.5.17 </span>The "<dfn title="insertion mode: in row">in row</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intr title="insertion
  mode: in row">in row</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A start tag whose tag name is one of: "th", "td"</dt>
   <dd>

    <p><a href=#clear-the-stack-back-to-a-table-row-context>Clear the stack back to a table row
    context</a>. (See below.)</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then switch
    the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intd title="insertion mode:
    in cell">in cell</a>".</p>

    <p>Insert a marker at the end of the <a href=#list-of-active-formatting-elements>list of active
    formatting elements</a>.</p>

   </dd>

   <dt>An end tag whose tag name is "tr"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
    scope</a> with the same tag name as the token, this is a
    <a href=#parse-error>parse error</a>. Ignore the token. (<a href=#fragment-case>fragment
    case</a>)</p>

    <p>Otherwise:</p>

    <p><a href=#clear-the-stack-back-to-a-table-row-context>Clear the stack back to a table row
    context</a>. (See below.)</p>

    <p>Pop the <a href=#current-node>current node</a> (which will be a
    <code><a href=#the-tr-element>tr</a></code> element) from the <a href=#stack-of-open-elements>stack of open
    elements</a>. Switch the <a href=#insertion-mode>insertion mode</a> to
    "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
    body</a>".</p>

   </dd>

   <dt>A start tag whose tag name is one of: "caption", "col",
   "colgroup", "tbody", "tfoot", "thead", "tr"</dt>
   <dt>An end tag whose tag name is "table"</dt>
   <dd>

    <p>Act as if an end tag with the tag name "tr" had been seen,
    then, if that token wasn't ignored, reprocess the current
    token.</p>

    <p class=note>The fake end tag token here can only be
    ignored in the <a href=#fragment-case>fragment case</a>.</p>

   </dd>

   <dt>An end tag whose tag name is one of: "tbody", "tfoot",
   "thead"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
    scope</a> with the same tag name as the token, this is a
    <a href=#parse-error>parse error</a>. Ignore the token.</p>

    <p>Otherwise, act as if an end tag with the tag name "tr" had
    been seen, then reprocess the current token.</p>

   </dd>

   <dt>An end tag whose tag name is one of: "body", "caption",
   "col", "colgroup", "html", "td", "th"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

  </dl><p>When the steps above require the UA to <dfn id=clear-the-stack-back-to-a-table-row-context>clear the stack
  back to a table row context</dfn>, it means that the UA must,
  while the <a href=#current-node>current node</a> is not a <code><a href=#the-tr-element>tr</a></code>
  element or an <code><a href=#the-html-element-0>html</a></code> element, pop elements from the
  <a href=#stack-of-open-elements>stack of open elements</a>.</p>

  <p class=note>The <a href=#current-node>current node</a> being an
  <code><a href=#the-html-element-0>html</a></code> element after this process is a <a href=#fragment-case>fragment
  case</a>.</p>


  <h5 id=parsing-main-intd><span class=secno>10.2.5.18 </span>The "<dfn title="insertion mode: in cell">in cell</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intd title="insertion
  mode: in cell">in cell</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>An end tag whose tag name is one of: "td", "th"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
    scope</a> with the same tag name as that of the token, then
    this is a <a href=#parse-error>parse error</a> and the token must be
    ignored.</p>

    <p>Otherwise:</p>

    <p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</p>

    <p>Now, if the <a href=#current-node>current node</a> is not an element
    with the same tag name as the token, then this is a
    <a href=#parse-error>parse error</a>.</p>

    <p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a> stack
    until an element with the same tag name as the token has been
    popped from the stack.</p>

    <p><a href=#clear-the-list-of-active-formatting-elements-up-to-the-last-marker>Clear the list of active formatting elements up to
    the last marker</a>.</p>

    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intr title="insertion mode: in row">in row</a>". (The
    <a href=#current-node>current node</a> will be a <code><a href=#the-tr-element>tr</a></code> element at
    this point.)</p>

   </dd>

   <dt>A start tag whose tag name is one of: "caption", "col",
   "colgroup", "tbody", "td", "tfoot", "th", "thead", "tr"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does
    <em>not</em> <a href=#has-an-element-in-table-scope title="has an element in table scope">have
    a <code>td</code> or <code>th</code> element in table
    scope</a>, then this is a <a href=#parse-error>parse error</a>; ignore
    the token. (<a href=#fragment-case>fragment case</a>)</p>

    <p>Otherwise, <a href=#close-the-cell>close the cell</a> (see below) and
    reprocess the current token.</p>

   </dd>

   <dt>An end tag whose tag name is one of: "body", "caption",
   "col", "colgroup", "html"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>An end tag whose tag name is one of: "table", "tbody",
   "tfoot", "thead", "tr"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
    scope</a> with the same tag name as that of the token
    (which can only happen for "tbody", "tfoot" and "thead", or,
    in the <a href=#fragment-case>fragment case</a>), then this is a <a href=#parse-error>parse
    error</a> and the token must be ignored.</p>

    <p>Otherwise, <a href=#close-the-cell>close the cell</a> (see below) and
    reprocess the current token.</p>

   </dd>

   <dt>Anything else</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

  </dl><p>Where the steps above say to <dfn id=close-the-cell>close the cell</dfn>, they
  mean to run the following algorithm:</p>

  <ol><li><p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-table-scope title="has an element in table scope">has a <code>td</code>
   element in table scope</a>, then act as if an end tag token
   with the tag name "td" had been seen.</li>

   <li><p>Otherwise, the <a href=#stack-of-open-elements>stack of open elements</a> will
   <a href=#has-an-element-in-table-scope title="has an element in table scope">have a
   <code>th</code> element in table scope</a>; act as if an end
   tag token with the tag name "th" had been seen.</li>

  </ol><p class=note>The <a href=#stack-of-open-elements>stack of open elements</a> cannot
  have both a <code><a href=#the-td-element>td</a></code> and a <code><a href=#the-th-element>th</a></code> element <a href=#has-an-element-in-table-scope title="has an element in table scope">in table scope</a> at
  the same time, nor can it have neither when the <a href=#insertion-mode>insertion
  mode</a> is "<a href=#parsing-main-intd title="insertion mode: in cell">in
  cell</a>".</p>


  <h5 id=parsing-main-inselect><span class=secno>10.2.5.19 </span>The "<dfn title="insertion mode: in select">in select</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inselect title="insertion
  mode: in select">in select</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token</dt>
   <dd>
    <p><a href=#insert-a-character title="insert a character">Insert the token's
    character</a> into the <a href=#current-node>current node</a>.</p>
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "option"</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is an <code><a href=#the-option-element>option</a></code>
    element, act as if an end tag with the tag name "option" had
    been seen.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

   </dd>

   <dt>A start tag whose tag name is "optgroup"</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is an <code><a href=#the-option-element>option</a></code>
    element, act as if an end tag with the tag name "option" had
    been seen.</p>

    <p>If the <a href=#current-node>current node</a> is an
    <code><a href=#the-optgroup-element>optgroup</a></code> element, act as if an end tag with the
    tag name "optgroup" had been seen.</p>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>

   </dd>

   <dt>An end tag whose tag name is "optgroup"</dt>
   <dd>

    <p>First, if the <a href=#current-node>current node</a> is an
    <code><a href=#the-option-element>option</a></code> element, and the node immediately before
    it in the <a href=#stack-of-open-elements>stack of open elements</a> is an
    <code><a href=#the-optgroup-element>optgroup</a></code> element, then act as if an end tag with
    the tag name "option" had been seen.</p>

    <p>If the <a href=#current-node>current node</a> is an
    <code><a href=#the-optgroup-element>optgroup</a></code> element, then pop that node from the
    <a href=#stack-of-open-elements>stack of open elements</a>. Otherwise, this is a
    <a href=#parse-error>parse error</a>; ignore the token.</p>

   </dd>

   <dt>An end tag whose tag name is "option"</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is an <code><a href=#the-option-element>option</a></code>
    element, then pop that node from the <a href=#stack-of-open-elements>stack of open
    elements</a>. Otherwise, this is a <a href=#parse-error>parse
    error</a>; ignore the token.</p>

   </dd>

   <dt>An end tag whose tag name is "select"</dt>
   <dd>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
    scope</a> with the same tag name as the token, this is a
    <a href=#parse-error>parse error</a>. Ignore the token. (<a href=#fragment-case>fragment
    case</a>)</p>

    <p>Otherwise:</p>

    <p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
    until a <code><a href=#the-select-element>select</a></code> element has been popped from the
    stack.</p>

    <p><a href=#reset-the-insertion-mode-appropriately>Reset the insertion mode appropriately</a>.</p>

   </dd>

   <dt>A start tag whose tag name is "select"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>. Act as if the token had been
    an end tag with the tag name "select" instead.</p>

   </dd>

   <dt>A start tag whose tag name is one of: "input", "keygen", "textarea"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>.</p>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have a <code>select</code>
    element in table scope</a>, ignore the token. (<a href=#fragment-case>fragment
    case</a>)</p>

    <p>Otherwise, act as if an end tag with the tag name "select" had
    been seen, and reprocess the token.</p>

   </dd>

   <dt>A start tag token whose tag name is "script"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>An end-of-file token</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is not the root
    <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
    error</a>.</p>

    <p class=note>It can only be the <a href=#current-node>current node</a> in
    the <a href=#fragment-case>fragment case</a>.</p>

    <p><a href=#stop-parsing>Stop parsing</a>.</p>

   </dd>

   <dt>Anything else</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

  </dl><h5 id=parsing-main-inselectintable><span class=secno>10.2.5.20 </span>The "<dfn title="insertion mode: in select in table">in select in table</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inselectintable title="insertion
  mode: in select in table">in select in table</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A start tag whose tag name is one of: "caption", "table",
   "tbody", "tfoot", "thead", "tr", "td", "th"</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Act as if an end tag with the tag
    name "select" had been seen, and reprocess the token.</p>
   </dd>

   <dt>An end tag whose tag name is one of: "caption", "table",
   "tbody", "tfoot", "thead", "tr", "td", "th"</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>.</p>

    <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-table-scope>has an
    element in table scope</a> with the same tag name as that
    of the token, then act as if an end tag with the tag name
    "select" had been seen, and reprocess the token. Otherwise,
    ignore the token.</p>

   </dd>

   <dt>Anything else</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

  </dl><h5 id=parsing-main-inforeign><span class=secno>10.2.5.21 </span>The "<dfn title="insertion mode: in foreign content">in foreign content</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inforeign title="insertion
  mode: in foreign content">in foreign content</a>", tokens must be
  handled as follows:</p>

  <dl class=switch><dt>A character token</dt>
   <dd>

    <p><a href=#insert-a-character title="insert a character">Insert the token's
    character</a> into the <a href=#current-node>current node</a>.</p>

    <p>If the token is not one of U+0009 CHARACTER TABULATION, U+000A
    LINE FEED (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN
    (CR), or U+0020 SPACE, then set the <a href=#frameset-ok-flag>frameset-ok
    flag</a> to "not ok".</p>

   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt id=scriptForeignEndTag>An end tag whose tag name is "script", if the <a href=#current-node>current node</a> is a <code title="">script</code> element in the <a href=#svg-namespace>SVG namespace</a>.</dt>
   <dd>

    <p>Pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a>.</p>

    <p>Let the <var title="">old insertion point</var> have the
    same value as the current <a href=#insertion-point>insertion point</a>. Let
    the <a href=#insertion-point>insertion point</a> be just before the <a href=#next-input-character>next
    input character</a>.</p>

    <p>Increment the parser's <a href=#script-nesting-level>script nesting level</a> by
    one. Set the <a href=#parser-pause-flag>parser pause flag</a> to true.</p>

    <p><a href=http://www.w3.org/TR/SVGMobile12/script.html#ScriptContentProcessing>Process
    the <code title="">script</code> element</a> according to the SVG
    rules, if the user agent supports SVG. <a href=#refsSVG>[SVG]</a></p>

    <p class=note>Even if this causes <a href=#dom-document-write title=dom-document-write>new characters to be inserted into the
    tokenizer</a>, the parser will not be executed reentrantly,
    since the <a href=#parser-pause-flag>parser pause flag</a> is true.</p>

    <p>Decrement the parser's <a href=#script-nesting-level>script nesting level</a> by
    one. If the parser's <a href=#script-nesting-level>script nesting level</a> is zero,
    then set the <a href=#parser-pause-flag>parser pause flag</a> to false.</p>

    <p>Let the <a href=#insertion-point>insertion point</a> have the value of the <var title="">old insertion point</var>. (In other words, restore the
    <a href=#insertion-point>insertion point</a> to its previous value. This value
    might be the "undefined" value.)</p>

   </dd>

   <dt>An end tag, if the <a href=#current-node>current node</a> is not an element in the <a href=#html-namespace-0>HTML namespace</a>.</dt>

   <dd>

    <p>Run these steps:</p>

    <ol><li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
     node</a> (the bottommost node of the stack).</li>

     <li><p>If <var title="">node</var> is not an element with the
     same tag name as the token, then this is a <a href=#parse-error>parse
     error</a>.</li>

     <li><p><i>Loop</i>: If <var title="">node</var> has the same tag
     name as the token, pop elements from the <a href=#stack-of-open-elements>stack of
     open elements</a> until <var title="">node</var> has been
     popped from the stack, and then abort these steps.</li>

     <li><p>Set <var title="">node</var> to the previous entry in the
     <a href=#stack-of-open-elements>stack of open elements</a>.</li>

     <li>

      <p>If <var title="">node</var> is an element in the <a href=#html-namespace-0>HTML
      namespace</a>, process the token <a href=#using-the-rules-for>using the rules
      for</a> the <a href=#secondary-insertion-mode>secondary insertion mode</a>. If, after
      doing so, the <a href=#insertion-mode>insertion mode</a> is still "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
      content</a>", but there is no element <a href=#has-an-element-in-scope title="has an
      element in scope">in scope</a> that has a namespace other
      than the <a href=#html-namespace-0>HTML namespace</a>, switch the <a href=#insertion-mode>insertion
      mode</a> to the <a href=#secondary-insertion-mode>secondary insertion mode</a>.</p>

     </li>

     <li><p>Return to the step labeled <i>loop</i>.</li>

    </ol></dd>

   <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">mi</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">mo</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">mn</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">ms</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">mtext</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   <dt>A start tag whose tag name is "svg", if the <a href=#current-node>current node</a> is an <code title="">annotation-xml</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   <dt>A start tag, if the <a href=#current-node>current node</a> is a <code title="">foreignObject</code> element in the <a href=#svg-namespace>SVG namespace</a>.</dt>
   <dt>A start tag, if the <a href=#current-node>current node</a> is a <code title="">desc</code> element in the <a href=#svg-namespace>SVG namespace</a>.</dt>
   <dt>A start tag, if the <a href=#current-node>current node</a> is a <code title="">title</code> element in the <a href=#svg-namespace>SVG namespace</a>.</dt>
   <dt>A start tag, if the <a href=#current-node>current node</a> is an element in the <a href=#html-namespace-0>HTML namespace</a>.</dt>
   <dt>Any other end tag</dt>
   <dd>

    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the
    <a href=#secondary-insertion-mode>secondary insertion mode</a>.</p>

    <p>If, after doing so, the <a href=#insertion-mode>insertion mode</a> is still
    "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
    content</a>", but there is no element <a href=#has-an-element-in-scope title="has an
    element in scope">in scope</a> that has a namespace other than
    the <a href=#html-namespace-0>HTML namespace</a>, switch the <a href=#insertion-mode>insertion
    mode</a> to the <a href=#secondary-insertion-mode>secondary insertion mode</a>.</p>

   </dd>

   <dt>A start tag whose tag name is one of: <!--"a",--> "b", "big",
   "blockquote", "body"<!--by inspection-->, "br", "center", "code",
   "dd", "div", "dl", "dt"<!-- so that dd and dt can be handled
   uniformly throughout the parser -->, "em", "embed", "h1", "h2",
   "h3", "h4"<!--for completeness-->, "h5", "h6"<!--for
   completeness-->, "head"<!--by inspection-->, "hr", "i", "img",
   "li", "listing"<!-- so that pre and listing can be handled
   uniformly throughout the parser -->, "menu", "meta", "nobr",
   "ol"<!-- so that dl, ul, and ol can be handled uniformly throughout
   the parser -->, "p", "pre", "ruby", "s", <!--"script",--> "small",
   "span", "strong", "strike"<!-- so that s and strike can be handled
   uniformly throughout the parser -->, <!--"style",--> "sub", "sup",
   "table"<!--by inspection-->, "tt", "u", "ul", "var"</dt> <!-- this
   list was determined empirically by studying over 6,000,000,000
   pages that were specifically not XML pages -->
   <dt>A start tag whose tag name is "font", if the token has any
   attributes named "color", "face", or "size"</dt> <!-- the
   attributes here are required so that SVG <font> will go through as
   SVG but legacy <font>s won't -->
   <dt>An end-of-file token</dt> <dd>

    <p><a href=#parse-error>Parse error</a>.</p>

    <p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a> until
    either a <code><a href=#math>math</a></code> element or an <code><a href=#svg>svg</a></code> element
    has been popped from the stack, and reprocess the token.</p>

   </dd>

   <dt>Any other start tag</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is an element in the
    <a href=#mathml-namespace>MathML namespace</a>, <a href=#adjust-mathml-attributes>adjust MathML
    attributes</a> for the token. (This fixes the case of MathML
    attributes that are not all lowercase.)</p>

    <p>If the <a href=#current-node>current node</a> is an element in the <a href=#svg-namespace>SVG
    namespace</a>, and the token's tag name is one of the ones in
    the first column of the following table, change the tag name to
    the name given in the corresponding cell in the second
    column. (This fixes the case of SVG elements that are not all
    lowercase.)</p>

    <table><thead><tr><th> Tag name <th> Element name
     <tbody><tr><td> <code title="">altglyph</code> <td> <code title="">altGlyph</code>
      <tr><td> <code title="">altglyphdef</code> <td> <code title="">altGlyphDef</code>
      <tr><td> <code title="">altglyphitem</code> <td> <code title="">altGlyphItem</code>
      <tr><td> <code title="">animatecolor</code> <td> <code title="">animateColor</code>
      <tr><td> <code title="">animatemotion</code> <td> <code title="">animateMotion</code>
      <tr><td> <code title="">animatetransform</code> <td> <code title="">animateTransform</code>
      <tr><td> <code title="">clippath</code> <td> <code title="">clipPath</code>
      <tr><td> <code title="">feblend</code> <td> <code title="">feBlend</code>
      <tr><td> <code title="">fecolormatrix</code> <td> <code title="">feColorMatrix</code>
      <tr><td> <code title="">fecomponenttransfer</code> <td> <code title="">feComponentTransfer</code>
      <tr><td> <code title="">fecomposite</code> <td> <code title="">feComposite</code>
      <tr><td> <code title="">feconvolvematrix</code> <td> <code title="">feConvolveMatrix</code>
      <tr><td> <code title="">fediffuselighting</code> <td> <code title="">feDiffuseLighting</code>
      <tr><td> <code title="">fedisplacementmap</code> <td> <code title="">feDisplacementMap</code>
      <tr><td> <code title="">fedistantlight</code> <td> <code title="">feDistantLight</code>
      <tr><td> <code title="">feflood</code> <td> <code title="">feFlood</code>
      <tr><td> <code title="">fefunca</code> <td> <code title="">feFuncA</code>
      <tr><td> <code title="">fefuncb</code> <td> <code title="">feFuncB</code>
      <tr><td> <code title="">fefuncg</code> <td> <code title="">feFuncG</code>
      <tr><td> <code title="">fefuncr</code> <td> <code title="">feFuncR</code>
      <tr><td> <code title="">fegaussianblur</code> <td> <code title="">feGaussianBlur</code>
      <tr><td> <code title="">feimage</code> <td> <code title="">feImage</code>
      <tr><td> <code title="">femerge</code> <td> <code title="">feMerge</code>
      <tr><td> <code title="">femergenode</code> <td> <code title="">feMergeNode</code>
      <tr><td> <code title="">femorphology</code> <td> <code title="">feMorphology</code>
      <tr><td> <code title="">feoffset</code> <td> <code title="">feOffset</code>
      <tr><td> <code title="">fepointlight</code> <td> <code title="">fePointLight</code>
      <tr><td> <code title="">fespecularlighting</code> <td> <code title="">feSpecularLighting</code>
      <tr><td> <code title="">fespotlight</code> <td> <code title="">feSpotLight</code>
      <tr><td> <code title="">fetile</code> <td> <code title="">feTile</code>
      <tr><td> <code title="">feturbulence</code> <td> <code title="">feTurbulence</code>
      <tr><td> <code title="">foreignobject</code> <td> <code title="">foreignObject</code>
      <tr><td> <code title="">glyphref</code> <td> <code title="">glyphRef</code>
      <tr><td> <code title="">lineargradient</code> <td> <code title="">linearGradient</code>
      <tr><td> <code title="">radialgradient</code> <td> <code title="">radialGradient</code>
      <!--<tr> <td> <code title="">solidcolor</code> <td> <code title="">solidColor</code> (SVG 1.2)-->
      <tr><td> <code title="">textpath</code> <td> <code title="">textPath</code>
    </table><p>If the <a href=#current-node>current node</a> is an element in the <a href=#svg-namespace>SVG
    namespace</a>, <a href=#adjust-svg-attributes>adjust SVG attributes</a> for the
    token. (This fixes the case of SVG attributes that are not all
    lowercase.)</p>

    <p><a href=#adjust-foreign-attributes>Adjust foreign attributes</a> for the token. (This
    fixes the use of namespaced attributes, in particular XLink in
    SVG.)</p>

    <p><a href=#insert-a-foreign-element>Insert a foreign element</a> for the token, in the
    same namespace as the <a href=#current-node>current node</a>.</p>

    <p>If the token has its <i>self-closing flag</i> set, pop the
    <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
    elements</a> and <a href=#acknowledge-self-closing-flag title="acknowledge self-closing
    flag">acknowledge the token's <i>self-closing flag</i></a>.</p>

   </dd>

  </dl><h5 id=parsing-main-afterbody><span class=secno>10.2.5.22 </span>The "<dfn title="insertion mode: after body">after body</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-afterbody title="insertion
  mode: after body">after body</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the first element in
    the <a href=#stack-of-open-elements>stack of open elements</a> (the <code><a href=#the-html-element-0>html</a></code>
    element), with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>An end tag whose tag name is "html"</dt>
   <dd>

    <p>If the parser was originally created as part of the <a href=#html-fragment-parsing-algorithm>HTML
    fragment parsing algorithm</a>, this is a <a href=#parse-error>parse
    error</a>; ignore the token. (<a href=#fragment-case>fragment case</a>)</p>

    <p>Otherwise, switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-after-after-body-insertion-mode title="insertion mode: after after body">after after
    body</a>".</p>

   </dd>

   <dt>An end-of-file token</dt>
   <dd>
    <p><a href=#stop-parsing>Stop parsing</a>.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>

    <p><a href=#parse-error>Parse error</a>. Switch the <a href=#insertion-mode>insertion
    mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in body">in
    body</a>" and reprocess the token.</p>

   </dd>

  </dl><h5 id=parsing-main-inframeset><span class=secno>10.2.5.23 </span>The "<dfn title="insertion mode: in frameset">in frameset</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inframeset title="insertion
  mode: in frameset">in frameset</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dd>
    <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
    the <a href=#current-node>current node</a>.</p>
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "frameset"</dt>
   <dd>
    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   </dd>

   <dt>An end tag whose tag name is "frameset"</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is the root
    <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
    error</a>; ignore the token. (<a href=#fragment-case>fragment
    case</a>)</p>

    <p>Otherwise, pop the <a href=#current-node>current node</a> from the
    <a href=#stack-of-open-elements>stack of open elements</a>.</p>

    <p>If the parser was <em>not</em> originally created as part
    of the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing algorithm</a>
    (<a href=#fragment-case>fragment case</a>), and the <a href=#current-node>current
    node</a> is no longer a <code><a href=#frameset>frameset</a></code> element, then
    switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-afterframeset title="insertion mode: after frameset">after
    frameset</a>".</p>

   </dd>

   <dt>A start tag whose tag name is "frame"</dt>
   <dd>

    <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.
    Immediately pop the <a href=#current-node>current node</a> off the
    <a href=#stack-of-open-elements>stack of open elements</a>.</p>

    <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
    token's <i>self-closing flag</i></a>, if it is set.</p>

   </dd>

   <dt>A start tag whose tag name is "noframes"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>An end-of-file token</dt>
   <dd>

    <p>If the <a href=#current-node>current node</a> is not the root
    <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
    error</a>.</p>

    <p class=note>It can only be the <a href=#current-node>current node</a> in
    the <a href=#fragment-case>fragment case</a>.</p>

    <p><a href=#stop-parsing>Stop parsing</a>.</p>

   </dd>

   <dt>Anything else</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

  </dl><h5 id=parsing-main-afterframeset><span class=secno>10.2.5.24 </span>The "<dfn title="insertion mode: after frameset">after frameset</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-afterframeset title="insertion
  mode: after frameset">after frameset</a>", tokens must be handled as follows:</p>

  <!-- due to rules in the "in frameset" mode, this can't be entered in the fragment case -->
  <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dd>
    <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
    the <a href=#current-node>current node</a>.</p>
   </dd>

   <dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
    node</a> with the <code title="">data</code> attribute set to
    the data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>An end tag whose tag name is "html"</dt>
   <dd>
    <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-after-after-frameset-insertion-mode title="insertion mode: after after frameset">after after
    frameset</a>".</p>
   </dd>

   <dt>A start tag whose tag name is "noframes"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>An end-of-file token</dt>
   <dd>
    <p><a href=#stop-parsing>Stop parsing</a>.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

  </dl><h5 id=the-after-after-body-insertion-mode><span class=secno>10.2.5.25 </span>The "<dfn title="insertion mode: after after body">after after body</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-after-after-body-insertion-mode title="insertion
  mode: after after body">after after body</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <code><a href=#document>Document</a></code>
    object with the <code title="">data</code> attribute set to the
    data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>An end-of-file token</dt>
   <dd>
    <p><a href=#stop-parsing>Stop parsing</a>.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Switch the <a href=#insertion-mode>insertion mode</a>
    to "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" and
    reprocess the token.</p>
   </dd>

  </dl><h5 id=the-after-after-frameset-insertion-mode><span class=secno>10.2.5.26 </span>The "<dfn title="insertion mode: after after frameset">after after frameset</dfn>" insertion mode</h5>

  <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-after-after-frameset-insertion-mode title="insertion
  mode: after after frameset">after after frameset</a>", tokens must be handled as follows:</p>

  <dl class=switch><dt>A comment token</dt>
   <dd>
    <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <code><a href=#document>Document</a></code>
    object with the <code title="">data</code> attribute set to the
    data given in the comment token.</p>
   </dd>

   <dt>A DOCTYPE token</dt>
   <dt>A character token that is one of U+0009 CHARACTER
   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   <dt>A start tag whose tag name is "html"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>An end-of-file token</dt>
   <dd>
    <p><a href=#stop-parsing>Stop parsing</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "noframes"</dt>
   <dd>
    <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>" <a href=#insertion-mode>insertion
    mode</a>.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>
    <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   </dd>

  </dl></div>


  <div class=impl>

  <h4 id=the-end><span class=secno>10.2.6 </span>The end</h4>

  <p>Once the user agent <dfn id=stop-parsing title="stop parsing">stops parsing</dfn>
  the document, the user agent must run the following steps:</p>

  <ol><!-- this happens as part of one of the tasks that runs the parser --><li><p>Set the <a href=#current-document-readiness>current document readiness</a> to
   "interactive" <!-- this also synchronously fires an event --> and
   the <a href=#insertion-point>insertion point</a> to undefined.</li>

   <li><p>Pop <em>all</em> the nodes off the <a href=#stack-of-open-elements>stack of open
   elements</a>.</li>

   <li><p>If the <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will execute when the
   document has finished parsing</a> is not empty, run these
   substeps:</p>

    <ol><li><p><a href=#spin-the-event-loop>Spin the event loop</a> until the first
     <code><a href=#script>script</a></code> in the <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will
     execute when the document has finished parsing</a> has its
     <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag set <em>and</em> there
     is no <a href=#a-style-sheet-blocking-scripts title="a style sheet blocking scripts">style sheet
     blocking scripts</a>.</li>

     <li><p><a href=#executing-a-script-block title="executing a script block">Execute</a> the
     first <code><a href=#script>script</a></code> in the <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will
     execute when the document has finished parsing</a>.</li>

     <li><p>Remove the first <code><a href=#script>script</a></code> element from the
     <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will execute when the document has
     finished parsing</a> (i.e. shift out the first entry in the
     list).</li>

     <li><p>If the <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will execute when the
     document has finished parsing</a> is still not empty, repeat
     these substeps again from substep 1.</p>

    </ol></li>

   <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   event</a> named <code title=event-DOMContentLoaded>DOMContentLoaded</code> at the
   <code><a href=#document>Document</a></code>.</li>

   <li><p><a href=#spin-the-event-loop>Spin the event loop</a> until the <a href=#set-of-scripts-that-will-execute-as-soon-as-possible>set of
   scripts that will execute as soon as possible</a> is
   empty.</li> <!-- this step is redundant with the next one,
   really, since all those scripts also delay the load event. It's
   here in case we add an event between this step and the next or if
   we move the previous step (DOMContentLoaded) down again. -->

   <li><p><a href=#spin-the-event-loop>Spin the event loop</a> until there is nothing that
   <dfn id=delay-the-load-event title="delay the load event">delays the load event</dfn> in
   the <code><a href=#document>Document</a></code>.</li>

   <li><p><a href=#queue-a-task>Queue a task</a> to set the <a href=#current-document-readiness>current document
   readiness</a> to "complete". <!-- this also fires an event
   synchronously during the task --></li>

   <li><p>If the <code><a href=#document>Document</a></code> is in a <a href=#browsing-context>browsing
   context</a>, then <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a
   simple event</a> named <code title=event-load>load</code> at
   the <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object, but with
   its <code title=dom-event-target><a href=#dom-event-target>target</a></code> set to the
   <code><a href=#document>Document</a></code> object (and the <code title=dom-event-currentTarget>currentTarget</code> set to the
   <code><a href=#window>Window</a></code> object).</li>

   <li><p>If the <code><a href=#document>Document</a></code> is in a <a href=#browsing-context>browsing
   context</a>, then <a href=#queue-a-task>queue a task</a> to fire a <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code> event at the
   <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code>, but with
   its <code title=dom-event-target><a href=#dom-event-target>target</a></code> set to the
   <code><a href=#document>Document</a></code> object (and the <code title=dom-event-currentTarget>currentTarget</code> set to the
   <code><a href=#window>Window</a></code> object), using the
   <code><a href=#pagetransitionevent>PageTransitionEvent</a></code> interface, with the <code title=dom-PageTransitionEvent-persisted><a href=#dom-pagetransitionevent-persisted>persisted</a></code>
   attribute set to false. This event must not bubble, must not be
   cancelable, and has no default action.</li>

   <li><p>If the <code><a href=#document>Document</a></code> has a <a href=#pending-state-object>pending state
   object</a>, then <a href=#queue-a-task>queue a task</a> to fire a <code title=event-popstate><a href=#event-popstate>popstate</a></code> event at the
   <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object using the
   <code><a href=#popstateevent>PopStateEvent</a></code> interface, with the <code title=dom-PopStateEvent-state><a href=#dom-popstateevent-state>state</a></code> attribute set to the
   current value of the <a href=#pending-state-object>pending state object</a>. This event
   must bubble but not be cancelable and has no default
   action.</li>

   <li><p>If the <code><a href=#document>Document</a></code> has any <a href=#pending-application-cache-download-process-tasks>pending
   application cache download process tasks</a>, then <a href=#queue-a-task title="queue a task">queue</a> each such <a href=#concept-task title=concept-task>task</a> in the order they were added to
   the list of <a href=#pending-application-cache-download-process-tasks>pending application cache download process
   tasks</a>, and then empty the list of <a href=#pending-application-cache-download-process-tasks>pending application
   cache download process tasks</a>. The <a href=#task-source>task source</a>
   for these <a href=#concept-task title=concept-task>tasks</a> is the
   <a href=#networking-task-source>networking task source</a>.</li>

   <li><p>The <code><a href=#document>Document</a></code> is now <dfn id=completely-loaded>completely
   loaded</dfn>.</li>

  </ol><p>When the user agent is to <dfn id=abort-an-html-parser>abort an HTML parser</dfn>, it
  must run the following steps:</p>

  <ol><li><p>Throw away any pending content in the <a href=#the-input-stream>input
   stream</a>, and discard any future content that would have been
   added to it.</li>

   <li><p>Pop <em>all</em> the nodes off the <a href=#stack-of-open-elements>stack of open
   elements</a>.</li>

   <!-- anything else? this is things that happen when you call
   document.open() on a document that's still being parsed. Should the
   pending scripts be blown away or anything? -->

  </ol><p>Except where otherwise specified, the <a href=#task-source>task source</a>
  for the <a href=#concept-task title=concept-task>tasks</a> mentioned in this
  section is the <a href=#dom-manipulation-task-source>DOM manipulation task source</a>.</p>

  </div>


  <div class=impl>

  <h4 id=coercing-an-html-dom-into-an-infoset><span class=secno>10.2.7 </span>Coercing an HTML DOM into an infoset</h4>

  <p>When an application uses an <a href=#html-parser>HTML parser</a> in
  conjunction with an XML pipeline, it is possible that the
  constructed DOM is not compatible with the XML tool chain in certain
  subtle ways. For example, an XML toolchain might not be able to
  represent attributes with the name <code title="">xmlns</code>,
  since they conflict with the Namespaces in XML syntax. There is also
  some data that the <a href=#html-parser>HTML parser</a> generates that isn't
  included in the DOM itself. This section specifies some rules for
  handling these issues.</p>

  <p>If the XML API being used doesn't support DOCTYPEs, the tool may
  drop DOCTYPEs altogether.</p>

  <p>If the XML API doesn't support attributes in no namespace that
  are named "<code title="">xmlns</code>", attributes whose names
  start with "<code title="">xmlns:</code>", or attributes in the
  <a href=#xmlns-namespace>XMLNS namespace</a>, then the tool may drop such
  attributes.</p>

  <p>The tool may annotate the output with any namespace declarations
  required for proper operation.</p>

  <p>If the XML API being used restricts the allowable characters in
  the local names of elements and attributes, then the tool may map
  all element and attribute local names that the API wouldn't support
  to a set of names that <em>are</em> allowed, by replacing any
  character that isn't supported with the uppercase letter U and the
  six digits of the character's Unicode code point when expressed in
  hexadecimal, using digits 0-9 and capital letters A-F as the
  symbols, in increasing numeric order.</p>

  <p class=example>For example, the element name <code title="">foo&lt;bar</code>, which can be output by the <a href=#html-parser>HTML
  parser</a>, though it is neither a legal HTML element name nor a
  well-formed XML element name, would be converted into <code title="">fooU00003Cbar</code>, which <em>is</em> a well-formed XML
  element name (though it's still not legal in HTML by any means).</p>

  <p class=example>As another example, consider the attribute
  <code>xlink:href</code>. Used on a MathML element, it becomes, after
  being <a href=#adjust-foreign-attributes title="adjust foreign attributes">adjusted</a>, an
  attribute with a prefix "<code title="">xlink</code>" and a local
  name "<code title="">href</code>". However, used on an HTML element,
  it becomes an attribute with no prefix and the local name "<code title="">xlink:href</code>", which is not a valid NCName, and thus
  might not be accepted by an XML API. It could thus get converted,
  becoming "<code title="">xlinkU00003Ahref</code>".</p>

  <p class=note>The resulting names from this conversion
  conveniently can't clash with any attribute generated by the
  <a href=#html-parser>HTML parser</a>, since those are all either lowercase or
  those listed in the <a href=#adjust-foreign-attributes>adjust foreign attributes</a>
  algorithm's table.</p>

  <p>If the XML API restricts comments from having two consecutive
  U+002D HYPHEN-MINUS characters (--), the tool may insert a single
  U+0020 SPACE character between any such offending characters.</p>

  <p>If the XML API restricts comments from ending in a
  U+002D HYPHEN-MINUS character (-), the tool may insert a single
  U+0020 SPACE character at the end of such comments.</p>

  <p>If the XML API restricts allowed characters in character data,
  attribute values, or comments, the tool may replace any U+000C FORM
  FEED (FF) character with a U+0020 SPACE character, and any other
  literal non-XML character with a U+FFFD REPLACEMENT CHARACTER.</p>

  <p>If the tool has no way to convey out-of-band information, then
  the tool may drop the following information:</p>

  <ul><li>Whether the document is set to <i><a href=#no-quirks-mode>no-quirks mode</a></i>,
   <i><a href=#limited-quirks-mode>limited-quirks mode</a></i>, or <i><a href=#quirks-mode>quirks mode</a></i></li>

   <li>The association between form controls and forms that aren't
   their nearest <code><a href=#the-form-element>form</a></code> element ancestor (use of the
   <a href=#form-element-pointer><code>form</code> element pointer</a> in the parser)</li>

  </ul><p class=note>The mutations allowed by this section apply
  <em>after</em> the <a href=#html-parser>HTML parser</a>'s rules have been
  applied. For example, a <code title="">&lt;a::&gt;</code> start tag
  will be closed by a <code title="">&lt;/a::&gt;</code> end tag, and
  never by a <code title="">&lt;/aU00003AU00003A&gt;</code> end tag, even
  if the user agent is using the rules above to then generate an
  actual element in the DOM with the name <code title="">aU00003AU00003A</code> for that start tag.</p>

  </div>


  <div class=impl>

  <h4 id=an-introduction-to-error-handling-and-strange-cases-in-the-parser><span class=secno>10.2.8 </span>An introduction to error handling and strange cases in the parser</h4>

  <p><i>This section is non-normative.</i></p>

  <p>This section examines some erroneous markup and discusses how
  the <a href=#html-parser>HTML parser</a> handles these cases.</p>


  <h5 id=misnested-tags:-b-i-/b-/i><span class=secno>10.2.8.1 </span>Misnested tags: &lt;b&gt;&lt;i&gt;&lt;/b&gt;&lt;/i&gt;</h5>

  <p><i>This section is non-normative.</i></p>

  <p>The most-often discussed example of erroneous markup is as
  follows:</p>

  <pre>&lt;p&gt;1&lt;b&gt;2&lt;i&gt;3&lt;/b&gt;4&lt;/i&gt;5&lt;/p&gt;</pre>

  <p>The parsing of this markup is straightforward up to the "3". At
  this point, the DOM looks like this:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">3</span></ul></ul></ul></ul></ul></ul><p>Here, the <a href=#stack-of-open-elements>stack of open elements</a> has five elements
  on it: <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-p-element>p</a></code>,
  <code><a href=#the-b-element>b</a></code>, and <code><a href=#the-i-element>i</a></code>. The <a href=#list-of-active-formatting-elements>list of active
  formatting elements</a> just has two: <code><a href=#the-b-element>b</a></code> and
  <code><a href=#the-i-element>i</a></code>. The <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>".</p>

  <p>Upon receiving the end tag token with the tag name "b", the "<a href=#adoptionAgency>adoption agency algorithm</a>" is
  invoked. This is a simple case, in that the <var title="">formatting
  element</var> is the <code><a href=#the-b-element>b</a></code> element, and there is no
  <var title="">furthest block</var>. Thus, the <a href=#stack-of-open-elements>stack of open
  elements</a> ends up with just three elements: <code><a href=#the-html-element-0>html</a></code>,
  <code><a href=#the-body-element-0>body</a></code>, and <code><a href=#the-p-element>p</a></code>, while the <a href=#list-of-active-formatting-elements>list of
  active formatting elements</a> has just one: <code><a href=#the-i-element>i</a></code>. The
  DOM tree is unmodified at this point.</p>

  <p>The next token is a character ("4"), triggers the <a href=#reconstruct-the-active-formatting-elements title="reconstruct the active formatting elements">reconstruction of
  the active formatting elements</a>, in this case just the
  <code><a href=#the-i-element>i</a></code> element. A new <code><a href=#the-i-element>i</a></code> element is thus created
  for the "4" text node. After the end tag token for the "i" is also
  received, and the "5" text node is inserted, the DOM looks as
  follows:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">3</span></ul></ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">4</span></ul><li class=t3><code>#text</code>: <span title="">5</span></ul></ul></ul></ul><h5 id=misnested-tags:-b-p-/b-/p><span class=secno>10.2.8.2 </span>Misnested tags: &lt;b&gt;&lt;p&gt;&lt;/b&gt;&lt;/p&gt;</h5>

  <p><i>This section is non-normative.</i></p>

  <p>A case similar to the previous one is the following:</p>

  <pre>&lt;b&gt;1&lt;p&gt;2&lt;/b&gt;3&lt;/p&gt;</pre>

  <p>Up to the "2" the parsing here is straightforward:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul></ul></ul></ul></ul><p>The interesting part is when the end tag token with the tag name
  "b" is parsed.</p>

  <p>Before that token is seen, the <a href=#stack-of-open-elements>stack of open
  elements</a> has four elements on it: <code><a href=#the-html-element-0>html</a></code>,
  <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-b-element>b</a></code>, and <code><a href=#the-p-element>p</a></code>. The
  <a href=#list-of-active-formatting-elements>list of active formatting elements</a> just has the one:
  <code><a href=#the-b-element>b</a></code>. The <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>".</p>

  <p>Upon receiving the end tag token with the tag name "b", the "<a href=#adoptionAgency>adoption agency algorithm</a>" is invoked, as
  in the previous example. However, in this case, there <em>is</em> a
  <var title="">furthest block</var>, namely the <code><a href=#the-p-element>p</a></code> element. Thus,
  this time the adoption agency algorithm isn't skipped over.</p>

  <p>The <var title="">common ancestor</var> is the <code><a href=#the-body-element-0>body</a></code>
  element. A conceptual "bookmark" marks the position of the
  <code><a href=#the-b-element>b</a></code> in the <a href=#list-of-active-formatting-elements>list of active formatting
  elements</a>, but since that list has only one element in it,
  it won't have much effect.</p>

  <p>As the algorithm progresses, <var title="">node</var> ends up set
  to the formatting element (<code><a href=#the-b-element>b</a></code>), and <var title="">last
  node</var> ends up set to the <var title="">furthest block</var>
  (<code><a href=#the-p-element>p</a></code>).</p>

  <p>The <var title="">last node</var> gets appended (moved) to the
  <var title="">common ancestor</var>, so that the DOM looks like:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul></ul></ul></ul><p>A new <code><a href=#the-b-element>b</a></code> element is created, and the children of the
  <code><a href=#the-p-element>p</a></code> element are moved to it:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span></ul><li class=t1><code><a href=#the-p-element>p</a></code></ul></ul></ul><ul class=domTree><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul></ul><p>Finally, the new <code><a href=#the-b-element>b</a></code> element is appended to the
  <code><a href=#the-p-element>p</a></code> element, so that the DOM looks like:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul></ul></ul></ul></ul><p>The <code><a href=#the-b-element>b</a></code> element is removed from the <a href=#list-of-active-formatting-elements>list of
  active formatting elements</a> and the <a href=#stack-of-open-elements>stack of open
  elements</a>, so that when the "3" is parsed, it is appended to
  the <code><a href=#the-p-element>p</a></code> element:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul><li class=t3><code>#text</code>: <span title="">3</span></ul></ul></ul></ul><h5 id=unexpected-markup-in-tables><span class=secno>10.2.8.3 </span>Unexpected markup in tables</h5>

  <p><i>This section is non-normative.</i></p>

  <p>Error handling in tables is, for historical reasons, especially
  strange. For example, consider the following markup:</p>

  <pre>&lt;table&gt;<strong>&lt;b&gt;</strong>&lt;tr&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;/tr&gt;<strong>bbb</strong>&lt;/table&gt;ccc</pre>

  <p>The highlighted <code><a href=#the-b-element>b</a></code> element start tag is not allowed
  directly inside a table like that, and the parser handles this case
  by placing the element <em>before</em> the table. (This is called <i title="foster parent"><a href=#foster-parent>foster parenting</a></i>.) This can be seen by
  examining the DOM tree as it stands just after the
  <code><a href=#the-table-element>table</a></code> element's start tag has been seen:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-table-element>table</a></code></ul></ul></ul><p>...and then immediately after the <code><a href=#the-b-element>b</a></code> element start
  tag has been seen:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-table-element>table</a></code></ul></ul></ul><p>At this point, the <a href=#stack-of-open-elements>stack of open elements</a> has on it
  the elements <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>,
  <code><a href=#the-table-element>table</a></code>, and <code><a href=#the-b-element>b</a></code> (in that order, despite the
  resulting DOM tree); the <a href=#list-of-active-formatting-elements>list of active formatting
  elements</a> just has the <code><a href=#the-b-element>b</a></code> element in it; and the
  <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intable title="insertion mode: in
  table">in table</a>".</p>

  <p>The <code><a href=#the-tr-element>tr</a></code> start tag causes the <code><a href=#the-b-element>b</a></code> element
  to be popped off the stack and a <code><a href=#the-tbody-element>tbody</a></code> start tag to be
  implied; the <code><a href=#the-tbody-element>tbody</a></code> and <code><a href=#the-tr-element>tr</a></code> elements are
  then handled in a rather straight-forward manner, taking the parser
  through the "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
  body</a>" and "<a href=#parsing-main-intr title="insertion mode: in row">in
  row</a>" insertion modes, after which the DOM looks as
  follows:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code></ul></ul></ul></ul></ul><p>Here, the <a href=#stack-of-open-elements>stack of open elements</a> has on it the
  elements <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>,
  <code><a href=#the-tbody-element>tbody</a></code>, and <code><a href=#the-tr-element>tr</a></code>; the <a href=#list-of-active-formatting-elements>list of active
  formatting elements</a> still has the <code><a href=#the-b-element>b</a></code> element in
  it; and the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intr title="insertion
  mode: in row">in row</a>".</p>

  <p>The <code><a href=#the-td-element>td</a></code> element start tag token, after putting a
  <code><a href=#the-td-element>td</a></code> element on the tree, puts a marker on the <a href=#list-of-active-formatting-elements>list
  of active formatting elements</a> (it also switches to the "<a href=#parsing-main-intd title="insertion mode: in cell">in cell</a>" <a href=#insertion-mode>insertion
  mode</a>).</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code><ul><li class=t1><code><a href=#the-td-element>td</a></code></ul></ul></ul></ul></ul></ul><p>The marker means that when the "aaa" character tokens are seen,
  no <code><a href=#the-b-element>b</a></code> element is created to hold the resulting text
  node:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code><ul><li class=t1><code><a href=#the-td-element>td</a></code><ul><li class=t3><code>#text</code>: <span title="">aaa</span></ul></ul></ul></ul></ul></ul></ul><p>The end tags are handled in a straight-forward manner; after
  handling them, the <a href=#stack-of-open-elements>stack of open elements</a> has on it the
  elements <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>,
  and <code><a href=#the-tbody-element>tbody</a></code>; the <a href=#list-of-active-formatting-elements>list of active formatting
  elements</a> still has the <code><a href=#the-b-element>b</a></code> element in it (the
  marker having been removed by the "td" end tag token); and the
  <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intbody title="insertion mode: in
  table body">in table body</a>".</p>

  <p>Thus it is that the "bbb" character tokens are found. These
  trigger the "<a href=#parsing-main-intabletext title="insertion mode: in table text">in table
  text</a>" insertion mode to be used (with the <a href=#original-insertion-mode>original
  insertion mode</a> set to "<a href=#parsing-main-intbody title="insertion mode: in table
  body">in table body</a>"). The character tokens are collected,
  and when the next token (the <code><a href=#the-table-element>table</a></code> element end tag) is
  seen, they are processed as a group. Since they are not all spaces,
  they are handled as per the "anything else" rules in the "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>" insertion mode,
  which defer to the "<a href=#parsing-main-inbody title="insertion mode: in body">in
  body</a>" insertion mode but with <a href=#foster-parent title="foster
  parent">foster parenting</a>.</p>

  <p>When <a href=#reconstruct-the-active-formatting-elements title="reconstruct the active formatting elements">the
  active formatting elements are reconstructed</a>, a
  <code><a href=#the-b-element>b</a></code> element is created and <a href=#foster-parent title="foster
  parent">foster parented</a>, and then the "bbb" text node is
  appended to it:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">bbb</span></ul><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code><ul><li class=t1><code><a href=#the-td-element>td</a></code><ul><li class=t3><code>#text</code>: <span title="">aaa</span></ul></ul></ul></ul></ul></ul></ul><p>The <a href=#stack-of-open-elements>stack of open elements</a> has on it the elements
  <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>,
  <code><a href=#the-tbody-element>tbody</a></code>, and the new <code><a href=#the-b-element>b</a></code> (again, note that
  this doesn't match the resulting tree!); the <a href=#list-of-active-formatting-elements>list of active
  formatting elements</a> has the new <code><a href=#the-b-element>b</a></code> element in it;
  and the <a href=#insertion-mode>insertion mode</a> is still "<a href=#parsing-main-intbody title="insertion
  mode: in table body">in table body</a>".</p>

  <p>Had the character tokens been only <a href=#space-character title="space
  character">space characters</a> instead of "bbb", then those
  <a href=#space-character title="space character">space characters</a> would just be
  appended to the <code><a href=#the-tbody-element>tbody</a></code> element.</p>

  <p>Finally, the <code><a href=#the-table-element>table</a></code> is closed by a "table" end
  tag. This pops all the nodes from the <a href=#stack-of-open-elements>stack of open
  elements</a> up to and including the <code><a href=#the-table-element>table</a></code> element,
  but it doesn't affect the <a href=#list-of-active-formatting-elements>list of active formatting
  elements</a>, so the "ccc" character tokens after the table
  result in yet another <code><a href=#the-b-element>b</a></code> element being created, this
  time after the table:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">bbb</span></ul><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code><ul><li class=t1><code><a href=#the-td-element>td</a></code><ul><li class=t3><code>#text</code>: <span title="">aaa</span></ul></ul></ul></ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">ccc</span></ul></ul></ul></ul><h5 id=scripts-that-modify-the-page-as-it-is-being-parsed><span class=secno>10.2.8.4 </span>Scripts that modify the page as it is being parsed</h5>

  <p><i>This section is non-normative.</i></p>

  <p>Consider the following markup, which for this example we will
  assume is the document with <a href=#url>URL</a> <code title="">http://example.com/inner</code>, being rendered as the
  content of an <code><a href=#the-iframe-element>iframe</a></code> in another document with the
  <a href=#url>URL</a> <code title="">http://example.com/outer</code>:</p>

  <pre>&lt;div id=a&gt;
 &lt;script&gt;
  var div = document.getElementById('a');
  parent.document.body.appendChild(div);
 &lt;/script&gt;
 &lt;script&gt;
  alert(document.URL);
 &lt;/script&gt;
&lt;/div&gt;
&lt;script&gt;
 alert(document.URL);
&lt;/script&gt;</pre>

  <p>Up to the first "script" end tag, before the script is parsed,
  the result is relatively straightforward:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-div-element>div</a></code> <span class=t2 title=""><code class="attribute name">id</code>="<code class="attribute value"><a href=#the-a-element>a</a></code>"</span><ul><li class=t3><code>#text</code>: <span title="">
 </span><li class=t1><code><a href=#script>script</a></code><ul><li class=t3><code>#text</code>: <span title="">var div = document.getElementById('a'); &#9166; parent.document.body.appendChild(div);</span></ul></ul></ul></ul></ul><p>After the script is parsed, though, the <code><a href=#the-div-element>div</a></code> element
  and its child <code><a href=#script>script</a></code> element are gone:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code></ul></ul><p>They are, at this point, in the <code><a href=#document>Document</a></code> of the
  aforementioned outer <a href=#browsing-context>browsing context</a>. However, the
  <a href=#stack-of-open-elements>stack of open elements</a> <em>still contains the
  <code><a href=#the-div-element>div</a></code> element</em>.</p>

  <p>Thus, when the second <code><a href=#script>script</a></code> element is parsed, it
  is inserted <em>into the outer <code><a href=#document>Document</a></code>
  object</em>.</p>

  <p>This also means that the <a href="#script's-global-object">script's global object</a> is
  the outer <a href=#browsing-context>browsing context</a>'s <code><a href=#window>Window</a></code>
  object, <em>not</em> the <code><a href=#window>Window</a></code> object inside the
  <code><a href=#the-iframe-element>iframe</a></code>.</p>

  <p class=note>This isn't a security problem since the script that
  moves the <code><a href=#the-div-element>div</a></code> into the outer <code><a href=#document>Document</a></code> can
  only do so because the two <code><a href=#document>Document</a></code> object have the
  same <a href=#origin>origin</a>.</p>

  <p>Thus, the first alert says "http://example.com/outer".</p>

  <p>Once the <code><a href=#the-div-element>div</a></code> element's end tag is parsed, the
  <code><a href=#the-div-element>div</a></code> element is popped off the stack, and so the next
  <code><a href=#script>script</a></code> element is in the inner <code><a href=#document>Document</a></code>:</p>

  <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#script>script</a></code><ul><li class=t3><code>#text</code>: <span title="">alert(document.URL);</span></ul></ul></ul></ul><p>This second alert will say "http://example.com/inner".</p>




  <h3 id=serializing-html-fragments><span class=secno>10.3 </span>Serializing HTML fragments</h3>

  <p>The following steps form the <dfn id=html-fragment-serialization-algorithm>HTML fragment serialization
  algorithm</dfn>. The algorithm takes as input a DOM
  <code><a href=#element>Element</a></code> or <code><a href=#document>Document</a></code>, referred to as <var title="">the node</var>, and either returns a string or raises an
  exception.</p>

  <p class=note>This algorithm serializes the <em>children</em> of
  the node being serialized, not the node itself.</p>

  <ol><li><p>Let <var title="">s</var> be a string, and initialize it to
   the empty string.</li>

   <li>

    <p>For each child node of <var title="">the node</var>, in
    <a href=#tree-order>tree order</a>, run the following steps:

    <ol><li><p>Let <var title="">current node</var> be the child node
     being processed.</li>

     <li>

      <p>Append the appropriate string from the following list to
      <var title="">s</var>:</p>

      <dl class=switch><dt>If <var title="">current node</var> is an <code title="">Element</code></dt>

       <dd>

        <p>Append a U+003C LESS-THAN SIGN character character (&lt;),
        followed by the element's tag name. (For nodes created by the
        <a href=#html-parser>HTML parser</a> or <code title="">Document.createElement()</code>, the tag name will be
        lowercase.)</p>

        <p>For each attribute that the element has, append a U+0020
        SPACE character, the attribute's name (which, for attributes
        set by the <a href=#html-parser>HTML parser</a> or by <code title="">Element.setAttributeNode()</code> or <code title="">Element.setAttribute()</code>, will be lowercase), a
        U+003D EQUALS SIGN character (=), a U+0022 QUOTATION MARK
        character ("), the attribute's value, <a href=#escapingString title="escaping a string">escaped as described below</a> in
        <i>attribute mode</i>, and a second U+0022 QUOTATION MARK
        character (").</p>

        <p>While the exact order of attributes is UA-defined, and may
        depend on factors such as the order that the attributes were
        given in the original markup, the sort order must be stable,
        such that consecutive invocations of this algorithm serialize an
        element's attributes in the same order.</p>

        <p>Append a U+003E GREATER-THAN SIGN character (&gt;).</p>

        <p>If <var title="">current node</var> is an
        <code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#basefont>basefont</a></code>,
        <code><a href=#bgsound>bgsound</a></code>, <code><a href=#the-br-element>br</a></code>, <code><a href=#the-col-element>col</a></code>,
        <code><a href=#the-embed-element>embed</a></code>, <code><a href=#frame>frame</a></code>, <code><a href=#the-hr-element>hr</a></code>,
        <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-keygen-element>keygen</a></code>,
        <code><a href=#the-link-element>link</a></code>, <code><a href=#meta>meta</a></code>, <code><a href=#the-param-element>param</a></code>, or
        <code><a href=#the-wbr-element>wbr</a></code> element, then continue on to the next child
        node at this point.</p> <!-- also, i guess: image and isindex,
        but we don't list those because we don't consider those
        "elements", more "macros", and thus we should never serialize
        them -->

        <p>If <var title="">current node</var> is a <code><a href=#the-pre-element>pre</a></code>,
        <code><a href=#the-textarea-element>textarea</a></code>, or <code><a href=#listing>listing</a></code> element, append
        a U+000A LINE FEED (LF) character.</p>

        <p>Append the value of running the <a href=#html-fragment-serialization-algorithm>HTML fragment
        serialization algorithm</a> on the <var title="">current
        node</var> element (thus recursing into this algorithm for
        that element), followed by a U+003C LESS-THAN SIGN character
        (&lt;), a U+002F SOLIDUS character (/), the element's tag name
        again, and finally a U+003E GREATER-THAN SIGN character
        (&gt;).</p>

       </dd>


       <dt>If <var title="">current node</var> is a <code title="">Text</code> or <code title="">CDATASection</code>
       node</dt>

       <dd>

        <p>If the parent of <var title="">current node</var> is a
        <code><a href=#the-style-element>style</a></code>, <code><a href=#script>script</a></code>, <code><a href=#xmp>xmp</a></code>,
        <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#noembed>noembed</a></code>,
        <code><a href=#noframes>noframes</a></code>, or <code><a href=#plaintext>plaintext</a></code> element, or
        if the parent of <var title="">current node</var> is
        <code><a href=#the-noscript-element>noscript</a></code> element and <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for the
        node, then append the value of <var title="">current
        node</var>'s <code title="">data</code> IDL attribute
        literally.</p>

        <p>Otherwise, append the value of <var title="">current
        node</var>'s <code title="">data</code> IDL attribute, <a href=#escapingString title="escaping a string">escaped as described
        below</a>.</p>

       </dd>


       <dt>If <var title="">current node</var> is a <code title="">Comment</code></dt>

       <dd>

        <p>Append the literal string <code>&lt;!--</code> (U+003C
        LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+002D HYPHEN-MINUS,
        U+002D HYPHEN-MINUS), followed by the value of <var title="">current node</var>'s <code title="">data</code> IDL
        attribute, followed by the literal string <code>--&gt;</code>
        (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN
        SIGN).</p>

       </dd>


       <dt>If <var title="">current node</var> is a <code title="">ProcessingInstruction</code></dt>

       <dd>

        <p>Append the literal string <code>&lt;?</code> (U+003C
        LESS-THAN SIGN, U+003F QUESTION MARK), followed by the value
        of <var title="">current node</var>'s <code title="">target</code> IDL attribute, followed by a single
        U+0020 SPACE character, followed by the value of <var title="">current node</var>'s <code title="">data</code> IDL
        attribute, followed by a single U+003E GREATER-THAN SIGN
        character (&gt;).</p>

       </dd>


       <dt>If <var title="">current node</var> is a <code title="">DocumentType</code></dt>

       <dd>

        <p>Append the literal string <code>&lt;!DOCTYPE</code> (U+003C
        LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+0044 LATIN CAPITAL
        LETTER D, U+004F LATIN CAPITAL LETTER O, U+0043 LATIN CAPITAL
        LETTER C, U+0054 LATIN CAPITAL LETTER T, U+0059 LATIN CAPITAL
        LETTER Y, U+0050 LATIN CAPITAL LETTER P, U+0045 LATIN CAPITAL
        LETTER E), followed by a space (U+0020 SPACE), followed by the
        value of <var title="">current node</var>'s <code title="">name</code> IDL attribute, followed by the literal
        string <code>&gt;</code> (U+003E GREATER-THAN SIGN).</p>

       </dd>


      </dl><p>Other node types (e.g. <code title="">Attr</code>) cannot
      occur as children of elements. If, despite this, they somehow do
      occur, this algorithm must raise an
      <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception.</p>

     </li>

    </ol></li>

   <li><p>The result of the algorithm is the string <var title="">s</var>.</li>

  </ol><p><dfn id=escapingString>Escaping a string</dfn> (for the
  purposes of the algorithm above) consists of replacing any
  occurrences of the "<code title="">&amp;</code>" character by the
  string "<code title="">&amp;amp;</code>", any occurrences of the
  U+00A0 NO-BREAK SPACE character by the string "<code title="">&amp;nbsp;</code>", and, if the algorithm was invoked in
  the <i>attribute mode</i>, any occurrences of the "<code title="">"</code>" character by the string "<code title="">&amp;quot;</code>", or if it was not, any occurrences of
  the "<code title="">&lt;</code>" character by the string "<code title="">&amp;lt;</code>", any occurrences of the "<code title="">&gt;</code>" character by the string "<code title="">&amp;gt;</code>".</p>

  <p class=note>Entity reference nodes are <a href=#entity-references>assumed to be expanded</a> by the user
  agent, and are therefore not covered in the algorithm above.</p>

  <p class=note>It is possible that the output of this algorithm, if
  parsed with an <a href=#html-parser>HTML parser</a>, will not return the
  original tree structure. For instance, if a <code><a href=#the-textarea-element>textarea</a></code>
  element to which a <code title="">Comment</code> node has been
  appended is serialized and the output is then reparsed, the comment
  will end up being displayed in the text field. Similarly, if, as a
  result of DOM manipulation, an element contains a comment that
  contains the literal string "<code title="">--&gt;</code>", then
  when the result of serializing the element is parsed, the comment
  will be truncated at that point and the rest of the comment will be
  interpreted as markup. More examples would be making a
  <code><a href=#script>script</a></code> element contain a text node with the text string
  "<code>&lt;/script&gt;</code>", or having a <code><a href=#the-p-element>p</a></code> element that
  contains a <code><a href=#the-ul-element>ul</a></code> element (as the <code><a href=#the-ul-element>ul</a></code> element's
  <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> would imply the end
  tag for the <code><a href=#the-p-element>p</a></code>).</p>


  <h3 id=parsing-html-fragments><span class=secno>10.4 </span>Parsing HTML fragments</h3>

  <p>The following steps form the <dfn id=html-fragment-parsing-algorithm>HTML fragment parsing
  algorithm</dfn>. The algorithm optionally takes as input an
  <code><a href=#element>Element</a></code> node, referred to as the <var title="">context</var> element, which gives the context for the
  parser, as well as <var title="">input</var>, a string to parse, and
  returns a list of zero or more nodes.</p>

  <p class=note>Parts marked <dfn id=fragment-case>fragment case</dfn> in algorithms
  in the parser section are parts that only occur if the parser was
  created for the purposes of this algorithm (and with a <var title="">context</var> element). The algorithms have been annotated
  with such markings for informational purposes only; such markings
  have no normative weight. If it is possible for a condition
  described as a <a href=#fragment-case>fragment case</a> to occur even when the
  parser wasn't created for the purposes of handling this algorithm,
  then that is an error in the specification.</p>

  <ol><li>

    <p>Create a new <code><a href=#document>Document</a></code> node, and mark it as being
    an <a href=#html-documents title="HTML documents">HTML document</a>.</p>

   </li>

   <li>

    <p>If there is a <var title="">context</var> element, and the
    <code><a href=#document>Document</a></code> of the <var title="">context</var> element
    is in <a href=#quirks-mode>quirks mode</a>, then let the <code><a href=#document>Document</a></code>
    be in <a href=#quirks-mode>quirks mode</a>. Otherwise, if there is a <var title="">context</var> element, and the <code><a href=#document>Document</a></code> of
    the <var title="">context</var> element is in <a href=#limited-quirks-mode>limited-quirks
    mode</a>, then let the <code><a href=#document>Document</a></code> be in
    <a href=#limited-quirks-mode>limited-quirks mode</a>. Otherwise, leave the
    <code><a href=#document>Document</a></code> in <a href=#no-quirks-mode>no-quirks mode</a>.</p>

   </li>

   <li>

    <p>Create a new <a href=#html-parser>HTML parser</a>, and associate it with
    the just created <code><a href=#document>Document</a></code> node.</p>

   </li>

   <li>

    <p>If there is a <var title="">context</var> element, run these
    substeps:</p>

    <ol><li>

      <p>Set the state of the <a href=#html-parser>HTML parser</a>'s
      <a href=#tokenization>tokenization</a> stage as follows:</p>

      <dl class=switch><dt>If it is a <code><a href=#the-title-element-0>title</a></code> or <code><a href=#the-textarea-element>textarea</a></code>
       element</dt>

       <dd>Switch the tokenizer to the <a href=#rcdata-state>RCDATA state</a>.</dd>


       <dt>If it is a <code><a href=#the-style-element>style</a></code>, <code><a href=#xmp>xmp</a></code>,
       <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#noembed>noembed</a></code>, or
       <code><a href=#noframes>noframes</a></code> element</dt>

       <dd>Switch the tokenizer to the <a href=#rawtext-state>RAWTEXT state</a>.</dd>


       <dt>If it is a <code><a href=#script>script</a></code> element</dt>

       <dd>Switch the tokenizer to the <a href=#script-data-state>script data state</a>.</dd>


       <dt>If it is a <code><a href=#the-noscript-element>noscript</a></code> element</dt>

       <dd>If the <a href=#scripting-flag>scripting flag</a> is enabled, switch the
       tokenizer to the <a href=#rawtext-state>RAWTEXT state</a>.  Otherwise,
       leave the tokenizer in the <a href=#data-state>data state</a>.</dd>


       <dt>If it is a <code><a href=#plaintext>plaintext</a></code> element</dt>

       <dd>Switch the tokenizer to the <a href=#plaintext-state>PLAINTEXT
       state</a>.</dd>


       <dt>Otherwise</dt>

       <dd>Leave the tokenizer in the <a href=#data-state>data state</a>.</dd>

      </dl><p class=note>For performance reasons, an implementation that
      does not report errors and that uses the actual state machine
      described in this specification directly could use the PLAINTEXT
      state instead of the RAWTEXT and script data states where those
      are mentioned in the list above. Except for rules regarding
      parse errors, they are equivalent, since there is no
      <a href=#appropriate-end-tag-token>appropriate end tag token</a> in the fragment case, yet
      they involve far fewer state transitions.</p>

     </li>

     <li>

      <p>Let <var title="">root</var> be a new <code><a href=#the-html-element-0>html</a></code> element
      with no attributes.</p>

     </li>

     <li>

      <p>Append the element <var title="">root</var> to the
      <code><a href=#document>Document</a></code> node created above.</p>

     </li>

     <li>

      <p>Set up the parser's <a href=#stack-of-open-elements>stack of open elements</a> so that
      it contains just the single element <var title="">root</var>.</p>

     </li>

     <li>

      <p><a href=#reset-the-insertion-mode-appropriately title="reset the insertion mode appropriately">Reset the
      parser's insertion mode appropriately</a>.</p>

      <p class=note>The parser will reference the <var title="">context</var> element as part of that algorithm.</p>

     </li>

     <li>

      <p>Set the parser's <a href=#form-element-pointer><code>form</code> element pointer</a>
      to the nearest node to the <var title="">context</var> element
      that is a <code><a href=#the-form-element>form</a></code> element (going straight up the
      ancestor chain, and including the element itself, if it is a
      <code><a href=#the-form-element>form</a></code> element), or, if there is no such
      <code><a href=#the-form-element>form</a></code> element, to null.</p>

     </li>

    </ol></li>

   <li>

    <p>Place into the <a href=#the-input-stream>input stream</a> for the <a href=#html-parser>HTML
    parser</a> just created the <var title="">input</var>. The
    encoding <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is
    <i>irrelevant</i>.</p>

   </li>

   <li>

    <p>Start the parser and let it run until it has consumed all the
    characters just inserted into the input stream.</p>

   </li>

   <li>

    <p>If there is a <var title="">context</var> element, return the
    child nodes of <var title="">root</var>, in <a href=#tree-order>tree
    order</a>.</p>

    <p>Otherwise, return the children of the <code><a href=#document>Document</a></code>
    object, in <a href=#tree-order>tree order</a>.</p>

   </li>

  </ol></div>



  <h3 id=named-character-references><span class=secno>10.5 </span><dfn>Named character references</dfn></h3>

  <p>This table lists the character reference names that are supported
  by HTML, and the code points to which they refer. It is referenced
  by the previous sections.</p>

  <div id=named-character-references-table>
   <table><thead><tr><th> Name </th> <th> Character </th> <th> Glyph </th> <tbody><tr><td> <code title="">AElig;</code> </td> <td> U+000C6 </td> <td> <span>&AElig;</span> </td> <tr class=impl><td> <code title="">AElig</code> </td> <td> U+000C6 </td> <td> <span title="">&AElig;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">AMP;</code> </td> <td> U+00026 </td> <td> <span>&amp;</span> </td> <tr class=impl><td> <code title="">AMP</code> </td> <td> U+00026 </td> <td> <span title="">&amp;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Aacute;</code> </td> <td> U+000C1 </td> <td> <span>&Aacute;</span> </td> <tr class=impl><td> <code title="">Aacute</code> </td> <td> U+000C1 </td> <td> <span title="">&Aacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Abreve;</code> </td> <td> U+00102 </td> <td> <span>&#258;</span> </td> <tr><td> <code title="">Acirc;</code> </td> <td> U+000C2 </td> <td> <span>&Acirc;</span> </td> <tr class=impl><td> <code title="">Acirc</code> </td> <td> U+000C2 </td> <td> <span title="">&Acirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Acy;</code> </td> <td> U+00410 </td> <td> <span>&#1040;</span> </td> <tr><td> <code title="">Afr;</code> </td> <td> U+1D504 </td> <td> <span>&#120068;</span> </td> <tr><td> <code title="">Agrave;</code> </td> <td> U+000C0 </td> <td> <span>&Agrave;</span> </td> <tr class=impl><td> <code title="">Agrave</code> </td> <td> U+000C0 </td> <td> <span title="">&Agrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Alpha;</code> </td> <td> U+00391 </td> <td> <span>&Alpha;</span> </td> <tr><td> <code title="">Amacr;</code> </td> <td> U+00100 </td> <td> <span>&#256;</span> </td> <tr><td> <code title="">And;</code> </td> <td> U+02A53 </td> <td> <span>&#10835;</span> </td> <tr><td> <code title="">Aogon;</code> </td> <td> U+00104 </td> <td> <span>&#260;</span> </td> <tr><td> <code title="">Aopf;</code> </td> <td> U+1D538 </td> <td> <span>&#120120;</span> </td> <tr><td> <code title="">ApplyFunction;</code> </td> <td> U+02061 </td> <td> <span>&#8289;</span> </td> <tr><td> <code title="">Aring;</code> </td> <td> U+000C5 </td> <td> <span>&Aring;</span> </td> <tr class=impl><td> <code title="">Aring</code> </td> <td> U+000C5 </td> <td> <span title="">&Aring;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ascr;</code> </td> <td> U+1D49C </td> <td> <span>&#119964;</span> </td> <tr><td> <code title="">Assign;</code> </td> <td> U+02254 </td> <td> <span>&#8788;</span> </td> <tr><td> <code title="">Atilde;</code> </td> <td> U+000C3 </td> <td> <span>&Atilde;</span> </td> <tr class=impl><td> <code title="">Atilde</code> </td> <td> U+000C3 </td> <td> <span title="">&Atilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Auml;</code> </td> <td> U+000C4 </td> <td> <span>&Auml;</span> </td> <tr class=impl><td> <code title="">Auml</code> </td> <td> U+000C4 </td> <td> <span title="">&Auml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Backslash;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">Barv;</code> </td> <td> U+02AE7 </td> <td> <span>&#10983;</span> </td> <tr><td> <code title="">Barwed;</code> </td> <td> U+02306 </td> <td> <span>&#8966;</span> </td> <tr><td> <code title="">Bcy;</code> </td> <td> U+00411 </td> <td> <span>&#1041;</span> </td> <tr><td> <code title="">Because;</code> </td> <td> U+02235 </td> <td> <span>&#8757;</span> </td> <tr><td> <code title="">Bernoullis;</code> </td> <td> U+0212C </td> <td> <span>&#8492;</span> </td> <tr><td> <code title="">Beta;</code> </td> <td> U+00392 </td> <td> <span>&Beta;</span> </td> <tr><td> <code title="">Bfr;</code> </td> <td> U+1D505 </td> <td> <span>&#120069;</span> </td> <tr><td> <code title="">Bopf;</code> </td> <td> U+1D539 </td> <td> <span>&#120121;</span> </td> <tr><td> <code title="">Breve;</code> </td> <td> U+002D8 </td> <td> <span>&#728;</span> </td> <tr><td> <code title="">Bscr;</code> </td> <td> U+0212C </td> <td> <span>&#8492;</span> </td> <tr><td> <code title="">Bumpeq;</code> </td> <td> U+0224E </td> <td> <span>&#8782;</span> </td> <tr><td> <code title="">CHcy;</code> </td> <td> U+00427 </td> <td> <span>&#1063;</span> </td> <tr><td> <code title="">COPY;</code> </td> <td> U+000A9 </td> <td> <span>&copy;</span> </td> <tr class=impl><td> <code title="">COPY</code> </td> <td> U+000A9 </td> <td> <span title="">&copy;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Cacute;</code> </td> <td> U+00106 </td> <td> <span>&#262;</span> </td> <tr><td> <code title="">Cap;</code> </td> <td> U+022D2 </td> <td> <span>&#8914;</span> </td> <tr><td> <code title="">CapitalDifferentialD;</code> </td> <td> U+02145 </td> <td> <span>&#8517;</span> </td> <tr><td> <code title="">Cayleys;</code> </td> <td> U+0212D </td> <td> <span>&#8493;</span> </td> <tr><td> <code title="">Ccaron;</code> </td> <td> U+0010C </td> <td> <span>&#268;</span> </td> <tr><td> <code title="">Ccedil;</code> </td> <td> U+000C7 </td> <td> <span>&Ccedil;</span> </td> <tr class=impl><td> <code title="">Ccedil</code> </td> <td> U+000C7 </td> <td> <span title="">&Ccedil;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ccirc;</code> </td> <td> U+00108 </td> <td> <span>&#264;</span> </td> <tr><td> <code title="">Cconint;</code> </td> <td> U+02230 </td> <td> <span>&#8752;</span> </td> <tr><td> <code title="">Cdot;</code> </td> <td> U+0010A </td> <td> <span>&#266;</span> </td> <tr><td> <code title="">Cedilla;</code> </td> <td> U+000B8 </td> <td> <span>&cedil;</span> </td> <tr><td> <code title="">CenterDot;</code> </td> <td> U+000B7 </td> <td> <span>&middot;</span> </td> <tr><td> <code title="">Cfr;</code> </td> <td> U+0212D </td> <td> <span>&#8493;</span> </td> <tr><td> <code title="">Chi;</code> </td> <td> U+003A7 </td> <td> <span>&Chi;</span> </td> <tr><td> <code title="">CircleDot;</code> </td> <td> U+02299 </td> <td> <span>&#8857;</span> </td> <tr><td> <code title="">CircleMinus;</code> </td> <td> U+02296 </td> <td> <span>&#8854;</span> </td> <tr><td> <code title="">CirclePlus;</code> </td> <td> U+02295 </td> <td> <span>&oplus;</span> </td> <tr><td> <code title="">CircleTimes;</code> </td> <td> U+02297 </td> <td> <span>&otimes;</span> </td> <tr><td> <code title="">ClockwiseContourIntegral;</code> </td> <td> U+02232 </td> <td> <span>&#8754;</span> </td> <tr><td> <code title="">CloseCurlyDoubleQuote;</code> </td> <td> U+0201D </td> <td> <span>&rdquo;</span> </td> <tr><td> <code title="">CloseCurlyQuote;</code> </td> <td> U+02019 </td> <td> <span>&rsquo;</span> </td> <tr><td> <code title="">Colon;</code> </td> <td> U+02237 </td> <td> <span>&#8759;</span> </td> <tr><td> <code title="">Colone;</code> </td> <td> U+02A74 </td> <td> <span>&#10868;</span> </td> <tr><td> <code title="">Congruent;</code> </td> <td> U+02261 </td> <td> <span>&equiv;</span> </td> <tr><td> <code title="">Conint;</code> </td> <td> U+0222F </td> <td> <span>&#8751;</span> </td> <tr><td> <code title="">ContourIntegral;</code> </td> <td> U+0222E </td> <td> <span>&#8750;</span> </td> <tr><td> <code title="">Copf;</code> </td> <td> U+02102 </td> <td> <span>&#8450;</span> </td> <tr><td> <code title="">Coproduct;</code> </td> <td> U+02210 </td> <td> <span>&#8720;</span> </td> <tr><td> <code title="">CounterClockwiseContourIntegral;</code> </td> <td> U+02233 </td> <td> <span>&#8755;</span> </td> <tr><td> <code title="">Cross;</code> </td> <td> U+02A2F </td> <td> <span>&#10799;</span> </td> <tr><td> <code title="">Cscr;</code> </td> <td> U+1D49E </td> <td> <span>&#119966;</span> </td> <tr><td> <code title="">Cup;</code> </td> <td> U+022D3 </td> <td> <span>&#8915;</span> </td> <tr><td> <code title="">CupCap;</code> </td> <td> U+0224D </td> <td> <span>&#8781;</span> </td> <tr><td> <code title="">DD;</code> </td> <td> U+02145 </td> <td> <span>&#8517;</span> </td> <tr><td> <code title="">DDotrahd;</code> </td> <td> U+02911 </td> <td> <span>&#10513;</span> </td> <tr><td> <code title="">DJcy;</code> </td> <td> U+00402 </td> <td> <span>&#1026;</span> </td> <tr><td> <code title="">DScy;</code> </td> <td> U+00405 </td> <td> <span>&#1029;</span> </td> <tr><td> <code title="">DZcy;</code> </td> <td> U+0040F </td> <td> <span>&#1039;</span> </td> <tr><td> <code title="">Dagger;</code> </td> <td> U+02021 </td> <td> <span>&Dagger;</span> </td> <tr><td> <code title="">Darr;</code> </td> <td> U+021A1 </td> <td> <span>&#8609;</span> </td> <tr><td> <code title="">Dashv;</code> </td> <td> U+02AE4 </td> <td> <span>&#10980;</span> </td> <tr><td> <code title="">Dcaron;</code> </td> <td> U+0010E </td> <td> <span>&#270;</span> </td> <tr><td> <code title="">Dcy;</code> </td> <td> U+00414 </td> <td> <span>&#1044;</span> </td> <tr><td> <code title="">Del;</code> </td> <td> U+02207 </td> <td> <span>&nabla;</span> </td> <tr><td> <code title="">Delta;</code> </td> <td> U+00394 </td> <td> <span>&Delta;</span> </td> <tr><td> <code title="">Dfr;</code> </td> <td> U+1D507 </td> <td> <span>&#120071;</span> </td> <tr><td> <code title="">DiacriticalAcute;</code> </td> <td> U+000B4 </td> <td> <span>&acute;</span> </td> <tr><td> <code title="">DiacriticalDot;</code> </td> <td> U+002D9 </td> <td> <span>&#729;</span> </td> <tr><td> <code title="">DiacriticalDoubleAcute;</code> </td> <td> U+002DD </td> <td> <span>&#733;</span> </td> <tr><td> <code title="">DiacriticalGrave;</code> </td> <td> U+00060 </td> <td> <span>`</span> </td> <tr><td> <code title="">DiacriticalTilde;</code> </td> <td> U+002DC </td> <td> <span>&tilde;</span> </td> <tr><td> <code title="">Diamond;</code> </td> <td> U+022C4 </td> <td> <span>&#8900;</span> </td> <tr><td> <code title="">DifferentialD;</code> </td> <td> U+02146 </td> <td> <span>&#8518;</span> </td> <tr><td> <code title="">Dopf;</code> </td> <td> U+1D53B </td> <td> <span>&#120123;</span> </td> <tr><td> <code title="">Dot;</code> </td> <td> U+000A8 </td> <td> <span>&uml;</span> </td> <tr><td> <code title="">DotDot;</code> </td> <td> U+020DC </td> <td> <span>&#9676;&#8412;</span> </td> <tr><td> <code title="">DotEqual;</code> </td> <td> U+02250 </td> <td> <span>&#8784;</span> </td> <tr><td> <code title="">DoubleContourIntegral;</code> </td> <td> U+0222F </td> <td> <span>&#8751;</span> </td> <tr><td> <code title="">DoubleDot;</code> </td> <td> U+000A8 </td> <td> <span>&uml;</span> </td> <tr><td> <code title="">DoubleDownArrow;</code> </td> <td> U+021D3 </td> <td> <span>&dArr;</span> </td> <tr><td> <code title="">DoubleLeftArrow;</code> </td> <td> U+021D0 </td> <td> <span>&lArr;</span> </td> <tr><td> <code title="">DoubleLeftRightArrow;</code> </td> <td> U+021D4 </td> <td> <span>&hArr;</span> </td> <tr><td> <code title="">DoubleLeftTee;</code> </td> <td> U+02AE4 </td> <td> <span>&#10980;</span> </td> <tr><td> <code title="">DoubleLongLeftArrow;</code> </td> <td> U+027F8 </td> <td> <span>&#10232;</span> </td> <tr><td> <code title="">DoubleLongLeftRightArrow;</code> </td> <td> U+027FA </td> <td> <span>&#10234;</span> </td> <tr><td> <code title="">DoubleLongRightArrow;</code> </td> <td> U+027F9 </td> <td> <span>&#10233;</span> </td> <tr><td> <code title="">DoubleRightArrow;</code> </td> <td> U+021D2 </td> <td> <span>&rArr;</span> </td> <tr><td> <code title="">DoubleRightTee;</code> </td> <td> U+022A8 </td> <td> <span>&#8872;</span> </td> <tr><td> <code title="">DoubleUpArrow;</code> </td> <td> U+021D1 </td> <td> <span>&uArr;</span> </td> <tr><td> <code title="">DoubleUpDownArrow;</code> </td> <td> U+021D5 </td> <td> <span>&#8661;</span> </td> <tr><td> <code title="">DoubleVerticalBar;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">DownArrow;</code> </td> <td> U+02193 </td> <td> <span>&darr;</span> </td> <tr><td> <code title="">DownArrowBar;</code> </td> <td> U+02913 </td> <td> <span>&#10515;</span> </td> <tr><td> <code title="">DownArrowUpArrow;</code> </td> <td> U+021F5 </td> <td> <span>&#8693;</span> </td> <tr><td> <code title="">DownBreve;</code> </td> <td> U+00311 </td> <td> <span>&#9676;&#785;</span> </td> <tr><td> <code title="">DownLeftRightVector;</code> </td> <td> U+02950 </td> <td> <span>&#10576;</span> </td> <tr><td> <code title="">DownLeftTeeVector;</code> </td> <td> U+0295E </td> <td> <span>&#10590;</span> </td> <tr><td> <code title="">DownLeftVector;</code> </td> <td> U+021BD </td> <td> <span>&#8637;</span> </td> <tr><td> <code title="">DownLeftVectorBar;</code> </td> <td> U+02956 </td> <td> <span>&#10582;</span> </td> <tr><td> <code title="">DownRightTeeVector;</code> </td> <td> U+0295F </td> <td> <span>&#10591;</span> </td> <tr><td> <code title="">DownRightVector;</code> </td> <td> U+021C1 </td> <td> <span>&#8641;</span> </td> <tr><td> <code title="">DownRightVectorBar;</code> </td> <td> U+02957 </td> <td> <span>&#10583;</span> </td> <tr><td> <code title="">DownTee;</code> </td> <td> U+022A4 </td> <td> <span>&#8868;</span> </td> <tr><td> <code title="">DownTeeArrow;</code> </td> <td> U+021A7 </td> <td> <span>&#8615;</span> </td> <tr><td> <code title="">Downarrow;</code> </td> <td> U+021D3 </td> <td> <span>&dArr;</span> </td> <tr><td> <code title="">Dscr;</code> </td> <td> U+1D49F </td> <td> <span>&#119967;</span> </td> <tr><td> <code title="">Dstrok;</code> </td> <td> U+00110 </td> <td> <span>&#272;</span> </td> <tr><td> <code title="">ENG;</code> </td> <td> U+0014A </td> <td> <span>&#330;</span> </td> <tr><td> <code title="">ETH;</code> </td> <td> U+000D0 </td> <td> <span>&ETH;</span> </td> <tr class=impl><td> <code title="">ETH</code> </td> <td> U+000D0 </td> <td> <span title="">&ETH;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Eacute;</code> </td> <td> U+000C9 </td> <td> <span>&Eacute;</span> </td> <tr class=impl><td> <code title="">Eacute</code> </td> <td> U+000C9 </td> <td> <span title="">&Eacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ecaron;</code> </td> <td> U+0011A </td> <td> <span>&#282;</span> </td> <tr><td> <code title="">Ecirc;</code> </td> <td> U+000CA </td> <td> <span>&Ecirc;</span> </td> <tr class=impl><td> <code title="">Ecirc</code> </td> <td> U+000CA </td> <td> <span title="">&Ecirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ecy;</code> </td> <td> U+0042D </td> <td> <span>&#1069;</span> </td> <tr><td> <code title="">Edot;</code> </td> <td> U+00116 </td> <td> <span>&#278;</span> </td> <tr><td> <code title="">Efr;</code> </td> <td> U+1D508 </td> <td> <span>&#120072;</span> </td> <tr><td> <code title="">Egrave;</code> </td> <td> U+000C8 </td> <td> <span>&Egrave;</span> </td> <tr class=impl><td> <code title="">Egrave</code> </td> <td> U+000C8 </td> <td> <span title="">&Egrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Element;</code> </td> <td> U+02208 </td> <td> <span>&isin;</span> </td> <tr><td> <code title="">Emacr;</code> </td> <td> U+00112 </td> <td> <span>&#274;</span> </td> <tr><td> <code title="">EmptySmallSquare;</code> </td> <td> U+025FB </td> <td> <span>&#9723;</span> </td> <tr><td> <code title="">EmptyVerySmallSquare;</code> </td> <td> U+025AB </td> <td> <span>&#9643;</span> </td> <tr><td> <code title="">Eogon;</code> </td> <td> U+00118 </td> <td> <span>&#280;</span> </td> <tr><td> <code title="">Eopf;</code> </td> <td> U+1D53C </td> <td> <span>&#120124;</span> </td> <tr><td> <code title="">Epsilon;</code> </td> <td> U+00395 </td> <td> <span>&Epsilon;</span> </td> <tr><td> <code title="">Equal;</code> </td> <td> U+02A75 </td> <td> <span>&#10869;</span> </td> <tr><td> <code title="">EqualTilde;</code> </td> <td> U+02242 </td> <td> <span>&#8770;</span> </td> <tr><td> <code title="">Equilibrium;</code> </td> <td> U+021CC </td> <td> <span>&#8652;</span> </td> <tr><td> <code title="">Escr;</code> </td> <td> U+02130 </td> <td> <span>&#8496;</span> </td> <tr><td> <code title="">Esim;</code> </td> <td> U+02A73 </td> <td> <span>&#10867;</span> </td> <tr><td> <code title="">Eta;</code> </td> <td> U+00397 </td> <td> <span>&Eta;</span> </td> <tr><td> <code title="">Euml;</code> </td> <td> U+000CB </td> <td> <span>&Euml;</span> </td> <tr class=impl><td> <code title="">Euml</code> </td> <td> U+000CB </td> <td> <span title="">&Euml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Exists;</code> </td> <td> U+02203 </td> <td> <span>&exist;</span> </td> <tr><td> <code title="">ExponentialE;</code> </td> <td> U+02147 </td> <td> <span>&#8519;</span> </td> <tr><td> <code title="">Fcy;</code> </td> <td> U+00424 </td> <td> <span>&#1060;</span> </td> <tr><td> <code title="">Ffr;</code> </td> <td> U+1D509 </td> <td> <span>&#120073;</span> </td> <tr><td> <code title="">FilledSmallSquare;</code> </td> <td> U+025FC </td> <td> <span>&#9724;</span> </td> <tr><td> <code title="">FilledVerySmallSquare;</code> </td> <td> U+025AA </td> <td> <span>&#9642;</span> </td> <tr><td> <code title="">Fopf;</code> </td> <td> U+1D53D </td> <td> <span>&#120125;</span> </td> <tr><td> <code title="">ForAll;</code> </td> <td> U+02200 </td> <td> <span>&forall;</span> </td> <tr><td> <code title="">Fouriertrf;</code> </td> <td> U+02131 </td> <td> <span>&#8497;</span> </td> <tr><td> <code title="">Fscr;</code> </td> <td> U+02131 </td> <td> <span>&#8497;</span> </td> <tr><td> <code title="">GJcy;</code> </td> <td> U+00403 </td> <td> <span>&#1027;</span> </td> <tr><td> <code title="">GT;</code> </td> <td> U+0003E </td> <td> <span>&gt;</span> </td> <tr class=impl><td> <code title="">GT</code> </td> <td> U+0003E </td> <td> <span title="">&gt;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Gamma;</code> </td> <td> U+00393 </td> <td> <span>&Gamma;</span> </td> <tr><td> <code title="">Gammad;</code> </td> <td> U+003DC </td> <td> <span>&#988;</span> </td> <tr><td> <code title="">Gbreve;</code> </td> <td> U+0011E </td> <td> <span>&#286;</span> </td> <tr><td> <code title="">Gcedil;</code> </td> <td> U+00122 </td> <td> <span>&#290;</span> </td> <tr><td> <code title="">Gcirc;</code> </td> <td> U+0011C </td> <td> <span>&#284;</span> </td> <tr><td> <code title="">Gcy;</code> </td> <td> U+00413 </td> <td> <span>&#1043;</span> </td> <tr><td> <code title="">Gdot;</code> </td> <td> U+00120 </td> <td> <span>&#288;</span> </td> <tr><td> <code title="">Gfr;</code> </td> <td> U+1D50A </td> <td> <span>&#120074;</span> </td> <tr><td> <code title="">Gg;</code> </td> <td> U+022D9 </td> <td> <span>&#8921;</span> </td> <tr><td> <code title="">Gopf;</code> </td> <td> U+1D53E </td> <td> <span>&#120126;</span> </td> <tr><td> <code title="">GreaterEqual;</code> </td> <td> U+02265 </td> <td> <span>&ge;</span> </td> <tr><td> <code title="">GreaterEqualLess;</code> </td> <td> U+022DB </td> <td> <span>&#8923;</span> </td> <tr><td> <code title="">GreaterFullEqual;</code> </td> <td> U+02267 </td> <td> <span>&#8807;</span> </td> <tr><td> <code title="">GreaterGreater;</code> </td> <td> U+02AA2 </td> <td> <span>&#10914;</span> </td> <tr><td> <code title="">GreaterLess;</code> </td> <td> U+02277 </td> <td> <span>&#8823;</span> </td> <tr><td> <code title="">GreaterSlantEqual;</code> </td> <td> U+02A7E </td> <td> <span>&#10878;</span> </td> <tr><td> <code title="">GreaterTilde;</code> </td> <td> U+02273 </td> <td> <span>&#8819;</span> </td> <tr><td> <code title="">Gscr;</code> </td> <td> U+1D4A2 </td> <td> <span>&#119970;</span> </td> <tr><td> <code title="">Gt;</code> </td> <td> U+0226B </td> <td> <span>&#8811;</span> </td> <tr><td> <code title="">HARDcy;</code> </td> <td> U+0042A </td> <td> <span>&#1066;</span> </td> <tr><td> <code title="">Hacek;</code> </td> <td> U+002C7 </td> <td> <span>&#711;</span> </td> <tr><td> <code title="">Hat;</code> </td> <td> U+0005E </td> <td> <span>^</span> </td> <tr><td> <code title="">Hcirc;</code> </td> <td> U+00124 </td> <td> <span>&#292;</span> </td> <tr><td> <code title="">Hfr;</code> </td> <td> U+0210C </td> <td> <span>&#8460;</span> </td> <tr><td> <code title="">HilbertSpace;</code> </td> <td> U+0210B </td> <td> <span>&#8459;</span> </td> <tr><td> <code title="">Hopf;</code> </td> <td> U+0210D </td> <td> <span>&#8461;</span> </td> <tr><td> <code title="">HorizontalLine;</code> </td> <td> U+02500 </td> <td> <span>&#9472;</span> </td> <tr><td> <code title="">Hscr;</code> </td> <td> U+0210B </td> <td> <span>&#8459;</span> </td> <tr><td> <code title="">Hstrok;</code> </td> <td> U+00126 </td> <td> <span>&#294;</span> </td> <tr><td> <code title="">HumpDownHump;</code> </td> <td> U+0224E </td> <td> <span>&#8782;</span> </td> <tr><td> <code title="">HumpEqual;</code> </td> <td> U+0224F </td> <td> <span>&#8783;</span> </td> <tr><td> <code title="">IEcy;</code> </td> <td> U+00415 </td> <td> <span>&#1045;</span> </td> <tr><td> <code title="">IJlig;</code> </td> <td> U+00132 </td> <td> <span>&#306;</span> </td> <tr><td> <code title="">IOcy;</code> </td> <td> U+00401 </td> <td> <span>&#1025;</span> </td> <tr><td> <code title="">Iacute;</code> </td> <td> U+000CD </td> <td> <span>&Iacute;</span> </td> <tr class=impl><td> <code title="">Iacute</code> </td> <td> U+000CD </td> <td> <span title="">&Iacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Icirc;</code> </td> <td> U+000CE </td> <td> <span>&Icirc;</span> </td> <tr class=impl><td> <code title="">Icirc</code> </td> <td> U+000CE </td> <td> <span title="">&Icirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Icy;</code> </td> <td> U+00418 </td> <td> <span>&#1048;</span> </td> <tr><td> <code title="">Idot;</code> </td> <td> U+00130 </td> <td> <a href=#the-i-element>&#304;</a> </td> <tr><td> <code title="">Ifr;</code> </td> <td> U+02111 </td> <td> <span>&image;</span> </td> <tr><td> <code title="">Igrave;</code> </td> <td> U+000CC </td> <td> <span>&Igrave;</span> </td> <tr class=impl><td> <code title="">Igrave</code> </td> <td> U+000CC </td> <td> <span title="">&Igrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Im;</code> </td> <td> U+02111 </td> <td> <span>&image;</span> </td> <tr><td> <code title="">Imacr;</code> </td> <td> U+0012A </td> <td> <span>&#298;</span> </td> <tr><td> <code title="">ImaginaryI;</code> </td> <td> U+02148 </td> <td> <span>&#8520;</span> </td> <tr><td> <code title="">Implies;</code> </td> <td> U+021D2 </td> <td> <span>&rArr;</span> </td> <tr><td> <code title="">Int;</code> </td> <td> U+0222C </td> <td> <span>&#8748;</span> </td> <tr><td> <code title="">Integral;</code> </td> <td> U+0222B </td> <td> <span>&int;</span> </td> <tr><td> <code title="">Intersection;</code> </td> <td> U+022C2 </td> <td> <span>&#8898;</span> </td> <tr><td> <code title="">InvisibleComma;</code> </td> <td> U+02063 </td> <td> <span>&#8291;</span> </td> <tr><td> <code title="">InvisibleTimes;</code> </td> <td> U+02062 </td> <td> <span>&#8290;</span> </td> <tr><td> <code title="">Iogon;</code> </td> <td> U+0012E </td> <td> <span>&#302;</span> </td> <tr><td> <code title="">Iopf;</code> </td> <td> U+1D540 </td> <td> <span>&#120128;</span> </td> <tr><td> <code title="">Iota;</code> </td> <td> U+00399 </td> <td> <span>&Iota;</span> </td> <tr><td> <code title="">Iscr;</code> </td> <td> U+02110 </td> <td> <span>&#8464;</span> </td> <tr><td> <code title="">Itilde;</code> </td> <td> U+00128 </td> <td> <span>&#296;</span> </td> <tr><td> <code title="">Iukcy;</code> </td> <td> U+00406 </td> <td> <span>&#1030;</span> </td> <tr><td> <code title="">Iuml;</code> </td> <td> U+000CF </td> <td> <span>&Iuml;</span> </td> <tr class=impl><td> <code title="">Iuml</code> </td> <td> U+000CF </td> <td> <span title="">&Iuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Jcirc;</code> </td> <td> U+00134 </td> <td> <span>&#308;</span> </td> <tr><td> <code title="">Jcy;</code> </td> <td> U+00419 </td> <td> <span>&#1049;</span> </td> <tr><td> <code title="">Jfr;</code> </td> <td> U+1D50D </td> <td> <span>&#120077;</span> </td> <tr><td> <code title="">Jopf;</code> </td> <td> U+1D541 </td> <td> <span>&#120129;</span> </td> <tr><td> <code title="">Jscr;</code> </td> <td> U+1D4A5 </td> <td> <span>&#119973;</span> </td> <tr><td> <code title="">Jsercy;</code> </td> <td> U+00408 </td> <td> <span>&#1032;</span> </td> <tr><td> <code title="">Jukcy;</code> </td> <td> U+00404 </td> <td> <span>&#1028;</span> </td> <tr><td> <code title="">KHcy;</code> </td> <td> U+00425 </td> <td> <span>&#1061;</span> </td> <tr><td> <code title="">KJcy;</code> </td> <td> U+0040C </td> <td> <span>&#1036;</span> </td> <tr><td> <code title="">Kappa;</code> </td> <td> U+0039A </td> <td> <span>&Kappa;</span> </td> <tr><td> <code title="">Kcedil;</code> </td> <td> U+00136 </td> <td> <span>&#310;</span> </td> <tr><td> <code title="">Kcy;</code> </td> <td> U+0041A </td> <td> <span>&#1050;</span> </td> <tr><td> <code title="">Kfr;</code> </td> <td> U+1D50E </td> <td> <span>&#120078;</span> </td> <tr><td> <code title="">Kopf;</code> </td> <td> U+1D542 </td> <td> <span>&#120130;</span> </td> <tr><td> <code title="">Kscr;</code> </td> <td> U+1D4A6 </td> <td> <span>&#119974;</span> </td> <tr><td> <code title="">LJcy;</code> </td> <td> U+00409 </td> <td> <span>&#1033;</span> </td> <tr><td> <code title="">LT;</code> </td> <td> U+0003C </td> <td> <span>&lt;</span> </td> <tr class=impl><td> <code title="">LT</code> </td> <td> U+0003C </td> <td> <span title="">&lt;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Lacute;</code> </td> <td> U+00139 </td> <td> <span>&#313;</span> </td> <tr><td> <code title="">Lambda;</code> </td> <td> U+0039B </td> <td> <span>&Lambda;</span> </td> <tr><td> <code title="">Lang;</code> </td> <td> U+027EA </td> <td> <span>&#10218;</span> </td> <tr><td> <code title="">Laplacetrf;</code> </td> <td> U+02112 </td> <td> <span>&#8466;</span> </td> <tr><td> <code title="">Larr;</code> </td> <td> U+0219E </td> <td> <span>&#8606;</span> </td> <tr><td> <code title="">Lcaron;</code> </td> <td> U+0013D </td> <td> <span>&#317;</span> </td> <tr><td> <code title="">Lcedil;</code> </td> <td> U+0013B </td> <td> <span>&#315;</span> </td> <tr><td> <code title="">Lcy;</code> </td> <td> U+0041B </td> <td> <span>&#1051;</span> </td> <tr><td> <code title="">LeftAngleBracket;</code> </td> <td> U+027E8 </td> <td> <span>&lang;</span> </td> <tr><td> <code title="">LeftArrow;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">LeftArrowBar;</code> </td> <td> U+021E4 </td> <td> <span>&#8676;</span> </td> <tr><td> <code title="">LeftArrowRightArrow;</code> </td> <td> U+021C6 </td> <td> <span>&#8646;</span> </td> <tr><td> <code title="">LeftCeiling;</code> </td> <td> U+02308 </td> <td> <span>&lceil;</span> </td> <tr><td> <code title="">LeftDoubleBracket;</code> </td> <td> U+027E6 </td> <td> <span>&#10214;</span> </td> <tr><td> <code title="">LeftDownTeeVector;</code> </td> <td> U+02961 </td> <td> <span>&#10593;</span> </td> <tr><td> <code title="">LeftDownVector;</code> </td> <td> U+021C3 </td> <td> <span>&#8643;</span> </td> <tr><td> <code title="">LeftDownVectorBar;</code> </td> <td> U+02959 </td> <td> <span>&#10585;</span> </td> <tr><td> <code title="">LeftFloor;</code> </td> <td> U+0230A </td> <td> <span>&lfloor;</span> </td> <tr><td> <code title="">LeftRightArrow;</code> </td> <td> U+02194 </td> <td> <span>&harr;</span> </td> <tr><td> <code title="">LeftRightVector;</code> </td> <td> U+0294E </td> <td> <span>&#10574;</span> </td> <tr><td> <code title="">LeftTee;</code> </td> <td> U+022A3 </td> <td> <span>&#8867;</span> </td> <tr><td> <code title="">LeftTeeArrow;</code> </td> <td> U+021A4 </td> <td> <span>&#8612;</span> </td> <tr><td> <code title="">LeftTeeVector;</code> </td> <td> U+0295A </td> <td> <span>&#10586;</span> </td> <tr><td> <code title="">LeftTriangle;</code> </td> <td> U+022B2 </td> <td> <span>&#8882;</span> </td> <tr><td> <code title="">LeftTriangleBar;</code> </td> <td> U+029CF </td> <td> <span>&#10703;</span> </td> <tr><td> <code title="">LeftTriangleEqual;</code> </td> <td> U+022B4 </td> <td> <span>&#8884;</span> </td> <tr><td> <code title="">LeftUpDownVector;</code> </td> <td> U+02951 </td> <td> <span>&#10577;</span> </td> <tr><td> <code title="">LeftUpTeeVector;</code> </td> <td> U+02960 </td> <td> <span>&#10592;</span> </td> <tr><td> <code title="">LeftUpVector;</code> </td> <td> U+021BF </td> <td> <span>&#8639;</span> </td> <tr><td> <code title="">LeftUpVectorBar;</code> </td> <td> U+02958 </td> <td> <span>&#10584;</span> </td> <tr><td> <code title="">LeftVector;</code> </td> <td> U+021BC </td> <td> <span>&#8636;</span> </td> <tr><td> <code title="">LeftVectorBar;</code> </td> <td> U+02952 </td> <td> <span>&#10578;</span> </td> <tr><td> <code title="">Leftarrow;</code> </td> <td> U+021D0 </td> <td> <span>&lArr;</span> </td> <tr><td> <code title="">Leftrightarrow;</code> </td> <td> U+021D4 </td> <td> <span>&hArr;</span> </td> <tr><td> <code title="">LessEqualGreater;</code> </td> <td> U+022DA </td> <td> <span>&#8922;</span> </td> <tr><td> <code title="">LessFullEqual;</code> </td> <td> U+02266 </td> <td> <span>&#8806;</span> </td> <tr><td> <code title="">LessGreater;</code> </td> <td> U+02276 </td> <td> <span>&#8822;</span> </td> <tr><td> <code title="">LessLess;</code> </td> <td> U+02AA1 </td> <td> <span>&#10913;</span> </td> <tr><td> <code title="">LessSlantEqual;</code> </td> <td> U+02A7D </td> <td> <span>&#10877;</span> </td> <tr><td> <code title="">LessTilde;</code> </td> <td> U+02272 </td> <td> <span>&#8818;</span> </td> <tr><td> <code title="">Lfr;</code> </td> <td> U+1D50F </td> <td> <span>&#120079;</span> </td> <tr><td> <code title="">Ll;</code> </td> <td> U+022D8 </td> <td> <span>&#8920;</span> </td> <tr><td> <code title="">Lleftarrow;</code> </td> <td> U+021DA </td> <td> <span>&#8666;</span> </td> <tr><td> <code title="">Lmidot;</code> </td> <td> U+0013F </td> <td> <span>&#319;</span> </td> <tr><td> <code title="">LongLeftArrow;</code> </td> <td> U+027F5 </td> <td> <span>&#10229;</span> </td> <tr><td> <code title="">LongLeftRightArrow;</code> </td> <td> U+027F7 </td> <td> <span>&#10231;</span> </td> <tr><td> <code title="">LongRightArrow;</code> </td> <td> U+027F6 </td> <td> <span>&#10230;</span> </td> <tr><td> <code title="">Longleftarrow;</code> </td> <td> U+027F8 </td> <td> <span>&#10232;</span> </td> <tr><td> <code title="">Longleftrightarrow;</code> </td> <td> U+027FA </td> <td> <span>&#10234;</span> </td> <tr><td> <code title="">Longrightarrow;</code> </td> <td> U+027F9 </td> <td> <span>&#10233;</span> </td> <tr><td> <code title="">Lopf;</code> </td> <td> U+1D543 </td> <td> <span>&#120131;</span> </td> <tr><td> <code title="">LowerLeftArrow;</code> </td> <td> U+02199 </td> <td> <span>&#8601;</span> </td> <tr><td> <code title="">LowerRightArrow;</code> </td> <td> U+02198 </td> <td> <span>&#8600;</span> </td> <tr><td> <code title="">Lscr;</code> </td> <td> U+02112 </td> <td> <span>&#8466;</span> </td> <tr><td> <code title="">Lsh;</code> </td> <td> U+021B0 </td> <td> <span>&#8624;</span> </td> <tr><td> <code title="">Lstrok;</code> </td> <td> U+00141 </td> <td> <span>&#321;</span> </td> <tr><td> <code title="">Lt;</code> </td> <td> U+0226A </td> <td> <span>&#8810;</span> </td> <tr><td> <code title="">Map;</code> </td> <td> U+02905 </td> <td> <span>&#10501;</span> </td> <tr><td> <code title="">Mcy;</code> </td> <td> U+0041C </td> <td> <span>&#1052;</span> </td> <tr><td> <code title="">MediumSpace;</code> </td> <td> U+0205F </td> <td> <span>&#8287;</span> </td> <tr><td> <code title="">Mellintrf;</code> </td> <td> U+02133 </td> <td> <span>&#8499;</span> </td> <tr><td> <code title="">Mfr;</code> </td> <td> U+1D510 </td> <td> <span>&#120080;</span> </td> <tr><td> <code title="">MinusPlus;</code> </td> <td> U+02213 </td> <td> <span>&#8723;</span> </td> <tr><td> <code title="">Mopf;</code> </td> <td> U+1D544 </td> <td> <span>&#120132;</span> </td> <tr><td> <code title="">Mscr;</code> </td> <td> U+02133 </td> <td> <span>&#8499;</span> </td> <tr><td> <code title="">Mu;</code> </td> <td> U+0039C </td> <td> <span>&Mu;</span> </td> <tr><td> <code title="">NJcy;</code> </td> <td> U+0040A </td> <td> <span>&#1034;</span> </td> <tr><td> <code title="">Nacute;</code> </td> <td> U+00143 </td> <td> <span>&#323;</span> </td> <tr><td> <code title="">Ncaron;</code> </td> <td> U+00147 </td> <td> <span>&#327;</span> </td> <tr><td> <code title="">Ncedil;</code> </td> <td> U+00145 </td> <td> <span>&#325;</span> </td> <tr><td> <code title="">Ncy;</code> </td> <td> U+0041D </td> <td> <span>&#1053;</span> </td> <tr><td> <code title="">NegativeMediumSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">NegativeThickSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">NegativeThinSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">NegativeVeryThinSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">NestedGreaterGreater;</code> </td> <td> U+0226B </td> <td> <span>&#8811;</span> </td> <tr><td> <code title="">NestedLessLess;</code> </td> <td> U+0226A </td> <td> <span>&#8810;</span> </td> <tr><td> <code title="">NewLine;</code> </td> <td> U+0000A </td> <td> <span>
</span> </td> <tr><td> <code title="">Nfr;</code> </td> <td> U+1D511 </td> <td> <span>&#120081;</span> </td> <tr><td> <code title="">NoBreak;</code> </td> <td> U+02060 </td> <td> <span>&#8288;</span> </td> <tr><td> <code title="">NonBreakingSpace;</code> </td> <td> U+000A0 </td> <td> <span>&nbsp;</span> </td> <tr><td> <code title="">Nopf;</code> </td> <td> U+02115 </td> <td> <span>&#8469;</span> </td> <tr><td> <code title="">Not;</code> </td> <td> U+02AEC </td> <td> <span>&#10988;</span> </td> <tr><td> <code title="">NotCongruent;</code> </td> <td> U+02262 </td> <td> <span>&#8802;</span> </td> <tr><td> <code title="">NotCupCap;</code> </td> <td> U+0226D </td> <td> <span>&#8813;</span> </td> <tr><td> <code title="">NotDoubleVerticalBar;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">NotElement;</code> </td> <td> U+02209 </td> <td> <span>&notin;</span> </td> <tr><td> <code title="">NotEqual;</code> </td> <td> U+02260 </td> <td> <span>&ne;</span> </td> <tr><td> <code title="">NotExists;</code> </td> <td> U+02204 </td> <td> <span>&#8708;</span> </td> <tr><td> <code title="">NotGreater;</code> </td> <td> U+0226F </td> <td> <span>&#8815;</span> </td> <tr><td> <code title="">NotGreaterEqual;</code> </td> <td> U+02271 </td> <td> <span>&#8817;</span> </td> <tr><td> <code title="">NotGreaterLess;</code> </td> <td> U+02279 </td> <td> <span>&#8825;</span> </td> <tr><td> <code title="">NotGreaterTilde;</code> </td> <td> U+02275 </td> <td> <span>&#8821;</span> </td> <tr><td> <code title="">NotLeftTriangle;</code> </td> <td> U+022EA </td> <td> <span>&#8938;</span> </td> <tr><td> <code title="">NotLeftTriangleEqual;</code> </td> <td> U+022EC </td> <td> <span>&#8940;</span> </td> <tr><td> <code title="">NotLess;</code> </td> <td> U+0226E </td> <td> <span>&#8814;</span> </td> <tr><td> <code title="">NotLessEqual;</code> </td> <td> U+02270 </td> <td> <span>&#8816;</span> </td> <tr><td> <code title="">NotLessGreater;</code> </td> <td> U+02278 </td> <td> <span>&#8824;</span> </td> <tr><td> <code title="">NotLessTilde;</code> </td> <td> U+02274 </td> <td> <span>&#8820;</span> </td> <tr><td> <code title="">NotPrecedes;</code> </td> <td> U+02280 </td> <td> <span>&#8832;</span> </td> <tr><td> <code title="">NotPrecedesSlantEqual;</code> </td> <td> U+022E0 </td> <td> <span>&#8928;</span> </td> <tr><td> <code title="">NotReverseElement;</code> </td> <td> U+0220C </td> <td> <span>&#8716;</span> </td> <tr><td> <code title="">NotRightTriangle;</code> </td> <td> U+022EB </td> <td> <span>&#8939;</span> </td> <tr><td> <code title="">NotRightTriangleEqual;</code> </td> <td> U+022ED </td> <td> <span>&#8941;</span> </td> <tr><td> <code title="">NotSquareSubsetEqual;</code> </td> <td> U+022E2 </td> <td> <span>&#8930;</span> </td> <tr><td> <code title="">NotSquareSupersetEqual;</code> </td> <td> U+022E3 </td> <td> <span>&#8931;</span> </td> <tr><td> <code title="">NotSubsetEqual;</code> </td> <td> U+02288 </td> <td> <span>&#8840;</span> </td> <tr><td> <code title="">NotSucceeds;</code> </td> <td> U+02281 </td> <td> <span>&#8833;</span> </td> <tr><td> <code title="">NotSucceedsSlantEqual;</code> </td> <td> U+022E1 </td> <td> <span>&#8929;</span> </td> <tr><td> <code title="">NotSupersetEqual;</code> </td> <td> U+02289 </td> <td> <span>&#8841;</span> </td> <tr><td> <code title="">NotTilde;</code> </td> <td> U+02241 </td> <td> <span>&#8769;</span> </td> <tr><td> <code title="">NotTildeEqual;</code> </td> <td> U+02244 </td> <td> <span>&#8772;</span> </td> <tr><td> <code title="">NotTildeFullEqual;</code> </td> <td> U+02247 </td> <td> <span>&#8775;</span> </td> <tr><td> <code title="">NotTildeTilde;</code> </td> <td> U+02249 </td> <td> <span>&#8777;</span> </td> <tr><td> <code title="">NotVerticalBar;</code> </td> <td> U+02224 </td> <td> <span>&#8740;</span> </td> <tr><td> <code title="">Nscr;</code> </td> <td> U+1D4A9 </td> <td> <span>&#119977;</span> </td> <tr><td> <code title="">Ntilde;</code> </td> <td> U+000D1 </td> <td> <span>&Ntilde;</span> </td> <tr class=impl><td> <code title="">Ntilde</code> </td> <td> U+000D1 </td> <td> <span title="">&Ntilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Nu;</code> </td> <td> U+0039D </td> <td> <span>&Nu;</span> </td> <tr><td> <code title="">OElig;</code> </td> <td> U+00152 </td> <td> <span>&OElig;</span> </td> <tr><td> <code title="">Oacute;</code> </td> <td> U+000D3 </td> <td> <span>&Oacute;</span> </td> <tr class=impl><td> <code title="">Oacute</code> </td> <td> U+000D3 </td> <td> <span title="">&Oacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ocirc;</code> </td> <td> U+000D4 </td> <td> <span>&Ocirc;</span> </td> <tr class=impl><td> <code title="">Ocirc</code> </td> <td> U+000D4 </td> <td> <span title="">&Ocirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ocy;</code> </td> <td> U+0041E </td> <td> <span>&#1054;</span> </td> <tr><td> <code title="">Odblac;</code> </td> <td> U+00150 </td> <td> <span>&#336;</span> </td> <tr><td> <code title="">Ofr;</code> </td> <td> U+1D512 </td> <td> <span>&#120082;</span> </td> <tr><td> <code title="">Ograve;</code> </td> <td> U+000D2 </td> <td> <span>&Ograve;</span> </td> <tr class=impl><td> <code title="">Ograve</code> </td> <td> U+000D2 </td> <td> <span title="">&Ograve;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Omacr;</code> </td> <td> U+0014C </td> <td> <span>&#332;</span> </td> <tr><td> <code title="">Omega;</code> </td> <td> U+003A9 </td> <td> <span>&Omega;</span> </td> <tr><td> <code title="">Omicron;</code> </td> <td> U+0039F </td> <td> <span>&Omicron;</span> </td> <tr><td> <code title="">Oopf;</code> </td> <td> U+1D546 </td> <td> <span>&#120134;</span> </td> <tr><td> <code title="">OpenCurlyDoubleQuote;</code> </td> <td> U+0201C </td> <td> <span>&ldquo;</span> </td> <tr><td> <code title="">OpenCurlyQuote;</code> </td> <td> U+02018 </td> <td> <span>&lsquo;</span> </td> <tr><td> <code title="">Or;</code> </td> <td> U+02A54 </td> <td> <span>&#10836;</span> </td> <tr><td> <code title="">Oscr;</code> </td> <td> U+1D4AA </td> <td> <span>&#119978;</span> </td> <tr><td> <code title="">Oslash;</code> </td> <td> U+000D8 </td> <td> <span>&Oslash;</span> </td> <tr class=impl><td> <code title="">Oslash</code> </td> <td> U+000D8 </td> <td> <span title="">&Oslash;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Otilde;</code> </td> <td> U+000D5 </td> <td> <span>&Otilde;</span> </td> <tr class=impl><td> <code title="">Otilde</code> </td> <td> U+000D5 </td> <td> <span title="">&Otilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Otimes;</code> </td> <td> U+02A37 </td> <td> <span>&#10807;</span> </td> <tr><td> <code title="">Ouml;</code> </td> <td> U+000D6 </td> <td> <span>&Ouml;</span> </td> <tr class=impl><td> <code title="">Ouml</code> </td> <td> U+000D6 </td> <td> <span title="">&Ouml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">OverBar;</code> </td> <td> U+0203E </td> <td> <span>&oline;</span> </td> <tr><td> <code title="">OverBrace;</code> </td> <td> U+023DE </td> <td> <span>&#9182;</span> </td> <tr><td> <code title="">OverBracket;</code> </td> <td> U+023B4 </td> <td> <span>&#9140;</span> </td> <tr><td> <code title="">OverParenthesis;</code> </td> <td> U+023DC </td> <td> <span>&#9180;</span> </td> <tr><td> <code title="">PartialD;</code> </td> <td> U+02202 </td> <td> <span>&part;</span> </td> <tr><td> <code title="">Pcy;</code> </td> <td> U+0041F </td> <td> <span>&#1055;</span> </td> <tr><td> <code title="">Pfr;</code> </td> <td> U+1D513 </td> <td> <span>&#120083;</span> </td> <tr><td> <code title="">Phi;</code> </td> <td> U+003A6 </td> <td> <span>&Phi;</span> </td> <tr><td> <code title="">Pi;</code> </td> <td> U+003A0 </td> <td> <span>&Pi;</span> </td> <tr><td> <code title="">PlusMinus;</code> </td> <td> U+000B1 </td> <td> <span>&plusmn;</span> </td> <tr><td> <code title="">Poincareplane;</code> </td> <td> U+0210C </td> <td> <span>&#8460;</span> </td> <tr><td> <code title="">Popf;</code> </td> <td> U+02119 </td> <td> <span>&#8473;</span> </td> <tr><td> <code title="">Pr;</code> </td> <td> U+02ABB </td> <td> <span>&#10939;</span> </td> <tr><td> <code title="">Precedes;</code> </td> <td> U+0227A </td> <td> <span>&#8826;</span> </td> <tr><td> <code title="">PrecedesEqual;</code> </td> <td> U+02AAF </td> <td> <span>&#10927;</span> </td> <tr><td> <code title="">PrecedesSlantEqual;</code> </td> <td> U+0227C </td> <td> <span>&#8828;</span> </td> <tr><td> <code title="">PrecedesTilde;</code> </td> <td> U+0227E </td> <td> <span>&#8830;</span> </td> <tr><td> <code title="">Prime;</code> </td> <td> U+02033 </td> <td> <span>&Prime;</span> </td> <tr><td> <code title="">Product;</code> </td> <td> U+0220F </td> <td> <span>&prod;</span> </td> <tr><td> <code title="">Proportion;</code> </td> <td> U+02237 </td> <td> <span>&#8759;</span> </td> <tr><td> <code title="">Proportional;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">Pscr;</code> </td> <td> U+1D4AB </td> <td> <span>&#119979;</span> </td> <tr><td> <code title="">Psi;</code> </td> <td> U+003A8 </td> <td> <span>&Psi;</span> </td> <tr><td> <code title="">QUOT;</code> </td> <td> U+00022 </td> <td> <span>"</span> </td> <tr class=impl><td> <code title="">QUOT</code> </td> <td> U+00022 </td> <td> <span title="">"</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Qfr;</code> </td> <td> U+1D514 </td> <td> <span>&#120084;</span> </td> <tr><td> <code title="">Qopf;</code> </td> <td> U+0211A </td> <td> <span>&#8474;</span> </td> <tr><td> <code title="">Qscr;</code> </td> <td> U+1D4AC </td> <td> <span>&#119980;</span> </td> <tr><td> <code title="">RBarr;</code> </td> <td> U+02910 </td> <td> <span>&#10512;</span> </td> <tr><td> <code title="">REG;</code> </td> <td> U+000AE </td> <td> <span>&reg;</span> </td> <tr class=impl><td> <code title="">REG</code> </td> <td> U+000AE </td> <td> <span title="">&reg;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Racute;</code> </td> <td> U+00154 </td> <td> <span>&#340;</span> </td> <tr><td> <code title="">Rang;</code> </td> <td> U+027EB </td> <td> <span>&#10219;</span> </td> <tr><td> <code title="">Rarr;</code> </td> <td> U+021A0 </td> <td> <span>&#8608;</span> </td> <tr><td> <code title="">Rarrtl;</code> </td> <td> U+02916 </td> <td> <span>&#10518;</span> </td> <tr><td> <code title="">Rcaron;</code> </td> <td> U+00158 </td> <td> <span>&#344;</span> </td> <tr><td> <code title="">Rcedil;</code> </td> <td> U+00156 </td> <td> <span>&#342;</span> </td> <tr><td> <code title="">Rcy;</code> </td> <td> U+00420 </td> <td> <span>&#1056;</span> </td> <tr><td> <code title="">Re;</code> </td> <td> U+0211C </td> <td> <span>&real;</span> </td> <tr><td> <code title="">ReverseElement;</code> </td> <td> U+0220B </td> <td> <span>&ni;</span> </td> <tr><td> <code title="">ReverseEquilibrium;</code> </td> <td> U+021CB </td> <td> <span>&#8651;</span> </td> <tr><td> <code title="">ReverseUpEquilibrium;</code> </td> <td> U+0296F </td> <td> <span>&#10607;</span> </td> <tr><td> <code title="">Rfr;</code> </td> <td> U+0211C </td> <td> <span>&real;</span> </td> <tr><td> <code title="">Rho;</code> </td> <td> U+003A1 </td> <td> <span>&Rho;</span> </td> <tr><td> <code title="">RightAngleBracket;</code> </td> <td> U+027E9 </td> <td> <span>&rang;</span> </td> <tr><td> <code title="">RightArrow;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">RightArrowBar;</code> </td> <td> U+021E5 </td> <td> <span>&#8677;</span> </td> <tr><td> <code title="">RightArrowLeftArrow;</code> </td> <td> U+021C4 </td> <td> <span>&#8644;</span> </td> <tr><td> <code title="">RightCeiling;</code> </td> <td> U+02309 </td> <td> <span>&rceil;</span> </td> <tr><td> <code title="">RightDoubleBracket;</code> </td> <td> U+027E7 </td> <td> <span>&#10215;</span> </td> <tr><td> <code title="">RightDownTeeVector;</code> </td> <td> U+0295D </td> <td> <span>&#10589;</span> </td> <tr><td> <code title="">RightDownVector;</code> </td> <td> U+021C2 </td> <td> <span>&#8642;</span> </td> <tr><td> <code title="">RightDownVectorBar;</code> </td> <td> U+02955 </td> <td> <span>&#10581;</span> </td> <tr><td> <code title="">RightFloor;</code> </td> <td> U+0230B </td> <td> <span>&rfloor;</span> </td> <tr><td> <code title="">RightTee;</code> </td> <td> U+022A2 </td> <td> <span>&#8866;</span> </td> <tr><td> <code title="">RightTeeArrow;</code> </td> <td> U+021A6 </td> <td> <span>&#8614;</span> </td> <tr><td> <code title="">RightTeeVector;</code> </td> <td> U+0295B </td> <td> <span>&#10587;</span> </td> <tr><td> <code title="">RightTriangle;</code> </td> <td> U+022B3 </td> <td> <span>&#8883;</span> </td> <tr><td> <code title="">RightTriangleBar;</code> </td> <td> U+029D0 </td> <td> <span>&#10704;</span> </td> <tr><td> <code title="">RightTriangleEqual;</code> </td> <td> U+022B5 </td> <td> <span>&#8885;</span> </td> <tr><td> <code title="">RightUpDownVector;</code> </td> <td> U+0294F </td> <td> <span>&#10575;</span> </td> <tr><td> <code title="">RightUpTeeVector;</code> </td> <td> U+0295C </td> <td> <span>&#10588;</span> </td> <tr><td> <code title="">RightUpVector;</code> </td> <td> U+021BE </td> <td> <span>&#8638;</span> </td> <tr><td> <code title="">RightUpVectorBar;</code> </td> <td> U+02954 </td> <td> <span>&#10580;</span> </td> <tr><td> <code title="">RightVector;</code> </td> <td> U+021C0 </td> <td> <span>&#8640;</span> </td> <tr><td> <code title="">RightVectorBar;</code> </td> <td> U+02953 </td> <td> <span>&#10579;</span> </td> <tr><td> <code title="">Rightarrow;</code> </td> <td> U+021D2 </td> <td> <span>&rArr;</span> </td> <tr><td> <code title="">Ropf;</code> </td> <td> U+0211D </td> <td> <span>&#8477;</span> </td> <tr><td> <code title="">RoundImplies;</code> </td> <td> U+02970 </td> <td> <span>&#10608;</span> </td> <tr><td> <code title="">Rrightarrow;</code> </td> <td> U+021DB </td> <td> <span>&#8667;</span> </td> <tr><td> <code title="">Rscr;</code> </td> <td> U+0211B </td> <td> <span>&#8475;</span> </td> <tr><td> <code title="">Rsh;</code> </td> <td> U+021B1 </td> <td> <span>&#8625;</span> </td> <tr><td> <code title="">RuleDelayed;</code> </td> <td> U+029F4 </td> <td> <span>&#10740;</span> </td> <tr><td> <code title="">SHCHcy;</code> </td> <td> U+00429 </td> <td> <span>&#1065;</span> </td> <tr><td> <code title="">SHcy;</code> </td> <td> U+00428 </td> <td> <span>&#1064;</span> </td> <tr><td> <code title="">SOFTcy;</code> </td> <td> U+0042C </td> <td> <span>&#1068;</span> </td> <tr><td> <code title="">Sacute;</code> </td> <td> U+0015A </td> <td> <span>&#346;</span> </td> <tr><td> <code title="">Sc;</code> </td> <td> U+02ABC </td> <td> <span>&#10940;</span> </td> <tr><td> <code title="">Scaron;</code> </td> <td> U+00160 </td> <td> <span>&Scaron;</span> </td> <tr><td> <code title="">Scedil;</code> </td> <td> U+0015E </td> <td> <span>&#350;</span> </td> <tr><td> <code title="">Scirc;</code> </td> <td> U+0015C </td> <td> <span>&#348;</span> </td> <tr><td> <code title="">Scy;</code> </td> <td> U+00421 </td> <td> <span>&#1057;</span> </td> <tr><td> <code title="">Sfr;</code> </td> <td> U+1D516 </td> <td> <span>&#120086;</span> </td> <tr><td> <code title="">ShortDownArrow;</code> </td> <td> U+02193 </td> <td> <span>&darr;</span> </td> <tr><td> <code title="">ShortLeftArrow;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">ShortRightArrow;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">ShortUpArrow;</code> </td> <td> U+02191 </td> <td> <span>&uarr;</span> </td> <tr><td> <code title="">Sigma;</code> </td> <td> U+003A3 </td> <td> <span>&Sigma;</span> </td> <tr><td> <code title="">SmallCircle;</code> </td> <td> U+02218 </td> <td> <span>&#8728;</span> </td> <tr><td> <code title="">Sopf;</code> </td> <td> U+1D54A </td> <td> <span>&#120138;</span> </td> <tr><td> <code title="">Sqrt;</code> </td> <td> U+0221A </td> <td> <span>&radic;</span> </td> <tr><td> <code title="">Square;</code> </td> <td> U+025A1 </td> <td> <span>&#9633;</span> </td> <tr><td> <code title="">SquareIntersection;</code> </td> <td> U+02293 </td> <td> <span>&#8851;</span> </td> <tr><td> <code title="">SquareSubset;</code> </td> <td> U+0228F </td> <td> <span>&#8847;</span> </td> <tr><td> <code title="">SquareSubsetEqual;</code> </td> <td> U+02291 </td> <td> <span>&#8849;</span> </td> <tr><td> <code title="">SquareSuperset;</code> </td> <td> U+02290 </td> <td> <span>&#8848;</span> </td> <tr><td> <code title="">SquareSupersetEqual;</code> </td> <td> U+02292 </td> <td> <span>&#8850;</span> </td> <tr><td> <code title="">SquareUnion;</code> </td> <td> U+02294 </td> <td> <span>&#8852;</span> </td> <tr><td> <code title="">Sscr;</code> </td> <td> U+1D4AE </td> <td> <span>&#119982;</span> </td> <tr><td> <code title="">Star;</code> </td> <td> U+022C6 </td> <td> <span>&#8902;</span> </td> <tr><td> <code title="">Sub;</code> </td> <td> U+022D0 </td> <td> <span>&#8912;</span> </td> <tr><td> <code title="">Subset;</code> </td> <td> U+022D0 </td> <td> <span>&#8912;</span> </td> <tr><td> <code title="">SubsetEqual;</code> </td> <td> U+02286 </td> <td> <span>&sube;</span> </td> <tr><td> <code title="">Succeeds;</code> </td> <td> U+0227B </td> <td> <span>&#8827;</span> </td> <tr><td> <code title="">SucceedsEqual;</code> </td> <td> U+02AB0 </td> <td> <span>&#10928;</span> </td> <tr><td> <code title="">SucceedsSlantEqual;</code> </td> <td> U+0227D </td> <td> <span>&#8829;</span> </td> <tr><td> <code title="">SucceedsTilde;</code> </td> <td> U+0227F </td> <td> <span>&#8831;</span> </td> <tr><td> <code title="">SuchThat;</code> </td> <td> U+0220B </td> <td> <span>&ni;</span> </td> <tr><td> <code title="">Sum;</code> </td> <td> U+02211 </td> <td> <span>&sum;</span> </td> <tr><td> <code title="">Sup;</code> </td> <td> U+022D1 </td> <td> <span>&#8913;</span> </td> <tr><td> <code title="">Superset;</code> </td> <td> U+02283 </td> <td> <span>&sup;</span> </td> <tr><td> <code title="">SupersetEqual;</code> </td> <td> U+02287 </td> <td> <span>&supe;</span> </td> <tr><td> <code title="">Supset;</code> </td> <td> U+022D1 </td> <td> <span>&#8913;</span> </td> <tr><td> <code title="">THORN;</code> </td> <td> U+000DE </td> <td> <span>&THORN;</span> </td> <tr class=impl><td> <code title="">THORN</code> </td> <td> U+000DE </td> <td> <span title="">&THORN;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">TRADE;</code> </td> <td> U+02122 </td> <td> <span>&trade;</span> </td> <tr><td> <code title="">TSHcy;</code> </td> <td> U+0040B </td> <td> <span>&#1035;</span> </td> <tr><td> <code title="">TScy;</code> </td> <td> U+00426 </td> <td> <span>&#1062;</span> </td> <tr><td> <code title="">Tab;</code> </td> <td> U+00009 </td> <td> <span>	</span> </td> <tr><td> <code title="">Tau;</code> </td> <td> U+003A4 </td> <td> <span>&Tau;</span> </td> <tr><td> <code title="">Tcaron;</code> </td> <td> U+00164 </td> <td> <span>&#356;</span> </td> <tr><td> <code title="">Tcedil;</code> </td> <td> U+00162 </td> <td> <span>&#354;</span> </td> <tr><td> <code title="">Tcy;</code> </td> <td> U+00422 </td> <td> <span>&#1058;</span> </td> <tr><td> <code title="">Tfr;</code> </td> <td> U+1D517 </td> <td> <span>&#120087;</span> </td> <tr><td> <code title="">Therefore;</code> </td> <td> U+02234 </td> <td> <span>&there4;</span> </td> <tr><td> <code title="">Theta;</code> </td> <td> U+00398 </td> <td> <span>&Theta;</span> </td> <tr><td> <code title="">ThinSpace;</code> </td> <td> U+02009 </td> <td> <span>&thinsp;</span> </td> <tr><td> <code title="">Tilde;</code> </td> <td> U+0223C </td> <td> <span>&sim;</span> </td> <tr><td> <code title="">TildeEqual;</code> </td> <td> U+02243 </td> <td> <span>&#8771;</span> </td> <tr><td> <code title="">TildeFullEqual;</code> </td> <td> U+02245 </td> <td> <span>&cong;</span> </td> <tr><td> <code title="">TildeTilde;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">Topf;</code> </td> <td> U+1D54B </td> <td> <span>&#120139;</span> </td> <tr><td> <code title="">TripleDot;</code> </td> <td> U+020DB </td> <td> <span>&#9676;&#8411;</span> </td> <tr><td> <code title="">Tscr;</code> </td> <td> U+1D4AF </td> <td> <span>&#119983;</span> </td> <tr><td> <code title="">Tstrok;</code> </td> <td> U+00166 </td> <td> <span>&#358;</span> </td> <tr><td> <code title="">Uacute;</code> </td> <td> U+000DA </td> <td> <span>&Uacute;</span> </td> <tr class=impl><td> <code title="">Uacute</code> </td> <td> U+000DA </td> <td> <span title="">&Uacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Uarr;</code> </td> <td> U+0219F </td> <td> <span>&#8607;</span> </td> <tr><td> <code title="">Uarrocir;</code> </td> <td> U+02949 </td> <td> <span>&#10569;</span> </td> <tr><td> <code title="">Ubrcy;</code> </td> <td> U+0040E </td> <td> <span>&#1038;</span> </td> <tr><td> <code title="">Ubreve;</code> </td> <td> U+0016C </td> <td> <span>&#364;</span> </td> <tr><td> <code title="">Ucirc;</code> </td> <td> U+000DB </td> <td> <span>&Ucirc;</span> </td> <tr class=impl><td> <code title="">Ucirc</code> </td> <td> U+000DB </td> <td> <span title="">&Ucirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ucy;</code> </td> <td> U+00423 </td> <td> <span>&#1059;</span> </td> <tr><td> <code title="">Udblac;</code> </td> <td> U+00170 </td> <td> <span>&#368;</span> </td> <tr><td> <code title="">Ufr;</code> </td> <td> U+1D518 </td> <td> <span>&#120088;</span> </td> <tr><td> <code title="">Ugrave;</code> </td> <td> U+000D9 </td> <td> <span>&Ugrave;</span> </td> <tr class=impl><td> <code title="">Ugrave</code> </td> <td> U+000D9 </td> <td> <span title="">&Ugrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Umacr;</code> </td> <td> U+0016A </td> <td> <span>&#362;</span> </td> <tr><td> <code title="">UnderBar;</code> </td> <td> U+0005F </td> <td> <span>_</span> </td> <tr><td> <code title="">UnderBrace;</code> </td> <td> U+023DF </td> <td> <span>&#9183;</span> </td> <tr><td> <code title="">UnderBracket;</code> </td> <td> U+023B5 </td> <td> <span>&#9141;</span> </td> <tr><td> <code title="">UnderParenthesis;</code> </td> <td> U+023DD </td> <td> <span>&#9181;</span> </td> <tr><td> <code title="">Union;</code> </td> <td> U+022C3 </td> <td> <span>&#8899;</span> </td> <tr><td> <code title="">UnionPlus;</code> </td> <td> U+0228E </td> <td> <span>&#8846;</span> </td> <tr><td> <code title="">Uogon;</code> </td> <td> U+00172 </td> <td> <span>&#370;</span> </td> <tr><td> <code title="">Uopf;</code> </td> <td> U+1D54C </td> <td> <span>&#120140;</span> </td> <tr><td> <code title="">UpArrow;</code> </td> <td> U+02191 </td> <td> <span>&uarr;</span> </td> <tr><td> <code title="">UpArrowBar;</code> </td> <td> U+02912 </td> <td> <span>&#10514;</span> </td> <tr><td> <code title="">UpArrowDownArrow;</code> </td> <td> U+021C5 </td> <td> <span>&#8645;</span> </td> <tr><td> <code title="">UpDownArrow;</code> </td> <td> U+02195 </td> <td> <span>&#8597;</span> </td> <tr><td> <code title="">UpEquilibrium;</code> </td> <td> U+0296E </td> <td> <span>&#10606;</span> </td> <tr><td> <code title="">UpTee;</code> </td> <td> U+022A5 </td> <td> <span>&perp;</span> </td> <tr><td> <code title="">UpTeeArrow;</code> </td> <td> U+021A5 </td> <td> <span>&#8613;</span> </td> <tr><td> <code title="">Uparrow;</code> </td> <td> U+021D1 </td> <td> <span>&uArr;</span> </td> <tr><td> <code title="">Updownarrow;</code> </td> <td> U+021D5 </td> <td> <span>&#8661;</span> </td> <tr><td> <code title="">UpperLeftArrow;</code> </td> <td> U+02196 </td> <td> <span>&#8598;</span> </td> <tr><td> <code title="">UpperRightArrow;</code> </td> <td> U+02197 </td> <td> <span>&#8599;</span> </td> <tr><td> <code title="">Upsi;</code> </td> <td> U+003D2 </td> <td> <span>&upsih;</span> </td> <tr><td> <code title="">Upsilon;</code> </td> <td> U+003A5 </td> <td> <span>&Upsilon;</span> </td> <tr><td> <code title="">Uring;</code> </td> <td> U+0016E </td> <td> <span>&#366;</span> </td> <tr><td> <code title="">Uscr;</code> </td> <td> U+1D4B0 </td> <td> <span>&#119984;</span> </td> <tr><td> <code title="">Utilde;</code> </td> <td> U+00168 </td> <td> <span>&#360;</span> </td> <tr><td> <code title="">Uuml;</code> </td> <td> U+000DC </td> <td> <span>&Uuml;</span> </td> <tr class=impl><td> <code title="">Uuml</code> </td> <td> U+000DC </td> <td> <span title="">&Uuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">VDash;</code> </td> <td> U+022AB </td> <td> <span>&#8875;</span> </td> <tr><td> <code title="">Vbar;</code> </td> <td> U+02AEB </td> <td> <span>&#10987;</span> </td> <tr><td> <code title="">Vcy;</code> </td> <td> U+00412 </td> <td> <span>&#1042;</span> </td> <tr><td> <code title="">Vdash;</code> </td> <td> U+022A9 </td> <td> <span>&#8873;</span> </td> <tr><td> <code title="">Vdashl;</code> </td> <td> U+02AE6 </td> <td> <span>&#10982;</span> </td> <tr><td> <code title="">Vee;</code> </td> <td> U+022C1 </td> <td> <span>&#8897;</span> </td> <tr><td> <code title="">Verbar;</code> </td> <td> U+02016 </td> <td> <span>&#8214;</span> </td> <tr><td> <code title="">Vert;</code> </td> <td> U+02016 </td> <td> <span>&#8214;</span> </td> <tr><td> <code title="">VerticalBar;</code> </td> <td> U+02223 </td> <td> <span>&#8739;</span> </td> <tr><td> <code title="">VerticalLine;</code> </td> <td> U+0007C </td> <td> <span>|</span> </td> <tr><td> <code title="">VerticalSeparator;</code> </td> <td> U+02758 </td> <td> <span>&#10072;</span> </td> <tr><td> <code title="">VerticalTilde;</code> </td> <td> U+02240 </td> <td> <span>&#8768;</span> </td> <tr><td> <code title="">VeryThinSpace;</code> </td> <td> U+0200A </td> <td> <span>&#8202;</span> </td> <tr><td> <code title="">Vfr;</code> </td> <td> U+1D519 </td> <td> <span>&#120089;</span> </td> <tr><td> <code title="">Vopf;</code> </td> <td> U+1D54D </td> <td> <span>&#120141;</span> </td> <tr><td> <code title="">Vscr;</code> </td> <td> U+1D4B1 </td> <td> <span>&#119985;</span> </td> <tr><td> <code title="">Vvdash;</code> </td> <td> U+022AA </td> <td> <span>&#8874;</span> </td> <tr><td> <code title="">Wcirc;</code> </td> <td> U+00174 </td> <td> <span>&#372;</span> </td> <tr><td> <code title="">Wedge;</code> </td> <td> U+022C0 </td> <td> <span>&#8896;</span> </td> <tr><td> <code title="">Wfr;</code> </td> <td> U+1D51A </td> <td> <span>&#120090;</span> </td> <tr><td> <code title="">Wopf;</code> </td> <td> U+1D54E </td> <td> <span>&#120142;</span> </td> <tr><td> <code title="">Wscr;</code> </td> <td> U+1D4B2 </td> <td> <span>&#119986;</span> </td> <tr><td> <code title="">Xfr;</code> </td> <td> U+1D51B </td> <td> <span>&#120091;</span> </td> <tr><td> <code title="">Xi;</code> </td> <td> U+0039E </td> <td> <span>&Xi;</span> </td> <tr><td> <code title="">Xopf;</code> </td> <td> U+1D54F </td> <td> <span>&#120143;</span> </td> <tr><td> <code title="">Xscr;</code> </td> <td> U+1D4B3 </td> <td> <span>&#119987;</span> </td> <tr><td> <code title="">YAcy;</code> </td> <td> U+0042F </td> <td> <span>&#1071;</span> </td> <tr><td> <code title="">YIcy;</code> </td> <td> U+00407 </td> <td> <span>&#1031;</span> </td> <tr><td> <code title="">YUcy;</code> </td> <td> U+0042E </td> <td> <span>&#1070;</span> </td> <tr><td> <code title="">Yacute;</code> </td> <td> U+000DD </td> <td> <span>&Yacute;</span> </td> <tr class=impl><td> <code title="">Yacute</code> </td> <td> U+000DD </td> <td> <span title="">&Yacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ycirc;</code> </td> <td> U+00176 </td> <td> <span>&#374;</span> </td> <tr><td> <code title="">Ycy;</code> </td> <td> U+0042B </td> <td> <span>&#1067;</span> </td> <tr><td> <code title="">Yfr;</code> </td> <td> U+1D51C </td> <td> <span>&#120092;</span> </td> <tr><td> <code title="">Yopf;</code> </td> <td> U+1D550 </td> <td> <span>&#120144;</span> </td> <tr><td> <code title="">Yscr;</code> </td> <td> U+1D4B4 </td> <td> <span>&#119988;</span> </td> <tr><td> <code title="">Yuml;</code> </td> <td> U+00178 </td> <td> <span>&Yuml;</span> </td> <tr><td> <code title="">ZHcy;</code> </td> <td> U+00416 </td> <td> <span>&#1046;</span> </td> <tr><td> <code title="">Zacute;</code> </td> <td> U+00179 </td> <td> <span>&#377;</span> </td> <tr><td> <code title="">Zcaron;</code> </td> <td> U+0017D </td> <td> <span>&#381;</span> </td> <tr><td> <code title="">Zcy;</code> </td> <td> U+00417 </td> <td> <span>&#1047;</span> </td> <tr><td> <code title="">Zdot;</code> </td> <td> U+0017B </td> <td> <span>&#379;</span> </td> <tr><td> <code title="">ZeroWidthSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">Zeta;</code> </td> <td> U+00396 </td> <td> <span>&Zeta;</span> </td> <tr><td> <code title="">Zfr;</code> </td> <td> U+02128 </td> <td> <span>&#8488;</span> </td> <tr><td> <code title="">Zopf;</code> </td> <td> U+02124 </td> <td> <span>&#8484;</span> </td> <tr><td> <code title="">Zscr;</code> </td> <td> U+1D4B5 </td> <td> <span>&#119989;</span> </td> <tr><td> <code title="">aacute;</code> </td> <td> U+000E1 </td> <td> <span>&aacute;</span> </td> <tr class=impl><td> <code title="">aacute</code> </td> <td> U+000E1 </td> <td> <span title="">&aacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">abreve;</code> </td> <td> U+00103 </td> <td> <span>&#259;</span> </td> <tr><td> <code title="">ac;</code> </td> <td> U+0223E </td> <td> <span>&#8766;</span> </td> <tr><td> <code title="">acd;</code> </td> <td> U+0223F </td> <td> <span>&#8767;</span> </td> <tr><td> <code title="">acirc;</code> </td> <td> U+000E2 </td> <td> <span>&acirc;</span> </td> <tr class=impl><td> <code title="">acirc</code> </td> <td> U+000E2 </td> <td> <span title="">&acirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">acute;</code> </td> <td> U+000B4 </td> <td> <span>&acute;</span> </td> <tr class=impl><td> <code title="">acute</code> </td> <td> U+000B4 </td> <td> <span title="">&acute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">acy;</code> </td> <td> U+00430 </td> <td> <span>&#1072;</span> </td> <tr><td> <code title="">aelig;</code> </td> <td> U+000E6 </td> <td> <span>&aelig;</span> </td> <tr class=impl><td> <code title="">aelig</code> </td> <td> U+000E6 </td> <td> <span title="">&aelig;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">af;</code> </td> <td> U+02061 </td> <td> <span>&#8289;</span> </td> <tr><td> <code title="">afr;</code> </td> <td> U+1D51E </td> <td> <span>&#120094;</span> </td> <tr><td> <code title="">agrave;</code> </td> <td> U+000E0 </td> <td> <span>&agrave;</span> </td> <tr class=impl><td> <code title="">agrave</code> </td> <td> U+000E0 </td> <td> <span title="">&agrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">alefsym;</code> </td> <td> U+02135 </td> <td> <span>&alefsym;</span> </td> <tr><td> <code title="">aleph;</code> </td> <td> U+02135 </td> <td> <span>&alefsym;</span> </td> <tr><td> <code title="">alpha;</code> </td> <td> U+003B1 </td> <td> <span>&alpha;</span> </td> <tr><td> <code title="">amacr;</code> </td> <td> U+00101 </td> <td> <span>&#257;</span> </td> <tr><td> <code title="">amalg;</code> </td> <td> U+02A3F </td> <td> <span>&#10815;</span> </td> <tr><td> <code title="">amp;</code> </td> <td> U+00026 </td> <td> <span>&amp;</span> </td> <tr class=impl><td> <code title="">amp</code> </td> <td> U+00026 </td> <td> <span title="">&amp;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">and;</code> </td> <td> U+02227 </td> <td> <span>&and;</span> </td> <tr><td> <code title="">andand;</code> </td> <td> U+02A55 </td> <td> <span>&#10837;</span> </td> <tr><td> <code title="">andd;</code> </td> <td> U+02A5C </td> <td> <span>&#10844;</span> </td> <tr><td> <code title="">andslope;</code> </td> <td> U+02A58 </td> <td> <span>&#10840;</span> </td> <tr><td> <code title="">andv;</code> </td> <td> U+02A5A </td> <td> <span>&#10842;</span> </td> <tr><td> <code title="">ang;</code> </td> <td> U+02220 </td> <td> <span>&ang;</span> </td> <tr><td> <code title="">ange;</code> </td> <td> U+029A4 </td> <td> <span>&#10660;</span> </td> <tr><td> <code title="">angle;</code> </td> <td> U+02220 </td> <td> <span>&ang;</span> </td> <tr><td> <code title="">angmsd;</code> </td> <td> U+02221 </td> <td> <span>&#8737;</span> </td> <tr><td> <code title="">angmsdaa;</code> </td> <td> U+029A8 </td> <td> <span>&#10664;</span> </td> <tr><td> <code title="">angmsdab;</code> </td> <td> U+029A9 </td> <td> <span>&#10665;</span> </td> <tr><td> <code title="">angmsdac;</code> </td> <td> U+029AA </td> <td> <span>&#10666;</span> </td> <tr><td> <code title="">angmsdad;</code> </td> <td> U+029AB </td> <td> <span>&#10667;</span> </td> <tr><td> <code title="">angmsdae;</code> </td> <td> U+029AC </td> <td> <span>&#10668;</span> </td> <tr><td> <code title="">angmsdaf;</code> </td> <td> U+029AD </td> <td> <span>&#10669;</span> </td> <tr><td> <code title="">angmsdag;</code> </td> <td> U+029AE </td> <td> <span>&#10670;</span> </td> <tr><td> <code title="">angmsdah;</code> </td> <td> U+029AF </td> <td> <span>&#10671;</span> </td> <tr><td> <code title="">angrt;</code> </td> <td> U+0221F </td> <td> <span>&#8735;</span> </td> <tr><td> <code title="">angrtvb;</code> </td> <td> U+022BE </td> <td> <span>&#8894;</span> </td> <tr><td> <code title="">angrtvbd;</code> </td> <td> U+0299D </td> <td> <span>&#10653;</span> </td> <tr><td> <code title="">angsph;</code> </td> <td> U+02222 </td> <td> <span>&#8738;</span> </td> <tr><td> <code title="">angst;</code> </td> <td> U+000C5 </td> <td> <span>&Aring;</span> </td> <tr><td> <code title="">angzarr;</code> </td> <td> U+0237C </td> <td> <span>&#9084;</span> </td> <tr><td> <code title="">aogon;</code> </td> <td> U+00105 </td> <td> <span>&#261;</span> </td> <tr><td> <code title="">aopf;</code> </td> <td> U+1D552 </td> <td> <span>&#120146;</span> </td> <tr><td> <code title="">ap;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">apE;</code> </td> <td> U+02A70 </td> <td> <span>&#10864;</span> </td> <tr><td> <code title="">apacir;</code> </td> <td> U+02A6F </td> <td> <span>&#10863;</span> </td> <tr><td> <code title="">ape;</code> </td> <td> U+0224A </td> <td> <span>&#8778;</span> </td> <tr><td> <code title="">apid;</code> </td> <td> U+0224B </td> <td> <span>&#8779;</span> </td> <tr><td> <code title="">apos;</code> </td> <td> U+00027 </td> <td> <span>'</span> </td> <tr><td> <code title="">approx;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">approxeq;</code> </td> <td> U+0224A </td> <td> <span>&#8778;</span> </td> <tr><td> <code title="">aring;</code> </td> <td> U+000E5 </td> <td> <span>&aring;</span> </td> <tr class=impl><td> <code title="">aring</code> </td> <td> U+000E5 </td> <td> <span title="">&aring;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ascr;</code> </td> <td> U+1D4B6 </td> <td> <span>&#119990;</span> </td> <tr><td> <code title="">ast;</code> </td> <td> U+0002A </td> <td> <span>*</span> </td> <tr><td> <code title="">asymp;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">asympeq;</code> </td> <td> U+0224D </td> <td> <span>&#8781;</span> </td> <tr><td> <code title="">atilde;</code> </td> <td> U+000E3 </td> <td> <span>&atilde;</span> </td> <tr class=impl><td> <code title="">atilde</code> </td> <td> U+000E3 </td> <td> <span title="">&atilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">auml;</code> </td> <td> U+000E4 </td> <td> <span>&auml;</span> </td> <tr class=impl><td> <code title="">auml</code> </td> <td> U+000E4 </td> <td> <span title="">&auml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">awconint;</code> </td> <td> U+02233 </td> <td> <span>&#8755;</span> </td> <tr><td> <code title="">awint;</code> </td> <td> U+02A11 </td> <td> <span>&#10769;</span> </td> <tr><td> <code title="">bNot;</code> </td> <td> U+02AED </td> <td> <span>&#10989;</span> </td> <tr><td> <code title="">backcong;</code> </td> <td> U+0224C </td> <td> <span>&#8780;</span> </td> <tr><td> <code title="">backepsilon;</code> </td> <td> U+003F6 </td> <td> <span>&#1014;</span> </td> <tr><td> <code title="">backprime;</code> </td> <td> U+02035 </td> <td> <span>&#8245;</span> </td> <tr><td> <code title="">backsim;</code> </td> <td> U+0223D </td> <td> <span>&#8765;</span> </td> <tr><td> <code title="">backsimeq;</code> </td> <td> U+022CD </td> <td> <span>&#8909;</span> </td> <tr><td> <code title="">barvee;</code> </td> <td> U+022BD </td> <td> <span>&#8893;</span> </td> <tr><td> <code title="">barwed;</code> </td> <td> U+02305 </td> <td> <span>&#8965;</span> </td> <tr><td> <code title="">barwedge;</code> </td> <td> U+02305 </td> <td> <span>&#8965;</span> </td> <tr><td> <code title="">bbrk;</code> </td> <td> U+023B5 </td> <td> <span>&#9141;</span> </td> <tr><td> <code title="">bbrktbrk;</code> </td> <td> U+023B6 </td> <td> <span>&#9142;</span> </td> <tr><td> <code title="">bcong;</code> </td> <td> U+0224C </td> <td> <span>&#8780;</span> </td> <tr><td> <code title="">bcy;</code> </td> <td> U+00431 </td> <td> <span>&#1073;</span> </td> <tr><td> <code title="">bdquo;</code> </td> <td> U+0201E </td> <td> <span>&bdquo;</span> </td> <tr><td> <code title="">becaus;</code> </td> <td> U+02235 </td> <td> <span>&#8757;</span> </td> <tr><td> <code title="">because;</code> </td> <td> U+02235 </td> <td> <span>&#8757;</span> </td> <tr><td> <code title="">bemptyv;</code> </td> <td> U+029B0 </td> <td> <span>&#10672;</span> </td> <tr><td> <code title="">bepsi;</code> </td> <td> U+003F6 </td> <td> <span>&#1014;</span> </td> <tr><td> <code title="">bernou;</code> </td> <td> U+0212C </td> <td> <span>&#8492;</span> </td> <tr><td> <code title="">beta;</code> </td> <td> U+003B2 </td> <td> <span>&beta;</span> </td> <tr><td> <code title="">beth;</code> </td> <td> U+02136 </td> <td> <span>&#8502;</span> </td> <tr><td> <code title="">between;</code> </td> <td> U+0226C </td> <td> <span>&#8812;</span> </td> <tr><td> <code title="">bfr;</code> </td> <td> U+1D51F </td> <td> <span>&#120095;</span> </td> <tr><td> <code title="">bigcap;</code> </td> <td> U+022C2 </td> <td> <span>&#8898;</span> </td> <tr><td> <code title="">bigcirc;</code> </td> <td> U+025EF </td> <td> <span>&#9711;</span> </td> <tr><td> <code title="">bigcup;</code> </td> <td> U+022C3 </td> <td> <span>&#8899;</span> </td> <tr><td> <code title="">bigodot;</code> </td> <td> U+02A00 </td> <td> <span>&#10752;</span> </td> <tr><td> <code title="">bigoplus;</code> </td> <td> U+02A01 </td> <td> <span>&#10753;</span> </td> <tr><td> <code title="">bigotimes;</code> </td> <td> U+02A02 </td> <td> <span>&#10754;</span> </td> <tr><td> <code title="">bigsqcup;</code> </td> <td> U+02A06 </td> <td> <span>&#10758;</span> </td> <tr><td> <code title="">bigstar;</code> </td> <td> U+02605 </td> <td> <span>&#9733;</span> </td> <tr><td> <code title="">bigtriangledown;</code> </td> <td> U+025BD </td> <td> <span>&#9661;</span> </td> <tr><td> <code title="">bigtriangleup;</code> </td> <td> U+025B3 </td> <td> <span>&#9651;</span> </td> <tr><td> <code title="">biguplus;</code> </td> <td> U+02A04 </td> <td> <span>&#10756;</span> </td> <tr><td> <code title="">bigvee;</code> </td> <td> U+022C1 </td> <td> <span>&#8897;</span> </td> <tr><td> <code title="">bigwedge;</code> </td> <td> U+022C0 </td> <td> <span>&#8896;</span> </td> <tr><td> <code title="">bkarow;</code> </td> <td> U+0290D </td> <td> <span>&#10509;</span> </td> <tr><td> <code title="">blacklozenge;</code> </td> <td> U+029EB </td> <td> <span>&#10731;</span> </td> <tr><td> <code title="">blacksquare;</code> </td> <td> U+025AA </td> <td> <span>&#9642;</span> </td> <tr><td> <code title="">blacktriangle;</code> </td> <td> U+025B4 </td> <td> <span>&#9652;</span> </td> <tr><td> <code title="">blacktriangledown;</code> </td> <td> U+025BE </td> <td> <span>&#9662;</span> </td> <tr><td> <code title="">blacktriangleleft;</code> </td> <td> U+025C2 </td> <td> <span>&#9666;</span> </td> <tr><td> <code title="">blacktriangleright;</code> </td> <td> U+025B8 </td> <td> <span>&#9656;</span> </td> <tr><td> <code title="">blank;</code> </td> <td> U+02423 </td> <td> <span>&#9251;</span> </td> <tr><td> <code title="">blk12;</code> </td> <td> U+02592 </td> <td> <span>&#9618;</span> </td> <tr><td> <code title="">blk14;</code> </td> <td> U+02591 </td> <td> <span>&#9617;</span> </td> <tr><td> <code title="">blk34;</code> </td> <td> U+02593 </td> <td> <span>&#9619;</span> </td> <tr><td> <code title="">block;</code> </td> <td> U+02588 </td> <td> <span>&#9608;</span> </td> <tr><td> <code title="">bnot;</code> </td> <td> U+02310 </td> <td> <span>&#8976;</span> </td> <tr><td> <code title="">bopf;</code> </td> <td> U+1D553 </td> <td> <span>&#120147;</span> </td> <tr><td> <code title="">bot;</code> </td> <td> U+022A5 </td> <td> <span>&perp;</span> </td> <tr><td> <code title="">bottom;</code> </td> <td> U+022A5 </td> <td> <span>&perp;</span> </td> <tr><td> <code title="">bowtie;</code> </td> <td> U+022C8 </td> <td> <span>&#8904;</span> </td> <tr><td> <code title="">boxDL;</code> </td> <td> U+02557 </td> <td> <span>&#9559;</span> </td> <tr><td> <code title="">boxDR;</code> </td> <td> U+02554 </td> <td> <span>&#9556;</span> </td> <tr><td> <code title="">boxDl;</code> </td> <td> U+02556 </td> <td> <span>&#9558;</span> </td> <tr><td> <code title="">boxDr;</code> </td> <td> U+02553 </td> <td> <span>&#9555;</span> </td> <tr><td> <code title="">boxH;</code> </td> <td> U+02550 </td> <td> <span>&#9552;</span> </td> <tr><td> <code title="">boxHD;</code> </td> <td> U+02566 </td> <td> <span>&#9574;</span> </td> <tr><td> <code title="">boxHU;</code> </td> <td> U+02569 </td> <td> <span>&#9577;</span> </td> <tr><td> <code title="">boxHd;</code> </td> <td> U+02564 </td> <td> <span>&#9572;</span> </td> <tr><td> <code title="">boxHu;</code> </td> <td> U+02567 </td> <td> <span>&#9575;</span> </td> <tr><td> <code title="">boxUL;</code> </td> <td> U+0255D </td> <td> <span>&#9565;</span> </td> <tr><td> <code title="">boxUR;</code> </td> <td> U+0255A </td> <td> <span>&#9562;</span> </td> <tr><td> <code title="">boxUl;</code> </td> <td> U+0255C </td> <td> <span>&#9564;</span> </td> <tr><td> <code title="">boxUr;</code> </td> <td> U+02559 </td> <td> <span>&#9561;</span> </td> <tr><td> <code title="">boxV;</code> </td> <td> U+02551 </td> <td> <span>&#9553;</span> </td> <tr><td> <code title="">boxVH;</code> </td> <td> U+0256C </td> <td> <span>&#9580;</span> </td> <tr><td> <code title="">boxVL;</code> </td> <td> U+02563 </td> <td> <span>&#9571;</span> </td> <tr><td> <code title="">boxVR;</code> </td> <td> U+02560 </td> <td> <span>&#9568;</span> </td> <tr><td> <code title="">boxVh;</code> </td> <td> U+0256B </td> <td> <span>&#9579;</span> </td> <tr><td> <code title="">boxVl;</code> </td> <td> U+02562 </td> <td> <span>&#9570;</span> </td> <tr><td> <code title="">boxVr;</code> </td> <td> U+0255F </td> <td> <span>&#9567;</span> </td> <tr><td> <code title="">boxbox;</code> </td> <td> U+029C9 </td> <td> <span>&#10697;</span> </td> <tr><td> <code title="">boxdL;</code> </td> <td> U+02555 </td> <td> <span>&#9557;</span> </td> <tr><td> <code title="">boxdR;</code> </td> <td> U+02552 </td> <td> <span>&#9554;</span> </td> <tr><td> <code title="">boxdl;</code> </td> <td> U+02510 </td> <td> <span>&#9488;</span> </td> <tr><td> <code title="">boxdr;</code> </td> <td> U+0250C </td> <td> <span>&#9484;</span> </td> <tr><td> <code title="">boxh;</code> </td> <td> U+02500 </td> <td> <span>&#9472;</span> </td> <tr><td> <code title="">boxhD;</code> </td> <td> U+02565 </td> <td> <span>&#9573;</span> </td> <tr><td> <code title="">boxhU;</code> </td> <td> U+02568 </td> <td> <span>&#9576;</span> </td> <tr><td> <code title="">boxhd;</code> </td> <td> U+0252C </td> <td> <span>&#9516;</span> </td> <tr><td> <code title="">boxhu;</code> </td> <td> U+02534 </td> <td> <span>&#9524;</span> </td> <tr><td> <code title="">boxminus;</code> </td> <td> U+0229F </td> <td> <span>&#8863;</span> </td> <tr><td> <code title="">boxplus;</code> </td> <td> U+0229E </td> <td> <span>&#8862;</span> </td> <tr><td> <code title="">boxtimes;</code> </td> <td> U+022A0 </td> <td> <span>&#8864;</span> </td> <tr><td> <code title="">boxuL;</code> </td> <td> U+0255B </td> <td> <span>&#9563;</span> </td> <tr><td> <code title="">boxuR;</code> </td> <td> U+02558 </td> <td> <span>&#9560;</span> </td> <tr><td> <code title="">boxul;</code> </td> <td> U+02518 </td> <td> <span>&#9496;</span> </td> <tr><td> <code title="">boxur;</code> </td> <td> U+02514 </td> <td> <span>&#9492;</span> </td> <tr><td> <code title="">boxv;</code> </td> <td> U+02502 </td> <td> <span>&#9474;</span> </td> <tr><td> <code title="">boxvH;</code> </td> <td> U+0256A </td> <td> <span>&#9578;</span> </td> <tr><td> <code title="">boxvL;</code> </td> <td> U+02561 </td> <td> <span>&#9569;</span> </td> <tr><td> <code title="">boxvR;</code> </td> <td> U+0255E </td> <td> <span>&#9566;</span> </td> <tr><td> <code title="">boxvh;</code> </td> <td> U+0253C </td> <td> <span>&#9532;</span> </td> <tr><td> <code title="">boxvl;</code> </td> <td> U+02524 </td> <td> <span>&#9508;</span> </td> <tr><td> <code title="">boxvr;</code> </td> <td> U+0251C </td> <td> <span>&#9500;</span> </td> <tr><td> <code title="">bprime;</code> </td> <td> U+02035 </td> <td> <span>&#8245;</span> </td> <tr><td> <code title="">breve;</code> </td> <td> U+002D8 </td> <td> <span>&#728;</span> </td> <tr><td> <code title="">brvbar;</code> </td> <td> U+000A6 </td> <td> <span>&brvbar;</span> </td> <tr class=impl><td> <code title="">brvbar</code> </td> <td> U+000A6 </td> <td> <span title="">&brvbar;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">bscr;</code> </td> <td> U+1D4B7 </td> <td> <span>&#119991;</span> </td> <tr><td> <code title="">bsemi;</code> </td> <td> U+0204F </td> <td> <span>&#8271;</span> </td> <tr><td> <code title="">bsim;</code> </td> <td> U+0223D </td> <td> <span>&#8765;</span> </td> <tr><td> <code title="">bsime;</code> </td> <td> U+022CD </td> <td> <span>&#8909;</span> </td> <tr><td> <code title="">bsol;</code> </td> <td> U+0005C </td> <td> <span>\</span> </td> <tr><td> <code title="">bsolb;</code> </td> <td> U+029C5 </td> <td> <span>&#10693;</span> </td> <tr><td> <code title="">bsolhsub;</code> </td> <td> U+027C8 </td> <td> <span>&#10184;</span> </td> <tr><td> <code title="">bull;</code> </td> <td> U+02022 </td> <td> <span>&bull;</span> </td> <tr><td> <code title="">bullet;</code> </td> <td> U+02022 </td> <td> <span>&bull;</span> </td> <tr><td> <code title="">bump;</code> </td> <td> U+0224E </td> <td> <span>&#8782;</span> </td> <tr><td> <code title="">bumpE;</code> </td> <td> U+02AAE </td> <td> <span>&#10926;</span> </td> <tr><td> <code title="">bumpe;</code> </td> <td> U+0224F </td> <td> <span>&#8783;</span> </td> <tr><td> <code title="">bumpeq;</code> </td> <td> U+0224F </td> <td> <span>&#8783;</span> </td> <tr><td> <code title="">cacute;</code> </td> <td> U+00107 </td> <td> <span>&#263;</span> </td> <tr><td> <code title="">cap;</code> </td> <td> U+02229 </td> <td> <span>&cap;</span> </td> <tr><td> <code title="">capand;</code> </td> <td> U+02A44 </td> <td> <span>&#10820;</span> </td> <tr><td> <code title="">capbrcup;</code> </td> <td> U+02A49 </td> <td> <span>&#10825;</span> </td> <tr><td> <code title="">capcap;</code> </td> <td> U+02A4B </td> <td> <span>&#10827;</span> </td> <tr><td> <code title="">capcup;</code> </td> <td> U+02A47 </td> <td> <span>&#10823;</span> </td> <tr><td> <code title="">capdot;</code> </td> <td> U+02A40 </td> <td> <span>&#10816;</span> </td> <tr><td> <code title="">caret;</code> </td> <td> U+02041 </td> <td> <span>&#8257;</span> </td> <tr><td> <code title="">caron;</code> </td> <td> U+002C7 </td> <td> <span>&#711;</span> </td> <tr><td> <code title="">ccaps;</code> </td> <td> U+02A4D </td> <td> <span>&#10829;</span> </td> <tr><td> <code title="">ccaron;</code> </td> <td> U+0010D </td> <td> <span>&#269;</span> </td> <tr><td> <code title="">ccedil;</code> </td> <td> U+000E7 </td> <td> <span>&ccedil;</span> </td> <tr class=impl><td> <code title="">ccedil</code> </td> <td> U+000E7 </td> <td> <span title="">&ccedil;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ccirc;</code> </td> <td> U+00109 </td> <td> <span>&#265;</span> </td> <tr><td> <code title="">ccups;</code> </td> <td> U+02A4C </td> <td> <span>&#10828;</span> </td> <tr><td> <code title="">ccupssm;</code> </td> <td> U+02A50 </td> <td> <span>&#10832;</span> </td> <tr><td> <code title="">cdot;</code> </td> <td> U+0010B </td> <td> <span>&#267;</span> </td> <tr><td> <code title="">cedil;</code> </td> <td> U+000B8 </td> <td> <span>&cedil;</span> </td> <tr class=impl><td> <code title="">cedil</code> </td> <td> U+000B8 </td> <td> <span title="">&cedil;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">cemptyv;</code> </td> <td> U+029B2 </td> <td> <span>&#10674;</span> </td> <tr><td> <code title="">cent;</code> </td> <td> U+000A2 </td> <td> <span>&cent;</span> </td> <tr class=impl><td> <code title="">cent</code> </td> <td> U+000A2 </td> <td> <span title="">&cent;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">centerdot;</code> </td> <td> U+000B7 </td> <td> <span>&middot;</span> </td> <tr><td> <code title="">cfr;</code> </td> <td> U+1D520 </td> <td> <span>&#120096;</span> </td> <tr><td> <code title="">chcy;</code> </td> <td> U+00447 </td> <td> <span>&#1095;</span> </td> <tr><td> <code title="">check;</code> </td> <td> U+02713 </td> <td> <span>&#10003;</span> </td> <tr><td> <code title="">checkmark;</code> </td> <td> U+02713 </td> <td> <span>&#10003;</span> </td> <tr><td> <code title="">chi;</code> </td> <td> U+003C7 </td> <td> <span>&chi;</span> </td> <tr><td> <code title="">cir;</code> </td> <td> U+025CB </td> <td> <span>&#9675;</span> </td> <tr><td> <code title="">cirE;</code> </td> <td> U+029C3 </td> <td> <span>&#10691;</span> </td> <tr><td> <code title="">circ;</code> </td> <td> U+002C6 </td> <td> <span>&circ;</span> </td> <tr><td> <code title="">circeq;</code> </td> <td> U+02257 </td> <td> <span>&#8791;</span> </td> <tr><td> <code title="">circlearrowleft;</code> </td> <td> U+021BA </td> <td> <span>&#8634;</span> </td> <tr><td> <code title="">circlearrowright;</code> </td> <td> U+021BB </td> <td> <span>&#8635;</span> </td> <tr><td> <code title="">circledR;</code> </td> <td> U+000AE </td> <td> <span>&reg;</span> </td> <tr><td> <code title="">circledS;</code> </td> <td> U+024C8 </td> <td> <span>&#9416;</span> </td> <tr><td> <code title="">circledast;</code> </td> <td> U+0229B </td> <td> <span>&#8859;</span> </td> <tr><td> <code title="">circledcirc;</code> </td> <td> U+0229A </td> <td> <span>&#8858;</span> </td> <tr><td> <code title="">circleddash;</code> </td> <td> U+0229D </td> <td> <span>&#8861;</span> </td> <tr><td> <code title="">cire;</code> </td> <td> U+02257 </td> <td> <span>&#8791;</span> </td> <tr><td> <code title="">cirfnint;</code> </td> <td> U+02A10 </td> <td> <span>&#10768;</span> </td> <tr><td> <code title="">cirmid;</code> </td> <td> U+02AEF </td> <td> <span>&#10991;</span> </td> <tr><td> <code title="">cirscir;</code> </td> <td> U+029C2 </td> <td> <span>&#10690;</span> </td> <tr><td> <code title="">clubs;</code> </td> <td> U+02663 </td> <td> <span>&clubs;</span> </td> <tr><td> <code title="">clubsuit;</code> </td> <td> U+02663 </td> <td> <span>&clubs;</span> </td> <tr><td> <code title="">colon;</code> </td> <td> U+0003A </td> <td> <span>:</span> </td> <tr><td> <code title="">colone;</code> </td> <td> U+02254 </td> <td> <span>&#8788;</span> </td> <tr><td> <code title="">coloneq;</code> </td> <td> U+02254 </td> <td> <span>&#8788;</span> </td> <tr><td> <code title="">comma;</code> </td> <td> U+0002C </td> <td> <span>,</span> </td> <tr><td> <code title="">commat;</code> </td> <td> U+00040 </td> <td> <span>@</span> </td> <tr><td> <code title="">comp;</code> </td> <td> U+02201 </td> <td> <span>&#8705;</span> </td> <tr><td> <code title="">compfn;</code> </td> <td> U+02218 </td> <td> <span>&#8728;</span> </td> <tr><td> <code title="">complement;</code> </td> <td> U+02201 </td> <td> <span>&#8705;</span> </td> <tr><td> <code title="">complexes;</code> </td> <td> U+02102 </td> <td> <span>&#8450;</span> </td> <tr><td> <code title="">cong;</code> </td> <td> U+02245 </td> <td> <span>&cong;</span> </td> <tr><td> <code title="">congdot;</code> </td> <td> U+02A6D </td> <td> <span>&#10861;</span> </td> <tr><td> <code title="">conint;</code> </td> <td> U+0222E </td> <td> <span>&#8750;</span> </td> <tr><td> <code title="">copf;</code> </td> <td> U+1D554 </td> <td> <span>&#120148;</span> </td> <tr><td> <code title="">coprod;</code> </td> <td> U+02210 </td> <td> <span>&#8720;</span> </td> <tr><td> <code title="">copy;</code> </td> <td> U+000A9 </td> <td> <span>&copy;</span> </td> <tr class=impl><td> <code title="">copy</code> </td> <td> U+000A9 </td> <td> <span title="">&copy;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">copysr;</code> </td> <td> U+02117 </td> <td> <span>&#8471;</span> </td> <tr><td> <code title="">crarr;</code> </td> <td> U+021B5 </td> <td> <span>&crarr;</span> </td> <tr><td> <code title="">cross;</code> </td> <td> U+02717 </td> <td> <span>&#10007;</span> </td> <tr><td> <code title="">cscr;</code> </td> <td> U+1D4B8 </td> <td> <span>&#119992;</span> </td> <tr><td> <code title="">csub;</code> </td> <td> U+02ACF </td> <td> <span>&#10959;</span> </td> <tr><td> <code title="">csube;</code> </td> <td> U+02AD1 </td> <td> <span>&#10961;</span> </td> <tr><td> <code title="">csup;</code> </td> <td> U+02AD0 </td> <td> <span>&#10960;</span> </td> <tr><td> <code title="">csupe;</code> </td> <td> U+02AD2 </td> <td> <span>&#10962;</span> </td> <tr><td> <code title="">ctdot;</code> </td> <td> U+022EF </td> <td> <span>&#8943;</span> </td> <tr><td> <code title="">cudarrl;</code> </td> <td> U+02938 </td> <td> <span>&#10552;</span> </td> <tr><td> <code title="">cudarrr;</code> </td> <td> U+02935 </td> <td> <span>&#10549;</span> </td> <tr><td> <code title="">cuepr;</code> </td> <td> U+022DE </td> <td> <span>&#8926;</span> </td> <tr><td> <code title="">cuesc;</code> </td> <td> U+022DF </td> <td> <span>&#8927;</span> </td> <tr><td> <code title="">cularr;</code> </td> <td> U+021B6 </td> <td> <span>&#8630;</span> </td> <tr><td> <code title="">cularrp;</code> </td> <td> U+0293D </td> <td> <span>&#10557;</span> </td> <tr><td> <code title="">cup;</code> </td> <td> U+0222A </td> <td> <span>&cup;</span> </td> <tr><td> <code title="">cupbrcap;</code> </td> <td> U+02A48 </td> <td> <span>&#10824;</span> </td> <tr><td> <code title="">cupcap;</code> </td> <td> U+02A46 </td> <td> <span>&#10822;</span> </td> <tr><td> <code title="">cupcup;</code> </td> <td> U+02A4A </td> <td> <span>&#10826;</span> </td> <tr><td> <code title="">cupdot;</code> </td> <td> U+0228D </td> <td> <span>&#8845;</span> </td> <tr><td> <code title="">cupor;</code> </td> <td> U+02A45 </td> <td> <span>&#10821;</span> </td> <tr><td> <code title="">curarr;</code> </td> <td> U+021B7 </td> <td> <span>&#8631;</span> </td> <tr><td> <code title="">curarrm;</code> </td> <td> U+0293C </td> <td> <span>&#10556;</span> </td> <tr><td> <code title="">curlyeqprec;</code> </td> <td> U+022DE </td> <td> <span>&#8926;</span> </td> <tr><td> <code title="">curlyeqsucc;</code> </td> <td> U+022DF </td> <td> <span>&#8927;</span> </td> <tr><td> <code title="">curlyvee;</code> </td> <td> U+022CE </td> <td> <span>&#8910;</span> </td> <tr><td> <code title="">curlywedge;</code> </td> <td> U+022CF </td> <td> <span>&#8911;</span> </td> <tr><td> <code title="">curren;</code> </td> <td> U+000A4 </td> <td> <span>&curren;</span> </td> <tr class=impl><td> <code title="">curren</code> </td> <td> U+000A4 </td> <td> <span title="">&curren;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">curvearrowleft;</code> </td> <td> U+021B6 </td> <td> <span>&#8630;</span> </td> <tr><td> <code title="">curvearrowright;</code> </td> <td> U+021B7 </td> <td> <span>&#8631;</span> </td> <tr><td> <code title="">cuvee;</code> </td> <td> U+022CE </td> <td> <span>&#8910;</span> </td> <tr><td> <code title="">cuwed;</code> </td> <td> U+022CF </td> <td> <span>&#8911;</span> </td> <tr><td> <code title="">cwconint;</code> </td> <td> U+02232 </td> <td> <span>&#8754;</span> </td> <tr><td> <code title="">cwint;</code> </td> <td> U+02231 </td> <td> <span>&#8753;</span> </td> <tr><td> <code title="">cylcty;</code> </td> <td> U+0232D </td> <td> <span>&#9005;</span> </td> <tr><td> <code title="">dArr;</code> </td> <td> U+021D3 </td> <td> <span>&dArr;</span> </td> <tr><td> <code title="">dHar;</code> </td> <td> U+02965 </td> <td> <span>&#10597;</span> </td> <tr><td> <code title="">dagger;</code> </td> <td> U+02020 </td> <td> <span>&dagger;</span> </td> <tr><td> <code title="">daleth;</code> </td> <td> U+02138 </td> <td> <span>&#8504;</span> </td> <tr><td> <code title="">darr;</code> </td> <td> U+02193 </td> <td> <span>&darr;</span> </td> <tr><td> <code title="">dash;</code> </td> <td> U+02010 </td> <td> <span>&#8208;</span> </td> <tr><td> <code title="">dashv;</code> </td> <td> U+022A3 </td> <td> <span>&#8867;</span> </td> <tr><td> <code title="">dbkarow;</code> </td> <td> U+0290F </td> <td> <span>&#10511;</span> </td> <tr><td> <code title="">dblac;</code> </td> <td> U+002DD </td> <td> <span>&#733;</span> </td> <tr><td> <code title="">dcaron;</code> </td> <td> U+0010F </td> <td> <span>&#271;</span> </td> <tr><td> <code title="">dcy;</code> </td> <td> U+00434 </td> <td> <span>&#1076;</span> </td> <tr><td> <code title="">dd;</code> </td> <td> U+02146 </td> <td> <span>&#8518;</span> </td> <tr><td> <code title="">ddagger;</code> </td> <td> U+02021 </td> <td> <span>&Dagger;</span> </td> <tr><td> <code title="">ddarr;</code> </td> <td> U+021CA </td> <td> <span>&#8650;</span> </td> <tr><td> <code title="">ddotseq;</code> </td> <td> U+02A77 </td> <td> <span>&#10871;</span> </td> <tr><td> <code title="">deg;</code> </td> <td> U+000B0 </td> <td> <span>&deg;</span> </td> <tr class=impl><td> <code title="">deg</code> </td> <td> U+000B0 </td> <td> <span title="">&deg;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">delta;</code> </td> <td> U+003B4 </td> <td> <span>&delta;</span> </td> <tr><td> <code title="">demptyv;</code> </td> <td> U+029B1 </td> <td> <span>&#10673;</span> </td> <tr><td> <code title="">dfisht;</code> </td> <td> U+0297F </td> <td> <span>&#10623;</span> </td> <tr><td> <code title="">dfr;</code> </td> <td> U+1D521 </td> <td> <span>&#120097;</span> </td> <tr><td> <code title="">dharl;</code> </td> <td> U+021C3 </td> <td> <span>&#8643;</span> </td> <tr><td> <code title="">dharr;</code> </td> <td> U+021C2 </td> <td> <span>&#8642;</span> </td> <tr><td> <code title="">diam;</code> </td> <td> U+022C4 </td> <td> <span>&#8900;</span> </td> <tr><td> <code title="">diamond;</code> </td> <td> U+022C4 </td> <td> <span>&#8900;</span> </td> <tr><td> <code title="">diamondsuit;</code> </td> <td> U+02666 </td> <td> <span>&diams;</span> </td> <tr><td> <code title="">diams;</code> </td> <td> U+02666 </td> <td> <span>&diams;</span> </td> <tr><td> <code title="">die;</code> </td> <td> U+000A8 </td> <td> <span>&uml;</span> </td> <tr><td> <code title="">digamma;</code> </td> <td> U+003DD </td> <td> <span>&#989;</span> </td> <tr><td> <code title="">disin;</code> </td> <td> U+022F2 </td> <td> <span>&#8946;</span> </td> <tr><td> <code title="">div;</code> </td> <td> U+000F7 </td> <td> <span>&divide;</span> </td> <tr><td> <code title="">divide;</code> </td> <td> U+000F7 </td> <td> <span>&divide;</span> </td> <tr class=impl><td> <code title="">divide</code> </td> <td> U+000F7 </td> <td> <span title="">&divide;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">divideontimes;</code> </td> <td> U+022C7 </td> <td> <span>&#8903;</span> </td> <tr><td> <code title="">divonx;</code> </td> <td> U+022C7 </td> <td> <span>&#8903;</span> </td> <tr><td> <code title="">djcy;</code> </td> <td> U+00452 </td> <td> <span>&#1106;</span> </td> <tr><td> <code title="">dlcorn;</code> </td> <td> U+0231E </td> <td> <span>&#8990;</span> </td> <tr><td> <code title="">dlcrop;</code> </td> <td> U+0230D </td> <td> <span>&#8973;</span> </td> <tr><td> <code title="">dollar;</code> </td> <td> U+00024 </td> <td> <span>$</span> </td> <tr><td> <code title="">dopf;</code> </td> <td> U+1D555 </td> <td> <span>&#120149;</span> </td> <tr><td> <code title="">dot;</code> </td> <td> U+002D9 </td> <td> <span>&#729;</span> </td> <tr><td> <code title="">doteq;</code> </td> <td> U+02250 </td> <td> <span>&#8784;</span> </td> <tr><td> <code title="">doteqdot;</code> </td> <td> U+02251 </td> <td> <span>&#8785;</span> </td> <tr><td> <code title="">dotminus;</code> </td> <td> U+02238 </td> <td> <span>&#8760;</span> </td> <tr><td> <code title="">dotplus;</code> </td> <td> U+02214 </td> <td> <span>&#8724;</span> </td> <tr><td> <code title="">dotsquare;</code> </td> <td> U+022A1 </td> <td> <span>&#8865;</span> </td> <tr><td> <code title="">doublebarwedge;</code> </td> <td> U+02306 </td> <td> <span>&#8966;</span> </td> <tr><td> <code title="">downarrow;</code> </td> <td> U+02193 </td> <td> <span>&darr;</span> </td> <tr><td> <code title="">downdownarrows;</code> </td> <td> U+021CA </td> <td> <span>&#8650;</span> </td> <tr><td> <code title="">downharpoonleft;</code> </td> <td> U+021C3 </td> <td> <span>&#8643;</span> </td> <tr><td> <code title="">downharpoonright;</code> </td> <td> U+021C2 </td> <td> <span>&#8642;</span> </td> <tr><td> <code title="">drbkarow;</code> </td> <td> U+02910 </td> <td> <span>&#10512;</span> </td> <tr><td> <code title="">drcorn;</code> </td> <td> U+0231F </td> <td> <span>&#8991;</span> </td> <tr><td> <code title="">drcrop;</code> </td> <td> U+0230C </td> <td> <span>&#8972;</span> </td> <tr><td> <code title="">dscr;</code> </td> <td> U+1D4B9 </td> <td> <span>&#119993;</span> </td> <tr><td> <code title="">dscy;</code> </td> <td> U+00455 </td> <td> <span>&#1109;</span> </td> <tr><td> <code title="">dsol;</code> </td> <td> U+029F6 </td> <td> <span>&#10742;</span> </td> <tr><td> <code title="">dstrok;</code> </td> <td> U+00111 </td> <td> <span>&#273;</span> </td> <tr><td> <code title="">dtdot;</code> </td> <td> U+022F1 </td> <td> <span>&#8945;</span> </td> <tr><td> <code title="">dtri;</code> </td> <td> U+025BF </td> <td> <span>&#9663;</span> </td> <tr><td> <code title="">dtrif;</code> </td> <td> U+025BE </td> <td> <span>&#9662;</span> </td> <tr><td> <code title="">duarr;</code> </td> <td> U+021F5 </td> <td> <span>&#8693;</span> </td> <tr><td> <code title="">duhar;</code> </td> <td> U+0296F </td> <td> <span>&#10607;</span> </td> <tr><td> <code title="">dwangle;</code> </td> <td> U+029A6 </td> <td> <span>&#10662;</span> </td> <tr><td> <code title="">dzcy;</code> </td> <td> U+0045F </td> <td> <span>&#1119;</span> </td> <tr><td> <code title="">dzigrarr;</code> </td> <td> U+027FF </td> <td> <span>&#10239;</span> </td> <tr><td> <code title="">eDDot;</code> </td> <td> U+02A77 </td> <td> <span>&#10871;</span> </td> <tr><td> <code title="">eDot;</code> </td> <td> U+02251 </td> <td> <span>&#8785;</span> </td> <tr><td> <code title="">eacute;</code> </td> <td> U+000E9 </td> <td> <span>&eacute;</span> </td> <tr class=impl><td> <code title="">eacute</code> </td> <td> U+000E9 </td> <td> <span title="">&eacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">easter;</code> </td> <td> U+02A6E </td> <td> <span>&#10862;</span> </td> <tr><td> <code title="">ecaron;</code> </td> <td> U+0011B </td> <td> <span>&#283;</span> </td> <tr><td> <code title="">ecir;</code> </td> <td> U+02256 </td> <td> <span>&#8790;</span> </td> <tr><td> <code title="">ecirc;</code> </td> <td> U+000EA </td> <td> <span>&ecirc;</span> </td> <tr class=impl><td> <code title="">ecirc</code> </td> <td> U+000EA </td> <td> <span title="">&ecirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ecolon;</code> </td> <td> U+02255 </td> <td> <span>&#8789;</span> </td> <tr><td> <code title="">ecy;</code> </td> <td> U+0044D </td> <td> <span>&#1101;</span> </td> <tr><td> <code title="">edot;</code> </td> <td> U+00117 </td> <td> <span>&#279;</span> </td> <tr><td> <code title="">ee;</code> </td> <td> U+02147 </td> <td> <span>&#8519;</span> </td> <tr><td> <code title="">efDot;</code> </td> <td> U+02252 </td> <td> <span>&#8786;</span> </td> <tr><td> <code title="">efr;</code> </td> <td> U+1D522 </td> <td> <span>&#120098;</span> </td> <tr><td> <code title="">eg;</code> </td> <td> U+02A9A </td> <td> <span>&#10906;</span> </td> <tr><td> <code title="">egrave;</code> </td> <td> U+000E8 </td> <td> <span>&egrave;</span> </td> <tr class=impl><td> <code title="">egrave</code> </td> <td> U+000E8 </td> <td> <span title="">&egrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">egs;</code> </td> <td> U+02A96 </td> <td> <span>&#10902;</span> </td> <tr><td> <code title="">egsdot;</code> </td> <td> U+02A98 </td> <td> <span>&#10904;</span> </td> <tr><td> <code title="">el;</code> </td> <td> U+02A99 </td> <td> <span>&#10905;</span> </td> <tr><td> <code title="">elinters;</code> </td> <td> U+023E7 </td> <td> <span>&#9191;</span> </td> <tr><td> <code title="">ell;</code> </td> <td> U+02113 </td> <td> <span>&#8467;</span> </td> <tr><td> <code title="">els;</code> </td> <td> U+02A95 </td> <td> <span>&#10901;</span> </td> <tr><td> <code title="">elsdot;</code> </td> <td> U+02A97 </td> <td> <span>&#10903;</span> </td> <tr><td> <code title="">emacr;</code> </td> <td> U+00113 </td> <td> <span>&#275;</span> </td> <tr><td> <code title="">empty;</code> </td> <td> U+02205 </td> <td> <span>&empty;</span> </td> <tr><td> <code title="">emptyset;</code> </td> <td> U+02205 </td> <td> <span>&empty;</span> </td> <tr><td> <code title="">emptyv;</code> </td> <td> U+02205 </td> <td> <span>&empty;</span> </td> <tr><td> <code title="">emsp13;</code> </td> <td> U+02004 </td> <td> <span>&#8196;</span> </td> <tr><td> <code title="">emsp14;</code> </td> <td> U+02005 </td> <td> <span>&#8197;</span> </td> <tr><td> <code title="">emsp;</code> </td> <td> U+02003 </td> <td> <span>&emsp;</span> </td> <tr><td> <code title="">eng;</code> </td> <td> U+0014B </td> <td> <span>&#331;</span> </td> <tr><td> <code title="">ensp;</code> </td> <td> U+02002 </td> <td> <span>&ensp;</span> </td> <tr><td> <code title="">eogon;</code> </td> <td> U+00119 </td> <td> <span>&#281;</span> </td> <tr><td> <code title="">eopf;</code> </td> <td> U+1D556 </td> <td> <span>&#120150;</span> </td> <tr><td> <code title="">epar;</code> </td> <td> U+022D5 </td> <td> <span>&#8917;</span> </td> <tr><td> <code title="">eparsl;</code> </td> <td> U+029E3 </td> <td> <span>&#10723;</span> </td> <tr><td> <code title="">eplus;</code> </td> <td> U+02A71 </td> <td> <span>&#10865;</span> </td> <tr><td> <code title="">epsi;</code> </td> <td> U+003B5 </td> <td> <span>&epsilon;</span> </td> <tr><td> <code title="">epsilon;</code> </td> <td> U+003B5 </td> <td> <span>&epsilon;</span> </td> <tr><td> <code title="">epsiv;</code> </td> <td> U+003F5 </td> <td> <span>&#1013;</span> </td> <tr><td> <code title="">eqcirc;</code> </td> <td> U+02256 </td> <td> <span>&#8790;</span> </td> <tr><td> <code title="">eqcolon;</code> </td> <td> U+02255 </td> <td> <span>&#8789;</span> </td> <tr><td> <code title="">eqsim;</code> </td> <td> U+02242 </td> <td> <span>&#8770;</span> </td> <tr><td> <code title="">eqslantgtr;</code> </td> <td> U+02A96 </td> <td> <span>&#10902;</span> </td> <tr><td> <code title="">eqslantless;</code> </td> <td> U+02A95 </td> <td> <span>&#10901;</span> </td> <tr><td> <code title="">equals;</code> </td> <td> U+0003D </td> <td> <span>=</span> </td> <tr><td> <code title="">equest;</code> </td> <td> U+0225F </td> <td> <span>&#8799;</span> </td> <tr><td> <code title="">equiv;</code> </td> <td> U+02261 </td> <td> <span>&equiv;</span> </td> <tr><td> <code title="">equivDD;</code> </td> <td> U+02A78 </td> <td> <span>&#10872;</span> </td> <tr><td> <code title="">eqvparsl;</code> </td> <td> U+029E5 </td> <td> <span>&#10725;</span> </td> <tr><td> <code title="">erDot;</code> </td> <td> U+02253 </td> <td> <span>&#8787;</span> </td> <tr><td> <code title="">erarr;</code> </td> <td> U+02971 </td> <td> <span>&#10609;</span> </td> <tr><td> <code title="">escr;</code> </td> <td> U+0212F </td> <td> <span>&#8495;</span> </td> <tr><td> <code title="">esdot;</code> </td> <td> U+02250 </td> <td> <span>&#8784;</span> </td> <tr><td> <code title="">esim;</code> </td> <td> U+02242 </td> <td> <span>&#8770;</span> </td> <tr><td> <code title="">eta;</code> </td> <td> U+003B7 </td> <td> <span>&eta;</span> </td> <tr><td> <code title="">eth;</code> </td> <td> U+000F0 </td> <td> <span>&eth;</span> </td> <tr class=impl><td> <code title="">eth</code> </td> <td> U+000F0 </td> <td> <span title="">&eth;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">euml;</code> </td> <td> U+000EB </td> <td> <span>&euml;</span> </td> <tr class=impl><td> <code title="">euml</code> </td> <td> U+000EB </td> <td> <span title="">&euml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">euro;</code> </td> <td> U+020AC </td> <td> <span>&euro;</span> </td> <tr><td> <code title="">excl;</code> </td> <td> U+00021 </td> <td> <span>!</span> </td> <tr><td> <code title="">exist;</code> </td> <td> U+02203 </td> <td> <span>&exist;</span> </td> <tr><td> <code title="">expectation;</code> </td> <td> U+02130 </td> <td> <span>&#8496;</span> </td> <tr><td> <code title="">exponentiale;</code> </td> <td> U+02147 </td> <td> <span>&#8519;</span> </td> <tr><td> <code title="">fallingdotseq;</code> </td> <td> U+02252 </td> <td> <span>&#8786;</span> </td> <tr><td> <code title="">fcy;</code> </td> <td> U+00444 </td> <td> <span>&#1092;</span> </td> <tr><td> <code title="">female;</code> </td> <td> U+02640 </td> <td> <span>&#9792;</span> </td> <tr><td> <code title="">ffilig;</code> </td> <td> U+0FB03 </td> <td> <span>&#64259;</span> </td> <tr><td> <code title="">fflig;</code> </td> <td> U+0FB00 </td> <td> <span>&#64256;</span> </td> <tr><td> <code title="">ffllig;</code> </td> <td> U+0FB04 </td> <td> <span>&#64260;</span> </td> <tr><td> <code title="">ffr;</code> </td> <td> U+1D523 </td> <td> <span>&#120099;</span> </td> <tr><td> <code title="">filig;</code> </td> <td> U+0FB01 </td> <td> <span>&#64257;</span> </td> <tr><td> <code title="">flat;</code> </td> <td> U+0266D </td> <td> <span>&#9837;</span> </td> <tr><td> <code title="">fllig;</code> </td> <td> U+0FB02 </td> <td> <span>&#64258;</span> </td> <tr><td> <code title="">fltns;</code> </td> <td> U+025B1 </td> <td> <span>&#9649;</span> </td> <tr><td> <code title="">fnof;</code> </td> <td> U+00192 </td> <td> <span>&fnof;</span> </td> <tr><td> <code title="">fopf;</code> </td> <td> U+1D557 </td> <td> <span>&#120151;</span> </td> <tr><td> <code title="">forall;</code> </td> <td> U+02200 </td> <td> <span>&forall;</span> </td> <tr><td> <code title="">fork;</code> </td> <td> U+022D4 </td> <td> <span>&#8916;</span> </td> <tr><td> <code title="">forkv;</code> </td> <td> U+02AD9 </td> <td> <span>&#10969;</span> </td> <tr><td> <code title="">fpartint;</code> </td> <td> U+02A0D </td> <td> <span>&#10765;</span> </td> <tr><td> <code title="">frac12;</code> </td> <td> U+000BD </td> <td> <span>&frac12;</span> </td> <tr class=impl><td> <code title="">frac12</code> </td> <td> U+000BD </td> <td> <span title="">&frac12;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">frac13;</code> </td> <td> U+02153 </td> <td> <span>&#8531;</span> </td> <tr><td> <code title="">frac14;</code> </td> <td> U+000BC </td> <td> <span>&frac14;</span> </td> <tr class=impl><td> <code title="">frac14</code> </td> <td> U+000BC </td> <td> <span title="">&frac14;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">frac15;</code> </td> <td> U+02155 </td> <td> <span>&#8533;</span> </td> <tr><td> <code title="">frac16;</code> </td> <td> U+02159 </td> <td> <span>&#8537;</span> </td> <tr><td> <code title="">frac18;</code> </td> <td> U+0215B </td> <td> <span>&#8539;</span> </td> <tr><td> <code title="">frac23;</code> </td> <td> U+02154 </td> <td> <span>&#8532;</span> </td> <tr><td> <code title="">frac25;</code> </td> <td> U+02156 </td> <td> <span>&#8534;</span> </td> <tr><td> <code title="">frac34;</code> </td> <td> U+000BE </td> <td> <span>&frac34;</span> </td> <tr class=impl><td> <code title="">frac34</code> </td> <td> U+000BE </td> <td> <span title="">&frac34;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">frac35;</code> </td> <td> U+02157 </td> <td> <span>&#8535;</span> </td> <tr><td> <code title="">frac38;</code> </td> <td> U+0215C </td> <td> <span>&#8540;</span> </td> <tr><td> <code title="">frac45;</code> </td> <td> U+02158 </td> <td> <span>&#8536;</span> </td> <tr><td> <code title="">frac56;</code> </td> <td> U+0215A </td> <td> <span>&#8538;</span> </td> <tr><td> <code title="">frac58;</code> </td> <td> U+0215D </td> <td> <span>&#8541;</span> </td> <tr><td> <code title="">frac78;</code> </td> <td> U+0215E </td> <td> <span>&#8542;</span> </td> <tr><td> <code title="">frasl;</code> </td> <td> U+02044 </td> <td> <span>&frasl;</span> </td> <tr><td> <code title="">frown;</code> </td> <td> U+02322 </td> <td> <span>&#8994;</span> </td> <tr><td> <code title="">fscr;</code> </td> <td> U+1D4BB </td> <td> <span>&#119995;</span> </td> <tr><td> <code title="">gE;</code> </td> <td> U+02267 </td> <td> <span>&#8807;</span> </td> <tr><td> <code title="">gEl;</code> </td> <td> U+02A8C </td> <td> <span>&#10892;</span> </td> <tr><td> <code title="">gacute;</code> </td> <td> U+001F5 </td> <td> <span>&#501;</span> </td> <tr><td> <code title="">gamma;</code> </td> <td> U+003B3 </td> <td> <span>&gamma;</span> </td> <tr><td> <code title="">gammad;</code> </td> <td> U+003DD </td> <td> <span>&#989;</span> </td> <tr><td> <code title="">gap;</code> </td> <td> U+02A86 </td> <td> <span>&#10886;</span> </td> <tr><td> <code title="">gbreve;</code> </td> <td> U+0011F </td> <td> <span>&#287;</span> </td> <tr><td> <code title="">gcirc;</code> </td> <td> U+0011D </td> <td> <span>&#285;</span> </td> <tr><td> <code title="">gcy;</code> </td> <td> U+00433 </td> <td> <span>&#1075;</span> </td> <tr><td> <code title="">gdot;</code> </td> <td> U+00121 </td> <td> <span>&#289;</span> </td> <tr><td> <code title="">ge;</code> </td> <td> U+02265 </td> <td> <span>&ge;</span> </td> <tr><td> <code title="">gel;</code> </td> <td> U+022DB </td> <td> <span>&#8923;</span> </td> <tr><td> <code title="">geq;</code> </td> <td> U+02265 </td> <td> <span>&ge;</span> </td> <tr><td> <code title="">geqq;</code> </td> <td> U+02267 </td> <td> <span>&#8807;</span> </td> <tr><td> <code title="">geqslant;</code> </td> <td> U+02A7E </td> <td> <span>&#10878;</span> </td> <tr><td> <code title="">ges;</code> </td> <td> U+02A7E </td> <td> <span>&#10878;</span> </td> <tr><td> <code title="">gescc;</code> </td> <td> U+02AA9 </td> <td> <span>&#10921;</span> </td> <tr><td> <code title="">gesdot;</code> </td> <td> U+02A80 </td> <td> <span>&#10880;</span> </td> <tr><td> <code title="">gesdoto;</code> </td> <td> U+02A82 </td> <td> <span>&#10882;</span> </td> <tr><td> <code title="">gesdotol;</code> </td> <td> U+02A84 </td> <td> <span>&#10884;</span> </td> <tr><td> <code title="">gesles;</code> </td> <td> U+02A94 </td> <td> <span>&#10900;</span> </td> <tr><td> <code title="">gfr;</code> </td> <td> U+1D524 </td> <td> <span>&#120100;</span> </td> <tr><td> <code title="">gg;</code> </td> <td> U+0226B </td> <td> <span>&#8811;</span> </td> <tr><td> <code title="">ggg;</code> </td> <td> U+022D9 </td> <td> <span>&#8921;</span> </td> <tr><td> <code title="">gimel;</code> </td> <td> U+02137 </td> <td> <span>&#8503;</span> </td> <tr><td> <code title="">gjcy;</code> </td> <td> U+00453 </td> <td> <span>&#1107;</span> </td> <tr><td> <code title="">gl;</code> </td> <td> U+02277 </td> <td> <span>&#8823;</span> </td> <tr><td> <code title="">glE;</code> </td> <td> U+02A92 </td> <td> <span>&#10898;</span> </td> <tr><td> <code title="">gla;</code> </td> <td> U+02AA5 </td> <td> <span>&#10917;</span> </td> <tr><td> <code title="">glj;</code> </td> <td> U+02AA4 </td> <td> <span>&#10916;</span> </td> <tr><td> <code title="">gnE;</code> </td> <td> U+02269 </td> <td> <span>&#8809;</span> </td> <tr><td> <code title="">gnap;</code> </td> <td> U+02A8A </td> <td> <span>&#10890;</span> </td> <tr><td> <code title="">gnapprox;</code> </td> <td> U+02A8A </td> <td> <span>&#10890;</span> </td> <tr><td> <code title="">gne;</code> </td> <td> U+02A88 </td> <td> <span>&#10888;</span> </td> <tr><td> <code title="">gneq;</code> </td> <td> U+02A88 </td> <td> <span>&#10888;</span> </td> <tr><td> <code title="">gneqq;</code> </td> <td> U+02269 </td> <td> <span>&#8809;</span> </td> <tr><td> <code title="">gnsim;</code> </td> <td> U+022E7 </td> <td> <span>&#8935;</span> </td> <tr><td> <code title="">gopf;</code> </td> <td> U+1D558 </td> <td> <span>&#120152;</span> </td> <tr><td> <code title="">grave;</code> </td> <td> U+00060 </td> <td> <span>`</span> </td> <tr><td> <code title="">gscr;</code> </td> <td> U+0210A </td> <td> <span>&#8458;</span> </td> <tr><td> <code title="">gsim;</code> </td> <td> U+02273 </td> <td> <span>&#8819;</span> </td> <tr><td> <code title="">gsime;</code> </td> <td> U+02A8E </td> <td> <span>&#10894;</span> </td> <tr><td> <code title="">gsiml;</code> </td> <td> U+02A90 </td> <td> <span>&#10896;</span> </td> <tr><td> <code title="">gt;</code> </td> <td> U+0003E </td> <td> <span>&gt;</span> </td> <tr class=impl><td> <code title="">gt</code> </td> <td> U+0003E </td> <td> <span title="">&gt;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">gtcc;</code> </td> <td> U+02AA7 </td> <td> <span>&#10919;</span> </td> <tr><td> <code title="">gtcir;</code> </td> <td> U+02A7A </td> <td> <span>&#10874;</span> </td> <tr><td> <code title="">gtdot;</code> </td> <td> U+022D7 </td> <td> <span>&#8919;</span> </td> <tr><td> <code title="">gtlPar;</code> </td> <td> U+02995 </td> <td> <span>&#10645;</span> </td> <tr><td> <code title="">gtquest;</code> </td> <td> U+02A7C </td> <td> <span>&#10876;</span> </td> <tr><td> <code title="">gtrapprox;</code> </td> <td> U+02A86 </td> <td> <span>&#10886;</span> </td> <tr><td> <code title="">gtrarr;</code> </td> <td> U+02978 </td> <td> <span>&#10616;</span> </td> <tr><td> <code title="">gtrdot;</code> </td> <td> U+022D7 </td> <td> <span>&#8919;</span> </td> <tr><td> <code title="">gtreqless;</code> </td> <td> U+022DB </td> <td> <span>&#8923;</span> </td> <tr><td> <code title="">gtreqqless;</code> </td> <td> U+02A8C </td> <td> <span>&#10892;</span> </td> <tr><td> <code title="">gtrless;</code> </td> <td> U+02277 </td> <td> <span>&#8823;</span> </td> <tr><td> <code title="">gtrsim;</code> </td> <td> U+02273 </td> <td> <span>&#8819;</span> </td> <tr><td> <code title="">hArr;</code> </td> <td> U+021D4 </td> <td> <span>&hArr;</span> </td> <tr><td> <code title="">hairsp;</code> </td> <td> U+0200A </td> <td> <span>&#8202;</span> </td> <tr><td> <code title="">half;</code> </td> <td> U+000BD </td> <td> <span>&frac12;</span> </td> <tr><td> <code title="">hamilt;</code> </td> <td> U+0210B </td> <td> <span>&#8459;</span> </td> <tr><td> <code title="">hardcy;</code> </td> <td> U+0044A </td> <td> <span>&#1098;</span> </td> <tr><td> <code title="">harr;</code> </td> <td> U+02194 </td> <td> <span>&harr;</span> </td> <tr><td> <code title="">harrcir;</code> </td> <td> U+02948 </td> <td> <span>&#10568;</span> </td> <tr><td> <code title="">harrw;</code> </td> <td> U+021AD </td> <td> <span>&#8621;</span> </td> <tr><td> <code title="">hbar;</code> </td> <td> U+0210F </td> <td> <span>&#8463;</span> </td> <tr><td> <code title="">hcirc;</code> </td> <td> U+00125 </td> <td> <span>&#293;</span> </td> <tr><td> <code title="">hearts;</code> </td> <td> U+02665 </td> <td> <span>&hearts;</span> </td> <tr><td> <code title="">heartsuit;</code> </td> <td> U+02665 </td> <td> <span>&hearts;</span> </td> <tr><td> <code title="">hellip;</code> </td> <td> U+02026 </td> <td> <span>&hellip;</span> </td> <tr><td> <code title="">hercon;</code> </td> <td> U+022B9 </td> <td> <span>&#8889;</span> </td> <tr><td> <code title="">hfr;</code> </td> <td> U+1D525 </td> <td> <span>&#120101;</span> </td> <tr><td> <code title="">hksearow;</code> </td> <td> U+02925 </td> <td> <span>&#10533;</span> </td> <tr><td> <code title="">hkswarow;</code> </td> <td> U+02926 </td> <td> <span>&#10534;</span> </td> <tr><td> <code title="">hoarr;</code> </td> <td> U+021FF </td> <td> <span>&#8703;</span> </td> <tr><td> <code title="">homtht;</code> </td> <td> U+0223B </td> <td> <span>&#8763;</span> </td> <tr><td> <code title="">hookleftarrow;</code> </td> <td> U+021A9 </td> <td> <span>&#8617;</span> </td> <tr><td> <code title="">hookrightarrow;</code> </td> <td> U+021AA </td> <td> <span>&#8618;</span> </td> <tr><td> <code title="">hopf;</code> </td> <td> U+1D559 </td> <td> <span>&#120153;</span> </td> <tr><td> <code title="">horbar;</code> </td> <td> U+02015 </td> <td> <span>&#8213;</span> </td> <tr><td> <code title="">hscr;</code> </td> <td> U+1D4BD </td> <td> <span>&#119997;</span> </td> <tr><td> <code title="">hslash;</code> </td> <td> U+0210F </td> <td> <span>&#8463;</span> </td> <tr><td> <code title="">hstrok;</code> </td> <td> U+00127 </td> <td> <span>&#295;</span> </td> <tr><td> <code title="">hybull;</code> </td> <td> U+02043 </td> <td> <span>&#8259;</span> </td> <tr><td> <code title="">hyphen;</code> </td> <td> U+02010 </td> <td> <span>&#8208;</span> </td> <tr><td> <code title="">iacute;</code> </td> <td> U+000ED </td> <td> <span>&iacute;</span> </td> <tr class=impl><td> <code title="">iacute</code> </td> <td> U+000ED </td> <td> <span title="">&iacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ic;</code> </td> <td> U+02063 </td> <td> <span>&#8291;</span> </td> <tr><td> <code title="">icirc;</code> </td> <td> U+000EE </td> <td> <span>&icirc;</span> </td> <tr class=impl><td> <code title="">icirc</code> </td> <td> U+000EE </td> <td> <span title="">&icirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">icy;</code> </td> <td> U+00438 </td> <td> <span>&#1080;</span> </td> <tr><td> <code title="">iecy;</code> </td> <td> U+00435 </td> <td> <span>&#1077;</span> </td> <tr><td> <code title="">iexcl;</code> </td> <td> U+000A1 </td> <td> <span>&iexcl;</span> </td> <tr class=impl><td> <code title="">iexcl</code> </td> <td> U+000A1 </td> <td> <span title="">&iexcl;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">iff;</code> </td> <td> U+021D4 </td> <td> <span>&hArr;</span> </td> <tr><td> <code title="">ifr;</code> </td> <td> U+1D526 </td> <td> <span>&#120102;</span> </td> <tr><td> <code title="">igrave;</code> </td> <td> U+000EC </td> <td> <span>&igrave;</span> </td> <tr class=impl><td> <code title="">igrave</code> </td> <td> U+000EC </td> <td> <span title="">&igrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ii;</code> </td> <td> U+02148 </td> <td> <span>&#8520;</span> </td> <tr><td> <code title="">iiiint;</code> </td> <td> U+02A0C </td> <td> <span>&#10764;</span> </td> <tr><td> <code title="">iiint;</code> </td> <td> U+0222D </td> <td> <span>&#8749;</span> </td> <tr><td> <code title="">iinfin;</code> </td> <td> U+029DC </td> <td> <span>&#10716;</span> </td> <tr><td> <code title="">iiota;</code> </td> <td> U+02129 </td> <td> <span>&#8489;</span> </td> <tr><td> <code title="">ijlig;</code> </td> <td> U+00133 </td> <td> <span>&#307;</span> </td> <tr><td> <code title="">imacr;</code> </td> <td> U+0012B </td> <td> <span>&#299;</span> </td> <tr><td> <code title="">image;</code> </td> <td> U+02111 </td> <td> <span>&image;</span> </td> <tr><td> <code title="">imagline;</code> </td> <td> U+02110 </td> <td> <span>&#8464;</span> </td> <tr><td> <code title="">imagpart;</code> </td> <td> U+02111 </td> <td> <span>&image;</span> </td> <tr><td> <code title="">imath;</code> </td> <td> U+00131 </td> <td> <span>&#305;</span> </td> <tr><td> <code title="">imof;</code> </td> <td> U+022B7 </td> <td> <span>&#8887;</span> </td> <tr><td> <code title="">imped;</code> </td> <td> U+001B5 </td> <td> <span>&#437;</span> </td> <tr><td> <code title="">in;</code> </td> <td> U+02208 </td> <td> <span>&isin;</span> </td> <tr><td> <code title="">incare;</code> </td> <td> U+02105 </td> <td> <span>&#8453;</span> </td> <tr><td> <code title="">infin;</code> </td> <td> U+0221E </td> <td> <span>&infin;</span> </td> <tr><td> <code title="">infintie;</code> </td> <td> U+029DD </td> <td> <span>&#10717;</span> </td> <tr><td> <code title="">inodot;</code> </td> <td> U+00131 </td> <td> <span>&#305;</span> </td> <tr><td> <code title="">int;</code> </td> <td> U+0222B </td> <td> <span>&int;</span> </td> <tr><td> <code title="">intcal;</code> </td> <td> U+022BA </td> <td> <span>&#8890;</span> </td> <tr><td> <code title="">integers;</code> </td> <td> U+02124 </td> <td> <span>&#8484;</span> </td> <tr><td> <code title="">intercal;</code> </td> <td> U+022BA </td> <td> <span>&#8890;</span> </td> <tr><td> <code title="">intlarhk;</code> </td> <td> U+02A17 </td> <td> <span>&#10775;</span> </td> <tr><td> <code title="">intprod;</code> </td> <td> U+02A3C </td> <td> <span>&#10812;</span> </td> <tr><td> <code title="">iocy;</code> </td> <td> U+00451 </td> <td> <span>&#1105;</span> </td> <tr><td> <code title="">iogon;</code> </td> <td> U+0012F </td> <td> <span>&#303;</span> </td> <tr><td> <code title="">iopf;</code> </td> <td> U+1D55A </td> <td> <span>&#120154;</span> </td> <tr><td> <code title="">iota;</code> </td> <td> U+003B9 </td> <td> <span>&iota;</span> </td> <tr><td> <code title="">iprod;</code> </td> <td> U+02A3C </td> <td> <span>&#10812;</span> </td> <tr><td> <code title="">iquest;</code> </td> <td> U+000BF </td> <td> <span>&iquest;</span> </td> <tr class=impl><td> <code title="">iquest</code> </td> <td> U+000BF </td> <td> <span title="">&iquest;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">iscr;</code> </td> <td> U+1D4BE </td> <td> <span>&#119998;</span> </td> <tr><td> <code title="">isin;</code> </td> <td> U+02208 </td> <td> <span>&isin;</span> </td> <tr><td> <code title="">isinE;</code> </td> <td> U+022F9 </td> <td> <span>&#8953;</span> </td> <tr><td> <code title="">isindot;</code> </td> <td> U+022F5 </td> <td> <span>&#8949;</span> </td> <tr><td> <code title="">isins;</code> </td> <td> U+022F4 </td> <td> <span>&#8948;</span> </td> <tr><td> <code title="">isinsv;</code> </td> <td> U+022F3 </td> <td> <span>&#8947;</span> </td> <tr><td> <code title="">isinv;</code> </td> <td> U+02208 </td> <td> <span>&isin;</span> </td> <tr><td> <code title="">it;</code> </td> <td> U+02062 </td> <td> <span>&#8290;</span> </td> <tr><td> <code title="">itilde;</code> </td> <td> U+00129 </td> <td> <span>&#297;</span> </td> <tr><td> <code title="">iukcy;</code> </td> <td> U+00456 </td> <td> <span>&#1110;</span> </td> <tr><td> <code title="">iuml;</code> </td> <td> U+000EF </td> <td> <span>&iuml;</span> </td> <tr class=impl><td> <code title="">iuml</code> </td> <td> U+000EF </td> <td> <span title="">&iuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">jcirc;</code> </td> <td> U+00135 </td> <td> <span>&#309;</span> </td> <tr><td> <code title="">jcy;</code> </td> <td> U+00439 </td> <td> <span>&#1081;</span> </td> <tr><td> <code title="">jfr;</code> </td> <td> U+1D527 </td> <td> <span>&#120103;</span> </td> <tr><td> <code title="">jmath;</code> </td> <td> U+00237 </td> <td> <span>&#567;</span> </td> <tr><td> <code title="">jopf;</code> </td> <td> U+1D55B </td> <td> <span>&#120155;</span> </td> <tr><td> <code title="">jscr;</code> </td> <td> U+1D4BF </td> <td> <span>&#119999;</span> </td> <tr><td> <code title="">jsercy;</code> </td> <td> U+00458 </td> <td> <span>&#1112;</span> </td> <tr><td> <code title="">jukcy;</code> </td> <td> U+00454 </td> <td> <span>&#1108;</span> </td> <tr><td> <code title="">kappa;</code> </td> <td> U+003BA </td> <td> <span>&kappa;</span> </td> <tr><td> <code title="">kappav;</code> </td> <td> U+003F0 </td> <td> <span>&#1008;</span> </td> <tr><td> <code title="">kcedil;</code> </td> <td> U+00137 </td> <td> <span>&#311;</span> </td> <tr><td> <code title="">kcy;</code> </td> <td> U+0043A </td> <td> <span>&#1082;</span> </td> <tr><td> <code title="">kfr;</code> </td> <td> U+1D528 </td> <td> <span>&#120104;</span> </td> <tr><td> <code title="">kgreen;</code> </td> <td> U+00138 </td> <td> <span>&#312;</span> </td> <tr><td> <code title="">khcy;</code> </td> <td> U+00445 </td> <td> <span>&#1093;</span> </td> <tr><td> <code title="">kjcy;</code> </td> <td> U+0045C </td> <td> <span>&#1116;</span> </td> <tr><td> <code title="">kopf;</code> </td> <td> U+1D55C </td> <td> <span>&#120156;</span> </td> <tr><td> <code title="">kscr;</code> </td> <td> U+1D4C0 </td> <td> <span>&#120000;</span> </td> <tr><td> <code title="">lAarr;</code> </td> <td> U+021DA </td> <td> <span>&#8666;</span> </td> <tr><td> <code title="">lArr;</code> </td> <td> U+021D0 </td> <td> <span>&lArr;</span> </td> <tr><td> <code title="">lAtail;</code> </td> <td> U+0291B </td> <td> <span>&#10523;</span> </td> <tr><td> <code title="">lBarr;</code> </td> <td> U+0290E </td> <td> <span>&#10510;</span> </td> <tr><td> <code title="">lE;</code> </td> <td> U+02266 </td> <td> <span>&#8806;</span> </td> <tr><td> <code title="">lEg;</code> </td> <td> U+02A8B </td> <td> <span>&#10891;</span> </td> <tr><td> <code title="">lHar;</code> </td> <td> U+02962 </td> <td> <span>&#10594;</span> </td> <tr><td> <code title="">lacute;</code> </td> <td> U+0013A </td> <td> <span>&#314;</span> </td> <tr><td> <code title="">laemptyv;</code> </td> <td> U+029B4 </td> <td> <span>&#10676;</span> </td> <tr><td> <code title="">lagran;</code> </td> <td> U+02112 </td> <td> <span>&#8466;</span> </td> <tr><td> <code title="">lambda;</code> </td> <td> U+003BB </td> <td> <span>&lambda;</span> </td> <tr><td> <code title="">lang;</code> </td> <td> U+027E8 </td> <td> <span>&lang;</span> </td> <tr><td> <code title="">langd;</code> </td> <td> U+02991 </td> <td> <span>&#10641;</span> </td> <tr><td> <code title="">langle;</code> </td> <td> U+027E8 </td> <td> <span>&lang;</span> </td> <tr><td> <code title="">lap;</code> </td> <td> U+02A85 </td> <td> <span>&#10885;</span> </td> <tr><td> <code title="">laquo;</code> </td> <td> U+000AB </td> <td> <span>&laquo;</span> </td> <tr class=impl><td> <code title="">laquo</code> </td> <td> U+000AB </td> <td> <span title="">&laquo;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">larr;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">larrb;</code> </td> <td> U+021E4 </td> <td> <span>&#8676;</span> </td> <tr><td> <code title="">larrbfs;</code> </td> <td> U+0291F </td> <td> <span>&#10527;</span> </td> <tr><td> <code title="">larrfs;</code> </td> <td> U+0291D </td> <td> <span>&#10525;</span> </td> <tr><td> <code title="">larrhk;</code> </td> <td> U+021A9 </td> <td> <span>&#8617;</span> </td> <tr><td> <code title="">larrlp;</code> </td> <td> U+021AB </td> <td> <span>&#8619;</span> </td> <tr><td> <code title="">larrpl;</code> </td> <td> U+02939 </td> <td> <span>&#10553;</span> </td> <tr><td> <code title="">larrsim;</code> </td> <td> U+02973 </td> <td> <span>&#10611;</span> </td> <tr><td> <code title="">larrtl;</code> </td> <td> U+021A2 </td> <td> <span>&#8610;</span> </td> <tr><td> <code title="">lat;</code> </td> <td> U+02AAB </td> <td> <span>&#10923;</span> </td> <tr><td> <code title="">latail;</code> </td> <td> U+02919 </td> <td> <span>&#10521;</span> </td> <tr><td> <code title="">late;</code> </td> <td> U+02AAD </td> <td> <span>&#10925;</span> </td> <tr><td> <code title="">lbarr;</code> </td> <td> U+0290C </td> <td> <span>&#10508;</span> </td> <tr><td> <code title="">lbbrk;</code> </td> <td> U+02772 </td> <td> <span>&#10098;</span> </td> <tr><td> <code title="">lbrace;</code> </td> <td> U+0007B </td> <td> <span>{</span> </td> <tr><td> <code title="">lbrack;</code> </td> <td> U+0005B </td> <td> <span>[</span> </td> <tr><td> <code title="">lbrke;</code> </td> <td> U+0298B </td> <td> <span>&#10635;</span> </td> <tr><td> <code title="">lbrksld;</code> </td> <td> U+0298F </td> <td> <span>&#10639;</span> </td> <tr><td> <code title="">lbrkslu;</code> </td> <td> U+0298D </td> <td> <span>&#10637;</span> </td> <tr><td> <code title="">lcaron;</code> </td> <td> U+0013E </td> <td> <span>&#318;</span> </td> <tr><td> <code title="">lcedil;</code> </td> <td> U+0013C </td> <td> <span>&#316;</span> </td> <tr><td> <code title="">lceil;</code> </td> <td> U+02308 </td> <td> <span>&lceil;</span> </td> <tr><td> <code title="">lcub;</code> </td> <td> U+0007B </td> <td> <span>{</span> </td> <tr><td> <code title="">lcy;</code> </td> <td> U+0043B </td> <td> <span>&#1083;</span> </td> <tr><td> <code title="">ldca;</code> </td> <td> U+02936 </td> <td> <span>&#10550;</span> </td> <tr><td> <code title="">ldquo;</code> </td> <td> U+0201C </td> <td> <span>&ldquo;</span> </td> <tr><td> <code title="">ldquor;</code> </td> <td> U+0201E </td> <td> <span>&bdquo;</span> </td> <tr><td> <code title="">ldrdhar;</code> </td> <td> U+02967 </td> <td> <span>&#10599;</span> </td> <tr><td> <code title="">ldrushar;</code> </td> <td> U+0294B </td> <td> <span>&#10571;</span> </td> <tr><td> <code title="">ldsh;</code> </td> <td> U+021B2 </td> <td> <span>&#8626;</span> </td> <tr><td> <code title="">le;</code> </td> <td> U+02264 </td> <td> <span>&le;</span> </td> <tr><td> <code title="">leftarrow;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">leftarrowtail;</code> </td> <td> U+021A2 </td> <td> <span>&#8610;</span> </td> <tr><td> <code title="">leftharpoondown;</code> </td> <td> U+021BD </td> <td> <span>&#8637;</span> </td> <tr><td> <code title="">leftharpoonup;</code> </td> <td> U+021BC </td> <td> <span>&#8636;</span> </td> <tr><td> <code title="">leftleftarrows;</code> </td> <td> U+021C7 </td> <td> <span>&#8647;</span> </td> <tr><td> <code title="">leftrightarrow;</code> </td> <td> U+02194 </td> <td> <span>&harr;</span> </td> <tr><td> <code title="">leftrightarrows;</code> </td> <td> U+021C6 </td> <td> <span>&#8646;</span> </td> <tr><td> <code title="">leftrightharpoons;</code> </td> <td> U+021CB </td> <td> <span>&#8651;</span> </td> <tr><td> <code title="">leftrightsquigarrow;</code> </td> <td> U+021AD </td> <td> <span>&#8621;</span> </td> <tr><td> <code title="">leftthreetimes;</code> </td> <td> U+022CB </td> <td> <span>&#8907;</span> </td> <tr><td> <code title="">leg;</code> </td> <td> U+022DA </td> <td> <span>&#8922;</span> </td> <tr><td> <code title="">leq;</code> </td> <td> U+02264 </td> <td> <span>&le;</span> </td> <tr><td> <code title="">leqq;</code> </td> <td> U+02266 </td> <td> <span>&#8806;</span> </td> <tr><td> <code title="">leqslant;</code> </td> <td> U+02A7D </td> <td> <span>&#10877;</span> </td> <tr><td> <code title="">les;</code> </td> <td> U+02A7D </td> <td> <span>&#10877;</span> </td> <tr><td> <code title="">lescc;</code> </td> <td> U+02AA8 </td> <td> <span>&#10920;</span> </td> <tr><td> <code title="">lesdot;</code> </td> <td> U+02A7F </td> <td> <span>&#10879;</span> </td> <tr><td> <code title="">lesdoto;</code> </td> <td> U+02A81 </td> <td> <span>&#10881;</span> </td> <tr><td> <code title="">lesdotor;</code> </td> <td> U+02A83 </td> <td> <span>&#10883;</span> </td> <tr><td> <code title="">lesges;</code> </td> <td> U+02A93 </td> <td> <span>&#10899;</span> </td> <tr><td> <code title="">lessapprox;</code> </td> <td> U+02A85 </td> <td> <span>&#10885;</span> </td> <tr><td> <code title="">lessdot;</code> </td> <td> U+022D6 </td> <td> <span>&#8918;</span> </td> <tr><td> <code title="">lesseqgtr;</code> </td> <td> U+022DA </td> <td> <span>&#8922;</span> </td> <tr><td> <code title="">lesseqqgtr;</code> </td> <td> U+02A8B </td> <td> <span>&#10891;</span> </td> <tr><td> <code title="">lessgtr;</code> </td> <td> U+02276 </td> <td> <span>&#8822;</span> </td> <tr><td> <code title="">lesssim;</code> </td> <td> U+02272 </td> <td> <span>&#8818;</span> </td> <tr><td> <code title="">lfisht;</code> </td> <td> U+0297C </td> <td> <span>&#10620;</span> </td> <tr><td> <code title="">lfloor;</code> </td> <td> U+0230A </td> <td> <span>&lfloor;</span> </td> <tr><td> <code title="">lfr;</code> </td> <td> U+1D529 </td> <td> <span>&#120105;</span> </td> <tr><td> <code title="">lg;</code> </td> <td> U+02276 </td> <td> <span>&#8822;</span> </td> <tr><td> <code title="">lgE;</code> </td> <td> U+02A91 </td> <td> <span>&#10897;</span> </td> <tr><td> <code title="">lhard;</code> </td> <td> U+021BD </td> <td> <span>&#8637;</span> </td> <tr><td> <code title="">lharu;</code> </td> <td> U+021BC </td> <td> <span>&#8636;</span> </td> <tr><td> <code title="">lharul;</code> </td> <td> U+0296A </td> <td> <span>&#10602;</span> </td> <tr><td> <code title="">lhblk;</code> </td> <td> U+02584 </td> <td> <span>&#9604;</span> </td> <tr><td> <code title="">ljcy;</code> </td> <td> U+00459 </td> <td> <span>&#1113;</span> </td> <tr><td> <code title="">ll;</code> </td> <td> U+0226A </td> <td> <span>&#8810;</span> </td> <tr><td> <code title="">llarr;</code> </td> <td> U+021C7 </td> <td> <span>&#8647;</span> </td> <tr><td> <code title="">llcorner;</code> </td> <td> U+0231E </td> <td> <span>&#8990;</span> </td> <tr><td> <code title="">llhard;</code> </td> <td> U+0296B </td> <td> <span>&#10603;</span> </td> <tr><td> <code title="">lltri;</code> </td> <td> U+025FA </td> <td> <span>&#9722;</span> </td> <tr><td> <code title="">lmidot;</code> </td> <td> U+00140 </td> <td> <span>&#320;</span> </td> <tr><td> <code title="">lmoust;</code> </td> <td> U+023B0 </td> <td> <span>&#9136;</span> </td> <tr><td> <code title="">lmoustache;</code> </td> <td> U+023B0 </td> <td> <span>&#9136;</span> </td> <tr><td> <code title="">lnE;</code> </td> <td> U+02268 </td> <td> <span>&#8808;</span> </td> <tr><td> <code title="">lnap;</code> </td> <td> U+02A89 </td> <td> <span>&#10889;</span> </td> <tr><td> <code title="">lnapprox;</code> </td> <td> U+02A89 </td> <td> <span>&#10889;</span> </td> <tr><td> <code title="">lne;</code> </td> <td> U+02A87 </td> <td> <span>&#10887;</span> </td> <tr><td> <code title="">lneq;</code> </td> <td> U+02A87 </td> <td> <span>&#10887;</span> </td> <tr><td> <code title="">lneqq;</code> </td> <td> U+02268 </td> <td> <span>&#8808;</span> </td> <tr><td> <code title="">lnsim;</code> </td> <td> U+022E6 </td> <td> <span>&#8934;</span> </td> <tr><td> <code title="">loang;</code> </td> <td> U+027EC </td> <td> <span>&#10220;</span> </td> <tr><td> <code title="">loarr;</code> </td> <td> U+021FD </td> <td> <span>&#8701;</span> </td> <tr><td> <code title="">lobrk;</code> </td> <td> U+027E6 </td> <td> <span>&#10214;</span> </td> <tr><td> <code title="">longleftarrow;</code> </td> <td> U+027F5 </td> <td> <span>&#10229;</span> </td> <tr><td> <code title="">longleftrightarrow;</code> </td> <td> U+027F7 </td> <td> <span>&#10231;</span> </td> <tr><td> <code title="">longmapsto;</code> </td> <td> U+027FC </td> <td> <span>&#10236;</span> </td> <tr><td> <code title="">longrightarrow;</code> </td> <td> U+027F6 </td> <td> <span>&#10230;</span> </td> <tr><td> <code title="">looparrowleft;</code> </td> <td> U+021AB </td> <td> <span>&#8619;</span> </td> <tr><td> <code title="">looparrowright;</code> </td> <td> U+021AC </td> <td> <span>&#8620;</span> </td> <tr><td> <code title="">lopar;</code> </td> <td> U+02985 </td> <td> <span>&#10629;</span> </td> <tr><td> <code title="">lopf;</code> </td> <td> U+1D55D </td> <td> <span>&#120157;</span> </td> <tr><td> <code title="">loplus;</code> </td> <td> U+02A2D </td> <td> <span>&#10797;</span> </td> <tr><td> <code title="">lotimes;</code> </td> <td> U+02A34 </td> <td> <span>&#10804;</span> </td> <tr><td> <code title="">lowast;</code> </td> <td> U+02217 </td> <td> <span>&lowast;</span> </td> <tr><td> <code title="">lowbar;</code> </td> <td> U+0005F </td> <td> <span>_</span> </td> <tr><td> <code title="">loz;</code> </td> <td> U+025CA </td> <td> <span>&loz;</span> </td> <tr><td> <code title="">lozenge;</code> </td> <td> U+025CA </td> <td> <span>&loz;</span> </td> <tr><td> <code title="">lozf;</code> </td> <td> U+029EB </td> <td> <span>&#10731;</span> </td> <tr><td> <code title="">lpar;</code> </td> <td> U+00028 </td> <td> <span>(</span> </td> <tr><td> <code title="">lparlt;</code> </td> <td> U+02993 </td> <td> <span>&#10643;</span> </td> <tr><td> <code title="">lrarr;</code> </td> <td> U+021C6 </td> <td> <span>&#8646;</span> </td> <tr><td> <code title="">lrcorner;</code> </td> <td> U+0231F </td> <td> <span>&#8991;</span> </td> <tr><td> <code title="">lrhar;</code> </td> <td> U+021CB </td> <td> <span>&#8651;</span> </td> <tr><td> <code title="">lrhard;</code> </td> <td> U+0296D </td> <td> <span>&#10605;</span> </td> <tr><td> <code title="">lrm;</code> </td> <td> U+0200E </td> <td> <span>&lrm;</span> </td> <tr><td> <code title="">lrtri;</code> </td> <td> U+022BF </td> <td> <span>&#8895;</span> </td> <tr><td> <code title="">lsaquo;</code> </td> <td> U+02039 </td> <td> <span>&lsaquo;</span> </td> <tr><td> <code title="">lscr;</code> </td> <td> U+1D4C1 </td> <td> <span>&#120001;</span> </td> <tr><td> <code title="">lsh;</code> </td> <td> U+021B0 </td> <td> <span>&#8624;</span> </td> <tr><td> <code title="">lsim;</code> </td> <td> U+02272 </td> <td> <span>&#8818;</span> </td> <tr><td> <code title="">lsime;</code> </td> <td> U+02A8D </td> <td> <span>&#10893;</span> </td> <tr><td> <code title="">lsimg;</code> </td> <td> U+02A8F </td> <td> <span>&#10895;</span> </td> <tr><td> <code title="">lsqb;</code> </td> <td> U+0005B </td> <td> <span>[</span> </td> <tr><td> <code title="">lsquo;</code> </td> <td> U+02018 </td> <td> <span>&lsquo;</span> </td> <tr><td> <code title="">lsquor;</code> </td> <td> U+0201A </td> <td> <span>&sbquo;</span> </td> <tr><td> <code title="">lstrok;</code> </td> <td> U+00142 </td> <td> <span>&#322;</span> </td> <tr><td> <code title="">lt;</code> </td> <td> U+0003C </td> <td> <span>&lt;</span> </td> <tr class=impl><td> <code title="">lt</code> </td> <td> U+0003C </td> <td> <span title="">&lt;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ltcc;</code> </td> <td> U+02AA6 </td> <td> <span>&#10918;</span> </td> <tr><td> <code title="">ltcir;</code> </td> <td> U+02A79 </td> <td> <span>&#10873;</span> </td> <tr><td> <code title="">ltdot;</code> </td> <td> U+022D6 </td> <td> <span>&#8918;</span> </td> <tr><td> <code title="">lthree;</code> </td> <td> U+022CB </td> <td> <span>&#8907;</span> </td> <tr><td> <code title="">ltimes;</code> </td> <td> U+022C9 </td> <td> <span>&#8905;</span> </td> <tr><td> <code title="">ltlarr;</code> </td> <td> U+02976 </td> <td> <span>&#10614;</span> </td> <tr><td> <code title="">ltquest;</code> </td> <td> U+02A7B </td> <td> <span>&#10875;</span> </td> <tr><td> <code title="">ltrPar;</code> </td> <td> U+02996 </td> <td> <span>&#10646;</span> </td> <tr><td> <code title="">ltri;</code> </td> <td> U+025C3 </td> <td> <span>&#9667;</span> </td> <tr><td> <code title="">ltrie;</code> </td> <td> U+022B4 </td> <td> <span>&#8884;</span> </td> <tr><td> <code title="">ltrif;</code> </td> <td> U+025C2 </td> <td> <span>&#9666;</span> </td> <tr><td> <code title="">lurdshar;</code> </td> <td> U+0294A </td> <td> <span>&#10570;</span> </td> <tr><td> <code title="">luruhar;</code> </td> <td> U+02966 </td> <td> <span>&#10598;</span> </td> <tr><td> <code title="">mDDot;</code> </td> <td> U+0223A </td> <td> <span>&#8762;</span> </td> <tr><td> <code title="">macr;</code> </td> <td> U+000AF </td> <td> <span>&macr;</span> </td> <tr class=impl><td> <code title="">macr</code> </td> <td> U+000AF </td> <td> <span title="">&macr;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">male;</code> </td> <td> U+02642 </td> <td> <span>&#9794;</span> </td> <tr><td> <code title="">malt;</code> </td> <td> U+02720 </td> <td> <span>&#10016;</span> </td> <tr><td> <code title="">maltese;</code> </td> <td> U+02720 </td> <td> <span>&#10016;</span> </td> <tr><td> <code title="">map;</code> </td> <td> U+021A6 </td> <td> <span>&#8614;</span> </td> <tr><td> <code title="">mapsto;</code> </td> <td> U+021A6 </td> <td> <span>&#8614;</span> </td> <tr><td> <code title="">mapstodown;</code> </td> <td> U+021A7 </td> <td> <span>&#8615;</span> </td> <tr><td> <code title="">mapstoleft;</code> </td> <td> U+021A4 </td> <td> <span>&#8612;</span> </td> <tr><td> <code title="">mapstoup;</code> </td> <td> U+021A5 </td> <td> <span>&#8613;</span> </td> <tr><td> <code title="">marker;</code> </td> <td> U+025AE </td> <td> <span>&#9646;</span> </td> <tr><td> <code title="">mcomma;</code> </td> <td> U+02A29 </td> <td> <span>&#10793;</span> </td> <tr><td> <code title="">mcy;</code> </td> <td> U+0043C </td> <td> <span>&#1084;</span> </td> <tr><td> <code title="">mdash;</code> </td> <td> U+02014 </td> <td> <span>&mdash;</span> </td> <tr><td> <code title="">measuredangle;</code> </td> <td> U+02221 </td> <td> <span>&#8737;</span> </td> <tr><td> <code title="">mfr;</code> </td> <td> U+1D52A </td> <td> <span>&#120106;</span> </td> <tr><td> <code title="">mho;</code> </td> <td> U+02127 </td> <td> <span>&#8487;</span> </td> <tr><td> <code title="">micro;</code> </td> <td> U+000B5 </td> <td> <span>&micro;</span> </td> <tr class=impl><td> <code title="">micro</code> </td> <td> U+000B5 </td> <td> <span title="">&micro;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">mid;</code> </td> <td> U+02223 </td> <td> <span>&#8739;</span> </td> <tr><td> <code title="">midast;</code> </td> <td> U+0002A </td> <td> <span>*</span> </td> <tr><td> <code title="">midcir;</code> </td> <td> U+02AF0 </td> <td> <span>&#10992;</span> </td> <tr><td> <code title="">middot;</code> </td> <td> U+000B7 </td> <td> <span>&middot;</span> </td> <tr class=impl><td> <code title="">middot</code> </td> <td> U+000B7 </td> <td> <span title="">&middot;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">minus;</code> </td> <td> U+02212 </td> <td> <span>&minus;</span> </td> <tr><td> <code title="">minusb;</code> </td> <td> U+0229F </td> <td> <span>&#8863;</span> </td> <tr><td> <code title="">minusd;</code> </td> <td> U+02238 </td> <td> <span>&#8760;</span> </td> <tr><td> <code title="">minusdu;</code> </td> <td> U+02A2A </td> <td> <span>&#10794;</span> </td> <tr><td> <code title="">mlcp;</code> </td> <td> U+02ADB </td> <td> <span>&#10971;</span> </td> <tr><td> <code title="">mldr;</code> </td> <td> U+02026 </td> <td> <span>&hellip;</span> </td> <tr><td> <code title="">mnplus;</code> </td> <td> U+02213 </td> <td> <span>&#8723;</span> </td> <tr><td> <code title="">models;</code> </td> <td> U+022A7 </td> <td> <span>&#8871;</span> </td> <tr><td> <code title="">mopf;</code> </td> <td> U+1D55E </td> <td> <span>&#120158;</span> </td> <tr><td> <code title="">mp;</code> </td> <td> U+02213 </td> <td> <span>&#8723;</span> </td> <tr><td> <code title="">mscr;</code> </td> <td> U+1D4C2 </td> <td> <span>&#120002;</span> </td> <tr><td> <code title="">mstpos;</code> </td> <td> U+0223E </td> <td> <span>&#8766;</span> </td> <tr><td> <code title="">mu;</code> </td> <td> U+003BC </td> <td> <span>&mu;</span> </td> <tr><td> <code title="">multimap;</code> </td> <td> U+022B8 </td> <td> <span>&#8888;</span> </td> <tr><td> <code title="">mumap;</code> </td> <td> U+022B8 </td> <td> <span>&#8888;</span> </td> <tr><td> <code title="">nLeftarrow;</code> </td> <td> U+021CD </td> <td> <span>&#8653;</span> </td> <tr><td> <code title="">nLeftrightarrow;</code> </td> <td> U+021CE </td> <td> <span>&#8654;</span> </td> <tr><td> <code title="">nRightarrow;</code> </td> <td> U+021CF </td> <td> <span>&#8655;</span> </td> <tr><td> <code title="">nVDash;</code> </td> <td> U+022AF </td> <td> <span>&#8879;</span> </td> <tr><td> <code title="">nVdash;</code> </td> <td> U+022AE </td> <td> <span>&#8878;</span> </td> <tr><td> <code title="">nabla;</code> </td> <td> U+02207 </td> <td> <span>&nabla;</span> </td> <tr><td> <code title="">nacute;</code> </td> <td> U+00144 </td> <td> <span>&#324;</span> </td> <tr><td> <code title="">nap;</code> </td> <td> U+02249 </td> <td> <span>&#8777;</span> </td> <tr><td> <code title="">napos;</code> </td> <td> U+00149 </td> <td> <span>&#329;</span> </td> <tr><td> <code title="">napprox;</code> </td> <td> U+02249 </td> <td> <span>&#8777;</span> </td> <tr><td> <code title="">natur;</code> </td> <td> U+0266E </td> <td> <span>&#9838;</span> </td> <tr><td> <code title="">natural;</code> </td> <td> U+0266E </td> <td> <span>&#9838;</span> </td> <tr><td> <code title="">naturals;</code> </td> <td> U+02115 </td> <td> <span>&#8469;</span> </td> <tr><td> <code title="">nbsp;</code> </td> <td> U+000A0 </td> <td> <span>&nbsp;</span> </td> <tr class=impl><td> <code title="">nbsp</code> </td> <td> U+000A0 </td> <td> <span title="">&nbsp;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ncap;</code> </td> <td> U+02A43 </td> <td> <span>&#10819;</span> </td> <tr><td> <code title="">ncaron;</code> </td> <td> U+00148 </td> <td> <span>&#328;</span> </td> <tr><td> <code title="">ncedil;</code> </td> <td> U+00146 </td> <td> <span>&#326;</span> </td> <tr><td> <code title="">ncong;</code> </td> <td> U+02247 </td> <td> <span>&#8775;</span> </td> <tr><td> <code title="">ncup;</code> </td> <td> U+02A42 </td> <td> <span>&#10818;</span> </td> <tr><td> <code title="">ncy;</code> </td> <td> U+0043D </td> <td> <span>&#1085;</span> </td> <tr><td> <code title="">ndash;</code> </td> <td> U+02013 </td> <td> <span>&ndash;</span> </td> <tr><td> <code title="">ne;</code> </td> <td> U+02260 </td> <td> <span>&ne;</span> </td> <tr><td> <code title="">neArr;</code> </td> <td> U+021D7 </td> <td> <span>&#8663;</span> </td> <tr><td> <code title="">nearhk;</code> </td> <td> U+02924 </td> <td> <span>&#10532;</span> </td> <tr><td> <code title="">nearr;</code> </td> <td> U+02197 </td> <td> <span>&#8599;</span> </td> <tr><td> <code title="">nearrow;</code> </td> <td> U+02197 </td> <td> <span>&#8599;</span> </td> <tr><td> <code title="">nequiv;</code> </td> <td> U+02262 </td> <td> <span>&#8802;</span> </td> <tr><td> <code title="">nesear;</code> </td> <td> U+02928 </td> <td> <span>&#10536;</span> </td> <tr><td> <code title="">nexist;</code> </td> <td> U+02204 </td> <td> <span>&#8708;</span> </td> <tr><td> <code title="">nexists;</code> </td> <td> U+02204 </td> <td> <span>&#8708;</span> </td> <tr><td> <code title="">nfr;</code> </td> <td> U+1D52B </td> <td> <span>&#120107;</span> </td> <tr><td> <code title="">nge;</code> </td> <td> U+02271 </td> <td> <span>&#8817;</span> </td> <tr><td> <code title="">ngeq;</code> </td> <td> U+02271 </td> <td> <span>&#8817;</span> </td> <tr><td> <code title="">ngsim;</code> </td> <td> U+02275 </td> <td> <span>&#8821;</span> </td> <tr><td> <code title="">ngt;</code> </td> <td> U+0226F </td> <td> <span>&#8815;</span> </td> <tr><td> <code title="">ngtr;</code> </td> <td> U+0226F </td> <td> <span>&#8815;</span> </td> <tr><td> <code title="">nhArr;</code> </td> <td> U+021CE </td> <td> <span>&#8654;</span> </td> <tr><td> <code title="">nharr;</code> </td> <td> U+021AE </td> <td> <span>&#8622;</span> </td> <tr><td> <code title="">nhpar;</code> </td> <td> U+02AF2 </td> <td> <span>&#10994;</span> </td> <tr><td> <code title="">ni;</code> </td> <td> U+0220B </td> <td> <span>&ni;</span> </td> <tr><td> <code title="">nis;</code> </td> <td> U+022FC </td> <td> <span>&#8956;</span> </td> <tr><td> <code title="">nisd;</code> </td> <td> U+022FA </td> <td> <span>&#8954;</span> </td> <tr><td> <code title="">niv;</code> </td> <td> U+0220B </td> <td> <span>&ni;</span> </td> <tr><td> <code title="">njcy;</code> </td> <td> U+0045A </td> <td> <span>&#1114;</span> </td> <tr><td> <code title="">nlArr;</code> </td> <td> U+021CD </td> <td> <span>&#8653;</span> </td> <tr><td> <code title="">nlarr;</code> </td> <td> U+0219A </td> <td> <span>&#8602;</span> </td> <tr><td> <code title="">nldr;</code> </td> <td> U+02025 </td> <td> <span>&#8229;</span> </td> <tr><td> <code title="">nle;</code> </td> <td> U+02270 </td> <td> <span>&#8816;</span> </td> <tr><td> <code title="">nleftarrow;</code> </td> <td> U+0219A </td> <td> <span>&#8602;</span> </td> <tr><td> <code title="">nleftrightarrow;</code> </td> <td> U+021AE </td> <td> <span>&#8622;</span> </td> <tr><td> <code title="">nleq;</code> </td> <td> U+02270 </td> <td> <span>&#8816;</span> </td> <tr><td> <code title="">nless;</code> </td> <td> U+0226E </td> <td> <span>&#8814;</span> </td> <tr><td> <code title="">nlsim;</code> </td> <td> U+02274 </td> <td> <span>&#8820;</span> </td> <tr><td> <code title="">nlt;</code> </td> <td> U+0226E </td> <td> <span>&#8814;</span> </td> <tr><td> <code title="">nltri;</code> </td> <td> U+022EA </td> <td> <span>&#8938;</span> </td> <tr><td> <code title="">nltrie;</code> </td> <td> U+022EC </td> <td> <span>&#8940;</span> </td> <tr><td> <code title="">nmid;</code> </td> <td> U+02224 </td> <td> <span>&#8740;</span> </td> <tr><td> <code title="">nopf;</code> </td> <td> U+1D55F </td> <td> <span>&#120159;</span> </td> <tr><td> <code title="">not;</code> </td> <td> U+000AC </td> <td> <span>&not;</span> </td> <tr class=impl><td> <code title="">not</code> </td> <td> U+000AC </td> <td> <span title="">&not;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">notin;</code> </td> <td> U+02209 </td> <td> <span>&notin;</span> </td> <tr><td> <code title="">notinva;</code> </td> <td> U+02209 </td> <td> <span>&notin;</span> </td> <tr><td> <code title="">notinvb;</code> </td> <td> U+022F7 </td> <td> <span>&#8951;</span> </td> <tr><td> <code title="">notinvc;</code> </td> <td> U+022F6 </td> <td> <span>&#8950;</span> </td> <tr><td> <code title="">notni;</code> </td> <td> U+0220C </td> <td> <span>&#8716;</span> </td> <tr><td> <code title="">notniva;</code> </td> <td> U+0220C </td> <td> <span>&#8716;</span> </td> <tr><td> <code title="">notnivb;</code> </td> <td> U+022FE </td> <td> <span>&#8958;</span> </td> <tr><td> <code title="">notnivc;</code> </td> <td> U+022FD </td> <td> <span>&#8957;</span> </td> <tr><td> <code title="">npar;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">nparallel;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">npolint;</code> </td> <td> U+02A14 </td> <td> <span>&#10772;</span> </td> <tr><td> <code title="">npr;</code> </td> <td> U+02280 </td> <td> <span>&#8832;</span> </td> <tr><td> <code title="">nprcue;</code> </td> <td> U+022E0 </td> <td> <span>&#8928;</span> </td> <tr><td> <code title="">nprec;</code> </td> <td> U+02280 </td> <td> <span>&#8832;</span> </td> <tr><td> <code title="">nrArr;</code> </td> <td> U+021CF </td> <td> <span>&#8655;</span> </td> <tr><td> <code title="">nrarr;</code> </td> <td> U+0219B </td> <td> <span>&#8603;</span> </td> <tr><td> <code title="">nrightarrow;</code> </td> <td> U+0219B </td> <td> <span>&#8603;</span> </td> <tr><td> <code title="">nrtri;</code> </td> <td> U+022EB </td> <td> <span>&#8939;</span> </td> <tr><td> <code title="">nrtrie;</code> </td> <td> U+022ED </td> <td> <span>&#8941;</span> </td> <tr><td> <code title="">nsc;</code> </td> <td> U+02281 </td> <td> <span>&#8833;</span> </td> <tr><td> <code title="">nsccue;</code> </td> <td> U+022E1 </td> <td> <span>&#8929;</span> </td> <tr><td> <code title="">nscr;</code> </td> <td> U+1D4C3 </td> <td> <span>&#120003;</span> </td> <tr><td> <code title="">nshortmid;</code> </td> <td> U+02224 </td> <td> <span>&#8740;</span> </td> <tr><td> <code title="">nshortparallel;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">nsim;</code> </td> <td> U+02241 </td> <td> <span>&#8769;</span> </td> <tr><td> <code title="">nsime;</code> </td> <td> U+02244 </td> <td> <span>&#8772;</span> </td> <tr><td> <code title="">nsimeq;</code> </td> <td> U+02244 </td> <td> <span>&#8772;</span> </td> <tr><td> <code title="">nsmid;</code> </td> <td> U+02224 </td> <td> <span>&#8740;</span> </td> <tr><td> <code title="">nspar;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">nsqsube;</code> </td> <td> U+022E2 </td> <td> <span>&#8930;</span> </td> <tr><td> <code title="">nsqsupe;</code> </td> <td> U+022E3 </td> <td> <span>&#8931;</span> </td> <tr><td> <code title="">nsub;</code> </td> <td> U+02284 </td> <td> <span>&nsub;</span> </td> <tr><td> <code title="">nsube;</code> </td> <td> U+02288 </td> <td> <span>&#8840;</span> </td> <tr><td> <code title="">nsubseteq;</code> </td> <td> U+02288 </td> <td> <span>&#8840;</span> </td> <tr><td> <code title="">nsucc;</code> </td> <td> U+02281 </td> <td> <span>&#8833;</span> </td> <tr><td> <code title="">nsup;</code> </td> <td> U+02285 </td> <td> <span>&#8837;</span> </td> <tr><td> <code title="">nsupe;</code> </td> <td> U+02289 </td> <td> <span>&#8841;</span> </td> <tr><td> <code title="">nsupseteq;</code> </td> <td> U+02289 </td> <td> <span>&#8841;</span> </td> <tr><td> <code title="">ntgl;</code> </td> <td> U+02279 </td> <td> <span>&#8825;</span> </td> <tr><td> <code title="">ntilde;</code> </td> <td> U+000F1 </td> <td> <span>&ntilde;</span> </td> <tr class=impl><td> <code title="">ntilde</code> </td> <td> U+000F1 </td> <td> <span title="">&ntilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ntlg;</code> </td> <td> U+02278 </td> <td> <span>&#8824;</span> </td> <tr><td> <code title="">ntriangleleft;</code> </td> <td> U+022EA </td> <td> <span>&#8938;</span> </td> <tr><td> <code title="">ntrianglelefteq;</code> </td> <td> U+022EC </td> <td> <span>&#8940;</span> </td> <tr><td> <code title="">ntriangleright;</code> </td> <td> U+022EB </td> <td> <span>&#8939;</span> </td> <tr><td> <code title="">ntrianglerighteq;</code> </td> <td> U+022ED </td> <td> <span>&#8941;</span> </td> <tr><td> <code title="">nu;</code> </td> <td> U+003BD </td> <td> <span>&nu;</span> </td> <tr><td> <code title="">num;</code> </td> <td> U+00023 </td> <td> <span>#</span> </td> <tr><td> <code title="">numero;</code> </td> <td> U+02116 </td> <td> <span>&#8470;</span> </td> <tr><td> <code title="">numsp;</code> </td> <td> U+02007 </td> <td> <span>&#8199;</span> </td> <tr><td> <code title="">nvDash;</code> </td> <td> U+022AD </td> <td> <span>&#8877;</span> </td> <tr><td> <code title="">nvHarr;</code> </td> <td> U+02904 </td> <td> <span>&#10500;</span> </td> <tr><td> <code title="">nvdash;</code> </td> <td> U+022AC </td> <td> <span>&#8876;</span> </td> <tr><td> <code title="">nvinfin;</code> </td> <td> U+029DE </td> <td> <span>&#10718;</span> </td> <tr><td> <code title="">nvlArr;</code> </td> <td> U+02902 </td> <td> <span>&#10498;</span> </td> <tr><td> <code title="">nvrArr;</code> </td> <td> U+02903 </td> <td> <span>&#10499;</span> </td> <tr><td> <code title="">nwArr;</code> </td> <td> U+021D6 </td> <td> <span>&#8662;</span> </td> <tr><td> <code title="">nwarhk;</code> </td> <td> U+02923 </td> <td> <span>&#10531;</span> </td> <tr><td> <code title="">nwarr;</code> </td> <td> U+02196 </td> <td> <span>&#8598;</span> </td> <tr><td> <code title="">nwarrow;</code> </td> <td> U+02196 </td> <td> <span>&#8598;</span> </td> <tr><td> <code title="">nwnear;</code> </td> <td> U+02927 </td> <td> <span>&#10535;</span> </td> <tr><td> <code title="">oS;</code> </td> <td> U+024C8 </td> <td> <span>&#9416;</span> </td> <tr><td> <code title="">oacute;</code> </td> <td> U+000F3 </td> <td> <span>&oacute;</span> </td> <tr class=impl><td> <code title="">oacute</code> </td> <td> U+000F3 </td> <td> <span title="">&oacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">oast;</code> </td> <td> U+0229B </td> <td> <span>&#8859;</span> </td> <tr><td> <code title="">ocir;</code> </td> <td> U+0229A </td> <td> <span>&#8858;</span> </td> <tr><td> <code title="">ocirc;</code> </td> <td> U+000F4 </td> <td> <span>&ocirc;</span> </td> <tr class=impl><td> <code title="">ocirc</code> </td> <td> U+000F4 </td> <td> <span title="">&ocirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ocy;</code> </td> <td> U+0043E </td> <td> <span>&#1086;</span> </td> <tr><td> <code title="">odash;</code> </td> <td> U+0229D </td> <td> <span>&#8861;</span> </td> <tr><td> <code title="">odblac;</code> </td> <td> U+00151 </td> <td> <span>&#337;</span> </td> <tr><td> <code title="">odiv;</code> </td> <td> U+02A38 </td> <td> <span>&#10808;</span> </td> <tr><td> <code title="">odot;</code> </td> <td> U+02299 </td> <td> <span>&#8857;</span> </td> <tr><td> <code title="">odsold;</code> </td> <td> U+029BC </td> <td> <span>&#10684;</span> </td> <tr><td> <code title="">oelig;</code> </td> <td> U+00153 </td> <td> <span>&oelig;</span> </td> <tr><td> <code title="">ofcir;</code> </td> <td> U+029BF </td> <td> <span>&#10687;</span> </td> <tr><td> <code title="">ofr;</code> </td> <td> U+1D52C </td> <td> <span>&#120108;</span> </td> <tr><td> <code title="">ogon;</code> </td> <td> U+002DB </td> <td> <span>&#731;</span> </td> <tr><td> <code title="">ograve;</code> </td> <td> U+000F2 </td> <td> <span>&ograve;</span> </td> <tr class=impl><td> <code title="">ograve</code> </td> <td> U+000F2 </td> <td> <span title="">&ograve;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ogt;</code> </td> <td> U+029C1 </td> <td> <span>&#10689;</span> </td> <tr><td> <code title="">ohbar;</code> </td> <td> U+029B5 </td> <td> <span>&#10677;</span> </td> <tr><td> <code title="">ohm;</code> </td> <td> U+003A9 </td> <td> <span>&Omega;</span> </td> <tr><td> <code title="">oint;</code> </td> <td> U+0222E </td> <td> <span>&#8750;</span> </td> <tr><td> <code title="">olarr;</code> </td> <td> U+021BA </td> <td> <span>&#8634;</span> </td> <tr><td> <code title="">olcir;</code> </td> <td> U+029BE </td> <td> <span>&#10686;</span> </td> <tr><td> <code title="">olcross;</code> </td> <td> U+029BB </td> <td> <span>&#10683;</span> </td> <tr><td> <code title="">oline;</code> </td> <td> U+0203E </td> <td> <span>&oline;</span> </td> <tr><td> <code title="">olt;</code> </td> <td> U+029C0 </td> <td> <span>&#10688;</span> </td> <tr><td> <code title="">omacr;</code> </td> <td> U+0014D </td> <td> <span>&#333;</span> </td> <tr><td> <code title="">omega;</code> </td> <td> U+003C9 </td> <td> <span>&omega;</span> </td> <tr><td> <code title="">omicron;</code> </td> <td> U+003BF </td> <td> <span>&omicron;</span> </td> <tr><td> <code title="">omid;</code> </td> <td> U+029B6 </td> <td> <span>&#10678;</span> </td> <tr><td> <code title="">ominus;</code> </td> <td> U+02296 </td> <td> <span>&#8854;</span> </td> <tr><td> <code title="">oopf;</code> </td> <td> U+1D560 </td> <td> <span>&#120160;</span> </td> <tr><td> <code title="">opar;</code> </td> <td> U+029B7 </td> <td> <span>&#10679;</span> </td> <tr><td> <code title="">operp;</code> </td> <td> U+029B9 </td> <td> <span>&#10681;</span> </td> <tr><td> <code title="">oplus;</code> </td> <td> U+02295 </td> <td> <span>&oplus;</span> </td> <tr><td> <code title="">or;</code> </td> <td> U+02228 </td> <td> <span>&or;</span> </td> <tr><td> <code title="">orarr;</code> </td> <td> U+021BB </td> <td> <span>&#8635;</span> </td> <tr><td> <code title="">ord;</code> </td> <td> U+02A5D </td> <td> <span>&#10845;</span> </td> <tr><td> <code title="">order;</code> </td> <td> U+02134 </td> <td> <span>&#8500;</span> </td> <tr><td> <code title="">orderof;</code> </td> <td> U+02134 </td> <td> <span>&#8500;</span> </td> <tr><td> <code title="">ordf;</code> </td> <td> U+000AA </td> <td> <span>&ordf;</span> </td> <tr class=impl><td> <code title="">ordf</code> </td> <td> U+000AA </td> <td> <span title="">&ordf;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ordm;</code> </td> <td> U+000BA </td> <td> <span>&ordm;</span> </td> <tr class=impl><td> <code title="">ordm</code> </td> <td> U+000BA </td> <td> <span title="">&ordm;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">origof;</code> </td> <td> U+022B6 </td> <td> <span>&#8886;</span> </td> <tr><td> <code title="">oror;</code> </td> <td> U+02A56 </td> <td> <span>&#10838;</span> </td> <tr><td> <code title="">orslope;</code> </td> <td> U+02A57 </td> <td> <span>&#10839;</span> </td> <tr><td> <code title="">orv;</code> </td> <td> U+02A5B </td> <td> <span>&#10843;</span> </td> <tr><td> <code title="">oscr;</code> </td> <td> U+02134 </td> <td> <span>&#8500;</span> </td> <tr><td> <code title="">oslash;</code> </td> <td> U+000F8 </td> <td> <span>&oslash;</span> </td> <tr class=impl><td> <code title="">oslash</code> </td> <td> U+000F8 </td> <td> <span title="">&oslash;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">osol;</code> </td> <td> U+02298 </td> <td> <span>&#8856;</span> </td> <tr><td> <code title="">otilde;</code> </td> <td> U+000F5 </td> <td> <span>&otilde;</span> </td> <tr class=impl><td> <code title="">otilde</code> </td> <td> U+000F5 </td> <td> <span title="">&otilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">otimes;</code> </td> <td> U+02297 </td> <td> <span>&otimes;</span> </td> <tr><td> <code title="">otimesas;</code> </td> <td> U+02A36 </td> <td> <span>&#10806;</span> </td> <tr><td> <code title="">ouml;</code> </td> <td> U+000F6 </td> <td> <span>&ouml;</span> </td> <tr class=impl><td> <code title="">ouml</code> </td> <td> U+000F6 </td> <td> <span title="">&ouml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ovbar;</code> </td> <td> U+0233D </td> <td> <span>&#9021;</span> </td> <tr><td> <code title="">par;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">para;</code> </td> <td> U+000B6 </td> <td> <span>&para;</span> </td> <tr class=impl><td> <code title="">para</code> </td> <td> U+000B6 </td> <td> <span title="">&para;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">parallel;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">parsim;</code> </td> <td> U+02AF3 </td> <td> <span>&#10995;</span> </td> <tr><td> <code title="">parsl;</code> </td> <td> U+02AFD </td> <td> <span>&#11005;</span> </td> <tr><td> <code title="">part;</code> </td> <td> U+02202 </td> <td> <span>&part;</span> </td> <tr><td> <code title="">pcy;</code> </td> <td> U+0043F </td> <td> <span>&#1087;</span> </td> <tr><td> <code title="">percnt;</code> </td> <td> U+00025 </td> <td> <span>%</span> </td> <tr><td> <code title="">period;</code> </td> <td> U+0002E </td> <td> <span>.</span> </td> <tr><td> <code title="">permil;</code> </td> <td> U+02030 </td> <td> <span>&permil;</span> </td> <tr><td> <code title="">perp;</code> </td> <td> U+022A5 </td> <td> <span>&perp;</span> </td> <tr><td> <code title="">pertenk;</code> </td> <td> U+02031 </td> <td> <span>&#8241;</span> </td> <tr><td> <code title="">pfr;</code> </td> <td> U+1D52D </td> <td> <span>&#120109;</span> </td> <tr><td> <code title="">phi;</code> </td> <td> U+003C6 </td> <td> <span>&phi;</span> </td> <tr><td> <code title="">phiv;</code> </td> <td> U+003D5 </td> <td> <span>&#981;</span> </td> <tr><td> <code title="">phmmat;</code> </td> <td> U+02133 </td> <td> <span>&#8499;</span> </td> <tr><td> <code title="">phone;</code> </td> <td> U+0260E </td> <td> <span>&#9742;</span> </td> <tr><td> <code title="">pi;</code> </td> <td> U+003C0 </td> <td> <span>&pi;</span> </td> <tr><td> <code title="">pitchfork;</code> </td> <td> U+022D4 </td> <td> <span>&#8916;</span> </td> <tr><td> <code title="">piv;</code> </td> <td> U+003D6 </td> <td> <span>&piv;</span> </td> <tr><td> <code title="">planck;</code> </td> <td> U+0210F </td> <td> <span>&#8463;</span> </td> <tr><td> <code title="">planckh;</code> </td> <td> U+0210E </td> <td> <span>&#8462;</span> </td> <tr><td> <code title="">plankv;</code> </td> <td> U+0210F </td> <td> <span>&#8463;</span> </td> <tr><td> <code title="">plus;</code> </td> <td> U+0002B </td> <td> <span>+</span> </td> <tr><td> <code title="">plusacir;</code> </td> <td> U+02A23 </td> <td> <span>&#10787;</span> </td> <tr><td> <code title="">plusb;</code> </td> <td> U+0229E </td> <td> <span>&#8862;</span> </td> <tr><td> <code title="">pluscir;</code> </td> <td> U+02A22 </td> <td> <span>&#10786;</span> </td> <tr><td> <code title="">plusdo;</code> </td> <td> U+02214 </td> <td> <span>&#8724;</span> </td> <tr><td> <code title="">plusdu;</code> </td> <td> U+02A25 </td> <td> <span>&#10789;</span> </td> <tr><td> <code title="">pluse;</code> </td> <td> U+02A72 </td> <td> <span>&#10866;</span> </td> <tr><td> <code title="">plusmn;</code> </td> <td> U+000B1 </td> <td> <span>&plusmn;</span> </td> <tr class=impl><td> <code title="">plusmn</code> </td> <td> U+000B1 </td> <td> <span title="">&plusmn;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">plussim;</code> </td> <td> U+02A26 </td> <td> <span>&#10790;</span> </td> <tr><td> <code title="">plustwo;</code> </td> <td> U+02A27 </td> <td> <span>&#10791;</span> </td> <tr><td> <code title="">pm;</code> </td> <td> U+000B1 </td> <td> <span>&plusmn;</span> </td> <tr><td> <code title="">pointint;</code> </td> <td> U+02A15 </td> <td> <span>&#10773;</span> </td> <tr><td> <code title="">popf;</code> </td> <td> U+1D561 </td> <td> <span>&#120161;</span> </td> <tr><td> <code title="">pound;</code> </td> <td> U+000A3 </td> <td> <span>&pound;</span> </td> <tr class=impl><td> <code title="">pound</code> </td> <td> U+000A3 </td> <td> <span title="">&pound;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">pr;</code> </td> <td> U+0227A </td> <td> <span>&#8826;</span> </td> <tr><td> <code title="">prE;</code> </td> <td> U+02AB3 </td> <td> <span>&#10931;</span> </td> <tr><td> <code title="">prap;</code> </td> <td> U+02AB7 </td> <td> <span>&#10935;</span> </td> <tr><td> <code title="">prcue;</code> </td> <td> U+0227C </td> <td> <span>&#8828;</span> </td> <tr><td> <code title="">pre;</code> </td> <td> U+02AAF </td> <td> <span>&#10927;</span> </td> <tr><td> <code title="">prec;</code> </td> <td> U+0227A </td> <td> <span>&#8826;</span> </td> <tr><td> <code title="">precapprox;</code> </td> <td> U+02AB7 </td> <td> <span>&#10935;</span> </td> <tr><td> <code title="">preccurlyeq;</code> </td> <td> U+0227C </td> <td> <span>&#8828;</span> </td> <tr><td> <code title="">preceq;</code> </td> <td> U+02AAF </td> <td> <span>&#10927;</span> </td> <tr><td> <code title="">precnapprox;</code> </td> <td> U+02AB9 </td> <td> <span>&#10937;</span> </td> <tr><td> <code title="">precneqq;</code> </td> <td> U+02AB5 </td> <td> <span>&#10933;</span> </td> <tr><td> <code title="">precnsim;</code> </td> <td> U+022E8 </td> <td> <span>&#8936;</span> </td> <tr><td> <code title="">precsim;</code> </td> <td> U+0227E </td> <td> <span>&#8830;</span> </td> <tr><td> <code title="">prime;</code> </td> <td> U+02032 </td> <td> <span>&prime;</span> </td> <tr><td> <code title="">primes;</code> </td> <td> U+02119 </td> <td> <span>&#8473;</span> </td> <tr><td> <code title="">prnE;</code> </td> <td> U+02AB5 </td> <td> <span>&#10933;</span> </td> <tr><td> <code title="">prnap;</code> </td> <td> U+02AB9 </td> <td> <span>&#10937;</span> </td> <tr><td> <code title="">prnsim;</code> </td> <td> U+022E8 </td> <td> <span>&#8936;</span> </td> <tr><td> <code title="">prod;</code> </td> <td> U+0220F </td> <td> <span>&prod;</span> </td> <tr><td> <code title="">profalar;</code> </td> <td> U+0232E </td> <td> <span>&#9006;</span> </td> <tr><td> <code title="">profline;</code> </td> <td> U+02312 </td> <td> <span>&#8978;</span> </td> <tr><td> <code title="">profsurf;</code> </td> <td> U+02313 </td> <td> <span>&#8979;</span> </td> <tr><td> <code title="">prop;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">propto;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">prsim;</code> </td> <td> U+0227E </td> <td> <span>&#8830;</span> </td> <tr><td> <code title="">prurel;</code> </td> <td> U+022B0 </td> <td> <span>&#8880;</span> </td> <tr><td> <code title="">pscr;</code> </td> <td> U+1D4C5 </td> <td> <span>&#120005;</span> </td> <tr><td> <code title="">psi;</code> </td> <td> U+003C8 </td> <td> <span>&psi;</span> </td> <tr><td> <code title="">puncsp;</code> </td> <td> U+02008 </td> <td> <span>&#8200;</span> </td> <tr><td> <code title="">qfr;</code> </td> <td> U+1D52E </td> <td> <span>&#120110;</span> </td> <tr><td> <code title="">qint;</code> </td> <td> U+02A0C </td> <td> <span>&#10764;</span> </td> <tr><td> <code title="">qopf;</code> </td> <td> U+1D562 </td> <td> <span>&#120162;</span> </td> <tr><td> <code title="">qprime;</code> </td> <td> U+02057 </td> <td> <span>&#8279;</span> </td> <tr><td> <code title="">qscr;</code> </td> <td> U+1D4C6 </td> <td> <span>&#120006;</span> </td> <tr><td> <code title="">quaternions;</code> </td> <td> U+0210D </td> <td> <span>&#8461;</span> </td> <tr><td> <code title="">quatint;</code> </td> <td> U+02A16 </td> <td> <span>&#10774;</span> </td> <tr><td> <code title="">quest;</code> </td> <td> U+0003F </td> <td> <span>?</span> </td> <tr><td> <code title="">questeq;</code> </td> <td> U+0225F </td> <td> <span>&#8799;</span> </td> <tr><td> <code title="">quot;</code> </td> <td> U+00022 </td> <td> <span>"</span> </td> <tr class=impl><td> <code title="">quot</code> </td> <td> U+00022 </td> <td> <span title="">"</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">rAarr;</code> </td> <td> U+021DB </td> <td> <span>&#8667;</span> </td> <tr><td> <code title="">rArr;</code> </td> <td> U+021D2 </td> <td> <span>&rArr;</span> </td> <tr><td> <code title="">rAtail;</code> </td> <td> U+0291C </td> <td> <span>&#10524;</span> </td> <tr><td> <code title="">rBarr;</code> </td> <td> U+0290F </td> <td> <span>&#10511;</span> </td> <tr><td> <code title="">rHar;</code> </td> <td> U+02964 </td> <td> <span>&#10596;</span> </td> <tr><td> <code title="">racute;</code> </td> <td> U+00155 </td> <td> <span>&#341;</span> </td> <tr><td> <code title="">radic;</code> </td> <td> U+0221A </td> <td> <span>&radic;</span> </td> <tr><td> <code title="">raemptyv;</code> </td> <td> U+029B3 </td> <td> <span>&#10675;</span> </td> <tr><td> <code title="">rang;</code> </td> <td> U+027E9 </td> <td> <span>&rang;</span> </td> <tr><td> <code title="">rangd;</code> </td> <td> U+02992 </td> <td> <span>&#10642;</span> </td> <tr><td> <code title="">range;</code> </td> <td> U+029A5 </td> <td> <span>&#10661;</span> </td> <tr><td> <code title="">rangle;</code> </td> <td> U+027E9 </td> <td> <span>&rang;</span> </td> <tr><td> <code title="">raquo;</code> </td> <td> U+000BB </td> <td> <span>&raquo;</span> </td> <tr class=impl><td> <code title="">raquo</code> </td> <td> U+000BB </td> <td> <span title="">&raquo;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">rarr;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">rarrap;</code> </td> <td> U+02975 </td> <td> <span>&#10613;</span> </td> <tr><td> <code title="">rarrb;</code> </td> <td> U+021E5 </td> <td> <span>&#8677;</span> </td> <tr><td> <code title="">rarrbfs;</code> </td> <td> U+02920 </td> <td> <span>&#10528;</span> </td> <tr><td> <code title="">rarrc;</code> </td> <td> U+02933 </td> <td> <span>&#10547;</span> </td> <tr><td> <code title="">rarrfs;</code> </td> <td> U+0291E </td> <td> <span>&#10526;</span> </td> <tr><td> <code title="">rarrhk;</code> </td> <td> U+021AA </td> <td> <span>&#8618;</span> </td> <tr><td> <code title="">rarrlp;</code> </td> <td> U+021AC </td> <td> <span>&#8620;</span> </td> <tr><td> <code title="">rarrpl;</code> </td> <td> U+02945 </td> <td> <span>&#10565;</span> </td> <tr><td> <code title="">rarrsim;</code> </td> <td> U+02974 </td> <td> <span>&#10612;</span> </td> <tr><td> <code title="">rarrtl;</code> </td> <td> U+021A3 </td> <td> <span>&#8611;</span> </td> <tr><td> <code title="">rarrw;</code> </td> <td> U+0219D </td> <td> <span>&#8605;</span> </td> <tr><td> <code title="">ratail;</code> </td> <td> U+0291A </td> <td> <span>&#10522;</span> </td> <tr><td> <code title="">ratio;</code> </td> <td> U+02236 </td> <td> <span>&#8758;</span> </td> <tr><td> <code title="">rationals;</code> </td> <td> U+0211A </td> <td> <span>&#8474;</span> </td> <tr><td> <code title="">rbarr;</code> </td> <td> U+0290D </td> <td> <span>&#10509;</span> </td> <tr><td> <code title="">rbbrk;</code> </td> <td> U+02773 </td> <td> <span>&#10099;</span> </td> <tr><td> <code title="">rbrace;</code> </td> <td> U+0007D </td> <td> <span>}</span> </td> <tr><td> <code title="">rbrack;</code> </td> <td> U+0005D </td> <td> <span>]</span> </td> <tr><td> <code title="">rbrke;</code> </td> <td> U+0298C </td> <td> <span>&#10636;</span> </td> <tr><td> <code title="">rbrksld;</code> </td> <td> U+0298E </td> <td> <span>&#10638;</span> </td> <tr><td> <code title="">rbrkslu;</code> </td> <td> U+02990 </td> <td> <span>&#10640;</span> </td> <tr><td> <code title="">rcaron;</code> </td> <td> U+00159 </td> <td> <span>&#345;</span> </td> <tr><td> <code title="">rcedil;</code> </td> <td> U+00157 </td> <td> <span>&#343;</span> </td> <tr><td> <code title="">rceil;</code> </td> <td> U+02309 </td> <td> <span>&rceil;</span> </td> <tr><td> <code title="">rcub;</code> </td> <td> U+0007D </td> <td> <span>}</span> </td> <tr><td> <code title="">rcy;</code> </td> <td> U+00440 </td> <td> <span>&#1088;</span> </td> <tr><td> <code title="">rdca;</code> </td> <td> U+02937 </td> <td> <span>&#10551;</span> </td> <tr><td> <code title="">rdldhar;</code> </td> <td> U+02969 </td> <td> <span>&#10601;</span> </td> <tr><td> <code title="">rdquo;</code> </td> <td> U+0201D </td> <td> <span>&rdquo;</span> </td> <tr><td> <code title="">rdquor;</code> </td> <td> U+0201D </td> <td> <span>&rdquo;</span> </td> <tr><td> <code title="">rdsh;</code> </td> <td> U+021B3 </td> <td> <span>&#8627;</span> </td> <tr><td> <code title="">real;</code> </td> <td> U+0211C </td> <td> <span>&real;</span> </td> <tr><td> <code title="">realine;</code> </td> <td> U+0211B </td> <td> <span>&#8475;</span> </td> <tr><td> <code title="">realpart;</code> </td> <td> U+0211C </td> <td> <span>&real;</span> </td> <tr><td> <code title="">reals;</code> </td> <td> U+0211D </td> <td> <span>&#8477;</span> </td> <tr><td> <code title="">rect;</code> </td> <td> U+025AD </td> <td> <span>&#9645;</span> </td> <tr><td> <code title="">reg;</code> </td> <td> U+000AE </td> <td> <span>&reg;</span> </td> <tr class=impl><td> <code title="">reg</code> </td> <td> U+000AE </td> <td> <span title="">&reg;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">rfisht;</code> </td> <td> U+0297D </td> <td> <span>&#10621;</span> </td> <tr><td> <code title="">rfloor;</code> </td> <td> U+0230B </td> <td> <span>&rfloor;</span> </td> <tr><td> <code title="">rfr;</code> </td> <td> U+1D52F </td> <td> <span>&#120111;</span> </td> <tr><td> <code title="">rhard;</code> </td> <td> U+021C1 </td> <td> <span>&#8641;</span> </td> <tr><td> <code title="">rharu;</code> </td> <td> U+021C0 </td> <td> <span>&#8640;</span> </td> <tr><td> <code title="">rharul;</code> </td> <td> U+0296C </td> <td> <span>&#10604;</span> </td> <tr><td> <code title="">rho;</code> </td> <td> U+003C1 </td> <td> <span>&rho;</span> </td> <tr><td> <code title="">rhov;</code> </td> <td> U+003F1 </td> <td> <span>&#1009;</span> </td> <tr><td> <code title="">rightarrow;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">rightarrowtail;</code> </td> <td> U+021A3 </td> <td> <span>&#8611;</span> </td> <tr><td> <code title="">rightharpoondown;</code> </td> <td> U+021C1 </td> <td> <span>&#8641;</span> </td> <tr><td> <code title="">rightharpoonup;</code> </td> <td> U+021C0 </td> <td> <span>&#8640;</span> </td> <tr><td> <code title="">rightleftarrows;</code> </td> <td> U+021C4 </td> <td> <span>&#8644;</span> </td> <tr><td> <code title="">rightleftharpoons;</code> </td> <td> U+021CC </td> <td> <span>&#8652;</span> </td> <tr><td> <code title="">rightrightarrows;</code> </td> <td> U+021C9 </td> <td> <span>&#8649;</span> </td> <tr><td> <code title="">rightsquigarrow;</code> </td> <td> U+0219D </td> <td> <span>&#8605;</span> </td> <tr><td> <code title="">rightthreetimes;</code> </td> <td> U+022CC </td> <td> <span>&#8908;</span> </td> <tr><td> <code title="">ring;</code> </td> <td> U+002DA </td> <td> <span>&#730;</span> </td> <tr><td> <code title="">risingdotseq;</code> </td> <td> U+02253 </td> <td> <span>&#8787;</span> </td> <tr><td> <code title="">rlarr;</code> </td> <td> U+021C4 </td> <td> <span>&#8644;</span> </td> <tr><td> <code title="">rlhar;</code> </td> <td> U+021CC </td> <td> <span>&#8652;</span> </td> <tr><td> <code title="">rlm;</code> </td> <td> U+0200F </td> <td> <span>&rlm;</span> </td> <tr><td> <code title="">rmoust;</code> </td> <td> U+023B1 </td> <td> <span>&#9137;</span> </td> <tr><td> <code title="">rmoustache;</code> </td> <td> U+023B1 </td> <td> <span>&#9137;</span> </td> <tr><td> <code title="">rnmid;</code> </td> <td> U+02AEE </td> <td> <span>&#10990;</span> </td> <tr><td> <code title="">roang;</code> </td> <td> U+027ED </td> <td> <span>&#10221;</span> </td> <tr><td> <code title="">roarr;</code> </td> <td> U+021FE </td> <td> <span>&#8702;</span> </td> <tr><td> <code title="">robrk;</code> </td> <td> U+027E7 </td> <td> <span>&#10215;</span> </td> <tr><td> <code title="">ropar;</code> </td> <td> U+02986 </td> <td> <span>&#10630;</span> </td> <tr><td> <code title="">ropf;</code> </td> <td> U+1D563 </td> <td> <span>&#120163;</span> </td> <tr><td> <code title="">roplus;</code> </td> <td> U+02A2E </td> <td> <span>&#10798;</span> </td> <tr><td> <code title="">rotimes;</code> </td> <td> U+02A35 </td> <td> <span>&#10805;</span> </td> <tr><td> <code title="">rpar;</code> </td> <td> U+00029 </td> <td> <span>)</span> </td> <tr><td> <code title="">rpargt;</code> </td> <td> U+02994 </td> <td> <span>&#10644;</span> </td> <tr><td> <code title="">rppolint;</code> </td> <td> U+02A12 </td> <td> <span>&#10770;</span> </td> <tr><td> <code title="">rrarr;</code> </td> <td> U+021C9 </td> <td> <span>&#8649;</span> </td> <tr><td> <code title="">rsaquo;</code> </td> <td> U+0203A </td> <td> <span>&rsaquo;</span> </td> <tr><td> <code title="">rscr;</code> </td> <td> U+1D4C7 </td> <td> <span>&#120007;</span> </td> <tr><td> <code title="">rsh;</code> </td> <td> U+021B1 </td> <td> <span>&#8625;</span> </td> <tr><td> <code title="">rsqb;</code> </td> <td> U+0005D </td> <td> <span>]</span> </td> <tr><td> <code title="">rsquo;</code> </td> <td> U+02019 </td> <td> <span>&rsquo;</span> </td> <tr><td> <code title="">rsquor;</code> </td> <td> U+02019 </td> <td> <span>&rsquo;</span> </td> <tr><td> <code title="">rthree;</code> </td> <td> U+022CC </td> <td> <span>&#8908;</span> </td> <tr><td> <code title="">rtimes;</code> </td> <td> U+022CA </td> <td> <span>&#8906;</span> </td> <tr><td> <code title="">rtri;</code> </td> <td> U+025B9 </td> <td> <span>&#9657;</span> </td> <tr><td> <code title="">rtrie;</code> </td> <td> U+022B5 </td> <td> <span>&#8885;</span> </td> <tr><td> <code title="">rtrif;</code> </td> <td> U+025B8 </td> <td> <span>&#9656;</span> </td> <tr><td> <code title="">rtriltri;</code> </td> <td> U+029CE </td> <td> <span>&#10702;</span> </td> <tr><td> <code title="">ruluhar;</code> </td> <td> U+02968 </td> <td> <span>&#10600;</span> </td> <tr><td> <code title="">rx;</code> </td> <td> U+0211E </td> <td> <span>&#8478;</span> </td> <tr><td> <code title="">sacute;</code> </td> <td> U+0015B </td> <td> <span>&#347;</span> </td> <tr><td> <code title="">sbquo;</code> </td> <td> U+0201A </td> <td> <span>&sbquo;</span> </td> <tr><td> <code title="">sc;</code> </td> <td> U+0227B </td> <td> <span>&#8827;</span> </td> <tr><td> <code title="">scE;</code> </td> <td> U+02AB4 </td> <td> <span>&#10932;</span> </td> <tr><td> <code title="">scap;</code> </td> <td> U+02AB8 </td> <td> <span>&#10936;</span> </td> <tr><td> <code title="">scaron;</code> </td> <td> U+00161 </td> <td> <span>&scaron;</span> </td> <tr><td> <code title="">sccue;</code> </td> <td> U+0227D </td> <td> <span>&#8829;</span> </td> <tr><td> <code title="">sce;</code> </td> <td> U+02AB0 </td> <td> <span>&#10928;</span> </td> <tr><td> <code title="">scedil;</code> </td> <td> U+0015F </td> <td> <span>&#351;</span> </td> <tr><td> <code title="">scirc;</code> </td> <td> U+0015D </td> <td> <span>&#349;</span> </td> <tr><td> <code title="">scnE;</code> </td> <td> U+02AB6 </td> <td> <span>&#10934;</span> </td> <tr><td> <code title="">scnap;</code> </td> <td> U+02ABA </td> <td> <span>&#10938;</span> </td> <tr><td> <code title="">scnsim;</code> </td> <td> U+022E9 </td> <td> <span>&#8937;</span> </td> <tr><td> <code title="">scpolint;</code> </td> <td> U+02A13 </td> <td> <span>&#10771;</span> </td> <tr><td> <code title="">scsim;</code> </td> <td> U+0227F </td> <td> <span>&#8831;</span> </td> <tr><td> <code title="">scy;</code> </td> <td> U+00441 </td> <td> <span>&#1089;</span> </td> <tr><td> <code title="">sdot;</code> </td> <td> U+022C5 </td> <td> <span>&sdot;</span> </td> <tr><td> <code title="">sdotb;</code> </td> <td> U+022A1 </td> <td> <span>&#8865;</span> </td> <tr><td> <code title="">sdote;</code> </td> <td> U+02A66 </td> <td> <span>&#10854;</span> </td> <tr><td> <code title="">seArr;</code> </td> <td> U+021D8 </td> <td> <span>&#8664;</span> </td> <tr><td> <code title="">searhk;</code> </td> <td> U+02925 </td> <td> <span>&#10533;</span> </td> <tr><td> <code title="">searr;</code> </td> <td> U+02198 </td> <td> <span>&#8600;</span> </td> <tr><td> <code title="">searrow;</code> </td> <td> U+02198 </td> <td> <span>&#8600;</span> </td> <tr><td> <code title="">sect;</code> </td> <td> U+000A7 </td> <td> <span>&sect;</span> </td> <tr class=impl><td> <code title="">sect</code> </td> <td> U+000A7 </td> <td> <span title="">&sect;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">semi;</code> </td> <td> U+0003B </td> <td> <span>;</span> </td> <tr><td> <code title="">seswar;</code> </td> <td> U+02929 </td> <td> <span>&#10537;</span> </td> <tr><td> <code title="">setminus;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">setmn;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">sext;</code> </td> <td> U+02736 </td> <td> <span>&#10038;</span> </td> <tr><td> <code title="">sfr;</code> </td> <td> U+1D530 </td> <td> <span>&#120112;</span> </td> <tr><td> <code title="">sfrown;</code> </td> <td> U+02322 </td> <td> <span>&#8994;</span> </td> <tr><td> <code title="">sharp;</code> </td> <td> U+0266F </td> <td> <span>&#9839;</span> </td> <tr><td> <code title="">shchcy;</code> </td> <td> U+00449 </td> <td> <span>&#1097;</span> </td> <tr><td> <code title="">shcy;</code> </td> <td> U+00448 </td> <td> <span>&#1096;</span> </td> <tr><td> <code title="">shortmid;</code> </td> <td> U+02223 </td> <td> <span>&#8739;</span> </td> <tr><td> <code title="">shortparallel;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">shy;</code> </td> <td> U+000AD </td> <td> <span>&shy;</span> </td> <tr class=impl><td> <code title="">shy</code> </td> <td> U+000AD </td> <td> <span title="">&shy;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">sigma;</code> </td> <td> U+003C3 </td> <td> <span>&sigma;</span> </td> <tr><td> <code title="">sigmaf;</code> </td> <td> U+003C2 </td> <td> <span>&sigmaf;</span> </td> <tr><td> <code title="">sigmav;</code> </td> <td> U+003C2 </td> <td> <span>&sigmaf;</span> </td> <tr><td> <code title="">sim;</code> </td> <td> U+0223C </td> <td> <span>&sim;</span> </td> <tr><td> <code title="">simdot;</code> </td> <td> U+02A6A </td> <td> <span>&#10858;</span> </td> <tr><td> <code title="">sime;</code> </td> <td> U+02243 </td> <td> <span>&#8771;</span> </td> <tr><td> <code title="">simeq;</code> </td> <td> U+02243 </td> <td> <span>&#8771;</span> </td> <tr><td> <code title="">simg;</code> </td> <td> U+02A9E </td> <td> <span>&#10910;</span> </td> <tr><td> <code title="">simgE;</code> </td> <td> U+02AA0 </td> <td> <span>&#10912;</span> </td> <tr><td> <code title="">siml;</code> </td> <td> U+02A9D </td> <td> <span>&#10909;</span> </td> <tr><td> <code title="">simlE;</code> </td> <td> U+02A9F </td> <td> <span>&#10911;</span> </td> <tr><td> <code title="">simne;</code> </td> <td> U+02246 </td> <td> <span>&#8774;</span> </td> <tr><td> <code title="">simplus;</code> </td> <td> U+02A24 </td> <td> <span>&#10788;</span> </td> <tr><td> <code title="">simrarr;</code> </td> <td> U+02972 </td> <td> <span>&#10610;</span> </td> <tr><td> <code title="">slarr;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">smallsetminus;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">smashp;</code> </td> <td> U+02A33 </td> <td> <span>&#10803;</span> </td> <tr><td> <code title="">smeparsl;</code> </td> <td> U+029E4 </td> <td> <span>&#10724;</span> </td> <tr><td> <code title="">smid;</code> </td> <td> U+02223 </td> <td> <span>&#8739;</span> </td> <tr><td> <code title="">smile;</code> </td> <td> U+02323 </td> <td> <span>&#8995;</span> </td> <tr><td> <code title="">smt;</code> </td> <td> U+02AAA </td> <td> <span>&#10922;</span> </td> <tr><td> <code title="">smte;</code> </td> <td> U+02AAC </td> <td> <span>&#10924;</span> </td> <tr><td> <code title="">softcy;</code> </td> <td> U+0044C </td> <td> <span>&#1100;</span> </td> <tr><td> <code title="">sol;</code> </td> <td> U+0002F </td> <td> <span>/</span> </td> <tr><td> <code title="">solb;</code> </td> <td> U+029C4 </td> <td> <span>&#10692;</span> </td> <tr><td> <code title="">solbar;</code> </td> <td> U+0233F </td> <td> <span>&#9023;</span> </td> <tr><td> <code title="">sopf;</code> </td> <td> U+1D564 </td> <td> <span>&#120164;</span> </td> <tr><td> <code title="">spades;</code> </td> <td> U+02660 </td> <td> <span>&spades;</span> </td> <tr><td> <code title="">spadesuit;</code> </td> <td> U+02660 </td> <td> <span>&spades;</span> </td> <tr><td> <code title="">spar;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">sqcap;</code> </td> <td> U+02293 </td> <td> <span>&#8851;</span> </td> <tr><td> <code title="">sqcup;</code> </td> <td> U+02294 </td> <td> <span>&#8852;</span> </td> <tr><td> <code title="">sqsub;</code> </td> <td> U+0228F </td> <td> <span>&#8847;</span> </td> <tr><td> <code title="">sqsube;</code> </td> <td> U+02291 </td> <td> <span>&#8849;</span> </td> <tr><td> <code title="">sqsubset;</code> </td> <td> U+0228F </td> <td> <span>&#8847;</span> </td> <tr><td> <code title="">sqsubseteq;</code> </td> <td> U+02291 </td> <td> <span>&#8849;</span> </td> <tr><td> <code title="">sqsup;</code> </td> <td> U+02290 </td> <td> <span>&#8848;</span> </td> <tr><td> <code title="">sqsupe;</code> </td> <td> U+02292 </td> <td> <span>&#8850;</span> </td> <tr><td> <code title="">sqsupset;</code> </td> <td> U+02290 </td> <td> <span>&#8848;</span> </td> <tr><td> <code title="">sqsupseteq;</code> </td> <td> U+02292 </td> <td> <span>&#8850;</span> </td> <tr><td> <code title="">squ;</code> </td> <td> U+025A1 </td> <td> <span>&#9633;</span> </td> <tr><td> <code title="">square;</code> </td> <td> U+025A1 </td> <td> <span>&#9633;</span> </td> <tr><td> <code title="">squarf;</code> </td> <td> U+025AA </td> <td> <span>&#9642;</span> </td> <tr><td> <code title="">squf;</code> </td> <td> U+025AA </td> <td> <span>&#9642;</span> </td> <tr><td> <code title="">srarr;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">sscr;</code> </td> <td> U+1D4C8 </td> <td> <span>&#120008;</span> </td> <tr><td> <code title="">ssetmn;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">ssmile;</code> </td> <td> U+02323 </td> <td> <span>&#8995;</span> </td> <tr><td> <code title="">sstarf;</code> </td> <td> U+022C6 </td> <td> <span>&#8902;</span> </td> <tr><td> <code title="">star;</code> </td> <td> U+02606 </td> <td> <span>&#9734;</span> </td> <tr><td> <code title="">starf;</code> </td> <td> U+02605 </td> <td> <span>&#9733;</span> </td> <tr><td> <code title="">straightepsilon;</code> </td> <td> U+003F5 </td> <td> <span>&#1013;</span> </td> <tr><td> <code title="">straightphi;</code> </td> <td> U+003D5 </td> <td> <span>&#981;</span> </td> <tr><td> <code title="">strns;</code> </td> <td> U+000AF </td> <td> <span>&macr;</span> </td> <tr><td> <code title="">sub;</code> </td> <td> U+02282 </td> <td> <span>&sub;</span> </td> <tr><td> <code title="">subE;</code> </td> <td> U+02AC5 </td> <td> <span>&#10949;</span> </td> <tr><td> <code title="">subdot;</code> </td> <td> U+02ABD </td> <td> <span>&#10941;</span> </td> <tr><td> <code title="">sube;</code> </td> <td> U+02286 </td> <td> <span>&sube;</span> </td> <tr><td> <code title="">subedot;</code> </td> <td> U+02AC3 </td> <td> <span>&#10947;</span> </td> <tr><td> <code title="">submult;</code> </td> <td> U+02AC1 </td> <td> <span>&#10945;</span> </td> <tr><td> <code title="">subnE;</code> </td> <td> U+02ACB </td> <td> <span>&#10955;</span> </td> <tr><td> <code title="">subne;</code> </td> <td> U+0228A </td> <td> <span>&#8842;</span> </td> <tr><td> <code title="">subplus;</code> </td> <td> U+02ABF </td> <td> <span>&#10943;</span> </td> <tr><td> <code title="">subrarr;</code> </td> <td> U+02979 </td> <td> <span>&#10617;</span> </td> <tr><td> <code title="">subset;</code> </td> <td> U+02282 </td> <td> <span>&sub;</span> </td> <tr><td> <code title="">subseteq;</code> </td> <td> U+02286 </td> <td> <span>&sube;</span> </td> <tr><td> <code title="">subseteqq;</code> </td> <td> U+02AC5 </td> <td> <span>&#10949;</span> </td> <tr><td> <code title="">subsetneq;</code> </td> <td> U+0228A </td> <td> <span>&#8842;</span> </td> <tr><td> <code title="">subsetneqq;</code> </td> <td> U+02ACB </td> <td> <span>&#10955;</span> </td> <tr><td> <code title="">subsim;</code> </td> <td> U+02AC7 </td> <td> <span>&#10951;</span> </td> <tr><td> <code title="">subsub;</code> </td> <td> U+02AD5 </td> <td> <span>&#10965;</span> </td> <tr><td> <code title="">subsup;</code> </td> <td> U+02AD3 </td> <td> <span>&#10963;</span> </td> <tr><td> <code title="">succ;</code> </td> <td> U+0227B </td> <td> <span>&#8827;</span> </td> <tr><td> <code title="">succapprox;</code> </td> <td> U+02AB8 </td> <td> <span>&#10936;</span> </td> <tr><td> <code title="">succcurlyeq;</code> </td> <td> U+0227D </td> <td> <span>&#8829;</span> </td> <tr><td> <code title="">succeq;</code> </td> <td> U+02AB0 </td> <td> <span>&#10928;</span> </td> <tr><td> <code title="">succnapprox;</code> </td> <td> U+02ABA </td> <td> <span>&#10938;</span> </td> <tr><td> <code title="">succneqq;</code> </td> <td> U+02AB6 </td> <td> <span>&#10934;</span> </td> <tr><td> <code title="">succnsim;</code> </td> <td> U+022E9 </td> <td> <span>&#8937;</span> </td> <tr><td> <code title="">succsim;</code> </td> <td> U+0227F </td> <td> <span>&#8831;</span> </td> <tr><td> <code title="">sum;</code> </td> <td> U+02211 </td> <td> <span>&sum;</span> </td> <tr><td> <code title="">sung;</code> </td> <td> U+0266A </td> <td> <span>&#9834;</span> </td> <tr><td> <code title="">sup1;</code> </td> <td> U+000B9 </td> <td> <span>&sup1;</span> </td> <tr class=impl><td> <code title="">sup1</code> </td> <td> U+000B9 </td> <td> <span title="">&sup1;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">sup2;</code> </td> <td> U+000B2 </td> <td> <span>&sup2;</span> </td> <tr class=impl><td> <code title="">sup2</code> </td> <td> U+000B2 </td> <td> <span title="">&sup2;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">sup3;</code> </td> <td> U+000B3 </td> <td> <span>&sup3;</span> </td> <tr class=impl><td> <code title="">sup3</code> </td> <td> U+000B3 </td> <td> <span title="">&sup3;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">sup;</code> </td> <td> U+02283 </td> <td> <span>&sup;</span> </td> <tr><td> <code title="">supE;</code> </td> <td> U+02AC6 </td> <td> <span>&#10950;</span> </td> <tr><td> <code title="">supdot;</code> </td> <td> U+02ABE </td> <td> <span>&#10942;</span> </td> <tr><td> <code title="">supdsub;</code> </td> <td> U+02AD8 </td> <td> <span>&#10968;</span> </td> <tr><td> <code title="">supe;</code> </td> <td> U+02287 </td> <td> <span>&supe;</span> </td> <tr><td> <code title="">supedot;</code> </td> <td> U+02AC4 </td> <td> <span>&#10948;</span> </td> <tr><td> <code title="">suphsol;</code> </td> <td> U+027C9 </td> <td> <span>&#10185;</span> </td> <tr><td> <code title="">suphsub;</code> </td> <td> U+02AD7 </td> <td> <span>&#10967;</span> </td> <tr><td> <code title="">suplarr;</code> </td> <td> U+0297B </td> <td> <span>&#10619;</span> </td> <tr><td> <code title="">supmult;</code> </td> <td> U+02AC2 </td> <td> <span>&#10946;</span> </td> <tr><td> <code title="">supnE;</code> </td> <td> U+02ACC </td> <td> <span>&#10956;</span> </td> <tr><td> <code title="">supne;</code> </td> <td> U+0228B </td> <td> <span>&#8843;</span> </td> <tr><td> <code title="">supplus;</code> </td> <td> U+02AC0 </td> <td> <span>&#10944;</span> </td> <tr><td> <code title="">supset;</code> </td> <td> U+02283 </td> <td> <span>&sup;</span> </td> <tr><td> <code title="">supseteq;</code> </td> <td> U+02287 </td> <td> <span>&supe;</span> </td> <tr><td> <code title="">supseteqq;</code> </td> <td> U+02AC6 </td> <td> <span>&#10950;</span> </td> <tr><td> <code title="">supsetneq;</code> </td> <td> U+0228B </td> <td> <span>&#8843;</span> </td> <tr><td> <code title="">supsetneqq;</code> </td> <td> U+02ACC </td> <td> <span>&#10956;</span> </td> <tr><td> <code title="">supsim;</code> </td> <td> U+02AC8 </td> <td> <span>&#10952;</span> </td> <tr><td> <code title="">supsub;</code> </td> <td> U+02AD4 </td> <td> <span>&#10964;</span> </td> <tr><td> <code title="">supsup;</code> </td> <td> U+02AD6 </td> <td> <span>&#10966;</span> </td> <tr><td> <code title="">swArr;</code> </td> <td> U+021D9 </td> <td> <span>&#8665;</span> </td> <tr><td> <code title="">swarhk;</code> </td> <td> U+02926 </td> <td> <span>&#10534;</span> </td> <tr><td> <code title="">swarr;</code> </td> <td> U+02199 </td> <td> <span>&#8601;</span> </td> <tr><td> <code title="">swarrow;</code> </td> <td> U+02199 </td> <td> <span>&#8601;</span> </td> <tr><td> <code title="">swnwar;</code> </td> <td> U+0292A </td> <td> <span>&#10538;</span> </td> <tr><td> <code title="">szlig;</code> </td> <td> U+000DF </td> <td> <span>&szlig;</span> </td> <tr class=impl><td> <code title="">szlig</code> </td> <td> U+000DF </td> <td> <span title="">&szlig;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">target;</code> </td> <td> U+02316 </td> <td> <span>&#8982;</span> </td> <tr><td> <code title="">tau;</code> </td> <td> U+003C4 </td> <td> <span>&tau;</span> </td> <tr><td> <code title="">tbrk;</code> </td> <td> U+023B4 </td> <td> <span>&#9140;</span> </td> <tr><td> <code title="">tcaron;</code> </td> <td> U+00165 </td> <td> <span>&#357;</span> </td> <tr><td> <code title="">tcedil;</code> </td> <td> U+00163 </td> <td> <span>&#355;</span> </td> <tr><td> <code title="">tcy;</code> </td> <td> U+00442 </td> <td> <span>&#1090;</span> </td> <tr><td> <code title="">tdot;</code> </td> <td> U+020DB </td> <td> <span>&#9676;&#8411;</span> </td> <tr><td> <code title="">telrec;</code> </td> <td> U+02315 </td> <td> <span>&#8981;</span> </td> <tr><td> <code title="">tfr;</code> </td> <td> U+1D531 </td> <td> <span>&#120113;</span> </td> <tr><td> <code title="">there4;</code> </td> <td> U+02234 </td> <td> <span>&there4;</span> </td> <tr><td> <code title="">therefore;</code> </td> <td> U+02234 </td> <td> <span>&there4;</span> </td> <tr><td> <code title="">theta;</code> </td> <td> U+003B8 </td> <td> <span>&theta;</span> </td> <tr><td> <code title="">thetasym;</code> </td> <td> U+003D1 </td> <td> <span>&thetasym;</span> </td> <tr><td> <code title="">thetav;</code> </td> <td> U+003D1 </td> <td> <span>&thetasym;</span> </td> <tr><td> <code title="">thickapprox;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">thicksim;</code> </td> <td> U+0223C </td> <td> <span>&sim;</span> </td> <tr><td> <code title="">thinsp;</code> </td> <td> U+02009 </td> <td> <span>&thinsp;</span> </td> <tr><td> <code title="">thkap;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">thksim;</code> </td> <td> U+0223C </td> <td> <span>&sim;</span> </td> <tr><td> <code title="">thorn;</code> </td> <td> U+000FE </td> <td> <span>&thorn;</span> </td> <tr class=impl><td> <code title="">thorn</code> </td> <td> U+000FE </td> <td> <span title="">&thorn;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">tilde;</code> </td> <td> U+002DC </td> <td> <span>&tilde;</span> </td> <tr><td> <code title="">times;</code> </td> <td> U+000D7 </td> <td> <span>&times;</span> </td> <tr class=impl><td> <code title="">times</code> </td> <td> U+000D7 </td> <td> <span title="">&times;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">timesb;</code> </td> <td> U+022A0 </td> <td> <span>&#8864;</span> </td> <tr><td> <code title="">timesbar;</code> </td> <td> U+02A31 </td> <td> <span>&#10801;</span> </td> <tr><td> <code title="">timesd;</code> </td> <td> U+02A30 </td> <td> <span>&#10800;</span> </td> <tr><td> <code title="">tint;</code> </td> <td> U+0222D </td> <td> <span>&#8749;</span> </td> <tr><td> <code title="">toea;</code> </td> <td> U+02928 </td> <td> <span>&#10536;</span> </td> <tr><td> <code title="">top;</code> </td> <td> U+022A4 </td> <td> <span>&#8868;</span> </td> <tr><td> <code title="">topbot;</code> </td> <td> U+02336 </td> <td> <span>&#9014;</span> </td> <tr><td> <code title="">topcir;</code> </td> <td> U+02AF1 </td> <td> <span>&#10993;</span> </td> <tr><td> <code title="">topf;</code> </td> <td> U+1D565 </td> <td> <span>&#120165;</span> </td> <tr><td> <code title="">topfork;</code> </td> <td> U+02ADA </td> <td> <span>&#10970;</span> </td> <tr><td> <code title="">tosa;</code> </td> <td> U+02929 </td> <td> <span>&#10537;</span> </td> <tr><td> <code title="">tprime;</code> </td> <td> U+02034 </td> <td> <span>&#8244;</span> </td> <tr><td> <code title="">trade;</code> </td> <td> U+02122 </td> <td> <span>&trade;</span> </td> <tr><td> <code title="">triangle;</code> </td> <td> U+025B5 </td> <td> <span>&#9653;</span> </td> <tr><td> <code title="">triangledown;</code> </td> <td> U+025BF </td> <td> <span>&#9663;</span> </td> <tr><td> <code title="">triangleleft;</code> </td> <td> U+025C3 </td> <td> <span>&#9667;</span> </td> <tr><td> <code title="">trianglelefteq;</code> </td> <td> U+022B4 </td> <td> <span>&#8884;</span> </td> <tr><td> <code title="">triangleq;</code> </td> <td> U+0225C </td> <td> <span>&#8796;</span> </td> <tr><td> <code title="">triangleright;</code> </td> <td> U+025B9 </td> <td> <span>&#9657;</span> </td> <tr><td> <code title="">trianglerighteq;</code> </td> <td> U+022B5 </td> <td> <span>&#8885;</span> </td> <tr><td> <code title="">tridot;</code> </td> <td> U+025EC </td> <td> <span>&#9708;</span> </td> <tr><td> <code title="">trie;</code> </td> <td> U+0225C </td> <td> <span>&#8796;</span> </td> <tr><td> <code title="">triminus;</code> </td> <td> U+02A3A </td> <td> <span>&#10810;</span> </td> <tr><td> <code title="">triplus;</code> </td> <td> U+02A39 </td> <td> <span>&#10809;</span> </td> <tr><td> <code title="">trisb;</code> </td> <td> U+029CD </td> <td> <span>&#10701;</span> </td> <tr><td> <code title="">tritime;</code> </td> <td> U+02A3B </td> <td> <span>&#10811;</span> </td> <tr><td> <code title="">trpezium;</code> </td> <td> U+023E2 </td> <td> <span>&#9186;</span> </td> <tr><td> <code title="">tscr;</code> </td> <td> U+1D4C9 </td> <td> <span>&#120009;</span> </td> <tr><td> <code title="">tscy;</code> </td> <td> U+00446 </td> <td> <span>&#1094;</span> </td> <tr><td> <code title="">tshcy;</code> </td> <td> U+0045B </td> <td> <span>&#1115;</span> </td> <tr><td> <code title="">tstrok;</code> </td> <td> U+00167 </td> <td> <span>&#359;</span> </td> <tr><td> <code title="">twixt;</code> </td> <td> U+0226C </td> <td> <span>&#8812;</span> </td> <tr><td> <code title="">twoheadleftarrow;</code> </td> <td> U+0219E </td> <td> <span>&#8606;</span> </td> <tr><td> <code title="">twoheadrightarrow;</code> </td> <td> U+021A0 </td> <td> <span>&#8608;</span> </td> <tr><td> <code title="">uArr;</code> </td> <td> U+021D1 </td> <td> <span>&uArr;</span> </td> <tr><td> <code title="">uHar;</code> </td> <td> U+02963 </td> <td> <span>&#10595;</span> </td> <tr><td> <code title="">uacute;</code> </td> <td> U+000FA </td> <td> <span>&uacute;</span> </td> <tr class=impl><td> <code title="">uacute</code> </td> <td> U+000FA </td> <td> <span title="">&uacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">uarr;</code> </td> <td> U+02191 </td> <td> <span>&uarr;</span> </td> <tr><td> <code title="">ubrcy;</code> </td> <td> U+0045E </td> <td> <span>&#1118;</span> </td> <tr><td> <code title="">ubreve;</code> </td> <td> U+0016D </td> <td> <span>&#365;</span> </td> <tr><td> <code title="">ucirc;</code> </td> <td> U+000FB </td> <td> <span>&ucirc;</span> </td> <tr class=impl><td> <code title="">ucirc</code> </td> <td> U+000FB </td> <td> <span title="">&ucirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ucy;</code> </td> <td> U+00443 </td> <td> <span>&#1091;</span> </td> <tr><td> <code title="">udarr;</code> </td> <td> U+021C5 </td> <td> <span>&#8645;</span> </td> <tr><td> <code title="">udblac;</code> </td> <td> U+00171 </td> <td> <span>&#369;</span> </td> <tr><td> <code title="">udhar;</code> </td> <td> U+0296E </td> <td> <span>&#10606;</span> </td> <tr><td> <code title="">ufisht;</code> </td> <td> U+0297E </td> <td> <span>&#10622;</span> </td> <tr><td> <code title="">ufr;</code> </td> <td> U+1D532 </td> <td> <span>&#120114;</span> </td> <tr><td> <code title="">ugrave;</code> </td> <td> U+000F9 </td> <td> <span>&ugrave;</span> </td> <tr class=impl><td> <code title="">ugrave</code> </td> <td> U+000F9 </td> <td> <span title="">&ugrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">uharl;</code> </td> <td> U+021BF </td> <td> <span>&#8639;</span> </td> <tr><td> <code title="">uharr;</code> </td> <td> U+021BE </td> <td> <span>&#8638;</span> </td> <tr><td> <code title="">uhblk;</code> </td> <td> U+02580 </td> <td> <span>&#9600;</span> </td> <tr><td> <code title="">ulcorn;</code> </td> <td> U+0231C </td> <td> <span>&#8988;</span> </td> <tr><td> <code title="">ulcorner;</code> </td> <td> U+0231C </td> <td> <span>&#8988;</span> </td> <tr><td> <code title="">ulcrop;</code> </td> <td> U+0230F </td> <td> <span>&#8975;</span> </td> <tr><td> <code title="">ultri;</code> </td> <td> U+025F8 </td> <td> <span>&#9720;</span> </td> <tr><td> <code title="">umacr;</code> </td> <td> U+0016B </td> <td> <span>&#363;</span> </td> <tr><td> <code title="">uml;</code> </td> <td> U+000A8 </td> <td> <span>&uml;</span> </td> <tr class=impl><td> <code title="">uml</code> </td> <td> U+000A8 </td> <td> <span title="">&uml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">uogon;</code> </td> <td> U+00173 </td> <td> <span>&#371;</span> </td> <tr><td> <code title="">uopf;</code> </td> <td> U+1D566 </td> <td> <span>&#120166;</span> </td> <tr><td> <code title="">uparrow;</code> </td> <td> U+02191 </td> <td> <span>&uarr;</span> </td> <tr><td> <code title="">updownarrow;</code> </td> <td> U+02195 </td> <td> <span>&#8597;</span> </td> <tr><td> <code title="">upharpoonleft;</code> </td> <td> U+021BF </td> <td> <span>&#8639;</span> </td> <tr><td> <code title="">upharpoonright;</code> </td> <td> U+021BE </td> <td> <span>&#8638;</span> </td> <tr><td> <code title="">uplus;</code> </td> <td> U+0228E </td> <td> <span>&#8846;</span> </td> <tr><td> <code title="">upsi;</code> </td> <td> U+003C5 </td> <td> <span>&upsilon;</span> </td> <tr><td> <code title="">upsih;</code> </td> <td> U+003D2 </td> <td> <span>&upsih;</span> </td> <tr><td> <code title="">upsilon;</code> </td> <td> U+003C5 </td> <td> <span>&upsilon;</span> </td> <tr><td> <code title="">upuparrows;</code> </td> <td> U+021C8 </td> <td> <span>&#8648;</span> </td> <tr><td> <code title="">urcorn;</code> </td> <td> U+0231D </td> <td> <span>&#8989;</span> </td> <tr><td> <code title="">urcorner;</code> </td> <td> U+0231D </td> <td> <span>&#8989;</span> </td> <tr><td> <code title="">urcrop;</code> </td> <td> U+0230E </td> <td> <span>&#8974;</span> </td> <tr><td> <code title="">uring;</code> </td> <td> U+0016F </td> <td> <span>&#367;</span> </td> <tr><td> <code title="">urtri;</code> </td> <td> U+025F9 </td> <td> <span>&#9721;</span> </td> <tr><td> <code title="">uscr;</code> </td> <td> U+1D4CA </td> <td> <span>&#120010;</span> </td> <tr><td> <code title="">utdot;</code> </td> <td> U+022F0 </td> <td> <span>&#8944;</span> </td> <tr><td> <code title="">utilde;</code> </td> <td> U+00169 </td> <td> <span>&#361;</span> </td> <tr><td> <code title="">utri;</code> </td> <td> U+025B5 </td> <td> <span>&#9653;</span> </td> <tr><td> <code title="">utrif;</code> </td> <td> U+025B4 </td> <td> <span>&#9652;</span> </td> <tr><td> <code title="">uuarr;</code> </td> <td> U+021C8 </td> <td> <span>&#8648;</span> </td> <tr><td> <code title="">uuml;</code> </td> <td> U+000FC </td> <td> <span>&uuml;</span> </td> <tr class=impl><td> <code title="">uuml</code> </td> <td> U+000FC </td> <td> <span title="">&uuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">uwangle;</code> </td> <td> U+029A7 </td> <td> <span>&#10663;</span> </td> <tr><td> <code title="">vArr;</code> </td> <td> U+021D5 </td> <td> <span>&#8661;</span> </td> <tr><td> <code title="">vBar;</code> </td> <td> U+02AE8 </td> <td> <span>&#10984;</span> </td> <tr><td> <code title="">vBarv;</code> </td> <td> U+02AE9 </td> <td> <span>&#10985;</span> </td> <tr><td> <code title="">vDash;</code> </td> <td> U+022A8 </td> <td> <span>&#8872;</span> </td> <tr><td> <code title="">vangrt;</code> </td> <td> U+0299C </td> <td> <span>&#10652;</span> </td> <tr><td> <code title="">varepsilon;</code> </td> <td> U+003F5 </td> <td> <span>&#1013;</span> </td> <tr><td> <code title="">varkappa;</code> </td> <td> U+003F0 </td> <td> <span>&#1008;</span> </td> <tr><td> <code title="">varnothing;</code> </td> <td> U+02205 </td> <td> <span>&empty;</span> </td> <tr><td> <code title="">varphi;</code> </td> <td> U+003D5 </td> <td> <span>&#981;</span> </td> <tr><td> <code title="">varpi;</code> </td> <td> U+003D6 </td> <td> <span>&piv;</span> </td> <tr><td> <code title="">varpropto;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">varr;</code> </td> <td> U+02195 </td> <td> <span>&#8597;</span> </td> <tr><td> <code title="">varrho;</code> </td> <td> U+003F1 </td> <td> <span>&#1009;</span> </td> <tr><td> <code title="">varsigma;</code> </td> <td> U+003C2 </td> <td> <span>&sigmaf;</span> </td> <tr><td> <code title="">vartheta;</code> </td> <td> U+003D1 </td> <td> <span>&thetasym;</span> </td> <tr><td> <code title="">vartriangleleft;</code> </td> <td> U+022B2 </td> <td> <span>&#8882;</span> </td> <tr><td> <code title="">vartriangleright;</code> </td> <td> U+022B3 </td> <td> <span>&#8883;</span> </td> <tr><td> <code title="">vcy;</code> </td> <td> U+00432 </td> <td> <span>&#1074;</span> </td> <tr><td> <code title="">vdash;</code> </td> <td> U+022A2 </td> <td> <span>&#8866;</span> </td> <tr><td> <code title="">vee;</code> </td> <td> U+02228 </td> <td> <span>&or;</span> </td> <tr><td> <code title="">veebar;</code> </td> <td> U+022BB </td> <td> <span>&#8891;</span> </td> <tr><td> <code title="">veeeq;</code> </td> <td> U+0225A </td> <td> <span>&#8794;</span> </td> <tr><td> <code title="">vellip;</code> </td> <td> U+022EE </td> <td> <span>&#8942;</span> </td> <tr><td> <code title="">verbar;</code> </td> <td> U+0007C </td> <td> <span>|</span> </td> <tr><td> <code title="">vert;</code> </td> <td> U+0007C </td> <td> <span>|</span> </td> <tr><td> <code title="">vfr;</code> </td> <td> U+1D533 </td> <td> <span>&#120115;</span> </td> <tr><td> <code title="">vltri;</code> </td> <td> U+022B2 </td> <td> <span>&#8882;</span> </td> <tr><td> <code title="">vopf;</code> </td> <td> U+1D567 </td> <td> <span>&#120167;</span> </td> <tr><td> <code title="">vprop;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">vrtri;</code> </td> <td> U+022B3 </td> <td> <span>&#8883;</span> </td> <tr><td> <code title="">vscr;</code> </td> <td> U+1D4CB </td> <td> <span>&#120011;</span> </td> <tr><td> <code title="">vzigzag;</code> </td> <td> U+0299A </td> <td> <span>&#10650;</span> </td> <tr><td> <code title="">wcirc;</code> </td> <td> U+00175 </td> <td> <span>&#373;</span> </td> <tr><td> <code title="">wedbar;</code> </td> <td> U+02A5F </td> <td> <span>&#10847;</span> </td> <tr><td> <code title="">wedge;</code> </td> <td> U+02227 </td> <td> <span>&and;</span> </td> <tr><td> <code title="">wedgeq;</code> </td> <td> U+02259 </td> <td> <span>&#8793;</span> </td> <tr><td> <code title="">weierp;</code> </td> <td> U+02118 </td> <td> <span>&weierp;</span> </td> <tr><td> <code title="">wfr;</code> </td> <td> U+1D534 </td> <td> <span>&#120116;</span> </td> <tr><td> <code title="">wopf;</code> </td> <td> U+1D568 </td> <td> <span>&#120168;</span> </td> <tr><td> <code title="">wp;</code> </td> <td> U+02118 </td> <td> <span>&weierp;</span> </td> <tr><td> <code title="">wr;</code> </td> <td> U+02240 </td> <td> <span>&#8768;</span> </td> <tr><td> <code title="">wreath;</code> </td> <td> U+02240 </td> <td> <span>&#8768;</span> </td> <tr><td> <code title="">wscr;</code> </td> <td> U+1D4CC </td> <td> <span>&#120012;</span> </td> <tr><td> <code title="">xcap;</code> </td> <td> U+022C2 </td> <td> <span>&#8898;</span> </td> <tr><td> <code title="">xcirc;</code> </td> <td> U+025EF </td> <td> <span>&#9711;</span> </td> <tr><td> <code title="">xcup;</code> </td> <td> U+022C3 </td> <td> <span>&#8899;</span> </td> <tr><td> <code title="">xdtri;</code> </td> <td> U+025BD </td> <td> <span>&#9661;</span> </td> <tr><td> <code title="">xfr;</code> </td> <td> U+1D535 </td> <td> <span>&#120117;</span> </td> <tr><td> <code title="">xhArr;</code> </td> <td> U+027FA </td> <td> <span>&#10234;</span> </td> <tr><td> <code title="">xharr;</code> </td> <td> U+027F7 </td> <td> <span>&#10231;</span> </td> <tr><td> <code title="">xi;</code> </td> <td> U+003BE </td> <td> <span>&xi;</span> </td> <tr><td> <code title="">xlArr;</code> </td> <td> U+027F8 </td> <td> <span>&#10232;</span> </td> <tr><td> <code title="">xlarr;</code> </td> <td> U+027F5 </td> <td> <span>&#10229;</span> </td> <tr><td> <code title="">xmap;</code> </td> <td> U+027FC </td> <td> <span>&#10236;</span> </td> <tr><td> <code title="">xnis;</code> </td> <td> U+022FB </td> <td> <span>&#8955;</span> </td> <tr><td> <code title="">xodot;</code> </td> <td> U+02A00 </td> <td> <span>&#10752;</span> </td> <tr><td> <code title="">xopf;</code> </td> <td> U+1D569 </td> <td> <span>&#120169;</span> </td> <tr><td> <code title="">xoplus;</code> </td> <td> U+02A01 </td> <td> <span>&#10753;</span> </td> <tr><td> <code title="">xotime;</code> </td> <td> U+02A02 </td> <td> <span>&#10754;</span> </td> <tr><td> <code title="">xrArr;</code> </td> <td> U+027F9 </td> <td> <span>&#10233;</span> </td> <tr><td> <code title="">xrarr;</code> </td> <td> U+027F6 </td> <td> <span>&#10230;</span> </td> <tr><td> <code title="">xscr;</code> </td> <td> U+1D4CD </td> <td> <span>&#120013;</span> </td> <tr><td> <code title="">xsqcup;</code> </td> <td> U+02A06 </td> <td> <span>&#10758;</span> </td> <tr><td> <code title="">xuplus;</code> </td> <td> U+02A04 </td> <td> <span>&#10756;</span> </td> <tr><td> <code title="">xutri;</code> </td> <td> U+025B3 </td> <td> <span>&#9651;</span> </td> <tr><td> <code title="">xvee;</code> </td> <td> U+022C1 </td> <td> <span>&#8897;</span> </td> <tr><td> <code title="">xwedge;</code> </td> <td> U+022C0 </td> <td> <span>&#8896;</span> </td> <tr><td> <code title="">yacute;</code> </td> <td> U+000FD </td> <td> <span>&yacute;</span> </td> <tr class=impl><td> <code title="">yacute</code> </td> <td> U+000FD </td> <td> <span title="">&yacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">yacy;</code> </td> <td> U+0044F </td> <td> <span>&#1103;</span> </td> <tr><td> <code title="">ycirc;</code> </td> <td> U+00177 </td> <td> <span>&#375;</span> </td> <tr><td> <code title="">ycy;</code> </td> <td> U+0044B </td> <td> <span>&#1099;</span> </td> <tr><td> <code title="">yen;</code> </td> <td> U+000A5 </td> <td> <span>&yen;</span> </td> <tr class=impl><td> <code title="">yen</code> </td> <td> U+000A5 </td> <td> <span title="">&yen;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">yfr;</code> </td> <td> U+1D536 </td> <td> <span>&#120118;</span> </td> <tr><td> <code title="">yicy;</code> </td> <td> U+00457 </td> <td> <span>&#1111;</span> </td> <tr><td> <code title="">yopf;</code> </td> <td> U+1D56A </td> <td> <span>&#120170;</span> </td> <tr><td> <code title="">yscr;</code> </td> <td> U+1D4CE </td> <td> <span>&#120014;</span> </td> <tr><td> <code title="">yucy;</code> </td> <td> U+0044E </td> <td> <span>&#1102;</span> </td> <tr><td> <code title="">yuml;</code> </td> <td> U+000FF </td> <td> <span>&yuml;</span> </td> <tr class=impl><td> <code title="">yuml</code> </td> <td> U+000FF </td> <td> <span title="">&yuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">zacute;</code> </td> <td> U+0017A </td> <td> <span>&#378;</span> </td> <tr><td> <code title="">zcaron;</code> </td> <td> U+0017E </td> <td> <span>&#382;</span> </td> <tr><td> <code title="">zcy;</code> </td> <td> U+00437 </td> <td> <span>&#1079;</span> </td> <tr><td> <code title="">zdot;</code> </td> <td> U+0017C </td> <td> <span>&#380;</span> </td> <tr><td> <code title="">zeetrf;</code> </td> <td> U+02128 </td> <td> <span>&#8488;</span> </td> <tr><td> <code title="">zeta;</code> </td> <td> U+003B6 </td> <td> <span>&zeta;</span> </td> <tr><td> <code title="">zfr;</code> </td> <td> U+1D537 </td> <td> <span>&#120119;</span> </td> <tr><td> <code title="">zhcy;</code> </td> <td> U+00436 </td> <td> <span>&#1078;</span> </td> <tr><td> <code title="">zigrarr;</code> </td> <td> U+021DD </td> <td> <span>&#8669;</span> </td> <tr><td> <code title="">zopf;</code> </td> <td> U+1D56B </td> <td> <span>&#120171;</span> </td> <tr><td> <code title="">zscr;</code> </td> <td> U+1D4CF </td> <td> <span>&#120015;</span> </td> <tr><td> <code title="">zwj;</code> </td> <td> U+0200D </td> <td> <span>&zwj;</span> </td> <tr><td> <code title="">zwnj;</code> </td> <td> U+0200C </td> <td> <span>&zwnj;</span> </td> </table><!--
   If we want to add character references, Almorca suggests:
   > I would add &sub1; (character U+2081), &sub2;
   > (character U+2082) and &sub3; (character U+2083). They
   > would are the equivalent to &sup1;, &sup2;, and &sup3;.
   See also: http://www.w3.org/2003/entities/
  --></div>

  <p><i>The glyphs displayed above are non-normative. Refer to the
  Unicode specifications for formal definitions of the characters
  listed above.</i></p>



  <h2 id=the-xhtml-syntax><span class=secno>11 </span><dfn id=xhtml>The XHTML syntax</dfn></h2>

  <p class=note>This section only describes the rules for XML
  resources. Rules for <code><a href=#text/html>text/html</a></code> resources are discussed
  in the section above entitled "<a href=#syntax>The HTML syntax</a>".</p>


  <div class=impl>

  <h3 id=writing-xhtml-documents><span class=secno>11.1 </span>Writing XHTML documents</h3>

  </div>

  <p>The syntax for using HTML with XML, whether in XHTML documents or
  embedded in other XML documents, is defined in the XML and
  Namespaces in XML specifications. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a></p>

  <p>This specification does not define any syntax-level requirements
  beyond those defined for XML proper.</p>

  <p>XML documents may contain a <code>DOCTYPE</code> if desired, but
  this is not required to conform to this specification. This
  specification does not define a public or system identifier, nor
  provide a format DTD.</p>

  <p class=note>According to the XML specification, XML processors
  are not guaranteed to process the external DTD subset referenced in
  the DOCTYPE. This means, for example, that using entity references
  for characters in XHTML documents is unsafe if they are defined in
  an external file (except for <code title="">&amp;lt;</code>, <code title="">&amp;gt;</code>, <code title="">&amp;amp;</code>, <code title="">&amp;quot;</code> and <code title="">&amp;apos;</code>).</p>


  <div class=impl>

  <h3 id=parsing-xhtml-documents><span class=secno>11.2 </span>Parsing XHTML documents</h3>

  <p>This section describes the relationship between XML and the DOM,
  with a particular emphasis on how this interacts with HTML.</p>

  <p>An <dfn id=xml-parser>XML parser</dfn>, for the purposes of this specification,
  is a construct that follows the rules given in the XML specification
  to map a string of bytes or characters into a <code><a href=#document>Document</a></code>
  object.</p>

  <p>An <a href=#xml-parser>XML parser</a> is either associated with a
  <code><a href=#document>Document</a></code> object when it is created, or creates one
  implicitly.</p>

  <p>This <code><a href=#document>Document</a></code> must then be populated with DOM nodes
  that represent the tree structure of the input passed to the parser,
  as defined by the XML specification, the Namespaces in XML
  specification, and the DOM Core specification. DOM mutation events
  must not fire for the operations that the <a href=#xml-parser>XML parser</a>
  performs on the <code><a href=#document>Document</a></code>'s tree, but the user agent
  must act as if elements and attributes were individually appended
  and set respectively so as to trigger rules in this specification
  regarding what happens when an element in inserted into a document
  or has its attributes set. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a> <a href=#refsDOMCORE>[DOMCORE]</a>
  <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>

  <p>Between the time an element's start tag is parsed and the time
  either the element's end tag is parsed on the parser detects a
  well-formedness error, the user agent must act as if the element was
  in a <a href=#stack-of-open-elements>stack of open elements</a>.</p>

  <p class=note>This is used by the <code><a href=#the-object-element>object</a></code> element to
  avoid instantiating plugins before the <code><a href=#the-param-element>param</a></code> element
  children have been parsed.</p>

  <p>This specification provides the following additional information
  that user agents should use when retrieving an external entity: the
  public identifiers given in the following list all correspond to <a href=data:application/xml-dtd;base64,PCFFTlRJVFkgVGFiICImI3g5OyI%2BPCFFTlRJVFkgTmV3TGluZSAiJiN4QTsiPjwhRU5USVRZIGV4Y2wgIiYjeDIxOyI%2BPCFFTlRJVFkgcXVvdCAiJiN4MjI7Ij48IUVOVElUWSBRVU9UICImI3gyMjsiPjwhRU5USVRZIG51bSAiJiN4MjM7Ij48IUVOVElUWSBkb2xsYXIgIiYjeDI0OyI%2BPCFFTlRJVFkgcGVyY250ICImI3gyNTsiPjwhRU5USVRZIGFtcCAiJiN4MjY7Ij48IUVOVElUWSBBTVAgIiYjeDI2OyI%2BPCFFTlRJVFkgYXBvcyAiJiN4Mjc7Ij48IUVOVElUWSBscGFyICImI3gyODsiPjwhRU5USVRZIHJwYXIgIiYjeDI5OyI%2BPCFFTlRJVFkgYXN0ICImI3gyQTsiPjwhRU5USVRZIG1pZGFzdCAiJiN4MkE7Ij48IUVOVElUWSBwbHVzICImI3gyQjsiPjwhRU5USVRZIGNvbW1hICImI3gyQzsiPjwhRU5USVRZIHBlcmlvZCAiJiN4MkU7Ij48IUVOVElUWSBzb2wgIiYjeDJGOyI%2BPCFFTlRJVFkgY29sb24gIiYjeDNBOyI%2BPCFFTlRJVFkgc2VtaSAiJiN4M0I7Ij48IUVOVElUWSBsdCAiJiN4M0M7Ij48IUVOVElUWSBMVCAiJiN4M0M7Ij48IUVOVElUWSBlcXVhbHMgIiYjeDNEOyI%2BPCFFTlRJVFkgZ3QgIiYjeDNFOyI%2BPCFFTlRJVFkgR1QgIiYjeDNFOyI%2BPCFFTlRJVFkgcXVlc3QgIiYjeDNGOyI%2BPCFFTlRJVFkgY29tbWF0ICImI3g0MDsiPjwhRU5USVRZIGxzcWIgIiYjeDVCOyI%2BPCFFTlRJVFkgbGJyYWNrICImI3g1QjsiPjwhRU5USVRZIGJzb2wgIiYjeDVDOyI%2BPCFFTlRJVFkgcnNxYiAiJiN4NUQ7Ij48IUVOVElUWSByYnJhY2sgIiYjeDVEOyI%2BPCFFTlRJVFkgSGF0ICImI3g1RTsiPjwhRU5USVRZIGxvd2JhciAiJiN4NUY7Ij48IUVOVElUWSBVbmRlckJhciAiJiN4NUY7Ij48IUVOVElUWSBncmF2ZSAiJiN4NjA7Ij48IUVOVElUWSBEaWFjcml0aWNhbEdyYXZlICImI3g2MDsiPjwhRU5USVRZIGxjdWIgIiYjeDdCOyI%2BPCFFTlRJVFkgbGJyYWNlICImI3g3QjsiPjwhRU5USVRZIHZlcmJhciAiJiN4N0M7Ij48IUVOVElUWSB2ZXJ0ICImI3g3QzsiPjwhRU5USVRZIFZlcnRpY2FsTGluZSAiJiN4N0M7Ij48IUVOVElUWSByY3ViICImI3g3RDsiPjwhRU5USVRZIHJicmFjZSAiJiN4N0Q7Ij48IUVOVElUWSBuYnNwICImI3hBMDsiPjwhRU5USVRZIE5vbkJyZWFraW5nU3BhY2UgIiYjeEEwOyI%2BPCFFTlRJVFkgaWV4Y2wgIiYjeEExOyI%2BPCFFTlRJVFkgY2VudCAiJiN4QTI7Ij48IUVOVElUWSBwb3VuZCAiJiN4QTM7Ij48IUVOVElUWSBjdXJyZW4gIiYjeEE0OyI%2BPCFFTlRJVFkgeWVuICImI3hBNTsiPjwhRU5USVRZIGJydmJhciAiJiN4QTY7Ij48IUVOVElUWSBzZWN0ICImI3hBNzsiPjwhRU5USVRZIERvdCAiJiN4QTg7Ij48IUVOVElUWSBkaWUgIiYjeEE4OyI%2BPCFFTlRJVFkgRG91YmxlRG90ICImI3hBODsiPjwhRU5USVRZIHVtbCAiJiN4QTg7Ij48IUVOVElUWSBjb3B5ICImI3hBOTsiPjwhRU5USVRZIENPUFkgIiYjeEE5OyI%2BPCFFTlRJVFkgb3JkZiAiJiN4QUE7Ij48IUVOVElUWSBsYXF1byAiJiN4QUI7Ij48IUVOVElUWSBub3QgIiYjeEFDOyI%2BPCFFTlRJVFkgc2h5ICImI3hBRDsiPjwhRU5USVRZIHJlZyAiJiN4QUU7Ij48IUVOVElUWSBjaXJjbGVkUiAiJiN4QUU7Ij48IUVOVElUWSBSRUcgIiYjeEFFOyI%2BPCFFTlRJVFkgbWFjciAiJiN4QUY7Ij48IUVOVElUWSBzdHJucyAiJiN4QUY7Ij48IUVOVElUWSBkZWcgIiYjeEIwOyI%2BPCFFTlRJVFkgcGx1c21uICImI3hCMTsiPjwhRU5USVRZIHBtICImI3hCMTsiPjwhRU5USVRZIFBsdXNNaW51cyAiJiN4QjE7Ij48IUVOVElUWSBzdXAyICImI3hCMjsiPjwhRU5USVRZIHN1cDMgIiYjeEIzOyI%2BPCFFTlRJVFkgYWN1dGUgIiYjeEI0OyI%2BPCFFTlRJVFkgRGlhY3JpdGljYWxBY3V0ZSAiJiN4QjQ7Ij48IUVOVElUWSBtaWNybyAiJiN4QjU7Ij48IUVOVElUWSBwYXJhICImI3hCNjsiPjwhRU5USVRZIG1pZGRvdCAiJiN4Qjc7Ij48IUVOVElUWSBjZW50ZXJkb3QgIiYjeEI3OyI%2BPCFFTlRJVFkgQ2VudGVyRG90ICImI3hCNzsiPjwhRU5USVRZIGNlZGlsICImI3hCODsiPjwhRU5USVRZIENlZGlsbGEgIiYjeEI4OyI%2BPCFFTlRJVFkgc3VwMSAiJiN4Qjk7Ij48IUVOVElUWSBvcmRtICImI3hCQTsiPjwhRU5USVRZIHJhcXVvICImI3hCQjsiPjwhRU5USVRZIGZyYWMxNCAiJiN4QkM7Ij48IUVOVElUWSBmcmFjMTIgIiYjeEJEOyI%2BPCFFTlRJVFkgaGFsZiAiJiN4QkQ7Ij48IUVOVElUWSBmcmFjMzQgIiYjeEJFOyI%2BPCFFTlRJVFkgaXF1ZXN0ICImI3hCRjsiPjwhRU5USVRZIEFncmF2ZSAiJiN4QzA7Ij48IUVOVElUWSBBYWN1dGUgIiYjeEMxOyI%2BPCFFTlRJVFkgQWNpcmMgIiYjeEMyOyI%2BPCFFTlRJVFkgQXRpbGRlICImI3hDMzsiPjwhRU5USVRZIEF1bWwgIiYjeEM0OyI%2BPCFFTlRJVFkgQXJpbmcgIiYjeEM1OyI%2BPCFFTlRJVFkgYW5nc3QgIiYjeEM1OyI%2BPCFFTlRJVFkgQUVsaWcgIiYjeEM2OyI%2BPCFFTlRJVFkgQ2NlZGlsICImI3hDNzsiPjwhRU5USVRZIEVncmF2ZSAiJiN4Qzg7Ij48IUVOVElUWSBFYWN1dGUgIiYjeEM5OyI%2BPCFFTlRJVFkgRWNpcmMgIiYjeENBOyI%2BPCFFTlRJVFkgRXVtbCAiJiN4Q0I7Ij48IUVOVElUWSBJZ3JhdmUgIiYjeENDOyI%2BPCFFTlRJVFkgSWFjdXRlICImI3hDRDsiPjwhRU5USVRZIEljaXJjICImI3hDRTsiPjwhRU5USVRZIEl1bWwgIiYjeENGOyI%2BPCFFTlRJVFkgRVRIICImI3hEMDsiPjwhRU5USVRZIE50aWxkZSAiJiN4RDE7Ij48IUVOVElUWSBPZ3JhdmUgIiYjeEQyOyI%2BPCFFTlRJVFkgT2FjdXRlICImI3hEMzsiPjwhRU5USVRZIE9jaXJjICImI3hENDsiPjwhRU5USVRZIE90aWxkZSAiJiN4RDU7Ij48IUVOVElUWSBPdW1sICImI3hENjsiPjwhRU5USVRZIHRpbWVzICImI3hENzsiPjwhRU5USVRZIE9zbGFzaCAiJiN4RDg7Ij48IUVOVElUWSBVZ3JhdmUgIiYjeEQ5OyI%2BPCFFTlRJVFkgVWFjdXRlICImI3hEQTsiPjwhRU5USVRZIFVjaXJjICImI3hEQjsiPjwhRU5USVRZIFV1bWwgIiYjeERDOyI%2BPCFFTlRJVFkgWWFjdXRlICImI3hERDsiPjwhRU5USVRZIFRIT1JOICImI3hERTsiPjwhRU5USVRZIHN6bGlnICImI3hERjsiPjwhRU5USVRZIGFncmF2ZSAiJiN4RTA7Ij48IUVOVElUWSBhYWN1dGUgIiYjeEUxOyI%2BPCFFTlRJVFkgYWNpcmMgIiYjeEUyOyI%2BPCFFTlRJVFkgYXRpbGRlICImI3hFMzsiPjwhRU5USVRZIGF1bWwgIiYjeEU0OyI%2BPCFFTlRJVFkgYXJpbmcgIiYjeEU1OyI%2BPCFFTlRJVFkgYWVsaWcgIiYjeEU2OyI%2BPCFFTlRJVFkgY2NlZGlsICImI3hFNzsiPjwhRU5USVRZIGVncmF2ZSAiJiN4RTg7Ij48IUVOVElUWSBlYWN1dGUgIiYjeEU5OyI%2BPCFFTlRJVFkgZWNpcmMgIiYjeEVBOyI%2BPCFFTlRJVFkgZXVtbCAiJiN4RUI7Ij48IUVOVElUWSBpZ3JhdmUgIiYjeEVDOyI%2BPCFFTlRJVFkgaWFjdXRlICImI3hFRDsiPjwhRU5USVRZIGljaXJjICImI3hFRTsiPjwhRU5USVRZIGl1bWwgIiYjeEVGOyI%2BPCFFTlRJVFkgZXRoICImI3hGMDsiPjwhRU5USVRZIG50aWxkZSAiJiN4RjE7Ij48IUVOVElUWSBvZ3JhdmUgIiYjeEYyOyI%2BPCFFTlRJVFkgb2FjdXRlICImI3hGMzsiPjwhRU5USVRZIG9jaXJjICImI3hGNDsiPjwhRU5USVRZIG90aWxkZSAiJiN4RjU7Ij48IUVOVElUWSBvdW1sICImI3hGNjsiPjwhRU5USVRZIGRpdmlkZSAiJiN4Rjc7Ij48IUVOVElUWSBkaXYgIiYjeEY3OyI%2BPCFFTlRJVFkgb3NsYXNoICImI3hGODsiPjwhRU5USVRZIHVncmF2ZSAiJiN4Rjk7Ij48IUVOVElUWSB1YWN1dGUgIiYjeEZBOyI%2BPCFFTlRJVFkgdWNpcmMgIiYjeEZCOyI%2BPCFFTlRJVFkgdXVtbCAiJiN4RkM7Ij48IUVOVElUWSB5YWN1dGUgIiYjeEZEOyI%2BPCFFTlRJVFkgdGhvcm4gIiYjeEZFOyI%2BPCFFTlRJVFkgeXVtbCAiJiN4RkY7Ij48IUVOVElUWSBBbWFjciAiJiN4MTAwOyI%2BPCFFTlRJVFkgYW1hY3IgIiYjeDEwMTsiPjwhRU5USVRZIEFicmV2ZSAiJiN4MTAyOyI%2BPCFFTlRJVFkgYWJyZXZlICImI3gxMDM7Ij48IUVOVElUWSBBb2dvbiAiJiN4MTA0OyI%2BPCFFTlRJVFkgYW9nb24gIiYjeDEwNTsiPjwhRU5USVRZIENhY3V0ZSAiJiN4MTA2OyI%2BPCFFTlRJVFkgY2FjdXRlICImI3gxMDc7Ij48IUVOVElUWSBDY2lyYyAiJiN4MTA4OyI%2BPCFFTlRJVFkgY2NpcmMgIiYjeDEwOTsiPjwhRU5USVRZIENkb3QgIiYjeDEwQTsiPjwhRU5USVRZIGNkb3QgIiYjeDEwQjsiPjwhRU5USVRZIENjYXJvbiAiJiN4MTBDOyI%2BPCFFTlRJVFkgY2Nhcm9uICImI3gxMEQ7Ij48IUVOVElUWSBEY2Fyb24gIiYjeDEwRTsiPjwhRU5USVRZIGRjYXJvbiAiJiN4MTBGOyI%2BPCFFTlRJVFkgRHN0cm9rICImI3gxMTA7Ij48IUVOVElUWSBkc3Ryb2sgIiYjeDExMTsiPjwhRU5USVRZIEVtYWNyICImI3gxMTI7Ij48IUVOVElUWSBlbWFjciAiJiN4MTEzOyI%2BPCFFTlRJVFkgRWRvdCAiJiN4MTE2OyI%2BPCFFTlRJVFkgZWRvdCAiJiN4MTE3OyI%2BPCFFTlRJVFkgRW9nb24gIiYjeDExODsiPjwhRU5USVRZIGVvZ29uICImI3gxMTk7Ij48IUVOVElUWSBFY2Fyb24gIiYjeDExQTsiPjwhRU5USVRZIGVjYXJvbiAiJiN4MTFCOyI%2BPCFFTlRJVFkgR2NpcmMgIiYjeDExQzsiPjwhRU5USVRZIGdjaXJjICImI3gxMUQ7Ij48IUVOVElUWSBHYnJldmUgIiYjeDExRTsiPjwhRU5USVRZIGdicmV2ZSAiJiN4MTFGOyI%2BPCFFTlRJVFkgR2RvdCAiJiN4MTIwOyI%2BPCFFTlRJVFkgZ2RvdCAiJiN4MTIxOyI%2BPCFFTlRJVFkgR2NlZGlsICImI3gxMjI7Ij48IUVOVElUWSBIY2lyYyAiJiN4MTI0OyI%2BPCFFTlRJVFkgaGNpcmMgIiYjeDEyNTsiPjwhRU5USVRZIEhzdHJvayAiJiN4MTI2OyI%2BPCFFTlRJVFkgaHN0cm9rICImI3gxMjc7Ij48IUVOVElUWSBJdGlsZGUgIiYjeDEyODsiPjwhRU5USVRZIGl0aWxkZSAiJiN4MTI5OyI%2BPCFFTlRJVFkgSW1hY3IgIiYjeDEyQTsiPjwhRU5USVRZIGltYWNyICImI3gxMkI7Ij48IUVOVElUWSBJb2dvbiAiJiN4MTJFOyI%2BPCFFTlRJVFkgaW9nb24gIiYjeDEyRjsiPjwhRU5USVRZIElkb3QgIiYjeDEzMDsiPjwhRU5USVRZIGltYXRoICImI3gxMzE7Ij48IUVOVElUWSBpbm9kb3QgIiYjeDEzMTsiPjwhRU5USVRZIElKbGlnICImI3gxMzI7Ij48IUVOVElUWSBpamxpZyAiJiN4MTMzOyI%2BPCFFTlRJVFkgSmNpcmMgIiYjeDEzNDsiPjwhRU5USVRZIGpjaXJjICImI3gxMzU7Ij48IUVOVElUWSBLY2VkaWwgIiYjeDEzNjsiPjwhRU5USVRZIGtjZWRpbCAiJiN4MTM3OyI%2BPCFFTlRJVFkga2dyZWVuICImI3gxMzg7Ij48IUVOVElUWSBMYWN1dGUgIiYjeDEzOTsiPjwhRU5USVRZIGxhY3V0ZSAiJiN4MTNBOyI%2BPCFFTlRJVFkgTGNlZGlsICImI3gxM0I7Ij48IUVOVElUWSBsY2VkaWwgIiYjeDEzQzsiPjwhRU5USVRZIExjYXJvbiAiJiN4MTNEOyI%2BPCFFTlRJVFkgbGNhcm9uICImI3gxM0U7Ij48IUVOVElUWSBMbWlkb3QgIiYjeDEzRjsiPjwhRU5USVRZIGxtaWRvdCAiJiN4MTQwOyI%2BPCFFTlRJVFkgTHN0cm9rICImI3gxNDE7Ij48IUVOVElUWSBsc3Ryb2sgIiYjeDE0MjsiPjwhRU5USVRZIE5hY3V0ZSAiJiN4MTQzOyI%2BPCFFTlRJVFkgbmFjdXRlICImI3gxNDQ7Ij48IUVOVElUWSBOY2VkaWwgIiYjeDE0NTsiPjwhRU5USVRZIG5jZWRpbCAiJiN4MTQ2OyI%2BPCFFTlRJVFkgTmNhcm9uICImI3gxNDc7Ij48IUVOVElUWSBuY2Fyb24gIiYjeDE0ODsiPjwhRU5USVRZIG5hcG9zICImI3gxNDk7Ij48IUVOVElUWSBFTkcgIiYjeDE0QTsiPjwhRU5USVRZIGVuZyAiJiN4MTRCOyI%2BPCFFTlRJVFkgT21hY3IgIiYjeDE0QzsiPjwhRU5USVRZIG9tYWNyICImI3gxNEQ7Ij48IUVOVElUWSBPZGJsYWMgIiYjeDE1MDsiPjwhRU5USVRZIG9kYmxhYyAiJiN4MTUxOyI%2BPCFFTlRJVFkgT0VsaWcgIiYjeDE1MjsiPjwhRU5USVRZIG9lbGlnICImI3gxNTM7Ij48IUVOVElUWSBSYWN1dGUgIiYjeDE1NDsiPjwhRU5USVRZIHJhY3V0ZSAiJiN4MTU1OyI%2BPCFFTlRJVFkgUmNlZGlsICImI3gxNTY7Ij48IUVOVElUWSByY2VkaWwgIiYjeDE1NzsiPjwhRU5USVRZIFJjYXJvbiAiJiN4MTU4OyI%2BPCFFTlRJVFkgcmNhcm9uICImI3gxNTk7Ij48IUVOVElUWSBTYWN1dGUgIiYjeDE1QTsiPjwhRU5USVRZIHNhY3V0ZSAiJiN4MTVCOyI%2BPCFFTlRJVFkgU2NpcmMgIiYjeDE1QzsiPjwhRU5USVRZIHNjaXJjICImI3gxNUQ7Ij48IUVOVElUWSBTY2VkaWwgIiYjeDE1RTsiPjwhRU5USVRZIHNjZWRpbCAiJiN4MTVGOyI%2BPCFFTlRJVFkgU2Nhcm9uICImI3gxNjA7Ij48IUVOVElUWSBzY2Fyb24gIiYjeDE2MTsiPjwhRU5USVRZIFRjZWRpbCAiJiN4MTYyOyI%2BPCFFTlRJVFkgdGNlZGlsICImI3gxNjM7Ij48IUVOVElUWSBUY2Fyb24gIiYjeDE2NDsiPjwhRU5USVRZIHRjYXJvbiAiJiN4MTY1OyI%2BPCFFTlRJVFkgVHN0cm9rICImI3gxNjY7Ij48IUVOVElUWSB0c3Ryb2sgIiYjeDE2NzsiPjwhRU5USVRZIFV0aWxkZSAiJiN4MTY4OyI%2BPCFFTlRJVFkgdXRpbGRlICImI3gxNjk7Ij48IUVOVElUWSBVbWFjciAiJiN4MTZBOyI%2BPCFFTlRJVFkgdW1hY3IgIiYjeDE2QjsiPjwhRU5USVRZIFVicmV2ZSAiJiN4MTZDOyI%2BPCFFTlRJVFkgdWJyZXZlICImI3gxNkQ7Ij48IUVOVElUWSBVcmluZyAiJiN4MTZFOyI%2BPCFFTlRJVFkgdXJpbmcgIiYjeDE2RjsiPjwhRU5USVRZIFVkYmxhYyAiJiN4MTcwOyI%2BPCFFTlRJVFkgdWRibGFjICImI3gxNzE7Ij48IUVOVElUWSBVb2dvbiAiJiN4MTcyOyI%2BPCFFTlRJVFkgdW9nb24gIiYjeDE3MzsiPjwhRU5USVRZIFdjaXJjICImI3gxNzQ7Ij48IUVOVElUWSB3Y2lyYyAiJiN4MTc1OyI%2BPCFFTlRJVFkgWWNpcmMgIiYjeDE3NjsiPjwhRU5USVRZIHljaXJjICImI3gxNzc7Ij48IUVOVElUWSBZdW1sICImI3gxNzg7Ij48IUVOVElUWSBaYWN1dGUgIiYjeDE3OTsiPjwhRU5USVRZIHphY3V0ZSAiJiN4MTdBOyI%2BPCFFTlRJVFkgWmRvdCAiJiN4MTdCOyI%2BPCFFTlRJVFkgemRvdCAiJiN4MTdDOyI%2BPCFFTlRJVFkgWmNhcm9uICImI3gxN0Q7Ij48IUVOVElUWSB6Y2Fyb24gIiYjeDE3RTsiPjwhRU5USVRZIGZub2YgIiYjeDE5MjsiPjwhRU5USVRZIGltcGVkICImI3gxQjU7Ij48IUVOVElUWSBnYWN1dGUgIiYjeDFGNTsiPjwhRU5USVRZIGptYXRoICImI3gyMzc7Ij48IUVOVElUWSBjaXJjICImI3gyQzY7Ij48IUVOVElUWSBjYXJvbiAiJiN4MkM3OyI%2BPCFFTlRJVFkgSGFjZWsgIiYjeDJDNzsiPjwhRU5USVRZIGJyZXZlICImI3gyRDg7Ij48IUVOVElUWSBCcmV2ZSAiJiN4MkQ4OyI%2BPCFFTlRJVFkgZG90ICImI3gyRDk7Ij48IUVOVElUWSBEaWFjcml0aWNhbERvdCAiJiN4MkQ5OyI%2BPCFFTlRJVFkgcmluZyAiJiN4MkRBOyI%2BPCFFTlRJVFkgb2dvbiAiJiN4MkRCOyI%2BPCFFTlRJVFkgdGlsZGUgIiYjeDJEQzsiPjwhRU5USVRZIERpYWNyaXRpY2FsVGlsZGUgIiYjeDJEQzsiPjwhRU5USVRZIGRibGFjICImI3gyREQ7Ij48IUVOVElUWSBEaWFjcml0aWNhbERvdWJsZUFjdXRlICImI3gyREQ7Ij48IUVOVElUWSBEb3duQnJldmUgIiYjeDMxMTsiPjwhRU5USVRZIEFscGhhICImI3gzOTE7Ij48IUVOVElUWSBCZXRhICImI3gzOTI7Ij48IUVOVElUWSBHYW1tYSAiJiN4MzkzOyI%2BPCFFTlRJVFkgRGVsdGEgIiYjeDM5NDsiPjwhRU5USVRZIEVwc2lsb24gIiYjeDM5NTsiPjwhRU5USVRZIFpldGEgIiYjeDM5NjsiPjwhRU5USVRZIEV0YSAiJiN4Mzk3OyI%2BPCFFTlRJVFkgVGhldGEgIiYjeDM5ODsiPjwhRU5USVRZIElvdGEgIiYjeDM5OTsiPjwhRU5USVRZIEthcHBhICImI3gzOUE7Ij48IUVOVElUWSBMYW1iZGEgIiYjeDM5QjsiPjwhRU5USVRZIE11ICImI3gzOUM7Ij48IUVOVElUWSBOdSAiJiN4MzlEOyI%2BPCFFTlRJVFkgWGkgIiYjeDM5RTsiPjwhRU5USVRZIE9taWNyb24gIiYjeDM5RjsiPjwhRU5USVRZIFBpICImI3gzQTA7Ij48IUVOVElUWSBSaG8gIiYjeDNBMTsiPjwhRU5USVRZIFNpZ21hICImI3gzQTM7Ij48IUVOVElUWSBUYXUgIiYjeDNBNDsiPjwhRU5USVRZIFVwc2lsb24gIiYjeDNBNTsiPjwhRU5USVRZIFBoaSAiJiN4M0E2OyI%2BPCFFTlRJVFkgQ2hpICImI3gzQTc7Ij48IUVOVElUWSBQc2kgIiYjeDNBODsiPjwhRU5USVRZIE9tZWdhICImI3gzQTk7Ij48IUVOVElUWSBvaG0gIiYjeDNBOTsiPjwhRU5USVRZIGFscGhhICImI3gzQjE7Ij48IUVOVElUWSBiZXRhICImI3gzQjI7Ij48IUVOVElUWSBnYW1tYSAiJiN4M0IzOyI%2BPCFFTlRJVFkgZGVsdGEgIiYjeDNCNDsiPjwhRU5USVRZIGVwc2kgIiYjeDNCNTsiPjwhRU5USVRZIGVwc2lsb24gIiYjeDNCNTsiPjwhRU5USVRZIHpldGEgIiYjeDNCNjsiPjwhRU5USVRZIGV0YSAiJiN4M0I3OyI%2BPCFFTlRJVFkgdGhldGEgIiYjeDNCODsiPjwhRU5USVRZIGlvdGEgIiYjeDNCOTsiPjwhRU5USVRZIGthcHBhICImI3gzQkE7Ij48IUVOVElUWSBsYW1iZGEgIiYjeDNCQjsiPjwhRU5USVRZIG11ICImI3gzQkM7Ij48IUVOVElUWSBudSAiJiN4M0JEOyI%2BPCFFTlRJVFkgeGkgIiYjeDNCRTsiPjwhRU5USVRZIG9taWNyb24gIiYjeDNCRjsiPjwhRU5USVRZIHBpICImI3gzQzA7Ij48IUVOVElUWSByaG8gIiYjeDNDMTsiPjwhRU5USVRZIHNpZ21hdiAiJiN4M0MyOyI%2BPCFFTlRJVFkgdmFyc2lnbWEgIiYjeDNDMjsiPjwhRU5USVRZIHNpZ21hZiAiJiN4M0MyOyI%2BPCFFTlRJVFkgc2lnbWEgIiYjeDNDMzsiPjwhRU5USVRZIHRhdSAiJiN4M0M0OyI%2BPCFFTlRJVFkgdXBzaSAiJiN4M0M1OyI%2BPCFFTlRJVFkgdXBzaWxvbiAiJiN4M0M1OyI%2BPCFFTlRJVFkgcGhpICImI3gzQzY7Ij48IUVOVElUWSBjaGkgIiYjeDNDNzsiPjwhRU5USVRZIHBzaSAiJiN4M0M4OyI%2BPCFFTlRJVFkgb21lZ2EgIiYjeDNDOTsiPjwhRU5USVRZIHRoZXRhdiAiJiN4M0QxOyI%2BPCFFTlRJVFkgdmFydGhldGEgIiYjeDNEMTsiPjwhRU5USVRZIHRoZXRhc3ltICImI3gzRDE7Ij48IUVOVElUWSBVcHNpICImI3gzRDI7Ij48IUVOVElUWSB1cHNpaCAiJiN4M0QyOyI%2BPCFFTlRJVFkgc3RyYWlnaHRwaGkgIiYjeDNENTsiPjwhRU5USVRZIHBoaXYgIiYjeDNENTsiPjwhRU5USVRZIHZhcnBoaSAiJiN4M0Q1OyI%2BPCFFTlRJVFkgcGl2ICImI3gzRDY7Ij48IUVOVElUWSB2YXJwaSAiJiN4M0Q2OyI%2BPCFFTlRJVFkgR2FtbWFkICImI3gzREM7Ij48IUVOVElUWSBnYW1tYWQgIiYjeDNERDsiPjwhRU5USVRZIGRpZ2FtbWEgIiYjeDNERDsiPjwhRU5USVRZIGthcHBhdiAiJiN4M0YwOyI%2BPCFFTlRJVFkgdmFya2FwcGEgIiYjeDNGMDsiPjwhRU5USVRZIHJob3YgIiYjeDNGMTsiPjwhRU5USVRZIHZhcnJobyAiJiN4M0YxOyI%2BPCFFTlRJVFkgZXBzaXYgIiYjeDNGNTsiPjwhRU5USVRZIHN0cmFpZ2h0ZXBzaWxvbiAiJiN4M0Y1OyI%2BPCFFTlRJVFkgdmFyZXBzaWxvbiAiJiN4M0Y1OyI%2BPCFFTlRJVFkgYmVwc2kgIiYjeDNGNjsiPjwhRU5USVRZIGJhY2tlcHNpbG9uICImI3gzRjY7Ij48IUVOVElUWSBJT2N5ICImI3g0MDE7Ij48IUVOVElUWSBESmN5ICImI3g0MDI7Ij48IUVOVElUWSBHSmN5ICImI3g0MDM7Ij48IUVOVElUWSBKdWtjeSAiJiN4NDA0OyI%2BPCFFTlRJVFkgRFNjeSAiJiN4NDA1OyI%2BPCFFTlRJVFkgSXVrY3kgIiYjeDQwNjsiPjwhRU5USVRZIFlJY3kgIiYjeDQwNzsiPjwhRU5USVRZIEpzZXJjeSAiJiN4NDA4OyI%2BPCFFTlRJVFkgTEpjeSAiJiN4NDA5OyI%2BPCFFTlRJVFkgTkpjeSAiJiN4NDBBOyI%2BPCFFTlRJVFkgVFNIY3kgIiYjeDQwQjsiPjwhRU5USVRZIEtKY3kgIiYjeDQwQzsiPjwhRU5USVRZIFVicmN5ICImI3g0MEU7Ij48IUVOVElUWSBEWmN5ICImI3g0MEY7Ij48IUVOVElUWSBBY3kgIiYjeDQxMDsiPjwhRU5USVRZIEJjeSAiJiN4NDExOyI%2BPCFFTlRJVFkgVmN5ICImI3g0MTI7Ij48IUVOVElUWSBHY3kgIiYjeDQxMzsiPjwhRU5USVRZIERjeSAiJiN4NDE0OyI%2BPCFFTlRJVFkgSUVjeSAiJiN4NDE1OyI%2BPCFFTlRJVFkgWkhjeSAiJiN4NDE2OyI%2BPCFFTlRJVFkgWmN5ICImI3g0MTc7Ij48IUVOVElUWSBJY3kgIiYjeDQxODsiPjwhRU5USVRZIEpjeSAiJiN4NDE5OyI%2BPCFFTlRJVFkgS2N5ICImI3g0MUE7Ij48IUVOVElUWSBMY3kgIiYjeDQxQjsiPjwhRU5USVRZIE1jeSAiJiN4NDFDOyI%2BPCFFTlRJVFkgTmN5ICImI3g0MUQ7Ij48IUVOVElUWSBPY3kgIiYjeDQxRTsiPjwhRU5USVRZIFBjeSAiJiN4NDFGOyI%2BPCFFTlRJVFkgUmN5ICImI3g0MjA7Ij48IUVOVElUWSBTY3kgIiYjeDQyMTsiPjwhRU5USVRZIFRjeSAiJiN4NDIyOyI%2BPCFFTlRJVFkgVWN5ICImI3g0MjM7Ij48IUVOVElUWSBGY3kgIiYjeDQyNDsiPjwhRU5USVRZIEtIY3kgIiYjeDQyNTsiPjwhRU5USVRZIFRTY3kgIiYjeDQyNjsiPjwhRU5USVRZIENIY3kgIiYjeDQyNzsiPjwhRU5USVRZIFNIY3kgIiYjeDQyODsiPjwhRU5USVRZIFNIQ0hjeSAiJiN4NDI5OyI%2BPCFFTlRJVFkgSEFSRGN5ICImI3g0MkE7Ij48IUVOVElUWSBZY3kgIiYjeDQyQjsiPjwhRU5USVRZIFNPRlRjeSAiJiN4NDJDOyI%2BPCFFTlRJVFkgRWN5ICImI3g0MkQ7Ij48IUVOVElUWSBZVWN5ICImI3g0MkU7Ij48IUVOVElUWSBZQWN5ICImI3g0MkY7Ij48IUVOVElUWSBhY3kgIiYjeDQzMDsiPjwhRU5USVRZIGJjeSAiJiN4NDMxOyI%2BPCFFTlRJVFkgdmN5ICImI3g0MzI7Ij48IUVOVElUWSBnY3kgIiYjeDQzMzsiPjwhRU5USVRZIGRjeSAiJiN4NDM0OyI%2BPCFFTlRJVFkgaWVjeSAiJiN4NDM1OyI%2BPCFFTlRJVFkgemhjeSAiJiN4NDM2OyI%2BPCFFTlRJVFkgemN5ICImI3g0Mzc7Ij48IUVOVElUWSBpY3kgIiYjeDQzODsiPjwhRU5USVRZIGpjeSAiJiN4NDM5OyI%2BPCFFTlRJVFkga2N5ICImI3g0M0E7Ij48IUVOVElUWSBsY3kgIiYjeDQzQjsiPjwhRU5USVRZIG1jeSAiJiN4NDNDOyI%2BPCFFTlRJVFkgbmN5ICImI3g0M0Q7Ij48IUVOVElUWSBvY3kgIiYjeDQzRTsiPjwhRU5USVRZIHBjeSAiJiN4NDNGOyI%2BPCFFTlRJVFkgcmN5ICImI3g0NDA7Ij48IUVOVElUWSBzY3kgIiYjeDQ0MTsiPjwhRU5USVRZIHRjeSAiJiN4NDQyOyI%2BPCFFTlRJVFkgdWN5ICImI3g0NDM7Ij48IUVOVElUWSBmY3kgIiYjeDQ0NDsiPjwhRU5USVRZIGtoY3kgIiYjeDQ0NTsiPjwhRU5USVRZIHRzY3kgIiYjeDQ0NjsiPjwhRU5USVRZIGNoY3kgIiYjeDQ0NzsiPjwhRU5USVRZIHNoY3kgIiYjeDQ0ODsiPjwhRU5USVRZIHNoY2hjeSAiJiN4NDQ5OyI%2BPCFFTlRJVFkgaGFyZGN5ICImI3g0NEE7Ij48IUVOVElUWSB5Y3kgIiYjeDQ0QjsiPjwhRU5USVRZIHNvZnRjeSAiJiN4NDRDOyI%2BPCFFTlRJVFkgZWN5ICImI3g0NEQ7Ij48IUVOVElUWSB5dWN5ICImI3g0NEU7Ij48IUVOVElUWSB5YWN5ICImI3g0NEY7Ij48IUVOVElUWSBpb2N5ICImI3g0NTE7Ij48IUVOVElUWSBkamN5ICImI3g0NTI7Ij48IUVOVElUWSBnamN5ICImI3g0NTM7Ij48IUVOVElUWSBqdWtjeSAiJiN4NDU0OyI%2BPCFFTlRJVFkgZHNjeSAiJiN4NDU1OyI%2BPCFFTlRJVFkgaXVrY3kgIiYjeDQ1NjsiPjwhRU5USVRZIHlpY3kgIiYjeDQ1NzsiPjwhRU5USVRZIGpzZXJjeSAiJiN4NDU4OyI%2BPCFFTlRJVFkgbGpjeSAiJiN4NDU5OyI%2BPCFFTlRJVFkgbmpjeSAiJiN4NDVBOyI%2BPCFFTlRJVFkgdHNoY3kgIiYjeDQ1QjsiPjwhRU5USVRZIGtqY3kgIiYjeDQ1QzsiPjwhRU5USVRZIHVicmN5ICImI3g0NUU7Ij48IUVOVElUWSBkemN5ICImI3g0NUY7Ij48IUVOVElUWSBlbnNwICImI3gyMDAyOyI%2BPCFFTlRJVFkgZW1zcCAiJiN4MjAwMzsiPjwhRU5USVRZIGVtc3AxMyAiJiN4MjAwNDsiPjwhRU5USVRZIGVtc3AxNCAiJiN4MjAwNTsiPjwhRU5USVRZIG51bXNwICImI3gyMDA3OyI%2BPCFFTlRJVFkgcHVuY3NwICImI3gyMDA4OyI%2BPCFFTlRJVFkgdGhpbnNwICImI3gyMDA5OyI%2BPCFFTlRJVFkgVGhpblNwYWNlICImI3gyMDA5OyI%2BPCFFTlRJVFkgaGFpcnNwICImI3gyMDBBOyI%2BPCFFTlRJVFkgVmVyeVRoaW5TcGFjZSAiJiN4MjAwQTsiPjwhRU5USVRZIFplcm9XaWR0aFNwYWNlICImI3gyMDBCOyI%2BPCFFTlRJVFkgTmVnYXRpdmVWZXJ5VGhpblNwYWNlICImI3gyMDBCOyI%2BPCFFTlRJVFkgTmVnYXRpdmVUaGluU3BhY2UgIiYjeDIwMEI7Ij48IUVOVElUWSBOZWdhdGl2ZU1lZGl1bVNwYWNlICImI3gyMDBCOyI%2BPCFFTlRJVFkgTmVnYXRpdmVUaGlja1NwYWNlICImI3gyMDBCOyI%2BPCFFTlRJVFkgenduaiAiJiN4MjAwQzsiPjwhRU5USVRZIHp3aiAiJiN4MjAwRDsiPjwhRU5USVRZIGxybSAiJiN4MjAwRTsiPjwhRU5USVRZIHJsbSAiJiN4MjAwRjsiPjwhRU5USVRZIGh5cGhlbiAiJiN4MjAxMDsiPjwhRU5USVRZIGRhc2ggIiYjeDIwMTA7Ij48IUVOVElUWSBuZGFzaCAiJiN4MjAxMzsiPjwhRU5USVRZIG1kYXNoICImI3gyMDE0OyI%2BPCFFTlRJVFkgaG9yYmFyICImI3gyMDE1OyI%2BPCFFTlRJVFkgVmVyYmFyICImI3gyMDE2OyI%2BPCFFTlRJVFkgVmVydCAiJiN4MjAxNjsiPjwhRU5USVRZIGxzcXVvICImI3gyMDE4OyI%2BPCFFTlRJVFkgT3BlbkN1cmx5UXVvdGUgIiYjeDIwMTg7Ij48IUVOVElUWSByc3F1byAiJiN4MjAxOTsiPjwhRU5USVRZIHJzcXVvciAiJiN4MjAxOTsiPjwhRU5USVRZIENsb3NlQ3VybHlRdW90ZSAiJiN4MjAxOTsiPjwhRU5USVRZIGxzcXVvciAiJiN4MjAxQTsiPjwhRU5USVRZIHNicXVvICImI3gyMDFBOyI%2BPCFFTlRJVFkgbGRxdW8gIiYjeDIwMUM7Ij48IUVOVElUWSBPcGVuQ3VybHlEb3VibGVRdW90ZSAiJiN4MjAxQzsiPjwhRU5USVRZIHJkcXVvICImI3gyMDFEOyI%2BPCFFTlRJVFkgcmRxdW9yICImI3gyMDFEOyI%2BPCFFTlRJVFkgQ2xvc2VDdXJseURvdWJsZVF1b3RlICImI3gyMDFEOyI%2BPCFFTlRJVFkgbGRxdW9yICImI3gyMDFFOyI%2BPCFFTlRJVFkgYmRxdW8gIiYjeDIwMUU7Ij48IUVOVElUWSBkYWdnZXIgIiYjeDIwMjA7Ij48IUVOVElUWSBEYWdnZXIgIiYjeDIwMjE7Ij48IUVOVElUWSBkZGFnZ2VyICImI3gyMDIxOyI%2BPCFFTlRJVFkgYnVsbCAiJiN4MjAyMjsiPjwhRU5USVRZIGJ1bGxldCAiJiN4MjAyMjsiPjwhRU5USVRZIG5sZHIgIiYjeDIwMjU7Ij48IUVOVElUWSBoZWxsaXAgIiYjeDIwMjY7Ij48IUVOVElUWSBtbGRyICImI3gyMDI2OyI%2BPCFFTlRJVFkgcGVybWlsICImI3gyMDMwOyI%2BPCFFTlRJVFkgcGVydGVuayAiJiN4MjAzMTsiPjwhRU5USVRZIHByaW1lICImI3gyMDMyOyI%2BPCFFTlRJVFkgUHJpbWUgIiYjeDIwMzM7Ij48IUVOVElUWSB0cHJpbWUgIiYjeDIwMzQ7Ij48IUVOVElUWSBicHJpbWUgIiYjeDIwMzU7Ij48IUVOVElUWSBiYWNrcHJpbWUgIiYjeDIwMzU7Ij48IUVOVElUWSBsc2FxdW8gIiYjeDIwMzk7Ij48IUVOVElUWSByc2FxdW8gIiYjeDIwM0E7Ij48IUVOVElUWSBvbGluZSAiJiN4MjAzRTsiPjwhRU5USVRZIE92ZXJCYXIgIiYjeDIwM0U7Ij48IUVOVElUWSBjYXJldCAiJiN4MjA0MTsiPjwhRU5USVRZIGh5YnVsbCAiJiN4MjA0MzsiPjwhRU5USVRZIGZyYXNsICImI3gyMDQ0OyI%2BPCFFTlRJVFkgYnNlbWkgIiYjeDIwNEY7Ij48IUVOVElUWSBxcHJpbWUgIiYjeDIwNTc7Ij48IUVOVElUWSBNZWRpdW1TcGFjZSAiJiN4MjA1RjsiPjwhRU5USVRZIE5vQnJlYWsgIiYjeDIwNjA7Ij48IUVOVElUWSBBcHBseUZ1bmN0aW9uICImI3gyMDYxOyI%2BPCFFTlRJVFkgYWYgIiYjeDIwNjE7Ij48IUVOVElUWSBJbnZpc2libGVUaW1lcyAiJiN4MjA2MjsiPjwhRU5USVRZIGl0ICImI3gyMDYyOyI%2BPCFFTlRJVFkgSW52aXNpYmxlQ29tbWEgIiYjeDIwNjM7Ij48IUVOVElUWSBpYyAiJiN4MjA2MzsiPjwhRU5USVRZIGV1cm8gIiYjeDIwQUM7Ij48IUVOVElUWSB0ZG90ICImI3gyMERCOyI%2BPCFFTlRJVFkgVHJpcGxlRG90ICImI3gyMERCOyI%2BPCFFTlRJVFkgRG90RG90ICImI3gyMERDOyI%2BPCFFTlRJVFkgQ29wZiAiJiN4MjEwMjsiPjwhRU5USVRZIGNvbXBsZXhlcyAiJiN4MjEwMjsiPjwhRU5USVRZIGluY2FyZSAiJiN4MjEwNTsiPjwhRU5USVRZIGdzY3IgIiYjeDIxMEE7Ij48IUVOVElUWSBoYW1pbHQgIiYjeDIxMEI7Ij48IUVOVElUWSBIaWxiZXJ0U3BhY2UgIiYjeDIxMEI7Ij48IUVOVElUWSBIc2NyICImI3gyMTBCOyI%2BPCFFTlRJVFkgSGZyICImI3gyMTBDOyI%2BPCFFTlRJVFkgUG9pbmNhcmVwbGFuZSAiJiN4MjEwQzsiPjwhRU5USVRZIHF1YXRlcm5pb25zICImI3gyMTBEOyI%2BPCFFTlRJVFkgSG9wZiAiJiN4MjEwRDsiPjwhRU5USVRZIHBsYW5ja2ggIiYjeDIxMEU7Ij48IUVOVElUWSBwbGFuY2sgIiYjeDIxMEY7Ij48IUVOVElUWSBoYmFyICImI3gyMTBGOyI%2BPCFFTlRJVFkgcGxhbmt2ICImI3gyMTBGOyI%2BPCFFTlRJVFkgaHNsYXNoICImI3gyMTBGOyI%2BPCFFTlRJVFkgSXNjciAiJiN4MjExMDsiPjwhRU5USVRZIGltYWdsaW5lICImI3gyMTEwOyI%2BPCFFTlRJVFkgaW1hZ2UgIiYjeDIxMTE7Ij48IUVOVElUWSBJbSAiJiN4MjExMTsiPjwhRU5USVRZIGltYWdwYXJ0ICImI3gyMTExOyI%2BPCFFTlRJVFkgSWZyICImI3gyMTExOyI%2BPCFFTlRJVFkgTHNjciAiJiN4MjExMjsiPjwhRU5USVRZIGxhZ3JhbiAiJiN4MjExMjsiPjwhRU5USVRZIExhcGxhY2V0cmYgIiYjeDIxMTI7Ij48IUVOVElUWSBlbGwgIiYjeDIxMTM7Ij48IUVOVElUWSBOb3BmICImI3gyMTE1OyI%2BPCFFTlRJVFkgbmF0dXJhbHMgIiYjeDIxMTU7Ij48IUVOVElUWSBudW1lcm8gIiYjeDIxMTY7Ij48IUVOVElUWSBjb3B5c3IgIiYjeDIxMTc7Ij48IUVOVElUWSB3ZWllcnAgIiYjeDIxMTg7Ij48IUVOVElUWSB3cCAiJiN4MjExODsiPjwhRU5USVRZIFBvcGYgIiYjeDIxMTk7Ij48IUVOVElUWSBwcmltZXMgIiYjeDIxMTk7Ij48IUVOVElUWSByYXRpb25hbHMgIiYjeDIxMUE7Ij48IUVOVElUWSBRb3BmICImI3gyMTFBOyI%2BPCFFTlRJVFkgUnNjciAiJiN4MjExQjsiPjwhRU5USVRZIHJlYWxpbmUgIiYjeDIxMUI7Ij48IUVOVElUWSByZWFsICImI3gyMTFDOyI%2BPCFFTlRJVFkgUmUgIiYjeDIxMUM7Ij48IUVOVElUWSByZWFscGFydCAiJiN4MjExQzsiPjwhRU5USVRZIFJmciAiJiN4MjExQzsiPjwhRU5USVRZIHJlYWxzICImI3gyMTFEOyI%2BPCFFTlRJVFkgUm9wZiAiJiN4MjExRDsiPjwhRU5USVRZIHJ4ICImI3gyMTFFOyI%2BPCFFTlRJVFkgdHJhZGUgIiYjeDIxMjI7Ij48IUVOVElUWSBUUkFERSAiJiN4MjEyMjsiPjwhRU5USVRZIGludGVnZXJzICImI3gyMTI0OyI%2BPCFFTlRJVFkgWm9wZiAiJiN4MjEyNDsiPjwhRU5USVRZIG1obyAiJiN4MjEyNzsiPjwhRU5USVRZIFpmciAiJiN4MjEyODsiPjwhRU5USVRZIHplZXRyZiAiJiN4MjEyODsiPjwhRU5USVRZIGlpb3RhICImI3gyMTI5OyI%2BPCFFTlRJVFkgYmVybm91ICImI3gyMTJDOyI%2BPCFFTlRJVFkgQmVybm91bGxpcyAiJiN4MjEyQzsiPjwhRU5USVRZIEJzY3IgIiYjeDIxMkM7Ij48IUVOVElUWSBDZnIgIiYjeDIxMkQ7Ij48IUVOVElUWSBDYXlsZXlzICImI3gyMTJEOyI%2BPCFFTlRJVFkgZXNjciAiJiN4MjEyRjsiPjwhRU5USVRZIEVzY3IgIiYjeDIxMzA7Ij48IUVOVElUWSBleHBlY3RhdGlvbiAiJiN4MjEzMDsiPjwhRU5USVRZIEZzY3IgIiYjeDIxMzE7Ij48IUVOVElUWSBGb3VyaWVydHJmICImI3gyMTMxOyI%2BPCFFTlRJVFkgcGhtbWF0ICImI3gyMTMzOyI%2BPCFFTlRJVFkgTWVsbGludHJmICImI3gyMTMzOyI%2BPCFFTlRJVFkgTXNjciAiJiN4MjEzMzsiPjwhRU5USVRZIG9yZGVyICImI3gyMTM0OyI%2BPCFFTlRJVFkgb3JkZXJvZiAiJiN4MjEzNDsiPjwhRU5USVRZIG9zY3IgIiYjeDIxMzQ7Ij48IUVOVElUWSBhbGVmc3ltICImI3gyMTM1OyI%2BPCFFTlRJVFkgYWxlcGggIiYjeDIxMzU7Ij48IUVOVElUWSBiZXRoICImI3gyMTM2OyI%2BPCFFTlRJVFkgZ2ltZWwgIiYjeDIxMzc7Ij48IUVOVElUWSBkYWxldGggIiYjeDIxMzg7Ij48IUVOVElUWSBDYXBpdGFsRGlmZmVyZW50aWFsRCAiJiN4MjE0NTsiPjwhRU5USVRZIEREICImI3gyMTQ1OyI%2BPCFFTlRJVFkgRGlmZmVyZW50aWFsRCAiJiN4MjE0NjsiPjwhRU5USVRZIGRkICImI3gyMTQ2OyI%2BPCFFTlRJVFkgRXhwb25lbnRpYWxFICImI3gyMTQ3OyI%2BPCFFTlRJVFkgZXhwb25lbnRpYWxlICImI3gyMTQ3OyI%2BPCFFTlRJVFkgZWUgIiYjeDIxNDc7Ij48IUVOVElUWSBJbWFnaW5hcnlJICImI3gyMTQ4OyI%2BPCFFTlRJVFkgaWkgIiYjeDIxNDg7Ij48IUVOVElUWSBmcmFjMTMgIiYjeDIxNTM7Ij48IUVOVElUWSBmcmFjMjMgIiYjeDIxNTQ7Ij48IUVOVElUWSBmcmFjMTUgIiYjeDIxNTU7Ij48IUVOVElUWSBmcmFjMjUgIiYjeDIxNTY7Ij48IUVOVElUWSBmcmFjMzUgIiYjeDIxNTc7Ij48IUVOVElUWSBmcmFjNDUgIiYjeDIxNTg7Ij48IUVOVElUWSBmcmFjMTYgIiYjeDIxNTk7Ij48IUVOVElUWSBmcmFjNTYgIiYjeDIxNUE7Ij48IUVOVElUWSBmcmFjMTggIiYjeDIxNUI7Ij48IUVOVElUWSBmcmFjMzggIiYjeDIxNUM7Ij48IUVOVElUWSBmcmFjNTggIiYjeDIxNUQ7Ij48IUVOVElUWSBmcmFjNzggIiYjeDIxNUU7Ij48IUVOVElUWSBsYXJyICImI3gyMTkwOyI%2BPCFFTlRJVFkgbGVmdGFycm93ICImI3gyMTkwOyI%2BPCFFTlRJVFkgTGVmdEFycm93ICImI3gyMTkwOyI%2BPCFFTlRJVFkgc2xhcnIgIiYjeDIxOTA7Ij48IUVOVElUWSBTaG9ydExlZnRBcnJvdyAiJiN4MjE5MDsiPjwhRU5USVRZIHVhcnIgIiYjeDIxOTE7Ij48IUVOVElUWSB1cGFycm93ICImI3gyMTkxOyI%2BPCFFTlRJVFkgVXBBcnJvdyAiJiN4MjE5MTsiPjwhRU5USVRZIFNob3J0VXBBcnJvdyAiJiN4MjE5MTsiPjwhRU5USVRZIHJhcnIgIiYjeDIxOTI7Ij48IUVOVElUWSByaWdodGFycm93ICImI3gyMTkyOyI%2BPCFFTlRJVFkgUmlnaHRBcnJvdyAiJiN4MjE5MjsiPjwhRU5USVRZIHNyYXJyICImI3gyMTkyOyI%2BPCFFTlRJVFkgU2hvcnRSaWdodEFycm93ICImI3gyMTkyOyI%2BPCFFTlRJVFkgZGFyciAiJiN4MjE5MzsiPjwhRU5USVRZIGRvd25hcnJvdyAiJiN4MjE5MzsiPjwhRU5USVRZIERvd25BcnJvdyAiJiN4MjE5MzsiPjwhRU5USVRZIFNob3J0RG93bkFycm93ICImI3gyMTkzOyI%2BPCFFTlRJVFkgaGFyciAiJiN4MjE5NDsiPjwhRU5USVRZIGxlZnRyaWdodGFycm93ICImI3gyMTk0OyI%2BPCFFTlRJVFkgTGVmdFJpZ2h0QXJyb3cgIiYjeDIxOTQ7Ij48IUVOVElUWSB2YXJyICImI3gyMTk1OyI%2BPCFFTlRJVFkgdXBkb3duYXJyb3cgIiYjeDIxOTU7Ij48IUVOVElUWSBVcERvd25BcnJvdyAiJiN4MjE5NTsiPjwhRU5USVRZIG53YXJyICImI3gyMTk2OyI%2BPCFFTlRJVFkgVXBwZXJMZWZ0QXJyb3cgIiYjeDIxOTY7Ij48IUVOVElUWSBud2Fycm93ICImI3gyMTk2OyI%2BPCFFTlRJVFkgbmVhcnIgIiYjeDIxOTc7Ij48IUVOVElUWSBVcHBlclJpZ2h0QXJyb3cgIiYjeDIxOTc7Ij48IUVOVElUWSBuZWFycm93ICImI3gyMTk3OyI%2BPCFFTlRJVFkgc2VhcnIgIiYjeDIxOTg7Ij48IUVOVElUWSBzZWFycm93ICImI3gyMTk4OyI%2BPCFFTlRJVFkgTG93ZXJSaWdodEFycm93ICImI3gyMTk4OyI%2BPCFFTlRJVFkgc3dhcnIgIiYjeDIxOTk7Ij48IUVOVElUWSBzd2Fycm93ICImI3gyMTk5OyI%2BPCFFTlRJVFkgTG93ZXJMZWZ0QXJyb3cgIiYjeDIxOTk7Ij48IUVOVElUWSBubGFyciAiJiN4MjE5QTsiPjwhRU5USVRZIG5sZWZ0YXJyb3cgIiYjeDIxOUE7Ij48IUVOVElUWSBucmFyciAiJiN4MjE5QjsiPjwhRU5USVRZIG5yaWdodGFycm93ICImI3gyMTlCOyI%2BPCFFTlRJVFkgcmFycncgIiYjeDIxOUQ7Ij48IUVOVElUWSByaWdodHNxdWlnYXJyb3cgIiYjeDIxOUQ7Ij48IUVOVElUWSBMYXJyICImI3gyMTlFOyI%2BPCFFTlRJVFkgdHdvaGVhZGxlZnRhcnJvdyAiJiN4MjE5RTsiPjwhRU5USVRZIFVhcnIgIiYjeDIxOUY7Ij48IUVOVElUWSBSYXJyICImI3gyMUEwOyI%2BPCFFTlRJVFkgdHdvaGVhZHJpZ2h0YXJyb3cgIiYjeDIxQTA7Ij48IUVOVElUWSBEYXJyICImI3gyMUExOyI%2BPCFFTlRJVFkgbGFycnRsICImI3gyMUEyOyI%2BPCFFTlRJVFkgbGVmdGFycm93dGFpbCAiJiN4MjFBMjsiPjwhRU5USVRZIHJhcnJ0bCAiJiN4MjFBMzsiPjwhRU5USVRZIHJpZ2h0YXJyb3d0YWlsICImI3gyMUEzOyI%2BPCFFTlRJVFkgTGVmdFRlZUFycm93ICImI3gyMUE0OyI%2BPCFFTlRJVFkgbWFwc3RvbGVmdCAiJiN4MjFBNDsiPjwhRU5USVRZIFVwVGVlQXJyb3cgIiYjeDIxQTU7Ij48IUVOVElUWSBtYXBzdG91cCAiJiN4MjFBNTsiPjwhRU5USVRZIG1hcCAiJiN4MjFBNjsiPjwhRU5USVRZIFJpZ2h0VGVlQXJyb3cgIiYjeDIxQTY7Ij48IUVOVElUWSBtYXBzdG8gIiYjeDIxQTY7Ij48IUVOVElUWSBEb3duVGVlQXJyb3cgIiYjeDIxQTc7Ij48IUVOVElUWSBtYXBzdG9kb3duICImI3gyMUE3OyI%2BPCFFTlRJVFkgbGFycmhrICImI3gyMUE5OyI%2BPCFFTlRJVFkgaG9va2xlZnRhcnJvdyAiJiN4MjFBOTsiPjwhRU5USVRZIHJhcnJoayAiJiN4MjFBQTsiPjwhRU5USVRZIGhvb2tyaWdodGFycm93ICImI3gyMUFBOyI%2BPCFFTlRJVFkgbGFycmxwICImI3gyMUFCOyI%2BPCFFTlRJVFkgbG9vcGFycm93bGVmdCAiJiN4MjFBQjsiPjwhRU5USVRZIHJhcnJscCAiJiN4MjFBQzsiPjwhRU5USVRZIGxvb3BhcnJvd3JpZ2h0ICImI3gyMUFDOyI%2BPCFFTlRJVFkgaGFycncgIiYjeDIxQUQ7Ij48IUVOVElUWSBsZWZ0cmlnaHRzcXVpZ2Fycm93ICImI3gyMUFEOyI%2BPCFFTlRJVFkgbmhhcnIgIiYjeDIxQUU7Ij48IUVOVElUWSBubGVmdHJpZ2h0YXJyb3cgIiYjeDIxQUU7Ij48IUVOVElUWSBsc2ggIiYjeDIxQjA7Ij48IUVOVElUWSBMc2ggIiYjeDIxQjA7Ij48IUVOVElUWSByc2ggIiYjeDIxQjE7Ij48IUVOVElUWSBSc2ggIiYjeDIxQjE7Ij48IUVOVElUWSBsZHNoICImI3gyMUIyOyI%2BPCFFTlRJVFkgcmRzaCAiJiN4MjFCMzsiPjwhRU5USVRZIGNyYXJyICImI3gyMUI1OyI%2BPCFFTlRJVFkgY3VsYXJyICImI3gyMUI2OyI%2BPCFFTlRJVFkgY3VydmVhcnJvd2xlZnQgIiYjeDIxQjY7Ij48IUVOVElUWSBjdXJhcnIgIiYjeDIxQjc7Ij48IUVOVElUWSBjdXJ2ZWFycm93cmlnaHQgIiYjeDIxQjc7Ij48IUVOVElUWSBvbGFyciAiJiN4MjFCQTsiPjwhRU5USVRZIGNpcmNsZWFycm93bGVmdCAiJiN4MjFCQTsiPjwhRU5USVRZIG9yYXJyICImI3gyMUJCOyI%2BPCFFTlRJVFkgY2lyY2xlYXJyb3dyaWdodCAiJiN4MjFCQjsiPjwhRU5USVRZIGxoYXJ1ICImI3gyMUJDOyI%2BPCFFTlRJVFkgTGVmdFZlY3RvciAiJiN4MjFCQzsiPjwhRU5USVRZIGxlZnRoYXJwb29udXAgIiYjeDIxQkM7Ij48IUVOVElUWSBsaGFyZCAiJiN4MjFCRDsiPjwhRU5USVRZIGxlZnRoYXJwb29uZG93biAiJiN4MjFCRDsiPjwhRU5USVRZIERvd25MZWZ0VmVjdG9yICImI3gyMUJEOyI%2BPCFFTlRJVFkgdWhhcnIgIiYjeDIxQkU7Ij48IUVOVElUWSB1cGhhcnBvb25yaWdodCAiJiN4MjFCRTsiPjwhRU5USVRZIFJpZ2h0VXBWZWN0b3IgIiYjeDIxQkU7Ij48IUVOVElUWSB1aGFybCAiJiN4MjFCRjsiPjwhRU5USVRZIHVwaGFycG9vbmxlZnQgIiYjeDIxQkY7Ij48IUVOVElUWSBMZWZ0VXBWZWN0b3IgIiYjeDIxQkY7Ij48IUVOVElUWSByaGFydSAiJiN4MjFDMDsiPjwhRU5USVRZIFJpZ2h0VmVjdG9yICImI3gyMUMwOyI%2BPCFFTlRJVFkgcmlnaHRoYXJwb29udXAgIiYjeDIxQzA7Ij48IUVOVElUWSByaGFyZCAiJiN4MjFDMTsiPjwhRU5USVRZIHJpZ2h0aGFycG9vbmRvd24gIiYjeDIxQzE7Ij48IUVOVElUWSBEb3duUmlnaHRWZWN0b3IgIiYjeDIxQzE7Ij48IUVOVElUWSBkaGFyciAiJiN4MjFDMjsiPjwhRU5USVRZIFJpZ2h0RG93blZlY3RvciAiJiN4MjFDMjsiPjwhRU5USVRZIGRvd25oYXJwb29ucmlnaHQgIiYjeDIxQzI7Ij48IUVOVElUWSBkaGFybCAiJiN4MjFDMzsiPjwhRU5USVRZIExlZnREb3duVmVjdG9yICImI3gyMUMzOyI%2BPCFFTlRJVFkgZG93bmhhcnBvb25sZWZ0ICImI3gyMUMzOyI%2BPCFFTlRJVFkgcmxhcnIgIiYjeDIxQzQ7Ij48IUVOVElUWSByaWdodGxlZnRhcnJvd3MgIiYjeDIxQzQ7Ij48IUVOVElUWSBSaWdodEFycm93TGVmdEFycm93ICImI3gyMUM0OyI%2BPCFFTlRJVFkgdWRhcnIgIiYjeDIxQzU7Ij48IUVOVElUWSBVcEFycm93RG93bkFycm93ICImI3gyMUM1OyI%2BPCFFTlRJVFkgbHJhcnIgIiYjeDIxQzY7Ij48IUVOVElUWSBsZWZ0cmlnaHRhcnJvd3MgIiYjeDIxQzY7Ij48IUVOVElUWSBMZWZ0QXJyb3dSaWdodEFycm93ICImI3gyMUM2OyI%2BPCFFTlRJVFkgbGxhcnIgIiYjeDIxQzc7Ij48IUVOVElUWSBsZWZ0bGVmdGFycm93cyAiJiN4MjFDNzsiPjwhRU5USVRZIHV1YXJyICImI3gyMUM4OyI%2BPCFFTlRJVFkgdXB1cGFycm93cyAiJiN4MjFDODsiPjwhRU5USVRZIHJyYXJyICImI3gyMUM5OyI%2BPCFFTlRJVFkgcmlnaHRyaWdodGFycm93cyAiJiN4MjFDOTsiPjwhRU5USVRZIGRkYXJyICImI3gyMUNBOyI%2BPCFFTlRJVFkgZG93bmRvd25hcnJvd3MgIiYjeDIxQ0E7Ij48IUVOVElUWSBscmhhciAiJiN4MjFDQjsiPjwhRU5USVRZIFJldmVyc2VFcXVpbGlicml1bSAiJiN4MjFDQjsiPjwhRU5USVRZIGxlZnRyaWdodGhhcnBvb25zICImI3gyMUNCOyI%2BPCFFTlRJVFkgcmxoYXIgIiYjeDIxQ0M7Ij48IUVOVElUWSByaWdodGxlZnRoYXJwb29ucyAiJiN4MjFDQzsiPjwhRU5USVRZIEVxdWlsaWJyaXVtICImI3gyMUNDOyI%2BPCFFTlRJVFkgbmxBcnIgIiYjeDIxQ0Q7Ij48IUVOVElUWSBuTGVmdGFycm93ICImI3gyMUNEOyI%2BPCFFTlRJVFkgbmhBcnIgIiYjeDIxQ0U7Ij48IUVOVElUWSBuTGVmdHJpZ2h0YXJyb3cgIiYjeDIxQ0U7Ij48IUVOVElUWSBuckFyciAiJiN4MjFDRjsiPjwhRU5USVRZIG5SaWdodGFycm93ICImI3gyMUNGOyI%2BPCFFTlRJVFkgbEFyciAiJiN4MjFEMDsiPjwhRU5USVRZIExlZnRhcnJvdyAiJiN4MjFEMDsiPjwhRU5USVRZIERvdWJsZUxlZnRBcnJvdyAiJiN4MjFEMDsiPjwhRU5USVRZIHVBcnIgIiYjeDIxRDE7Ij48IUVOVElUWSBVcGFycm93ICImI3gyMUQxOyI%2BPCFFTlRJVFkgRG91YmxlVXBBcnJvdyAiJiN4MjFEMTsiPjwhRU5USVRZIHJBcnIgIiYjeDIxRDI7Ij48IUVOVElUWSBSaWdodGFycm93ICImI3gyMUQyOyI%2BPCFFTlRJVFkgSW1wbGllcyAiJiN4MjFEMjsiPjwhRU5USVRZIERvdWJsZVJpZ2h0QXJyb3cgIiYjeDIxRDI7Ij48IUVOVElUWSBkQXJyICImI3gyMUQzOyI%2BPCFFTlRJVFkgRG93bmFycm93ICImI3gyMUQzOyI%2BPCFFTlRJVFkgRG91YmxlRG93bkFycm93ICImI3gyMUQzOyI%2BPCFFTlRJVFkgaEFyciAiJiN4MjFENDsiPjwhRU5USVRZIExlZnRyaWdodGFycm93ICImI3gyMUQ0OyI%2BPCFFTlRJVFkgRG91YmxlTGVmdFJpZ2h0QXJyb3cgIiYjeDIxRDQ7Ij48IUVOVElUWSBpZmYgIiYjeDIxRDQ7Ij48IUVOVElUWSB2QXJyICImI3gyMUQ1OyI%2BPCFFTlRJVFkgVXBkb3duYXJyb3cgIiYjeDIxRDU7Ij48IUVOVElUWSBEb3VibGVVcERvd25BcnJvdyAiJiN4MjFENTsiPjwhRU5USVRZIG53QXJyICImI3gyMUQ2OyI%2BPCFFTlRJVFkgbmVBcnIgIiYjeDIxRDc7Ij48IUVOVElUWSBzZUFyciAiJiN4MjFEODsiPjwhRU5USVRZIHN3QXJyICImI3gyMUQ5OyI%2BPCFFTlRJVFkgbEFhcnIgIiYjeDIxREE7Ij48IUVOVElUWSBMbGVmdGFycm93ICImI3gyMURBOyI%2BPCFFTlRJVFkgckFhcnIgIiYjeDIxREI7Ij48IUVOVElUWSBScmlnaHRhcnJvdyAiJiN4MjFEQjsiPjwhRU5USVRZIHppZ3JhcnIgIiYjeDIxREQ7Ij48IUVOVElUWSBsYXJyYiAiJiN4MjFFNDsiPjwhRU5USVRZIExlZnRBcnJvd0JhciAiJiN4MjFFNDsiPjwhRU5USVRZIHJhcnJiICImI3gyMUU1OyI%2BPCFFTlRJVFkgUmlnaHRBcnJvd0JhciAiJiN4MjFFNTsiPjwhRU5USVRZIGR1YXJyICImI3gyMUY1OyI%2BPCFFTlRJVFkgRG93bkFycm93VXBBcnJvdyAiJiN4MjFGNTsiPjwhRU5USVRZIGxvYXJyICImI3gyMUZEOyI%2BPCFFTlRJVFkgcm9hcnIgIiYjeDIxRkU7Ij48IUVOVElUWSBob2FyciAiJiN4MjFGRjsiPjwhRU5USVRZIGZvcmFsbCAiJiN4MjIwMDsiPjwhRU5USVRZIEZvckFsbCAiJiN4MjIwMDsiPjwhRU5USVRZIGNvbXAgIiYjeDIyMDE7Ij48IUVOVElUWSBjb21wbGVtZW50ICImI3gyMjAxOyI%2BPCFFTlRJVFkgcGFydCAiJiN4MjIwMjsiPjwhRU5USVRZIFBhcnRpYWxEICImI3gyMjAyOyI%2BPCFFTlRJVFkgZXhpc3QgIiYjeDIyMDM7Ij48IUVOVElUWSBFeGlzdHMgIiYjeDIyMDM7Ij48IUVOVElUWSBuZXhpc3QgIiYjeDIyMDQ7Ij48IUVOVElUWSBOb3RFeGlzdHMgIiYjeDIyMDQ7Ij48IUVOVElUWSBuZXhpc3RzICImI3gyMjA0OyI%2BPCFFTlRJVFkgZW1wdHkgIiYjeDIyMDU7Ij48IUVOVElUWSBlbXB0eXNldCAiJiN4MjIwNTsiPjwhRU5USVRZIGVtcHR5diAiJiN4MjIwNTsiPjwhRU5USVRZIHZhcm5vdGhpbmcgIiYjeDIyMDU7Ij48IUVOVElUWSBuYWJsYSAiJiN4MjIwNzsiPjwhRU5USVRZIERlbCAiJiN4MjIwNzsiPjwhRU5USVRZIGlzaW4gIiYjeDIyMDg7Ij48IUVOVElUWSBpc2ludiAiJiN4MjIwODsiPjwhRU5USVRZIEVsZW1lbnQgIiYjeDIyMDg7Ij48IUVOVElUWSBpbiAiJiN4MjIwODsiPjwhRU5USVRZIG5vdGluICImI3gyMjA5OyI%2BPCFFTlRJVFkgTm90RWxlbWVudCAiJiN4MjIwOTsiPjwhRU5USVRZIG5vdGludmEgIiYjeDIyMDk7Ij48IUVOVElUWSBuaXYgIiYjeDIyMEI7Ij48IUVOVElUWSBSZXZlcnNlRWxlbWVudCAiJiN4MjIwQjsiPjwhRU5USVRZIG5pICImI3gyMjBCOyI%2BPCFFTlRJVFkgU3VjaFRoYXQgIiYjeDIyMEI7Ij48IUVOVElUWSBub3RuaSAiJiN4MjIwQzsiPjwhRU5USVRZIG5vdG5pdmEgIiYjeDIyMEM7Ij48IUVOVElUWSBOb3RSZXZlcnNlRWxlbWVudCAiJiN4MjIwQzsiPjwhRU5USVRZIHByb2QgIiYjeDIyMEY7Ij48IUVOVElUWSBQcm9kdWN0ICImI3gyMjBGOyI%2BPCFFTlRJVFkgY29wcm9kICImI3gyMjEwOyI%2BPCFFTlRJVFkgQ29wcm9kdWN0ICImI3gyMjEwOyI%2BPCFFTlRJVFkgc3VtICImI3gyMjExOyI%2BPCFFTlRJVFkgU3VtICImI3gyMjExOyI%2BPCFFTlRJVFkgbWludXMgIiYjeDIyMTI7Ij48IUVOVElUWSBtbnBsdXMgIiYjeDIyMTM7Ij48IUVOVElUWSBtcCAiJiN4MjIxMzsiPjwhRU5USVRZIE1pbnVzUGx1cyAiJiN4MjIxMzsiPjwhRU5USVRZIHBsdXNkbyAiJiN4MjIxNDsiPjwhRU5USVRZIGRvdHBsdXMgIiYjeDIyMTQ7Ij48IUVOVElUWSBzZXRtbiAiJiN4MjIxNjsiPjwhRU5USVRZIHNldG1pbnVzICImI3gyMjE2OyI%2BPCFFTlRJVFkgQmFja3NsYXNoICImI3gyMjE2OyI%2BPCFFTlRJVFkgc3NldG1uICImI3gyMjE2OyI%2BPCFFTlRJVFkgc21hbGxzZXRtaW51cyAiJiN4MjIxNjsiPjwhRU5USVRZIGxvd2FzdCAiJiN4MjIxNzsiPjwhRU5USVRZIGNvbXBmbiAiJiN4MjIxODsiPjwhRU5USVRZIFNtYWxsQ2lyY2xlICImI3gyMjE4OyI%2BPCFFTlRJVFkgcmFkaWMgIiYjeDIyMUE7Ij48IUVOVElUWSBTcXJ0ICImI3gyMjFBOyI%2BPCFFTlRJVFkgcHJvcCAiJiN4MjIxRDsiPjwhRU5USVRZIHByb3B0byAiJiN4MjIxRDsiPjwhRU5USVRZIFByb3BvcnRpb25hbCAiJiN4MjIxRDsiPjwhRU5USVRZIHZwcm9wICImI3gyMjFEOyI%2BPCFFTlRJVFkgdmFycHJvcHRvICImI3gyMjFEOyI%2BPCFFTlRJVFkgaW5maW4gIiYjeDIyMUU7Ij48IUVOVElUWSBhbmdydCAiJiN4MjIxRjsiPjwhRU5USVRZIGFuZyAiJiN4MjIyMDsiPjwhRU5USVRZIGFuZ2xlICImI3gyMjIwOyI%2BPCFFTlRJVFkgYW5nbXNkICImI3gyMjIxOyI%2BPCFFTlRJVFkgbWVhc3VyZWRhbmdsZSAiJiN4MjIyMTsiPjwhRU5USVRZIGFuZ3NwaCAiJiN4MjIyMjsiPjwhRU5USVRZIG1pZCAiJiN4MjIyMzsiPjwhRU5USVRZIFZlcnRpY2FsQmFyICImI3gyMjIzOyI%2BPCFFTlRJVFkgc21pZCAiJiN4MjIyMzsiPjwhRU5USVRZIHNob3J0bWlkICImI3gyMjIzOyI%2BPCFFTlRJVFkgbm1pZCAiJiN4MjIyNDsiPjwhRU5USVRZIE5vdFZlcnRpY2FsQmFyICImI3gyMjI0OyI%2BPCFFTlRJVFkgbnNtaWQgIiYjeDIyMjQ7Ij48IUVOVElUWSBuc2hvcnRtaWQgIiYjeDIyMjQ7Ij48IUVOVElUWSBwYXIgIiYjeDIyMjU7Ij48IUVOVElUWSBwYXJhbGxlbCAiJiN4MjIyNTsiPjwhRU5USVRZIERvdWJsZVZlcnRpY2FsQmFyICImI3gyMjI1OyI%2BPCFFTlRJVFkgc3BhciAiJiN4MjIyNTsiPjwhRU5USVRZIHNob3J0cGFyYWxsZWwgIiYjeDIyMjU7Ij48IUVOVElUWSBucGFyICImI3gyMjI2OyI%2BPCFFTlRJVFkgbnBhcmFsbGVsICImI3gyMjI2OyI%2BPCFFTlRJVFkgTm90RG91YmxlVmVydGljYWxCYXIgIiYjeDIyMjY7Ij48IUVOVElUWSBuc3BhciAiJiN4MjIyNjsiPjwhRU5USVRZIG5zaG9ydHBhcmFsbGVsICImI3gyMjI2OyI%2BPCFFTlRJVFkgYW5kICImI3gyMjI3OyI%2BPCFFTlRJVFkgd2VkZ2UgIiYjeDIyMjc7Ij48IUVOVElUWSBvciAiJiN4MjIyODsiPjwhRU5USVRZIHZlZSAiJiN4MjIyODsiPjwhRU5USVRZIGNhcCAiJiN4MjIyOTsiPjwhRU5USVRZIGN1cCAiJiN4MjIyQTsiPjwhRU5USVRZIGludCAiJiN4MjIyQjsiPjwhRU5USVRZIEludGVncmFsICImI3gyMjJCOyI%2BPCFFTlRJVFkgSW50ICImI3gyMjJDOyI%2BPCFFTlRJVFkgdGludCAiJiN4MjIyRDsiPjwhRU5USVRZIGlpaW50ICImI3gyMjJEOyI%2BPCFFTlRJVFkgY29uaW50ICImI3gyMjJFOyI%2BPCFFTlRJVFkgb2ludCAiJiN4MjIyRTsiPjwhRU5USVRZIENvbnRvdXJJbnRlZ3JhbCAiJiN4MjIyRTsiPjwhRU5USVRZIENvbmludCAiJiN4MjIyRjsiPjwhRU5USVRZIERvdWJsZUNvbnRvdXJJbnRlZ3JhbCAiJiN4MjIyRjsiPjwhRU5USVRZIENjb25pbnQgIiYjeDIyMzA7Ij48IUVOVElUWSBjd2ludCAiJiN4MjIzMTsiPjwhRU5USVRZIGN3Y29uaW50ICImI3gyMjMyOyI%2BPCFFTlRJVFkgQ2xvY2t3aXNlQ29udG91ckludGVncmFsICImI3gyMjMyOyI%2BPCFFTlRJVFkgYXdjb25pbnQgIiYjeDIyMzM7Ij48IUVOVElUWSBDb3VudGVyQ2xvY2t3aXNlQ29udG91ckludGVncmFsICImI3gyMjMzOyI%2BPCFFTlRJVFkgdGhlcmU0ICImI3gyMjM0OyI%2BPCFFTlRJVFkgdGhlcmVmb3JlICImI3gyMjM0OyI%2BPCFFTlRJVFkgVGhlcmVmb3JlICImI3gyMjM0OyI%2BPCFFTlRJVFkgYmVjYXVzICImI3gyMjM1OyI%2BPCFFTlRJVFkgYmVjYXVzZSAiJiN4MjIzNTsiPjwhRU5USVRZIEJlY2F1c2UgIiYjeDIyMzU7Ij48IUVOVElUWSByYXRpbyAiJiN4MjIzNjsiPjwhRU5USVRZIENvbG9uICImI3gyMjM3OyI%2BPCFFTlRJVFkgUHJvcG9ydGlvbiAiJiN4MjIzNzsiPjwhRU5USVRZIG1pbnVzZCAiJiN4MjIzODsiPjwhRU5USVRZIGRvdG1pbnVzICImI3gyMjM4OyI%2BPCFFTlRJVFkgbUREb3QgIiYjeDIyM0E7Ij48IUVOVElUWSBob210aHQgIiYjeDIyM0I7Ij48IUVOVElUWSBzaW0gIiYjeDIyM0M7Ij48IUVOVElUWSBUaWxkZSAiJiN4MjIzQzsiPjwhRU5USVRZIHRoa3NpbSAiJiN4MjIzQzsiPjwhRU5USVRZIHRoaWNrc2ltICImI3gyMjNDOyI%2BPCFFTlRJVFkgYnNpbSAiJiN4MjIzRDsiPjwhRU5USVRZIGJhY2tzaW0gIiYjeDIyM0Q7Ij48IUVOVElUWSBhYyAiJiN4MjIzRTsiPjwhRU5USVRZIG1zdHBvcyAiJiN4MjIzRTsiPjwhRU5USVRZIGFjZCAiJiN4MjIzRjsiPjwhRU5USVRZIHdyZWF0aCAiJiN4MjI0MDsiPjwhRU5USVRZIFZlcnRpY2FsVGlsZGUgIiYjeDIyNDA7Ij48IUVOVElUWSB3ciAiJiN4MjI0MDsiPjwhRU5USVRZIG5zaW0gIiYjeDIyNDE7Ij48IUVOVElUWSBOb3RUaWxkZSAiJiN4MjI0MTsiPjwhRU5USVRZIGVzaW0gIiYjeDIyNDI7Ij48IUVOVElUWSBFcXVhbFRpbGRlICImI3gyMjQyOyI%2BPCFFTlRJVFkgZXFzaW0gIiYjeDIyNDI7Ij48IUVOVElUWSBzaW1lICImI3gyMjQzOyI%2BPCFFTlRJVFkgVGlsZGVFcXVhbCAiJiN4MjI0MzsiPjwhRU5USVRZIHNpbWVxICImI3gyMjQzOyI%2BPCFFTlRJVFkgbnNpbWUgIiYjeDIyNDQ7Ij48IUVOVElUWSBuc2ltZXEgIiYjeDIyNDQ7Ij48IUVOVElUWSBOb3RUaWxkZUVxdWFsICImI3gyMjQ0OyI%2BPCFFTlRJVFkgY29uZyAiJiN4MjI0NTsiPjwhRU5USVRZIFRpbGRlRnVsbEVxdWFsICImI3gyMjQ1OyI%2BPCFFTlRJVFkgc2ltbmUgIiYjeDIyNDY7Ij48IUVOVElUWSBuY29uZyAiJiN4MjI0NzsiPjwhRU5USVRZIE5vdFRpbGRlRnVsbEVxdWFsICImI3gyMjQ3OyI%2BPCFFTlRJVFkgYXN5bXAgIiYjeDIyNDg7Ij48IUVOVElUWSBhcCAiJiN4MjI0ODsiPjwhRU5USVRZIFRpbGRlVGlsZGUgIiYjeDIyNDg7Ij48IUVOVElUWSBhcHByb3ggIiYjeDIyNDg7Ij48IUVOVElUWSB0aGthcCAiJiN4MjI0ODsiPjwhRU5USVRZIHRoaWNrYXBwcm94ICImI3gyMjQ4OyI%2BPCFFTlRJVFkgbmFwICImI3gyMjQ5OyI%2BPCFFTlRJVFkgTm90VGlsZGVUaWxkZSAiJiN4MjI0OTsiPjwhRU5USVRZIG5hcHByb3ggIiYjeDIyNDk7Ij48IUVOVElUWSBhcGUgIiYjeDIyNEE7Ij48IUVOVElUWSBhcHByb3hlcSAiJiN4MjI0QTsiPjwhRU5USVRZIGFwaWQgIiYjeDIyNEI7Ij48IUVOVElUWSBiY29uZyAiJiN4MjI0QzsiPjwhRU5USVRZIGJhY2tjb25nICImI3gyMjRDOyI%2BPCFFTlRJVFkgYXN5bXBlcSAiJiN4MjI0RDsiPjwhRU5USVRZIEN1cENhcCAiJiN4MjI0RDsiPjwhRU5USVRZIGJ1bXAgIiYjeDIyNEU7Ij48IUVOVElUWSBIdW1wRG93bkh1bXAgIiYjeDIyNEU7Ij48IUVOVElUWSBCdW1wZXEgIiYjeDIyNEU7Ij48IUVOVElUWSBidW1wZSAiJiN4MjI0RjsiPjwhRU5USVRZIEh1bXBFcXVhbCAiJiN4MjI0RjsiPjwhRU5USVRZIGJ1bXBlcSAiJiN4MjI0RjsiPjwhRU5USVRZIGVzZG90ICImI3gyMjUwOyI%2BPCFFTlRJVFkgRG90RXF1YWwgIiYjeDIyNTA7Ij48IUVOVElUWSBkb3RlcSAiJiN4MjI1MDsiPjwhRU5USVRZIGVEb3QgIiYjeDIyNTE7Ij48IUVOVElUWSBkb3RlcWRvdCAiJiN4MjI1MTsiPjwhRU5USVRZIGVmRG90ICImI3gyMjUyOyI%2BPCFFTlRJVFkgZmFsbGluZ2RvdHNlcSAiJiN4MjI1MjsiPjwhRU5USVRZIGVyRG90ICImI3gyMjUzOyI%2BPCFFTlRJVFkgcmlzaW5nZG90c2VxICImI3gyMjUzOyI%2BPCFFTlRJVFkgY29sb25lICImI3gyMjU0OyI%2BPCFFTlRJVFkgY29sb25lcSAiJiN4MjI1NDsiPjwhRU5USVRZIEFzc2lnbiAiJiN4MjI1NDsiPjwhRU5USVRZIGVjb2xvbiAiJiN4MjI1NTsiPjwhRU5USVRZIGVxY29sb24gIiYjeDIyNTU7Ij48IUVOVElUWSBlY2lyICImI3gyMjU2OyI%2BPCFFTlRJVFkgZXFjaXJjICImI3gyMjU2OyI%2BPCFFTlRJVFkgY2lyZSAiJiN4MjI1NzsiPjwhRU5USVRZIGNpcmNlcSAiJiN4MjI1NzsiPjwhRU5USVRZIHdlZGdlcSAiJiN4MjI1OTsiPjwhRU5USVRZIHZlZWVxICImI3gyMjVBOyI%2BPCFFTlRJVFkgdHJpZSAiJiN4MjI1QzsiPjwhRU5USVRZIHRyaWFuZ2xlcSAiJiN4MjI1QzsiPjwhRU5USVRZIGVxdWVzdCAiJiN4MjI1RjsiPjwhRU5USVRZIHF1ZXN0ZXEgIiYjeDIyNUY7Ij48IUVOVElUWSBuZSAiJiN4MjI2MDsiPjwhRU5USVRZIE5vdEVxdWFsICImI3gyMjYwOyI%2BPCFFTlRJVFkgZXF1aXYgIiYjeDIyNjE7Ij48IUVOVElUWSBDb25ncnVlbnQgIiYjeDIyNjE7Ij48IUVOVElUWSBuZXF1aXYgIiYjeDIyNjI7Ij48IUVOVElUWSBOb3RDb25ncnVlbnQgIiYjeDIyNjI7Ij48IUVOVElUWSBsZSAiJiN4MjI2NDsiPjwhRU5USVRZIGxlcSAiJiN4MjI2NDsiPjwhRU5USVRZIGdlICImI3gyMjY1OyI%2BPCFFTlRJVFkgR3JlYXRlckVxdWFsICImI3gyMjY1OyI%2BPCFFTlRJVFkgZ2VxICImI3gyMjY1OyI%2BPCFFTlRJVFkgbEUgIiYjeDIyNjY7Ij48IUVOVElUWSBMZXNzRnVsbEVxdWFsICImI3gyMjY2OyI%2BPCFFTlRJVFkgbGVxcSAiJiN4MjI2NjsiPjwhRU5USVRZIGdFICImI3gyMjY3OyI%2BPCFFTlRJVFkgR3JlYXRlckZ1bGxFcXVhbCAiJiN4MjI2NzsiPjwhRU5USVRZIGdlcXEgIiYjeDIyNjc7Ij48IUVOVElUWSBsbkUgIiYjeDIyNjg7Ij48IUVOVElUWSBsbmVxcSAiJiN4MjI2ODsiPjwhRU5USVRZIGduRSAiJiN4MjI2OTsiPjwhRU5USVRZIGduZXFxICImI3gyMjY5OyI%2BPCFFTlRJVFkgTHQgIiYjeDIyNkE7Ij48IUVOVElUWSBOZXN0ZWRMZXNzTGVzcyAiJiN4MjI2QTsiPjwhRU5USVRZIGxsICImI3gyMjZBOyI%2BPCFFTlRJVFkgR3QgIiYjeDIyNkI7Ij48IUVOVElUWSBOZXN0ZWRHcmVhdGVyR3JlYXRlciAiJiN4MjI2QjsiPjwhRU5USVRZIGdnICImI3gyMjZCOyI%2BPCFFTlRJVFkgdHdpeHQgIiYjeDIyNkM7Ij48IUVOVElUWSBiZXR3ZWVuICImI3gyMjZDOyI%2BPCFFTlRJVFkgTm90Q3VwQ2FwICImI3gyMjZEOyI%2BPCFFTlRJVFkgbmx0ICImI3gyMjZFOyI%2BPCFFTlRJVFkgTm90TGVzcyAiJiN4MjI2RTsiPjwhRU5USVRZIG5sZXNzICImI3gyMjZFOyI%2BPCFFTlRJVFkgbmd0ICImI3gyMjZGOyI%2BPCFFTlRJVFkgTm90R3JlYXRlciAiJiN4MjI2RjsiPjwhRU5USVRZIG5ndHIgIiYjeDIyNkY7Ij48IUVOVElUWSBubGUgIiYjeDIyNzA7Ij48IUVOVElUWSBOb3RMZXNzRXF1YWwgIiYjeDIyNzA7Ij48IUVOVElUWSBubGVxICImI3gyMjcwOyI%2BPCFFTlRJVFkgbmdlICImI3gyMjcxOyI%2BPCFFTlRJVFkgTm90R3JlYXRlckVxdWFsICImI3gyMjcxOyI%2BPCFFTlRJVFkgbmdlcSAiJiN4MjI3MTsiPjwhRU5USVRZIGxzaW0gIiYjeDIyNzI7Ij48IUVOVElUWSBMZXNzVGlsZGUgIiYjeDIyNzI7Ij48IUVOVElUWSBsZXNzc2ltICImI3gyMjcyOyI%2BPCFFTlRJVFkgZ3NpbSAiJiN4MjI3MzsiPjwhRU5USVRZIGd0cnNpbSAiJiN4MjI3MzsiPjwhRU5USVRZIEdyZWF0ZXJUaWxkZSAiJiN4MjI3MzsiPjwhRU5USVRZIG5sc2ltICImI3gyMjc0OyI%2BPCFFTlRJVFkgTm90TGVzc1RpbGRlICImI3gyMjc0OyI%2BPCFFTlRJVFkgbmdzaW0gIiYjeDIyNzU7Ij48IUVOVElUWSBOb3RHcmVhdGVyVGlsZGUgIiYjeDIyNzU7Ij48IUVOVElUWSBsZyAiJiN4MjI3NjsiPjwhRU5USVRZIGxlc3NndHIgIiYjeDIyNzY7Ij48IUVOVElUWSBMZXNzR3JlYXRlciAiJiN4MjI3NjsiPjwhRU5USVRZIGdsICImI3gyMjc3OyI%2BPCFFTlRJVFkgZ3RybGVzcyAiJiN4MjI3NzsiPjwhRU5USVRZIEdyZWF0ZXJMZXNzICImI3gyMjc3OyI%2BPCFFTlRJVFkgbnRsZyAiJiN4MjI3ODsiPjwhRU5USVRZIE5vdExlc3NHcmVhdGVyICImI3gyMjc4OyI%2BPCFFTlRJVFkgbnRnbCAiJiN4MjI3OTsiPjwhRU5USVRZIE5vdEdyZWF0ZXJMZXNzICImI3gyMjc5OyI%2BPCFFTlRJVFkgcHIgIiYjeDIyN0E7Ij48IUVOVElUWSBQcmVjZWRlcyAiJiN4MjI3QTsiPjwhRU5USVRZIHByZWMgIiYjeDIyN0E7Ij48IUVOVElUWSBzYyAiJiN4MjI3QjsiPjwhRU5USVRZIFN1Y2NlZWRzICImI3gyMjdCOyI%2BPCFFTlRJVFkgc3VjYyAiJiN4MjI3QjsiPjwhRU5USVRZIHByY3VlICImI3gyMjdDOyI%2BPCFFTlRJVFkgUHJlY2VkZXNTbGFudEVxdWFsICImI3gyMjdDOyI%2BPCFFTlRJVFkgcHJlY2N1cmx5ZXEgIiYjeDIyN0M7Ij48IUVOVElUWSBzY2N1ZSAiJiN4MjI3RDsiPjwhRU5USVRZIFN1Y2NlZWRzU2xhbnRFcXVhbCAiJiN4MjI3RDsiPjwhRU5USVRZIHN1Y2NjdXJseWVxICImI3gyMjdEOyI%2BPCFFTlRJVFkgcHJzaW0gIiYjeDIyN0U7Ij48IUVOVElUWSBwcmVjc2ltICImI3gyMjdFOyI%2BPCFFTlRJVFkgUHJlY2VkZXNUaWxkZSAiJiN4MjI3RTsiPjwhRU5USVRZIHNjc2ltICImI3gyMjdGOyI%2BPCFFTlRJVFkgc3VjY3NpbSAiJiN4MjI3RjsiPjwhRU5USVRZIFN1Y2NlZWRzVGlsZGUgIiYjeDIyN0Y7Ij48IUVOVElUWSBucHIgIiYjeDIyODA7Ij48IUVOVElUWSBucHJlYyAiJiN4MjI4MDsiPjwhRU5USVRZIE5vdFByZWNlZGVzICImI3gyMjgwOyI%2BPCFFTlRJVFkgbnNjICImI3gyMjgxOyI%2BPCFFTlRJVFkgbnN1Y2MgIiYjeDIyODE7Ij48IUVOVElUWSBOb3RTdWNjZWVkcyAiJiN4MjI4MTsiPjwhRU5USVRZIHN1YiAiJiN4MjI4MjsiPjwhRU5USVRZIHN1YnNldCAiJiN4MjI4MjsiPjwhRU5USVRZIHN1cCAiJiN4MjI4MzsiPjwhRU5USVRZIHN1cHNldCAiJiN4MjI4MzsiPjwhRU5USVRZIFN1cGVyc2V0ICImI3gyMjgzOyI%2BPCFFTlRJVFkgbnN1YiAiJiN4MjI4NDsiPjwhRU5USVRZIG5zdXAgIiYjeDIyODU7Ij48IUVOVElUWSBzdWJlICImI3gyMjg2OyI%2BPCFFTlRJVFkgU3Vic2V0RXF1YWwgIiYjeDIyODY7Ij48IUVOVElUWSBzdWJzZXRlcSAiJiN4MjI4NjsiPjwhRU5USVRZIHN1cGUgIiYjeDIyODc7Ij48IUVOVElUWSBzdXBzZXRlcSAiJiN4MjI4NzsiPjwhRU5USVRZIFN1cGVyc2V0RXF1YWwgIiYjeDIyODc7Ij48IUVOVElUWSBuc3ViZSAiJiN4MjI4ODsiPjwhRU5USVRZIG5zdWJzZXRlcSAiJiN4MjI4ODsiPjwhRU5USVRZIE5vdFN1YnNldEVxdWFsICImI3gyMjg4OyI%2BPCFFTlRJVFkgbnN1cGUgIiYjeDIyODk7Ij48IUVOVElUWSBuc3Vwc2V0ZXEgIiYjeDIyODk7Ij48IUVOVElUWSBOb3RTdXBlcnNldEVxdWFsICImI3gyMjg5OyI%2BPCFFTlRJVFkgc3VibmUgIiYjeDIyOEE7Ij48IUVOVElUWSBzdWJzZXRuZXEgIiYjeDIyOEE7Ij48IUVOVElUWSBzdXBuZSAiJiN4MjI4QjsiPjwhRU5USVRZIHN1cHNldG5lcSAiJiN4MjI4QjsiPjwhRU5USVRZIGN1cGRvdCAiJiN4MjI4RDsiPjwhRU5USVRZIHVwbHVzICImI3gyMjhFOyI%2BPCFFTlRJVFkgVW5pb25QbHVzICImI3gyMjhFOyI%2BPCFFTlRJVFkgc3FzdWIgIiYjeDIyOEY7Ij48IUVOVElUWSBTcXVhcmVTdWJzZXQgIiYjeDIyOEY7Ij48IUVOVElUWSBzcXN1YnNldCAiJiN4MjI4RjsiPjwhRU5USVRZIHNxc3VwICImI3gyMjkwOyI%2BPCFFTlRJVFkgU3F1YXJlU3VwZXJzZXQgIiYjeDIyOTA7Ij48IUVOVElUWSBzcXN1cHNldCAiJiN4MjI5MDsiPjwhRU5USVRZIHNxc3ViZSAiJiN4MjI5MTsiPjwhRU5USVRZIFNxdWFyZVN1YnNldEVxdWFsICImI3gyMjkxOyI%2BPCFFTlRJVFkgc3FzdWJzZXRlcSAiJiN4MjI5MTsiPjwhRU5USVRZIHNxc3VwZSAiJiN4MjI5MjsiPjwhRU5USVRZIFNxdWFyZVN1cGVyc2V0RXF1YWwgIiYjeDIyOTI7Ij48IUVOVElUWSBzcXN1cHNldGVxICImI3gyMjkyOyI%2BPCFFTlRJVFkgc3FjYXAgIiYjeDIyOTM7Ij48IUVOVElUWSBTcXVhcmVJbnRlcnNlY3Rpb24gIiYjeDIyOTM7Ij48IUVOVElUWSBzcWN1cCAiJiN4MjI5NDsiPjwhRU5USVRZIFNxdWFyZVVuaW9uICImI3gyMjk0OyI%2BPCFFTlRJVFkgb3BsdXMgIiYjeDIyOTU7Ij48IUVOVElUWSBDaXJjbGVQbHVzICImI3gyMjk1OyI%2BPCFFTlRJVFkgb21pbnVzICImI3gyMjk2OyI%2BPCFFTlRJVFkgQ2lyY2xlTWludXMgIiYjeDIyOTY7Ij48IUVOVElUWSBvdGltZXMgIiYjeDIyOTc7Ij48IUVOVElUWSBDaXJjbGVUaW1lcyAiJiN4MjI5NzsiPjwhRU5USVRZIG9zb2wgIiYjeDIyOTg7Ij48IUVOVElUWSBvZG90ICImI3gyMjk5OyI%2BPCFFTlRJVFkgQ2lyY2xlRG90ICImI3gyMjk5OyI%2BPCFFTlRJVFkgb2NpciAiJiN4MjI5QTsiPjwhRU5USVRZIGNpcmNsZWRjaXJjICImI3gyMjlBOyI%2BPCFFTlRJVFkgb2FzdCAiJiN4MjI5QjsiPjwhRU5USVRZIGNpcmNsZWRhc3QgIiYjeDIyOUI7Ij48IUVOVElUWSBvZGFzaCAiJiN4MjI5RDsiPjwhRU5USVRZIGNpcmNsZWRkYXNoICImI3gyMjlEOyI%2BPCFFTlRJVFkgcGx1c2IgIiYjeDIyOUU7Ij48IUVOVElUWSBib3hwbHVzICImI3gyMjlFOyI%2BPCFFTlRJVFkgbWludXNiICImI3gyMjlGOyI%2BPCFFTlRJVFkgYm94bWludXMgIiYjeDIyOUY7Ij48IUVOVElUWSB0aW1lc2IgIiYjeDIyQTA7Ij48IUVOVElUWSBib3h0aW1lcyAiJiN4MjJBMDsiPjwhRU5USVRZIHNkb3RiICImI3gyMkExOyI%2BPCFFTlRJVFkgZG90c3F1YXJlICImI3gyMkExOyI%2BPCFFTlRJVFkgdmRhc2ggIiYjeDIyQTI7Ij48IUVOVElUWSBSaWdodFRlZSAiJiN4MjJBMjsiPjwhRU5USVRZIGRhc2h2ICImI3gyMkEzOyI%2BPCFFTlRJVFkgTGVmdFRlZSAiJiN4MjJBMzsiPjwhRU5USVRZIHRvcCAiJiN4MjJBNDsiPjwhRU5USVRZIERvd25UZWUgIiYjeDIyQTQ7Ij48IUVOVElUWSBib3R0b20gIiYjeDIyQTU7Ij48IUVOVElUWSBib3QgIiYjeDIyQTU7Ij48IUVOVElUWSBwZXJwICImI3gyMkE1OyI%2BPCFFTlRJVFkgVXBUZWUgIiYjeDIyQTU7Ij48IUVOVElUWSBtb2RlbHMgIiYjeDIyQTc7Ij48IUVOVElUWSB2RGFzaCAiJiN4MjJBODsiPjwhRU5USVRZIERvdWJsZVJpZ2h0VGVlICImI3gyMkE4OyI%2BPCFFTlRJVFkgVmRhc2ggIiYjeDIyQTk7Ij48IUVOVElUWSBWdmRhc2ggIiYjeDIyQUE7Ij48IUVOVElUWSBWRGFzaCAiJiN4MjJBQjsiPjwhRU5USVRZIG52ZGFzaCAiJiN4MjJBQzsiPjwhRU5USVRZIG52RGFzaCAiJiN4MjJBRDsiPjwhRU5USVRZIG5WZGFzaCAiJiN4MjJBRTsiPjwhRU5USVRZIG5WRGFzaCAiJiN4MjJBRjsiPjwhRU5USVRZIHBydXJlbCAiJiN4MjJCMDsiPjwhRU5USVRZIHZsdHJpICImI3gyMkIyOyI%2BPCFFTlRJVFkgdmFydHJpYW5nbGVsZWZ0ICImI3gyMkIyOyI%2BPCFFTlRJVFkgTGVmdFRyaWFuZ2xlICImI3gyMkIyOyI%2BPCFFTlRJVFkgdnJ0cmkgIiYjeDIyQjM7Ij48IUVOVElUWSB2YXJ0cmlhbmdsZXJpZ2h0ICImI3gyMkIzOyI%2BPCFFTlRJVFkgUmlnaHRUcmlhbmdsZSAiJiN4MjJCMzsiPjwhRU5USVRZIGx0cmllICImI3gyMkI0OyI%2BPCFFTlRJVFkgdHJpYW5nbGVsZWZ0ZXEgIiYjeDIyQjQ7Ij48IUVOVElUWSBMZWZ0VHJpYW5nbGVFcXVhbCAiJiN4MjJCNDsiPjwhRU5USVRZIHJ0cmllICImI3gyMkI1OyI%2BPCFFTlRJVFkgdHJpYW5nbGVyaWdodGVxICImI3gyMkI1OyI%2BPCFFTlRJVFkgUmlnaHRUcmlhbmdsZUVxdWFsICImI3gyMkI1OyI%2BPCFFTlRJVFkgb3JpZ29mICImI3gyMkI2OyI%2BPCFFTlRJVFkgaW1vZiAiJiN4MjJCNzsiPjwhRU5USVRZIG11bWFwICImI3gyMkI4OyI%2BPCFFTlRJVFkgbXVsdGltYXAgIiYjeDIyQjg7Ij48IUVOVElUWSBoZXJjb24gIiYjeDIyQjk7Ij48IUVOVElUWSBpbnRjYWwgIiYjeDIyQkE7Ij48IUVOVElUWSBpbnRlcmNhbCAiJiN4MjJCQTsiPjwhRU5USVRZIHZlZWJhciAiJiN4MjJCQjsiPjwhRU5USVRZIGJhcnZlZSAiJiN4MjJCRDsiPjwhRU5USVRZIGFuZ3J0dmIgIiYjeDIyQkU7Ij48IUVOVElUWSBscnRyaSAiJiN4MjJCRjsiPjwhRU5USVRZIHh3ZWRnZSAiJiN4MjJDMDsiPjwhRU5USVRZIFdlZGdlICImI3gyMkMwOyI%2BPCFFTlRJVFkgYmlnd2VkZ2UgIiYjeDIyQzA7Ij48IUVOVElUWSB4dmVlICImI3gyMkMxOyI%2BPCFFTlRJVFkgVmVlICImI3gyMkMxOyI%2BPCFFTlRJVFkgYmlndmVlICImI3gyMkMxOyI%2BPCFFTlRJVFkgeGNhcCAiJiN4MjJDMjsiPjwhRU5USVRZIEludGVyc2VjdGlvbiAiJiN4MjJDMjsiPjwhRU5USVRZIGJpZ2NhcCAiJiN4MjJDMjsiPjwhRU5USVRZIHhjdXAgIiYjeDIyQzM7Ij48IUVOVElUWSBVbmlvbiAiJiN4MjJDMzsiPjwhRU5USVRZIGJpZ2N1cCAiJiN4MjJDMzsiPjwhRU5USVRZIGRpYW0gIiYjeDIyQzQ7Ij48IUVOVElUWSBkaWFtb25kICImI3gyMkM0OyI%2BPCFFTlRJVFkgRGlhbW9uZCAiJiN4MjJDNDsiPjwhRU5USVRZIHNkb3QgIiYjeDIyQzU7Ij48IUVOVElUWSBzc3RhcmYgIiYjeDIyQzY7Ij48IUVOVElUWSBTdGFyICImI3gyMkM2OyI%2BPCFFTlRJVFkgZGl2b254ICImI3gyMkM3OyI%2BPCFFTlRJVFkgZGl2aWRlb250aW1lcyAiJiN4MjJDNzsiPjwhRU5USVRZIGJvd3RpZSAiJiN4MjJDODsiPjwhRU5USVRZIGx0aW1lcyAiJiN4MjJDOTsiPjwhRU5USVRZIHJ0aW1lcyAiJiN4MjJDQTsiPjwhRU5USVRZIGx0aHJlZSAiJiN4MjJDQjsiPjwhRU5USVRZIGxlZnR0aHJlZXRpbWVzICImI3gyMkNCOyI%2BPCFFTlRJVFkgcnRocmVlICImI3gyMkNDOyI%2BPCFFTlRJVFkgcmlnaHR0aHJlZXRpbWVzICImI3gyMkNDOyI%2BPCFFTlRJVFkgYnNpbWUgIiYjeDIyQ0Q7Ij48IUVOVElUWSBiYWNrc2ltZXEgIiYjeDIyQ0Q7Ij48IUVOVElUWSBjdXZlZSAiJiN4MjJDRTsiPjwhRU5USVRZIGN1cmx5dmVlICImI3gyMkNFOyI%2BPCFFTlRJVFkgY3V3ZWQgIiYjeDIyQ0Y7Ij48IUVOVElUWSBjdXJseXdlZGdlICImI3gyMkNGOyI%2BPCFFTlRJVFkgU3ViICImI3gyMkQwOyI%2BPCFFTlRJVFkgU3Vic2V0ICImI3gyMkQwOyI%2BPCFFTlRJVFkgU3VwICImI3gyMkQxOyI%2BPCFFTlRJVFkgU3Vwc2V0ICImI3gyMkQxOyI%2BPCFFTlRJVFkgQ2FwICImI3gyMkQyOyI%2BPCFFTlRJVFkgQ3VwICImI3gyMkQzOyI%2BPCFFTlRJVFkgZm9yayAiJiN4MjJENDsiPjwhRU5USVRZIHBpdGNoZm9yayAiJiN4MjJENDsiPjwhRU5USVRZIGVwYXIgIiYjeDIyRDU7Ij48IUVOVElUWSBsdGRvdCAiJiN4MjJENjsiPjwhRU5USVRZIGxlc3Nkb3QgIiYjeDIyRDY7Ij48IUVOVElUWSBndGRvdCAiJiN4MjJENzsiPjwhRU5USVRZIGd0cmRvdCAiJiN4MjJENzsiPjwhRU5USVRZIExsICImI3gyMkQ4OyI%2BPCFFTlRJVFkgR2cgIiYjeDIyRDk7Ij48IUVOVElUWSBnZ2cgIiYjeDIyRDk7Ij48IUVOVElUWSBsZWcgIiYjeDIyREE7Ij48IUVOVElUWSBMZXNzRXF1YWxHcmVhdGVyICImI3gyMkRBOyI%2BPCFFTlRJVFkgbGVzc2VxZ3RyICImI3gyMkRBOyI%2BPCFFTlRJVFkgZ2VsICImI3gyMkRCOyI%2BPCFFTlRJVFkgZ3RyZXFsZXNzICImI3gyMkRCOyI%2BPCFFTlRJVFkgR3JlYXRlckVxdWFsTGVzcyAiJiN4MjJEQjsiPjwhRU5USVRZIGN1ZXByICImI3gyMkRFOyI%2BPCFFTlRJVFkgY3VybHllcXByZWMgIiYjeDIyREU7Ij48IUVOVElUWSBjdWVzYyAiJiN4MjJERjsiPjwhRU5USVRZIGN1cmx5ZXFzdWNjICImI3gyMkRGOyI%2BPCFFTlRJVFkgbnByY3VlICImI3gyMkUwOyI%2BPCFFTlRJVFkgTm90UHJlY2VkZXNTbGFudEVxdWFsICImI3gyMkUwOyI%2BPCFFTlRJVFkgbnNjY3VlICImI3gyMkUxOyI%2BPCFFTlRJVFkgTm90U3VjY2VlZHNTbGFudEVxdWFsICImI3gyMkUxOyI%2BPCFFTlRJVFkgbnNxc3ViZSAiJiN4MjJFMjsiPjwhRU5USVRZIE5vdFNxdWFyZVN1YnNldEVxdWFsICImI3gyMkUyOyI%2BPCFFTlRJVFkgbnNxc3VwZSAiJiN4MjJFMzsiPjwhRU5USVRZIE5vdFNxdWFyZVN1cGVyc2V0RXF1YWwgIiYjeDIyRTM7Ij48IUVOVElUWSBsbnNpbSAiJiN4MjJFNjsiPjwhRU5USVRZIGduc2ltICImI3gyMkU3OyI%2BPCFFTlRJVFkgcHJuc2ltICImI3gyMkU4OyI%2BPCFFTlRJVFkgcHJlY25zaW0gIiYjeDIyRTg7Ij48IUVOVElUWSBzY25zaW0gIiYjeDIyRTk7Ij48IUVOVElUWSBzdWNjbnNpbSAiJiN4MjJFOTsiPjwhRU5USVRZIG5sdHJpICImI3gyMkVBOyI%2BPCFFTlRJVFkgbnRyaWFuZ2xlbGVmdCAiJiN4MjJFQTsiPjwhRU5USVRZIE5vdExlZnRUcmlhbmdsZSAiJiN4MjJFQTsiPjwhRU5USVRZIG5ydHJpICImI3gyMkVCOyI%2BPCFFTlRJVFkgbnRyaWFuZ2xlcmlnaHQgIiYjeDIyRUI7Ij48IUVOVElUWSBOb3RSaWdodFRyaWFuZ2xlICImI3gyMkVCOyI%2BPCFFTlRJVFkgbmx0cmllICImI3gyMkVDOyI%2BPCFFTlRJVFkgbnRyaWFuZ2xlbGVmdGVxICImI3gyMkVDOyI%2BPCFFTlRJVFkgTm90TGVmdFRyaWFuZ2xlRXF1YWwgIiYjeDIyRUM7Ij48IUVOVElUWSBucnRyaWUgIiYjeDIyRUQ7Ij48IUVOVElUWSBudHJpYW5nbGVyaWdodGVxICImI3gyMkVEOyI%2BPCFFTlRJVFkgTm90UmlnaHRUcmlhbmdsZUVxdWFsICImI3gyMkVEOyI%2BPCFFTlRJVFkgdmVsbGlwICImI3gyMkVFOyI%2BPCFFTlRJVFkgY3Rkb3QgIiYjeDIyRUY7Ij48IUVOVElUWSB1dGRvdCAiJiN4MjJGMDsiPjwhRU5USVRZIGR0ZG90ICImI3gyMkYxOyI%2BPCFFTlRJVFkgZGlzaW4gIiYjeDIyRjI7Ij48IUVOVElUWSBpc2luc3YgIiYjeDIyRjM7Ij48IUVOVElUWSBpc2lucyAiJiN4MjJGNDsiPjwhRU5USVRZIGlzaW5kb3QgIiYjeDIyRjU7Ij48IUVOVElUWSBub3RpbnZjICImI3gyMkY2OyI%2BPCFFTlRJVFkgbm90aW52YiAiJiN4MjJGNzsiPjwhRU5USVRZIGlzaW5FICImI3gyMkY5OyI%2BPCFFTlRJVFkgbmlzZCAiJiN4MjJGQTsiPjwhRU5USVRZIHhuaXMgIiYjeDIyRkI7Ij48IUVOVElUWSBuaXMgIiYjeDIyRkM7Ij48IUVOVElUWSBub3RuaXZjICImI3gyMkZEOyI%2BPCFFTlRJVFkgbm90bml2YiAiJiN4MjJGRTsiPjwhRU5USVRZIGJhcndlZCAiJiN4MjMwNTsiPjwhRU5USVRZIGJhcndlZGdlICImI3gyMzA1OyI%2BPCFFTlRJVFkgQmFyd2VkICImI3gyMzA2OyI%2BPCFFTlRJVFkgZG91YmxlYmFyd2VkZ2UgIiYjeDIzMDY7Ij48IUVOVElUWSBsY2VpbCAiJiN4MjMwODsiPjwhRU5USVRZIExlZnRDZWlsaW5nICImI3gyMzA4OyI%2BPCFFTlRJVFkgcmNlaWwgIiYjeDIzMDk7Ij48IUVOVElUWSBSaWdodENlaWxpbmcgIiYjeDIzMDk7Ij48IUVOVElUWSBsZmxvb3IgIiYjeDIzMEE7Ij48IUVOVElUWSBMZWZ0Rmxvb3IgIiYjeDIzMEE7Ij48IUVOVElUWSByZmxvb3IgIiYjeDIzMEI7Ij48IUVOVElUWSBSaWdodEZsb29yICImI3gyMzBCOyI%2BPCFFTlRJVFkgZHJjcm9wICImI3gyMzBDOyI%2BPCFFTlRJVFkgZGxjcm9wICImI3gyMzBEOyI%2BPCFFTlRJVFkgdXJjcm9wICImI3gyMzBFOyI%2BPCFFTlRJVFkgdWxjcm9wICImI3gyMzBGOyI%2BPCFFTlRJVFkgYm5vdCAiJiN4MjMxMDsiPjwhRU5USVRZIHByb2ZsaW5lICImI3gyMzEyOyI%2BPCFFTlRJVFkgcHJvZnN1cmYgIiYjeDIzMTM7Ij48IUVOVElUWSB0ZWxyZWMgIiYjeDIzMTU7Ij48IUVOVElUWSB0YXJnZXQgIiYjeDIzMTY7Ij48IUVOVElUWSB1bGNvcm4gIiYjeDIzMUM7Ij48IUVOVElUWSB1bGNvcm5lciAiJiN4MjMxQzsiPjwhRU5USVRZIHVyY29ybiAiJiN4MjMxRDsiPjwhRU5USVRZIHVyY29ybmVyICImI3gyMzFEOyI%2BPCFFTlRJVFkgZGxjb3JuICImI3gyMzFFOyI%2BPCFFTlRJVFkgbGxjb3JuZXIgIiYjeDIzMUU7Ij48IUVOVElUWSBkcmNvcm4gIiYjeDIzMUY7Ij48IUVOVElUWSBscmNvcm5lciAiJiN4MjMxRjsiPjwhRU5USVRZIGZyb3duICImI3gyMzIyOyI%2BPCFFTlRJVFkgc2Zyb3duICImI3gyMzIyOyI%2BPCFFTlRJVFkgc21pbGUgIiYjeDIzMjM7Ij48IUVOVElUWSBzc21pbGUgIiYjeDIzMjM7Ij48IUVOVElUWSBjeWxjdHkgIiYjeDIzMkQ7Ij48IUVOVElUWSBwcm9mYWxhciAiJiN4MjMyRTsiPjwhRU5USVRZIHRvcGJvdCAiJiN4MjMzNjsiPjwhRU5USVRZIG92YmFyICImI3gyMzNEOyI%2BPCFFTlRJVFkgc29sYmFyICImI3gyMzNGOyI%2BPCFFTlRJVFkgYW5nemFyciAiJiN4MjM3QzsiPjwhRU5USVRZIGxtb3VzdCAiJiN4MjNCMDsiPjwhRU5USVRZIGxtb3VzdGFjaGUgIiYjeDIzQjA7Ij48IUVOVElUWSBybW91c3QgIiYjeDIzQjE7Ij48IUVOVElUWSBybW91c3RhY2hlICImI3gyM0IxOyI%2BPCFFTlRJVFkgdGJyayAiJiN4MjNCNDsiPjwhRU5USVRZIE92ZXJCcmFja2V0ICImI3gyM0I0OyI%2BPCFFTlRJVFkgYmJyayAiJiN4MjNCNTsiPjwhRU5USVRZIFVuZGVyQnJhY2tldCAiJiN4MjNCNTsiPjwhRU5USVRZIGJicmt0YnJrICImI3gyM0I2OyI%2BPCFFTlRJVFkgT3ZlclBhcmVudGhlc2lzICImI3gyM0RDOyI%2BPCFFTlRJVFkgVW5kZXJQYXJlbnRoZXNpcyAiJiN4MjNERDsiPjwhRU5USVRZIE92ZXJCcmFjZSAiJiN4MjNERTsiPjwhRU5USVRZIFVuZGVyQnJhY2UgIiYjeDIzREY7Ij48IUVOVElUWSB0cnBleml1bSAiJiN4MjNFMjsiPjwhRU5USVRZIGVsaW50ZXJzICImI3gyM0U3OyI%2BPCFFTlRJVFkgYmxhbmsgIiYjeDI0MjM7Ij48IUVOVElUWSBvUyAiJiN4MjRDODsiPjwhRU5USVRZIGNpcmNsZWRTICImI3gyNEM4OyI%2BPCFFTlRJVFkgYm94aCAiJiN4MjUwMDsiPjwhRU5USVRZIEhvcml6b250YWxMaW5lICImI3gyNTAwOyI%2BPCFFTlRJVFkgYm94diAiJiN4MjUwMjsiPjwhRU5USVRZIGJveGRyICImI3gyNTBDOyI%2BPCFFTlRJVFkgYm94ZGwgIiYjeDI1MTA7Ij48IUVOVElUWSBib3h1ciAiJiN4MjUxNDsiPjwhRU5USVRZIGJveHVsICImI3gyNTE4OyI%2BPCFFTlRJVFkgYm94dnIgIiYjeDI1MUM7Ij48IUVOVElUWSBib3h2bCAiJiN4MjUyNDsiPjwhRU5USVRZIGJveGhkICImI3gyNTJDOyI%2BPCFFTlRJVFkgYm94aHUgIiYjeDI1MzQ7Ij48IUVOVElUWSBib3h2aCAiJiN4MjUzQzsiPjwhRU5USVRZIGJveEggIiYjeDI1NTA7Ij48IUVOVElUWSBib3hWICImI3gyNTUxOyI%2BPCFFTlRJVFkgYm94ZFIgIiYjeDI1NTI7Ij48IUVOVElUWSBib3hEciAiJiN4MjU1MzsiPjwhRU5USVRZIGJveERSICImI3gyNTU0OyI%2BPCFFTlRJVFkgYm94ZEwgIiYjeDI1NTU7Ij48IUVOVElUWSBib3hEbCAiJiN4MjU1NjsiPjwhRU5USVRZIGJveERMICImI3gyNTU3OyI%2BPCFFTlRJVFkgYm94dVIgIiYjeDI1NTg7Ij48IUVOVElUWSBib3hVciAiJiN4MjU1OTsiPjwhRU5USVRZIGJveFVSICImI3gyNTVBOyI%2BPCFFTlRJVFkgYm94dUwgIiYjeDI1NUI7Ij48IUVOVElUWSBib3hVbCAiJiN4MjU1QzsiPjwhRU5USVRZIGJveFVMICImI3gyNTVEOyI%2BPCFFTlRJVFkgYm94dlIgIiYjeDI1NUU7Ij48IUVOVElUWSBib3hWciAiJiN4MjU1RjsiPjwhRU5USVRZIGJveFZSICImI3gyNTYwOyI%2BPCFFTlRJVFkgYm94dkwgIiYjeDI1NjE7Ij48IUVOVElUWSBib3hWbCAiJiN4MjU2MjsiPjwhRU5USVRZIGJveFZMICImI3gyNTYzOyI%2BPCFFTlRJVFkgYm94SGQgIiYjeDI1NjQ7Ij48IUVOVElUWSBib3hoRCAiJiN4MjU2NTsiPjwhRU5USVRZIGJveEhEICImI3gyNTY2OyI%2BPCFFTlRJVFkgYm94SHUgIiYjeDI1Njc7Ij48IUVOVElUWSBib3hoVSAiJiN4MjU2ODsiPjwhRU5USVRZIGJveEhVICImI3gyNTY5OyI%2BPCFFTlRJVFkgYm94dkggIiYjeDI1NkE7Ij48IUVOVElUWSBib3hWaCAiJiN4MjU2QjsiPjwhRU5USVRZIGJveFZIICImI3gyNTZDOyI%2BPCFFTlRJVFkgdWhibGsgIiYjeDI1ODA7Ij48IUVOVElUWSBsaGJsayAiJiN4MjU4NDsiPjwhRU5USVRZIGJsb2NrICImI3gyNTg4OyI%2BPCFFTlRJVFkgYmxrMTQgIiYjeDI1OTE7Ij48IUVOVElUWSBibGsxMiAiJiN4MjU5MjsiPjwhRU5USVRZIGJsazM0ICImI3gyNTkzOyI%2BPCFFTlRJVFkgc3F1ICImI3gyNUExOyI%2BPCFFTlRJVFkgc3F1YXJlICImI3gyNUExOyI%2BPCFFTlRJVFkgU3F1YXJlICImI3gyNUExOyI%2BPCFFTlRJVFkgc3F1ZiAiJiN4MjVBQTsiPjwhRU5USVRZIHNxdWFyZiAiJiN4MjVBQTsiPjwhRU5USVRZIGJsYWNrc3F1YXJlICImI3gyNUFBOyI%2BPCFFTlRJVFkgRmlsbGVkVmVyeVNtYWxsU3F1YXJlICImI3gyNUFBOyI%2BPCFFTlRJVFkgRW1wdHlWZXJ5U21hbGxTcXVhcmUgIiYjeDI1QUI7Ij48IUVOVElUWSByZWN0ICImI3gyNUFEOyI%2BPCFFTlRJVFkgbWFya2VyICImI3gyNUFFOyI%2BPCFFTlRJVFkgZmx0bnMgIiYjeDI1QjE7Ij48IUVOVElUWSB4dXRyaSAiJiN4MjVCMzsiPjwhRU5USVRZIGJpZ3RyaWFuZ2xldXAgIiYjeDI1QjM7Ij48IUVOVElUWSB1dHJpZiAiJiN4MjVCNDsiPjwhRU5USVRZIGJsYWNrdHJpYW5nbGUgIiYjeDI1QjQ7Ij48IUVOVElUWSB1dHJpICImI3gyNUI1OyI%2BPCFFTlRJVFkgdHJpYW5nbGUgIiYjeDI1QjU7Ij48IUVOVElUWSBydHJpZiAiJiN4MjVCODsiPjwhRU5USVRZIGJsYWNrdHJpYW5nbGVyaWdodCAiJiN4MjVCODsiPjwhRU5USVRZIHJ0cmkgIiYjeDI1Qjk7Ij48IUVOVElUWSB0cmlhbmdsZXJpZ2h0ICImI3gyNUI5OyI%2BPCFFTlRJVFkgeGR0cmkgIiYjeDI1QkQ7Ij48IUVOVElUWSBiaWd0cmlhbmdsZWRvd24gIiYjeDI1QkQ7Ij48IUVOVElUWSBkdHJpZiAiJiN4MjVCRTsiPjwhRU5USVRZIGJsYWNrdHJpYW5nbGVkb3duICImI3gyNUJFOyI%2BPCFFTlRJVFkgZHRyaSAiJiN4MjVCRjsiPjwhRU5USVRZIHRyaWFuZ2xlZG93biAiJiN4MjVCRjsiPjwhRU5USVRZIGx0cmlmICImI3gyNUMyOyI%2BPCFFTlRJVFkgYmxhY2t0cmlhbmdsZWxlZnQgIiYjeDI1QzI7Ij48IUVOVElUWSBsdHJpICImI3gyNUMzOyI%2BPCFFTlRJVFkgdHJpYW5nbGVsZWZ0ICImI3gyNUMzOyI%2BPCFFTlRJVFkgbG96ICImI3gyNUNBOyI%2BPCFFTlRJVFkgbG96ZW5nZSAiJiN4MjVDQTsiPjwhRU5USVRZIGNpciAiJiN4MjVDQjsiPjwhRU5USVRZIHRyaWRvdCAiJiN4MjVFQzsiPjwhRU5USVRZIHhjaXJjICImI3gyNUVGOyI%2BPCFFTlRJVFkgYmlnY2lyYyAiJiN4MjVFRjsiPjwhRU5USVRZIHVsdHJpICImI3gyNUY4OyI%2BPCFFTlRJVFkgdXJ0cmkgIiYjeDI1Rjk7Ij48IUVOVElUWSBsbHRyaSAiJiN4MjVGQTsiPjwhRU5USVRZIEVtcHR5U21hbGxTcXVhcmUgIiYjeDI1RkI7Ij48IUVOVElUWSBGaWxsZWRTbWFsbFNxdWFyZSAiJiN4MjVGQzsiPjwhRU5USVRZIHN0YXJmICImI3gyNjA1OyI%2BPCFFTlRJVFkgYmlnc3RhciAiJiN4MjYwNTsiPjwhRU5USVRZIHN0YXIgIiYjeDI2MDY7Ij48IUVOVElUWSBwaG9uZSAiJiN4MjYwRTsiPjwhRU5USVRZIGZlbWFsZSAiJiN4MjY0MDsiPjwhRU5USVRZIG1hbGUgIiYjeDI2NDI7Ij48IUVOVElUWSBzcGFkZXMgIiYjeDI2NjA7Ij48IUVOVElUWSBzcGFkZXN1aXQgIiYjeDI2NjA7Ij48IUVOVElUWSBjbHVicyAiJiN4MjY2MzsiPjwhRU5USVRZIGNsdWJzdWl0ICImI3gyNjYzOyI%2BPCFFTlRJVFkgaGVhcnRzICImI3gyNjY1OyI%2BPCFFTlRJVFkgaGVhcnRzdWl0ICImI3gyNjY1OyI%2BPCFFTlRJVFkgZGlhbXMgIiYjeDI2NjY7Ij48IUVOVElUWSBkaWFtb25kc3VpdCAiJiN4MjY2NjsiPjwhRU5USVRZIHN1bmcgIiYjeDI2NkE7Ij48IUVOVElUWSBmbGF0ICImI3gyNjZEOyI%2BPCFFTlRJVFkgbmF0dXIgIiYjeDI2NkU7Ij48IUVOVElUWSBuYXR1cmFsICImI3gyNjZFOyI%2BPCFFTlRJVFkgc2hhcnAgIiYjeDI2NkY7Ij48IUVOVElUWSBjaGVjayAiJiN4MjcxMzsiPjwhRU5USVRZIGNoZWNrbWFyayAiJiN4MjcxMzsiPjwhRU5USVRZIGNyb3NzICImI3gyNzE3OyI%2BPCFFTlRJVFkgbWFsdCAiJiN4MjcyMDsiPjwhRU5USVRZIG1hbHRlc2UgIiYjeDI3MjA7Ij48IUVOVElUWSBzZXh0ICImI3gyNzM2OyI%2BPCFFTlRJVFkgVmVydGljYWxTZXBhcmF0b3IgIiYjeDI3NTg7Ij48IUVOVElUWSBsYmJyayAiJiN4Mjc3MjsiPjwhRU5USVRZIHJiYnJrICImI3gyNzczOyI%2BPCFFTlRJVFkgYnNvbGhzdWIgIiYjeDI3Qzg7Ij48IUVOVElUWSBzdXBoc29sICImI3gyN0M5OyI%2BPCFFTlRJVFkgbG9icmsgIiYjeDI3RTY7Ij48IUVOVElUWSBMZWZ0RG91YmxlQnJhY2tldCAiJiN4MjdFNjsiPjwhRU5USVRZIHJvYnJrICImI3gyN0U3OyI%2BPCFFTlRJVFkgUmlnaHREb3VibGVCcmFja2V0ICImI3gyN0U3OyI%2BPCFFTlRJVFkgbGFuZyAiJiN4MjdFODsiPjwhRU5USVRZIExlZnRBbmdsZUJyYWNrZXQgIiYjeDI3RTg7Ij48IUVOVElUWSBsYW5nbGUgIiYjeDI3RTg7Ij48IUVOVElUWSByYW5nICImI3gyN0U5OyI%2BPCFFTlRJVFkgUmlnaHRBbmdsZUJyYWNrZXQgIiYjeDI3RTk7Ij48IUVOVElUWSByYW5nbGUgIiYjeDI3RTk7Ij48IUVOVElUWSBMYW5nICImI3gyN0VBOyI%2BPCFFTlRJVFkgUmFuZyAiJiN4MjdFQjsiPjwhRU5USVRZIGxvYW5nICImI3gyN0VDOyI%2BPCFFTlRJVFkgcm9hbmcgIiYjeDI3RUQ7Ij48IUVOVElUWSB4bGFyciAiJiN4MjdGNTsiPjwhRU5USVRZIGxvbmdsZWZ0YXJyb3cgIiYjeDI3RjU7Ij48IUVOVElUWSBMb25nTGVmdEFycm93ICImI3gyN0Y1OyI%2BPCFFTlRJVFkgeHJhcnIgIiYjeDI3RjY7Ij48IUVOVElUWSBsb25ncmlnaHRhcnJvdyAiJiN4MjdGNjsiPjwhRU5USVRZIExvbmdSaWdodEFycm93ICImI3gyN0Y2OyI%2BPCFFTlRJVFkgeGhhcnIgIiYjeDI3Rjc7Ij48IUVOVElUWSBsb25nbGVmdHJpZ2h0YXJyb3cgIiYjeDI3Rjc7Ij48IUVOVElUWSBMb25nTGVmdFJpZ2h0QXJyb3cgIiYjeDI3Rjc7Ij48IUVOVElUWSB4bEFyciAiJiN4MjdGODsiPjwhRU5USVRZIExvbmdsZWZ0YXJyb3cgIiYjeDI3Rjg7Ij48IUVOVElUWSBEb3VibGVMb25nTGVmdEFycm93ICImI3gyN0Y4OyI%2BPCFFTlRJVFkgeHJBcnIgIiYjeDI3Rjk7Ij48IUVOVElUWSBMb25ncmlnaHRhcnJvdyAiJiN4MjdGOTsiPjwhRU5USVRZIERvdWJsZUxvbmdSaWdodEFycm93ICImI3gyN0Y5OyI%2BPCFFTlRJVFkgeGhBcnIgIiYjeDI3RkE7Ij48IUVOVElUWSBMb25nbGVmdHJpZ2h0YXJyb3cgIiYjeDI3RkE7Ij48IUVOVElUWSBEb3VibGVMb25nTGVmdFJpZ2h0QXJyb3cgIiYjeDI3RkE7Ij48IUVOVElUWSB4bWFwICImI3gyN0ZDOyI%2BPCFFTlRJVFkgbG9uZ21hcHN0byAiJiN4MjdGQzsiPjwhRU5USVRZIGR6aWdyYXJyICImI3gyN0ZGOyI%2BPCFFTlRJVFkgbnZsQXJyICImI3gyOTAyOyI%2BPCFFTlRJVFkgbnZyQXJyICImI3gyOTAzOyI%2BPCFFTlRJVFkgbnZIYXJyICImI3gyOTA0OyI%2BPCFFTlRJVFkgTWFwICImI3gyOTA1OyI%2BPCFFTlRJVFkgbGJhcnIgIiYjeDI5MEM7Ij48IUVOVElUWSByYmFyciAiJiN4MjkwRDsiPjwhRU5USVRZIGJrYXJvdyAiJiN4MjkwRDsiPjwhRU5USVRZIGxCYXJyICImI3gyOTBFOyI%2BPCFFTlRJVFkgckJhcnIgIiYjeDI5MEY7Ij48IUVOVElUWSBkYmthcm93ICImI3gyOTBGOyI%2BPCFFTlRJVFkgUkJhcnIgIiYjeDI5MTA7Ij48IUVOVElUWSBkcmJrYXJvdyAiJiN4MjkxMDsiPjwhRU5USVRZIEREb3RyYWhkICImI3gyOTExOyI%2BPCFFTlRJVFkgVXBBcnJvd0JhciAiJiN4MjkxMjsiPjwhRU5USVRZIERvd25BcnJvd0JhciAiJiN4MjkxMzsiPjwhRU5USVRZIFJhcnJ0bCAiJiN4MjkxNjsiPjwhRU5USVRZIGxhdGFpbCAiJiN4MjkxOTsiPjwhRU5USVRZIHJhdGFpbCAiJiN4MjkxQTsiPjwhRU5USVRZIGxBdGFpbCAiJiN4MjkxQjsiPjwhRU5USVRZIHJBdGFpbCAiJiN4MjkxQzsiPjwhRU5USVRZIGxhcnJmcyAiJiN4MjkxRDsiPjwhRU5USVRZIHJhcnJmcyAiJiN4MjkxRTsiPjwhRU5USVRZIGxhcnJiZnMgIiYjeDI5MUY7Ij48IUVOVElUWSByYXJyYmZzICImI3gyOTIwOyI%2BPCFFTlRJVFkgbndhcmhrICImI3gyOTIzOyI%2BPCFFTlRJVFkgbmVhcmhrICImI3gyOTI0OyI%2BPCFFTlRJVFkgc2VhcmhrICImI3gyOTI1OyI%2BPCFFTlRJVFkgaGtzZWFyb3cgIiYjeDI5MjU7Ij48IUVOVElUWSBzd2FyaGsgIiYjeDI5MjY7Ij48IUVOVElUWSBoa3N3YXJvdyAiJiN4MjkyNjsiPjwhRU5USVRZIG53bmVhciAiJiN4MjkyNzsiPjwhRU5USVRZIG5lc2VhciAiJiN4MjkyODsiPjwhRU5USVRZIHRvZWEgIiYjeDI5Mjg7Ij48IUVOVElUWSBzZXN3YXIgIiYjeDI5Mjk7Ij48IUVOVElUWSB0b3NhICImI3gyOTI5OyI%2BPCFFTlRJVFkgc3dud2FyICImI3gyOTJBOyI%2BPCFFTlRJVFkgcmFycmMgIiYjeDI5MzM7Ij48IUVOVElUWSBjdWRhcnJyICImI3gyOTM1OyI%2BPCFFTlRJVFkgbGRjYSAiJiN4MjkzNjsiPjwhRU5USVRZIHJkY2EgIiYjeDI5Mzc7Ij48IUVOVElUWSBjdWRhcnJsICImI3gyOTM4OyI%2BPCFFTlRJVFkgbGFycnBsICImI3gyOTM5OyI%2BPCFFTlRJVFkgY3VyYXJybSAiJiN4MjkzQzsiPjwhRU5USVRZIGN1bGFycnAgIiYjeDI5M0Q7Ij48IUVOVElUWSByYXJycGwgIiYjeDI5NDU7Ij48IUVOVElUWSBoYXJyY2lyICImI3gyOTQ4OyI%2BPCFFTlRJVFkgVWFycm9jaXIgIiYjeDI5NDk7Ij48IUVOVElUWSBsdXJkc2hhciAiJiN4Mjk0QTsiPjwhRU5USVRZIGxkcnVzaGFyICImI3gyOTRCOyI%2BPCFFTlRJVFkgTGVmdFJpZ2h0VmVjdG9yICImI3gyOTRFOyI%2BPCFFTlRJVFkgUmlnaHRVcERvd25WZWN0b3IgIiYjeDI5NEY7Ij48IUVOVElUWSBEb3duTGVmdFJpZ2h0VmVjdG9yICImI3gyOTUwOyI%2BPCFFTlRJVFkgTGVmdFVwRG93blZlY3RvciAiJiN4Mjk1MTsiPjwhRU5USVRZIExlZnRWZWN0b3JCYXIgIiYjeDI5NTI7Ij48IUVOVElUWSBSaWdodFZlY3RvckJhciAiJiN4Mjk1MzsiPjwhRU5USVRZIFJpZ2h0VXBWZWN0b3JCYXIgIiYjeDI5NTQ7Ij48IUVOVElUWSBSaWdodERvd25WZWN0b3JCYXIgIiYjeDI5NTU7Ij48IUVOVElUWSBEb3duTGVmdFZlY3RvckJhciAiJiN4Mjk1NjsiPjwhRU5USVRZIERvd25SaWdodFZlY3RvckJhciAiJiN4Mjk1NzsiPjwhRU5USVRZIExlZnRVcFZlY3RvckJhciAiJiN4Mjk1ODsiPjwhRU5USVRZIExlZnREb3duVmVjdG9yQmFyICImI3gyOTU5OyI%2BPCFFTlRJVFkgTGVmdFRlZVZlY3RvciAiJiN4Mjk1QTsiPjwhRU5USVRZIFJpZ2h0VGVlVmVjdG9yICImI3gyOTVCOyI%2BPCFFTlRJVFkgUmlnaHRVcFRlZVZlY3RvciAiJiN4Mjk1QzsiPjwhRU5USVRZIFJpZ2h0RG93blRlZVZlY3RvciAiJiN4Mjk1RDsiPjwhRU5USVRZIERvd25MZWZ0VGVlVmVjdG9yICImI3gyOTVFOyI%2BPCFFTlRJVFkgRG93blJpZ2h0VGVlVmVjdG9yICImI3gyOTVGOyI%2BPCFFTlRJVFkgTGVmdFVwVGVlVmVjdG9yICImI3gyOTYwOyI%2BPCFFTlRJVFkgTGVmdERvd25UZWVWZWN0b3IgIiYjeDI5NjE7Ij48IUVOVElUWSBsSGFyICImI3gyOTYyOyI%2BPCFFTlRJVFkgdUhhciAiJiN4Mjk2MzsiPjwhRU5USVRZIHJIYXIgIiYjeDI5NjQ7Ij48IUVOVElUWSBkSGFyICImI3gyOTY1OyI%2BPCFFTlRJVFkgbHVydWhhciAiJiN4Mjk2NjsiPjwhRU5USVRZIGxkcmRoYXIgIiYjeDI5Njc7Ij48IUVOVElUWSBydWx1aGFyICImI3gyOTY4OyI%2BPCFFTlRJVFkgcmRsZGhhciAiJiN4Mjk2OTsiPjwhRU5USVRZIGxoYXJ1bCAiJiN4Mjk2QTsiPjwhRU5USVRZIGxsaGFyZCAiJiN4Mjk2QjsiPjwhRU5USVRZIHJoYXJ1bCAiJiN4Mjk2QzsiPjwhRU5USVRZIGxyaGFyZCAiJiN4Mjk2RDsiPjwhRU5USVRZIHVkaGFyICImI3gyOTZFOyI%2BPCFFTlRJVFkgVXBFcXVpbGlicml1bSAiJiN4Mjk2RTsiPjwhRU5USVRZIGR1aGFyICImI3gyOTZGOyI%2BPCFFTlRJVFkgUmV2ZXJzZVVwRXF1aWxpYnJpdW0gIiYjeDI5NkY7Ij48IUVOVElUWSBSb3VuZEltcGxpZXMgIiYjeDI5NzA7Ij48IUVOVElUWSBlcmFyciAiJiN4Mjk3MTsiPjwhRU5USVRZIHNpbXJhcnIgIiYjeDI5NzI7Ij48IUVOVElUWSBsYXJyc2ltICImI3gyOTczOyI%2BPCFFTlRJVFkgcmFycnNpbSAiJiN4Mjk3NDsiPjwhRU5USVRZIHJhcnJhcCAiJiN4Mjk3NTsiPjwhRU5USVRZIGx0bGFyciAiJiN4Mjk3NjsiPjwhRU5USVRZIGd0cmFyciAiJiN4Mjk3ODsiPjwhRU5USVRZIHN1YnJhcnIgIiYjeDI5Nzk7Ij48IUVOVElUWSBzdXBsYXJyICImI3gyOTdCOyI%2BPCFFTlRJVFkgbGZpc2h0ICImI3gyOTdDOyI%2BPCFFTlRJVFkgcmZpc2h0ICImI3gyOTdEOyI%2BPCFFTlRJVFkgdWZpc2h0ICImI3gyOTdFOyI%2BPCFFTlRJVFkgZGZpc2h0ICImI3gyOTdGOyI%2BPCFFTlRJVFkgbG9wYXIgIiYjeDI5ODU7Ij48IUVOVElUWSByb3BhciAiJiN4Mjk4NjsiPjwhRU5USVRZIGxicmtlICImI3gyOThCOyI%2BPCFFTlRJVFkgcmJya2UgIiYjeDI5OEM7Ij48IUVOVElUWSBsYnJrc2x1ICImI3gyOThEOyI%2BPCFFTlRJVFkgcmJya3NsZCAiJiN4Mjk4RTsiPjwhRU5USVRZIGxicmtzbGQgIiYjeDI5OEY7Ij48IUVOVElUWSByYnJrc2x1ICImI3gyOTkwOyI%2BPCFFTlRJVFkgbGFuZ2QgIiYjeDI5OTE7Ij48IUVOVElUWSByYW5nZCAiJiN4Mjk5MjsiPjwhRU5USVRZIGxwYXJsdCAiJiN4Mjk5MzsiPjwhRU5USVRZIHJwYXJndCAiJiN4Mjk5NDsiPjwhRU5USVRZIGd0bFBhciAiJiN4Mjk5NTsiPjwhRU5USVRZIGx0clBhciAiJiN4Mjk5NjsiPjwhRU5USVRZIHZ6aWd6YWcgIiYjeDI5OUE7Ij48IUVOVElUWSB2YW5ncnQgIiYjeDI5OUM7Ij48IUVOVElUWSBhbmdydHZiZCAiJiN4Mjk5RDsiPjwhRU5USVRZIGFuZ2UgIiYjeDI5QTQ7Ij48IUVOVElUWSByYW5nZSAiJiN4MjlBNTsiPjwhRU5USVRZIGR3YW5nbGUgIiYjeDI5QTY7Ij48IUVOVElUWSB1d2FuZ2xlICImI3gyOUE3OyI%2BPCFFTlRJVFkgYW5nbXNkYWEgIiYjeDI5QTg7Ij48IUVOVElUWSBhbmdtc2RhYiAiJiN4MjlBOTsiPjwhRU5USVRZIGFuZ21zZGFjICImI3gyOUFBOyI%2BPCFFTlRJVFkgYW5nbXNkYWQgIiYjeDI5QUI7Ij48IUVOVElUWSBhbmdtc2RhZSAiJiN4MjlBQzsiPjwhRU5USVRZIGFuZ21zZGFmICImI3gyOUFEOyI%2BPCFFTlRJVFkgYW5nbXNkYWcgIiYjeDI5QUU7Ij48IUVOVElUWSBhbmdtc2RhaCAiJiN4MjlBRjsiPjwhRU5USVRZIGJlbXB0eXYgIiYjeDI5QjA7Ij48IUVOVElUWSBkZW1wdHl2ICImI3gyOUIxOyI%2BPCFFTlRJVFkgY2VtcHR5diAiJiN4MjlCMjsiPjwhRU5USVRZIHJhZW1wdHl2ICImI3gyOUIzOyI%2BPCFFTlRJVFkgbGFlbXB0eXYgIiYjeDI5QjQ7Ij48IUVOVElUWSBvaGJhciAiJiN4MjlCNTsiPjwhRU5USVRZIG9taWQgIiYjeDI5QjY7Ij48IUVOVElUWSBvcGFyICImI3gyOUI3OyI%2BPCFFTlRJVFkgb3BlcnAgIiYjeDI5Qjk7Ij48IUVOVElUWSBvbGNyb3NzICImI3gyOUJCOyI%2BPCFFTlRJVFkgb2Rzb2xkICImI3gyOUJDOyI%2BPCFFTlRJVFkgb2xjaXIgIiYjeDI5QkU7Ij48IUVOVElUWSBvZmNpciAiJiN4MjlCRjsiPjwhRU5USVRZIG9sdCAiJiN4MjlDMDsiPjwhRU5USVRZIG9ndCAiJiN4MjlDMTsiPjwhRU5USVRZIGNpcnNjaXIgIiYjeDI5QzI7Ij48IUVOVElUWSBjaXJFICImI3gyOUMzOyI%2BPCFFTlRJVFkgc29sYiAiJiN4MjlDNDsiPjwhRU5USVRZIGJzb2xiICImI3gyOUM1OyI%2BPCFFTlRJVFkgYm94Ym94ICImI3gyOUM5OyI%2BPCFFTlRJVFkgdHJpc2IgIiYjeDI5Q0Q7Ij48IUVOVElUWSBydHJpbHRyaSAiJiN4MjlDRTsiPjwhRU5USVRZIExlZnRUcmlhbmdsZUJhciAiJiN4MjlDRjsiPjwhRU5USVRZIFJpZ2h0VHJpYW5nbGVCYXIgIiYjeDI5RDA7Ij48IUVOVElUWSBpaW5maW4gIiYjeDI5REM7Ij48IUVOVElUWSBpbmZpbnRpZSAiJiN4MjlERDsiPjwhRU5USVRZIG52aW5maW4gIiYjeDI5REU7Ij48IUVOVElUWSBlcGFyc2wgIiYjeDI5RTM7Ij48IUVOVElUWSBzbWVwYXJzbCAiJiN4MjlFNDsiPjwhRU5USVRZIGVxdnBhcnNsICImI3gyOUU1OyI%2BPCFFTlRJVFkgbG96ZiAiJiN4MjlFQjsiPjwhRU5USVRZIGJsYWNrbG96ZW5nZSAiJiN4MjlFQjsiPjwhRU5USVRZIFJ1bGVEZWxheWVkICImI3gyOUY0OyI%2BPCFFTlRJVFkgZHNvbCAiJiN4MjlGNjsiPjwhRU5USVRZIHhvZG90ICImI3gyQTAwOyI%2BPCFFTlRJVFkgYmlnb2RvdCAiJiN4MkEwMDsiPjwhRU5USVRZIHhvcGx1cyAiJiN4MkEwMTsiPjwhRU5USVRZIGJpZ29wbHVzICImI3gyQTAxOyI%2BPCFFTlRJVFkgeG90aW1lICImI3gyQTAyOyI%2BPCFFTlRJVFkgYmlnb3RpbWVzICImI3gyQTAyOyI%2BPCFFTlRJVFkgeHVwbHVzICImI3gyQTA0OyI%2BPCFFTlRJVFkgYmlndXBsdXMgIiYjeDJBMDQ7Ij48IUVOVElUWSB4c3FjdXAgIiYjeDJBMDY7Ij48IUVOVElUWSBiaWdzcWN1cCAiJiN4MkEwNjsiPjwhRU5USVRZIHFpbnQgIiYjeDJBMEM7Ij48IUVOVElUWSBpaWlpbnQgIiYjeDJBMEM7Ij48IUVOVElUWSBmcGFydGludCAiJiN4MkEwRDsiPjwhRU5USVRZIGNpcmZuaW50ICImI3gyQTEwOyI%2BPCFFTlRJVFkgYXdpbnQgIiYjeDJBMTE7Ij48IUVOVElUWSBycHBvbGludCAiJiN4MkExMjsiPjwhRU5USVRZIHNjcG9saW50ICImI3gyQTEzOyI%2BPCFFTlRJVFkgbnBvbGludCAiJiN4MkExNDsiPjwhRU5USVRZIHBvaW50aW50ICImI3gyQTE1OyI%2BPCFFTlRJVFkgcXVhdGludCAiJiN4MkExNjsiPjwhRU5USVRZIGludGxhcmhrICImI3gyQTE3OyI%2BPCFFTlRJVFkgcGx1c2NpciAiJiN4MkEyMjsiPjwhRU5USVRZIHBsdXNhY2lyICImI3gyQTIzOyI%2BPCFFTlRJVFkgc2ltcGx1cyAiJiN4MkEyNDsiPjwhRU5USVRZIHBsdXNkdSAiJiN4MkEyNTsiPjwhRU5USVRZIHBsdXNzaW0gIiYjeDJBMjY7Ij48IUVOVElUWSBwbHVzdHdvICImI3gyQTI3OyI%2BPCFFTlRJVFkgbWNvbW1hICImI3gyQTI5OyI%2BPCFFTlRJVFkgbWludXNkdSAiJiN4MkEyQTsiPjwhRU5USVRZIGxvcGx1cyAiJiN4MkEyRDsiPjwhRU5USVRZIHJvcGx1cyAiJiN4MkEyRTsiPjwhRU5USVRZIENyb3NzICImI3gyQTJGOyI%2BPCFFTlRJVFkgdGltZXNkICImI3gyQTMwOyI%2BPCFFTlRJVFkgdGltZXNiYXIgIiYjeDJBMzE7Ij48IUVOVElUWSBzbWFzaHAgIiYjeDJBMzM7Ij48IUVOVElUWSBsb3RpbWVzICImI3gyQTM0OyI%2BPCFFTlRJVFkgcm90aW1lcyAiJiN4MkEzNTsiPjwhRU5USVRZIG90aW1lc2FzICImI3gyQTM2OyI%2BPCFFTlRJVFkgT3RpbWVzICImI3gyQTM3OyI%2BPCFFTlRJVFkgb2RpdiAiJiN4MkEzODsiPjwhRU5USVRZIHRyaXBsdXMgIiYjeDJBMzk7Ij48IUVOVElUWSB0cmltaW51cyAiJiN4MkEzQTsiPjwhRU5USVRZIHRyaXRpbWUgIiYjeDJBM0I7Ij48IUVOVElUWSBpcHJvZCAiJiN4MkEzQzsiPjwhRU5USVRZIGludHByb2QgIiYjeDJBM0M7Ij48IUVOVElUWSBhbWFsZyAiJiN4MkEzRjsiPjwhRU5USVRZIGNhcGRvdCAiJiN4MkE0MDsiPjwhRU5USVRZIG5jdXAgIiYjeDJBNDI7Ij48IUVOVElUWSBuY2FwICImI3gyQTQzOyI%2BPCFFTlRJVFkgY2FwYW5kICImI3gyQTQ0OyI%2BPCFFTlRJVFkgY3Vwb3IgIiYjeDJBNDU7Ij48IUVOVElUWSBjdXBjYXAgIiYjeDJBNDY7Ij48IUVOVElUWSBjYXBjdXAgIiYjeDJBNDc7Ij48IUVOVElUWSBjdXBicmNhcCAiJiN4MkE0ODsiPjwhRU5USVRZIGNhcGJyY3VwICImI3gyQTQ5OyI%2BPCFFTlRJVFkgY3VwY3VwICImI3gyQTRBOyI%2BPCFFTlRJVFkgY2FwY2FwICImI3gyQTRCOyI%2BPCFFTlRJVFkgY2N1cHMgIiYjeDJBNEM7Ij48IUVOVElUWSBjY2FwcyAiJiN4MkE0RDsiPjwhRU5USVRZIGNjdXBzc20gIiYjeDJBNTA7Ij48IUVOVElUWSBBbmQgIiYjeDJBNTM7Ij48IUVOVElUWSBPciAiJiN4MkE1NDsiPjwhRU5USVRZIGFuZGFuZCAiJiN4MkE1NTsiPjwhRU5USVRZIG9yb3IgIiYjeDJBNTY7Ij48IUVOVElUWSBvcnNsb3BlICImI3gyQTU3OyI%2BPCFFTlRJVFkgYW5kc2xvcGUgIiYjeDJBNTg7Ij48IUVOVElUWSBhbmR2ICImI3gyQTVBOyI%2BPCFFTlRJVFkgb3J2ICImI3gyQTVCOyI%2BPCFFTlRJVFkgYW5kZCAiJiN4MkE1QzsiPjwhRU5USVRZIG9yZCAiJiN4MkE1RDsiPjwhRU5USVRZIHdlZGJhciAiJiN4MkE1RjsiPjwhRU5USVRZIHNkb3RlICImI3gyQTY2OyI%2BPCFFTlRJVFkgc2ltZG90ICImI3gyQTZBOyI%2BPCFFTlRJVFkgY29uZ2RvdCAiJiN4MkE2RDsiPjwhRU5USVRZIGVhc3RlciAiJiN4MkE2RTsiPjwhRU5USVRZIGFwYWNpciAiJiN4MkE2RjsiPjwhRU5USVRZIGFwRSAiJiN4MkE3MDsiPjwhRU5USVRZIGVwbHVzICImI3gyQTcxOyI%2BPCFFTlRJVFkgcGx1c2UgIiYjeDJBNzI7Ij48IUVOVElUWSBFc2ltICImI3gyQTczOyI%2BPCFFTlRJVFkgQ29sb25lICImI3gyQTc0OyI%2BPCFFTlRJVFkgRXF1YWwgIiYjeDJBNzU7Ij48IUVOVElUWSBlRERvdCAiJiN4MkE3NzsiPjwhRU5USVRZIGRkb3RzZXEgIiYjeDJBNzc7Ij48IUVOVElUWSBlcXVpdkREICImI3gyQTc4OyI%2BPCFFTlRJVFkgbHRjaXIgIiYjeDJBNzk7Ij48IUVOVElUWSBndGNpciAiJiN4MkE3QTsiPjwhRU5USVRZIGx0cXVlc3QgIiYjeDJBN0I7Ij48IUVOVElUWSBndHF1ZXN0ICImI3gyQTdDOyI%2BPCFFTlRJVFkgbGVzICImI3gyQTdEOyI%2BPCFFTlRJVFkgTGVzc1NsYW50RXF1YWwgIiYjeDJBN0Q7Ij48IUVOVElUWSBsZXFzbGFudCAiJiN4MkE3RDsiPjwhRU5USVRZIGdlcyAiJiN4MkE3RTsiPjwhRU5USVRZIEdyZWF0ZXJTbGFudEVxdWFsICImI3gyQTdFOyI%2BPCFFTlRJVFkgZ2Vxc2xhbnQgIiYjeDJBN0U7Ij48IUVOVElUWSBsZXNkb3QgIiYjeDJBN0Y7Ij48IUVOVElUWSBnZXNkb3QgIiYjeDJBODA7Ij48IUVOVElUWSBsZXNkb3RvICImI3gyQTgxOyI%2BPCFFTlRJVFkgZ2VzZG90byAiJiN4MkE4MjsiPjwhRU5USVRZIGxlc2RvdG9yICImI3gyQTgzOyI%2BPCFFTlRJVFkgZ2VzZG90b2wgIiYjeDJBODQ7Ij48IUVOVElUWSBsYXAgIiYjeDJBODU7Ij48IUVOVElUWSBsZXNzYXBwcm94ICImI3gyQTg1OyI%2BPCFFTlRJVFkgZ2FwICImI3gyQTg2OyI%2BPCFFTlRJVFkgZ3RyYXBwcm94ICImI3gyQTg2OyI%2BPCFFTlRJVFkgbG5lICImI3gyQTg3OyI%2BPCFFTlRJVFkgbG5lcSAiJiN4MkE4NzsiPjwhRU5USVRZIGduZSAiJiN4MkE4ODsiPjwhRU5USVRZIGduZXEgIiYjeDJBODg7Ij48IUVOVElUWSBsbmFwICImI3gyQTg5OyI%2BPCFFTlRJVFkgbG5hcHByb3ggIiYjeDJBODk7Ij48IUVOVElUWSBnbmFwICImI3gyQThBOyI%2BPCFFTlRJVFkgZ25hcHByb3ggIiYjeDJBOEE7Ij48IUVOVElUWSBsRWcgIiYjeDJBOEI7Ij48IUVOVElUWSBsZXNzZXFxZ3RyICImI3gyQThCOyI%2BPCFFTlRJVFkgZ0VsICImI3gyQThDOyI%2BPCFFTlRJVFkgZ3RyZXFxbGVzcyAiJiN4MkE4QzsiPjwhRU5USVRZIGxzaW1lICImI3gyQThEOyI%2BPCFFTlRJVFkgZ3NpbWUgIiYjeDJBOEU7Ij48IUVOVElUWSBsc2ltZyAiJiN4MkE4RjsiPjwhRU5USVRZIGdzaW1sICImI3gyQTkwOyI%2BPCFFTlRJVFkgbGdFICImI3gyQTkxOyI%2BPCFFTlRJVFkgZ2xFICImI3gyQTkyOyI%2BPCFFTlRJVFkgbGVzZ2VzICImI3gyQTkzOyI%2BPCFFTlRJVFkgZ2VzbGVzICImI3gyQTk0OyI%2BPCFFTlRJVFkgZWxzICImI3gyQTk1OyI%2BPCFFTlRJVFkgZXFzbGFudGxlc3MgIiYjeDJBOTU7Ij48IUVOVElUWSBlZ3MgIiYjeDJBOTY7Ij48IUVOVElUWSBlcXNsYW50Z3RyICImI3gyQTk2OyI%2BPCFFTlRJVFkgZWxzZG90ICImI3gyQTk3OyI%2BPCFFTlRJVFkgZWdzZG90ICImI3gyQTk4OyI%2BPCFFTlRJVFkgZWwgIiYjeDJBOTk7Ij48IUVOVElUWSBlZyAiJiN4MkE5QTsiPjwhRU5USVRZIHNpbWwgIiYjeDJBOUQ7Ij48IUVOVElUWSBzaW1nICImI3gyQTlFOyI%2BPCFFTlRJVFkgc2ltbEUgIiYjeDJBOUY7Ij48IUVOVElUWSBzaW1nRSAiJiN4MkFBMDsiPjwhRU5USVRZIExlc3NMZXNzICImI3gyQUExOyI%2BPCFFTlRJVFkgR3JlYXRlckdyZWF0ZXIgIiYjeDJBQTI7Ij48IUVOVElUWSBnbGogIiYjeDJBQTQ7Ij48IUVOVElUWSBnbGEgIiYjeDJBQTU7Ij48IUVOVElUWSBsdGNjICImI3gyQUE2OyI%2BPCFFTlRJVFkgZ3RjYyAiJiN4MkFBNzsiPjwhRU5USVRZIGxlc2NjICImI3gyQUE4OyI%2BPCFFTlRJVFkgZ2VzY2MgIiYjeDJBQTk7Ij48IUVOVElUWSBzbXQgIiYjeDJBQUE7Ij48IUVOVElUWSBsYXQgIiYjeDJBQUI7Ij48IUVOVElUWSBzbXRlICImI3gyQUFDOyI%2BPCFFTlRJVFkgbGF0ZSAiJiN4MkFBRDsiPjwhRU5USVRZIGJ1bXBFICImI3gyQUFFOyI%2BPCFFTlRJVFkgcHJlICImI3gyQUFGOyI%2BPCFFTlRJVFkgcHJlY2VxICImI3gyQUFGOyI%2BPCFFTlRJVFkgUHJlY2VkZXNFcXVhbCAiJiN4MkFBRjsiPjwhRU5USVRZIHNjZSAiJiN4MkFCMDsiPjwhRU5USVRZIHN1Y2NlcSAiJiN4MkFCMDsiPjwhRU5USVRZIFN1Y2NlZWRzRXF1YWwgIiYjeDJBQjA7Ij48IUVOVElUWSBwckUgIiYjeDJBQjM7Ij48IUVOVElUWSBzY0UgIiYjeDJBQjQ7Ij48IUVOVElUWSBwcm5FICImI3gyQUI1OyI%2BPCFFTlRJVFkgcHJlY25lcXEgIiYjeDJBQjU7Ij48IUVOVElUWSBzY25FICImI3gyQUI2OyI%2BPCFFTlRJVFkgc3VjY25lcXEgIiYjeDJBQjY7Ij48IUVOVElUWSBwcmFwICImI3gyQUI3OyI%2BPCFFTlRJVFkgcHJlY2FwcHJveCAiJiN4MkFCNzsiPjwhRU5USVRZIHNjYXAgIiYjeDJBQjg7Ij48IUVOVElUWSBzdWNjYXBwcm94ICImI3gyQUI4OyI%2BPCFFTlRJVFkgcHJuYXAgIiYjeDJBQjk7Ij48IUVOVElUWSBwcmVjbmFwcHJveCAiJiN4MkFCOTsiPjwhRU5USVRZIHNjbmFwICImI3gyQUJBOyI%2BPCFFTlRJVFkgc3VjY25hcHByb3ggIiYjeDJBQkE7Ij48IUVOVElUWSBQciAiJiN4MkFCQjsiPjwhRU5USVRZIFNjICImI3gyQUJDOyI%2BPCFFTlRJVFkgc3ViZG90ICImI3gyQUJEOyI%2BPCFFTlRJVFkgc3VwZG90ICImI3gyQUJFOyI%2BPCFFTlRJVFkgc3VicGx1cyAiJiN4MkFCRjsiPjwhRU5USVRZIHN1cHBsdXMgIiYjeDJBQzA7Ij48IUVOVElUWSBzdWJtdWx0ICImI3gyQUMxOyI%2BPCFFTlRJVFkgc3VwbXVsdCAiJiN4MkFDMjsiPjwhRU5USVRZIHN1YmVkb3QgIiYjeDJBQzM7Ij48IUVOVElUWSBzdXBlZG90ICImI3gyQUM0OyI%2BPCFFTlRJVFkgc3ViRSAiJiN4MkFDNTsiPjwhRU5USVRZIHN1YnNldGVxcSAiJiN4MkFDNTsiPjwhRU5USVRZIHN1cEUgIiYjeDJBQzY7Ij48IUVOVElUWSBzdXBzZXRlcXEgIiYjeDJBQzY7Ij48IUVOVElUWSBzdWJzaW0gIiYjeDJBQzc7Ij48IUVOVElUWSBzdXBzaW0gIiYjeDJBQzg7Ij48IUVOVElUWSBzdWJuRSAiJiN4MkFDQjsiPjwhRU5USVRZIHN1YnNldG5lcXEgIiYjeDJBQ0I7Ij48IUVOVElUWSBzdXBuRSAiJiN4MkFDQzsiPjwhRU5USVRZIHN1cHNldG5lcXEgIiYjeDJBQ0M7Ij48IUVOVElUWSBjc3ViICImI3gyQUNGOyI%2BPCFFTlRJVFkgY3N1cCAiJiN4MkFEMDsiPjwhRU5USVRZIGNzdWJlICImI3gyQUQxOyI%2BPCFFTlRJVFkgY3N1cGUgIiYjeDJBRDI7Ij48IUVOVElUWSBzdWJzdXAgIiYjeDJBRDM7Ij48IUVOVElUWSBzdXBzdWIgIiYjeDJBRDQ7Ij48IUVOVElUWSBzdWJzdWIgIiYjeDJBRDU7Ij48IUVOVElUWSBzdXBzdXAgIiYjeDJBRDY7Ij48IUVOVElUWSBzdXBoc3ViICImI3gyQUQ3OyI%2BPCFFTlRJVFkgc3VwZHN1YiAiJiN4MkFEODsiPjwhRU5USVRZIGZvcmt2ICImI3gyQUQ5OyI%2BPCFFTlRJVFkgdG9wZm9yayAiJiN4MkFEQTsiPjwhRU5USVRZIG1sY3AgIiYjeDJBREI7Ij48IUVOVElUWSBEYXNodiAiJiN4MkFFNDsiPjwhRU5USVRZIERvdWJsZUxlZnRUZWUgIiYjeDJBRTQ7Ij48IUVOVElUWSBWZGFzaGwgIiYjeDJBRTY7Ij48IUVOVElUWSBCYXJ2ICImI3gyQUU3OyI%2BPCFFTlRJVFkgdkJhciAiJiN4MkFFODsiPjwhRU5USVRZIHZCYXJ2ICImI3gyQUU5OyI%2BPCFFTlRJVFkgVmJhciAiJiN4MkFFQjsiPjwhRU5USVRZIE5vdCAiJiN4MkFFQzsiPjwhRU5USVRZIGJOb3QgIiYjeDJBRUQ7Ij48IUVOVElUWSBybm1pZCAiJiN4MkFFRTsiPjwhRU5USVRZIGNpcm1pZCAiJiN4MkFFRjsiPjwhRU5USVRZIG1pZGNpciAiJiN4MkFGMDsiPjwhRU5USVRZIHRvcGNpciAiJiN4MkFGMTsiPjwhRU5USVRZIG5ocGFyICImI3gyQUYyOyI%2BPCFFTlRJVFkgcGFyc2ltICImI3gyQUYzOyI%2BPCFFTlRJVFkgcGFyc2wgIiYjeDJBRkQ7Ij48IUVOVElUWSBmZmxpZyAiJiN4RkIwMDsiPjwhRU5USVRZIGZpbGlnICImI3hGQjAxOyI%2BPCFFTlRJVFkgZmxsaWcgIiYjeEZCMDI7Ij48IUVOVElUWSBmZmlsaWcgIiYjeEZCMDM7Ij48IUVOVElUWSBmZmxsaWcgIiYjeEZCMDQ7Ij48IUVOVElUWSBBc2NyICImI3gxRDQ5QzsiPjwhRU5USVRZIENzY3IgIiYjeDFENDlFOyI%2BPCFFTlRJVFkgRHNjciAiJiN4MUQ0OUY7Ij48IUVOVElUWSBHc2NyICImI3gxRDRBMjsiPjwhRU5USVRZIEpzY3IgIiYjeDFENEE1OyI%2BPCFFTlRJVFkgS3NjciAiJiN4MUQ0QTY7Ij48IUVOVElUWSBOc2NyICImI3gxRDRBOTsiPjwhRU5USVRZIE9zY3IgIiYjeDFENEFBOyI%2BPCFFTlRJVFkgUHNjciAiJiN4MUQ0QUI7Ij48IUVOVElUWSBRc2NyICImI3gxRDRBQzsiPjwhRU5USVRZIFNzY3IgIiYjeDFENEFFOyI%2BPCFFTlRJVFkgVHNjciAiJiN4MUQ0QUY7Ij48IUVOVElUWSBVc2NyICImI3gxRDRCMDsiPjwhRU5USVRZIFZzY3IgIiYjeDFENEIxOyI%2BPCFFTlRJVFkgV3NjciAiJiN4MUQ0QjI7Ij48IUVOVElUWSBYc2NyICImI3gxRDRCMzsiPjwhRU5USVRZIFlzY3IgIiYjeDFENEI0OyI%2BPCFFTlRJVFkgWnNjciAiJiN4MUQ0QjU7Ij48IUVOVElUWSBhc2NyICImI3gxRDRCNjsiPjwhRU5USVRZIGJzY3IgIiYjeDFENEI3OyI%2BPCFFTlRJVFkgY3NjciAiJiN4MUQ0Qjg7Ij48IUVOVElUWSBkc2NyICImI3gxRDRCOTsiPjwhRU5USVRZIGZzY3IgIiYjeDFENEJCOyI%2BPCFFTlRJVFkgaHNjciAiJiN4MUQ0QkQ7Ij48IUVOVElUWSBpc2NyICImI3gxRDRCRTsiPjwhRU5USVRZIGpzY3IgIiYjeDFENEJGOyI%2BPCFFTlRJVFkga3NjciAiJiN4MUQ0QzA7Ij48IUVOVElUWSBsc2NyICImI3gxRDRDMTsiPjwhRU5USVRZIG1zY3IgIiYjeDFENEMyOyI%2BPCFFTlRJVFkgbnNjciAiJiN4MUQ0QzM7Ij48IUVOVElUWSBwc2NyICImI3gxRDRDNTsiPjwhRU5USVRZIHFzY3IgIiYjeDFENEM2OyI%2BPCFFTlRJVFkgcnNjciAiJiN4MUQ0Qzc7Ij48IUVOVElUWSBzc2NyICImI3gxRDRDODsiPjwhRU5USVRZIHRzY3IgIiYjeDFENEM5OyI%2BPCFFTlRJVFkgdXNjciAiJiN4MUQ0Q0E7Ij48IUVOVElUWSB2c2NyICImI3gxRDRDQjsiPjwhRU5USVRZIHdzY3IgIiYjeDFENENDOyI%2BPCFFTlRJVFkgeHNjciAiJiN4MUQ0Q0Q7Ij48IUVOVElUWSB5c2NyICImI3gxRDRDRTsiPjwhRU5USVRZIHpzY3IgIiYjeDFENENGOyI%2BPCFFTlRJVFkgQWZyICImI3gxRDUwNDsiPjwhRU5USVRZIEJmciAiJiN4MUQ1MDU7Ij48IUVOVElUWSBEZnIgIiYjeDFENTA3OyI%2BPCFFTlRJVFkgRWZyICImI3gxRDUwODsiPjwhRU5USVRZIEZmciAiJiN4MUQ1MDk7Ij48IUVOVElUWSBHZnIgIiYjeDFENTBBOyI%2BPCFFTlRJVFkgSmZyICImI3gxRDUwRDsiPjwhRU5USVRZIEtmciAiJiN4MUQ1MEU7Ij48IUVOVElUWSBMZnIgIiYjeDFENTBGOyI%2BPCFFTlRJVFkgTWZyICImI3gxRDUxMDsiPjwhRU5USVRZIE5mciAiJiN4MUQ1MTE7Ij48IUVOVElUWSBPZnIgIiYjeDFENTEyOyI%2BPCFFTlRJVFkgUGZyICImI3gxRDUxMzsiPjwhRU5USVRZIFFmciAiJiN4MUQ1MTQ7Ij48IUVOVElUWSBTZnIgIiYjeDFENTE2OyI%2BPCFFTlRJVFkgVGZyICImI3gxRDUxNzsiPjwhRU5USVRZIFVmciAiJiN4MUQ1MTg7Ij48IUVOVElUWSBWZnIgIiYjeDFENTE5OyI%2BPCFFTlRJVFkgV2ZyICImI3gxRDUxQTsiPjwhRU5USVRZIFhmciAiJiN4MUQ1MUI7Ij48IUVOVElUWSBZZnIgIiYjeDFENTFDOyI%2BPCFFTlRJVFkgYWZyICImI3gxRDUxRTsiPjwhRU5USVRZIGJmciAiJiN4MUQ1MUY7Ij48IUVOVElUWSBjZnIgIiYjeDFENTIwOyI%2BPCFFTlRJVFkgZGZyICImI3gxRDUyMTsiPjwhRU5USVRZIGVmciAiJiN4MUQ1MjI7Ij48IUVOVElUWSBmZnIgIiYjeDFENTIzOyI%2BPCFFTlRJVFkgZ2ZyICImI3gxRDUyNDsiPjwhRU5USVRZIGhmciAiJiN4MUQ1MjU7Ij48IUVOVElUWSBpZnIgIiYjeDFENTI2OyI%2BPCFFTlRJVFkgamZyICImI3gxRDUyNzsiPjwhRU5USVRZIGtmciAiJiN4MUQ1Mjg7Ij48IUVOVElUWSBsZnIgIiYjeDFENTI5OyI%2BPCFFTlRJVFkgbWZyICImI3gxRDUyQTsiPjwhRU5USVRZIG5mciAiJiN4MUQ1MkI7Ij48IUVOVElUWSBvZnIgIiYjeDFENTJDOyI%2BPCFFTlRJVFkgcGZyICImI3gxRDUyRDsiPjwhRU5USVRZIHFmciAiJiN4MUQ1MkU7Ij48IUVOVElUWSByZnIgIiYjeDFENTJGOyI%2BPCFFTlRJVFkgc2ZyICImI3gxRDUzMDsiPjwhRU5USVRZIHRmciAiJiN4MUQ1MzE7Ij48IUVOVElUWSB1ZnIgIiYjeDFENTMyOyI%2BPCFFTlRJVFkgdmZyICImI3gxRDUzMzsiPjwhRU5USVRZIHdmciAiJiN4MUQ1MzQ7Ij48IUVOVElUWSB4ZnIgIiYjeDFENTM1OyI%2BPCFFTlRJVFkgeWZyICImI3gxRDUzNjsiPjwhRU5USVRZIHpmciAiJiN4MUQ1Mzc7Ij48IUVOVElUWSBBb3BmICImI3gxRDUzODsiPjwhRU5USVRZIEJvcGYgIiYjeDFENTM5OyI%2BPCFFTlRJVFkgRG9wZiAiJiN4MUQ1M0I7Ij48IUVOVElUWSBFb3BmICImI3gxRDUzQzsiPjwhRU5USVRZIEZvcGYgIiYjeDFENTNEOyI%2BPCFFTlRJVFkgR29wZiAiJiN4MUQ1M0U7Ij48IUVOVElUWSBJb3BmICImI3gxRDU0MDsiPjwhRU5USVRZIEpvcGYgIiYjeDFENTQxOyI%2BPCFFTlRJVFkgS29wZiAiJiN4MUQ1NDI7Ij48IUVOVElUWSBMb3BmICImI3gxRDU0MzsiPjwhRU5USVRZIE1vcGYgIiYjeDFENTQ0OyI%2BPCFFTlRJVFkgT29wZiAiJiN4MUQ1NDY7Ij48IUVOVElUWSBTb3BmICImI3gxRDU0QTsiPjwhRU5USVRZIFRvcGYgIiYjeDFENTRCOyI%2BPCFFTlRJVFkgVW9wZiAiJiN4MUQ1NEM7Ij48IUVOVElUWSBWb3BmICImI3gxRDU0RDsiPjwhRU5USVRZIFdvcGYgIiYjeDFENTRFOyI%2BPCFFTlRJVFkgWG9wZiAiJiN4MUQ1NEY7Ij48IUVOVElUWSBZb3BmICImI3gxRDU1MDsiPjwhRU5USVRZIGFvcGYgIiYjeDFENTUyOyI%2BPCFFTlRJVFkgYm9wZiAiJiN4MUQ1NTM7Ij48IUVOVElUWSBjb3BmICImI3gxRDU1NDsiPjwhRU5USVRZIGRvcGYgIiYjeDFENTU1OyI%2BPCFFTlRJVFkgZW9wZiAiJiN4MUQ1NTY7Ij48IUVOVElUWSBmb3BmICImI3gxRDU1NzsiPjwhRU5USVRZIGdvcGYgIiYjeDFENTU4OyI%2BPCFFTlRJVFkgaG9wZiAiJiN4MUQ1NTk7Ij48IUVOVElUWSBpb3BmICImI3gxRDU1QTsiPjwhRU5USVRZIGpvcGYgIiYjeDFENTVCOyI%2BPCFFTlRJVFkga29wZiAiJiN4MUQ1NUM7Ij48IUVOVElUWSBsb3BmICImI3gxRDU1RDsiPjwhRU5USVRZIG1vcGYgIiYjeDFENTVFOyI%2BPCFFTlRJVFkgbm9wZiAiJiN4MUQ1NUY7Ij48IUVOVElUWSBvb3BmICImI3gxRDU2MDsiPjwhRU5USVRZIHBvcGYgIiYjeDFENTYxOyI%2BPCFFTlRJVFkgcW9wZiAiJiN4MUQ1NjI7Ij48IUVOVElUWSByb3BmICImI3gxRDU2MzsiPjwhRU5USVRZIHNvcGYgIiYjeDFENTY0OyI%2BPCFFTlRJVFkgdG9wZiAiJiN4MUQ1NjU7Ij48IUVOVElUWSB1b3BmICImI3gxRDU2NjsiPjwhRU5USVRZIHZvcGYgIiYjeDFENTY3OyI%2BPCFFTlRJVFkgd29wZiAiJiN4MUQ1Njg7Ij48IUVOVElUWSB4b3BmICImI3gxRDU2OTsiPjwhRU5USVRZIHlvcGYgIiYjeDFENTZBOyI%2BPCFFTlRJVFkgem9wZiAiJiN4MUQ1NkI7Ij4%3D>the URL given by this
  link</a>.</p>

  <ul class=brief><li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN</code></li>
   <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1//EN</code></li>
   <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN</code></li>
   <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Frameset//EN</code></li>
   <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;Basic&nbsp;1.0//EN</code></li>
   <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1&nbsp;plus&nbsp;MathML&nbsp;2.0//EN</code></li>
   <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1&nbsp;plus&nbsp;MathML&nbsp;2.0&nbsp;plus&nbsp;SVG&nbsp;1.1//EN</code></li>
   <li><code title="">-//W3C//DTD&nbsp;MathML&nbsp;2.0//EN</code></li>
   <li><code title="">-//WAPFORUM//DTD&nbsp;XHTML&nbsp;Mobile&nbsp;1.0//EN</code></li>
  </ul><p>Furthermore, user agents should attempt to retrieve the above
  external entity's content when one of the above public identifiers
  is used, and should not attempt to retrieve any other external
  entity's content.</p>

  <p class=note>This is not strictly a <a href=#willful-violation title="willful
  violation">violation</a> of the XML specification, but it does
  contradict the spirit of the XML specification's requirements. This
  is motivated by a desire for user agents to all handle entities in
  an interoperable fashion without requiring any network access for
  handling external subsets. <a href=#refsXML>[XML]</a></p>

  <p id=scriptTagXML>When an <a href=#xml-parser>XML parser</a> creates a
  <code><a href=#script>script</a></code> element, it must be marked as being
  <a href=#parser-inserted>"parser-inserted"</a>.  If the parser was originally
  created for the <a href=#xml-fragment-parsing-algorithm>XML fragment parsing algorithm</a>, then
  the element must be marked as <a href=#already-started>"already started"</a>
  also. When the element's end tag is parsed, the user agent must
  <a href=#running-a-script title="running a script">run</a> the <code><a href=#script>script</a></code>
  element. If this causes there to be a <a href=#pending-parsing-blocking-script>pending parsing-blocking
  script</a>, then the user agent must run the following steps:</p>

  <ol><li><p>Block this instance of the <a href=#xml-parser>XML parser</a>, such
   that the <a href=#event-loop>event loop</a> will not run <a href=#concept-task title=concept-task>tasks</a> that invoke it.</li>

   <li><p><a href=#spin-the-event-loop>Spin the event loop</a> until there is no <a href=#a-style-sheet-blocking-scripts title="a style sheet blocking scripts">style sheet blocking
   scripts</a> and the <a href=#pending-parsing-blocking-script>pending parsing-blocking
   script</a>'s <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag is
   set.</li>

   <li><p>Unblock this instance of the <a href=#xml-parser>XML parser</a>, such
   that <a href=#concept-task title=concept-task>tasks</a> that invoke it can
   again be run.</li>

   <li><p><a href=#executing-a-script-block title="executing a script block">Execute</a> the
   <a href=#pending-parsing-blocking-script>pending parsing-blocking script</a>.</li>

   <li><p>There is no longer a <a href=#pending-parsing-blocking-script>pending parsing-blocking
   script</a>.</li>

  </ol><p class=note>Since the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> API is not
  available for <a href=#xml-documents>XML documents</a>, much of the complexity in
  the <a href=#html-parser>HTML parser</a> is not needed in the <a href=#xml-parser>XML
  parser</a>.</p>

  <p>Certain algorithms in this specification <dfn id=feed-the-parser title="feed the
  parser">spoon-feed the parser</dfn> characters one string at a
  time. In such cases, the <a href=#xml-parser>XML parser</a> must act as it
  would have if faced with a single string consisting of the
  concatenation of all those characters.</p>

  <p>When an <a href=#xml-parser>XML parser</a> reaches the end of its input, it
  must <a href=#stop-parsing>stop parsing</a>, following the same rules as the
  <a href=#html-parser>HTML parser</a>.</p>

  <p>For the purposes of conformance checkers, if a resource is
  determined to be in <a href=#the-xhtml-syntax>the XHTML syntax</a>, then it is an
  <a href=#xml-documents title="XML documents">XML document</a>.</p>



  <h3 id=serializing-xhtml-fragments><span class=secno>11.3 </span>Serializing XHTML fragments</h3>

  <p>The <dfn id=xml-fragment-serialization-algorithm>XML fragment serialization algorithm</dfn> for a
  <code><a href=#document>Document</a></code> or <code><a href=#element>Element</a></code> node either returns a
  fragment of XML that represents that node or raises an
  exception.</p>

  <p>For <code><a href=#document>Document</a></code>s, the algorithm must return a string in
  the form of a <a href=http://www.w3.org/TR/xml/#sec-well-formed>document
  entity</a>, if none of the error cases below apply.</p>

  <p>For <code><a href=#element>Element</a></code>s, the algorithm must return a string in
  the form of an <a href=http://www.w3.org/TR/xml/#wf-entities>internal general parsed
  entity</a>, if none of the error cases below apply.</p>

  <p>In both cases, the string returned must be XML
  namespace-well-formed and must be an isomorphic serialization of all
  of that node's child nodes, in <a href=#tree-order>tree order</a>. User agents
  may adjust prefixes and namespace declarations in the serialization
  (and indeed might be forced to do so in some cases to obtain
  namespace-well-formed XML). User agents may use a combination of
  regular text, character references, and CDATA sections to represent
  <a href=#text-node title="text node">text nodes</a> in the DOM (and indeed
  might be forced to use representations that don't match the DOM's,
  e.g. if a <code><a href=#cdatasection>CDATASection</a></code> node contains the string "<code title="">]]&gt;</code>").</p>

  <p>For <code><a href=#element>Element</a></code>s, if any of the elements in the
  serialization are in no namespace, the default namespace in scope
  for those elements must be explicitly declared as the empty
  string.<!-- because otherwise round-tripping might break since it'll
  pick up the surrounding default ns when setting --> (This doesn't
  apply in the <code><a href=#document>Document</a></code> case.) <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a></p>

  <p>For the purposes of this section, an internal general parsed
  entity is considered XML namespace-well-formed if a document
  consisting of an element with no namespace declarations whose
  contents are the internal general parsed entity would itself be XML
  namespace-well-formed.</p>

  <p>If any of the following error cases are found in the DOM subtree
  being serialized, then the algorithm must raise an
  <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception instead of returning a
  string:</p>

  <ul><li>A <code><a href=#document>Document</a></code> node with no child element nodes.</li>

   <li>A <code><a href=#documenttype>DocumentType</a></code> node that has an external subset
   public identifier that contains characters that are not matched by
   the XML <code title="">PubidChar</code> production. <a href=#refsXML>[XML]</a></li>

   <li>A <code><a href=#documenttype>DocumentType</a></code> node that has an external subset
   system identifier that contains both a U+0022 QUOTATION MARK (")
   and a U+0027 APOSTROPHE (') or that contains characters that are
   not matched by the XML <code title="">Char</code> production. <a href=#refsXML>[XML]</a></li>

   <li>A node with a <!--prefix or--> local name containing a U+003A
   COLON (:).</li> <!--(prefixes can get adjusted, so this isn't an
   excuse) -->

   <li>A node with a <!--prefix or--> local name that does not match
   the XML <code title="">Name</code> production. <a href=#refsXML>[XML]</a></li> <!--(again, prefixes can get
   adjusted, so this isn't an excuse) -->

   <li>An <code><a href=#attr>Attr</a></code> node with no namespace whose local name is
   the lowercase string "<code title="">xmlns</code>". <a href=#refsXMLNS>[XMLNS]</a></li>

   <li>An <code><a href=#element>Element</a></code> node with two or more attributes with
   the same local name and namespace.</li>

   <li>An <code><a href=#attr>Attr</a></code> node, <code><a href=#text>Text</a></code> node,
   <code><a href=#cdatasection>CDATASection</a></code> node, <code><a href=#comment-0>Comment</a></code> node, or
   <code><a href=#processinginstruction>ProcessingInstruction</a></code> node whose data contains
   characters that are not matched by the XML <code title="">Char</code> production. <a href=#refsXML>[XML]</a></li>

   <!--<li>A <code>CDATASection</code> node whose data contains the
   string "<code title="">]]&gt;</code>".</li> (these can be split)-->

   <li>A <code><a href=#comment-0>Comment</a></code> node whose data contains two adjacent
   U+002D HYPHEN-MINUS characters (-) or ends with such a
   character.</li>

   <li>A <code><a href=#processinginstruction>ProcessingInstruction</a></code> node whose target name is
   an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">xml</code>".</li>

   <li>A <code><a href=#processinginstruction>ProcessingInstruction</a></code> node whose target name
   contains a U+003A COLON (:).</li>

   <li>A <code><a href=#processinginstruction>ProcessingInstruction</a></code> node whose data contains
   the string "<code title="">?&gt;</code>".</li>

  </ul><p class=note>These are the only ways to make a DOM
  unserializable. The DOM enforces all the other XML constraints; for
  example, trying to append two elements to a <code><a href=#document>Document</a></code>
  node will raise a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>



  <h3 id=parsing-xhtml-fragments><span class=secno>11.4 </span>Parsing XHTML fragments</h3>

  <p>The <dfn id=xml-fragment-parsing-algorithm>XML fragment parsing algorithm</dfn> for either returns
  a <code><a href=#document>Document</a></code> or raises a <code><a href=#syntax_err>SYNTAX_ERR</a></code>
  exception. Given a string <var title="">input</var> and an optional
  context element <var title="">context</var>, the algorithm is as
  follows:</p>

  <ol><li>

    <p>Create a new <a href=#xml-parser>XML parser</a>.</p>

   </li>

   <li>

    <p>If there is a <var title="">context</var> element, <a href=#feed-the-parser>feed
    the parser</a> just created the string corresponding to the
    start tag of that element, declaring all the namespace prefixes
    that are in scope on that element in the DOM, as well as declaring
    the default namespace (if any) that is in scope on that element in
    the DOM.</p>

    <p>A namespace prefix is in scope if the DOM Core <code title="">lookupNamespaceURI()</code> method on the element would
    return a non-null value for that prefix.</p>

    <p>The default namespace is the namespace for which the DOM Core
    <code title="">isDefaultNamespace()</code> method on the element
    would return true.</p>

    <p class=note>If there is a <var title="">context</var> element,
    no <code title="">DOCTYPE</code> is passed to the parser, and
    therefore no external subset is referenced, and therefore no
    entities will be recognized.</p>

   </li>

   <li>

    <p><a href=#feed-the-parser>Feed the parser</a> just created the string <var title="">input</var>.</p>

   </li>

   <li>

    <p>If there is a <var title="">context</var> element, <a href=#feed-the-parser>feed
    the parser</a> just created the string corresponding to the
    end tag of that element.</p>

   </li>

   <li>

    <p>If there is an XML well-formedness or XML namespace
    well-formedness error, then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code>
    exception and abort these steps.</p>

   </li>

   <li>

    <p>If there is a <var title="">context</var> element, then return
    the child nodes of the root element of the resulting
    <code><a href=#document>Document</a></code>, in <a href=#tree-order>tree order</a>.</p>

    <p>Otherwise, return the children of the <code><a href=#document>Document</a></code>
    object, in <a href=#tree-order>tree order</a>.</p>

   </li>

  </ol></div>


  <div class=impl>

  <h2 id=rendering><span class=secno>12 </span>Rendering</h2>

  <p><i>User agents are not required to present HTML documents in any
  particular way. However, this section provides a set of suggestions
  for rendering HTML documents that, if followed, are likely to lead
  to a user experience that closely resembles the experience intended
  by the documents' authors. So as to avoid confusion regarding the
  normativity of this section, RFC2119 terms have not been used.
  Instead, the term "expected" is used to indicate behavior that will
  lead to this experience.</i></p>


  <h3 id=introduction-8><span class=secno>12.1 </span>Introduction</h3>

  <p>In general, user agents are expected to support CSS, and many of
  the suggestions in this section are expressed in CSS terms. User
  agents that use other presentation mechanisms can derive their
  expected behavior by translating from the CSS rules given in this
  section.</p>

  <p>In the absence of style-layer rules to the contrary (e.g. author
  style sheets), user agents are expected to render an element so that
  it conveys to the user the meaning that the element
  <dfn id=represents>represents</dfn>, as described by this specification.</p>

  <p>The suggestions in this section generally assume a visual output
  medium with a resolution of 96dpi or greater, but HTML is intended
  to apply to multiple media (it is a <i>media-independent</i>
  language). User agents are encouraged to adapt the suggestions in
  this section to their target media.</p>

  <hr><p>An element is <dfn id=being-rendered>being rendered</dfn> if it is <a href=#in-a-document>in a
  <code>Document</code></a>, either its parent node is itself
  <a href=#being-rendered>being rendered</a> or it is the <code><a href=#document>Document</a></code> node,
  and it is not explicitly excluded from the rendering using either:</p>
  <ul class=brief><li>the CSS 'display' property's 'none' value, or</li>
   <li>the 'visibility' property's 'collapse' value unless it is being treated as equivalent to the 'hidden' value, or</li>
   <li>some equivalent in other styling languages.</li>
  </ul><p class=note>Just being off-screen does not mean the element is
  not <a href=#being-rendered>being rendered</a>. The presence of the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute normally means the
  element is not <a href=#being-rendered>being rendered</a>, though this might be
  overriden by the style sheets.</p>

  </div>


  <div class=impl>

  <h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>12.2 </span>The CSS user agent style sheet and presentational hints</h3>

  <h4 id=introduction-9><span class=secno>12.2.1 </span>Introduction</h4>

  <p>The CSS rules given in these subsections are, except where
  otherwise specified, expected to be used as part of the user-agent
  level style sheet defaults for all documents that contain <a href=#html-elements>HTML
  elements</a>.</p>

  <p>Some rules are intended for the author-level zero-specificity
  presentational hints part of the CSS cascade; these are explicitly
  called out as <dfn id=presentational-hints>presentational hints</dfn>.</p>

  <p>Some of the rules regarding left and right margins are given here
  as appropriate for elements whose 'direction' property is 'ltr', and
  are expected to be flipped around on elements whose 'direction'
  property is 'rtl'. These are marked "<dfn id=ltr-specific>LTR-specific</dfn>".</p>

  <p id=case-sensitive-selector-exception>For the purpose of the
  rules marked "case-sensitive", user agents are expected to use
  case-sensitive matching of attribute values rather than
  case-insensitive matching, regardless of whether a case-insensitive
  matching is normally required for the given attribute.</p>

  <p id=case-insensitive-selector-exception>Similarly, for the
  purpose of the rules marked "case-insensitive", user agents are
  expected to use <a href=#ascii-case-insensitive>ASCII case-insensitive</a> matching of
  attribute values rather than case-sensitive matching, even for
  attributes in XHTML documents.</p>

  <p class=note>These markings only affect the handling of attribute
  <em>values</em>, not attribute names or element names.</p>

  <hr><p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var>
  <dfn id=maps-to-the-pixel-length-property>maps to the pixel length property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value
  using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>
  doesn't generate an error, then the user agent is expected to use
  the parsed value as a pixel length for a <a href=#presentational-hints title="presentational
  hints">presentational hint</a> for <var title="">properties</var>.</p>

  <p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var>
  <dfn id=maps-to-the-dimension-property>maps to the dimension property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value
  using the <a href=#rules-for-parsing-dimension-values>rules for parsing dimension values</a> doesn't
  generate an error, then the user agent is expected to use the parsed
  dimension as the value for a <a href=#presentational-hints title="presentational
  hints">presentational hint</a> for <var title="">properties</var>, with the value given as a pixel length if
  the dimension was an integer, and with the value given as a
  percentage if the dimension was a percentage.</p>

  </div>


  <div class=impl>

  <h4 id=display-types><span class=secno>12.2.2 </span>Display types</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, command, datalist, head,
input[type=hidden], link, menu[type=context], meta, noembed, noframes,
param, rp, script, source, style, track, title { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  display: none;
}

address, article, aside, blockquote, body, center, dd, dir, div, dl,
dt, figure, figcaption, footer, form, h1, h2, h3, h4, h5, h6, header,
hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
section, summary, ul, xmp { display: block; }

table { display: table; }
caption { display: table-caption; }
colgroup { display: table-column-group; }
col { display: table-column; }
thead { display: table-header-group; }
tbody { display: table-row-group; }
tfoot { display: table-footer-group; }
tr { display: table-row; }
td, th { display: table-cell; }

li { display: list-item; }

ruby { display: ruby; }
rt { display: ruby-text; }</pre>

  <!-- del, ins, and map are inline. -->

  <p>For the purposes of the CSS table model, the <code><a href=#the-col-element>col</a></code>
  element is expected to be treated as if it was present as many times
  as its <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative
  integers">specifies</a>.</p>

  <p>For the purposes of the CSS table model, the
  <code><a href=#the-colgroup-element>colgroup</a></code> element, if it contains no <code><a href=#the-col-element>col</a></code>
  element, is expected to be treated as if it had as many such
  children as its <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code>
  attribute <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative
  integers">specifies</a>.</p>

  <p>For the purposes of the CSS table model, the <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code> and <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code> attributes on
  <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements are expected to <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative integers">provide</a> the
  <i>special knowledge</i> regarding cells spanning rows and
  columns.</p>

  <p>For the purposes of the CSS ruby model, runs of children of
  <code><a href=#the-ruby-element>ruby</a></code> elements that are not <code><a href=#the-rt-element>rt</a></code> or
  <code><a href=#the-rp-element>rp</a></code> elements are expected to be wrapped in anonymous
  boxes whose 'display' property has the value 'ruby-base'.</p>

  <p>User agents that do not support correct ruby rendering are
  expected to render parentheses around the text of <code><a href=#the-rt-element>rt</a></code>
  elements in the absence of <code><a href=#the-rp-element>rp</a></code> elements.</p>

  <p>The <code><a href=#the-br-element>br</a></code> element is expected to render as if its
  contents were a single U+000A LINE FEED (LF) character and its
  'white-space' property was 'pre'. User agents are expected to
  support the 'clear' property on inline elements (in order to render
  <code><a href=#the-br-element>br</a></code> elements with <code title=attr-br-clear><a href=#attr-br-clear>clear</a></code> attributes) in the manner
  described in the non-normative note to this effect in CSS2.1.</p>
  <!-- section 9.5.2 of CSS2.1 -->

  <p>The user agent is expected to hide <code><a href=#the-noscript-element>noscript</a></code> elements
  for whom <a href=#concept-n-script title=concept-n-script>scripting is enabled</a>,
  irrespective of CSS rules.</p>

  <p>In <a href=#html-documents>HTML documents</a>, the user agent is expected to
  hide <code><a href=#the-form-element>form</a></code> elements that are children of
  <code><a href=#the-table-element>table</a></code>, <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>,
  <code><a href=#the-tfoot-element>tfoot</a></code>, or <code><a href=#the-tr-element>tr</a></code> elements, irrespective of CSS
  rules.</p>

  </div>


  <div class=impl>

  <h4 id=margins-and-padding><span class=secno>12.2.3 </span>Margins and padding</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

blockquote, dir, dl, figure, listing, menu, ol, p, plaintext,
pre, ul, xmp {
  margin-top: 1em; margin-bottom: 1em;
}

dir dir, dir dl, dir menu, dir ol, dir ul,
dl dir, dl dl, dl menu, dl ol, dl ul,
menu dir, menu dl, menu menu, menu ol, menu ul,
ol dir, ol dl, ol menu, ol ol, ol ul,
ul dir, ul dl, ul menu, ul ol, ul ul {
  margin-top: 0; margin-bottom: 0;
}

h1 { margin-top: 0.67em; margin-bottom; 0.67em; }
h2 { margin-top: 0.83em; margin-bottom; 0.83em; }
h3 { margin-top: 1.00em; margin-bottom; 1.00em; }
h4 { margin-top: 1.33em; margin-bottom; 1.33em; }
h5 { margin-top: 1.67em; margin-bottom; 1.67em; }
h6 { margin-top: 2.33em; margin-bottom; 2.33em; }

dd { margin-left: 40px; } /* <a href=#ltr-specific>LTR-specific</a>: use 'margin-right' for rtl elements */
dir, menu, ol, ul { padding-left: 40px; } /* <a href=#ltr-specific>LTR-specific</a>: use 'padding-right' for rtl elements */
blockquote, figure { margin-left: 40px; margin-right: 40px; }

table { border-spacing: 2px; border-collapse: separate; }
td, th { padding: 1px; }</pre>

  <p>The <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
  and <code><a href=#the-section-element>section</a></code> elements are expected to affect the margins
  of <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements, based on the nesting depth. If <var title="">x</var> is a selector that matches elements that are either
  <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>, or
  <code><a href=#the-section-element>section</a></code> elements, then the following rules capture what
  is expected:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

<var title="">x</var> h1 { margin-top: 0.83em; margin-bottom: 0.83em; }
<var title="">x</var> <var title="">x</var> h1 { margin-top: 1.00em; margin-bottom: 1.00em; }
<var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.33em; margin-bottom: 1.33em; }
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.67em; margin-bottom: 1.67em; }
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 2.33em; margin-bottom: 2.33em; }</pre>

  <hr><p>For each property in the table below, given a <code><a href=#the-body-element-0>body</a></code>
  element, the first attribute that exists <a href=#maps-to-the-pixel-length-property>maps to the pixel
  length property</a> on the <code><a href=#the-body-element-0>body</a></code> element. If none of
  the attributes for a property are found, or if the value of the
  attribute that was found cannot be parsed successfully, then a
  default value of 8px is expected to be used for that property
  instead.</p>

  <table><thead><tr><th>Property
     <th>Source
   <tbody><tr><td rowspan=3>'margin-top'
     <td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-marginheight><a href=#attr-body-marginheight>marginheight</a></code> attribute
    <tr><td>The <code><a href=#the-body-element-0>body</a></code> element's <a href=#container-frame-element>container frame element</a>'s <code title=attr-iframe-marginheight><a href=#attr-iframe-marginheight>marginheight</a></code> attribute
    <tr><td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-topmargin>topmargin</code> attribute
   <tbody><tr><td rowspan=3>'margin-right'
     <td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-marginwidth><a href=#attr-body-marginwidth>marginwidth</a></code> attribute
    <tr><td>The <code><a href=#the-body-element-0>body</a></code> element's <a href=#container-frame-element>container frame element</a>'s <code title=attr-iframe-marginwidth><a href=#attr-iframe-marginwidth>marginwidth</a></code> attribute
    <tr><td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-rightmargin>rightmargin</code> attribute
   <tbody><tr><td rowspan=3>'margin-bottom'
     <td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-marginheight><a href=#attr-body-marginheight>marginheight</a></code> attribute
    <tr><td>The <code><a href=#the-body-element-0>body</a></code> element's <a href=#container-frame-element>container frame element</a>'s <code title=attr-iframe-marginheight><a href=#attr-iframe-marginheight>marginheight</a></code> attribute
    <tr><td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-bottommargin>topmargin</code> attribute
   <tbody><tr><td rowspan=3>'margin-left'
     <td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-marginwidth><a href=#attr-body-marginwidth>marginwidth</a></code> attribute
    <tr><td>The <code><a href=#the-body-element-0>body</a></code> element's <a href=#container-frame-element>container frame element</a>'s <code title=attr-iframe-marginwidth><a href=#attr-iframe-marginwidth>marginwidth</a></code> attribute
    <tr><td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-leftmargin>rightmargin</code> attribute
  </table><p>If the <code><a href=#the-body-element-0>body</a></code> element's <code><a href=#document>Document</a></code>'s
  <a href=#browsing-context>browsing context</a> is a <a href=#nested-browsing-context>nested browsing
  context</a>, and the <a href=#browsing-context-container>browsing context container</a> of
  that <a href=#nested-browsing-context>nested browsing context</a> is a <code><a href=#frame>frame</a></code> or
  <code><a href=#the-iframe-element>iframe</a></code> element, then the <dfn id=container-frame-element>container frame
  element</dfn> of the <code><a href=#the-body-element-0>body</a></code> element is that
  <code><a href=#frame>frame</a></code> or <code><a href=#the-iframe-element>iframe</a></code> element. Otherwise, there
  is no <a href=#container-frame-element>container frame element</a>.</p>

  <p class=warning>The above requirements imply that a page can
  change the margins of another page (including one from another
  <a href=#origin>origin</a>) using, for example, an
  <code><a href=#the-iframe-element>iframe</a></code>. This is potentially a security risk, as it
  might in some cases allow an attack to contrive a situation in which
  a page is rendered not as the author intended, possibly for the
  purposes of phishing or otherwise misleading the user.</p>

  <hr><p>If the <code><a href=#document>Document</a></code> has a <a href=#root-element>root element</a>, and
  the <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> is a
  <a href=#nested-browsing-context>nested browsing context</a>, and the <a href=#browsing-context-container>browsing context
  container</a> of that <a href=#nested-browsing-context>nested browsing context</a> is a
  <code><a href=#frame>frame</a></code> or <code><a href=#the-iframe-element>iframe</a></code> element, and that element
  has a <code title=attr-frames-scrolling>scrolling</code>
  attribute, then the user agent is expected to compare the value of
  the attribute in an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> manner to
  the values in the first column of the following table, and if one of
  them matches, then the user agent is expected to treat that
  attribute as a <a href=#presentational-hints title="presentational hints">presentational
  hint</a> for the aforementioned root element's 'overflow'
  property, setting it to the value given in the corresponding cell on
  the same row in the second column:</p>

  <table><thead><tr><th> Attribute value
     <th> 'overflow' value
   <tbody><tr><td><code title="">on</code>
     <td>'scroll'
    <tr><td><code title="">scroll</code>
     <td>'scroll'
    <tr><td><code title="">yes</code>
     <td>'scroll'
    <tr><td><code title="">off</code>
     <td>'hidden'
    <tr><td><code title="">noscroll</code>
     <td>'hidden'
    <tr><td><code title="">no</code>
     <td>'hidden'
    <tr><td><code title="">auto</code>
     <td>'auto'
  </table><hr><p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-cellspacing><a href=#attr-table-cellspacing>cellspacing</a></code> attribute
  <a href=#maps-to-the-pixel-length-property>maps to the pixel length property</a> 'border-spacing' on the
  element.</p>

  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-cellpadding><a href=#attr-table-cellpadding>cellpadding</a></code> attribute <a href=#maps-to-the-pixel-length-property title="maps to the pixel length property">maps to the pixel length
  properties</a> 'padding-top', 'padding-right', 'padding-bottom',
  and 'padding-left' of any <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code>
  elements that have corresponding <a href=#concept-cell title=concept-cell>cells</a> in the <a href=#concept-table title=concept-table>table</a> corresponding to the
  <code><a href=#the-table-element>table</a></code> element.</p>

  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-hspace>hspace</code> attribute <a href=#maps-to-the-dimension-property title="maps
  to the dimension property">maps to the dimension properties</a>
  'margin-left' and 'margin-right' on the <code><a href=#the-table-element>table</a></code>
  element.</p>

  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-vspace>vspace</code> attribute <a href=#maps-to-the-dimension-property title="maps
  to the dimension property">maps to the dimension properties</a>
  'margin-top' and 'margin-bottom' on the <code><a href=#the-table-element>table</a></code>
  element.</p>

  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-height>height</code> attribute <a href=#maps-to-the-dimension-property>maps to the
  dimension property</a> 'height' on the <code><a href=#the-table-element>table</a></code>
  element.</p>

  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-width><a href=#attr-table-width>width</a></code> attribute <a href=#maps-to-the-dimension-property>maps to the
  dimension property</a> 'width' on the <code><a href=#the-table-element>table</a></code>
  element.</p>

  <p>The <code><a href=#the-col-element>col</a></code> element's <code title=attr-col-width><a href=#attr-col-width>width</a></code> attribute <a href=#maps-to-the-dimension-property>maps to the
  dimension property</a> 'width' on the <code><a href=#the-col-element>col</a></code>
  element.</p>

  <p>The <code><a href=#the-tr-element>tr</a></code> element's <code title=attr-tr-height>height</code> attribute <a href=#maps-to-the-dimension-property>maps to the
  dimension property</a> 'height' on the <code><a href=#the-tr-element>tr</a></code>
  element.</p>

  <p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements' <code title=attr-tdth-height><a href=#attr-tdth-height>height</a></code> attributes <a href=#maps-to-the-dimension-property title="maps
  to the dimension property">map to the dimension property</a> 'height'
  on the element.</p>

  <p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements' <code title=attr-tdth-width><a href=#attr-tdth-width>width</a></code> attributes <a href=#maps-to-the-dimension-property title="maps
  to the dimension property">map to the dimension property</a> 'width'
  on the element.</p>

  <hr><p>In <a href=#quirks-mode>quirks mode</a>, the following rules are also
  expected to apply:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

form { margin-bottom: 1em; }</pre>

  <p>When a <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>,
  margins on <a href=#html-elements>HTML elements</a> at the top or bottom of
  <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-td-element>td</a></code>, or <code><a href=#the-th-element>th</a></code> elements are
  expected to be collapsed to zero.</p>

  </div>


  <div class=impl>

  <h4 id=alignment><span class=secno>12.2.4 </span>Alignment</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

thead, tbody, tfoot, table &gt; tr { vertical-align: middle; }
tr, td, th { vertical-align: inherit; }
sub { vertical-align: sub; }
sup { vertical-align: super; }
th { text-align: center; }</pre>

  <hr><p>The following rules are also expected to apply, as
  <a href=#presentational-hints>presentational hints</a>:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

table[align=left] { float: left; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
table[align=right] { float: right; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
table[align=center], table[align=abscenter],
table[align=absmiddle], table[align=middle] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  margin-left: auto; margin-right: auto;
}
thead[align=absmiddle], tbody[align=absmiddle], tfoot[align=absmiddle],
tr[align=absmiddle], td[align=absmiddle], th[align=absmiddle] {
  text-align: center;
}

caption[align=bottom] { caption-side: bottom; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
p[align=left], h1[align=left], h2[align=left], h3[align=left],
h4[align=left], h5[align=left], h6[align=left] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  text-align: left;
}
p[align=right], h1[align=right], h2[align=right], h3[align=right],
h4[align=right], h5[align=right], h6[align=right] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  text-align: right;
}
p[align=center], h1[align=center], h2[align=center], h3[align=center],
h4[align=center], h5[align=center], h6[align=center] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  text-align: center;
}
p[align=justify], h1[align=justify], h2[align=justify], h3[align=justify],
h4[align=justify], h5[align=justify], h6[align=justify] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  text-align: justify;
}
col[valign=top], thead[valign=top], tbody[valign=top],
tfoot[valign=top], tr[valign=top], td[valign=top], th[valign=top] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  vertical-align: top;
}
col[valign=middle], thead[valign=middle], tbody[valign=middle],
tfoot[valign=middle], tr[valign=middle], td[valign=middle], th[valign=middle] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  vertical-align: middle;
}
col[valign=bottom], thead[valign=bottom], tbody[valign=bottom],
tfoot[valign=bottom], tr[valign=bottom], td[valign=bottom], th[valign=bottom] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  vertical-align: bottom;
}
col[valign=baseline], thead[valign=baseline], tbody[valign=baseline],
tfoot[valign=baseline], tr[valign=baseline], td[valign=baseline], th[valign=baseline] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  vertical-align: baseline;
}</pre>

  <p>The <code><a href=#center>center</a></code> element, the <code><a href=#the-caption-element>caption</a></code> element
  unless specified otherwise below, and the <code><a href=#the-div-element>div</a></code>,
  <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>,
  <code><a href=#the-tr-element>tr</a></code>, <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements when
  they have an <code title=attr-div-align><a href=#attr-div-align>align</a></code> attribute
  whose value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
  either the string "<code title="">center</code>" or the string
  "<code title="">middle</code>", are expected to center text within
  themselves, as if they had their 'text-align' property set to
  'center' in a <a href=#presentational-hints title="presentational hints">presentational
  hint</a>, and to <a href=#align-descendants>align descendants</a> to the
  center.</p>

  <p>The <code><a href=#the-div-element>div</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>,
  <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
  <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements, when they have an
  <code title=attr-align>align</code> attribute whose value is an
  <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">left</code>", are expected to left-align text within
  themselves, as if they had their 'text-align' property set to 'left'
  in a <a href=#presentational-hints title="presentational hints">presentational hint</a>,
  and to <a href=#align-descendants>align descendants</a> to the left.</p>

  <p>The <code><a href=#the-div-element>div</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>,
  <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
  <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements, when they have an
  <code title=attr-align>align</code> attribute whose value is an
  <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">right</code>", are expected to right-align text within
  themselves, as if they had their 'text-align' property set to
  'right' in a <a href=#presentational-hints title="presentational hints">presentational
  hint</a>, and to <a href=#align-descendants>align descendants</a> to the right.</p>

  <p>The <code><a href=#the-div-element>div</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>,
  <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
  <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements, when they have an
  <code title=attr-align>align</code> attribute whose value is an
  <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">justify</code>", are expected to full-justify text within
  themselves, as if they had their 'text-align' property set to
  'justify' in a <a href=#presentational-hints title="presentational hints">presentational
  hint</a>, and to <a href=#align-descendants>align descendants</a> to the left.</p>

  <p>When a user agent is to <dfn id=align-descendants>align descendants</dfn> of a node,
  the user agent is expected to align only those descendants that have
  both their 'margin-left' and 'margin-right' properties computing to
  a value other than 'auto', that are over-constrained and that have
  one of those two margins with a used value forced to a greater
  value, and that do not themselves have an applicable <code title=attr-align>align</code> attribute. When multiple elements
  are to <a href=#align-descendants title="align descendants">align</a> a particular
  descendant, the most deeply nested such element is expected to
  override the others.</p>

  </div>


  <div class=impl>

  <h4 id=fonts-and-colors><span class=secno>12.2.5 </span>Fonts and colors</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

address, cite, dfn, em, i, var { font-style: italic; }
b, strong, th { font-weight: bold; }
code, kbd, listing, plaintext, pre, samp, tt, xmp { font-family: monospace; }
h1 { font-size: 2.00em; font-weight: bold; }
h2 { font-size: 1.50em; font-weight: bold; }
h3 { font-size: 1.17em; font-weight: bold; }
h4 { font-size: 1.00em; font-weight: bold; }
h5 { font-size: 0.83em; font-weight: bold; }
h6 { font-size: 0.67em; font-weight: bold; }
big { font-size: larger; }
small, sub, sup { font-size: smaller; }
sub, sup { line-height: normal; }

:link { color: blue; }
:visited { color: purple; }
mark { background: yellow; color: black; }

table, td, th { border-color: gray; }
thead, tbody, tfoot, tr { border-color: inherit; }
table[rules=none], table[rules=groups], table[rules=rows],
table[rules=cols], table[rules=all], table[frame=void],
table[frame=above], table[frame=below], table[frame=hsides],
table[frame=lhs], table[frame=rhs], table[frame=vsides],
table[frame=box], table[frame=border],
table[rules=none] &gt; tr &gt; td, table[rules=none] &gt; tr &gt; th,
table[rules=groups] &gt; tr &gt; td, table[rules=groups] &gt; tr &gt; th,
table[rules=rows] &gt; tr &gt; td, table[rules=rows] &gt; tr &gt; th,
table[rules=cols] &gt; tr &gt; td, table[rules=cols] &gt; tr &gt; th,
table[rules=all] &gt; tr &gt; td, table[rules=all] &gt; tr &gt; th,
table[rules=none] &gt; thead &gt; tr &gt; td, table[rules=none] &gt; thead &gt; tr &gt; th,
table[rules=groups] &gt; thead &gt; tr &gt; td, table[rules=groups] &gt; thead &gt; tr &gt; th,
table[rules=rows] &gt; thead &gt; tr &gt; td, table[rules=rows] &gt; thead &gt; tr &gt; th,
table[rules=cols] &gt; thead &gt; tr &gt; td, table[rules=cols] &gt; thead &gt; tr &gt; th,
table[rules=all] &gt; thead &gt; tr &gt; td, table[rules=all] &gt; thead &gt; tr &gt; th,
table[rules=none] &gt; tbody &gt; tr &gt; td, table[rules=none] &gt; tbody &gt; tr &gt; th,
table[rules=groups] &gt; tbody &gt; tr &gt; td, table[rules=groups] &gt; tbody &gt; tr &gt; th,
table[rules=rows] &gt; tbody &gt; tr &gt; td, table[rules=rows] &gt; tbody &gt; tr &gt; th,
table[rules=cols] &gt; tbody &gt; tr &gt; td, table[rules=cols] &gt; tbody &gt; tr &gt; th,
table[rules=all] &gt; tbody &gt; tr &gt; td, table[rules=all] &gt; tbody &gt; tr &gt; th,
table[rules=none] &gt; tfoot &gt; tr &gt; td, table[rules=none] &gt; tfoot &gt; tr &gt; th,
table[rules=groups] &gt; tfoot &gt; tr &gt; td, table[rules=groups] &gt; tfoot &gt; tr &gt; th,
table[rules=rows] &gt; tfoot &gt; tr &gt; td, table[rules=rows] &gt; tfoot &gt; tr &gt; th,
table[rules=cols] &gt; tfoot &gt; tr &gt; td, table[rules=cols] &gt; tfoot &gt; tr &gt; th,
table[rules=all] &gt; tfoot &gt; tr &gt; td, table[rules=all] &gt; tfoot &gt; tr &gt; th { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  border-color: black;
}</pre>

  <hr><p>The initial value for the 'color' property is expected to be
  black. The initial value for the 'background-color' property is
  expected to be 'transparent'. The canvas's background is expected to
  be white.</p>

  <hr><p>The <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
  and <code><a href=#the-section-element>section</a></code> elements are expected to affect the font
  size of <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements, based on the nesting depth. If
  <var title="">x</var> is a selector that matches elements that are
  either <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
  or <code><a href=#the-section-element>section</a></code> elements, then the following rules capture
  what is expected:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

<var title="">x</var> h1 { font-size: 1.50em; }
<var title="">x</var> <var title="">x</var> h1 { font-size: 1.17em; }
<var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 1.00em; }
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 0.83em; }
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 0.67em; }</pre>

  <hr><p>When a <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>, <code><a href=#the-thead-element>thead</a></code>,
  <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
  <code><a href=#the-td-element>td</a></code>, or <code><a href=#the-th-element>th</a></code> element has a <code title=attr-background><a href=#attr-background>background</a></code> attribute set to a
  non-empty value, the new value is expected to be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element, and
  if this is successful, the user agent is expected to treat the
  attribute as a <a href=#presentational-hints title="presentational hints">presentational
  hint</a> setting the element's 'background-image' property to the
  resulting <a href=#absolute-url>absolute URL</a>.</p>

  <p>When a <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>, <code><a href=#the-thead-element>thead</a></code>,
  <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
  <code><a href=#the-td-element>td</a></code>, or <code><a href=#the-th-element>th</a></code> element has a <code title="">bgcolor</code> attribute set, the new value is expected to
  be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
  value</a>, and if that does not return an error, the user agent
  is expected to treat the attribute as a <a href=#presentational-hints title="presentational
  hints">presentational hint</a> setting the element's
  'background-color' property to the resulting color.</p>

  <p>When a <code><a href=#the-body-element-0>body</a></code> element has a <code title=attr-body-text><a href=#attr-body-text>text</a></code> attribute, its value is expected
  to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
  value</a>, and if that does not return an error, the user
  agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
  element's 'color' property to the resulting color.</p>

  <p>When a <code><a href=#the-body-element-0>body</a></code> element has a <code title=attr-body-link><a href=#attr-body-link>link</a></code> attribute, its value is expected
  to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
  value</a>, and if that does not return an error, the user agent
  is expected to treat the attribute as a <a href=#presentational-hints title="presentational
  hints">presentational hint</a> setting the 'color' property of
  any element in the <code><a href=#document>Document</a></code> matching the ':link'
  pseudo-class to the resulting color.</p>

  <p>When a <code><a href=#the-body-element-0>body</a></code> element has a <code title=attr-body-vlink><a href=#attr-body-vlink>vlink</a></code> attribute, its value is
  expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy
  color value</a>, and if that does not return an error, the user
  agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
  'color' property of any element in the <code><a href=#document>Document</a></code>
  matching the ':visited' pseudo-class to the resulting color.</p>

  <p>When a <code><a href=#the-body-element-0>body</a></code> element has a <code title=attr-body-alink><a href=#attr-body-alink>alink</a></code> attribute, its value is
  expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy
  color value</a>, and if that does not return an error, the user
  agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
  'color' property of any element in the <code><a href=#document>Document</a></code>
  matching the ':active' pseudo-class and either the ':link'
  pseudo-class or the ':visited' pseudo-class to the resulting
  color.</p>

  <p>When a <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-bordercolor>bordercolor</code> attribute, its
  value is expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a
  legacy color value</a>, and if that does not return an error, the
  user agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
  element's 'border-top-color', 'border-right-color',
  'border-bottom-color', and 'border-right-color' properties to the
  resulting color.</p>

  <hr><p>When a <code><a href=#font>font</a></code> element has a <code title=attr-font-color>color</code> attribute, its value is
  expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy
  color value</a>, and if that does not return an error, the user
  agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
  element's 'color' property to the resulting color.</p>

  <p>When a <code><a href=#font>font</a></code> element has a <code title=attr-font-face>face</code> attribute, the user agent is
  expected to treat the attribute as a <a href=#presentational-hints title="presentational
  hints">presentational hint</a> setting the element's
  'font-family' property to the attribute's value.</p>

  <!-- (Apparently only IE supports this?) (Note: if you add this
  back, make sure to define which of 'size' vs 'pointsize' wins.)

  <p>When a <code>font</code> element has a <code
  title="attr-font-pointsize">pointsize</code> attribute, the user
  agent is expected to parse that attribute's value using the
  <span>rules for parsing non-negative integers</span>, and if this
  doesn't generate an error, then the user agent is expected to use
  the parsed value as a <em>point</em> length for a <span
  title="presentational hints">presentational hint</span> for the
  'font-size' property on the element.</p>
  -->

  <p>When a <code><a href=#font>font</a></code> element has a <code title=attr-font-size>size</code> attribute, the user agent is
  expected to use the following steps to treat the attribute as a
  <a href=#presentational-hints title="presentational hints">presentational hint</a>
  setting the element's 'font-size' property:</p>

  <ol><li><p>Let <var title="">input</var> be the attribute's
   value.</li>

   <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   string.</li>

   <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>

   <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, there is no <a href=#presentational-hints title="presentational
   hints">presentational hint</a>. Abort these steps.</li>

   <li><p>If the character at <var title="">position</var> is a U+002B
   PLUS SIGN character (+), then let <var title="">mode</var> be
   <i>relative-plus</i>, and advance <var title="">position</var> to
   the next character. Otherwise, if the character at <var title="">position</var> is a U+002D HYPHEN-MINUS character (-),
   then let <var title="">mode</var> be <i>relative-minus</i>, and
   advance <var title="">position</var> to the next
   character. Otherwise, let <var title="">mode</var> be
   <i>absolute</i>.</li>

   <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and let the
   resulting sequence be <var title="">digits</var>.</li>

   <li><p>If <var title="">digits</var> is the empty string, there is
   no <a href=#presentational-hints title="presentational hints">presentational
   hint</a>. Abort these steps.</li>

   <li><p>Interpret <var title="">digits</var> as a base-ten
   integer. Let <var title="">value</var> be the resulting
   number.</li>

   <li>

    <!-- basefont support would go here, but we removed it -->

    <p>If <var title="">mode</var> is <i>relative-plus</i>, then
    increment <var title="">value</var> by 3. If <var title="">mode</var> is <i>relative-minus</i>, then let <var title="">value</var> be the result of subtracting <var title="">value</var> from 3.</p>

   </li>

   <li><p>If <var title="">value</var> is greater than 7, let it be
   7.</li>

   <li><p>If <var title="">value</var> is less than 1, let it be
   1.</li>

   <li>

    <p>Set 'font-size' to the keyword corresponding to the value of
    <var title="">value</var> according to the following table:</p>

    <table><thead><tr><th><var title="">value</var>
       <th>'font-size' keyword
       <th>Notes
     <tbody><tr><td>1
       <td>xx-small
       <td>
      <tr><td>2
       <td>small
       <td>
      <tr><td>3
       <td>medium
       <td>
      <tr><td>4
       <td>large
       <td>
      <tr><td>5
       <td>x-large
       <td>
      <tr><td>6
       <td>xx-large
       <td>
      <tr><td>7
       <td>x<!---->xx-large
       <td><i>see below</i>
    </table><p>The 'x<!---->xx-large' value is a non-CSS value used here to
    indicate a font size one "step" larger than 'xx-large'.</p>

   </li>

  </ol></div>


  <div class=impl>

  <h4 id=punctuation-and-decorations><span class=secno>12.2.6 </span>Punctuation and decorations</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

:link, :visited, ins, u { text-decoration: underline; }
abbr[title], acronym[title] { text-decoration: dotted underline; }<!-- CSS3 http://dev.w3.org/csswg/css3-text/#text-decoration-style -->
del, s, strike { text-decoration: line-through; }
blink { text-decoration: blink; }

:focus { outline: auto; }

q:before { content: open-quote; }
q:after { content: close-quote; }

nobr { white-space: nowrap; }
listing, plaintext, pre, xmp { white-space: pre; }

ol { list-style-type: decimal; }

dir, menu, ul {
  list-style-type: disc;
}

dir dl, dir menu, dir ul,
menu dl, menu menu, menu ul,
ol dl, ol menu, ol ul,
ul dl, ul menu, ul ul {
  list-style-type: circle;
}

dir dir dl, dir dir menu, dir dir ul,
dir menu dl, dir menu menu, dir menu ul,
dir ol dl, dir ol menu, dir ol ul,
dir ul dl, dir ul menu, dir ul ul,
menu dir dl, menu dir menu, menu dir ul,
menu menu dl, menu menu menu, menu menu ul,
menu ol dl, menu ol menu, menu ol ul,
menu ul dl, menu ul menu, menu ul ul,
ol dir dl, ol dir menu, ol dir ul,
ol menu dl, ol menu menu, ol menu ul,
ol ol dl, ol ol menu, ol ol ul,
ol ul dl, ol ul menu, ol ul ul,
ul dir dl, ul dir menu, ul dir ul,
ul menu dl, ul menu menu, ul menu ul,
ul ol dl, ul ol menu, ul ol ul,
ul ul dl, ul ul menu, ul ul ul {
  list-style-type: square;
}

table { border-style: outset; }
td, th { border-style: inset; }

[dir=ltr] { direction: ltr; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
[dir=rtl] { direction: rtl; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

  <p>In addition, rules setting the 'quotes' property appropriately
  for the locales and languages understood by the user are expected to
  be present.</p>

  <hr><p>The following rules are also expected to apply, as
  <a href=#presentational-hints>presentational hints</a>:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

td[nowrap], th[nowrap] { white-space: nowrap; }
pre[wrap] { white-space: pre-wrap; }

br[clear=left] { clear: left; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
br[clear=right] { clear: right; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
br[clear=all], br[clear=both] { clear: both; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */

ol[type=1], li[type=1] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; } /* <a href=#case-sensitive-selector-exception>case-sensitive</a> */
ol[type=A], li[type=A] { list-style-type: upper-alpha; } /* <a href=#case-sensitive-selector-exception>case-sensitive</a> */
ol[type=i], li[type=i] { list-style-type: lower-roman; } /* <a href=#case-sensitive-selector-exception>case-sensitive</a> */
ol[type=I], li[type=I] { list-style-type: upper-roman; } /* <a href=#case-sensitive-selector-exception>case-sensitive</a> */
ul[type=disc], li[type=disc] { list-style-type: disc; }
ul[type=circle], li[type=circle] { list-style-type: circle; }
ul[type=square], li[type=square] { list-style-type: square; }

table[rules=none], table[rules=groups], table[rules=rows],
table[rules=cols], table[rules=all] {
  border-style: none;
  border-collapse: collapse;
}

table[frame=void] { border-style: hidden hidden hidden hidden; }
table[frame=above] { border-style: solid hidden hidden hidden; }
table[frame=below] { border-style: hidden hidden solid hidden; }
table[frame=hsides] { border-style: solid hidden solid hidden; }
table[frame=lhs] { border-style: hidden hidden hidden solid; }
table[frame=rhs] { border-style: hidden solid hidden hidden; }
table[frame=vsides] { border-style: hidden solid hidden solid; }
table[frame=box],
table[frame=border] { border-style: solid solid solid solid; }

table[rules=none] &gt; tr &gt; td, table[rules=none] &gt; tr &gt; th,
table[rules=none] &gt; thead &gt; tr &gt; td, table[rules=none] &gt; thead &gt; tr &gt; th,
table[rules=none] &gt; tbody &gt; tr &gt; td, table[rules=none] &gt; tbody &gt; tr &gt; th,
table[rules=none] &gt; tfoot &gt; tr &gt; td, table[rules=none] &gt; tfoot &gt; tr &gt; th,
table[rules=groups] &gt; tr &gt; td, table[rules=groups] &gt; tr &gt; th,
table[rules=groups] &gt; thead &gt; tr &gt; td, table[rules=groups] &gt; thead &gt; tr &gt; th,
table[rules=groups] &gt; tbody &gt; tr &gt; td, table[rules=groups] &gt; tbody &gt; tr &gt; th,
table[rules=groups] &gt; tfoot &gt; tr &gt; td, table[rules=groups] &gt; tfoot &gt; tr &gt; th,
table[rules=rows] &gt; tr &gt; td, table[rules=rows] &gt; tr &gt; th,
table[rules=rows] &gt; thead &gt; tr &gt; td, table[rules=rows] &gt; thead &gt; tr &gt; th,
table[rules=rows] &gt; tbody &gt; tr &gt; td, table[rules=rows] &gt; tbody &gt; tr &gt; th,
table[rules=rows] &gt; tfoot &gt; tr &gt; td, table[rules=rows] &gt; tfoot &gt; tr &gt; th {
  border-style: none;
}

table[rules=groups] &gt; colgroup, table[rules=groups] &gt; thead,
table[rules=groups] &gt; tbody, table[rules=groups] &gt; tfoot {
  border-style: solid;
}

table[rules=rows] &gt; tr, table[rules=rows] &gt; thead &gt; tr,
table[rules=rows] &gt; tbody &gt; tr, table[rules=rows] &gt; tfoot &gt; tr {
  border-style: solid;
}

table[rules=cols] &gt; tr &gt; td, table[rules=cols] &gt; tr &gt; th,
table[rules=cols] &gt; thead &gt; tr &gt; td, table[rules=cols] &gt; thead &gt; tr &gt; th,
table[rules=cols] &gt; tbody &gt; tr &gt; td, table[rules=cols] &gt; tbody &gt; tr &gt; th,
table[rules=cols] &gt; tfoot &gt; tr &gt; td, table[rules=cols] &gt; tfoot &gt; tr &gt; th {
  border-style: none solid none solid;
}

table[rules=all] &gt; tr &gt; td, table[rules=all] &gt; tr &gt; th,
table[rules=all] &gt; thead &gt; tr &gt; td, table[rules=all] &gt; thead &gt; tr &gt; th,
table[rules=all] &gt; tbody &gt; tr &gt; td, table[rules=all] &gt; tbody &gt; tr &gt; th,
table[rules=all] &gt; tfoot &gt; tr &gt; td, table[rules=all] &gt; tfoot &gt; tr &gt; th {
  border-style: solid;
}

table[border] &gt; tr &gt; td, table[border] &gt; tr &gt; th,
table[border] &gt; thead &gt; tr &gt; td, table[border] &gt; thead &gt; tr &gt; th,
table[border] &gt; tbody &gt; tr &gt; td, table[border] &gt; tbody &gt; tr &gt; th,
table[border] &gt; tfoot &gt; tr &gt; td, table[border] &gt; tfoot &gt; tr &gt; th {
  border-width: 1px;
}</pre>

  <p>When rendering <code><a href=#the-li-element>li</a></code> elements, user agents are expected
  to use the ordinal value of the <code><a href=#the-li-element>li</a></code> element to render
  the counter in the list item marker.</p>

  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-border><a href=#attr-table-border>border</a></code> attribute <a href=#maps-to-the-pixel-length-property title="maps
  to the pixel length property">maps to the pixel length
  properties</a> 'border-top-width', 'border-right-width',
  'border-bottom-width', 'border-left-width' on the element. If the
  attribute is present but parsing the attribute's value using the
  <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> generates an
  error, a default value of 1px is expected to be used for that
  property instead.</p>

  <p>The <code><a href=#the-wbr-element>wbr</a></code> element is expected to override the
  'white-space' property and always provide a line-breaking
  opportunity.</p>

  </div>


  <div class=impl>

  <h4 id=resetting-rules-for-inherited-properties><span class=secno>12.2.7 </span>Resetting rules for inherited properties</h4>

  <p>The following rules are also expected to be in play, resetting
  certain properties to block inheritance by default.</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

table, input, select, option, optgroup, button, textarea, keygen {
  text-indent: initial;
}</pre>

  <!-- arguably, the form controls' 'text-indent' lines should be in
  the sections below instead of here, but that would be far more
  complicated than this -->

  <p>In <a href=#quirks-mode>quirks mode</a>, the following rules are also
  expected to apply:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

table {
  font-weight: initial;
  font-style: initial;
  font-variant: initial;
  font-size: initial;
  line-height: initial;
  white-space: initial;
  text-align: initial;
}

input { box-sizing: border-box; }</pre>

  </div>


  <div class=impl>

  <h4 id=the-hr-element-0><span class=secno>12.2.8 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }</pre>

  <p>The following rules are also expected to apply, as
  <a href=#presentational-hints>presentational hints</a>:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

hr[align=left] { margin-left: 0; margin-right: auto; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
hr[align=right] { margin-left: auto; margin-right: 0; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
hr[align=center] { margin-left: auto; margin-right: auto; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
hr[color], hr[noshade] { border-style: solid; }</pre>

  <p>If an <code><a href=#the-hr-element>hr</a></code> element has either a <code title=attr-hr-color><a href=#attr-hr-color>color</a></code> attribute or a <code title=attr-hr-noshade><a href=#attr-hr-noshade>noshade</a></code> attribute, and furthermore
  also has a <code title=attr-hr-size><a href=#attr-hr-size>size</a></code> attribute, and
  parsing that attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
  non-negative integers</a> doesn't generate an error, then the
  user agent is expected to use the parsed value divided by two as a
  pixel length for <a href=#presentational-hints>presentational hints</a> for the properties
  'border-top-width', 'border-right-width', 'border-bottom-width', and
  'border-left-width' on the element.</p>

  <p>Otherwise, if an <code><a href=#the-hr-element>hr</a></code> element has neither a <code title=attr-hr-color><a href=#attr-hr-color>color</a></code> attribute nor a <code title=attr-hr-noshade><a href=#attr-hr-noshade>noshade</a></code> attribute, but does have a
  <code title=attr-hr-size><a href=#attr-hr-size>size</a></code> attribute, and parsing that
  attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
  integers</a> doesn't generate an error, then: if the parsed value
  is one, then the user agent is expected to use the attribute as a
  <a href=#presentational-hints title="presentational hints">presentational hint</a>
  setting the element's 'border-bottom-width' to 0; otherwise, if the
  parsed value is greater than one, then the user agent is expected to
  use the parsed value minus two as a pixel length for
  <a href=#presentational-hints>presentational hints</a> for the 'height' property on the
  element.</p>

  <p>The <code title=attr-hr-width><a href=#attr-hr-width>width</a></code> attribute on an
  <code><a href=#the-hr-element>hr</a></code> element <a href=#maps-to-the-dimension-property>maps to the dimension property</a>
  'width' on the element.</p>

  <p>When an <code><a href=#the-hr-element>hr</a></code> element has a <code title=attr-hr-color><a href=#attr-hr-color>color</a></code> attribute, its value is expected
  to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
  value</a>, and if that does not return an error, the user agent
  is expected to treat the attribute as a <a href=#presentational-hints title="presentational
  hints">presentational hint</a> setting the element's 'color'
  property to the resulting color.</p>

  </div>


  <div class=impl>

  <h4 id=the-fieldset-element-0><span class=secno>12.2.9 </span>The <code><a href=#the-fieldset-element>fieldset</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

fieldset {
  margin-left: 2px; margin-right: 2px;
  border: groove 2px ThreeDFace;
  padding: 0.35em 0.625em 0.75em;
}</pre>

  <p>The <code><a href=#the-fieldset-element>fieldset</a></code> element is expected to establish a new
  block formatting context.</p>

  <p>The first <code><a href=#the-legend-element>legend</a></code> element child of a
  <code><a href=#the-fieldset-element>fieldset</a></code> element, if any, is expected to be rendered
  over the top border edge of the <code><a href=#the-fieldset-element>fieldset</a></code> element. If
  the <code><a href=#the-legend-element>legend</a></code> element in question has an <code title=attr-legend-align><a href=#attr-legend-align>align</a></code> attribute, and its value is
  an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the strings
  in the first column of the following table, then the
  <code><a href=#the-legend-element>legend</a></code> is expected to be rendered horizontally aligned
  over the border edge in the position given in the corresponding cell
  on the same row in the second column. If the attribute is absent or
  has a value that doesn't match any of the cases in the table, then
  the position is expected to be on the right if the 'direction'
  property on this element has a computed value of 'rtl', and on the
  left otherwise.</p>

  <table><thead><tr><th>Attribute value
     <th>Alignment position
   <tbody><tr><td><code title="">left</code>
     <td>On the left
    <tr><td><code title="">right</code>
     <td>On the right
    <tr><td><code title="">center</code>
     <td>In the middle
  </table></div>


  <div class=impl>

  <h3 id=replaced-elements><span class=secno>12.3 </span>Replaced elements</h3>

  <h4 id=embedded-content-2><span class=secno>12.3.1 </span>Embedded content</h4>

  <p>The <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, and
  <code><a href=#video>video</a></code> elements are expected to be treated as replaced
  elements.</p>

  <p>A <code><a href=#the-canvas-element>canvas</a></code> element that <a href=#represents>represents</a>
  <a href=#embedded-content>embedded content</a> is expected to be treated as a
  replaced element. Other <code><a href=#the-canvas-element>canvas</a></code> elements are expected to
  be treated as ordinary elements in the rendering model.</p>

  <p>An <code><a href=#the-object-element>object</a></code> element that <a href=#represents>represents</a> an
  image, plugin, or <a href=#nested-browsing-context>nested browsing context</a> is expected
  to be treated as a replaced element. Other <code><a href=#the-object-element>object</a></code>
  elements are expected to be treated as ordinary elements in the
  rendering model.</p>

  <p>An <code><a href=#the-applet-element>applet</a></code> element that <a href=#represents>represents</a> a
  <a href=#plugin>plugin</a> is expected to be treated as a replaced
  element. Other <code><a href=#the-applet-element>applet</a></code> elements are expected to be
  treated as ordinary elements in the rendering model.</p>

  <p>The <code><a href=#audio>audio</a></code> element, when it is <a href=#expose-a-user-interface-to-the-user title="expose a
  user interface to the user">exposing a user interface</a>, is
  expected to be treated as a replaced element about one line high, as
  wide as is necessary to expose the user agent's user interface
  features. When an <code><a href=#audio>audio</a></code> element is not <a href=#expose-a-user-interface-to-the-user title="expose a user interface to the user">exposing a user
  interface</a>, the user agent is expected to hide it,
  irrespective of CSS rules.</p>

  <p>Whether a <code><a href=#video>video</a></code> element is <a href=#expose-a-user-interface-to-the-user title="expose a
  user interface to the user">exposing a user interface</a> is not
  expected to affect the size of the rendering; controls are expected
  to be overlaid with the page content without causing any layout
  changes, and are expected to disappear when the user does not need
  them.</p>

  <p>When a <code><a href=#video>video</a></code> element represents a poster frame or
  frame of video, the poster frame or frame of video is expected to be
  rendered at the largest size that maintains the aspect ratio of that
  poster frame or frame of video without being taller or wider than
  the <code><a href=#video>video</a></code> element itself, and is expected to be
  centered in the <code><a href=#video>video</a></code> element.</p>

  <p class=XXX>pointer to rendering model for timed tracks</p>

  <p class=note>Resizing <code><a href=#video>video</a></code> and <code><a href=#the-canvas-element>canvas</a></code>
  elements does not interrupt video playback or clear the canvas.</p>

  <hr><p>The following CSS rules are expected to apply:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

iframe { border: 2px inset; }</pre>

  </div>


  <div class=impl>

  <h4 id=timed-tracks-0><span class=secno>12.3.2 </span>Timed tracks</h4>

  <p class=XXX>rendering model for timed tracks</p>

  <p class=XXX>CSS extensions</p>

  </div>


  <div class=impl>

  <h4 id=images-0><span class=secno>12.3.3 </span>Images</h4>

  <p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
  when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
  the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
  <a href=#represents>represents</a> an image, it is expected to be treated as a
  replaced element.</p>

  <p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
  when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
  the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
  does not <a href=#represents title=represents>represent</a> an image, but the
  element already has intrinsic dimensions (e.g. from the
  <a href=#dimension-attributes>dimension attributes</a> or CSS rules), and either the user
  agent has reason to believe that the image will become <i title=img-available><a href=#img-available>available</a></i><!--input-img-available also-->
  and be rendered in due course or the <code><a href=#document>Document</a></code> is in
  <a href=#quirks-mode>quirks mode</a>, the element is expected to be treated as a
  replaced element whose content is the text that the element
  represents, if any, optionally alongside an icon indicating that the
  image is being obtained. For <code><a href=#the-input-element>input</a></code> elements, the text
  is expected to appear button-like to indicate that the element is a
  <a href=#concept-button title=concept-button>button</a>.</p>

  <p>When an <code><a href=#the-img-element>img</a></code> element <a href=#represents>represents</a> some
  text and the user agent does not expect this to change, the element
  is expected to be treated as an inline element whose content is the
  text, optionally with an icon indicating that an image is
  missing.</p>

  <p>When an <code><a href=#the-img-element>img</a></code> element <a href=#represents>represents</a> nothing
  and the user agent does not expect this to change, the element is
  expected to not be rendered at all.</p>

  <p>When an <code><a href=#the-img-element>img</a></code> element might be a key part of the
  content, but neither the image nor any kind of alternative text is
  available, and the user agent does not expect this to change, the
  element is expected to be treated as an inline element whose content
  is an icon indicating that an image is missing.</p> <!-- there's
  also a should requirement for this case in the <img> section itself
  -->

  <p>When an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state does not
  <a href=#represents title=represents>represent</a> an image and the user
  agent does not expect this to change, the element is expected to be
  treated as a replaced element consisting of a button whose content
  is the element's alternative text. The intrinsic dimensions of the
  button are expected to be about one line in height and whatever
  width is necessary to render the text on one line.</p>

  <p>The icons mentioned above are expected to be relatively small so
  as not to disrupt most text but be easily clickable. In a visual
  environment, for instance, icons could be 16 pixels by 16 pixels
  square, or 1em by 1em if the images are scalable. In an audio
  environment, the icon could be a short bleep. The icons are intended
  to indicate to the user that they can be used to get to whatever
  options the UA provides for images, and, where appropriate, are
  expected to provide access to the context menu that would have come
  up if the user interacted with the actual image.</p>

  <hr><p>The following CSS rules are expected to apply when the
  <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

img[align=left] { margin-right: 3px; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
img[align=right] { margin-left: 3px; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

  </div>


  <div class=impl>

  <h4 id=attributes-for-embedded-content-and-images><span class=secno>12.3.4 </span>Attributes for embedded content and images</h4>

  <p>The following CSS rules are expected to apply as
  <a href=#presentational-hints>presentational hints</a>:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

iframe[frameborder=0], iframe[frameborder=no] { border: none; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */

applet[align=left], embed[align=left], iframe[align=left],
img[align=left], input[type=image][align=left], object[align=left] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  float: left;
}

applet[align=right], embed[align=right], iframe[align=right],
img[align=right], input[type=image][align=right], object[align=right] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  float: right;
}

applet[align=top], embed[align=top], iframe[align=top],
img[align=top], input[type=image][align=top], object[align=top] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  vertical-align: top;
}

applet[align=bottom], embed[align=bottom], iframe[align=bottom],
img[align=bottom], input[type=image][align=bottom], object[align=bottom],
applet[align=baseline], embed[align=baseline], iframe[align=baseline],
img[align=baseline], input[type=image][align=baseline], object[align=baseline] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  vertical-align: baseline;
}

applet[align=texttop], embed[align=texttop], iframe[align=texttop],
img[align=texttop], input[type=image][align=texttop], object[align=texttop] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  vertical-align: text-top;
}

applet[align=absmiddle], embed[align=absmiddle], iframe[align=absmiddle],
img[align=absmiddle], input[type=image][align=absmiddle], object[align=absmiddle],
applet[align=abscenter], embed[align=abscenter], iframe[align=abscenter],
img[align=abscenter], input[type=image][align=abscenter], object[align=abscenter] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  vertical-align: middle;
}

applet[align=bottom], embed[align=bottom], iframe[align=bottom],
img[align=bottom], input[type=image][align=bottom],
object[align=bottom] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  vertical-align: bottom;
}</pre>

  <p>When an <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>,
  <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code>
  element, or an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, has an
  <code title=attr-dim-align>align</code> attribute whose value is
  an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">center</code>" or the string "<code title="">middle</code>", the user agent is expected to act as if the
  element's 'vertical-align' property was set to a value that aligns
  the vertical middle of the element with the parent element's
  baseline.</p>

  <p>The <code title=attr-dim-hspace>hspace</code> attribute of
  <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>,
  <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> elements, and
  <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension property">maps to the dimension
  properties</a> 'margin-left' and 'margin-right' on the
  element.</p>

  <p>The <code title=attr-dim-vspace>vspace</code> attribute of
  <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>,
  <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> elements, and
  <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension property">maps to the dimension
  properties</a> 'margin-top' and 'margin-bottom' on the
  element.</p>

  <p>When an <code><a href=#the-img-element>img</a></code> element, <code><a href=#the-object-element>object</a></code> element, or
  <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state is contained
  within a <a href=#hyperlink>hyperlink</a> and has a <code title=attr-dim-border>border</code> attribute whose value, when
  parsed using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
  integers</a>, is found to be a number greater than zero, the user
  agent is expected to use the parsed value for eight
  <a href=#presentational-hints>presentational hints</a>: four setting the parsed value as
  a pixel length for the element's 'border-top-width',
  'border-right-width', 'border-bottom-width', and 'border-left-width'
  properties, and four setting the element's 'border-top-style',
  'border-right-style', 'border-bottom-style', and 'border-left-style'
  properties to the value 'solid'.</p>

  <p id=dimRendering>The <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>
  and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes on
  <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>,
  <code><a href=#the-img-element>img</a></code>, <code><a href=#the-object-element>object</a></code> or <code><a href=#video>video</a></code>
  elements, and <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension property">map to the dimension
  properties</a> 'width' and 'height' on the element
  respectively.</p>

  </div>


  <div class=impl>

  <h4 id=image-maps-0><span class=secno>12.3.5 </span>Image maps</h4>

  <p>Shapes on an <a href=#image-map>image map</a> are expected to act, for the
  purpose of the CSS cascade, as elements independent of the original
  <code><a href=#the-area-element>area</a></code> element that happen to match the same style rules
  but inherit from the <code><a href=#the-img-element>img</a></code> or <code><a href=#the-object-element>object</a></code>
  element.</p>

  <p>For the purposes of the rendering, only the 'cursor' property is
  expected to have any effect on the shape.</p>

  <p class=example>Thus, for example, if an <code><a href=#the-area-element>area</a></code>
  element has a <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute that
  sets the 'cursor' property to 'help', then when the user designates
  that shape, the cursor would change to a Help cursor.</p>

  <p class=example>Similarly, if an <code><a href=#the-area-element>area</a></code> element had a
  CSS rule that set its 'cursor' property to 'inherit' (or if no rule
  setting the 'cursor' property matched the element at all), the
  shape's cursor would be inherited from the <code><a href=#the-img-element>img</a></code> or
  <code><a href=#the-object-element>object</a></code> element of the <a href=#image-map>image map</a>, not from
  the parent of the <code><a href=#the-area-element>area</a></code> element.</p>

  </div>


  <div class=impl>

  <h4 id=toolbars-0><span class=secno>12.3.6 </span>Toolbars</h4>

  <p>When a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, the element is
  expected to be treated as a replaced element with a height about two
  lines high and a width derived from the contents of the element.</p>

  <p>The element is expected to have, by default, the appearance of a
  toolbar on the user agent's platform. It is expected to contain the
  menu that is <a href=#building-menus-and-toolbars title="building menus and toolbars">built</a>
  from the element.</p>

  </div>


  <div class=impl>

  <h3 id=bindings><span class=secno>12.4 </span>Bindings</h3>

  <h4 id=introduction-10><span class=secno>12.4.1 </span>Introduction</h4>

  <p>A number of elements have their rendering defined in terms of the
  'binding' property. <a href=#refsBECSS>[BECSS]</a></p>

  <p>The CSS snippets below set the 'binding' property to a
  user-agent-defined value, represented below by keywords like <code title=""><i title="">button</i></code>. The rules then described for
  these bindings are only expected to apply if the element's 'binding'
  property has not been overridden (e.g. by the author) to have
  another value.</p>

  <p>Exactly how the bindings are implemented is not specified by this
  specification. User agents are encouraged to make their bindings set
  the 'appearance' CSS property appropriately to achieve
  platform-native appearances for widgets, and are expected to
  implement any relevant animations, etc, that are appropriate for the
  platform. <a href=#refsCSSUI>[CSSUI]</a></p>

  </div>


  <div class=impl>

  <h4 id=the-button-element-0><span class=secno>12.4.2 </span>The <code><a href=#the-button-element>button</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

button { binding: <i title="">button</i>; }</pre>

  <p>When the <i title="">button</i> binding applies to a
  <code><a href=#the-button-element>button</a></code> element, the element is expected to render as an
  'inline-block' box rendered as a button whose contents are the
  contents of the element.</p>

  </div>


<!--v2DATAGRID
  <div class="impl">

  <h4>The <code>datagrid</code> element</h4>

  This section will probably include details on how to render DATAGRID
  (including <span id="datagridPseudos">its pseudo-elements</span>),
  drag-and-drop, etc, in a visual medium, in concert with
  CSS. Implementation experience is desired before this section is
  filled in.

  </div>
-->

  <div class=impl>

  <h4 id=the-details-element-0><span class=secno>12.4.3 </span>The <code><a href=#the-details-element>details</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

details { binding: <i title="">details</i>; }</pre>

  <p>When the <i title="">details</i> binding applies to a
  <code><a href=#the-details-element>details</a></code> element, the element is expected to render as a
  'block' box with its 'padding-left' property set to '40px' for
  left-to-right elements (<a href=#ltr-specific>LTR-specific</a>) and with its
  'padding-right' property set to '40px' for right-to-left
  elements. The element's shadow tree is expected to take the
  element's first child <code><a href=#the-summary-element>summary</a></code> element, if any, and
  place it in a first 'block' box container, and then take the
  element's remaining descendants, if any, and place them in a second
  'block' box container.</p>

  <p>The first container is expected to contain at least one line box,
  and that line box is expected to contain a disclosure widget
  (typically a triangle), horizontally positioned within the left
  padding of the <code><a href=#the-details-element>details</a></code> element. That widget is expected
  to allow the user to request that the details be shown or
  hidden.</p>

  <p>The second container is expected to have its 'overflow' property
  set to 'hidden'. When the <code><a href=#the-details-element>details</a></code> element does not have
  an <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute, this
  second container is expected to be removed from the rendering.</p>

  <!-- http://mail.gnome.org/archives/usability/2006-June/msg00015.html -->

  </div>

  <div class=impl>

  <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>12.4.4 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input { binding: <i title="">input-textfield</i>; }
input[type=password] { binding: <i title="">input-password</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
/* later rules override this for other values of type="" */</pre>

  <p>When the <i title="">input-textfield</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#telephone-state title=attr-input-type-tel>Telephone</a>, <a href=#url-state title=attr-input-type-url>URL</a>, or <a href=#e-mail-state title=attr-input-type-email>E-mail</a> state, the element is
  expected to render as an 'inline-block' box rendered as a text
  field.</p>

  <p>When the <i title="">input-password</i> binding applies, to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#password-state title=attr-input-type-password>Password</a> state, the element
  is expected to render as an 'inline-block' box rendered as a text
  field whose contents are obscured.</p>

  <p>If an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in one of the above
  states has a <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute,
  and parsing that attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
  non-negative integers</a> doesn't generate an error, then the
  user agent is expected to use the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> for the
  'width' property on the element, with the value obtained from
  applying the <a href=#converting-a-character-width-to-pixels>converting a character width to pixels</a>
  algorithm to the value of the attribute.</p>

  <p>If an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in one of the above
  states does <em>not</em> have a <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, then the user agent
  is expected to act as if it had a user-agent-level style sheet rule
  setting the 'width' property on the element to the value obtained
  from applying the <a href=#converting-a-character-width-to-pixels>converting a character width to
  pixels</a> algorithm to the number 20.</p>

  <p>The <dfn id=converting-a-character-width-to-pixels>converting a character width to pixels</dfn> algorithm
  returns <span title="">(<var title="">size</var>-1)&times;<var title="">avg</var>&nbsp;+&nbsp;<var title="">max</var></span>, where
  <var title="">size</var> is the character width to convert, <var title="">avg</var> is the average character width of the primary
  font for the element for which the algorithm is being run, in
  pixels, and <var title="">max</var> is the maximum character width
  of that same font, also in pixels. (The element's 'letter-spacing'
  property does not affect the result.)</p>

  </div>


  <div class=impl>

  <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>12.4.5 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=datetime] { binding: <i title="">input-datetime</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=date] { binding: <i title="">input-date</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=month] { binding: <i title="">input-month</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=week] { binding: <i title="">input-week</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=time] { binding: <i title="">input-time</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=datetime-local] { binding: <i title="">input-datetime-local</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=number] { binding: <i title="">input-number</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

  <p>When the <i title="">input-datetime</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a> state, the
  element is expected to render as an 'inline-block' box depicting a
  Date and Time control.</p>

  <p>When the <i title="">input-date</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-state title=attr-input-type-date>Date</a> state, the element is
  expected to render as an 'inline-block' box depicting a Date
  control.</p>

  <p>When the <i title="">input-month</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#month-state title=attr-input-type-month>Month</a> state, the element is
  expected to render as an 'inline-block' box depicting a Month
  control.</p>

  <p>When the <i title="">input-week</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#week-state title=attr-input-type-week>Week</a> state, the element is
  expected to render as an 'inline-block' box depicting a Week
  control.</p>

  <p>When the <i title="">input-time</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#time-state title=attr-input-type-time>Time</a> state, the element is
  expected to render as an 'inline-block' box depicting a Time
  control.</p>

  <p>When the <i title="">input-datetime-local</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>
  state, the element is expected to render as an 'inline-block' box
  depicting a Local Date and Time control.</p>

  <p>When the <i title="">input-number</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#number-state title=attr-input-type-number>Number</a> state, the element is
  expected to render as an 'inline-block' box depicting a Number
  control.</p>

  <p>These controls are all expected to be about one line high, and
  about as wide as necessary to show the widest possible value.</p>

  </div>


  <div class=impl>

  <h4 id=the-input-element-as-a-range-control><span class=secno>12.4.6 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=range] { binding: <i title="">input-range</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

  <p>When the <i title="">input-range</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, the element is
  expected to render as an 'inline-block' box depicting a slider
  control.</p>

  <p>When the control is wider than it is tall (or square), the
  control is expected to be a horizontal slider, with the lowest value
  on the right if the 'direction' property on this element has a
  computed value of 'rtl', and on the left otherwise. When the control
  is taller than it is wide, it is expected to be a vertical slider,
  with the lowest value on the bottom.</p>

  <p>Predefined suggested values (provided by the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute) are expected to be
  shown as tick marks on the slider, which the slider can snap to.</p>

  </div>


  <div class=impl>

  <h4 id=the-input-element-as-a-color-well><span class=secno>12.4.7 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=color] { binding: <i title="">input-color</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

  <p>When the <i title="">input-color</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, the element is
  expected to render as an 'inline-block' box depicting a color well,
  which, when activated, provides the user with a color picker (e.g. a
  color wheel or color palette) from which the color can be
  changed.</p>

  <p>Predefined suggested values (provided by the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute) are expected to be
  shown in the color picker interface, not on the color well
  itself.</p>

  </div>


  <div class=impl>

  <h4 id=the-input-element-as-a-check-box-and-radio-button-widgets><span class=secno>12.4.8 </span>The <code><a href=#the-input-element>input</a></code> element as a check box and radio button widgets</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=checkbox] { binding: <i title="">input-checkbox</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=radio] { binding: <i title="">input-radio</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

  <p>When the <i title="">input-checkbox</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, the element
  is expected to render as an 'inline-block' box containing a single
  check box control, with no label.</p>

  <p>When the <i title="">input-radio</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, the element
  is expected to render as an 'inline-block' box containing a single
  radio button control, with no label.</p>

  </div>


  <div class=impl>

  <h4 id=the-input-element-as-a-file-upload-control><span class=secno>12.4.9 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=file] { binding: <i title="">input-file</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

  <p>When the <i title="">input-file</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, the element
  is expected to render as an 'inline-block' box containing a span of
  text giving the filename(s) of the <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>, if
  any, followed by a button that, when activated, provides the user
  with a file picker from which the selection can be changed.</p>

  </div>


  <div class=impl>

  <h4 id=the-input-element-as-a-button><span class=secno>12.4.10 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=submit], input[type=reset], input[type=button] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
  binding: <i title="">input-button</i>;
}</pre>

  <p>When the <i title="">input-button</i> binding applies to an
  <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state, the element is
  expected to render as an 'inline-block' box rendered as a button,
  about one line high, containing the contents of the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if any, or text
  derived from the element's <code title=attr-input-type><a href=#attr-input-type>type</a></code>
  attribute in a user-agent-defined (and probably locale-specific)
  fashion, if not.</p>

  </div>


  <div class=impl>

  <h4 id=the-marquee-element-0><span class=secno>12.4.11 </span>The <code><a href=#the-marquee-element>marquee</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

marquee {
  binding: <i title="">marquee</i>;
}</pre>

  <p>When the <i title="">marquee</i> binding applies to a
  <code><a href=#the-marquee-element>marquee</a></code> element, while the element is <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>, the element is expected
  to render in an animated fashion according to its attributes as
  follows:</p>

  <dl><dt>If the element's <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
   <a href=#attr-marquee-behavior-scroll title=attr-marquee-behavior-scroll>scroll</a> state</dt>

   <dd>

    <p>Slide the contents of the element in the direction described by
    the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code>
    attribute as defined below, such that it begins off the start side
    of the <code><a href=#the-marquee-element>marquee</a></code>, and ends flush with the inner end
    side.</p>

    <p class=example>For example, if the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute is <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> (the default),
    then the contents would start such that their left edge are off
    the side of the right edge of the <code><a href=#the-marquee-element>marquee</a></code>'s content
    area, and the contents would then slide up to the point where the
    left edge of the contents are flush with the left inner edge of
    the <code><a href=#the-marquee-element>marquee</a></code>'s content area.</p>

    <p>Once the animation has ended, the user agent is expected to
    <a href=#increment-the-marquee-current-loop-index>increment the marquee current loop index</a>. If the
    element is still <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>
    after this, then the user agent is expected to restart the
    animation.</p>

   </dd>

   <dt>If the element's <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
   <a href=#attr-marquee-behavior-slide title=attr-marquee-behavior-slide>slide</a> state</dt>

   <dd>

    <p>Slide the contents of the element in the direction described by
    the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code>
    attribute as defined below, such that it begins off the start side
    of the <code><a href=#the-marquee-element>marquee</a></code>, and ends off the end side of the
    <code><a href=#the-marquee-element>marquee</a></code>.</p>

    <p class=example>For example, if the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute is <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> (the default),
    then the contents would start such that their left edge are off
    the side of the right edge of the <code><a href=#the-marquee-element>marquee</a></code>'s content
    area, and the contents would then slide up to the point where the
    <em>right</em> edge of the contents are flush with the left inner
    edge of the <code><a href=#the-marquee-element>marquee</a></code>'s content area.</p>

    <p>Once the animation has ended, the user agent is expected to
    <a href=#increment-the-marquee-current-loop-index>increment the marquee current loop index</a>. If the
    element is still <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>
    after this, then the user agent is expected to restart the
    animation.</p>

   </dd>

   <dt>If the element's <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
   <a href=#attr-marquee-behavior-alternate title=attr-marquee-behavior-alternate>alternate</a>
   state</dt>

   <dd>

    <p>When the <a href=#marquee-current-loop-index>marquee current loop index</a> is even (or
    zero), slide the contents of the element in the direction
    described by the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute as
    defined below, such that it begins flush with the start side of
    the <code><a href=#the-marquee-element>marquee</a></code>, and ends flush with the end side of the
    <code><a href=#the-marquee-element>marquee</a></code>.</p>

    <p>When the <a href=#marquee-current-loop-index>marquee current loop index</a> is odd, slide
    the contents of the element in the opposite direction than that
    described by the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute as
    defined below, such that it begins flush with the end side of the
    <code><a href=#the-marquee-element>marquee</a></code>, and ends flush with the start side of the
    <code><a href=#the-marquee-element>marquee</a></code>.</p>

    <p class=example>For example, if the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute is <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> (the default),
    then the contents would with their right edge flush with the right
    inner edge of the <code><a href=#the-marquee-element>marquee</a></code>'s content area, and the
    contents would then slide up to the point where the <em>left</em>
    edge of the contents are flush with the left inner edge of the
    <code><a href=#the-marquee-element>marquee</a></code>'s content area.</p>

    <p>Once the animation has ended, the user agent is expected to
    <a href=#increment-the-marquee-current-loop-index>increment the marquee current loop index</a>. If the
    element is still <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>
    after this, then the user agent is expected to continue the
    animation.</p>

   </dd>

  </dl><p>The <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code>
  attribute has the meanings described in the following table:</p>

  <table><thead><tr><th><code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute state
     <th>Direction of animation
     <th>Start edge
     <th>End edge
     <th>Opposite direction
   <tbody><tr><td><a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a>
     <td>&larr; Right to left
     <td>Right
     <td>Left
     <td>&rarr; Left to Right
    <tr><td><a href=#attr-marquee-direction-right title=attr-marquee-direction-right>right</a>
     <td>&rarr; Left to Right
     <td>Left
     <td>Right
     <td>&larr; Right to left
    <tr><td><a href=#attr-marquee-direction-up title=attr-marquee-direction-up>up</a>
     <td>&uarr; Up (Bottom to Top)
     <td>Bottom
     <td>Top
     <td>&darr; Down (Top to Bottom)
    <tr><td><a href=#attr-marquee-direction-down title=attr-marquee-direction-down>down</a>
     <td>&darr; Down (Top to Bottom)
     <td>Top
     <td>Bottom
     <td>&uarr; Up (Bottom to Top)
  </table><p>In any case, the animation should proceed such that there is a
  delay given by the <a href=#marquee-scroll-interval>marquee scroll interval</a> between each
  frame, and such that the content moves at most the distance given by
  the <a href=#marquee-scroll-distance>marquee scroll distance</a> with each frame.</p>

  <p>When a <code><a href=#the-marquee-element>marquee</a></code> element has a <code title=attr-marquee-bgcolor>bgcolor</code> attribute set, the value
  is expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy
  color value</a>, and if that does not return an error, the user
  agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
  element's 'background-color' property to the resulting color.</p>

  <p>The <code title=attr-marquee-width>width</code> and <code title=attr-marquee-height>height</code> attributes on a
  <code><a href=#the-marquee-element>marquee</a></code> element <a href=#maps-to-the-dimension-property title="maps to the dimension
  property">map to the dimension properties</a> 'width' and
  'height' on the element respectively.</p>

  <p>The intrinsic height of a <code><a href=#the-marquee-element>marquee</a></code> element with its
  <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute in
  the <a href=#attr-marquee-direction-up title=attr-marquee-direction-up>up</a> or <a href=#attr-marquee-direction-down title=attr-marquee-direction-down>down</a> states is 200 CSS
  pixels.</p>

  <p>The <code title=attr-marquee-vspace>vspace</code> attribute of
  a <code><a href=#the-marquee-element>marquee</a></code> element <a href=#maps-to-the-dimension-property title="maps to the dimension
  property">maps to the dimension properties</a> 'margin-top' and
  'margin-bottom' on the element. The <code title=attr-marquee-hspace>hspace</code> attribute of a
  <code><a href=#the-marquee-element>marquee</a></code> element <a href=#maps-to-the-dimension-property title="maps to the dimension
  property">maps to the dimension properties</a> 'margin-left' and
  'margin-right' on the element.</p>

  <p>The 'overflow' property on the <code><a href=#the-marquee-element>marquee</a></code> element is
  expected to be ignored; overflow is expected to always be
  hidden.</p>

  </div>


  <div class=impl>

  <h4 id=the-meter-element-0><span class=secno>12.4.12 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

meter {
  binding: <i title="">meter</i>;
}</pre>

  <p>When the <i title="">meter</i> binding applies to a
  <code><a href=#the-meter-element>meter</a></code> element, the element is expected to render as an
  'inline-block' box with a 'height' of '1em' and a 'width' of '5em',
  a 'vertical-align' of '-0.2em', and with its contents depicting a
  gauge.</p>

  <p>When the element is wider than it is tall (or square), the
  depiction is expected to be of a horizontal gauge, with the minimum
  value on the right if the 'direction' property on this element has a
  computed value of 'rtl', and on the left otherwise. When the element
  is taller than it is wide, it is expected to depict a vertical
  gauge, with the minimum value on the bottom.</p>

  <p>User agents are expected to use a presentation consistent with
  platform conventions for gauges, if any.</p>

  <p class=note>Requirements for what must be depicted in the gauge
  are included in the definition of the <code><a href=#the-meter-element>meter</a></code>
  element.</p>

  </div>


  <div class=impl>

  <h4 id=the-progress-element-0><span class=secno>12.4.13 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

progress {
  binding: <i title="">progress</i>;
}</pre>

  <p>When the <i title="">progress</i> binding applies to a
  <code><a href=#the-progress-element>progress</a></code> element, the element is expected to render as
  an 'inline-block' box with a 'height' of '1em' and a 'width' of
  '10em', a 'vertical-align' of '-0.2em', and with its contents
  depicting a horizontal progress bar, with the start on the right and
  the end on the left if the 'direction' property on this element has
  a computed value of 'rtl', and with the start on the left and the
  end on the right otherwise.</p>

  <p>User agents are expected to use a presentation consistent with
  platform conventions for progress bars. In particular, user agents
  are expected to use different presentations for determinate and
  indeterminate progress bars. User agents are also expected to vary
  the presentation based on the dimensions of the element.</p>

  <p class=example>For example, on some platforms for showing
  indeterminate progress there is an asynchronous progress indicator
  with square dimensions, which could be used when the element is
  square, and an indeterminate progress bar, which could be used when
  the element is wide.</p>

  <p class=note>Requirements for how to determine if the progress
  bar is determinate or indeterminate, and what progress a determinate
  progress bar is to show, are included in the definition of the
  <code><a href=#the-progress-element>progress</a></code> element.</p>

  </div>


  <div class=impl>

  <h4 id=the-select-element-0><span class=secno>12.4.14 </span>The <code><a href=#the-select-element>select</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

select {
  binding: <i title="">select</i>;
}</pre>

  <p>When the <i title="">select</i> binding applies to a
  <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is present,
  the element is expected to render as a multi-select list box.</p>

  <p>When the <i title="">select</i> binding applies to a
  <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
  and the element's <a href=#concept-select-size title=concept-select-size>display
  size</a> is greater than 1, the element is expected to render as
  a single-select list box.</p>

  <p>When the element renders as a list box, it is expected to render
  as an 'inline-block' box whose 'height' is the height necessary to
  contain as many rows for items as given by the element's <a href=#concept-select-size title=concept-select-size>display size</a>, or four rows if the
  attribute is absent, and whose 'width' is the <a href="#width-of-the-select's-labels">width of the
  <code>select</code>'s labels</a> plus the width of a
  scrollbar.</p>

  <p>When the <i title="">select</i> binding applies to a
  <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
  and the element's <a href=#concept-select-size title=concept-select-size>display
  size</a> is 1, the element is expected to render as a one-line
  drop down box whose width is the <a href="#width-of-the-select's-labels">width of the
  <code>select</code>'s labels</a>.</p>

  <p>In either case (list box or drop-down box), the element's items
  are expected to be the element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, with the
  element's <code><a href=#the-optgroup-element>optgroup</a></code> element children providing headers
  for groups of options where applicable.</p>

  <p>The <dfn id="width-of-the-select's-labels">width of the <code>select</code>'s labels</dfn> is the
  wider of the width necessary to render the widest
  <code><a href=#the-optgroup-element>optgroup</a></code>, and the width necessary to render the widest
  <code><a href=#the-option-element>option</a></code> element in the element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> (including
  its indent, if any).</p>

  <p>An <code><a href=#the-optgroup-element>optgroup</a></code> element is expected to be rendered by
  displaying the element's <code title=attr-optgroup-label><a href=#attr-optgroup-label>label</a></code> attribute.</p>

  <p>An <code><a href=#the-option-element>option</a></code> element is expected to be rendered by
  displaying the element's <code title=concept-option-label><a href=#concept-option-label>label</a></code>, indented under its
  <code><a href=#the-optgroup-element>optgroup</a></code> element if it has one.</p>

  </div>


  <div class=impl>

  <h4 id=the-textarea-element-0><span class=secno>12.4.15 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

textarea { binding: <i title="">textarea</i>; }</pre>

  <p>When the <i title="">textarea</i> binding applies to a
  <code><a href=#the-textarea-element>textarea</a></code> element, the element is expected to render as
  an 'inline-block' box rendered as a multiline text field.</p>

  <p>If the element has a <code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code>
  attribute, and parsing that attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules
  for parsing non-negative integers</a> doesn't generate an error,
  then the user agent is expected to use the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> for the
  'width' property on the element, with the value being the
  <a href=#textarea-effective-width>textarea effective width</a> (as defined below). Otherwise,
  the user agent is expected to act as if it had a user-agent-level
  style sheet rule setting the 'width' property on the element to the
  <a href=#textarea-effective-width>textarea effective width</a>.</p>

  <p>The <dfn id=textarea-effective-width>textarea effective width</dfn> of a
  <code><a href=#the-textarea-element>textarea</a></code> element is <span><var title="">size</var>&times;<var title="">avg</var>&nbsp;+&nbsp;<var title="">sbw</var></span>, where <var title="">size</var> is the
  element's <a href=#attr-textarea-cols-value title=attr-textarea-cols-value>character
  width</a>, <var title="">avg</var> is the average character width
  of the primary font of the element, in CSS pixels, and <var title="">sbw</var> is the width of a scroll bar, in CSS pixels. (The
  element's 'letter-spacing' property does not affect the result.)</p>

  <p>If the element has a <code title=attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code>
  attribute, and parsing that attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules
  for parsing non-negative integers</a> doesn't generate an error,
  then the user agent is expected to use the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> for the
  'height' property on the element, with the value being the
  <a href=#textarea-effective-height>textarea effective height</a> (as defined
  below). Otherwise, the user agent is expected to act as if it had a
  user-agent-level style sheet rule setting the 'height' property on
  the element to the <a href=#textarea-effective-height>textarea effective height</a>.</p>

  <p>The <dfn id=textarea-effective-height>textarea effective height</dfn> of a
  <code><a href=#the-textarea-element>textarea</a></code> element is the height in CSS pixels of the
  number of lines specified the element's <a href=#attr-textarea-rows-value title=attr-textarea-rows-value>character height</a>, plus the
  height of a scrollbar in CSS pixels.</p>

  <p>For historical reasons, if the element has a <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code> attribute whose value is an
  <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title=attr-textarea-wrap-off>off</code>", then the user agent is
  expected to not wrap the rendered value; otherwise, the value of the
  control is expected to be wrapped to the width of the control.</p>

  </div>


  <div class=impl>

  <h4 id=the-keygen-element-0><span class=secno>12.4.16 </span>The <code><a href=#the-keygen-element>keygen</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

keygen { binding: <i title="">keygen</i>; }</pre>

  <p>When the <i title="">keygen</i> binding applies to a
  <code><a href=#the-keygen-element>keygen</a></code> element, the element is expected to render as an
  'inline-block' box containing a user interface to configure the key
  pair to be generated.</p>

  </div>


  <div class=impl>

  <h4 id=the-time-element-0><span class=secno>12.4.17 </span>The <code><a href=#the-time-element>time</a></code> element</h4>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

time[datetime] { binding: <i title="">time</i>; }</pre>

  <p>When the <i title="">time</i> binding applies to a
  <code><a href=#the-time-element>time</a></code> element, the element is expected to render as if
  it contained text conveying the <a href=#concept-time-date title=concept-time-date>date</a> (if known), <a href=#concept-time-time title=concept-time-time>time</a> (if known), and <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a> (if known)
  represented by the element, in the fashion most convenient for the
  user.</p>

  <!-- If none are known then the element would appear empty. -->

  </div>



  <div class=impl>

  <h3 id=frames-and-framesets><span class=secno>12.5 </span>Frames and framesets</h3>

  <p>When an <code><a href=#the-html-element-0>html</a></code> element's second child element is a
  <code><a href=#frameset>frameset</a></code> element, the user agent is expected to render
  the <code><a href=#frameset>frameset</a></code> element as described below across the
  surface of the viewport, instead of applying the usual CSS rendering
  rules.</p>

  <p>When rendering a <code><a href=#frameset>frameset</a></code> on a surface, the user
  agent is expected to use the following layout algorithm:</p>

  <ol><li>

    <p>The <var title="">cols</var> and <var title="">rows</var>
    variables are lists of zero or more pairs consisting of a number
    and a unit, the unit being one of <i>percentage</i>,
    <i>relative</i>, and <i>absolute</i>.</p>

    <p>Use the <a href=#rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</a> to
    parse the value of the element's <code title=attr-frameset-cols>cols</code> attribute, if there is
    one. Let <var title="">cols</var> be the result, or an empty list
    if there is no such attribute.</p>

    <p>Use the <a href=#rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</a> to
    parse the value of the element's <code title=attr-frameset-rows>rows</code> attribute, if there is
    one. Let <var title="">rows</var> be the result, or an empty list
    if there is no such attribute.</p>

   </li>

   <li>

    <p>For any of the entries in <var title="">cols</var> or <var title="">rows</var> that have the number zero and the unit
    <i>relative</i>, change the entry's number to one.</p>

   </li>

   <li>

    <p>If <var title="">cols</var> has no entries, then add a single
    entry consisting of the value 1 and the unit <i>relative</i> to
    <var title="">cols</var>.</p>

    <p>If <var title="">rows</var> has no entries, then add a single
    entry consisting of the value 1 and the unit <i>relative</i> to
    <var title="">rows</var>.</p>

   </li>

   <li>

    <p>Invoke the algorithm defined below to <a href=#convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of
    dimensions to a list of pixel values</a> using <var title="">cols</var> as the input list, and the width of the
    surface that the <code><a href=#frameset>frameset</a></code> is being rendered into, in
    CSS pixels, as the input dimension. Let <var title="">sized
    cols</var> be the resulting list.</p>

    <p>Invoke the algorithm defined below to <a href=#convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of
    dimensions to a list of pixel values</a> using <var title="">rows</var> as the input list, and the height of the
    surface that the <code><a href=#frameset>frameset</a></code> is being rendered into, in
    CSS pixels, as the input dimension. Let <var title="">sized
    rows</var> be the resulting list.</p>

   </li>

   <li>

    <p>Split the surface into a grid of <span title=""><var title="">w</var>&times;<var title="">h</var></span> rectangles,
    where <var title="">w</var> is the number of entries in <var title="">sized cols</var> and <var title="">h</var> is the number
    of entries in <var title="">sized rows</var>.</p>

    <p>Size the columns so that each column in the grid is as many CSS
    pixels wide as the corresponding entry in the <var title="">sized
    cols</var> list.</p>

    <p>Size the rows so that each row in the grid is as many CSS
    pixels high as the corresponding entry in the <var title="">sized
    rows</var> list.</p>

   </li>

   <li>

    <p>Let <var title="">children</var> be the list of
    <code><a href=#frame>frame</a></code> and <code><a href=#frameset>frameset</a></code> elements that are
    children of the <code><a href=#frameset>frameset</a></code> element for which the
    algorithm was invoked.</p>

   </li>

   <li>

    <p>For each row of the grid of rectangles created in the previous
    step, from top to bottom, run these substeps:</p>

    <ol><li>

      <p>For each rectangle in the row, from left to right, run these
      substeps:</p>

      <ol><li>

        <p>If there are any elements left in <var title="">children</var>, take the first element in the list,
        and assign it to the rectangle.</p>

        <p>If this is a <code><a href=#frameset>frameset</a></code> element, then recurse
        the entire <code><a href=#frameset>frameset</a></code> layout algorithm for that
        <code><a href=#frameset>frameset</a></code> element, with the rectangle as the
        surface.</p>

        <p>Otherwise, it is a <code><a href=#frame>frame</a></code> element; create a
        <a href=#nested-browsing-context>nested browsing context</a> sized to fit the
        rectangle.</p>

       </li>

       <li>

        <p>If there are any elements left in <var title="">children</var>, remove the first element from <var title="">children</var>.</p>

      </ol></li>

    </ol></li>

   <li>

    <p>If the <code><a href=#frameset>frameset</a></code> element <a href=#has-a-border>has a border</a>,
    draw an outer set of borders around the rectangles, using the
    element's <a href=#frame-border-color>frame border color</a>.</p>

    <p>For each rectangle, if there is an element assigned to that
    rectangle, and that element <a href=#has-a-border>has a border</a>, draw an
    inner set of borders around that rectangle, using the
    element's <a href=#frame-border-color>frame border color</a>.</p>

    <p>For each (visible) border that does not abut a rectangle that
    is assigned a <code><a href=#frame>frame</a></code> element with a <code title=attr-frame-noresize>noresize</code> attribute (including
    rectangles in further nested <code><a href=#frameset>frameset</a></code> elements), the
    user agent is expected to allow the user to move the border,
    resizing the rectangles within, keeping the proportions of any
    nested <code><a href=#frameset>frameset</a></code> grids.</p>

    <p>A <code><a href=#frameset>frameset</a></code> or <code><a href=#frame>frame</a></code> element <dfn id=has-a-border>has
    a border</dfn> if the following algorithm returns true:</p>

    <ol><li><p>If the element has a <code title=attr-frames-frameborder>frameborder</code> attribute
     whose value is not the empty string and whose first character is
     either a U+0031 DIGIT ONE (1) character, a U+0079 LATIN SMALL
     LETTER Y character (y), or a U+0059 LATIN CAPITAL LETTER Y
     character (Y), then return true.</li>

     <li><p>Otherwise, if the element has a <code title=attr-frames-frameborder>frameborder</code> attribute,
     return false.</li>

     <li><p>Otherwise, if the element has a parent element that is a
     <code><a href=#frameset>frameset</a></code> element, then return true if <em>that</em>
     element <a href=#has-a-border>has a border</a>, and false if it does
     not.</li>

     <li><p>Otherwise, return true.</li>

    </ol><p>The <dfn id=frame-border-color>frame border color</dfn> of a <code><a href=#frameset>frameset</a></code> or
    <code><a href=#frame>frame</a></code> element is the color obtained from the
    following algorithm:</p>

    <ol><li><p>If the element has a <code title=attr-frames-bordercolor>bordercolor</code> attribute, and
     applying the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color value</a>
     to that attribute's value does not result in an error, then
     return the color so obtained.</li>

     <li><p>Otherwise, if the element has a parent element that is a
     <code><a href=#frameset>frameset</a></code> element, then the <a href=#frame-border-color>frame border
     color</a> of that element.</p>

     <li><p>Otherwise, return gray.</li>

    </ol></li>

  </ol><p>The algorithm to <dfn id=convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of dimensions to a list of
  pixel values</dfn> consists of the following steps:</p>

  <ol><li>

    <p>Let <var title="">input list</var> be the list of numbers and
    units passed to the algorithm.</p>

    <p>Let <var title="">output list</var> be a list of numbers the
    same length as <var title="">input list</var>, all zero.</p>

    <p>Entries in <var title="">output list</var> correspond to the
    entries in <var title="">input list</var> that have the same
    position.</p>

   </li>

   <li><p>Let <var title="">input dimension</var> be the size passed
   to the algorithm.</p>

   <li>

    <p>Let <var title="">count percentage</var> be the number of
    entries in <var title="">input list</var> whose unit is
    <i>percentage</i>.</p>

    <p>Let <var title="">total percentage</var> be the sum of all the
    numbers in <var title="">input list</var> whose unit is
    <i>percentage</i>.</p>

    <p>Let <var title="">count relative</var> be the number of
    entries in <var title="">input list</var> whose unit is
    <i>relative</i>.</p>

    <p>Let <var title="">total relative</var> be the sum of all the
    numbers in <var title="">input list</var> whose unit is
    <i>relative</i>.</p>

    <p>Let <var title="">count absolute</var> be the number of
    entries in <var title="">input list</var> whose unit is
    <i>absolute</i>.</p>

    <p>Let <var title="">total absolute</var> be the sum of all the
    numbers in <var title="">input list</var> whose unit is
    <i>absolute</i>.</p>

    <p>Let <var title="">remaining space</var> be the value of <var title="">input dimension</var>.</p>

   </li>

   <li>

    <p>If <var title="">total absolute</var> is greater than <var title="">remaining space</var>, then for each entry in <var title="">input list</var> whose unit is <i>absolute</i>, set the
    corresponding value in <var title="">output list</var> to the
    number of the entry in <var title="">input list</var> multiplied
    by <var title="">remaining space</var> and divided by <var title="">total absolute</var>. Then, set <var title="">remaining
    space</var> to zero.</p>

    <p>Otherwise, for each entry in <var title="">input list</var>
    whose unit is <i>absolute</i>, set the corresponding value in <var title="">output list</var> to the number of the entry in <var title="">input list</var>. Then, decrement <var title="">remaining
    space</var> by <var title="">total absolute</var>.</p>

   </li>

   <li>

    <p>If <var title="">total percentage</var> multiplied by the <var title="">input dimension</var> and divided by 100 is greater than
    <var title="">remaining space</var>, then for each entry in <var title="">input list</var> whose unit is <i>percentage</i>, set the
    corresponding value in <var title="">output list</var> to the
    number of the entry in <var title="">input list</var> multiplied
    by <var title="">remaining space</var> and divided by <var title="">total percentage</var>. Then, set <var title="">remaining
    space</var> to zero.</p>

    <p>Otherwise, for each entry in <var title="">input list</var>
    whose unit is <i>percentage</i>, set the corresponding value in
    <var title="">output list</var> to the number of the entry in <var title="">input list</var> multiplied by the <var title="">input
    dimension</var> and divided by 100. Then, decrement <var title="">remaining space</var> by <var title="">total
    percentage</var> multiplied by the <var title="">input
    dimension</var> and divided by 100.</p>

   </li>

   <li>

    <p>For each entry in <var title="">input list</var> whose unit is
    <i>relative</i>, set the corresponding value in <var title="">output list</var> to the number of the entry in <var title="">input list</var> multiplied by <var title="">remaining
    space</var> and divided by <var title="">total relative</var>.</p>

   </li>

   <li><p>Return <var title="">output list</var>.</li>

  </ol><p>User agents working with integer values for frame widths (as
  opposed to user agents that can lay frames out with subpixel
  accuracy) are expected to distribute the remainder first to the last
  entry whose unit is <i>relative</i>, then equally (not
  proportionally) to each entry whose unit is <i>percentage</i>, then
  equally (not proportionally) to each entry whose unit is
  <i>absolute</i>, and finally, failing all else, to the last
  entry.</p>


  </div>


  <div class=impl>

  <h3 id=interactive-media><span class=secno>12.6 </span>Interactive media</h3>

  <h4 id=links,-forms,-and-navigation><span class=secno>12.6.1 </span>Links, forms, and navigation</h4>

  <p>User agents are expected to allow the user to control aspects of
  <a href=#hyperlink>hyperlink</a> activation and <a href=#form-submission>form submission</a>,
  such as which <a href=#browsing-context>browsing context</a> is to be used for the
  subsequent <a href=#navigate title=navigate>navigation</a>.</p>

  <p>User agents are expected to allow users to discover the
  destination of <a href=#hyperlink title=hyperlink>hyperlinks</a> and of
  <a href=#the-form-element title=form>forms</a> before triggering their <a href=#navigate title=navigate>navigation</a>.</p>

<!--PING-->
  <p>User agents are expected to inform the user of whether a
  <a href=#hyperlink>hyperlink</a> includes <a href=#hyperlink-auditing>hyperlink auditing</a>, and
  to let them know at a minimum which domains will be contacted as
  part of such auditing.</p>
<!--PING-->

  <p>User agents are expected to allow users to <a href=#navigate>navigate</a>
  <a href=#browsing-context title="browsing context">browsing contexts</a> to the
  resources <a href=#resolve-a-url title="resolve a url">indicated</a> by the <code title="">cite</code> attributes on <code><a href=#the-q-element>q</a></code>,
  <code><a href=#the-blockquote-element>blockquote</a></code>, <code><a href=#the-section-element>section</a></code>, <code><a href=#the-article-element>article</a></code>,
  <code><a href=#the-ins-element>ins</a></code>, and <code><a href=#the-del-element>del</a></code> elements.</p>

  <p>User agents are expected to surface <a href=#hyperlink title=hyperlink>hyperlinks</a> created by <code><a href=#the-link-element>link</a></code>
  elements in their user interface.</p>

  <p class=note>While <code><a href=#the-link-element>link</a></code> elements that create <a href=#hyperlink title=hyperlink>hyperlinks</a> will match the ':link' or
  ':visited' pseudo-classes, will react to clicks if visible, and so
  forth, this does not extend to any browser interface constructs that
  expose those same links. Activating a link through the browser's
  interface, rather than in the page itself, does not trigger <code title=event-click><a href=#event-click>click</a></code> events and the like.</p>




  <h4 id=the-title-attribute-0><span class=secno>12.6.2 </span>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute</h4>

  <p>Given an element (e.g. the element designated by the mouse
  cursor), if the element, or one of its ancestors, has a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, and the nearest such
  attribute has a value that is not the empty string, it is expected
  that the user agent will expose the contents of that attribute as a
  tooltip.</p>

  <p>User agents are encouraged to make it possible to view tooltips
  without the use of a pointing device, since not all users are able
  to use pointing devices.</p>

  <p>U+000A LINE FEED (LF) characters are expected to cause line
  breaks in the tooltip.</p>


  <h4 id=editing-hosts><span class=secno>12.6.3 </span>Editing hosts</h4>

  <p>The current text editing caret (the one at the <a href=#caret-position>caret
  position</a> in a focused <a href=#editing-host>editing host</a>) is expected
  to act like an inline replaced element with the vertical dimensions
  of the caret and with zero width for the purposes of the CSS
  rendering model.</p>

  <p class=note>This means that even an empty block can have the
  caret inside it, and that when the caret is in such an element, it
  prevents margins from collapsing through the element.</p>




  <h3 id=print-media><span class=secno>12.7 </span>Print media</h3>

  <p>User agents are expected to allow the user to request the
  opportunity to <dfn id=obtain-a-physical-form>obtain a physical form</dfn> (or a
  representation of a physical form) of a <code><a href=#document>Document</a></code>. For
  example, selecting the option to print a page or convert it to PDF
  format.</p>

  <p>When the user actually <a href=#obtain-a-physical-form title="obtain a physical
  form">obtains a physical form</a> (or a representation of a
  physical form) of a <code><a href=#document>Document</a></code>, the user agent is
  expected to create a new rendering of the <code><a href=#document>Document</a></code> for
  the print media.</p>



  </div>



  <h2 id=obsolete><span class=secno>13 </span>Obsolete features</h2>

  <h3 id=obsolete-but-conforming-features><span class=secno>13.1 </span>Obsolete but conforming features</h3>

  <p>Features listed in this section will trigger warnings in
  conformance checkers.</p>

  <p>Authors should not specify an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
  <a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content
  Language</a> state on a <code><a href=#meta>meta</a></code> element. The <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute should be used instead.</p>

  <p>Authors should not specify a <code title=attr-img-border><a href=#attr-img-border>border</a></code> attribute on an
  <code><a href=#the-img-element>img</a></code> element. If the attribute is present, its value
  must be the string "<code title="">0</code>". CSS should be used
  instead.</p>

  <p>Authors should not specify a <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute on a
  <code><a href=#script>script</a></code> element. If the attribute is present, its value
  must be an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
  "<code title="">JavaScript</code>" and either the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute must be omitted or
  its value must be an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
  the string "<code title="">text/javascript</code>". The attribute
  should be entirely omitted instead (with the value "<code title="">JavaScript</code>", it has no effect), or replaced with use
  of the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute.</p>

  <p>Authors should not specify the <code title=attr-a-name><a href=#attr-a-name>name</a></code> attribute on <code><a href=#the-a-element>a</a></code>
  elements. If the attribute is present, its value must not be the
  empty string and must neither be equal to the value of any of the
  <a href=#concept-id title=concept-id>IDs</a> in the element's <a href=#home-subtree>home
  subtree</a> other than the element's own <a href=#concept-id title=concept-id>ID</a>, if any, nor be equal to the value of
  any of the other <code title=attr-a-name><a href=#attr-a-name>name</a></code> attributes on
  <code><a href=#the-a-element>a</a></code> elements in the element's <a href=#home-subtree>home
  subtree</a>. If this attribute is present and the element has an
  <a href=#concept-id title=concept-id>ID</a>, then the attribute's value must
  be equal to the element's <a href=#concept-id title=concept-id>ID</a>. In
  earlier versions of the language, this attribute was intended as a
  way to specify possible targets for fragment identifiers in <a href=#url title=URL>URLs</a>. The <code title=attr-id><a href=#the-id-attribute>id</a></code>
  attribute should be used instead.</p>

  <p class=note>In <a href=#syntax>the HTML syntax</a>, specifying a <a href=#syntax-doctype title=syntax-DOCTYPE>DOCTYPE</a> that is an <a href=#obsolete-permitted-doctype>obsolete
  permitted DOCTYPE</a> will also trigger a warning.</p>

  <p class=note>The <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code>
  attribute, defined in the <code><a href=#the-table-element>table</a></code> section, will also
  trigger a warning.</p>


  <div class=impl>

  <h4 id=warnings-for-obsolete-but-conforming-features><span class=secno>13.1.1 </span>Warnings for obsolete but conforming features</h4>

  <p>To ease the transition from HTML4 Transitional documents to the
  language defined in <em>this</em> specification, and to discourage
  certain features that are only allowed in very few circumstances,
  conformance checkers are required to warn the user when the
  following features are used in a document. These are generally old
  obsolete features that have no effect, and are allowed only to
  distinguish between likely mistakes (regular conformance errors) and
  mere vestigial markup or unusual and discouraged practices (these
  warnings).</p>

  <p>The following features must be categorized as described
  above:</p>

  <ul><!-- downplayed list --><li><p>The presence of an <a href=#obsolete-permitted-doctype>obsolete permitted DOCTYPE</a>
   in an <a href=#html-documents title="HTML documents">HTML document</a>.</li>

   <li><p>The presence of a <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   <a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content
   Language</a> state.</li>

   <li><p>The presence of a <code title=attr-img-border><a href=#attr-img-border>border</a></code> attribute on an
   <code><a href=#the-img-element>img</a></code> element if its value is the string "<code title="">0</code>".</li>

   <li><p>The presence of a <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute on a
   <code><a href=#script>script</a></code> element if its value is an <a href=#ascii-case-insensitive>ASCII
   case-insensitive</a> match for the string "<code title="">JavaScript</code>" and if there is no <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute or there is and its
   value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
   string "<code title="">text/javascript</code>".</li>

   <li><p>The presence of a <code title=attr-a-name><a href=#attr-a-name>name</a></code>
   attribute on an <code><a href=#the-a-element>a</a></code> element, if its value is not the
   empty string.</li>

   <li><p>The presence of a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute on a
   <code><a href=#the-table-element>table</a></code> element.</li> <!-- 2.65% pages -->

  </ul><p>Conformance checkers must distinguish between pages that have no
  conformance errors and have none of these obsolete features, and
  pages that have no conformance errors but do have some of these
  obsolete features.</p>

  <p class=example>For example, a validator could report some pages
  as "Valid HTML" and others as "Valid HTML with warnings".</p>

  </div>


  <h3 id=non-conforming-features><span class=secno>13.2 </span>Non-conforming features</h3>

  <p>Elements in the following list are entirely obsolete, and must
  not be used by authors:</p>

  <dl><!-- alphabetical by first element in the group, except CSS goes last --><dt><code><a href=#the-applet-element>applet</a></code></dt>
   <dd><p>Use <code><a href=#the-embed-element>embed</a></code> or <code><a href=#the-object-element>object</a></code> instead.</dd>

   <dt><dfn id=acronym><code>acronym</code></dfn></dt>
   <dd><p>Use <code><a href=#the-abbr-element>abbr</a></code> instead.</dd>

   <dt><dfn id=bgsound><code>bgsound</code></dfn></dt>
   <dd><p>Use <code><a href=#audio>audio</a></code> instead.</dd>

   <dt><dfn id=dir><code>dir</code></dfn></dt>
   <dd><p>Use <code><a href=#the-ul-element>ul</a></code> instead.</dd>

   <dt><code><a href=#frame>frame</a></code></dt>
   <dt><code><a href=#frameset>frameset</a></code></dt>
   <dt><dfn id=noframes><code>noframes</code></dfn></dt>
   <dd><p>Either use <code><a href=#the-iframe-element>iframe</a></code> and CSS instead, or use server-side includes to generate complete pages with the various invariant parts merged in.</dd>

   <dt><dfn id=isindex-0><code>isindex</code></dfn></dt>
   <dd><p>Use an explicit <code><a href=#the-form-element>form</a></code> and <a href=#text-state-and-search-state title=attr-input-type-text>text field</a> combination instead.</dd>

   <dt><dfn id=listing><code>listing</code></dfn></dt>
   <dt><dfn id=xmp><code>xmp</code></dfn></dt>
   <dd><p>Use <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-code-element>code</a></code> instead.</dd>

   <dt><dfn id=nextid><code>nextid</code></dfn></dt>
   <dd><p>Use GUIDs instead.</dd>

   <dt><dfn id=noembed><code>noembed</code></dfn></dt>
   <dd><p>Use <code><a href=#the-object-element>object</a></code> instead of <code><a href=#the-embed-element>embed</a></code> when fallback is necessary.</dd>

   <dt><dfn id=plaintext><code>plaintext</code></dfn></dt>
   <dd><p>Use the "<code>text/plain</code>" <a href=#mime-type>MIME type</a> instead.</dd>

   <dt><dfn id=rb><code>rb</code></dfn></dt>
   <dd><p>Providing the ruby base directly inside the <code><a href=#the-ruby-element>ruby</a></code> element is sufficient; the <code><a href=#rb>rb</a></code> element is unnecessary. Omit it altogether.</dd>

   <dt><dfn id=basefont><code>basefont</code></dfn></dt>
   <dt><dfn id=big><code>big</code></dfn></dt>
   <dt><dfn id=blink><code>blink</code></dfn></dt>
   <dt><dfn id=center><code>center</code></dfn></dt>
   <dt><dfn id=font><code>font</code></dfn></dt>
   <dt><code><a href=#the-marquee-element>marquee</a></code></dt>
   <dt><dfn id=multicol><code>multicol</code></dfn></dt>
   <dt><dfn id=nobr><code>nobr</code></dfn></dt>
   <dt><dfn id=s><code>s</code></dfn></dt>
   <dt><dfn id=spacer><code>spacer</code></dfn></dt>
   <dt><dfn id=strike><code>strike</code></dfn></dt>
   <dt><dfn id=tt><code>tt</code></dfn></dt>
   <dt><dfn id=u><code>u</code></dfn></dt>

   <dd>

    <p>Use appropriate elements and/or CSS instead.</p>

    <p>For the <code><a href=#s>s</a></code> and <code><a href=#strike>strike</a></code> elements, if
    they are marking up a removal from the element, consider using the
    <code><a href=#the-del-element>del</a></code> element instead.</p>

    <p>Where the <code><a href=#tt>tt</a></code> element would have been used for
    marking up keyboard input, consider the <code><a href=#the-kbd-element>kbd</a></code> element;
    for variables, consider the <code><a href=#the-var-element>var</a></code> element; for computer
    code, consider the <code><a href=#the-code-element>code</a></code> element; and for computer
    output, consider the <code><a href=#the-samp-element>samp</a></code> element.</p>

    <p>Similarly, if the <code><a href=#u>u</a></code> element is being used to
    indicate emphasis, consider using the <code><a href=#the-em-element>em</a></code> element; if
    it is being used for marking up keywords, consider the
    <code><a href=#the-b-element>b</a></code> element; and if it is being used for highlighting
    text for reference purposes, consider the <code><a href=#the-mark-element>mark</a></code>
    element.</p>

    <p>See also the <a href=#usage-summary>text-level semantics
    usage summary</a> for more suggestions with examples.</p>

   </dd>

  </dl><hr><p>The following attributes are obsolete (though the elements are
  still part of the language), and must not be used by authors:</p>

  <dl><!-- alphabetical by element then attribute of first item in group, except CSS goes last --><dt><dfn id=attr-a-charset title=attr-a-charset><code>charset</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   <dt><dfn id=attr-link-charset title=attr-link-charset><code>charset</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   <dd><p>Use an HTTP Content-Type header on the linked resource instead.</dd>

   <dt><dfn id=attr-a-coords title=attr-a-coords><code>coords</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   <dt><dfn id=attr-a-shape title=attr-a-shape><code>shape</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   <dd><p>Use <code><a href=#the-area-element>area</a></code> instead of <code><a href=#the-a-element>a</a></code> for image maps.</dd>

   <dt><dfn id=attr-a-methods title=attr-a-methods><code>methods</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   <dt><dfn id=attr-link-methods title=attr-link-methods><code>methods</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   <dd><p>Use the HTTP OPTIONS feature instead.</dd>

   <dt><dfn id=attr-a-name title=attr-a-name><code>name</code></dfn> on <code><a href=#the-a-element>a</a></code> elements (except as noted in the previous section)</dt>
   <dt><dfn id=attr-embed-name title=attr-embed-name><code>name</code></dfn> on <code><a href=#the-embed-element>embed</a></code> elements</dt>
   <dt><dfn id=attr-img-name title=attr-img-name><code>name</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   <dt><dfn id=attr-option-name title=attr-option-name><code>name</code></dfn> on <code><a href=#the-option-element>option</a></code> elements</dt>
   <dd><p>Use the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute instead.</dd>

   <dt><dfn id=attr-a-rev title=attr-a-rev><code>rev</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   <dt><dfn id=attr-link-rev title=attr-link-rev><code>rev</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   <dd><p>Use the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>
   attribute instead, with an opposite term. (For example, instead of
   <code title="">rev="made"</code>, use <code title="">rel="author"</code>.)</dd>

   <dt><dfn id=attr-a-urn title=attr-a-urn><code>urn</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   <dt><dfn id=attr-link-urn title=attr-link-urn><code>urn</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   <dd><p>Specify the preferred persistent identifier using the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute instead.</dd>

   <dt><dfn id=attr-area-nohref title=attr-area-nohref><code>nohref</code></dfn> on <code><a href=#the-area-element>area</a></code> elements</dt>
   <dd><p>Omitting the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
   attribute is sufficient; the <code title=attr-area-nohref><a href=#attr-area-nohref>nohref</a></code> attribute is
   unnecessary. Omit it altogether.</dd>

   <dt><dfn id=attr-head-profile title=attr-head-profile><code>profile</code></dfn> on <code><a href=#the-head-element-0>head</a></code> elements</dt>
   <dd><p>When used for declaring which <code><a href=#meta>meta</a></code> terms are
   used in the document, unnecessary; omit it altogether, and <a href=#concept-meta-extensions title=concept-meta-extensions>register the names</a>.</dd>
   <dd><p>When used for triggering specific user agent behaviors: use
   a <code><a href=#the-link-element>link</a></code> element instead.</dd>

   <dt><dfn id=attr-html-version title=attr-html-version><code>version</code></dfn> on <code><a href=#the-html-element-0>html</a></code> elements</dt>
   <dd><p>Unnecessary. Omit it altogether.</dd>

   <dt><dfn id=attr-input-usemap title=attr-input-usemap><code>usemap</code></dfn> on <code><a href=#the-input-element>input</a></code> elements</dt>
   <dd><p>Use <code><a href=#the-img-element>img</a></code> instead of <code><a href=#the-input-element>input</a></code> for image maps.</dd>

   <dt><dfn id=attr-iframe-longdesc title=attr-iframe-longdesc><code>longdesc</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   <dt><dfn id=attr-img-longdesc title=attr-img-longdesc><code>longdesc</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   <dd><p>Use a regular <code><a href=#the-a-element>a</a></code> element to link to the description.</dd>

   <dt><dfn id=attr-link-target title=attr-link-target><code>target</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   <dd><p>Unnecessary. Omit it altogether.</dd>

   <dt><dfn id=attr-meta-scheme title=attr-meta-scheme><code>scheme</code></dfn> on <code><a href=#meta>meta</a></code> elements</dt>
   <dd><p>Use only one scheme per field, or make the scheme declaration part of the value.</dd>

   <dt><dfn id=attr-object-archive title=attr-object-archive><code>archive</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dt><dfn id=attr-object-classid title=attr-object-classid><code>classid</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dt><dfn id=attr-object-code title=attr-object-code><code>code</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dt><dfn id=attr-object-codebase title=attr-object-codebase><code>codebase</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dt><dfn id=attr-object-codetype title=attr-object-codetype><code>codetype</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dd><p>Use the <code title=attr-object-data><a href=#attr-object-data>data</a></code> and <code title=attr-object-type><a href=#attr-object-type>type</a></code> attributes to invoke <a href=#plugin title=plugin>plugins</a>. To set parameters with these names
   in particular, the <code><a href=#the-param-element>param</a></code> element can be used.</dd>

   <dt><dfn id=attr-object-declare title=attr-object-declare><code>declare</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dd><p>Repeat the <code><a href=#the-object-element>object</a></code> element completely each time the resource is to be reused.</dd>

   <dt><dfn id=attr-object-standby title=attr-object-standby><code>standby</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dd><p>Optimize the linked resource so that it loads quickly or, at least, incrementally.</dd>

   <dt><dfn id=attr-param-type title=attr-param-type><code>type</code></dfn> on <code><a href=#the-param-element>param</a></code> elements</dt>
   <dt><dfn id=attr-param-valuetype title=attr-param-valuetype><code>valuetype</code></dfn> on <code><a href=#the-param-element>param</a></code> elements</dt>
   <dd><p>Use the <code title=attr-param-name><a href=#attr-param-name>name</a></code> and <code title=attr-param-value><a href=#attr-param-value>value</a></code> attributes without declaring
   value types.</dd>

   <dt><dfn id=attr-script-language title=attr-script-language><code>language</code></dfn> on <code><a href=#script>script</a></code> elements (except as noted in the previous section)</dt>
   <dd><p>Use the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute
   instead.</dd>

   <dt><dfn id=attr-script-event title=attr-script-event><code>event</code></dfn> on <code><a href=#script>script</a></code> elements</dt>
   <dt><dfn id=attr-script-for title=attr-script-for><code>for</code></dfn> on <code><a href=#script>script</a></code> elements</dt>
   <dd><p>Use DOM Events mechanisms to register event listeners. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></dd>

   <dt><dfn id=attr-table-datapagesize title=attr-table-datapagesize><code>datapagesize</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   <dd><p>Unnecessary. Omit it altogether.</dd>

   <dt><dfn id=attr-tdth-abbr title=attr-tdth-abbr><code>abbr</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dd><p>Use text that begins in an unambiguous and terse manner, and include any more elaborate text after that. The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute can also be useful in including more detailed text, so that the cell's contents can be made terse.</p>

   <dt><dfn id=attr-tdth-axis title=attr-tdth-axis><code>axis</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dd><p>Use the <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute on the relevant <code><a href=#the-th-element>th</a></code>.</p>

   <dt><dfn id=attr-datasrc title=attr-datasrc><code>datasrc</code></dfn> on <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-button-element>button</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#frame>frame</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-label-element>label</a></code>, <code><a href=#the-legend-element>legend</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-option-element>option</a></code>, <code><a href=#the-select-element>select</a></code>, <code><a href=#the-span-element>span</a></code>, <code><a href=#the-table-element>table</a></code>, and <code><a href=#the-textarea-element>textarea</a></code> elements</dt>
   <dt><dfn id=attr-datafld title=attr-datafld><code>datafld</code></dfn> on <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-button-element>button</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>, <code><a href=#frame>frame</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-label-element>label</a></code>, <code><a href=#the-legend-element>legend</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-param-element>param</a></code>, <code><a href=#the-select-element>select</a></code>, <code><a href=#the-span-element>span</a></code>, and <code><a href=#the-textarea-element>textarea</a></code> elements</dt>
   <dt><dfn id=attr-dataformatas title=attr-dataformatas><code>dataformatas</code></dfn> on <code><a href=#the-button-element>button</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-label-element>label</a></code>, <code><a href=#the-legend-element>legend</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-option-element>option</a></code>, <code><a href=#the-select-element>select</a></code>, <code><a href=#the-span-element>span</a></code>, <code><a href=#the-table-element>table</a></code></dt>
   <dd><p>Use script and a mechanism such as <code>XMLHttpRequest</code> to populate the page dynamically. <a href=#refsXHR>[XHR]</a></dd>

   <dt><dfn id=attr-body-alink title=attr-body-alink><code>alink</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-bgcolor title=attr-body-bgcolor><code>bgcolor</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-link title=attr-body-link><code>link</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-marginbottom title=attr-body-marginbottom><code>marginbottom</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-marginheight title=attr-body-marginheight><code>marginheight</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-marginleft title=attr-body-marginleft><code>marginleft</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-marginright title=attr-body-marginright><code>marginright</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-margintop title=attr-body-margintop><code>margintop</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-marginwidth title=attr-body-marginwidth><code>marginwidth</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-text title=attr-body-text><code>text</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-body-vlink title=attr-body-vlink><code>vlink</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   <dt><dfn id=attr-br-clear title=attr-br-clear><code>clear</code></dfn> on <code><a href=#the-br-element>br</a></code> elements</dt>
   <dt><dfn id=attr-caption-align title=attr-caption-align><code>align</code></dfn> on <code><a href=#the-caption-element>caption</a></code> elements</dt>
   <dt><dfn id=attr-col-align title=attr-col-align><code>align</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   <dt><dfn id=attr-col-char title=attr-col-char><code>char</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   <dt><dfn id=attr-col-charoff title=attr-col-charoff><code>charoff</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   <dt><dfn id=attr-col-valign title=attr-col-valign><code>valign</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   <dt><dfn id=attr-col-width title=attr-col-width><code>width</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   <dt><dfn id=attr-div-align title=attr-div-align><code>align</code></dfn> on <code><a href=#the-div-element>div</a></code> elements</dt>
   <dt><dfn id=attr-dl-compact title=attr-dl-compact><code>compact</code></dfn> on <code><a href=#the-dl-element>dl</a></code> elements</dt>
   <dt><dfn id=attr-embed-align title=attr-embed-align><code>align</code></dfn> on <code><a href=#the-embed-element>embed</a></code> elements</dt>
   <dt><dfn id=attr-embed-hspace title=attr-embed-hspace><code>hspace</code></dfn> on <code><a href=#the-embed-element>embed</a></code> elements</dt>
   <dt><dfn id=attr-embed-vspace title=attr-embed-vspace><code>vspace</code></dfn> on <code><a href=#the-embed-element>embed</a></code> elements</dt>
   <dt><dfn id=attr-hr-align title=attr-hr-align><code>align</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   <dt><dfn id=attr-hr-color title=attr-hr-color><code>color</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   <dt><dfn id=attr-hr-noshade title=attr-hr-noshade><code>noshade</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   <dt><dfn id=attr-hr-size title=attr-hr-size><code>size</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   <dt><dfn id=attr-hr-width title=attr-hr-width><code>width</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   <dt><dfn id=attr-hx-align title=attr-hx-align><code>align</code></dfn> on <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&mdash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements</dt>
   <dt><dfn id=attr-iframe-align title=attr-iframe-align><code>align</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   <dt><dfn id=attr-iframe-allowtransparency title=attr-iframe-allowtransparency><code>allowtransparency</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   <dt><dfn id=attr-iframe-frameborder title=attr-iframe-frameborder><code>frameborder</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   <dt><dfn id=attr-iframe-hspace title=attr-iframe-hspace><code>hspace</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   <dt><dfn id=attr-iframe-marginheight title=attr-iframe-marginheight><code>marginheight</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   <dt><dfn id=attr-iframe-marginwidth title=attr-iframe-marginwidth><code>marginwidth</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   <dt><dfn id=attr-iframe-scrolling title=attr-iframe-scrolling><code>scrolling</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   <dt><dfn id=attr-iframe-vspace title=attr-iframe-vspace><code>vspace</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   <dt><dfn id=attr-input-align title=attr-input-align><code>align</code></dfn> on <code><a href=#the-input-element>input</a></code> elements</dt>
   <dt><dfn id=attr-input-hspace title=attr-input-hspace><code>hspace</code></dfn> on <code><a href=#the-input-element>input</a></code> elements</dt>
   <dt><dfn id=attr-input-vspace title=attr-input-vspace><code>vspace</code></dfn> on <code><a href=#the-input-element>input</a></code> elements</dt>
   <dt><dfn id=attr-img-align title=attr-img-align><code>align</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   <dt><dfn id=attr-img-border title=attr-img-border><code>border</code></dfn> on <code><a href=#the-img-element>img</a></code> elements (except as noted in the previous section)</dt>
   <dt><dfn id=attr-img-hspace title=attr-img-hspace><code>hspace</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   <dt><dfn id=attr-img-vspace title=attr-img-vspace><code>vspace</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   <dt><dfn id=attr-legend-align title=attr-legend-align><code>align</code></dfn> on <code><a href=#the-legend-element>legend</a></code> elements</dt>
   <dt><dfn id=attr-li-type title=attr-li-type><code>type</code></dfn> on <code><a href=#the-li-element>li</a></code> elements</dt>
   <dt><dfn id=attr-menu-compact title=attr-menu-compact><code>compact</code></dfn> on <code><a href=#menus>menu</a></code> elements</dt>
   <dt><dfn id=attr-object-align title=attr-object-align><code>align</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dt><dfn id=attr-object-border title=attr-object-border><code>border</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dt><dfn id=attr-object-hspace title=attr-object-hspace><code>hspace</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dt><dfn id=attr-object-vspace title=attr-object-vspace><code>vspace</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   <dt><dfn id=attr-ol-compact title=attr-ol-compact><code>compact</code></dfn> on <code><a href=#the-ol-element>ol</a></code> elements</dt>
   <dt><dfn id=attr-ol-type title=attr-ol-type><code>type</code></dfn> on <code><a href=#the-ol-element>ol</a></code> elements</dt>
   <dt><dfn id=attr-p-align title=attr-p-align><code>align</code></dfn> on <code><a href=#the-p-element>p</a></code> elements</dt>
   <dt><dfn id=attr-pre-width title=attr-pre-width><code>width</code></dfn> on <code><a href=#the-pre-element>pre</a></code> elements</dt>
   <dt><dfn id=attr-table-align title=attr-table-align><code>align</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   <dt><dfn id=attr-table-bgcolor title=attr-table-bgcolor><code>bgcolor</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   <dt><dfn id=attr-table-border title=attr-table-border><code>border</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   <dt><dfn id=attr-table-cellpadding title=attr-table-cellpadding><code>cellpadding</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   <dt><dfn id=attr-table-cellspacing title=attr-table-cellspacing><code>cellspacing</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   <dt><dfn id=attr-table-frame title=attr-table-frame><code>frame</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   <dt><dfn id=attr-table-rules title=attr-table-rules><code>rules</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   <dt><dfn id=attr-table-width title=attr-table-width><code>width</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   <dt><dfn id=attr-tbody-align title=attr-tbody-align><code>align</code></dfn> on <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code> elements</dt>
   <dt><dfn id=attr-tbody-char title=attr-tbody-char><code>char</code></dfn> on <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code> elements</dt>
   <dt><dfn id=attr-tbody-charoff title=attr-tbody-charoff><code>charoff</code></dfn> on <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code> elements</dt>
   <dt><dfn id=attr-tbody-valign title=attr-tbody-vAlign><code>valign</code></dfn> on <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code> elements</dt>
   <dt><dfn id=attr-tdth-align title=attr-tdth-align><code>align</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dt><dfn id=attr-tdth-bgcolor title=attr-tdth-bgcolor><code>bgcolor</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dt><dfn id=attr-tdth-char title=attr-tdth-char><code>char</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dt><dfn id=attr-tdth-charoff title=attr-tdth-charoff><code>charoff</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dt><dfn id=attr-tdth-height title=attr-tdth-height><code>height</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dt><dfn id=attr-tdth-nowrap title=attr-tdth-nowrap><code>nowrap</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dt><dfn id=attr-tdth-valign title=attr-tdth-valign><code>valign</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dt><dfn id=attr-tdth-width title=attr-tdth-width><code>width</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dt><dfn id=attr-tr-align title=attr-tr-align><code>align</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   <dt><dfn id=attr-tr-bgcolor title=attr-tr-bgcolor><code>bgcolor</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   <dt><dfn id=attr-tr-char title=attr-tr-char><code>char</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   <dt><dfn id=attr-tr-charoff title=attr-tr-charoff><code>charoff</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   <dt><dfn id=attr-tr-valign title=attr-tr-valign><code>valign</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   <dt><dfn id=attr-ul-compact title=attr-ul-compact><code>compact</code></dfn> on <code><a href=#the-ul-element>ul</a></code> elements</dt>
   <dt><dfn id=attr-ul-type title=attr-ul-type><code>type</code></dfn> on <code><a href=#the-ul-element>ul</a></code> elements</dt>
   <dt><dfn id=attr-background title=attr-background><code>background</code></dfn> on <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>, <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>, <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements</dt>
   <dd><p>Use CSS instead.</dd>

  </dl><div class=impl>

  <h3 id=requirements-for-implementations><span class=secno>13.3 </span>Requirements for implementations</h3>

  <h4 id=the-applet-element><span class=secno>13.3.1 </span>The <dfn><code>applet</code></dfn> element</h4>

  <p>The <code><a href=#the-applet-element>applet</a></code> element is a Java-specific variant of the
  <code><a href=#the-embed-element>embed</a></code> element. The <code><a href=#the-applet-element>applet</a></code> element is now
  obsoleted so that all extension frameworks (Java, .NET, Flash, etc)
  are handled in a consistent manner.</p>

  <p id=sandboxPluginApplet>When the element is still in the
  <a href=#stack-of-open-elements>stack of open elements</a> of an <a href=#html-parser>HTML parser</a>
  or <a href=#xml-parser>XML parser</a>, and when the element is not <a href=#in-a-document>in a
  <code>Document</code></a>, and when the element's document is not
  <a href=#fully-active>fully active</a>, and when the element's
  <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> had its
  <a href=#sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</a> when that
  <code><a href=#document>Document</a></code> was created, and when the element's
  <code><a href=#document>Document</a></code> was parsed from a resource whose <a href=#content-type-sniffing-0 title="Content-Type sniffing">sniffed type</a> as determined
  during <a href=#navigate title=navigate>navigation</a> is
  <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>, and when the element has an
  ancestor <a href=#media-element>media element</a>, and when the element has an
  ancestor <code><a href=#the-object-element>object</a></code> element that is <em>not</em> showing
  its <a href=#fallback-content>fallback content</a>, and when no Java Language runtime
  <a href=#plugin>plugin</a> is available, and when one <em>is</em> available
  but it is disabled, the element <a href=#represents>represents</a> its
  contents.</p>

  <p>Otherwise, the user agent should instantiate a Java Language
  runtime <a href=#plugin>plugin</a>, and should pass the names and values of
  all the attributes on the element, in the order they were added to
  the element, with the attributes added by the parser being ordered
  in source order, and then a parameter named "PARAM" whose value is
  null, and then all the names and values of <a href=#concept-param-parameter title=concept-param-parameter>parameters</a> given by
  <code><a href=#the-param-element>param</a></code> elements that are children of the
  <code><a href=#the-applet-element>applet</a></code> element, in <a href=#tree-order>tree order</a>, to the
  <a href=#plugin>plugin</a> used. If the <a href=#plugin>plugin</a> supports a
  scriptable interface, the <code><a href=#htmlappletelement>HTMLAppletElement</a></code> object
  representing the element should expose that interface. The
  <code><a href=#the-applet-element>applet</a></code> element <a href=#represents>represents</a> the
  <a href=#plugin>plugin</a>.</p>

  <!-- If we ever make this fetch anything manually, remember to delay
  the load event, and to include ", from the element's <span>browsing
  context scope origin</span> if it has one" when fetching -->

  <p class=note>The <code><a href=#the-applet-element>applet</a></code> element is unaffected by the
  CSS 'display' property. The Java Language runtime is instantiated
  even if the element is hidden with a 'display:none' CSS style.</p>

  <p>The <code><a href=#the-applet-element>applet</a></code> element must implement the
  <code><a href=#htmlappletelement>HTMLAppletElement</a></code> interface.</p>

  <pre class=idl>interface <dfn id=htmlappletelement>HTMLAppletElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-applet-align title=dom-applet-align>align</a>;
           attribute DOMString <a href=#dom-applet-alt title=dom-applet-alt>alt</a>;
           attribute DOMString <a href=#dom-applet-archive title=dom-applet-archive>archive</a>;
           attribute DOMString <a href=#dom-applet-code title=dom-applet-code>code</a>;
           attribute DOMString <a href=#dom-applet-codebase title=dom-applet-codeBase>codeBase</a>;
           attribute DOMString <a href=#dom-applet-height title=dom-applet-height>height</a>;
           attribute unsigned long <a href=#dom-applet-hspace title=dom-applet-hspace>hspace</a>;
           attribute DOMString <a href=#dom-applet-name title=dom-applet-name>name</a>;
           attribute DOMString _<a href=#dom-applet-object title=dom-applet-object>object</a>; // the underscore is not part of the identifier <!-- it's a Web IDL escaping mechanism -->
           attribute unsigned long <a href=#dom-applet-vspace title=dom-applet-vspace>vspace</a>;
           attribute DOMString <a href=#dom-applet-width title=dom-applet-width>width</a>;
};</pre>

  <p>The <dfn id=dom-applet-align title=dom-applet-align><code>align</code></dfn>, <dfn id=dom-applet-alt title=dom-applet-alt><code>alt</code></dfn>, <dfn id=dom-applet-archive title=dom-applet-archive><code>archive</code></dfn>, <dfn id=dom-applet-code title=dom-applet-code><code>code</code></dfn>, <dfn id=dom-applet-height title=dom-applet-height><code>height</code></dfn>, <dfn id=dom-applet-hspace title=dom-applet-hspace><code>hspace</code></dfn>, <dfn id=dom-applet-name title=dom-applet-name><code>name</code></dfn>, <dfn id=dom-applet-object title=dom-applet-object><code>object</code></dfn>, <dfn id=dom-applet-vspace title=dom-applet-vspace><code>vspace</code></dfn>, and <dfn id=dom-applet-width title=dom-applet-width><code>width</code></dfn> IDL attributes
  must <a href=#reflect>reflect</a> the respective content attributes of the
  same name.</p>

  <p>The <dfn id=dom-applet-codebase title=dom-applet-codeBase><code>codeBase</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-applet-codebase>codebase</code> content attribute.</p>


  <h4 id=the-marquee-element><span class=secno>13.3.2 </span>The <dfn><code>marquee</code></dfn> element</h4>

  <p>The <code><a href=#the-marquee-element>marquee</a></code> element is a presentational element that
  animates content. CSS transitions and animations are a more
  appropriate mechanism.</p>

  <p>The <a href=#task-source>task source</a> for tasks mentioned in this section
  is the <a href=#dom-manipulation-task-source>DOM manipulation task source</a>.</p>

  <p>The <code><a href=#the-marquee-element>marquee</a></code> element must implement the
  <code><a href=#htmlmarqueeelement>HTMLMarqueeElement</a></code> interface.</p>

  <pre class=idl>interface <dfn id=htmlmarqueeelement>HTMLMarqueeElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-marquee-behavior title=dom-marquee-behavior>behavior</a>;
           attribute DOMString <a href=#dom-marquee-bgcolor title=dom-marquee-bgColor>bgColor</a>;
           attribute DOMString <a href=#dom-marquee-direction title=dom-marquee-direction>direction</a>;
           attribute DOMString <a href=#dom-marquee-height title=dom-marquee-height>height</a>;
           attribute unsigned long <a href=#dom-marquee-hspace title=dom-marquee-hspace>hspace</a>;
           attribute long <a href=#dom-marquee-loop title=dom-marquee-loop>loop</a>;
           attribute unsigned long <a href=#dom-marquee-scrollamount title=dom-marquee-scrollamount>scrollAmount</a>;
           attribute unsigned long <a href=#dom-marquee-scrolldelay title=dom-marquee-scrollDelay>scrollDelay</a>;
           attribute DOMString <a href=#dom-marquee-truespeed title=dom-marquee-trueSpeed>trueSpeed</a>;
           attribute unsigned long <a href=#dom-marquee-vspace title=dom-marquee-vspace>vspace</a>;
           attribute DOMString <a href=#dom-marquee-width title=dom-marquee-width>width</a>;

           attribute <a href=#function>Function</a> <a href=#handler-marquee-onbounce title=handler-marquee-onbounce>onbounce</a>;
           attribute <a href=#function>Function</a> <a href=#handler-marquee-onfinish title=handler-marquee-onfinish>onfinish</a>;
           attribute <a href=#function>Function</a> <a href=#handler-marquee-onstart title=handler-marquee-onstart>onstart</a>;

  void <a href=#dom-marquee-start title=dom-marquee-start>start</a>();
  void <a href=#dom-marquee-stop title=dom-marquee-stop>stop</a>();
};</pre>

  <p>A <code><a href=#the-marquee-element>marquee</a></code> element can be <dfn id=concept-marquee-on title=concept-marquee-on>turned on</dfn> or <dfn id=concept-marquee-off title=concept-marquee-off>turned off</dfn>. When it is created, it
  is <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>.</p>

  <p>When the <dfn id=dom-marquee-start title=dom-marquee-start><code>start()</code></dfn> method is
  called, the <code><a href=#the-marquee-element>marquee</a></code> element must be <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>.</p>

  <p>When the <dfn id=dom-marquee-stop title=dom-marquee-stop><code>stop()</code></dfn>
  method is called, the <code><a href=#the-marquee-element>marquee</a></code> element must be <a href=#concept-marquee-off title=concept-marquee-off>turned off</a>.</p>

  <p>When a <code><a href=#the-marquee-element>marquee</a></code> element is created, the user agent
  must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
  named <code title=event-start>start</code> at the element.</p>

  <hr><p>The <dfn id=attr-marquee-behavior title=attr-marquee-behavior><code>behavior</code></dfn> content
  attribute on <code><a href=#the-marquee-element>marquee</a></code> elements is an <a href=#enumerated-attribute>enumerated
  attribute</a> with the following keywords (all
  non-conforming):</p>

  <table><thead><tr><th>Keyword
     <th>State
   <tbody><tr><td><code title="">scroll</code>
     <td><dfn id=attr-marquee-behavior-scroll title=attr-marquee-behavior-scroll>scroll</dfn>
    <tr><td><code title="">slide</code>
     <td><dfn id=attr-marquee-behavior-slide title=attr-marquee-behavior-slide>slide</dfn>
    <tr><td><code title="">alternate</code>
     <td><dfn id=attr-marquee-behavior-alternate title=attr-marquee-behavior-alternate>alternate</dfn>
  </table><p>The <i>missing value default</i> is the <a href=#attr-marquee-behavior-scroll title=attr-marquee-behavior-scroll>scroll</a> state.</p>

  <hr><p>The <dfn id=attr-marquee-direction title=attr-marquee-direction><code>direction</code></dfn> content
  attribute on <code><a href=#the-marquee-element>marquee</a></code> elements is an <a href=#enumerated-attribute>enumerated
  attribute</a> with the following keywords (all
  non-conforming):</p>

  <table><thead><tr><th>Keyword
     <th>State
   <tbody><tr><td><code title="">left</code>
     <td><dfn id=attr-marquee-direction-left title=attr-marquee-direction-left>left</dfn>
    <tr><td><code title="">right</code>
     <td><dfn id=attr-marquee-direction-right title=attr-marquee-direction-right>right</dfn>
    <tr><td><code title="">up</code>
     <td><dfn id=attr-marquee-direction-up title=attr-marquee-direction-up>up</dfn>
    <tr><td><code title="">down</code>
     <td><dfn id=attr-marquee-direction-down title=attr-marquee-direction-down>down</dfn>
  </table><p>The <i>missing value default</i> is the <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> state.</p>

  <hr><p>The <dfn id=attr-marquee-truespeed title=attr-marquee-truespeed><code>truespeed</code></dfn> content
  attribute on <code><a href=#the-marquee-element>marquee</a></code> elements is an <a href=#enumerated-attribute>enumerated
  attribute</a> with the following keywords (all
  non-conforming):</p>

  <table><thead><tr><th>Keyword
     <th>State
   <tbody><tr><td><code title="">true</code>
     <td><dfn id=attr-marquee-truespeed-true title=attr-marquee-truespeed-true>true</dfn>
    <tr><td><code title="">false</code>
     <td><dfn id=attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</dfn>
  </table><p>The <i>missing value default</i> is the <a href=#attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</a> state.</p>

  <hr><p>A <code><a href=#the-marquee-element>marquee</a></code> element has a <dfn id=marquee-scroll-interval>marquee scroll
  interval</dfn>, which is obtained as follows:</p>

  <ol><li><p>If the element has a <code title=attr-marquee-scrolldelay>scrolldelay</code> attribute, and
   parsing its value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   integers</a> does not return an error, then let <var title="">delay</var> be the parsed value. Otherwise, let <var title="">delay</var> be 85.</li>

   <li><p>If the element does not have a <code title=attr-marquee-truespeed><a href=#attr-marquee-truespeed>truespeed</a></code> attribute, or if it
   does but that attribute is in the <a href=#attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</a> state, and the
   <var title="">delay</var> value is less than 60, then let <var title="">delay</var> be 60 instead.</li>

   <li><p>The <a href=#marquee-scroll-interval>marquee scroll interval</a> is <var title="">delay</var>, interpreted in milliseconds.</li>

  </ol><hr><p>A <code><a href=#the-marquee-element>marquee</a></code> element has a <dfn id=marquee-scroll-distance>marquee scroll
  distance</dfn>, which, if the element has a <code title=attr-marquee-scrollamount>scrollamount</code> attribute, and
  parsing its value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
  integers</a> does not return an error, is the parsed value
  interpreted in CSS pixels, and otherwise is 6 CSS pixels.</p>

  <hr><p>A <code><a href=#the-marquee-element>marquee</a></code> element has a <dfn id=marquee-loop-count>marquee loop
  count</dfn>, which, if the element has a <code title=attr-marquee-loop>loop</code> attribute, and parsing its
  value using the <a href=#rules-for-parsing-integers>rules for parsing integers</a> does not
  return an error or a number less than 1, is the parsed value, and
  otherwise is &minus;1.</p>

  <p>The <dfn id=dom-marquee-loop title=dom-marquee-loop><code>loop</code></dfn> IDL
  attribute, on getting, must return the element's <a href=#marquee-loop-count>marquee loop
  count</a>; and on setting, if the new value is different than the
  element's <a href=#marquee-loop-count>marquee loop count</a> and either greater than
  zero or equal to &minus;1, must set the element's <code title=attr-marquee-loop>loop</code> content attribute (adding it
  if necessary) to the <a href=#valid-integer>valid integer</a> that represents the
  new value. (Other values are ignored.)</p>

  <p>A <code><a href=#the-marquee-element>marquee</a></code> element also has a <dfn id=marquee-current-loop-index>marquee current
  loop index</dfn>, which is zero when the element is created.</p>

  <p>The rendering layer will occasionally <dfn id=increment-the-marquee-current-loop-index>increment the marquee
  current loop index</dfn>, which must cause the following steps to be
  run:</p>

  <ol><li><p>If the <a href=#marquee-loop-count>marquee loop count</a> is &minus;1, then
   abort these steps.</p>

   <li><p>Increment the <a href=#marquee-current-loop-index>marquee current loop index</a> by
   one.</li>

   <li>

    <p>If the <a href=#marquee-current-loop-index>marquee current loop index</a> is now equal to
    or greater than the element's <a href=#marquee-loop-count>marquee loop count</a>,
    <a href=#concept-marquee-off title=concept-marquee-off>turn off</a> the
    <code><a href=#the-marquee-element>marquee</a></code> element and <a href=#queue-a-task>queue a task</a> to
    <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-finish>finish</code> at the <code><a href=#the-marquee-element>marquee</a></code>
    element.</p>

    <p>Otherwise, if the <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
    <a href=#attr-marquee-behavior-alternate title=attr-marquee-behavior-alternate>alternate</a>
    state, then <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
    event</a> named <code title=event-bounce>bounce</code> at
    the <code><a href=#the-marquee-element>marquee</a></code> element.</p>

    <p>Otherwise, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
    event</a> named <code title=event-start>start</code> at the
    <code><a href=#the-marquee-element>marquee</a></code> element.</p>

   </li>

  </ol><hr><p>The following are the <a href=#event-handlers>event handlers</a> (and their
  corresponding <a href=#event-handler-event-type title="event handler event type">event handler
  event types</a>) that must be supported, as content and IDL
  attributes, by <code><a href=#the-marquee-element>marquee</a></code> elements:</p>

  <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn id=handler-marquee-onbounce title=handler-marquee-onbounce><code>onbounce</code></dfn> <td> <code title=event-bounce>bounce</code>
    <tr><td><dfn id=handler-marquee-onfinish title=handler-marquee-onfinish><code>onfinish</code></dfn> <td> <code title=event-finish>finish</code>
    <tr><td><dfn id=handler-marquee-onstart title=handler-marquee-onstart><code>onstart</code></dfn> <td> <code title=event-start>start</code>
  </table><hr><p>The <dfn id=dom-marquee-behavior title=dom-marquee-behavior><code>behavior</code></dfn>, <dfn id=dom-marquee-direction title=dom-marquee-direction><code>direction</code></dfn>, <dfn id=dom-marquee-height title=dom-marquee-height><code>height</code></dfn>, <dfn id=dom-marquee-hspace title=dom-marquee-hspace><code>hspace</code></dfn>, <dfn id=dom-marquee-vspace title=dom-marquee-vspace><code>vspace</code></dfn>, and <dfn id=dom-marquee-width title=dom-marquee-width><code>width</code></dfn> IDL attributes
  must <a href=#reflect>reflect</a> the respective content attributes of the
  same name.</p>

  <p>The <dfn id=dom-marquee-bgcolor title=dom-marquee-bgColor><code>bgColor</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-bgcolor>bgcolor</code> content attribute.</p>

  <p>The <dfn id=dom-marquee-scrollamount title=dom-marquee-scrollAmount><code>scrollAmount</code></dfn>
  IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-scrollamount>scrollamount</code> content
  attribute. The default value is 6.</p>

  <p>The <dfn id=dom-marquee-scrolldelay title=dom-marquee-scrollDelay><code>scrollDelay</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-scrolldelay>scrolldelay</code> content
  attribute. The default value is 85.</p>

  <p>The <dfn id=dom-marquee-truespeed title=dom-marquee-trueSpeed><code>trueSpeed</code></dfn> IDL
  attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-truespeed><a href=#attr-marquee-truespeed>truespeed</a></code> content
  attribute.</p>


  <h4 id=frames><span class=secno>13.3.3 </span>Frames</h4>

  <p>The <dfn id=frameset><code>frameset</code></dfn> element acts as <a href=#the-body-element>the
  body element</a> in documents that use frames.</p>

  <p>The <code><a href=#frameset>frameset</a></code> element must implement the
  <code><a href=#htmlframesetelement>HTMLFrameSetElement</a></code> interface.</p>

  <pre class=idl>interface <dfn id=htmlframesetelement>HTMLFrameSetElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-frameset-cols title=dom-frameset-cols>cols</a>;
           attribute DOMString <a href=#dom-frameset-rows title=dom-frameset-rows>rows</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onafterprint title=handler-window-onafterprint>onafterprint</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeprint title=handler-window-onbeforeprint>onbeforeprint</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeunload title=handler-window-onbeforeunload>onbeforeunload</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onblur title=handler-window-onblur>onblur</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onerror title=handler-window-onerror>onerror</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onfocus title=handler-window-onfocus>onfocus</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onhashchange title=handler-window-onhashchange>onhashchange</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onload title=handler-window-onload>onload</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onmessage title=handler-window-onmessage>onmessage</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onoffline title=handler-window-onoffline>onoffline</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-ononline title=handler-window-ononline>ononline</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onpagehide title=handler-window-onpagehide>onpagehide</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onpageshow title=handler-window-onpageshow>onpageshow</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onpopstate title=handler-window-onpopstate>onpopstate</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onredo title=handler-window-onredo>onredo</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onresize title=handler-window-onresize>onresize</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onstorage title=handler-window-onstorage>onstorage</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onundo title=handler-window-onundo>onundo</a>;
           attribute <a href=#function>Function</a> <a href=#handler-window-onunload title=handler-window-onunload>onunload</a>;
};</pre>

  <p>The <dfn id=dom-frameset-cols title=dom-frameset-cols><code>cols</code></dfn> and
  <dfn id=dom-frameset-rows title=dom-frameset-rows><code>rows</code></dfn> IDL
  attributes of the <code><a href=#frameset>frameset</a></code> element must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  <p>The <code><a href=#frameset>frameset</a></code> element must support the following
  <a href=#event-handler-content-attributes>event handler content attributes</a> exposing the
  <a href=#event-handlers>event handlers</a> of the <code><a href=#window>Window</a></code> object:</p>

  <ul class=brief><li><code title=handler-window-onafterprint><a href=#handler-window-onafterprint>onafterprint</a></code></li>
   <li><code title=handler-window-onbeforeprint><a href=#handler-window-onbeforeprint>onbeforeprint</a></code></li>
   <li><code title=handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>onbeforeunload</a></code></li>
   <li><code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code></li>
   <li><code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code></li>
   <li><code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code></li>
   <li><code title=handler-window-onhashchange><a href=#handler-window-onhashchange>onhashchange</a></code></li>
   <li><code title=handler-window-onload><a href=#handler-window-onload>onload</a></code></li>
   <li><code title=handler-window-onmessage><a href=#handler-window-onmessage>onmessage</a></code></li>
   <li><code title=handler-window-onoffline><a href=#handler-window-onoffline>onoffline</a></code></li>
   <li><code title=handler-window-ononline><a href=#handler-window-ononline>ononline</a></code></li>
   <li><code title=handler-window-onpagehide><a href=#handler-window-onpagehide>onpagehide</a></code></li>
   <li><code title=handler-window-onpageshow><a href=#handler-window-onpageshow>onpageshow</a></code></li>
   <li><code title=handler-window-onpopstate><a href=#handler-window-onpopstate>onpopstate</a></code></li>
   <li><code title=handler-window-onredo><a href=#handler-window-onredo>onredo</a></code></li>
   <li><code title=handler-window-onresize><a href=#handler-window-onresize>onresize</a></code></li>
   <li><code title=handler-window-onstorage><a href=#handler-window-onstorage>onstorage</a></code></li>
   <li><code title=handler-window-onundo><a href=#handler-window-onundo>onundo</a></code></li>
   <li><code title=handler-window-onunload><a href=#handler-window-onunload>onunload</a></code></li>
  </ul><p>The DOM interface also exposes <a href=#event-handler-idl-attributes>event handler IDL
  attributes</a> that mirror those on the <code><a href=#window>Window</a></code>
  element.</p>

  <p>The <code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code>, <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code>, <code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code>, and <code title=handler-window-onload><a href=#handler-window-onload>onload</a></code> <a href=#event-handler-idl-attributes>event handler IDL
  attributes</a> of the <code><a href=#window>Window</a></code> object, exposed on the
  <code><a href=#frameset>frameset</a></code> element, shadow the generic <a href=#event-handler-idl-attributes>event
  handler IDL attributes</a> with the same names normally supported
  by <a href=#html-elements>HTML elements</a>.</p>

  <hr><p>The <dfn id=frame><code>frame</code></dfn> element defines a <a href=#nested-browsing-context>nested
  browsing context</a> similar to the <code><a href=#the-iframe-element>iframe</a></code> element,
  but rendered within a <code><a href=#frameset>frameset</a></code> element.</p>

  <p>When the browsing context is created, if a <code title=attr-frame-src>src</code> attribute is present, the user
  agent must <a href=#resolve-a-url title="resolve a url">resolve</a> the value of
  that attribute, relative to the element, and if that is successful,
  must then <a href=#navigate>navigate</a> the element's browsing context to
  the resulting <a href=#absolute-url>absolute URL</a>, with <a href=#replacement-enabled>replacement
  enabled</a>, and with the <code><a href=#frame>frame</a></code> element's
  document's <a href=#browsing-context>browsing context</a> as the <a href=#source-browsing-context>source
  browsing context</a>.</p>

  <p>Whenever the <code title=attr-frame-src>src</code> attribute
  is set, the user agent must <a href=#resolve-a-url title="resolve a
  url">resolve</a> the value of that attribute, relative to the
  element, and if that is successful, the nested <a href=#browsing-context>browsing
  context</a> must be <a href=#navigate title=navigate>navigated</a> to
  the resulting <a href=#absolute-url>absolute URL</a>, with the
  <code><a href=#frame>frame</a></code> element's document's <a href=#browsing-context>browsing
  context</a> as the <a href=#source-browsing-context>source browsing context</a>.</p>

  <p>When the browsing context is created, if a <code title=attr-frame-name>name</code> attribute is present, the
  <a href=#browsing-context-name>browsing context name</a> must be set to the value of this
  attribute; otherwise, the <a href=#browsing-context-name>browsing context name</a> must be
  set to the empty string.</p>

  <p>Whenever the <code title=attr-frame-name>name</code> attribute
  is set, the nested <a href=#browsing-context>browsing context</a>'s <a href=#browsing-context-name title="browsing context name">name</a> must be changed to the new
  value. If the attribute is removed, the <a href=#browsing-context-name>browsing context
  name</a> must be set to the empty string.</p>

  <p>When content loads in a <code><a href=#frame>frame</a></code>, after any <code title=event-load>load</code> events are fired within the content
  itself, the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
  a simple event</a> named <code title=event-load>load</code> at
  the <code><a href=#frame>frame</a></code> element. When content fails to load (e.g. due
  to a network error), then the user agent must <a href=#queue-a-task>queue a
  task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the element instead.</p>

  <p>The <a href=#task-source>task source</a> for the <a href=#concept-task title=concept-task>tasks</a> above is the <a href=#dom-manipulation-task-source>DOM
  manipulation task source</a>.</p>

  <p>When there is an <a href=#active-parser>active parser</a> in the
  <code><a href=#frame>frame</a></code>, and when anything in the <code><a href=#frame>frame</a></code> is
  <a href=#delay-the-load-event title="delay the load event">delaying the load event</a> of
  the <code><a href=#frame>frame</a></code>'s <a href=#browsing-context>browsing context</a>'s
  <a href=#active-document>active document</a>, the <code><a href=#frame>frame</a></code> must
  <a href=#delay-the-load-event>delay the load event</a> of its document.</p>

  <p>The <code><a href=#frame>frame</a></code> element must implement the
  <code><a href=#htmlframeelement>HTMLFrameElement</a></code> interface.</p>

  <pre class=idl>interface <dfn id=htmlframeelement>HTMLFrameElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-frame-frameborder title=dom-frame-frameBorder>frameBorder</a>;
           attribute DOMString <a href=#dom-frame-longdesc title=dom-frame-longDesc>longDesc</a>;
           attribute DOMString <a href=#dom-frame-marginheight title=dom-frame-marginHeight>marginHeight</a>;
           attribute DOMString <a href=#dom-frame-marginwidth title=dom-frame-marginWidth>marginWidth</a>;
           attribute DOMString <a href=#dom-frame-name title=dom-frame-name>name</a>;
           attribute boolean <a href=#dom-frame-noresize title=dom-frame-noResize>noResize</a>;
           attribute DOMString <a href=#dom-frame-scrolling title=dom-frame-scrolling>scrolling</a>;
           attribute DOMString <a href=#dom-frame-src title=dom-frame-src>src</a>;
  readonly attribute Document <a href=#dom-frame-contentdocument title=dom-frame-contentDocument>contentDocument</a>;
};</pre>

  <p>The <dfn id=dom-frame-name title=dom-frame-name><code>name</code></dfn>, <dfn id=dom-frame-scrolling title=dom-frame-scrolling><code>scrolling</code></dfn>, and <dfn id=dom-frame-src title=dom-frame-src><code>src</code></dfn> IDL attributes of the
  <code><a href=#frame>frame</a></code> element must <a href=#reflect>reflect</a> the respective
  content attributes of the same name.</p>

  <p>The <dfn id=dom-frame-frameborder title=dom-frame-frameBorder><code>frameBorder</code></dfn> IDL
  attribute of the <code><a href=#frame>frame</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-frame-frameborder>frameborder</code> content
  attribute.</p>

  <p>The <dfn id=dom-frame-longdesc title=dom-frame-longDesc><code>longDesc</code></dfn>
  IDL attribute of the <code><a href=#frame>frame</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-frame-longdesc>longdesc</code> content attribute.</p>

  <p>The <dfn id=dom-frame-marginheight title=dom-frame-marginHeight><code>marginHeight</code></dfn> IDL
  attribute of the <code><a href=#frame>frame</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-frame-marginheight>marginheight</code> content
  attribute.</p>

  <p>The <dfn id=dom-frame-marginwidth title=dom-frame-marginWidth><code>marginWidth</code></dfn> IDL
  attribute of the <code><a href=#frame>frame</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-frame-marginwidth>marginwidth</code> content
  attribute.</p>

  <p>The <dfn id=dom-frame-noresize title=dom-frame-noResize><code>noResize</code></dfn>
  IDL attribute of the <code><a href=#frame>frame</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-frame-noresize>noresize</code> content attribute.</p>

  <p>The <dfn id=dom-frame-contentdocument title=dom-frame-contentDocument><code>contentDocument</code></dfn>
  IDL attribute of the <code><a href=#frame>frame</a></code> element must return the
  <code><a href=#document>Document</a></code> object of the <a href=#active-document>active document</a> of
  the <code><a href=#frame>frame</a></code> element's <a href=#nested-browsing-context>nested browsing
  context</a>.</p>



  <h4 id=other-elements,-attributes-and-apis><span class=secno>13.3.4 </span>Other elements, attributes and APIs</h4> <!-- alphabetical by name and attribute -->

  <p>User agents must treat <code><a href=#acronym>acronym</a></code> elements in a manner
  equivalent to <code><a href=#the-abbr-element>abbr</a></code> elements.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlanchorelement>HTMLAnchorElement</a> {
           attribute DOMString <a href=#dom-a-coords title=dom-a-coords>coords</a>;
           attribute DOMString <a href=#dom-a-charset title=dom-a-charset>charset</a>;
           attribute DOMString <a href=#dom-a-name title=dom-a-name>name</a>;
           attribute DOMString <a href=#dom-a-rev title=dom-a-rev>rev</a>;
           attribute DOMString <a href=#dom-a-shape title=dom-a-shape>shape</a>;
};</pre>

  <p>The <dfn id=dom-a-coords title=dom-a-coords><code>coords</code></dfn>, <dfn id=dom-a-charset title=dom-a-charset><code>charset</code></dfn>, <dfn id=dom-a-name title=dom-a-name><code>name</code></dfn>, <dfn id=dom-a-rev title=dom-a-rev><code>rev</code></dfn>, and <dfn id=dom-a-shape title=dom-a-shape><code>shape</code></dfn> IDL attributes of the
  <code><a href=#the-a-element>a</a></code> element must <a href=#reflect>reflect</a> the respective
  content attributes of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlareaelement>HTMLAreaElement</a> {
           attribute boolean <a href=#dom-area-nohref title=dom-area-noHref>noHref</a>;
};</pre>

  <p>The <dfn id=dom-area-nohref title=dom-area-noHref><code>noHref</code></dfn> IDL
  attribute of the <code><a href=#the-area-element>area</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-area-nohref><a href=#attr-area-nohref>nohref</a></code> content
  attribute.</p>

  <hr><p>The <code><a href=#basefont>basefont</a></code> element must implement the
  <code><a href=#htmlbasefontelement>HTMLBaseFontElement</a></code> interface.</p>

  <pre class=idl>interface <dfn id=htmlbasefontelement>HTMLBaseFontElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-basefont-color title=dom-basefont-color>color</a>;
           attribute DOMString <a href=#dom-basefont-face title=dom-basefont-face>face</a>;
           attribute long <a href=#dom-basefont-size title=dom-basefont-size>size</a>; <!-- yes, long, not DOMString (so says DOM2 HTML) -->
};</pre>

  <p>The <dfn id=dom-basefont-color title=dom-basefont-color><code>color</code></dfn>,
  <dfn id=dom-basefont-face title=dom-basefont-face><code>face</code></dfn>, and <dfn id=dom-basefont-size title=dom-basefont-size><code>size</code></dfn> IDL attributes of
  the <code><a href=#basefont>basefont</a></code> element must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlbodyelement>HTMLBodyElement</a> {
           attribute DOMString <a href=#dom-body-text title=dom-body-text>text</a>;
           attribute DOMString <a href=#dom-body-bgcolor title=dom-body-bgColor>bgColor</a>;
           attribute DOMString <a href=#dom-body-background title=dom-body-background>background</a>;
           attribute DOMString <a href=#dom-body-link title=dom-body-link>link</a>;
           attribute DOMString <a href=#dom-body-vlink title=dom-body-vLink>vLink</a>;
           attribute DOMString <a href=#dom-body-alink title=dom-body-aLink>aLink</a>;
};</pre>

  <p>The <dfn id=dom-body-text title=dom-body-text><code>text</code></dfn> IDL
  attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-body-text><a href=#attr-body-text>text</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-body-bgcolor title=dom-body-bgColor><code>bgColor</code></dfn> IDL
  attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-body-bgcolor><a href=#attr-body-bgcolor>bgcolor</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-body-background title=dom-body-background><code>background</code></dfn> IDL
  attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-background><a href=#attr-background>background</a></code>
  content attribute. (The <code title=attr-background><a href=#attr-background>background</a></code> content is <em>not</em>
  defined to contain a <a href=#url>URL</a>, despite rules regarding its
  handling in the rendering section above.)</p>

  <p>The <dfn id=dom-body-link title=dom-body-link><code>link</code></dfn> IDL
  attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-body-link><a href=#attr-body-link>link</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-body-alink title=dom-body-aLink><code>aLink</code></dfn> IDL
  attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-body-alink><a href=#attr-body-alink>alink</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-body-vlink title=dom-body-vLink><code>vLink</code></dfn> IDL
  attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-body-vlink><a href=#attr-body-vlink>vlink</a></code> content
  attribute.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlbrelement>HTMLBRElement</a> {
           attribute DOMString <a href=#dom-br-clear title=dom-br-clear>clear</a>;
};</pre>

  <p>The <dfn id=dom-br-clear title=dom-br-clear><code>clear</code></dfn> IDL
  attribute of the <code><a href=#the-br-element>br</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmltablecaptionelement>HTMLTableCaptionElement</a> {
           attribute DOMString <a href=#dom-caption-align title=dom-caption-align>align</a>;
};</pre>

  <p>The <dfn id=dom-caption-align title=dom-caption-align><code>align</code></dfn> IDL
  attribute of the <code><a href=#the-caption-element>caption</a></code> element must
  <a href=#reflect>reflect</a> the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmltablecolelement>HTMLTableColElement</a> {
           attribute DOMString <a href=#dom-col-align title=dom-col-align>align</a>;
           attribute DOMString <a href=#dom-col-ch title=dom-col-ch>ch</a>;
           attribute DOMString <a href=#dom-col-choff title=dom-col-chOff>chOff</a>;
           attribute DOMString <a href=#dom-col-valign title=dom-col-vAlign>vAlign</a>;
           attribute DOMString <a href=#dom-col-width title=dom-col-width>width</a>;
};</pre>

  <p>The <dfn id=dom-col-align title=dom-col-align><code>align</code></dfn> and <dfn id=dom-col-width title=dom-col-width><code>width</code></dfn> IDL attributes of
  the <code><a href=#the-col-element>col</a></code> element must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>

  <p>The <dfn id=dom-col-ch title=dom-col-ch><code>ch</code></dfn> IDL attribute
  of the <code><a href=#the-col-element>col</a></code> element must <a href=#reflect>reflect</a> the
  element's <code title=attr-col-char><a href=#attr-col-char>char</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-col-choff title=dom-col-chOff><code>chOff</code></dfn> IDL
  attribute of the <code><a href=#the-col-element>col</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-col-charoff><a href=#attr-col-charoff>charoff</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-col-valign title=dom-col-vAlign><code>vAlign</code></dfn> IDL
  attribute of the <code><a href=#the-col-element>col</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-col-valign><a href=#attr-col-valign>valign</a></code> content
  attribute.</p>

  <hr><p>User agents must treat <code><a href=#dir>dir</a></code> elements in a manner
  equivalent to <code><a href=#the-ul-element>ul</a></code> elements.</p>

  <p>The <code><a href=#dir>dir</a></code> element must implement the
  <code><a href=#htmldirectoryelement>HTMLDirectoryElement</a></code> interface.</p>

  <pre class=idl>interface <dfn id=htmldirectoryelement>HTMLDirectoryElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute boolean <a href=#dom-dir-compact title=dom-dir-compact>compact</a>;
};</pre>

  <p>The <dfn id=dom-dir-compact title=dom-dir-compact><code>compact</code></dfn> IDL
  attribute of the <code><a href=#dir>dir</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmldivelement>HTMLDivElement</a> {
           attribute DOMString <a href=#dom-div-align title=dom-div-align>align</a>;
};</pre>

  <p>The <dfn id=dom-div-align title=dom-div-align><code>align</code></dfn> IDL
  attribute of the <code><a href=#the-div-element>div</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmldlistelement>HTMLDListElement</a> {
           attribute boolean <a href=#dom-dl-compact title=dom-dl-compact>compact</a>;
};</pre>

  <p>The <dfn id=dom-dl-compact title=dom-dl-compact><code>compact</code></dfn> IDL
  attribute of the <code><a href=#the-dl-element>dl</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlembedelement>HTMLEmbedElement</a> {
           attribute DOMString <a href=#dom-embed-align title=dom-embed-align>align</a>;
           attribute DOMString <a href=#dom-embed-name title=dom-embed-name>name</a>;
};</pre>

  <p>The <dfn id=dom-embed-name title=dom-embed-name><code>name</code></dfn> and <dfn id=dom-embed-align title=dom-embed-align><code>align</code></dfn> IDL attributes of
  the <code><a href=#the-embed-element>embed</a></code> element must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>

  <hr><p>The <code><a href=#font>font</a></code> element must implement the
  <code><a href=#htmlfontelement>HTMLFontElement</a></code> interface.</p>

  <pre class=idl>interface <dfn id=htmlfontelement>HTMLFontElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
           attribute DOMString <a href=#dom-font-color title=dom-font-color>color</a>;
           attribute DOMString <a href=#dom-font-face title=dom-font-face>face</a>;
           attribute DOMString <a href=#dom-font-size title=dom-font-size>size</a>; <!-- yes, DOMString, not long (so says DOM2 HTML) -->
};</pre>

  <p>The <dfn id=dom-font-color title=dom-font-color><code>color</code></dfn>,
  <dfn id=dom-font-face title=dom-font-face><code>face</code></dfn>, and <dfn id=dom-font-size title=dom-font-size><code>size</code></dfn> IDL attributes of
  the <code><a href=#font>font</a></code> element must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlheadingelement>HTMLHeadingElement</a> {
           attribute DOMString <a href=#dom-hx-align title=dom-hx-align>align</a>;
};</pre>

  <p>The <dfn id=dom-hx-align title=dom-hx-align><code>align</code></dfn> IDL
  attribute of the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements must
  <a href=#reflect>reflect</a> the content attribute of the same name.</p>

  <hr><p class=note>The <dfn id=dom-head-profile title=dom-head-profile><code>profile</code></dfn> IDL attribute on
  <code><a href=#the-head-element-0>head</a></code> elements (with the <code><a href=#htmlheadelement>HTMLHeadElement</a></code>
  interface) is intentionally omitted. Unless so required by <a href=#other-applicable-specifications title="other applicable specifications">another applicable
  specification</a>, implementations would therefore not support
  this attribute. (It is mentioned here as it was defined in a
  previous version of the DOM specifications.)</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlhrelement>HTMLHRElement</a> {
           attribute DOMString <a href=#dom-hr-align title=dom-hr-align>align</a>;
           attribute DOMString <a href=#dom-hr-color title=dom-hr-color>color</a>;
           attribute boolean <a href=#dom-hr-noshade title=dom-hr-noShade>noShade</a>;
           attribute DOMString <a href=#dom-hr-size title=dom-hr-size>size</a>;
           attribute DOMString <a href=#dom-hr-width title=dom-hr-width>width</a>;
};</pre>

  <p>The <dfn id=dom-hr-align title=dom-hr-align><code>align</code></dfn>, <dfn id=dom-hr-color title=dom-hr-color><code>color</code></dfn>, <dfn id=dom-hr-size title=dom-hr-size><code>size</code></dfn>, and <dfn id=dom-hr-width title=dom-hr-width><code>width</code></dfn> IDL attributes of the
  <code><a href=#the-hr-element>hr</a></code> element must <a href=#reflect>reflect</a> the respective
  content attributes of the same name.</p>

  <p>The <dfn id=dom-hr-noshade title=dom-hr-noShade><code>noShade</code></dfn> IDL
  attribute of the <code><a href=#the-hr-element>hr</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-input-noshade>noshade</code>
  content attribute.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlhtmlelement>HTMLHtmlElement</a> {
           attribute DOMString <a href=#dom-html-version title=dom-html-version>version</a>;
};</pre>

  <p>The <dfn id=dom-html-version title=dom-html-version><code>version</code></dfn> IDL
  attribute of the <code><a href=#the-html-element-0>html</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmliframeelement>HTMLIFrameElement</a> {
           attribute DOMString <a href=#dom-iframe-align title=dom-iframe-align>align</a>;
           attribute DOMString <a href=#dom-iframe-frameborder title=dom-iframe-frameBorder>frameBorder</a>;
           attribute DOMString <a href=#dom-iframe-longdesc title=dom-iframe-longDesc>longDesc</a>;
           attribute DOMString <a href=#dom-iframe-marginheight title=dom-iframe-marginHeight>marginHeight</a>;
           attribute DOMString <a href=#dom-iframe-marginwidth title=dom-iframe-marginWidth>marginWidth</a>;
           attribute DOMString <a href=#dom-iframe-scrolling title=dom-iframe-scrolling>scrolling</a>;
};</pre>

  <p>The <dfn id=dom-iframe-align title=dom-iframe-align><code>align</code></dfn> and
  <dfn id=dom-iframe-scrolling title=dom-iframe-scrolling><code>scrolling</code></dfn> IDL
  attributes of the <code><a href=#the-iframe-element>iframe</a></code> element must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  <p>The <dfn id=dom-iframe-frameborder title=dom-iframe-frameBorder><code>frameBorder</code></dfn> IDL
  attribute of the <code><a href=#the-iframe-element>iframe</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-iframe-frameborder><a href=#attr-iframe-frameborder>frameborder</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-iframe-longdesc title=dom-iframe-longDesc><code>longDesc</code></dfn>
  IDL attribute of the <code><a href=#the-iframe-element>iframe</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-iframe-longdesc><a href=#attr-iframe-longdesc>longdesc</a></code> content attribute.</p>

  <p>The <dfn id=dom-iframe-marginheight title=dom-iframe-marginHeight><code>marginHeight</code></dfn> IDL
  attribute of the <code><a href=#the-iframe-element>iframe</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-iframe-marginheight><a href=#attr-iframe-marginheight>marginheight</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-iframe-marginwidth title=dom-iframe-marginWidth><code>marginWidth</code></dfn> IDL
  attribute of the <code><a href=#the-iframe-element>iframe</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-iframe-marginwidth><a href=#attr-iframe-marginwidth>marginwidth</a></code> content
  attribute.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlimageelement>HTMLImageElement</a> {
           attribute DOMString <a href=#dom-img-name title=dom-img-name>name</a>;
           attribute DOMString <a href=#dom-img-align title=dom-img-align>align</a>;
           attribute DOMString <a href=#dom-img-border title=dom-img-border>border</a>;
           attribute unsigned long <a href=#dom-img-hspace title=dom-img-hspace>hspace</a>;
           attribute DOMString <a href=#dom-img-longdesc title=dom-img-longDesc>longDesc</a>;
           attribute unsigned long <a href=#dom-img-vspace title=dom-img-vspace>vspace</a>;
};</pre>

  <p>The <dfn id=dom-img-name title=dom-img-name><code>name</code></dfn>, <dfn id=dom-img-align title=dom-img-align><code>align</code></dfn>, <dfn id=dom-img-border title=dom-img-border><code>border</code></dfn>, <dfn id=dom-img-hspace title=dom-img-hspace><code>hspace</code></dfn>, and <dfn id=dom-img-vspace title=dom-img-vspace><code>vspace</code></dfn> IDL attributes of
  the <code><a href=#the-img-element>img</a></code> element must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>

  <p>The <dfn id=dom-img-longdesc title=dom-img-longDesc><code>longDesc</code></dfn> IDL
  attribute of the <code><a href=#the-img-element>img</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-img-longdesc><a href=#attr-img-longdesc>longdesc</a></code> content
  attribute.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlinputelement>HTMLInputElement</a> {
           attribute DOMString <a href=#dom-input-align title=dom-input-align>align</a>;
           attribute DOMString <a href=#dom-input-usemap title=dom-input-useMap>useMap</a>;
};</pre>

  <p>The <dfn id=dom-input-align title=dom-input-align><code>align</code></dfn> IDL
  attribute of the <code><a href=#the-input-element>input</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <p>The <dfn id=dom-input-usemap title=dom-input-useMap><code>useMap</code></dfn> IDL
  attribute of the <code><a href=#the-input-element>input</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-input-usemap><a href=#attr-input-usemap>usemap</a></code> content attribute.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmllegendelement>HTMLLegendElement</a> {
           attribute DOMString <a href=#dom-legend-align title=dom-legend-align>align</a>;
};</pre>

  <p>The <dfn id=dom-legend-align title=dom-legend-align><code>align</code></dfn> IDL
  attribute of the <code><a href=#the-legend-element>legend</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmllielement>HTMLLIElement</a> {
           attribute DOMString <a href=#dom-li-type title=dom-li-type>type</a>;
};</pre>

  <p>The <dfn id=dom-li-type title=dom-li-type><code>type</code></dfn> IDL
  attribute of the <code><a href=#the-li-element>li</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmllinkelement>HTMLLinkElement</a> {
           attribute DOMString <a href=#dom-link-charset title=dom-link-charset>charset</a>;
           attribute DOMString <a href=#dom-link-rev title=dom-link-rev>rev</a>;
           attribute DOMString <a href=#dom-link-target title=dom-link-target>target</a>;
};</pre>

  <p>The <dfn id=dom-link-charset title=dom-link-charset><code>charset</code></dfn>,
  <dfn id=dom-link-rev title=dom-link-rev><code>rev</code></dfn>, and <dfn id=dom-link-target title=dom-link-target><code>target</code></dfn> IDL attributes of
  the <code><a href=#the-link-element>link</a></code> element must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>

  <hr><p>User agents must treat <code><a href=#listing>listing</a></code> elements in a manner
  equivalent to <code><a href=#the-pre-element>pre</a></code> elements.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlmenuelement>HTMLMenuElement</a> {
           attribute boolean <a href=#dom-menu-compact title=dom-menu-compact>compact</a>;
};</pre>

  <p>The <dfn id=dom-menu-compact title=dom-menu-compact><code>compact</code></dfn> IDL
  attribute of the <code><a href=#menus>menu</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlmetaelement>HTMLMetaElement</a> {
           attribute DOMString <a href=#dom-meta-scheme title=dom-meta-scheme>scheme</a>;
};</pre>

  <p>User agents may treat the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> content attribute on the
  <code><a href=#meta>meta</a></code> element as an extension of the element's <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> content attribute when processing
  a <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute whose value is one that
  the user agent recognizes as supporting the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute.</p>

  <p>User agents are encouraged to ignore the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute and instead process
  the value given to the metadata name as if it had been specified for
  each expected value of the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute.</p>

  <div class=example>

   <p>For example, if the user agent acts on <code><a href=#meta>meta</a></code>
   elements with <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attributes
   having the value "eGMS.subject.keyword", and knows that the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute is used with this
   metadata name, then it could take the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute into account,
   acting as if it was an extension of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute. Thus the following
   two <code><a href=#meta>meta</a></code> elements could be treated as two elements
   giving values for two different metadata names, one consisting of a
   combination of "eGMS.subject.keyword" and "LGCL", and the other
   consisting of a combination of "eGMS.subject.keyword" and
   "ORLY":</p>

   <pre class=bad>&lt;!-- this markup is invalid --&gt;
&lt;meta name="eGMS.subject.keyword" scheme="LGCL" content="Abandoned vehicles"&gt;
&lt;meta name="eGMS.subject.keyword" scheme="ORLY" content="Mah car: kthxbye"&gt;</pre>

   <p>The recommended processing of this markup, however, would be
   equivalent to the following:</p>

   <pre>&lt;meta name="eGMS.subject.keyword" content="Abandoned vehicles"&gt;
&lt;meta name="eGMS.subject.keyword" content="Mah car: kthxbye"&gt;</pre>

  </div>

  <p>The <dfn id=dom-meta-scheme title=dom-meta-scheme><code>scheme</code></dfn> IDL
  attribute of the <code><a href=#meta>meta</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlobjectelement>HTMLObjectElement</a> {
           attribute DOMString <a href=#dom-object-align title=dom-object-align>align</a>;
           attribute DOMString <a href=#dom-object-archive title=dom-object-archive>archive</a>;
           attribute DOMString <a href=#dom-object-border title=dom-object-border>border</a>;
           attribute DOMString <a href=#dom-object-code title=dom-object-code>code</a>;
           attribute DOMString <a href=#dom-object-codebase title=dom-object-codeBase>codeBase</a>;
           attribute DOMString <a href=#dom-object-codetype title=dom-object-codeType>codeType</a>;
           attribute boolean <a href=#dom-object-declare title=dom-object-declare>declare</a>;
           attribute unsigned long <a href=#dom-object-hspace title=dom-object-hspace>hspace</a>;
           attribute DOMString <a href=#dom-object-standby title=dom-object-standby>standby</a>;
           attribute unsigned long <a href=#dom-object-vspace title=dom-object-vspace>vspace</a>;
};</pre>

  <p>The <dfn id=dom-object-align title=dom-object-align><code>align</code></dfn>, <dfn id=dom-object-archive title=dom-object-archive><code>archive</code></dfn>, <dfn id=dom-object-border title=dom-object-border><code>border</code></dfn>, <dfn id=dom-object-code title=dom-object-code><code>code</code></dfn>, <dfn id=dom-object-declare title=dom-object-declare><code>declare</code></dfn>, <dfn id=dom-object-hspace title=dom-object-hspace><code>hspace</code></dfn>, <dfn id=dom-object-standby title=dom-object-standby><code>standby</code></dfn>, and <dfn id=dom-object-vspace title=dom-object-vspace><code>vspace</code></dfn> IDL attributes
  of the <code><a href=#the-object-element>object</a></code> element must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>

  <p>The <dfn id=dom-object-codebase title=dom-object-codeBase><code>codeBase</code></dfn> IDL
  attribute of the <code><a href=#the-object-element>object</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-object-codebase><a href=#attr-object-codebase>codebase</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-object-codetype title=dom-object-codeType><code>codeType</code></dfn> IDL
  attribute of the <code><a href=#the-object-element>object</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-object-codetype><a href=#attr-object-codetype>codetype</a></code> content
  attribute.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlolistelement>HTMLOListElement</a> {
           attribute boolean <a href=#dom-ol-compact title=dom-ol-compact>compact</a>;
           attribute DOMString <a href=#dom-ol-type title=dom-ol-type>type</a>;
};</pre>

  <p>The <dfn id=dom-ol-compact title=dom-ol-compact><code>compact</code></dfn> and
  <dfn id=dom-ol-type title=dom-ol-type><code>type</code></dfn> IDL attributes of
  the <code><a href=#the-ol-element>ol</a></code> element must <a href=#reflect>reflect</a> the respective
  content attributes of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlparagraphelement>HTMLParagraphElement</a> {
           attribute DOMString <a href=#dom-p-align title=dom-p-align>align</a>;
};</pre>

  <p>The <dfn id=dom-p-align title=dom-p-align><code>align</code></dfn> IDL
  attribute of the <code><a href=#the-p-element>p</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlparamelement>HTMLParamElement</a> {
           attribute DOMString <a href=#dom-param-type title=dom-param-type>type</a>;
           attribute DOMString <a href=#dom-param-valuetype title=dom-param-valueType>valueType</a>;
};</pre>

  <p>The <dfn id=dom-param-type title=dom-param-type><code>type</code></dfn> IDL
  attribute of the <code><a href=#the-param-element>param</a></code> element must
  <a href=#reflect>reflect</a> the content attribute of the same name.</p>

  <p>The <dfn id=dom-param-valuetype title=dom-param-valueType><code>valueType</code></dfn>
  IDL attribute of the <code><a href=#the-param-element>param</a></code> element must
  <a href=#reflect>reflect</a> the element's <code title=attr-param-valuetype><a href=#attr-param-valuetype>valuetype</a></code> content attribute.</p>

  <hr><p>User agents must treat <code><a href=#plaintext>plaintext</a></code> elements in a
  manner equivalent to <code><a href=#the-pre-element>pre</a></code> elements.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlpreelement>HTMLPreElement</a> {
           attribute unsigned long <a href=#dom-pre-width title=dom-pre-width>width</a>;
};</pre>

  <p>The <dfn id=dom-pre-width title=dom-pre-width><code>width</code></dfn> IDL
  attribute of the <code><a href=#the-pre-element>pre</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlscriptelement>HTMLScriptElement</a> {
           attribute DOMString <a href=#dom-script-event title=dom-script-event>event</a>;
           attribute DOMString <a href=#dom-script-htmlfor title=dom-script-htmlFor>htmlFor</a>;
};</pre>

  <p>The <dfn id=dom-script-event title=dom-script-event><code>event</code></dfn> and
  <dfn id=dom-script-htmlfor title=dom-script-htmlFor><code>htmlFor</code></dfn> IDL
  attributes of the <code><a href=#script>script</a></code> element must return the empty
  string on getting, and do nothing on setting.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmltableelement>HTMLTableElement</a> {
           attribute DOMString <a href=#dom-table-align title=dom-table-align>align</a>;
           attribute DOMString <a href=#dom-table-bgcolor title=dom-table-bgColor>bgColor</a>;
           attribute DOMString <a href=#dom-table-border title=dom-table-border>border</a>;
           attribute DOMString <a href=#dom-table-cellpadding title=dom-table-cellPadding>cellPadding</a>;
           attribute DOMString <a href=#dom-table-cellspacing title=dom-table-cellSpacing>cellSpacing</a>;
           attribute DOMString <a href=#dom-table-frame title=dom-table-frame>frame</a>;
           attribute DOMString <a href=#dom-table-rules title=dom-table-rules>rules</a>;
           attribute DOMString <a href=#dom-table-width title=dom-table-width>width</a>;
};</pre>

  <p>The <dfn id=dom-table-align title=dom-table-align><code>align</code></dfn>, <dfn id=dom-table-border title=dom-table-border><code>border</code></dfn>, <dfn id=dom-table-frame title=dom-table-frame><code>frame</code></dfn>, <dfn id=dom-table-rules title=dom-table-rules><code>rules</code></dfn>, and <dfn id=dom-table-width title=dom-table-width><code>width</code></dfn>, IDL attributes of
  the <code><a href=#the-table-element>table</a></code> element must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>

  <p>The <dfn id=dom-table-bgcolor title=dom-table-bgColor><code>bgColor</code></dfn> IDL
  attribute of the <code><a href=#the-table-element>table</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-table-bgcolor><a href=#attr-table-bgcolor>bgcolor</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-table-cellpadding title=dom-table-cellPadding><code>cellPadding</code></dfn> IDL
  attribute of the <code><a href=#the-table-element>table</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-table-cellpadding><a href=#attr-table-cellpadding>cellpadding</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-table-cellspacing title=dom-table-cellSpacing><code>cellSpacing</code></dfn> IDL
  attribute of the <code><a href=#the-table-element>table</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-table-cellspacing><a href=#attr-table-cellspacing>cellspacing</a></code> content
  attribute.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmltablesectionelement>HTMLTableSectionElement</a> {
           attribute DOMString <a href=#dom-tbody-align title=dom-tbody-align>align</a>;
           attribute DOMString <a href=#dom-tbody-ch title=dom-tbody-ch>ch</a>;
           attribute DOMString <a href=#dom-tbody-choff title=dom-tbody-chOff>chOff</a>;
           attribute DOMString <a href=#dom-tbody-valign title=dom-tbody-vAlign>vAlign</a>;
};</pre>

  <p>The <dfn id=dom-tbody-align title=dom-tbody-align><code>align</code></dfn> IDL
  attribute of the <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
  <code><a href=#the-tfoot-element>tfoot</a></code> elements must <a href=#reflect>reflect</a> the content
  attribute of the same name.</p>

  <p>The <dfn id=dom-tbody-ch title=dom-tbody-ch><code>ch</code></dfn> IDL attribute
  of the <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
  <code><a href=#the-tfoot-element>tfoot</a></code> elements must <a href=#reflect>reflect</a> the elements'
  <code title=attr-tbody-char><a href=#attr-tbody-char>char</a></code> content attributes.</p>

  <p>The <dfn id=dom-tbody-choff title=dom-tbody-chOff><code>chOff</code></dfn> IDL
  attribute of the <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
  <code><a href=#the-tfoot-element>tfoot</a></code> elements must <a href=#reflect>reflect</a> the elements'
  <code title=attr-tbody-charoff><a href=#attr-tbody-charoff>charoff</a></code> content attributes.</p>

  <p>The <dfn id=dom-tbody-valign title=dom-tbody-vAlign><code>vAlign</code></dfn> IDL
  attribute of the <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
  <code><a href=#the-tfoot-element>tfoot</a></code> element must <a href=#reflect>reflect</a> the elements'
  <code title=attr-tbody-valign><a href=#attr-tbody-valign>valign</a></code> content
  attributes.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmltablecellelement>HTMLTableCellElement</a> {
           attribute DOMString <a href=#dom-tdth-abbr title=dom-tdth-abbr>abbr</a>;
           attribute DOMString <a href=#dom-tdth-align title=dom-tdth-align>align</a>;
           attribute DOMString <a href=#dom-tdth-axis title=dom-tdth-axis>axis</a>;
           attribute DOMString <a href=#dom-tdth-bgcolor title=dom-tdth-bgColor>bgColor</a>;
           attribute DOMString <a href=#dom-tdth-ch title=dom-tdth-ch>ch</a>;
           attribute DOMString <a href=#dom-tdth-choff title=dom-tdth-chOff>chOff</a>;
           attribute DOMString <a href=#dom-tdth-height title=dom-tdth-height>height</a>;
           attribute boolean <a href=#dom-tdth-nowrap title=dom-tdth-noWrap>noWrap</a>;
           attribute DOMString <a href=#dom-tdth-valign title=dom-tdth-vAlign>vAlign</a>;
           attribute DOMString <a href=#dom-tdth-width title=dom-tdth-width>width</a>;
};</pre>

  <p>The <dfn id=dom-tdth-abbr title=dom-tdth-abbr><code>abbr</code></dfn>, <dfn id=dom-tdth-align title=dom-tdth-align><code>align</code></dfn>, <dfn id=dom-tdth-axis title=dom-tdth-axis><code>axis</code></dfn>, <dfn id=dom-tdth-height title=dom-tdth-height><code>height</code></dfn>, and <dfn id=dom-tdth-width title=dom-tdth-width><code>width</code></dfn> IDL attributes of
  the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name.</p>

  <p>The <dfn id=dom-tdth-bgcolor title=dom-tdth-bgColor><code>bgColor</code></dfn> IDL
  attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
  <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-bgcolor><a href=#attr-tdth-bgcolor>bgcolor</a></code> content attributes.</p>

  <p>The <dfn id=dom-tdth-ch title=dom-tdth-ch><code>ch</code></dfn> IDL
  attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
  <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-char><a href=#attr-tdth-char>char</a></code> content attributes.</p>

  <p>The <dfn id=dom-tdth-choff title=dom-tdth-chOff><code>chOff</code></dfn> IDL
  attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
  <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-charoff><a href=#attr-tdth-charoff>charoff</a></code> content attributes.</p>

  <p>The <dfn id=dom-tdth-nowrap title=dom-tdth-noWrap><code>noWrap</code></dfn> IDL
  attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
  <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-nowrap><a href=#attr-tdth-nowrap>nowrap</a></code> content attributes.</p>

  <p>The <dfn id=dom-tdth-valign title=dom-tdth-vAlign><code>vAlign</code></dfn> IDL
  attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> element must
  <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-valign><a href=#attr-tdth-valign>valign</a></code> content attributes.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmltablerowelement>HTMLTableRowElement</a> {
           attribute DOMString <a href=#dom-tr-align title=dom-tr-align>align</a>;
           attribute DOMString <a href=#dom-tr-bgcolor title=dom-tr-bgColor>bgColor</a>;
           attribute DOMString <a href=#dom-tr-ch title=dom-tr-ch>ch</a>;
           attribute DOMString <a href=#dom-tr-choff title=dom-tr-chOff>chOff</a>;
           attribute DOMString <a href=#dom-tr-valign title=dom-tr-vAlign>vAlign</a>;
};</pre>

  <p>The <dfn id=dom-tr-align title=dom-tr-align><code>align</code></dfn> IDL
  attribute of the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a>
  the content attribute of the same name.</p>

  <p>The <dfn id=dom-tr-bgcolor title=dom-tr-bgColor><code>bgColor</code></dfn> IDL
  attribute of the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-tr-bgcolor><a href=#attr-tr-bgcolor>bgcolor</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-tr-ch title=dom-tr-ch><code>ch</code></dfn> IDL attribute of
  the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a> the element's
  <code title=attr-tr-char><a href=#attr-tr-char>char</a></code> content attribute.</p>

  <p>The <dfn id=dom-tr-choff title=dom-tr-chOff><code>chOff</code></dfn> IDL
  attribute of the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-tr-charoff><a href=#attr-tr-charoff>charoff</a></code> content
  attribute.</p>

  <p>The <dfn id=dom-tr-valign title=dom-tr-vAlign><code>vAlign</code></dfn> IDL
  attribute of the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a>
  the element's <code title=attr-tr-valign><a href=#attr-tr-valign>valign</a></code> content
  attribute.</p>

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmlulistelement>HTMLUListElement</a> {
           attribute boolean <a href=#dom-ul-compact title=dom-ul-compact>compact</a>;
           attribute DOMString <a href=#dom-ul-type title=dom-ul-type>type</a>;
};</pre>

  <p>The <dfn id=dom-ul-compact title=dom-ul-compact><code>compact</code></dfn> and
  <dfn id=dom-ul-type title=dom-ul-type><code>type</code></dfn> IDL attributes of
  the <code><a href=#the-ul-element>ul</a></code> element must <a href=#reflect>reflect</a> the respective
  content attributes of the same name.</p>

  <hr><p>User agents must treat <code><a href=#xmp>xmp</a></code> elements in a manner
  equivalent to <code><a href=#the-pre-element>pre</a></code> elements.</p>

  <hr><p>The <code><a href=#bgsound>bgsound</a></code>, <code><a href=#isindex-0>isindex</a></code>,
  <code><a href=#multicol>multicol</a></code>, <code><a href=#nextid>nextid</a></code>, <code><a href=#rb>rb</a></code>, and
  <code><a href=#spacer>spacer</a></code> elements must use the
  <code><a href=#htmlunknownelement>HTMLUnknownElement</a></code> interface.</p> <!-- has to be
  explicitly listed because technically we define the elements in the
  spec, albeit as obsolete, and then we say that only elements not
  defined in this spec use HTMLUnknownElement. -->

  <hr><pre class=idl>[Supplemental]
interface <a href=#htmldocument>HTMLDocument</a> {
           attribute DOMString <a href=#dom-document-fgcolor title=dom-document-fgColor>fgColor</a>;
           attribute DOMString <a href=#dom-document-bgcolor title=dom-document-bgColor>bgColor</a>;
           attribute DOMString <a href=#dom-document-linkcolor title=dom-document-linkColor>linkColor</a>;
           attribute DOMString <a href=#dom-document-vlinkcolor title=dom-document-vlinkColor>vlinkColor</a>;
           attribute DOMString <a href=#dom-document-alinkcolor title=dom-document-alinkColor>alinkColor</a>;

  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-anchors title=dom-document-anchors>anchors</a>;
  readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-applets title=dom-document-applets>applets</a>;

  void <a href=#dom-document-clear title=dom-document-clear>clear</a>();

  readonly attribute <a href=#htmlallcollection>HTMLAllCollection</a> <a href=#dom-document-all title=dom-document-all>all</a>;
};</pre>

  <p>The attributes of the <code><a href=#document>Document</a></code> object listed in the
  first column of the following table must <a href=#reflect>reflect</a> the
  content attribute on <a href=#the-body-element>the body element</a> with the name
  given in the corresponding cell in the second column on the same
  row, if <a href=#the-body-element>the body element</a> is a <code><a href=#the-body-element-0>body</a></code> element
  (as opposed to a <code><a href=#frameset>frameset</a></code> element). When there is no
  <a href=#the-body-element title="the body element">body element</a> or if it is a
  <code><a href=#frameset>frameset</a></code> element, the attributes must instead return
  the empty string on getting and do nothing on setting.</p>

  <table><thead><tr><th> IDL attribute
     <th> Content attribute
   <tbody><tr><td><dfn id=dom-document-fgcolor title=dom-document-fgColor><code>fgColor</code></dfn>
     <td><code title=attr-body-text><a href=#attr-body-text>text</a></code>
    <tr><td><dfn id=dom-document-bgcolor title=dom-document-bgColor><code>bgColor</code></dfn>
     <td><code title=attr-body-bgcolor><a href=#attr-body-bgcolor>bgcolor</a></code>
    <tr><td><dfn id=dom-document-linkcolor title=dom-document-linkColor><code>linkColor</code></dfn>
     <td><code title=attr-body-link><a href=#attr-body-link>link</a></code>
    <tr><td><dfn id=dom-document-vlinkcolor title=dom-document-vLinkColor><code>vLinkColor</code></dfn>
     <td><code title=attr-body-vlink><a href=#attr-body-vlink>vlink</a></code>
    <tr><td><dfn id=dom-document-alinkcolor title=dom-document-aLinkColor><code>aLinkColor</code></dfn>
     <td><code title=attr-body-alink><a href=#attr-body-alink>alink</a></code>
  </table><hr><p>The <dfn id=dom-document-anchors title=dom-document-anchors><code>anchors</code></dfn>
  attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches only <code><a href=#the-a-element>a</a></code>
  elements with <code title=attr-a-name><a href=#attr-a-name>name</a></code>
  attributes.</p>

  <p>The <dfn id=dom-document-applets title=dom-document-applets><code>applets</code></dfn>
  attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches only
  <code><a href=#the-applet-element>applet</a></code> elements.</p>

  <p>The <dfn id=dom-document-clear title=dom-document-clear><code>clear()</code></dfn>
  method must do nothing.</p>

  <hr><p>The <dfn id=dom-document-all title=dom-document-all><code>all</code></dfn>
  attribute must return an <code><a href=#htmlallcollection>HTMLAllCollection</a></code> rooted at the
  <code><a href=#document>Document</a></code> node, whose filter matches all elements.</p>

  <p>The object returned for <code title=dom-document-all><a href=#dom-document-all>all</a></code>
  has several unusual behaviors:</p>

  <ul><li><p>The user agent must act as if the ToBoolean() operator in
   JavaScript converts the object returned for <code title=dom-document-all><a href=#dom-document-all>all</a></code> to the false value.</li>

   <li><p>The user agent must act as if, for the purposes of the <code title="">==</code> and <code title="">!=</code> operators in
   JavaScript, the object returned for <code title=dom-document-all><a href=#dom-document-all>all</a></code> is equal to the <code title="">undefined</code> value.</li>

   <li><p>The user agent must act such that the <code title="">typeof</code> operator in JavaScript returns the string
   <code title="">undefined</code> when applied to the object returned
   for <code title=dom-document-all><a href=#dom-document-all>all</a></code>.</li>

  </ul><p class=note>These requirements are a <a href=#willful-violation>willful
  violation</a> of the JavaScript specification current at the time
  of writing (ECMAScript edition 3). The JavaScript specification
  requires that the ToBoolean() operator convert all objects to the
  true value, and does not have provisions for objects acting as if
  they were <code title="">undefined</code> for the purposes of
  certain operators. This violation is motivated by a desire for
  compatibility with two classes of legacy content: one that uses the
  presence of <code title=dom-document-all><a href=#dom-document-all>document.all</a></code> as a
  way to detect legacy user agents, and one that only supports those
  legacy user agents and uses the <code title=dom-document-all><a href=#dom-document-all>document.all</a></code> object without testing
  for its presence first. <a href=#refsECMA262>[ECMA262]</a></p>

  </div>




  <h2 id=iana><span class=secno>14 </span>IANA considerations</h2>

  <!-- http://www.w3.org/2002/06/registering-mediatype.html -->



  <h3 id=text/html><span class=secno>14.1 </span><dfn><code>text/html</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type text/html
  -->

  <!--
   Obsoletes:
   http://www.ietf.org/rfc/rfc2854

   Include a request to retire RFC 2854 persuant to section 6.4 of RFC 2026.
  -->

  <dl><dt>Type name:</dt>
   <dd>text</dd>
   <dt>Subtype name:</dt>
   <dd>html</dd>
   <dt>Required parameters:</dt>
   <dd>No required parameters</dd>
   <dt>Optional parameters:</dt>
   <dd>
    <dl><dt><code title="">charset</code></dt>
     <dd>
      <p>The <code title="">charset</code> parameter may be provided
      to definitively specify the <a href="#document's-character-encoding">document's character
      encoding</a>, overriding any <a href=#character-encoding-declaration title="character encoding
      declaration">character encoding declarations</a> in the
      document. The parameter's value must be the name of the
      character encoding used to serialize the file, must be a valid
      character encoding name, and must be an <a href=#ascii-case-insensitive>ASCII
      case-insensitive</a> match for the <a href=#preferred-mime-name>preferred MIME
      name</a> for that encoding. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>
     </dd>
    </dl></dd>
   <dt>Encoding considerations:</dt>
   <dd>See the section on <a href=#character-encoding-declaration title="character encoding
   declaration">character encoding declarations</a>.</dd>
   <dt>Security considerations:</dt>
   <dd>

    <p>Entire novels have been written about the security
    considerations that apply to HTML documents. Many are listed in
    this document, to which the reader is referred for more
    details. Some general concerns bear mentioning here, however:</p>

    <p>HTML is scripted language, and has a large number of APIs (some
    of which are described in this document). Script can expose the
    user to potential risks of information leakage, credential
    leakage, cross-site scripting attacks, cross-site request
    forgeries, and a host of other problems. While the designs in this
    specification are intended to be safe if implemented correctly, a
    full implementation is a massive undertaking and, as with any
    software, user agents are likely to have security bugs.</p>

    <p>Even without scripting, there are specific features in HTML
    which, for historical reasons, are required for broad
    compatibility with legacy content but that expose the user to
    unfortunate security problems. In particular, the <code><a href=#the-img-element>img</a></code>
    element can be used in conjunction with some other features as a
    way to effect a port scan from the user's location on the
    Internet. This can expose local network topologies that the
    attacker would otherwise not be able to determine.</p>

    <p>HTML relies on a compartmentalization scheme sometimes known as
    the <i>same-origin policy</i>. An <a href=#origin>origin</a> in most
    cases consists of all the pages served from the same host, on the
    same port, using the same protocol.</p>

    <p>It is critical, therefore, to ensure that any untrusted content
    that forms part of a site be hosted on a different
    <a href=#origin>origin</a> than any sensitive content on that site.
    Untrusted content can easily spoof any other page on the same
    origin, read data from that origin, cause scripts in that origin
    to execute, submit forms to and from that origin even if they are
    protected from cross-site request forgery attacks by unique
    tokens, and make use of any third-party resources exposed to or
    rights granted to that origin.</p>

   </dd>
   <dt>Interoperability considerations:</dt>
   <dd>
    Rules for processing both conforming and non-conforming content
    are defined in this specification.
   </dd>
   <dt>Published specification:</dt>
   <dd id=authors-using-html>
    This document is the relevant specification. Labeling a resource
    with the <code><a href=#text/html>text/html</a></code> type asserts that the resource is
    an <a href=#html-documents title="HTML documents">HTML document</a> using
    <a href=#syntax>the HTML syntax</a>.
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>
    Web browsers, tools for processing Web content, HTML authoring
    tools, search engines, validators.
   </dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>No sequence of bytes can uniquely identify an HTML
     document. More information on detecting HTML documents is
     available in the Content-Type Processing Model specification. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></dd>
     <dt>File extension(s):</dt>
     <dd>"<code title="">html</code>" and "<code title="">htm</code>"
     are commonly, but certainly not exclusively, used as the
     extension for HTML documents.</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd><code title="">TEXT</code></dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>W3C</dd>
  </dl><p>Fragment identifiers used with <code><a href=#text/html>text/html</a></code> resources
  refer to <a href=#the-indicated-part-of-the-document>the indicated part of the document</a>.</p>


  <h3 id=text/html-sandboxed><span class=secno>14.2 </span><dfn><code>text/html-sandboxed</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type text/html-sandboxed
  -->

  <dl><dt>Type name:</dt>
   <dd>text</dd>
   <dt>Subtype name:</dt>
   <dd>html-sandboxed</dd>
   <dt>Required parameters:</dt>
   <dd>No required parameters</dd>
   <dt>Optional parameters:</dt>
   <dd>Same as for <code><a href=#text/html>text/html</a></code></dd>
   <dt>Encoding considerations:</dt>
   <dd>Same as for <code><a href=#text/html>text/html</a></code></dd>
   <dt>Security considerations:</dt>
   <dd>
    <p>The purpose of the <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> MIME type
    is to provide a way for content providers to indicate that they
    want the file to be interpreted in a manner that does not give the
    file's contents access to the rest of the site. This is achieved
    by assigning the <code><a href=#document>Document</a></code> objects generated from
    resources labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> unique
    origins.</p>
    <p>To avoid having legacy user agents treating resources labeled
    as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> as regular
    <code><a href=#text/html>text/html</a></code> files, authors should avoid using the <code title="">.html</code> or <code title="">.htm</code> extensions for
    resources labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>.</p>
    <p>Beyond this, the type is identical to <code><a href=#text/html>text/html</a></code>,
    and the same considerations apply.</p>
   </dd>
   <dt>Interoperability considerations:</dt>
   <dd>Same as for <code><a href=#text/html>text/html</a></code></dd>
   <dt>Published specification:</dt>
   <dd>
    This document is the relevant specification. Labeling a resource
    with the <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> type asserts that the
    resource is an <a href=#html-documents title="HTML documents">HTML document</a>
    using <a href=#syntax>the HTML syntax</a>.
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>Same as for <code><a href=#text/html>text/html</a></code></dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>Documents labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> are
     heuristically indistinguishable from those labeled as
     <code><a href=#text/html>text/html</a></code>.</dd>
     <dt>File extension(s):</dt>
     <dd>"<code title="">sandboxed</code>"</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd><code title="">TEXT</code></dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>WHATWG</dd>
  </dl><p>Fragment identifiers used with <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>
  resources refer to <a href=#the-indicated-part-of-the-document>the indicated part of the
  document</a>.</p>


  <h3 id=application/xhtml+xml><span class=secno>14.3 </span><dfn><code>application/xhtml+xml</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type application/xhtml+xml
  -->

  <!--
   Obsoletes:
   http://www.ietf.org/rfc/rfc3236.txt
  -->

  <dl><dt>Type name:</dt>
   <dd>application</dd>
   <dt>Subtype name:</dt>
   <dd>xhtml+xml</dd>
   <dt>Required parameters:</dt>
   <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   <dt>Optional parameters:</dt>
   <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   <dt>Encoding considerations:</dt>
   <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   <dt>Security considerations:</dt>
   <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   <dt>Interoperability considerations:</dt>
   <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   <dt id=authors-using-xhtml>Published specification:</dt>
   <dd>
    Labeling a resource with the <code><a href=#application/xhtml+xml>application/xhtml+xml</a></code>
    type asserts that the resource is an XML document that likely has
    a root element from the <a href=#html-namespace-0>HTML namespace</a>. As such, the
    relevant specifications are the XML specification, the Namespaces
    in XML specification, and this specification. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a>
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
     <dt>File extension(s):</dt>
     <dd>"<code title="">xhtml</code>" and "<code title="">xht</code>"
     are sometimes used as extensions for XML resources that have a
     root element from the <a href=#html-namespace-0>HTML namespace</a>.</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd><code title="">TEXT</code></dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>W3C</dd>
  </dl><p>Fragment identifiers used with <code><a href=#application/xhtml+xml>application/xhtml+xml</a></code>
  resources have the same semantics as with any <a href=#xml-mime-type>XML MIME
  type</a>. <a href=#refsRFC3023>[RFC3023]</a></p>


  <h3 id=text/cache-manifest><span class=secno>14.4 </span><dfn><code>text/cache-manifest</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type text/cache-manifest
  -->

  <dl><dt>Type name:</dt>
   <dd>text</dd>
   <dt>Subtype name:</dt>
   <dd>cache-manifest</dd>
   <dt>Required parameters:</dt>
   <dd>No parameters</dd>
   <dt>Optional parameters:</dt>
   <dd>No parameters</dd>
   <dt>Encoding considerations:</dt>
   <dd>Always UTF-8.</dd>
   <dt>Security considerations:</dt>
   <dd>
    <p>Cache manifests themselves pose no immediate risk unless
    sensitive information is included within the
    manifest. Implementations, however, are required to follow
    specific rules when populating a cache based on a cache manifest,
    to ensure that certain origin-based restrictions are
    honored. Failure to correctly implement these rules can result in
    information leakage, cross-site scripting attacks, and the
    like.</p>
   </dd>
   <dt>Interoperability considerations:</dt>
   <dd>
    Rules for processing both conforming and non-conforming content
    are defined in this specification.
   </dd>
   <dt>Published specification:</dt>
   <dd>
    This document is the relevant specification.
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>
    Web browsers.
   </dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>Cache manifests begin with the string "<code title="">CACHE
     MANIFEST</code>", followed by either a U+0020 SPACE character, a
     U+0009 CHARACTER TABULATION (tab) character, a U+000A LINE FEED
     (LF) character, or a U+000D CARRIAGE RETURN (CR) character.</dd>
     <dt>File extension(s):</dt>
     <dd>"<code title="">manifest</code>"</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd>No specific Macintosh file type codes are recommended for this type.</dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>WHATWG</dd>
  </dl><p>Fragment identifiers have no meaning with
  <code><a href=#text/cache-manifest>text/cache-manifest</a></code> resources.</p>


<!--PING-->
  <h3 id=text/ping><span class=secno>14.5 </span><dfn><code>text/ping</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type text/ping
  -->

  <dl><dt>Type name:</dt>
   <dd>text</dd>
   <dt>Subtype name:</dt>
   <dd>ping</dd>
   <dt>Required parameters:</dt>
   <dd>No parameters</dd>
   <dt>Optional parameters:</dt>
   <dd>No parameters</dd>
   <dt>Encoding considerations:</dt>
   <dd>Not applicable.</dd>
   <dt>Security considerations:</dt>
   <dd>
    <p>If used exclusively in the fashion described in the context of
    <a href=#hyperlink-auditing>hyperlink auditing</a>, this type introduces no new
    security concerns.</p>
   </dd>
   <dt>Interoperability considerations:</dt>
   <dd>
    Rules applicable to this type are defined in this specification.
   </dd>
   <dt>Published specification:</dt>
   <dd>
    This document is the relevant specification.
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>
    Web browsers.
   </dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd><code><a href=#text/ping>text/ping</a></code> resources always consist of the four
     bytes 0x50 0x49 0x4E 0x47 (ASCII 'PING').</dd>
     <dt>File extension(s):</dt>
     <dd>No specific file extension is recommended for this type.</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd>No specific Macintosh file type codes are recommended for this type.</dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>Only intended for use with HTTP POST requests generated as part
   of a Web browser's processing of the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>WHATWG</dd>
  </dl><p>Fragment identifiers have no meaning with
  <code><a href=#text/ping>text/ping</a></code> resources.</p>
<!--PING-->

  <h3 id=text/srt><span class=secno>14.6 </span><dfn><code>text/srt</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type text/cues
  -->

  <dl><dt>Type name:</dt>
   <dd>text</dd>
   <dt>Subtype name:</dt>
   <dd>srt</dd>
   <dt>Required parameters:</dt>
   <dd>No parameters</dd>
   <dt>Optional parameters:</dt>
   <dd>No parameters</dd>
   <dt>Encoding considerations:</dt>
   <dd>Always UTF-8.</dd>
   <dt>Security considerations:</dt>
   <dd>
    <p>Timed track files themselves pose no immediate risk unless
    sensitive information is included within the
    data. Implementations, however, are required to follow specific
    rules when processing timed tracks, to ensure that certain
    origin-based restrictions are honored. Failure to correctly
    implement these rules can result in information leakage,
    cross-site scripting attacks, and the like.</p>
   </dd>
   <dt>Interoperability considerations:</dt>
   <dd>
    Rules for processing both conforming and non-conforming content
    are defined in this specification.
   </dd>
   <dt>Published specification:</dt>
   <dd>
    This document is the relevant specification.
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>
    Web browsers and other video players.
   </dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>No sequence of bytes can uniquely identify a WebSRT timed
     track file.</dd>
     <dt>File extension(s):</dt>
     <dd>"<code title="">srt</code>"</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd>No specific Macintosh file type codes are recommended for this type.</dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>WHATWG</dd>
  </dl><p>Fragment identifiers have no meaning with
  <code><a href=#text/srt>text/srt</a></code> resources.</p>



  <h3 id=application/microdata+json><span class=secno>14.7 </span><dfn><code>application/microdata+json</code></dfn></h3>


  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type application/microdata+json
  -->

  <dl><dt>Type name:</dt>
   <dd>application</dd>
   <dt>Subtype name:</dt>
   <dd>microdata+json</dd>
   <dt>Required parameters:</dt>
   <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   <dt>Optional parameters:</dt>
   <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   <dt>Encoding considerations:</dt>
   <dd>Always UTF-8.</dd>
   <dt>Security considerations:</dt>
   <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   <dt>Interoperability considerations:</dt>
   <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   <dt>Published specification:</dt>
   <dd>

    Labeling a resource with the
    <code><a href=#application/microdata+json>application/microdata+json</a></code> type asserts that the
    resource is a JSON text that consists of an object with a single
    entry called "<code title="">items</code>" consisting of an array
    of entries, each of which consists of an object with two entries,
    one called "<code title="">type</code>" whose value is an array of
    strings, and one called "<code title="">properties</code>" whose
    value is an object whose entries each have a value consisting of
    an array of either objects or strings, the objects being of the
    same form as the objects in the aforementioned "<code title="">items</code>" entry. As such, the relevant specifications
    are the JSON specification and this specification. <a href=#refsJSON>[JSON]</a>

   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
     <dt>File extension(s):</dt>
     <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
     <dt>Macintosh file type code(s):</dt>
     <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>WHATWG</dd>
  </dl><p>Fragment identifiers used with
  <code><a href=#application/microdata+json>application/microdata+json</a></code> resources have the same
  semantics as when used with <code>application/json</code>. <a href=#refsJSON>[JSON]</a></p>



<!--PING-->
  <h3 id=ping-from><span class=secno>14.8 </span><dfn title=http-ping-from><code>Ping-From</code></dfn></h3>

  <p>This section describes a header field for registration in the
  Permanent Message Header Field Registry.  <a href=#refsRFC3864>[RFC3864]</a></p>

  <dl><dt>Header field name</dt>
   <dd>Ping-From</dd>
   <dt>Applicable protocol</dt>
   <dd>http</dd>
   <dt>Status</dt>
   <dd>standard</dd>
   <dt>Author/Change controller</dt>
   <dd>WHATWG</dd>
   <dt>Specification document(s)</dt>
   <dd>
    This document is the relevant specification.
   </dd>
   <dt>Related information</dt>
   <dd>None.</dd>
  </dl><h3 id=ping-to><span class=secno>14.9 </span><dfn title=http-ping-to><code>Ping-To</code></dfn></h3>

  <p>This section describes a header field for registration in the
  Permanent Message Header Field Registry.  <a href=#refsRFC3864>[RFC3864]</a></p>

  <dl><dt>Header field name</dt>
   <dd>Ping-To</dd>
   <dt>Applicable protocol</dt>
   <dd>http</dd>
   <dt>Status</dt>
   <dd>standard</dd>
   <dt>Author/Change controller</dt>
   <dd>WHATWG</dd>
   <dt>Specification document(s)</dt>
   <dd>
    This document is the relevant specification.
   </dd>
   <dt>Related information</dt>
   <dd>None.</dd>
  </dl><!--PING--><h2 class=no-num id=index>Index</h2>

  <div class=impl>

  <p>The following sections only cover conforming elements and features.</p>

  </div>

  <h3 class=no-num id=elements-1>Elements</h3>

  <p><i>This section is non-normative.</i></p>

  <table><caption>List of elements</caption>
   <thead><tr><th> Element
     <th> Description
     <th> Categories
     <th> Parents
     <th> Children
     <th> Attributes
     <th> Interface
   <tbody><tr><th><code><a href=#the-a-element>a</a></code></th>
     <td>Hyperlink</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>*;
         <a href=#interactive-content title="Interactive content">interactive</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#transparent>transparent</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>;
         <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>;
<!--PING-->
         <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>;
<!--PING-->
         <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>;
         <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>;
         <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>;
         <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code></td>
     <td><code><a href=#htmlanchorelement>HTMLAnchorElement</a></code></td>
    <tr><th><code><a href=#the-abbr-element>abbr</a></code></th>
     <td>Abbreviation</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-address-element>address</a></code></th>
     <td>Contact information for a page or section</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-area-element>area</a></code></th>
     <td>Hyperlink or dead area on an image map</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code>;
         <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code>;
         <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code>;
         <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>;
         <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>;
<!--PING-->
         <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>;
<!--PING-->
         <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>;
         <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>;
         <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>;
         <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code></td>
     <td><code><a href=#htmlareaelement>HTMLAreaElement</a></code></td>
    <tr><th><code><a href=#the-article-element>article</a></code></th>
     <td>Self-contained syndicatable or reusable composition</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#sectioning-content title="Sectioning content">sectioning</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-aside-element>aside</a></code></th>
     <td>Sidebar for tangentially related content</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#sectioning-content title="Sectioning content">sectioning</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#audio>audio</a></code></th>
     <td>Audio player</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#embedded-content title="Embedded content">embedded</a>;
         <a href=#interactive-content title="Interactive content">interactive</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><code><a href=#the-source-element>source</a></code>*;
         <a href=#transparent>transparent</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-media-src><a href=#attr-media-src>src</a></code>;
         <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>;
         <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>;
         <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>;
         <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code></td>
     <td><code><a href=#htmlaudioelement>HTMLAudioElement</a></code></td>
    <tr><th><code><a href=#the-b-element>b</a></code></th>
     <td>Keywords</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-base-element>base</a></code></th>
     <td>Base URL and default target <a href=#browsing-context>browsing context</a> for <a href=#attr-hyperlink-target title=attr-hyperlink-target>hyperlinks</a> and <a href=#attr-fs-target title=attr-fs-target>forms</a></td>
     <td><a href=#metadata-content title="Metadata content">metadata</a></td>
     <td><code><a href=#the-head-element-0>head</a></code></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-base-href><a href=#attr-base-href>href</a></code>;
         <code title=attr-base-target><a href=#attr-base-target>target</a></code></td>
     <td><code><a href=#htmlbaseelement>HTMLBaseElement</a></code></td>
    <tr><th><code><a href=#the-bdo-element>bdo</a></code></th>
     <td>Text directionality formatting</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-blockquote-element>blockquote</a></code></th>
     <td>A section quoted from another source</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#sectioning-root title="Sectioning root">sectioning root</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-blockquote-cite><a href=#attr-blockquote-cite>cite</a></code></td>
     <td><code><a href=#htmlquoteelement>HTMLQuoteElement</a></code></td>
    <tr><th><code><a href=#the-body-element-0>body</a></code></th>
     <td>Document body</td>
     <td><a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
     <td><code><a href=#the-html-element-0>html</a></code></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=handler-window-onafterprint><a href=#handler-window-onafterprint>onafterprint</a></code>;
         <code title=handler-window-onbeforeprint><a href=#handler-window-onbeforeprint>onbeforeprint</a></code>;
         <code title=handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>onbeforeunload</a></code>;
         <code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code>;
         <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code>;
         <code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code>;
         <code title=handler-window-onhashchange><a href=#handler-window-onhashchange>onhashchange</a></code>;
         <code title=handler-window-onload><a href=#handler-window-onload>onload</a></code>;
         <code title=handler-window-onmessage><a href=#handler-window-onmessage>onmessage</a></code>;
         <code title=handler-window-onoffline><a href=#handler-window-onoffline>onoffline</a></code>;
         <code title=handler-window-ononline><a href=#handler-window-ononline>ononline</a></code>;
         <code title=handler-window-onpagehide><a href=#handler-window-onpagehide>onpagehide</a></code>;
         <code title=handler-window-onpageshow><a href=#handler-window-onpageshow>onpageshow</a></code>;
         <code title=handler-window-onpopstate><a href=#handler-window-onpopstate>onpopstate</a></code>;
         <code title=handler-window-onredo><a href=#handler-window-onredo>onredo</a></code>;
         <code title=handler-window-onresize><a href=#handler-window-onresize>onresize</a></code>;
         <code title=handler-window-onstorage><a href=#handler-window-onstorage>onstorage</a></code>;
         <code title=handler-window-onundo><a href=#handler-window-onundo>onundo</a></code>;
         <code title=handler-window-onunload><a href=#handler-window-onunload>onunload</a></code></td>
     <td><code><a href=#htmlbodyelement>HTMLBodyElement</a></code></td>
    <tr><th><code><a href=#the-br-element>br</a></code></th>
     <td>Line break, e.g. in poem or postal address</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlbrelement>HTMLBRElement</a></code></td>
    <tr><th><code><a href=#the-button-element>button</a></code></th>
     <td>Button control</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#interactive-content title="Interactive content">interactive</a>;
         <a href=#category-listed title=category-listed>listed</a>;
         <a href=#category-label title=category-label>labelable</a>;
         <a href=#category-submit title=category-submit>submittable</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content>Phrasing content</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
         <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
         <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>;
         <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>;
         <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>;
         <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>;
         <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>;
         <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
         <code title=attr-button-type><a href=#attr-button-type>type</a></code>;
         <code title=attr-button-value><a href=#attr-button-value>value</a></code></td>
     <td><code><a href=#htmlbuttonelement>HTMLButtonElement</a></code></td>
    <tr><th><code><a href=#the-canvas-element>canvas</a></code></th>
     <td>Scriptable bitmap canvas</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#embedded-content title="Embedded content">embedded</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#transparent>transparent</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code>;
         <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code></td>
     <td><code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code></td>
    <tr><th><code><a href=#the-caption-element>caption</a></code></th>
     <td>Table caption</td>
     <td>none</td>
     <td><code><a href=#the-table-element>table</a></code></td>
     <td><a href=#flow-content title="Flow content">flow</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmltablecaptionelement>HTMLTableCaptionElement</a></code></td>
    <tr><th><code><a href=#the-cite-element>cite</a></code></th>
     <td>Title of a work</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-code-element>code</a></code></th>
     <td>Computer code</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-col-element>col</a></code></th>
     <td>Table column</td>
     <td>none</td>
     <td><code><a href=#the-colgroup-element>colgroup</a></code></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-col-span><a href=#attr-col-span>span</a></code></td>
     <td><code><a href=#htmltablecolelement>HTMLTableColElement</a></code></td>
    <tr><th><code><a href=#the-colgroup-element>colgroup</a></code></th>
     <td>Group of columns in a table</td>
     <td>none</td>
     <td><code><a href=#the-table-element>table</a></code></td>
     <td><code><a href=#the-col-element>col</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code></td>
     <td><code><a href=#htmltablecolelement>HTMLTableColElement</a></code></td>
    <tr><th><code><a href=#the-command>command</a></code></th>
     <td>Menu command</td>
     <td><a href=#metadata-content title="Metadata content">metadata</a>;
         <a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><code><a href=#the-head-element-0>head</a></code>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-command-type><a href=#attr-command-type>type</a></code>;
         <code title=attr-command-label><a href=#attr-command-label>label</a></code>;
         <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code>;
         <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code>;
         <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>;
         <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code></td>
     <td><code><a href=#htmlcommandelement>HTMLCommandElement</a></code></td>
    <tr><th><code><a href=#the-datalist-element>datalist</a></code></th>
     <td>Container for options for <a href=#attr-input-list title=attr-input-list>combo box control</a></td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <code><a href=#the-option-element>option</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmldatalistelement>HTMLDataListElement</a></code></td>
    <tr><th><code><a href=#the-dd-element>dd</a></code></th>
     <td>Content for corresponding <code><a href=#the-dt-element>dt</a></code> element(s)</td>
     <td>none</td>
     <td><code><a href=#the-dl-element>dl</a></code></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-del-element>del</a></code></th>
     <td>A removal from the document</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#transparent>transparent</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code>;
         <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code></td>
     <td><code><a href=#htmlmodelement>HTMLModElement</a></code></td>
    <tr><th><code><a href=#the-details-element>details</a></code></th>
     <td>Disclosure control for hiding details</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#sectioning-root title="Sectioning root">sectioning root</a>;
         <a href=#interactive-content title="Interactive content">interactive</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><code><a href=#the-summary-element>summary</a></code>*;
         <a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-details-open><a href=#attr-details-open>open</a></code></td>
     <td><code><a href=#htmldetailselement>HTMLDetailsElement</a></code></td>
    <tr><th><code><a href=#the-dfn-element>dfn</a></code></th>
     <td>Defining instance</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-div-element>div</a></code></th>
     <td>Generic flow container</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmldivelement>HTMLDivElement</a></code></td>
    <tr><th><code><a href=#the-dl-element>dl</a></code></th>
     <td>Association list consisting of zero or more name-value groups</td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><code><a href=#the-dt-element>dt</a></code>*;
         <code><a href=#the-dd-element>dd</a></code>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmldlistelement>HTMLDListElement</a></code></td>
    <tr><th><code><a href=#the-dt-element>dt</a></code></th>
     <td>Legend for corresponding <code><a href=#the-dd-element>dd</a></code> element(s)</td>
     <td>none</td>
     <td><code><a href=#the-dl-element>dl</a></code></td>
     <td>varies*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-em-element>em</a></code></th>
     <td>Stress emphasis</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-embed-element>embed</a></code></th>
     <td><a href=#plugin>Plugin</a></td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#embedded-content title="Embedded content">embedded</a>;
         <a href=#interactive-content title="Interactive content">interactive</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-embed-src><a href=#attr-embed-src>src</a></code>;
         <code title=attr-embed-type><a href=#attr-embed-type>type</a></code>;
         <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
         <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>;
         any*</td>
     <td><code><a href=#htmlembedelement>HTMLEmbedElement</a></code></td>
    <tr><th><code><a href=#the-fieldset-element>fieldset</a></code></th>
     <td>Group of form controls</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#sectioning-root title="Sectioning root">sectioning root</a>;
         <a href=#category-listed title=category-listed>listed</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><code><a href=#the-legend-element>legend</a></code>*;
         <a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
         <code title=attr-fe-name><a href=#attr-fe-name>name</a></code></td>
     <td><code><a href=#htmlfieldsetelement>HTMLFieldSetElement</a></code></td>
    <tr><th><code><a href=#the-figcaption-element>figcaption</a></code></th>
     <td>Caption for <code><a href=#the-figure-element>figure</a></code></td>
     <td>none</td>
     <td><code><a href=#the-figure-element>figure</a></code></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-figure-element>figure</a></code></th>
     <td>Figure with optional caption</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><code><a href=#the-figcaption-element>figcaption</a></code>*;
         <a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-footer-element>footer</a></code></th>
     <td>Footer for a page or section</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-form-element>form</a></code></th>
     <td>User-submittable form</td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code>;
         <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>;
         <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code>;
         <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>;
         <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>;
         <code title=attr-form-name><a href=#attr-form-name>name</a></code>;
         <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>;
         <code title=attr-fs-target><a href=#attr-fs-target>target</a></code></td>
     <td><code><a href=#htmlformelement>HTMLFormElement</a></code></td>
    <tr><th><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code></th>
     <td>Section heading</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#heading-content title="Heading content">heading</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><code><a href=#the-hgroup-element>hgroup</a></code>;
         <a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlheadingelement>HTMLHeadingElement</a></code></td>
    <tr><th><code><a href=#the-head-element-0>head</a></code></th>
     <td>Container for document metadata</td>
     <td>none</td>
     <td><code><a href=#the-html-element-0>html</a></code></td>
     <td><a href=#metadata-content title="Metadata content">metadata content</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlheadelement>HTMLHeadElement</a></code></td>
    <tr><th><code><a href=#the-header-element>header</a></code></th>
     <td>Introductory or navigational aids for a page or section</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-hgroup-element>hgroup</a></code></th>
     <td>heading group</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#heading-content title="Heading content">heading</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td>One or more <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, and/or <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-hr-element>hr</a></code></th>
     <td>Thematic break</td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlhrelement>HTMLHRElement</a></code></td>
    <tr><th><code><a href=#the-html-element-0>html</a></code></th>
     <td>Root element</td>
     <td>none</td>
     <td>none*</td>
     <td><code><a href=#the-head-element-0>head</a></code>*;
         <code><a href=#the-body-element-0>body</a></code>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code></td>
     <td><code><a href=#htmlhtmlelement>HTMLHtmlElement</a></code></td>
    <tr><th><code><a href=#the-i-element>i</a></code></th>
     <td>Alternate voice</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-iframe-element>iframe</a></code></th>
     <td><a href=#nested-browsing-context>Nested browsing context</a></td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#embedded-content title="Embedded content">embedded</a>;
         <a href=#interactive-content title="Interactive content">interactive</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td>text*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code>;
         <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code>;
         <code title=attr-iframe-name><a href=#attr-iframe-name>name</a></code>;
         <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code>;
         <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code>;
         <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
         <code title=attr-dim-height><a href=#attr-dim-height>height</a></code></td>
     <td><code><a href=#htmliframeelement>HTMLIFrameElement</a></code></td>
    <tr><th><code><a href=#the-img-element>img</a></code></th>
     <td>Image</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#embedded-content title="Embedded content">embedded</a>;
         <a href=#interactive-content title="Interactive content">interactive</a>*</td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>;
         <code title=attr-img-src><a href=#attr-img-src>src</a></code>;
         <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code>;
         <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code>;
         <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
         <code title=attr-dim-height><a href=#attr-dim-height>height</a></code></td>
     <td><code><a href=#htmlimageelement>HTMLImageElement</a></code></td>
    <tr><th><code><a href=#the-input-element>input</a></code></th>
     <td>Form control</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#interactive-content title="Interactive content">interactive</a>*;
         <a href=#category-listed title=category-listed>listed</a>;
         <a href=#category-label title=category-label>labelable</a>;
         <a href=#category-submit title=category-submit>submittable</a>;
         <a href=#category-reset title=category-reset>resettable</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>;
         <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>;
         <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>;
         <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
         <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>;
         <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
         <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>;
         <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>;
         <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>;
         <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>;
         <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>;
         <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>;
         <code title=attr-input-list><a href=#attr-input-list>list</a></code>;
         <code title=attr-input-max><a href=#attr-input-max>max</a></code>;
         <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>;
         <code title=attr-input-min><a href=#attr-input-min>min</a></code>;
         <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>;
         <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
         <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>;
         <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>;
         <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>;
         <code title=attr-input-required><a href=#attr-input-required>required</a></code>;
         <code title=attr-input-size><a href=#attr-input-size>size</a></code>;
         <code title=attr-input-src><a href=#attr-input-src>src</a></code>;
         <code title=attr-input-step><a href=#attr-input-step>step</a></code>;
         <code title=attr-input-type><a href=#attr-input-type>type</a></code>;
         <code title=attr-input-value><a href=#attr-input-value>value</a></code>;
         <code title=attr-dim-width><a href=#attr-dim-width>width</a></code></td>
     <td><code><a href=#htmlinputelement>HTMLInputElement</a></code></td>
    <tr><th><code><a href=#the-ins-element>ins</a></code></th>
     <td>An addition to the document</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#transparent>transparent</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code>;
         <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code></td>
     <td><code><a href=#htmlmodelement>HTMLModElement</a></code></td>
    <tr><th><code><a href=#the-kbd-element>kbd</a></code></th>
     <td>User input</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-keygen-element>keygen</a></code></th>
     <td>Cryptographic key-pair generator form control</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#interactive-content title="Interactive content">interactive</a>;
         <a href=#category-listed title=category-listed>listed</a>;
         <a href=#category-label title=category-label>labelable</a>;
         <a href=#category-submit title=category-submit>submittable</a>;
         <a href=#category-reset title=category-reset>resettable</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
         <code title=attr-keygen-challenge><a href=#attr-keygen-challenge>challenge</a></code>;
         <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
         <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keytype</a></code>;
         <code title=attr-fe-name><a href=#attr-fe-name>name</a></code></td>
     <td><code><a href=#htmlkeygenelement>HTMLKeygenElement</a></code></td>
    <tr><th><code><a href=#the-label-element>label</a></code></th>
     <td>Caption for a form control</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#interactive-content title="Interactive content">interactive</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
         <code title=attr-label-for><a href=#attr-label-for>for</a></code></td>
     <td><code><a href=#htmllabelelement>HTMLLabelElement</a></code></td>
    <tr><th><code><a href=#the-legend-element>legend</a></code></th>
     <td>Caption for <code><a href=#the-fieldset-element>fieldset</a></code></td>
     <td>none</td>
     <td><code><a href=#the-fieldset-element>fieldset</a></code></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmllegendelement>HTMLLegendElement</a></code></td>
    <tr><th><code><a href=#the-li-element>li</a></code></th>
     <td>List item</td>
     <td>none</td>
     <td><code><a href=#the-ol-element>ol</a></code>; <code><a href=#the-ul-element>ul</a></code>; <code><a href=#menus>menu</a></code></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-li-value><a href=#attr-li-value>value</a></code>*</td>
     <td><code><a href=#htmllielement>HTMLLIElement</a></code></td>
    <tr><th><code><a href=#the-link-element>link</a></code></th>
     <td>Link metadata</td>
     <td><a href=#metadata-content title="Metadata content">metadata</a>;
         <a href=#flow-content title="Flow content">flow</a>*;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><code><a href=#the-head-element-0>head</a></code>;
         <code><a href=#the-noscript-element>noscript</a></code>*;
         <a href=#phrasing-content title="phrasing content">phrasing</a>*</td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-link-href><a href=#attr-link-href>href</a></code>;
         <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code>;
         <code title=attr-link-media><a href=#attr-link-media>media</a></code>;
         <code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code>;
         <code title=attr-link-type><a href=#attr-link-type>type</a></code>;
         <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code></td>
     <td><code><a href=#htmllinkelement>HTMLLinkElement</a></code></td>
    <tr><th><code><a href=#the-map-element>map</a></code></th>
     <td><a href=#image-map>Image map</a></td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#transparent>transparent</a>;
         <code><a href=#the-area-element>area</a></code>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-map-name><a href=#attr-map-name>name</a></code></td>
     <td><code><a href=#htmlmapelement>HTMLMapElement</a></code></td>
    <tr><th><code><a href=#the-mark-element>mark</a></code></th>
     <td>Highlight</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#menus>menu</a></code></th>
     <td>Menu of commands</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#interactive-content title="Interactive content">interactive</a>*</td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><code><a href=#the-li-element>li</a></code>*;
         <a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-menu-type><a href=#attr-menu-type>type</a></code>;
         <code title=attr-menu-label><a href=#attr-menu-label>label</a></code></td>
     <td><code><a href=#htmlmenuelement>HTMLMenuElement</a></code></td>
    <tr><th><code><a href=#meta>meta</a></code></th>
     <td>Text metadata</td>
     <td><a href=#metadata-content title="Metadata content">metadata</a>;
         <a href=#flow-content title="Flow content">flow</a>*;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><code><a href=#the-head-element-0>head</a></code>;
         <code><a href=#the-noscript-element>noscript</a></code>*;
         <a href=#phrasing-content title="phrasing content">phrasing</a>*</td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>;
         <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>;
         <code title=attr-meta-content><a href=#attr-meta-content>content</a></code>;
         <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code></td>
     <td><code><a href=#htmlmetaelement>HTMLMetaElement</a></code></td>
    <tr><th><code><a href=#the-meter-element>meter</a></code></th>
     <td>Gauge</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#category-label title=category-label>labelable</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>;
         <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>;
         <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>;
         <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>;
         <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>;
         <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code></td>
     <td><code><a href=#htmlmeterelement>HTMLMeterElement</a></code></td>
    <tr><th><code><a href=#the-nav-element>nav</a></code></th>
     <td>Section with navigational links</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#sectioning-content title="Sectioning content">sectioning</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-noscript-element>noscript</a></code></th>
     <td>Fallback content for script</td>
     <td><a href=#metadata-content title="Metadata content">metadata</a>;
         <a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><code><a href=#the-head-element-0>head</a></code>*;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td>varies*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-object-element>object</a></code></th>
     <td>Image, <a href=#nested-browsing-context>nested browsing context</a>, or <a href=#plugin>plugin</a></td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#embedded-content title="Embedded content">embedded</a>;
         <a href=#interactive-content title="Interactive content">interactive</a>*;
         <a href=#category-listed title=category-listed>listed</a>;
         <a href=#category-submit title=category-submit>submittable</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><code><a href=#the-param-element>param</a></code>*;
         <a href=#transparent>transparent</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-object-data><a href=#attr-object-data>data</a></code>;
         <code title=attr-object-type><a href=#attr-object-type>type</a></code>;
         <code title=attr-object-name><a href=#attr-object-name>name</a></code>;
         <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
         <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
         <code title=attr-dim-height><a href=#attr-dim-height>height</a></code></td>
     <td><code><a href=#htmlobjectelement>HTMLObjectElement</a></code></td>
    <tr><th><code><a href=#the-ol-element>ol</a></code></th>
     <td>Ordered list</td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><code><a href=#the-li-element>li</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code>;
         <code title=attr-ol-start><a href=#attr-ol-start>start</a></code></td>
     <td><code><a href=#htmlolistelement>HTMLOListElement</a></code></td>
    <tr><th><code><a href=#the-optgroup-element>optgroup</a></code></th>
     <td>Group of options in a list box</td>
     <td>none</td>
     <td><code><a href=#the-select-element>select</a></code></td>
     <td><code><a href=#the-option-element>option</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code>;
         <code title=attr-optgroup-label><a href=#attr-optgroup-label>label</a></code></td>
     <td><code><a href=#htmloptgroupelement>HTMLOptGroupElement</a></code></td>
    <tr><th><code><a href=#the-option-element>option</a></code></th>
     <td>Option in a list box or combo box control</td>
     <td>none</td>
     <td><code><a href=#the-select-element>select</a></code>;
         <code><a href=#the-datalist-element>datalist</a></code>;
         <code><a href=#the-optgroup-element>optgroup</a></code></td>
     <td><a href=#text-content title="text content">text</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code>;
         <code title=attr-option-label><a href=#attr-option-label>label</a></code>;
         <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code>;
         <code title=attr-option-value><a href=#attr-option-value>value</a></code></td>
     <td><code><a href=#htmloptionelement>HTMLOptionElement</a></code></td>
    <tr><th><code><a href=#the-output-element>output</a></code></th>
     <td>Calculated output value</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#category-listed title=category-listed>listed</a>;
         <a href=#category-label title=category-label>labelable</a>;
         <a href=#category-reset title=category-reset>resettable</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-output-for><a href=#attr-output-for>for</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
         <code title=attr-fe-name><a href=#attr-fe-name>name</a></code></td>
     <td><code><a href=#htmloutputelement>HTMLOutputElement</a></code></td>
    <tr><th><code><a href=#the-p-element>p</a></code></th>
     <td>Paragraph</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlparagraphelement>HTMLParagraphElement</a></code></td>
    <tr><th><code><a href=#the-param-element>param</a></code></th>
     <td>Parameter for <code><a href=#the-object-element>object</a></code></td>
     <td>none</td>
     <td><code><a href=#the-object-element>object</a></code></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-param-name><a href=#attr-param-name>name</a></code>;
         <code title=attr-param-value><a href=#attr-param-value>value</a></code></td>
     <td><code><a href=#htmlparamelement>HTMLParamElement</a></code></td>
    <tr><th><code><a href=#the-pre-element>pre</a></code></th>
     <td>Block of preformatted text</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlpreelement>HTMLPreElement</a></code></td>
    <tr><th><code><a href=#the-progress-element>progress</a></code></th>
     <td>Progress bar</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#category-label title=category-label>labelable</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-progress-value><a href=#attr-progress-value>value</a></code>;
         <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code></td>
     <td><code><a href=#htmlprogresselement>HTMLProgressElement</a></code></td>
    <tr><th><code><a href=#the-q-element>q</a></code></th>
     <td>Quotation</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-q-cite><a href=#attr-q-cite>cite</a></code></td>
     <td><code><a href=#htmlquoteelement>HTMLQuoteElement</a></code></td>
    <tr><th><code><a href=#the-rp-element>rp</a></code></th>
     <td>Parenthesis for ruby annotation text</td>
     <td>none</td>
     <td><code><a href=#the-ruby-element>ruby</a></code></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-rt-element>rt</a></code></th>
     <td>Ruby annotation text</td>
     <td>none</td>
     <td><code><a href=#the-ruby-element>ruby</a></code></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-ruby-element>ruby</a></code></th>
     <td>Ruby annotation(s)</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <code><a href=#the-rt-element>rt</a></code> element;
         <code><a href=#the-rp-element>rp</a></code> element*</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-samp-element>samp</a></code></th>
     <td>Computer output</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#script>script</a></code></th>
     <td>Embedded script</td>
     <td><a href=#metadata-content title="Metadata content">metadata</a>;
         <a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><code><a href=#the-head-element-0>head</a></code>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td>script, data, or script documentation*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-script-src><a href=#attr-script-src>src</a></code>;
         <code title=attr-script-async><a href=#attr-script-async>async</a></code>;
         <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code>;
         <code title=attr-script-type><a href=#attr-script-type>type</a></code>;
         <code title=attr-script-charset><a href=#attr-script-charset>charset</a></code></td>
     <td><code><a href=#htmlscriptelement>HTMLScriptElement</a></code></td>
    <tr><th><code><a href=#the-section-element>section</a></code></th>
     <td>Generic document or application section</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#sectioning-content title="Sectioning content">sectioning</a>;
         <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-select-element>select</a></code></th>
     <td>List box control</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#interactive-content title="Interactive content">interactive</a>;
         <a href=#category-listed title=category-listed>listed</a>;
         <a href=#category-label title=category-label>labelable</a>;
         <a href=#category-submit title=category-submit>submittable</a>;
         <a href=#category-reset title=category-reset>resettable</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><code><a href=#the-option-element>option</a></code>, <code><a href=#the-optgroup-element>optgroup</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
         <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
         <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>;
         <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
         <code title=attr-select-size><a href=#attr-select-size>size</a></code></td>
     <td><code><a href=#htmlselectelement>HTMLSelectElement</a></code></td>
    <tr><th><code><a href=#the-small-element>small</a></code></th>
     <td>Side comment</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-source-element>source</a></code></th>
     <td>Media source for <code><a href=#video>video</a></code> or <code><a href=#audio>audio</a></code></td>
     <td>none</td>
     <td><code><a href=#video>video</a></code>;
         <code><a href=#audio>audio</a></code></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-source-src><a href=#attr-source-src>src</a></code>;
         <code title=attr-source-type><a href=#attr-source-type>type</a></code>;
         <code title=attr-source-media><a href=#attr-source-media>media</a></code></td>
     <td><code><a href=#htmlsourceelement>HTMLSourceElement</a></code></td>
    <tr><th><code><a href=#the-span-element>span</a></code></th>
     <td>Generic phrasing container</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlspanelement>HTMLSpanElement</a></code></td>
    <tr><th><code><a href=#the-strong-element>strong</a></code></th>
     <td>Importance</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-style-element>style</a></code></th>
     <td>Embedded styling information</td>
     <td><a href=#metadata-content title="Metadata content">metadata</a>;
         <a href=#flow-content title="Flow content">flow</a></td>
     <td><code><a href=#the-head-element-0>head</a></code>;
         <code><a href=#the-noscript-element>noscript</a></code>*;
         <a href=#flow-content title="flow content">flow</a>*</td>
     <td>varies*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-style-media><a href=#attr-style-media>media</a></code>;
         <code title=attr-style-type><a href=#attr-style-type>type</a></code>;
         <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code></td>
     <td><code><a href=#htmlstyleelement>HTMLStyleElement</a></code></td>
    <tr><th><code><a href=#the-sub-and-sup-elements>sub</a></code></th>
     <td>Subscript</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-summary-element>summary</a></code></th>
     <td>Caption for <code><a href=#the-details-element>details</a></code></td>
     <td>none</td>
     <td><code><a href=#the-details-element>details</a></code></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-sub-and-sup-elements>sup</a></code></th>
     <td>Superscript</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#the-table-element>table</a></code></th>
     <td>Table</td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><code><a href=#the-caption-element>caption</a></code>*;
         <code><a href=#the-colgroup-element>colgroup</a></code>*;
         <code><a href=#the-thead-element>thead</a></code>*;
         <code><a href=#the-tbody-element>tbody</a></code>*;
         <code><a href=#the-tfoot-element>tfoot</a></code>*;
         <code><a href=#the-tr-element>tr</a></code>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code></td>
     <td><code><a href=#htmltableelement>HTMLTableElement</a></code></td>
    <tr><th><code><a href=#the-tbody-element>tbody</a></code></th>
     <td>Group of rows in a table</td>
     <td>none</td>
     <td><code><a href=#the-table-element>table</a></code></td>
     <td><code><a href=#the-tr-element>tr</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code></td>
    <tr><th><code><a href=#the-td-element>td</a></code></th>
     <td>Table cell</td>
     <td><a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
     <td><code><a href=#the-tr-element>tr</a></code></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>;
         <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>;
         <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code></td>
     <td><code><a href=#htmltabledatacellelement>HTMLTableDataCellElement</a></code></td>
    <tr><th><code><a href=#the-textarea-element>textarea</a></code></th>
     <td>Multiline text field</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#interactive-content title="Interactive content">interactive</a>;
         <a href=#category-listed title=category-listed>listed</a>;
         <a href=#category-label title=category-label>labelable</a>;
         <a href=#category-submit title=category-submit>submittable</a>;
         <a href=#category-reset title=category-reset>resettable</a>;
         <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#text-content title="text content">text</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
         <code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code>;
         <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
         <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
         <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code>;
         <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
         <code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code>;
         <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code>;
         <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>;
         <code title=attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code>;
         <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code></td>
     <td><code><a href=#htmltextareaelement>HTMLTextAreaElement</a></code></td>
    <tr><th><code><a href=#the-tfoot-element>tfoot</a></code></th>
     <td>Group of footer rows in a table</td>
     <td>none</td>
     <td><code><a href=#the-table-element>table</a></code></td>
     <td><code><a href=#the-tr-element>tr</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code></td>
    <tr><th><code><a href=#the-th-element>th</a></code></th>
     <td>Table header cell</td>
     <td>none</td>
     <td><code><a href=#the-tr-element>tr</a></code></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>;
         <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>;
         <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code>;
         <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code></td>
     <td><code><a href=#htmltableheadercellelement>HTMLTableHeaderCellElement</a></code></td>
    <tr><th><code><a href=#the-thead-element>thead</a></code></th>
     <td>Group of heading rows in a table</td>
     <td>none</td>
     <td><code><a href=#the-table-element>table</a></code></td>
     <td><code><a href=#the-tr-element>tr</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code></td>
    <tr><th><code><a href=#the-time-element>time</a></code></th>
     <td>Date and/or time</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code>;
         <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code></td>
     <td><code><a href=#htmltimeelement>HTMLTimeElement</a></code></td>
    <tr><th><code><a href=#the-title-element-0>title</a></code></th>
     <td>Document title</td>
     <td><a href=#metadata-content title="Metadata content">metadata</a></td>
     <td><code><a href=#the-head-element-0>head</a></code></td>
     <td><a href=#text-content title="text content">text</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmltitleelement>HTMLTitleElement</a></code></td>
    <tr><th><code><a href=#the-tr-element>tr</a></code></th>
     <td>Table row</td>
     <td>none</td>
     <td><code><a href=#the-table-element>table</a></code>;
         <code><a href=#the-thead-element>thead</a></code>;
         <code><a href=#the-tbody-element>tbody</a></code>;
         <code><a href=#the-tfoot-element>tfoot</a></code></td>
     <td><code><a href=#the-th-element>th</a></code>*;
         <code><a href=#the-td-element>td</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmltablerowelement>HTMLTableRowElement</a></code></td>
    </tr><!--TT--><tr><th><code><a href=#the-track-element>track</a></code></th>
     <td>Timed track</td>
     <td>none</td>
     <td><code><a href=#audio>audio</a></code>;
         <code><a href=#video>video</a></code></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code>;
         <code title=attr-track-label><a href=#attr-track-label>label</a></code>;
         <code title=attr-track-src><a href=#attr-track-src>src</a></code>;
         <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></td>
     <td><code><a href=#htmltrackelement>HTMLTrackElement</a></code></td>
    </tr><!--TT--><tr><th><code><a href=#the-ul-element>ul</a></code></th>
     <td>List</td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><a href=#flow-content title="Flow content">flow</a></td>
     <td><code><a href=#the-li-element>li</a></code></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlulistelement>HTMLUListElement</a></code></td>
    <tr><th><code><a href=#the-var-element>var</a></code></th>
     <td>Variable</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    <tr><th><code><a href=#video>video</a></code></th>
     <td>Video player</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a>;
         <a href=#embedded-content title="Embedded content">embedded</a>;
         <a href=#interactive-content title="Interactive content">interactive</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><code><a href=#the-source-element>source</a></code>*;
         <a href=#transparent>transparent</a>*</td>
     <td><a href=#global-attributes title="global attributes">globals</a>;
         <code title=attr-media-src><a href=#attr-media-src>src</a></code>;
         <code title=attr-video-poster><a href=#attr-video-poster>poster</a></code>;
         <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>;
         <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>;
         <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>;
         <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code>;
         <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
         <code title=attr-dim-height><a href=#attr-dim-height>height</a></code></td>
     <td><code><a href=#htmlvideoelement>HTMLVideoElement</a></code></td>
    <tr><th><code><a href=#the-wbr-element>wbr</a></code></th>
     <td>Line breaking opportunity</td>
     <td><a href=#flow-content title="Flow content">flow</a>;
         <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
     <td>empty</td>
     <td><a href=#global-attributes title="global attributes">globals</a></td>
     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
    </table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>




  <h3 class=no-num id=element-content-categories>Element content categories</h3>

  <p><i>This section is non-normative.</i></p>

  <!-- when updating this also check the category-list <ul>s -->

  <table><caption>List of element content categories</caption>
   <thead><tr><th> Category
     <th> Elements
     <th> Elements with exceptions
   <tbody><tr><td> <a href=#metadata-content>Metadata content</a>
     <td>
      <code><a href=#the-base-element>base</a></code>;
      <code><a href=#the-command>command</a></code>;
      <code><a href=#the-link-element>link</a></code>;
      <code><a href=#meta>meta</a></code>;
      <code><a href=#the-noscript-element>noscript</a></code>;
      <code><a href=#script>script</a></code>;
      <code><a href=#the-style-element>style</a></code>;
      <code><a href=#the-title-element-0>title</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#flow-content>Flow content</a>
     <td>
      <code><a href=#the-a-element>a</a></code>;
      <code><a href=#the-abbr-element>abbr</a></code>;
      <code><a href=#the-address-element>address</a></code>;
      <code><a href=#the-article-element>article</a></code>;
      <code><a href=#the-aside-element>aside</a></code>;
      <code><a href=#audio>audio</a></code>;
      <code><a href=#the-b-element>b</a></code>;
      <code><a href=#the-bdo-element>bdo</a></code>;
      <code><a href=#the-blockquote-element>blockquote</a></code>;
      <code><a href=#the-br-element>br</a></code>;
      <code><a href=#the-button-element>button</a></code>;
      <code><a href=#the-canvas-element>canvas</a></code>;
      <code><a href=#the-cite-element>cite</a></code>;
      <code><a href=#the-code-element>code</a></code>;
      <code><a href=#the-command>command</a></code>;
      <!-- v2DATAGRID <code>datagrid</code>; -->
      <code><a href=#the-datalist-element>datalist</a></code>;
      <code><a href=#the-del-element>del</a></code>;
      <code><a href=#the-details-element>details</a></code>;
      <code><a href=#the-dfn-element>dfn</a></code>;
      <code><a href=#the-div-element>div</a></code>;
      <code><a href=#the-dl-element>dl</a></code>;
      <code><a href=#the-em-element>em</a></code>;
      <code><a href=#the-embed-element>embed</a></code>;
      <code><a href=#the-fieldset-element>fieldset</a></code>;
      <code><a href=#the-figure-element>figure</a></code>;
      <code><a href=#the-footer-element>footer</a></code>;
      <code><a href=#the-form-element>form</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>;
      <code><a href=#the-header-element>header</a></code>;
      <code><a href=#the-hgroup-element>hgroup</a></code>;
      <code><a href=#the-hr-element>hr</a></code>;
      <code><a href=#the-i-element>i</a></code>;
      <code><a href=#the-iframe-element>iframe</a></code>;
      <code><a href=#the-img-element>img</a></code>;
      <code><a href=#the-input-element>input</a></code>;
      <code><a href=#the-ins-element>ins</a></code>;
      <code><a href=#the-kbd-element>kbd</a></code>;
      <code><a href=#the-keygen-element>keygen</a></code>;
      <code><a href=#the-label-element>label</a></code>;
      <code><a href=#the-map-element>map</a></code>;
      <code><a href=#the-mark-element>mark</a></code>;
      <code><a href=#math>math</a></code>;
      <code><a href=#menus>menu</a></code>;
      <code><a href=#the-meter-element>meter</a></code>;
      <code><a href=#the-nav-element>nav</a></code>;
      <code><a href=#the-noscript-element>noscript</a></code>;
      <code><a href=#the-object-element>object</a></code>;
      <code><a href=#the-ol-element>ol</a></code>;
      <code><a href=#the-output-element>output</a></code>;
      <code><a href=#the-p-element>p</a></code>;
      <code><a href=#the-pre-element>pre</a></code>;
      <code><a href=#the-progress-element>progress</a></code>;
      <code><a href=#the-q-element>q</a></code>;
      <code><a href=#the-ruby-element>ruby</a></code>;
      <code><a href=#the-samp-element>samp</a></code>;
      <code><a href=#script>script</a></code>;
      <code><a href=#the-section-element>section</a></code>;
      <code><a href=#the-select-element>select</a></code>;
      <code><a href=#the-small-element>small</a></code>;
      <code><a href=#the-span-element>span</a></code>;
      <code><a href=#the-strong-element>strong</a></code>;
      <code><a href=#the-sub-and-sup-elements>sub</a></code>;
      <code><a href=#the-sub-and-sup-elements>sup</a></code>;
      <code><a href=#svg>svg</a></code>;
      <code><a href=#the-table-element>table</a></code>;
      <code><a href=#the-textarea-element>textarea</a></code>;
      <code><a href=#the-time-element>time</a></code>;
      <code><a href=#the-ul-element>ul</a></code>;
      <code><a href=#the-var-element>var</a></code>;
      <code><a href=#video>video</a></code>;
      <code><a href=#the-wbr-element>wbr</a></code>;
      <a href=#text-content title="text content">Text</a>
     <td>
      <code><a href=#the-area-element>area</a></code> (if it is a descendant of a <code><a href=#the-map-element>map</a></code> element);
      
      <code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present);
      <code><a href=#meta>meta</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present);
      
      <code><a href=#the-style-element>style</a></code> (if the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is present)

    <tr><td> <a href=#sectioning-content>Sectioning content</a>
     <td>
      <code><a href=#the-article-element>article</a></code>;
      <code><a href=#the-aside-element>aside</a></code>;
      <code><a href=#the-nav-element>nav</a></code>;
      <code><a href=#the-section-element>section</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#heading-content>Heading content</a>
     <td>
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>;
      <code><a href=#the-hgroup-element>hgroup</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#phrasing-content>Phrasing content</a>
     <td>
      <code><a href=#the-abbr-element>abbr</a></code>;
      <code><a href=#audio>audio</a></code>;
      <code><a href=#the-b-element>b</a></code>;
      <code><a href=#the-bdo-element>bdo</a></code>;
      <code><a href=#the-br-element>br</a></code>;
      <code><a href=#the-button-element>button</a></code>;
      <code><a href=#the-canvas-element>canvas</a></code>;
      <code><a href=#the-cite-element>cite</a></code>;
      <code><a href=#the-code-element>code</a></code>;
      <code><a href=#the-command>command</a></code>;
      <code><a href=#the-datalist-element>datalist</a></code>;
      <code><a href=#the-dfn-element>dfn</a></code>;
      <code><a href=#the-em-element>em</a></code>;
      <code><a href=#the-embed-element>embed</a></code>;
      <code><a href=#the-i-element>i</a></code>;
      <code><a href=#the-iframe-element>iframe</a></code>;
      <code><a href=#the-img-element>img</a></code>;
      <code><a href=#the-input-element>input</a></code>;
      <code><a href=#the-kbd-element>kbd</a></code>;
      <code><a href=#the-keygen-element>keygen</a></code>;
      <code><a href=#the-label-element>label</a></code>;
      <code><a href=#the-mark-element>mark</a></code>;
      <code><a href=#math>math</a></code>;
      <code><a href=#the-meter-element>meter</a></code>;
      <code><a href=#the-noscript-element>noscript</a></code>;
      <code><a href=#the-object-element>object</a></code>;
      <code><a href=#the-output-element>output</a></code>;
      <code><a href=#the-progress-element>progress</a></code>;
      <code><a href=#the-q-element>q</a></code>;
      <code><a href=#the-ruby-element>ruby</a></code>;
      <code><a href=#the-samp-element>samp</a></code>;
      <code><a href=#script>script</a></code>;
      <code><a href=#the-select-element>select</a></code>;
      <code><a href=#the-small-element>small</a></code>;
      <code><a href=#the-span-element>span</a></code>;
      <code><a href=#the-strong-element>strong</a></code>;
      <code><a href=#the-sub-and-sup-elements>sub</a></code>;
      <code><a href=#the-sub-and-sup-elements>sup</a></code>;
      <code><a href=#svg>svg</a></code>;
      <code><a href=#the-textarea-element>textarea</a></code>;
      <code><a href=#the-time-element>time</a></code>;
      <code><a href=#the-var-element>var</a></code>;
      <code><a href=#video>video</a></code>;
      <code><a href=#the-wbr-element>wbr</a></code>;
      <a href=#text-content title="text content">Text</a>
     <td>
      <code><a href=#the-a-element>a</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>);
      <code><a href=#the-area-element>area</a></code> (if it is a descendant of a  <code><a href=#the-map-element>map</a></code> element);
      <code><a href=#the-del-element>del</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>);
      <code><a href=#the-ins-element>ins</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>);
      
      <code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present);
      
      <code><a href=#the-map-element>map</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)<!--
      --><!--
      -->; <code><a href=#meta>meta</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)<!--
      --><!--
      -->

    <tr><td> <a href=#embedded-content>Embedded content</a>
     <td>
      <code><a href=#audio>audio</a></code>
      <code><a href=#the-canvas-element>canvas</a></code>
      <code><a href=#the-embed-element>embed</a></code>
      <code><a href=#the-iframe-element>iframe</a></code>
      <code><a href=#the-img-element>img</a></code>
      <code><a href=#math>math</a></code>
      <code><a href=#the-object-element>object</a></code>
      <code><a href=#svg>svg</a></code>
      <code><a href=#video>video</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#interactive-content>Interactive content</a>
     <td>
      <code><a href=#the-a-element>a</a></code>;
      <code><a href=#the-button-element>button</a></code>;
      <!-- v2DATAGRID <code>datagrid</code>; -->
      <code><a href=#the-details-element>details</a></code>;
      <code><a href=#the-embed-element>embed</a></code>;
      <code><a href=#the-iframe-element>iframe</a></code>;
      <code><a href=#the-keygen-element>keygen</a></code>;
      <code><a href=#the-label-element>label</a></code>;
      <code><a href=#the-select-element>select</a></code>;
      <code><a href=#the-textarea-element>textarea</a></code>;
     <td>
      <code><a href=#audio>audio</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present);
      <code><a href=#the-img-element>img</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present);
      <code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state);
      <code><a href=#menus>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state);
      <code><a href=#the-object-element>object</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)<!-- see also comment in <object> section -->;
      <code><a href=#video>video</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present)

    <tr><td> <a href=#sectioning-root title="sectioning root">Sectioning roots</a>
     <td>
      <code><a href=#the-blockquote-element>blockquote</a></code>;
      <code><a href=#the-body-element-0>body</a></code>;
      <!-- v2DATAGRID <code>datagrid</code>; -->
      <code><a href=#the-details-element>details</a></code>;
      <code><a href=#the-fieldset-element>fieldset</a></code>;
      <code><a href=#the-figure-element>figure</a></code>;
      <code><a href=#the-td-element>td</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#form-associated-element title="form-associated element">Form-associated elements</a>
     <td>
      <code><a href=#the-button-element>button</a></code>;
      <code><a href=#the-fieldset-element>fieldset</a></code>;
      <code><a href=#the-input-element>input</a></code>;
      <code><a href=#the-keygen-element>keygen</a></code>;
      <code><a href=#the-label-element>label</a></code>;
      <code><a href=#the-meter-element>meter</a></code>;
      <code><a href=#the-object-element>object</a></code>;
      <code><a href=#the-output-element>output</a></code>;
      <code><a href=#the-progress-element>progress</a></code>;
      <code><a href=#the-select-element>select</a></code>;
      <code><a href=#the-textarea-element>textarea</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#category-listed title=category-listed>Listed elements</a>
     <td>
      <code><a href=#the-button-element>button</a></code>;
      <code><a href=#the-fieldset-element>fieldset</a></code>;
      <code><a href=#the-input-element>input</a></code>;
      <code><a href=#the-keygen-element>keygen</a></code>;
      <code><a href=#the-object-element>object</a></code>;
      <code><a href=#the-output-element>output</a></code>;
      <code><a href=#the-select-element>select</a></code>;
      <code><a href=#the-textarea-element>textarea</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#category-label title=category-label>Labelable elements</a>
     <td>
      <code><a href=#the-button-element>button</a></code>;
      <code><a href=#the-input-element>input</a></code>;
      <code><a href=#the-keygen-element>keygen</a></code>;
      <code><a href=#the-meter-element>meter</a></code>;
      <code><a href=#the-output-element>output</a></code>;
      <code><a href=#the-progress-element>progress</a></code>;
      <code><a href=#the-select-element>select</a></code>;
      <code><a href=#the-textarea-element>textarea</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#category-submit title=category-submit>Submittable elements</a>
     <td>
      <code><a href=#the-button-element>button</a></code>;
      <code><a href=#the-input-element>input</a></code>;
      <code><a href=#the-keygen-element>keygen</a></code>;
      <code><a href=#the-object-element>object</a></code>;
      <code><a href=#the-select-element>select</a></code>;
      <code><a href=#the-textarea-element>textarea</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#category-reset title=category-reset>Resettable elements</a>
     <td>
      <code><a href=#the-input-element>input</a></code>;
      <code><a href=#the-keygen-element>keygen</a></code>;
      <code><a href=#the-output-element>output</a></code>;
      <code><a href=#the-select-element>select</a></code>;
      <code><a href=#the-textarea-element>textarea</a></code>
     <td>
      &mdash;

    <tr><td> <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidates</a>
     <td>
      <code><a href=#the-section-element>section</a></code>;
      <code><a href=#the-nav-element>nav</a></code>;
      <code><a href=#the-article-element>article</a></code>;
      <code><a href=#the-aside-element>aside</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>;
      <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>;
      <code><a href=#the-hgroup-element>hgroup</a></code>;
      <code><a href=#the-header-element>header</a></code>;
      <code><a href=#the-footer-element>footer</a></code>;
      <code><a href=#the-address-element>address</a></code>;
      <code><a href=#the-p-element>p</a></code>;
      <code><a href=#the-pre-element>pre</a></code>;
      <code><a href=#the-blockquote-element>blockquote</a></code>;
      <code><a href=#the-div-element>div</a></code>
     <td>
      &mdash;

  </table><h3 class=no-num id=attributes-1>Attributes</h3>

  <p><i>This section is non-normative.</i></p>

  <table><caption>List of attributes (excluding event handler content attributes)</caption>
   <thead><tr><th> Attribute
     <th> Element(s)
     <th> Description
     <th> Value
   <tbody><tr><th> <code title="">accept</code>
     <td> <code title=attr-input-accept><a href=#attr-input-accept>input</a></code>
     <td> Hint for expected file type in <a href=#file-upload-state title=attr-input-type-file>file upload controls</a>
     <td> <a href=#set-of-comma-separated-tokens>Set of comma-separated tokens</a>* consisting of <a href=#valid-mime-type title="valid MIME type">valid MIME types with no parameters</a> or <code title="">audio/*</code>, <code title="">video/*</code>, or <code title="">image/*</code>
    <tr><th> <code title="">accept-charset</code>
     <td> <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>form</a></code>
     <td> Character encodings to use for <a href=#form-submission>form submission</a>
     <td> <a href=#ordered-set-of-unique-space-separated-tokens>Ordered set of unique space-separated tokens</a> consisting of <a href=#preferred-mime-name title="preferred MIME name">preferred MIME names</a> of <a href=#ascii-compatible-character-encoding title="ASCII-compatible character encoding">ASCII-compatible character encodings</a>*
    <tr><th> <code title="">accesskey</code>
     <td> <a href=#the-accesskey-attribute title=attr-accesskey>HTML elements</a>
     <td> Keyboard shortcut to activate or focus element
     <td> <a href=#ordered-set-of-unique-space-separated-tokens>Ordered set of unique space-separated tokens</a> consisting of one Unicode code point in length
    <tr><th> <code title="">action</code>
     <td> <code title=attr-fs-action><a href=#attr-fs-action>form</a></code>
     <td> <a href=#url>URL</a> to use for <a href=#form-submission>form submission</a>
     <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
    <tr><th> <code title="">alt</code>
     <td> <code title=attr-area-alt><a href=#attr-area-alt>area</a></code>;
          <code title=attr-img-alt><a href=#attr-img-alt>img</a></code>;
          <code title=attr-input-alt><a href=#attr-input-alt>input</a></code>
     <td> Replacement text for use when images are not available
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">async</code>
     <td> <code title=attr-script-async><a href=#attr-script-async>script</a></code>
     <td> Execute script asynchronously
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">autocomplete</code>
     <td> <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>form</a></code>;
          <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>input</a></code>
     <td> Prevent the user agent from providing autocompletions for the form control(s)
     <td> "<code title="">on</code>"; "<code title="">off</code>"
    <tr><th> <code title="">autofocus</code>
     <td> <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>button</a></code>;
          <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>input</a></code>;
          <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>keygen</a></code>;
          <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>select</a></code>;
          <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>textarea</a></code>
     <td> Automatically focus the form control when the page is loaded
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">autoplay</code>
     <td> <code title=attr-media-autoplay><a href=#attr-media-autoplay>audio</a></code>;
          <code title=attr-media-autoplay><a href=#attr-media-autoplay>video</a></code>
     <td> Hint that the <a href=#media-resource>media resource</a> can be started automatically when the page is loaded
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">challenge</code>
     <td> <code title=attr-keygen-challenge><a href=#attr-keygen-challenge>keygen</a></code>
     <td> String to package with the generated and signed public key
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">charset</code>
     <td> <code title=attr-meta-charset><a href=#attr-meta-charset>meta</a></code>
     <td> <a href=#character-encoding-declaration>Character encoding declaration</a>
     <td> <a href=#preferred-mime-name>Preferred MIME name</a> of an encoding*
    <tr><th> <code title="">charset</code>
     <td> <code title=attr-script-charset><a href=#attr-script-charset>script</a></code>
     <td> Character encoding of the external script resource
     <td> <a href=#preferred-mime-name>Preferred MIME name</a> of an encoding*
    <tr><th> <code title="">checked</code>
     <td> <code title=attr-command-checked><a href=#attr-command-checked>command</a></code>;
          <code title=attr-input-checked><a href=#attr-input-checked>input</a></code>
     <td> Whether the command or control is checked
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">cite</code>
     <td> <code title=attr-blockquote-cite><a href=#attr-blockquote-cite>blockquote</a></code>;
          <code title=attr-mod-cite><a href=#attr-mod-cite>del</a></code>;
          <code title=attr-mod-cite><a href=#attr-mod-cite>ins</a></code>;
          <code title=attr-q-cite><a href=#attr-q-cite>q</a></code>
     <td> Link to the source of the quotation or more information about the edit
     <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
    <tr><th> <code title="">class</code>
     <td> <a href=#classes title=attr-class>HTML elements</a>
     <td> Classes to which the element belongs
     <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a>
    <tr><th> <code title="">cols</code>
     <td> <code title=attr-textarea-cols><a href=#attr-textarea-cols>textarea</a></code>
     <td> Maximum number of characters per line
     <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
    <tr><th> <code title="">colspan</code>
     <td> <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>td</a></code>;
          <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>th</a></code>
     <td> Number of columns that the cell is to span
     <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
    <tr><th> <code title="">content</code>
     <td> <code title=attr-meta-content><a href=#attr-meta-content>meta</a></code>
     <td> Value of the element
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">contenteditable</code>
     <td> <a href=#attr-contenteditable title=attr-contenteditable>HTML elements</a>
     <td> Whether the element is <a href=#editable>editable</a>
     <td> "<code title="">true</code>"; "<code title="">false</code>"
    <tr><th> <code title="">contextmenu</code>
     <td> <a href=#attr-contextmenu title=attr-contextmenu>HTML elements</a>
     <td> The element's context menu
     <td> ID*
    <tr><th> <code title="">controls</code>
     <td> <code title=attr-media-controls><a href=#attr-media-controls>audio</a></code>;
          <code title=attr-media-controls><a href=#attr-media-controls>video</a></code>
     <td> Show user agent controls
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">coords</code>
     <td> <code title=attr-area-coords><a href=#attr-area-coords>area</a></code>
     <td> Coordinates for the shape to be created in an <a href=#image-map>image map</a>
     <td> <a href=#valid-list-of-integers>Valid list of integers</a>*
    <tr><th> <code title="">data</code>
     <td> <code title=attr-object-data><a href=#attr-object-data>object</a></code>
     <td> Address of the resource
     <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
    <tr><th> <code title="">datetime</code>
     <td> <code title=attr-mod-datetime><a href=#attr-mod-datetime>del</a></code>;
          <code title=attr-mod-datetime><a href=#attr-mod-datetime>ins</a></code>
     <td> Time and date of the change
     <td> <a href=#valid-global-date-and-time-string>Valid global date and time string</a>
    <tr><th> <code title="">datetime</code>
     <td> <code title=attr-time-datetime><a href=#attr-time-datetime>time</a></code>
     <td> Value of the element
     <td> <a href=#valid-date-or-time-string>Valid date or time string</a>*
    <tr><th> <code title="">defer</code>
     <td> <code title=attr-script-defer><a href=#attr-script-defer>script</a></code>
     <td> Defer script execution
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">dir</code>
     <td> <a href=#the-dir-attribute title=attr-dir>HTML elements</a>
     <td> <a href=#the-directionality title="the directionality">The text directionality</a> of the element
     <td> "<code title="">ltr</code>"; "<code title="">rtl</code>"
    <tr><th> <code title="">disabled</code>
     <td> <code title=attr-fe-disabled><a href=#attr-fe-disabled>button</a></code>;
          <code title=attr-command-disabled><a href=#attr-command-disabled>command</a></code>;
          <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>fieldset</a></code>;
          <code title=attr-fe-disabled><a href=#attr-fe-disabled>input</a></code>;
          <code title=attr-fe-disabled><a href=#attr-fe-disabled>keygen</a></code>;
          <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>optgroup</a></code>;
          <code title=attr-option-disabled><a href=#attr-option-disabled>option</a></code>;
          <code title=attr-fe-disabled><a href=#attr-fe-disabled>select</a></code>;
          <code title=attr-fe-disabled><a href=#attr-fe-disabled>textarea</a></code>
     <td> Whether the form control is disabled
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">draggable</code>
     <td> <a href=#the-draggable-attribute title=attr-draggable>HTML elements</a>
     <td> Whether the element is draggable
     <td> "<code title="">true</code>"; "<code title="">false</code>"
    <tr><th> <code title="">enctype</code>
     <td> <code title=attr-fs-enctype><a href=#attr-fs-enctype>form</a></code>
     <td> Form data set encoding type to use for <a href=#form-submission>form submission</a>
     <td> "<code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>"; "<code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code>"; "<code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code>"
    <tr><th> <code title="">for</code>
     <td> <code title=attr-label-for><a href=#attr-label-for>label</a></code>
     <td> Associate the label with form control
     <td> ID*
    <tr><th> <code title="">for</code>
     <td> <code title=attr-output-for><a href=#attr-output-for>output</a></code>
     <td> Specifies controls from which the output was calculated
     <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of IDs*
    <tr><th> <code title="">form</code>
     <td> <code title=attr-fae-form><a href=#attr-fae-form>button</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>fieldset</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>input</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>keygen</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>label</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>meter</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>object</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>output</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>progress</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>select</a></code>;
          <code title=attr-fae-form><a href=#attr-fae-form>textarea</a></code>
     <td> Associates the control with a <code><a href=#the-form-element>form</a></code> element
     <td> ID*
    <tr><th> <code title="">formaction</code>
     <td> <code title=attr-fs-formaction><a href=#attr-fs-formaction>button</a></code>;
          <code title=attr-fs-formaction><a href=#attr-fs-formaction>input</a></code>
     <td> <a href=#url>URL</a> to use for <a href=#form-submission>form submission</a>
     <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
    <tr><th> <code title="">formenctype</code>
     <td> <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>button</a></code>;
          <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>input</a></code>
     <td> Form data set encoding type to use for <a href=#form-submission>form submission</a>
     <td> "<code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>"; "<code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code>"; "<code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code>"
    <tr><th> <code title="">formmethod</code>
     <td> <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>button</a></code>;
          <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>input</a></code>
     <td> HTTP method to use for <a href=#form-submission>form submission</a>
     <td> "<code title="">GET</code>"; "<code title="">POST</code>"; "<code title="">PUT</code>"; "<code title="">DELETE</code>"
    <tr><th> <code title="">formnovalidate</code>
     <td> <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>button</a></code>;
          <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>input</a></code>
     <td> Bypass form control validation for <a href=#form-submission>form submission</a>
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">formtarget</code>
     <td> <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>button</a></code>;
          <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>input</a></code>
     <td> <a href=#browsing-context>Browsing context</a> for <a href=#form-submission>form submission</a>
     <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
    <tr><th> <code title="">headers</code>
     <td> <code title=attr-tdth-headers><a href=#attr-tdth-headers>td</a></code>;
          <code title=attr-tdth-headers><a href=#attr-tdth-headers>th</a></code>
     <td> The header cells for this cell
     <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of IDs*
    <tr><th> <code title="">height</code>
     <td> <code title=attr-canvas-height><a href=#attr-canvas-height>canvas</a></code>;
          <code title=attr-dim-height><a href=#attr-dim-height>embed</a></code>;
          <code title=attr-dim-height><a href=#attr-dim-height>iframe</a></code>;
          <code title=attr-dim-height><a href=#attr-dim-height>img</a></code>;
          <code title=attr-dim-height><a href=#attr-dim-height>input</a></code>;
          <code title=attr-dim-height><a href=#attr-dim-height>object</a></code>;
          <code title=attr-dim-height><a href=#attr-dim-height>video</a></code>
     <td> Vertical dimension
     <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
    <tr><th> <code title="">hidden</code>
     <td> <a href=#the-hidden-attribute title=attr-hidden>HTML elements</a>
     <td> Whether the element is relevant
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">high</code>
     <td> <code title=attr-meter-high><a href=#attr-meter-high>meter</a></code>
     <td> Low limit of high range
     <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
    <tr><th> <code title="">href</code>
     <td> <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>a</a></code>;
          <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>area</a></code>
     <td> Address of the <a href=#hyperlink>hyperlink</a>
     <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
    <tr><th> <code title="">href</code>
     <td> <code title=attr-link-href><a href=#attr-link-href>link</a></code>
     <td> Address of the <a href=#hyperlink>hyperlink</a>
     <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
    <tr><th> <code title="">href</code>
     <td> <code title=attr-base-href><a href=#attr-base-href>base</a></code>
     <td> <a href=#document-base-url>Document base URL</a>
     <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
    <tr><th> <code title="">hreflang</code>
     <td> <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>a</a></code>;
          <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>area</a></code>;
          <code title=attr-link-hreflang><a href=#attr-link-hreflang>link</a></code>
     <td> Language of the linked resource
     <td> Valid BCP 47 language tag
    <tr><th> <code title="">http-equiv</code>
     <td> <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>meta</a></code>
     <td> Pragma directive
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">icon</code>
     <td> <code title=attr-command-icon><a href=#attr-command-icon>command</a></code>
     <td> Icon for the command
     <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
    <tr><th> <code title="">id</code>
     <td> <a href=#the-id-attribute title=attr-id>HTML elements</a>
     <td> The element's <a href=#concept-id title=concept-id>ID</a>
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">ismap</code>
     <td> <code title=attr-img-ismap><a href=#attr-img-ismap>img</a></code>
     <td> Whether the image is a server-side image map
     <td> <a href=#boolean-attribute>Boolean attribute</a>

    <tr><th> <code title="">itemid</code>
     <td> <a href=#attr-itemid title=attr-itemid>HTML elements</a>
     <td> <a href=#global-identifier>Global identifier</a> for a microdata item
     <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
    <tr><th> <code title="">itemprop</code>
     <td> <a href=#names:-the-itemprop-attribute title=attr-itemprop>HTML elements</a>
     <td> <a href=#property-names>Property names</a> of a microdata item
     <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of <a href=#absolute-url title="absolute URL">valid absolute URLs</a>, <a href=#defined-property-name title="defined property name">defined property names</a>, or text*
    <tr><th> <code title="">itemref</code>
     <td> <code title=attr-itemref><a href=#attr-itemref>itemref</a></code>
     <td> Referenced elements
     <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of IDs*
    <tr><th> <code title="">itemscope</code>
     <td> <a href=#attr-itemscope title=attr-itemscope>HTML elements</a>
     <td> Introduces a microdata item
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">itemtype</code>
     <td> <a href=#attr-itemtype title=attr-itemtype>HTML elements</a>
     <td> <a href=#item-type>Item type</a> of a microdata item
     <td> <a href=#absolute-url title="absolute URL">Valid absolute URL</a>*

    <tr><th> <code title="">keytype</code>
     <td> <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keygen</a></code>
     <td> The type of cryptographic key to generate
     <td> <a href=#attribute-text>Text</a>*
<!--TT-->
    <tr><th> <code title="">kind</code>
     <td> <code title=attr-track-kind><a href=#attr-track-kind>track</a></code>
     <td> The type of timed track
     <td> "<code title=attr-track-kind-subtitles><a href=#attr-track-kind-subtitles>subtitles</a></code>";
          "<code title=attr-track-kind-captions><a href=#attr-track-kind-captions>captions</a></code>";
          "<code title=attr-track-kind-descriptions><a href=#attr-track-kind-descriptions>descriptions</a></code>";
          "<code title=attr-track-kind-chapters><a href=#attr-track-kind-chapters>chapters</a></code>";
          "<code title=attr-track-kind-metadata><a href=#attr-track-kind-metadata>metadata</a></code>"
<!--TT-->
    <tr><th> <code title="">label</code>
     <td> <code title=attr-command-label><a href=#attr-command-label>command</a></code>;
          <code title=attr-menu-label><a href=#attr-menu-label>menu</a></code>;
          <code title=attr-optgroup-label><a href=#attr-optgroup-label>optgroup</a></code>;
          <code title=attr-option-label><a href=#attr-option-label>option</a></code>;
<!--TT-->
          <code title=attr-track-label><a href=#attr-track-label>track</a></code>
<!--TT-->
     <td> User-visible label
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">lang</code>
     <td> <a href=#attr-lang title=attr-lang>HTML elements</a>
     <td> <a href=#language>Language</a> of the element
     <td> Valid BCP 47 language tag or the empty string
    <tr><th> <code title="">list</code>
     <td> <code title=attr-input-list><a href=#attr-input-list>input</a></code>
     <td> List of autocomplete options
     <td> ID*
    <tr><th> <code title="">loop</code>
     <td> <code title=attr-media-loop><a href=#attr-media-loop>audio</a></code>;
          <code title=attr-media-loop><a href=#attr-media-loop>video</a></code>
     <td> Whether to loop the <a href=#media-resource>media resource</a>
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">low</code>
     <td> <code title=attr-meter-low><a href=#attr-meter-low>meter</a></code>
     <td> High limit of low range
     <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
    <tr><th> <code title="">manifest</code>
     <td> <code title=attr-html-manifest><a href=#attr-html-manifest>html</a></code>
     <td> <a href=#concept-appcache-manifest title=concept-appcache-manifest>Application cache manifest</a>
     <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
    <tr><th> <code title="">max</code>
     <td> <code title=attr-input-max><a href=#attr-input-max>input</a></code>
     <td> Maximum value
     <td> varies*
    <tr><th> <code title="">max</code>
     <td> <code title=attr-meter-max><a href=#attr-meter-max>meter</a></code>;
          <code title=attr-progress-max><a href=#attr-progress-max>progress</a></code>
     <td> Upper bound of range
     <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
    <tr><th> <code title="">maxlength</code>
     <td> <code title=attr-input-maxlength><a href=#attr-input-maxlength>input</a></code>;
          <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>textarea</a></code>
     <td> Maximum length of value
     <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
    <tr><th> <code title="">media</code>
     <td> <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>a</a></code>;
          <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>area</a></code>;
          <code title=attr-link-media><a href=#attr-link-media>link</a></code>;
          <code title=attr-source-media><a href=#attr-source-media>source</a></code>;
          <code title=attr-style-media><a href=#attr-style-media>style</a></code>
     <td> Applicable media
     <td> <a href=#valid-media-query>Valid media query</a>
    <tr><th> <code title="">method</code>
     <td> <code title=attr-fs-method><a href=#attr-fs-method>form</a></code>
     <td> HTTP method to use for <a href=#form-submission>form submission</a>
     <td> "<code title="">GET</code>"; "<code title="">POST</code>"; "<code title="">PUT</code>"; "<code title="">DELETE</code>"
    <tr><th> <code title="">min</code>
     <td> <code title=attr-input-min><a href=#attr-input-min>input</a></code>
     <td> Minimum value
     <td> varies*
    <tr><th> <code title="">min</code>
     <td> <code title=attr-meter-min><a href=#attr-meter-min>meter</a></code>
     <td> Lower bound of range
     <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
    <tr><th> <code title="">multiple</code>
     <td> <code title=attr-input-multiple><a href=#attr-input-multiple>input</a></code>;
          <code title=attr-select-multiple><a href=#attr-select-multiple>select</a></code>
     <td> Whether to allow multiple values
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">name</code>
     <td> <code title=attr-fe-name><a href=#attr-fe-name>button</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>fieldset</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>input</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>keygen</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>output</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>select</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>textarea</a></code>
     <td> Name of form control to use for <a href=#form-submission>form submission</a> and in the <code title=dom-form-elements><a href=#dom-form-elements>form.elements</a></code> API
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">name</code>
     <td> <code title=attr-form-name><a href=#attr-form-name>form</a></code>
     <td> Name of form to use in the <code title=dom-document-forms><a href=#dom-document-forms>document.forms</a></code> API
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">name</code>
     <td> <code title=attr-iframe-name><a href=#attr-iframe-name>iframe</a></code>;
          <code title=attr-object-name><a href=#attr-object-name>object</a></code>
     <td> Name of <a href=#nested-browsing-context>nested browsing context</a>
     <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
    <tr><th> <code title="">name</code>
     <td> <code title=attr-map-name><a href=#attr-map-name>map</a></code>
     <td> Name of <a href=#image-map>image map</a> to reference from the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">name</code>
     <td> <code title=attr-meta-name><a href=#attr-meta-name>meta</a></code>
     <td> Metadata name
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">name</code>
     <td> <code title=attr-param-name><a href=#attr-param-name>param</a></code>
     <td> Name of parameter
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">novalidate</code>
     <td> <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>form</a></code>
     <td> Bypass form control validation for <a href=#form-submission>form submission</a>
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">open</code>
     <td> <code title=attr-details-open><a href=#attr-details-open>details</a></code>
     <td> Whether the details are visible
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">optimum</code>
     <td> <code title=attr-meter-optimum><a href=#attr-meter-optimum>meter</a></code>
     <td> Optimum value in gauge
     <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
    <tr><th> <code title="">pattern</code>
     <td> <code title=attr-input-pattern><a href=#attr-input-pattern>input</a></code>
     <td> Pattern to be matched by the form control's value
     <td> Regular expression matching the JavaScript <i title="">Pattern</i> production
<!--PING-->
    <tr><th> <code title="">ping</code>
     <td> <code title=attr-hyperlink-ping><a href=#ping>a</a></code>;
          <code title=attr-hyperlink-ping><a href=#ping>area</a></code>
     <td> <a href=#url title=URL>URLs</a> to ping
     <td> <a href=#set-of-space-separated-tokens>Set of space-separated tokens</a> consisting of <a href=#valid-non-empty-url title="valid non-empty URL">valid non-empty URLs</a>
<!--PING-->
    <tr><th> <code title="">placeholder</code>
     <td> <code title=attr-input-placeholder><a href=#attr-input-placeholder>input</a></code>;
          <code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>textarea</a></code>
     <td> User-visible label to be placed within the form control
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">poster</code>
     <td> <code title=attr-video-poster><a href=#attr-video-poster>video</a></code>
     <td> Poster frame to show prior to video playback
     <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
    <tr><th> <code title="">preload</code>
     <td> <code title=attr-media-preload><a href=#attr-media-preload>audio</a></code>;
          <code title=attr-media-preload><a href=#attr-media-preload>video</a></code>
     <td> Hints how much buffering the <a href=#media-resource>media resource</a> will likely need
     <td> "<code title=attr-media-preload-none><a href=#attr-media-preload-none>none</a></code>";
          "<code title=attr-media-preload-metadata><a href=#attr-media-preload-metadata>metadata</a></code>";
          "<code title=attr-media-preload-auto><a href=#attr-media-preload-auto>auto</a></code>"
    <tr><th> <code title="">pubdate</code>
     <td> <code title=attr-time-pubdate><a href=#attr-time-pubdate>time</a></code>
     <td> Whether the element's value represents a publication time for the nearest <code><a href=#the-article-element>article</a></code> or <code><a href=#the-body-element-0>body</a></code>
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">radiogroup</code>
     <td> <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>command</a></code>
     <td> Name of group of commands to treat as a radio button group
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">readonly</code>
     <td> <code title=attr-input-readonly><a href=#attr-input-readonly>input</a></code>;
          <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>textarea</a></code>
     <td> Whether to allow the value to be edited by the user
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">rel</code>
     <td> <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>a</a></code>;
          <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>area</a></code>;
          <code title=attr-link-rel><a href=#attr-link-rel>link</a></code>
     <td> Relationship between the document containing the hyperlink and the destination resource
     <td> <a href=#set-of-space-separated-tokens>Set of space-separated tokens</a>*
    <tr><th> <code title="">required</code>
     <td> <code title=attr-input-required><a href=#attr-input-required>input</a></code>;
          <code title=attr-textarea-required><a href=#attr-textarea-required>textarea</a></code>
     <td> Whether the control is required for <a href=#form-submission>form submission</a>
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">reversed</code>
     <td> <code title=attr-ol-reversed><a href=#attr-ol-reversed>ol</a></code>
     <td> Number the list backwards
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">rows</code>
     <td> <code title=attr-textarea-rows><a href=#attr-textarea-rows>textarea</a></code>
     <td> Number of lines to show
     <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
    <tr><th> <code title="">rowspan</code>
     <td> <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>td</a></code>;
          <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>th</a></code>
     <td> Number of rows that the cell is to span
     <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
    <tr><th> <code title="">sandbox</code>
     <td> <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>iframe</a></code>
     <td> Security rules for nested content
     <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of
          "<code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>",
          "<code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code>", and
          "<code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>"
    <tr><th> <code title="">spellcheck</code>
     <td> <a href=#attr-spellcheck title=attr-spellcheck>HTML elements</a>
     <td> Whether the element is to have its spelling and grammar checked
     <td> "<code title="">true</code>"; "<code title="">false</code>"
    <tr><th> <code title="">scope</code>
     <td> <code title=attr-th-scope><a href=#attr-th-scope>th</a></code>
     <td> Specifies which cells the header cell applies to
     <td> "<code title=attr-th-scope-row><a href=#attr-th-scope-row>row</a></code>";
          "<code title=attr-th-scope-col><a href=#attr-th-scope-col>col</a></code>";
          "<code title=attr-th-scope-rowgroup><a href=#attr-th-scope-rowgroup>rowgroup</a></code>";
          "<code title=attr-th-scope-colgroup><a href=#attr-th-scope-colgroup>colgroup</a></code>"
    <tr><th> <code title="">scoped</code>
     <td> <code title=attr-style-scoped><a href=#attr-style-scoped>style</a></code>
     <td> Whether the styles apply to the entire document or just the parent subtree
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">seamless</code>
     <td> <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>iframe</a></code>
     <td> Whether to apply the document's styles to the nested content
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">selected</code>
     <td> <code title=attr-option-selected><a href=#attr-option-selected>option</a></code>
     <td> Whether the option is selected by default
     <td> <a href=#boolean-attribute>Boolean attribute</a>
    <tr><th> <code title="">shape</code>
     <td> <code title=attr-area-shape><a href=#attr-area-shape>area</a></code>
     <td> The kind of shape to be created in an <a href=#image-map>image map</a>
     <td> "<code title=attr-area-shape-keyword-circle><a href=#attr-area-shape-keyword-circle>circle</a></code>";
          "<code title=attr-area-shape-keyword-default><a href=#attr-area-shape-keyword-default>default</a></code>";
          "<code title=attr-area-shape-keyword-poly><a href=#attr-area-shape-keyword-poly>poly</a></code>";
          "<code title=attr-area-shape-keyword-rect><a href=#attr-area-shape-keyword-rect>rect</a></code>"
    <tr><th> <code title="">size</code>
     <td> <code title=attr-input-size><a href=#attr-input-size>input</a></code>;
          <code title=attr-select-size><a href=#attr-select-size>select</a></code>
     <td> Size of the control
     <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
    <tr><th> <code title="">sizes</code>
     <td> <code title=attr-link-sizes><a href=#attr-link-sizes>link</a></code>
     <td> Sizes of the icons (for <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code>="<code title=rel-icon><a href=#rel-icon>icon</a></code>")
     <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of sizes*
    <tr><th> <code title="">span</code>
     <td> <code title=attr-col-span><a href=#attr-col-span>col</a></code>;
          <code title=attr-colgroup-span><a href=#attr-colgroup-span>colgroup</a></code>
     <td> Number of columns spanned by the element
     <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
    <tr><th> <code title="">src</code>
     <td> <code title=attr-media-src><a href=#attr-media-src>audio</a></code>;
          <code title=attr-embed-src><a href=#attr-embed-src>embed</a></code>;
          <code title=attr-iframe-src><a href=#attr-iframe-src>iframe</a></code>;
          <code title=attr-img-src><a href=#attr-img-src>img</a></code>;
          <code title=attr-input-src><a href=#attr-input-src>input</a></code>;
          <code title=attr-script-src><a href=#attr-script-src>script</a></code>;
          <code title=attr-source-src><a href=#attr-source-src>source</a></code>;
<!--TT-->
          <code title=attr-track-src><a href=#attr-track-src>track</a></code>;
<!--TT-->
          <code title=attr-media-src><a href=#attr-media-src>video</a></code>
     <td> Address of the resource
     <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
    <tr><th> <code title="">srcdoc</code>
     <td> <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>iframe</a></code>
     <td> A document to render in the <code><a href=#the-iframe-element>iframe</a></code>
     <td> The source of <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a>*
<!--TT-->
    <tr><th> <code title="">srclang</code>
     <td> <code title=attr-track-srclang><a href=#attr-track-srclang>track</a></code>
     <td> Language of the timed track
     <td> Valid BCP 47 language tag
<!--TT-->
    <tr><th> <code title="">start</code>
     <td> <code title=attr-ol-start><a href=#attr-ol-start>ol</a></code>
     <td> Ordinal value of the first item
     <td> <a href=#valid-integer>Valid integer</a>
    <tr><th> <code title="">step</code>
     <td> <code title=attr-input-step><a href=#attr-input-step>input</a></code>
     <td> Granularity to be matched by the form control's value
     <td> <a href=#valid-floating-point-number>Valid floating point number</a> greater than zero, or "<code title="">any</code>"
    <tr><th> <code title="">style</code>
     <td> <a href=#the-style-attribute title=attr-style>HTML elements</a>
     <td> Presentational and formatting instructions
     <td> CSS declarations*
    <tr><th> <code title="">summary</code>
     <td> <code title=attr-table-summary><a href=#attr-table-summary>table</a></code>
     <td> Explanatory text for complex tables for users of screen readers
     <td> <a href=#attribute-text>Text</a>*
    <tr><th> <code title="">tabindex</code>
     <td> <a href=#attr-tabindex title=attr-tabindex>HTML elements</a>
     <td> Whether the element is focusable, and the relative order of the element for the purposes of sequential focus navigation
     <td> <a href=#valid-integer>Valid integer</a>
    <tr><th> <code title="">target</code>
     <td> <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>a</a></code>;
          <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>area</a></code>
     <td> <a href=#browsing-context>Browsing context</a> for <a href=#hyperlink>hyperlink</a> <a href=#navigate title=navigate>navigation</a>
     <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
    <tr><th> <code title="">target</code>
     <td> <code title=attr-base-target><a href=#attr-base-target>base</a></code>
     <td> Default <a href=#browsing-context>browsing context</a> for <a href=#hyperlink>hyperlink</a> <a href=#navigate title=navigate>navigation</a> and <a href=#form-submission>form submission</a>
     <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
    <tr><th> <code title="">target</code>
     <td> <code title=attr-fs-target><a href=#attr-fs-target>form</a></code>
     <td> <a href=#browsing-context>Browsing context</a> for <a href=#form-submission>form submission</a>
     <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
    <tr><th> <code title="">title</code>
     <td> <a href=#the-title-attribute title=attr-title>HTML elements</a>
     <td> Advisory information for the element
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">title</code>
     <td> <code title=attr-abbr-title><a href=#attr-abbr-title>abbr</a></code>;
          <code title=attr-dfn-title><a href=#attr-dfn-title>dfn</a></code>
     <td> Full term or expansion of abbreviation
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">title</code>
     <td> <code title=attr-command-title><a href=#attr-command-title>command</a></code>
     <td> Hint describing the command
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">title</code>
     <td> <code title=attr-link-title><a href=#attr-link-title>link</a></code>
     <td> Title of the link
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">title</code>
     <td> <code title=attr-link-title><a href=#attr-link-title>link</a></code>;
          <code title=attr-style-title><a href=#attr-style-title>style</a></code>
     <td> Alternative style sheet set name
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">type</code>
     <td> <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>a</a></code>;
          <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>area</a></code>;
          <code title=attr-link-type><a href=#attr-link-type>link</a></code>
     <td> Hint for the type of the referenced resource
     <td> <a href=#valid-mime-type>Valid MIME type</a>
    <tr><th> <code title="">type</code>
     <td> <code title=attr-button-type><a href=#attr-button-type>button</a></code>
     <td> Type of button
     <td> "<code title=attr-button-type-submit><a href=#attr-button-type-submit>submit</a></code>";
          "<code title=attr-button-type-reset><a href=#attr-button-type-reset>reset</a></code>";
          "<code title=attr-button-type-button><a href=#attr-button-type-button>button</a></code>"
    <tr><th> <code title="">type</code>
     <td> <code title=attr-button-type><a href=#attr-button-type>button</a></code>;
          <code title=attr-input-type><a href=#attr-input-type>input</a></code>
     <td> Type of form control
     <td> <a href=#attr-input-type title=attr-input-type><code>input</code> type keyword</a>
    <tr><th> <code title="">type</code>
     <td> <code title=attr-command-type><a href=#attr-command-type>command</a></code>
     <td> Type of command
     <td> "<code title=attr-command-type-keyword-command><a href=#attr-command-type-keyword-command>command</a></code>";
          "<code title=attr-command-type-keyword-checkbox><a href=#attr-command-type-keyword-checkbox>checkbox</a></code>";
          "<code title=attr-command-type-keyword-radio><a href=#attr-command-type-keyword-radio>radio</a></code>"
    <tr><th> <code title="">type</code>
     <td> <code title=attr-embed-type><a href=#attr-embed-type>embed</a></code>;
          <code title=attr-object-type><a href=#attr-object-type>object</a></code>;
          <code title=attr-script-type><a href=#attr-script-type>script</a></code>;
          <code title=attr-source-type><a href=#attr-source-type>source</a></code>;
          <code title=attr-style-type><a href=#attr-style-type>style</a></code>
     <td> Type of embedded resource
     <td> <a href=#valid-mime-type>Valid MIME type</a>
    <tr><th> <code title="">type</code>
     <td> <code title=attr-menu-type><a href=#attr-menu-type>menu</a></code>
     <td> Type of menu
     <td> "<code title="context menu state"><a href=#context-menu-state>context</a></code>"; "<code title="toolbar state"><a href=#toolbar-state>toolbar</a></code>"
    <tr><th> <code title="">usemap</code>
     <td> <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>img</a></code>;
          <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>object</a></code>
     <td> Name of <a href=#image-map>image map</a> to use
     <td> <a href=#valid-hash-name-reference>Valid hash-name reference</a>*
    <tr><th> <code title="">value</code>
     <td> <code title=attr-button-value><a href=#attr-button-value>button</a></code>;
          <code title=attr-option-value><a href=#attr-option-value>option</a></code>
     <td> Value to be used for <a href=#form-submission>form submission</a>
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">value</code>
     <td> <code title=attr-input-value><a href=#attr-input-value>input</a></code>
     <td> Value of the form control
     <td> varies*
    <tr><th> <code title="">value</code>
     <td> <code title=attr-li-value><a href=#attr-li-value>li</a></code>
     <td> Ordinal value of the list item
     <td> <a href=#valid-integer>Valid integer</a>
    <tr><th> <code title="">value</code>
     <td> <code title=attr-meter-value><a href=#attr-meter-value>meter</a></code>;
          <code title=attr-progress-value><a href=#attr-progress-value>progress</a></code>
     <td> Current value of the element
     <td> <a href=#valid-floating-point-number>Valid floating point number</a>
    <tr><th> <code title="">value</code>
     <td> <code title=attr-param-value><a href=#attr-param-value>param</a></code>
     <td> Value of parameter
     <td> <a href=#attribute-text>Text</a>
    <tr><th> <code title="">width</code>
     <td> <code title=attr-canvas-width><a href=#attr-canvas-width>canvas</a></code>;
          <code title=attr-dim-width><a href=#attr-dim-width>embed</a></code>;
          <code title=attr-dim-width><a href=#attr-dim-width>iframe</a></code>;
          <code title=attr-dim-width><a href=#attr-dim-width>img</a></code>;
          <code title=attr-dim-width><a href=#attr-dim-width>input</a></code>;
          <code title=attr-dim-width><a href=#attr-dim-width>object</a></code>;
          <code title=attr-dim-width><a href=#attr-dim-width>video</a></code>
     <td> Horizontal dimension
     <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
    <tr><th> <code title="">wrap</code>
     <td> <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>textarea</a></code>
     <td> How the value of the form control is to be wrapped for <a href=#form-submission>form submission</a>
     <td> "<code title=attr-textarea-wrap-soft><a href=#attr-textarea-wrap-soft>soft</a></code>";
          "<code title=attr-textarea-wrap-hard><a href=#attr-textarea-wrap-hard>hard</a></code>"
  </table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>

  <hr><table><caption>List of event handler content attributes</caption>
   <thead><tr><th> Attribute
     <th> Element(s)
     <th> Description
     <th> Value
   <tbody><tr><th> <code title="">onabort</code>
     <td> <a href=#handler-onabort title=handler-onabort>HTML elements</a>
     <td> <code title=event-abort>abort</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onafterprint</code>
     <td> <code title=handler-window-onafterprint><a href=#handler-window-onafterprint>body</a></code>
     <td> <code title=event-afterprint>afterprint</code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onbeforeprint</code>
     <td> <code title=handler-window-onbeforeprint><a href=#handler-window-onbeforeprint>body</a></code>
     <td> <code title=event-beforeprint>beforeprint</code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onbeforeunload</code>
     <td> <code title=handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>body</a></code>
     <td> <code title=event-beforeunload>beforeunload</code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onblur</code>
     <td> <code title=handler-window-onblur><a href=#handler-window-onblur>body</a></code>
     <td> <code title=event-blur>blur</code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onblur</code>
     <td> <a href=#handler-onblur title=handler-onblur>HTML elements</a>
     <td> <code title=event-blur>blur</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">oncanplay</code>
     <td> <a href=#handler-oncanplay title=handler-oncanplay>HTML elements</a>
     <td> <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">oncanplaythrough</code>
     <td> <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>HTML elements</a>
     <td> <code title=event-media-canplaythrough><a href=#event-media-canplaythrough>canplaythrough</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onchange</code>
     <td> <a href=#handler-onchange title=handler-onchange>HTML elements</a>
     <td> <code title=event-change>change</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onclick</code>
     <td> <a href=#handler-onclick title=handler-onclick>HTML elements</a>
     <td> <code title=event-click><a href=#event-click>click</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">oncontextmenu</code>
     <td> <a href=#handler-oncontextmenu title=handler-oncontextmenu>HTML elements</a>
     <td> <code title=event-contextmenu>contextmenu</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ondblclick</code>
     <td> <a href=#handler-ondblclick title=handler-ondblclick>HTML elements</a>
     <td> <code title=event-dblclick>dblclick</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ondrag</code>
     <td> <a href=#handler-ondrag title=handler-ondrag>HTML elements</a>
     <td> <code title=event-drag><a href=#event-drag>drag</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ondragend</code>
     <td> <a href=#handler-ondragend title=handler-ondragend>HTML elements</a>
     <td> <code title=event-dragend><a href=#event-dragend>dragend</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ondragenter</code>
     <td> <a href=#handler-ondragenter title=handler-ondragenter>HTML elements</a>
     <td> <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ondragleave</code>
     <td> <a href=#handler-ondragleave title=handler-ondragleave>HTML elements</a>
     <td> <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ondragover</code>
     <td> <a href=#handler-ondragover title=handler-ondragover>HTML elements</a>
     <td> <code title=event-dragover><a href=#event-dragover>dragover</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ondragstart</code>
     <td> <a href=#handler-ondragstart title=handler-ondragstart>HTML elements</a>
     <td> <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ondrop</code>
     <td> <a href=#handler-ondrop title=handler-ondrop>HTML elements</a>
     <td> <code title=event-drop><a href=#event-drop>drop</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ondurationchange</code>
     <td> <a href=#handler-ondurationchange title=handler-ondurationchange>HTML elements</a>
     <td> <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onemptied</code>
     <td> <a href=#handler-onemptied title=handler-onemptied>HTML elements</a>
     <td> <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onended</code>
     <td> <a href=#handler-onended title=handler-onended>HTML elements</a>
     <td> <code title=event-media-ended><a href=#event-media-ended>ended</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onerror</code>
     <td> <code title=handler-window-onerror><a href=#handler-window-onerror>body</a></code>
     <td> <code title=event-error>error</code> event handler for <code><a href=#window>Window</a></code> object, and handler for <a href=#runtime-script-errors>script error notifications</a>
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onerror</code>
     <td> <a href=#handler-onerror title=handler-onerror>HTML elements</a>
     <td> <code title=event-error>error</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onfocus</code>
     <td> <code title=handler-window-onfocus><a href=#handler-window-onfocus>body</a></code>
     <td> <code title=event-focus>focus</code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onfocus</code>
     <td> <a href=#handler-onfocus title=handler-onfocus>HTML elements</a>
     <td> <code title=event-focus>focus</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onformchange</code>
     <td> <a href=#handler-onformchange title=handler-onformchange>HTML elements</a>
     <td> <code title=event-formchange>formchange</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onforminput</code>
     <td> <a href=#handler-onforminput title=handler-onforminput>HTML elements</a>
     <td> <code title=event-forminput>forminput</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onhashchange</code>
     <td> <code title=handler-window-onhashchange><a href=#handler-window-onhashchange>body</a></code>
     <td> <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">oninput</code>
     <td> <a href=#handler-oninput title=handler-oninput>HTML elements</a>
     <td> <code title=event-input>input</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">oninvalid</code>
     <td> <a href=#handler-oninvalid title=handler-oninvalid>HTML elements</a>
     <td> <code title=event-invalid>invalid</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onkeydown</code>
     <td> <a href=#handler-onkeydown title=handler-onkeydown>HTML elements</a>
     <td> <code title=event-keydown>keydown</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onkeypress</code>
     <td> <a href=#handler-onkeypress title=handler-onkeypress>HTML elements</a>
     <td> <code title=event-keypress>keypress</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onkeyup</code>
     <td> <a href=#handler-onkeyup title=handler-onkeyup>HTML elements</a>
     <td> <code title=event-keyup>keyup</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onload</code>
     <td> <code title=handler-window-onload><a href=#handler-window-onload>body</a></code>
     <td> <code title=event-load>load</code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onload</code>
     <td> <a href=#handler-onload title=handler-onload>HTML elements</a>
     <td> <code title=event-load>load</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onloadeddata</code>
     <td> <a href=#handler-onloadeddata title=handler-onloadeddata>HTML elements</a>
     <td> <code title=event-media-loadeddata><a href=#event-media-loadeddata>loadeddata</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onloadedmetadata</code>
     <td> <a href=#handler-onloadedmetadata title=handler-onloadedmetadata>HTML elements</a>
     <td> <code title=event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onloadstart</code>
     <td> <a href=#handler-onloadstart title=handler-onloadstart>HTML elements</a>
     <td> <code title=event-media-loadstart><a href=#event-media-loadstart>loadstart</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onmessage</code>
     <td> <code title=handler-window-onmessage><a href=#handler-window-onmessage>body</a></code>
     <td> <code title=event-message><a href=#event-message>message</a></code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onmousedown</code>
     <td> <a href=#handler-onmousedown title=handler-onmousedown>HTML elements</a>
     <td> <code title=event-mousedown>mousedown</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onmousemove</code>
     <td> <a href=#handler-onmousemove title=handler-onmousemove>HTML elements</a>
     <td> <code title=event-mousemove>mousemove</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onmouseout</code>
     <td> <a href=#handler-onmouseout title=handler-onmouseout>HTML elements</a>
     <td> <code title=event-mouseout>mouseout</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onmouseover</code>
     <td> <a href=#handler-onmouseover title=handler-onmouseover>HTML elements</a>
     <td> <code title=event-mouseover>mouseover</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onmouseup</code>
     <td> <a href=#handler-onmouseup title=handler-onmouseup>HTML elements</a>
     <td> <code title=event-mouseup>mouseup</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onmousewheel</code>
     <td> <a href=#handler-onmousewheel title=handler-onmousewheel>HTML elements</a>
     <td> <code title=event-mousewheel>mousewheel</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onoffline</code>
     <td> <code title=handler-window-onoffline><a href=#handler-window-onoffline>body</a></code>
     <td> <code title=event-offline><a href=#event-offline>offline</a></code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ononline</code>
     <td> <code title=handler-window-ononline><a href=#handler-window-ononline>body</a></code>
     <td> <code title=event-online><a href=#event-online>online</a></code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onpause</code>
     <td> <a href=#handler-onpause title=handler-onpause>HTML elements</a>
     <td> <code title=event-media-pause><a href=#event-media-pause>pause</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onplay</code>
     <td> <a href=#handler-onplay title=handler-onplay>HTML elements</a>
     <td> <code title=event-media-play><a href=#event-media-play>play</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onplaying</code>
     <td> <a href=#handler-onplaying title=handler-onplaying>HTML elements</a>
     <td> <code title=event-media-playing><a href=#event-media-playing>playing</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onpagehide</code>
     <td> <code title=handler-window-onpagehide><a href=#handler-window-onpagehide>body</a></code>
     <td> <code title=event-pagehide><a href=#event-pagehide>pagehide</a></code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onpageshow</code>
     <td> <code title=handler-window-onpageshow><a href=#handler-window-onpageshow>body</a></code>
     <td> <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onpopstate</code>
     <td> <code title=handler-window-onpopstate><a href=#handler-window-onpopstate>body</a></code>
     <td> <code title=event-popstate><a href=#event-popstate>popstate</a></code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onprogress</code>
     <td> <a href=#handler-onprogress title=handler-onprogress>HTML elements</a>
     <td> <code title=event-media-progress><a href=#event-media-progress>progress</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onratechange</code>
     <td> <a href=#handler-onratechange title=handler-onratechange>HTML elements</a>
     <td> <code title=event-media-ratechange><a href=#event-media-ratechange>ratechange</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onreadystatechange</code>
     <td> <a href=#handler-onreadystatechange title=handler-onreadystatechange>HTML elements</a>
     <td> <code title=event-readystatechange>readystatechange</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onredo</code>
     <td> <code title=handler-window-onredo><a href=#handler-window-onredo>body</a></code>
     <td> <code title=event-redo><a href=#event-redo>redo</a></code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onresize</code>
     <td> <code title=handler-window-onresize><a href=#handler-window-onresize>body</a></code>
     <td> <code title=event-resize>resize</code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onscroll</code>
     <td> <a href=#handler-onscroll title=handler-onscroll>HTML elements</a>
     <td> <code title=event-scroll>scroll</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onseeked</code>
     <td> <a href=#handler-onseeked title=handler-onseeked>HTML elements</a>
     <td> <code title=event-media-seeked><a href=#event-media-seeked>seeked</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onseeking</code>
     <td> <a href=#handler-onseeking title=handler-onseeking>HTML elements</a>
     <td> <code title=event-media-seeking><a href=#event-media-seeking>seeking</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onselect</code>
     <td> <a href=#handler-onselect title=handler-onselect>HTML elements</a>
     <td> <code title=event-select>select</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onshow</code>
     <td> <a href=#handler-onshow title=handler-onshow>HTML elements</a>
     <td> <code title=event-show>show</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onstalled</code>
     <td> <a href=#handler-onstalled title=handler-onstalled>HTML elements</a>
     <td> <code title=event-media-stalled><a href=#event-media-stalled>stalled</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onstorage</code>
     <td> <code title=handler-window-onstorage><a href=#handler-window-onstorage>body</a></code>
     <td> <code title=event-storage>storage</code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onsubmit</code>
     <td> <a href=#handler-onsubmit title=handler-onsubmit>HTML elements</a>
     <td> <code title=event-submit>submit</code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onsuspend</code>
     <td> <a href=#handler-onsuspend title=handler-onsuspend>HTML elements</a>
     <td> <code title=event-media-suspend><a href=#event-media-suspend>suspend</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">ontimeupdate</code>
     <td> <a href=#handler-ontimeupdate title=handler-ontimeupdate>HTML elements</a>
     <td> <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onundo</code>
     <td> <code title=handler-window-onundo><a href=#handler-window-onundo>body</a></code>
     <td> <code title=event-undo><a href=#event-undo>undo</a></code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onunload</code>
     <td> <code title=handler-window-onunload><a href=#handler-window-onunload>body</a></code>
     <td> <code title=event-unload>unload</code> event handler for <code><a href=#window>Window</a></code> object
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onvolumechange</code>
     <td> <a href=#handler-onvolumechange title=handler-onvolumechange>HTML elements</a>
     <td> <code title=event-media-volumechange><a href=#event-media-volumechange>volumechange</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

    <tr><th> <code title="">onwaiting</code>
     <td> <a href=#handler-onwaiting title=handler-onwaiting>HTML elements</a>
     <td> <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> event handler
     <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>

  </table><!-- v2 for completeness: (also search for REFLECTIDL)
  <h3 class="no-num">Reflecting IDL attributes</h3>

  <p><i>This section is non-normative.</i></p>

  <table>
   <caption>List of <dfn>reflecting IDL attributes</dfn></caption>
   <thead>
    <tr>
     <th> Interface
     <th> Element(s)
     <th> IDL attribute
     <th> Reflects...
   <tbody>
    ...
    <tr>
     <td> <code>HTMLElement</code>
     <td> <span>HTML elements</span>
     <td> <code title="dom-contextMenu">contextMenu</code>
     <td> <code title="attr-contextmenu">contextmenu</code>
    <tr>
     <td> <code>HTMLOptionElement</code>
     <td> <code>option</code>
     <td> <code title="dom-option-text">text</code>
     <td> <code>textContent</code>
  </table>
  ( include option.text; textarea.defaultValue, and other attributes that "reflect" the element's textContent )
--><h3 class=no-num id=interfaces>Interfaces</h3>

  <p><i>This section is non-normative.</i></p>

  <table><caption>List of interfaces for elements</caption>
   <thead><tr><th> Element(s)
     <th> Interface(s)
   <tbody><tr><td> <code><a href=#the-a-element>a</a></code>
     <td> <code><a href=#htmlanchorelement>HTMLAnchorElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-abbr-element>abbr</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-address-element>address</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-area-element>area</a></code>
     <td> <code><a href=#htmlareaelement>HTMLAreaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-article-element>article</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-aside-element>aside</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#audio>audio</a></code>
     <td> <code><a href=#htmlaudioelement>HTMLAudioElement</a></code> : <code><a href=#htmlmediaelement>HTMLMediaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-b-element>b</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-base-element>base</a></code>
     <td> <code><a href=#htmlbaseelement>HTMLBaseElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-bdo-element>bdo</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-blockquote-element>blockquote</a></code>
     <td> <code><a href=#htmlquoteelement>HTMLQuoteElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-body-element-0>body</a></code>
     <td> <code><a href=#htmlbodyelement>HTMLBodyElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-br-element>br</a></code>
     <td> <code><a href=#htmlbrelement>HTMLBRElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-button-element>button</a></code>
     <td> <code><a href=#htmlbuttonelement>HTMLButtonElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-canvas-element>canvas</a></code>
     <td> <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-caption-element>caption</a></code>
     <td> <code><a href=#htmltablecaptionelement>HTMLTableCaptionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-cite-element>cite</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-code-element>code</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-col-element>col</a></code>
     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-colgroup-element>colgroup</a></code>
     <td> <code><a href=#htmltablecolelement>HTMLTableColElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-command>command</a></code>
     <td> <code><a href=#htmlcommandelement>HTMLCommandElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-datalist-element>datalist</a></code>
     <td> <code><a href=#htmldatalistelement>HTMLDataListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-dd-element>dd</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-del-element>del</a></code>
     <td> <code><a href=#htmlmodelement>HTMLModElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-details-element>details</a></code>
     <td> <code><a href=#htmldetailselement>HTMLDetailsElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-div-element>div</a></code>
     <td> <code><a href=#htmldivelement>HTMLDivElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-dl-element>dl</a></code>
     <td> <code><a href=#htmldlistelement>HTMLDListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-dt-element>dt</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-em-element>em</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-embed-element>embed</a></code>
     <td> <code><a href=#htmlembedelement>HTMLEmbedElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-fieldset-element>fieldset</a></code>
     <td> <code><a href=#htmlfieldsetelement>HTMLFieldSetElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-figcaption-element>figcaption</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-figure-element>figure</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-footer-element>footer</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-form-element>form</a></code>
     <td> <code><a href=#htmlformelement>HTMLFormElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-head-element-0>head</a></code>
     <td> <code><a href=#htmlheadelement>HTMLHeadElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>
     <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>
     <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>
     <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>
     <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>
     <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>
     <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-header-element>header</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-hgroup-element>hgroup</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-hr-element>hr</a></code>
     <td> <code><a href=#htmlhrelement>HTMLHRElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-html-element-0>html</a></code>
     <td> <code><a href=#htmlhtmlelement>HTMLHtmlElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-i-element>i</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-iframe-element>iframe</a></code>
     <td> <code><a href=#htmliframeelement>HTMLIFrameElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-img-element>img</a></code>
     <td> <code><a href=#htmlimageelement>HTMLImageElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-input-element>input</a></code>
     <td> <code><a href=#htmlinputelement>HTMLInputElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-ins-element>ins</a></code>
     <td> <code><a href=#htmlmodelement>HTMLModElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-kbd-element>kbd</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-keygen-element>keygen</a></code>
     <td> <code><a href=#htmlkeygenelement>HTMLKeygenElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-label-element>label</a></code>
     <td> <code><a href=#htmllabelelement>HTMLLabelElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-legend-element>legend</a></code>
     <td> <code><a href=#htmllegendelement>HTMLLegendElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-li-element>li</a></code>
     <td> <code><a href=#htmllielement>HTMLLIElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-link-element>link</a></code>
     <td> <code><a href=#htmllinkelement>HTMLLinkElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-map-element>map</a></code>
     <td> <code><a href=#htmlmapelement>HTMLMapElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-mark-element>mark</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-meter-element>meter</a></code>
     <td> <code><a href=#htmlmeterelement>HTMLMeterElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-nav-element>nav</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-noscript-element>noscript</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-object-element>object</a></code>
     <td> <code><a href=#htmlobjectelement>HTMLObjectElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-ol-element>ol</a></code>
     <td> <code><a href=#htmlolistelement>HTMLOListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-optgroup-element>optgroup</a></code>
     <td> <code><a href=#htmloptgroupelement>HTMLOptGroupElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-option-element>option</a></code>
     <td> <code><a href=#htmloptionelement>HTMLOptionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-output-element>output</a></code>
     <td> <code><a href=#htmloutputelement>HTMLOutputElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-p-element>p</a></code>
     <td> <code><a href=#htmlparagraphelement>HTMLParagraphElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-param-element>param</a></code>
     <td> <code><a href=#htmlparamelement>HTMLParamElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-pre-element>pre</a></code>
     <td> <code><a href=#htmlpreelement>HTMLPreElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-progress-element>progress</a></code>
     <td> <code><a href=#htmlprogresselement>HTMLProgressElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-q-element>q</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-rp-element>rp</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-rt-element>rt</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-ruby-element>ruby</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-samp-element>samp</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-section-element>section</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-select-element>select</a></code>
     <td> <code><a href=#htmlselectelement>HTMLSelectElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-small-element>small</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-source-element>source</a></code>
     <td> <code><a href=#htmlsourceelement>HTMLSourceElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-span-element>span</a></code>
     <td> <code><a href=#htmlspanelement>HTMLSpanElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-strong-element>strong</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-style-element>style</a></code>
     <td> <code><a href=#htmlstyleelement>HTMLStyleElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-sub-and-sup-elements>sub</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-summary-element>summary</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-sub-and-sup-elements>sup</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-table-element>table</a></code>
     <td> <code><a href=#htmltableelement>HTMLTableElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-tbody-element>tbody</a></code>
     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-td-element>td</a></code>
     <td> <code><a href=#htmltabledatacellelement>HTMLTableDataCellElement</a></code> : <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-textarea-element>textarea</a></code>
     <td> <code><a href=#htmltextareaelement>HTMLTextAreaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-tfoot-element>tfoot</a></code>
     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-th-element>th</a></code>
     <td> <code><a href=#htmltableheadercellelement>HTMLTableHeaderCellElement</a></code> : <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-thead-element>thead</a></code>
     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-time-element>time</a></code>
     <td> <code><a href=#htmltimeelement>HTMLTimeElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-title-element-0>title</a></code>
     <td> <code><a href=#htmltitleelement>HTMLTitleElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-tr-element>tr</a></code>
     <td> <code><a href=#htmltablerowelement>HTMLTableRowElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

<!--TT-->
    <tr><td> <code><a href=#the-track-element>track</a></code>
     <td> <code><a href=#htmltrackelement>HTMLTrackElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
<!--TT-->

    <tr><td> <code><a href=#the-ul-element>ul</a></code>
     <td> <code><a href=#htmlulistelement>HTMLUListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-var-element>var</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#video>video</a></code>
     <td> <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> : <code><a href=#htmlmediaelement>HTMLMediaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

    <tr><td> <code><a href=#the-wbr-element>wbr</a></code>
     <td> <code><a href=#htmlelement>HTMLElement</a></code>

  </table><!-- (only has events from HTML5) --><h3 class=no-num id=events-0>Events</h3>

  <p><i>This section is non-normative.</i></p>

  <table><caption>List of events</caption>
   <thead><tr><th> Event
     <th> Interface
     <th> Description
   <tbody><tr><td> <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at an element before its <a href=#activation-behavior>activation behavior</a> is run

    <tr><td> <code title=event-DOMContentLoaded>DOMContentLoaded</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at the <code><a href=#document>Document</a></code> once it and its scripts have loaded, without waiting for other subresources

    <tr><td> <code title=event-abort>abort</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> when the download was aborted by the user

    <tr><td> <code title=event-afterprint>afterprint</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> after printing

    <tr><td> <code title=event-beforeprint>beforeprint</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> before printing

    <tr><td> <code title=event-beforeunload>beforeunload</code>
     <td> <code><a href=#beforeunloadevent>BeforeUnloadEvent</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> when the page is about to be unloaded, in case the page would like to show a warning prompt

    <tr><td> <code title=event-blur>blur</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at nodes losing focus

    <tr><td> <code title=event-change>change</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at controls when the user commits a value change

    <tr><td> <code title=event-contextmenu>contextmenu</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at elements when the user requests their context menu

    <tr><td> <code title=event-error>error</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at elements when network and script errors occur

    <tr><td> <code title=event-focus>focus</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at nodes gaining focus

    <tr><td> <code title=event-formchange>formchange</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at form controls when the user commits a value change to a control on the form

    <tr><td> <code title=event-forminput>forminput</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at form controls when the user changes the value of a control on the form

    <tr><td> <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code>
     <td> <code><a href=#hashchangeevent>HashChangeEvent</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> when the fragment identifier part of <a href="#the-document's-current-address">the document's current address</a> changes

    <tr><td> <code title=event-input>input</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at controls when the user changes the value

    <tr><td> <code title=event-invalid>invalid</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at controls during form validation if they do not satisfy their constraints

    <tr><td> <code title=event-load>load</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> when the document has finished loading; fired at an element containing a resource (e.g. <code><a href=#the-img-element>img</a></code>, <code><a href=#the-embed-element>embed</a></code>) when its resource has finished loading

    <tr><td> <code title=event-message><a href=#event-message>message</a></code>
     <td> <code><a href=#messageevent>MessageEvent</a></code>
     <td> Fired at an object when the object receives a message

    <tr><td> <code title=event-offline><a href=#event-offline>offline</a></code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> when the network connections fails

    <tr><td> <code title=event-online><a href=#event-online>online</a></code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> when the network connections returns

    <tr><td> <code title=event-pagehide><a href=#event-pagehide>pagehide</a></code>
     <td> <code><a href=#pagetransitionevent>PageTransitionEvent</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> when the page's entry in the <a href=#session-history>session history</a> stops being the <a href=#current-entry>current entry</a>

    <tr><td> <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code>
     <td> <code><a href=#pagetransitionevent>PageTransitionEvent</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> when the page's entry in the <a href=#session-history>session history</a> becomes the <a href=#current-entry>current entry</a>

    <tr><td> <code title=event-popstate><a href=#event-popstate>popstate</a></code>
     <td> <code><a href=#popstateevent>PopStateEvent</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> when the user navigates the <a href=#session-history>session history</a>

    <tr><td> <code title=event-readystatechange>readystatechange</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at the <code><a href=#document>Document</a></code> when it finishes parsing and again when all its subresources have finished loading

    <tr><td> <code title=event-redo><a href=#event-redo>redo</a></code>
     <td> <code><a href=#undomanagerevent>UndoManagerEvent</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> object when the user <a href=#redo:-moving-forward-in-the-undo-transaction-history title=do-redo>goes forward in the undo transaction history</a>

    <tr><td> <code title=event-reset>reset</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at a <code><a href=#the-form-element>form</a></code> element when it is <a href=#concept-form-reset title=concept-form-reset>reset</a>

    <tr><td> <code title=event-show>show</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at a <code><a href=#menus>menu</a></code> element when it is shown as a context menu

    <tr><td> <code title=event-submit>submit</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at a <code><a href=#the-form-element>form</a></code> element when it is <a href=#concept-form-submit title=concept-form-submit>submitted</a>

    <tr><td> <code title=event-undo><a href=#event-undo>undo</a></code>
     <td> <code><a href=#undomanagerevent>UndoManagerEvent</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> object when the user <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>goes backward in the undo transaction history</a>

    <tr><td> <code title=event-unload>unload</code>
     <td> <code><a href=#event>Event</a></code>
     <td> Fired at the <code><a href=#window>Window</a></code> object when the page is going away

  </table><p class=note>See also <a href=#mediaevents>media element
  events</a>, <a href=#appcacheevents>application cache events</a>,
  and <a href=#dndevents>drag-and-drop events</a>.</p>










  <h2 class=no-num id=references>References</h2><!--REFS-->

  <p>All references are normative unless marked "Non-normative".</p>

  <!-- Dates are only included for standards older than the Web, because the newer ones keep changing. -->

  <dl><dt id=refsABNF>[ABNF]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/std/std68.txt>Augmented
   BNF for Syntax Specifications: ABNF</a></cite>, D. Crocker,
   P. Overell. IETF.</dd>

   <dt id=refsABOUT>[ABOUT]</dt>
   <dd><cite><a href=http://tools.ietf.org/html/draft-holsten-about-uri-scheme>The
   'about' URI scheme</a></cite>, J. Holsten, L. Hunt. IETF.</dd>

   <dt id=refsARIA>[ARIA]</dt>
   <dd><cite><a href=http://www.w3.org/WAI/PF/aria/>Accessible Rich
   Internet Applications (WAI-ARIA)</a></cite>, J. Craig, M. Cooper, L. Pappas,
   R. Schwerdtfeger, L. Seeman. W3C.</dd>

   <dt id=refsARIAIMPL>[ARIAIMPL]</dt>
   <dd><cite><a href=http://www.w3.org/WAI/PF/aria-implementation/>WAI-ARIA 1.0
   User Agent Implementation Guide</a></cite>, A. Snow-Weaver,
   M. Cooper. W3C.</dd>

   <dt id=refsATAG>[ATAG]</dt>
   <dd>(Non-normative) <cite><a href=http://www.w3.org/TR/ATAG20/>Authoring Tool Accessibility
   Guidelines (ATAG) 2.0</a></cite>, J. Richards, J. Spellman,
   J. Treviranus. W3C.</dd>

   <dt id=refsATOM>[ATOM]</dt>
   <dd>(Non-normative) <cite><a href=http://www.ietf.org/rfc/rfc4287.txt>The Atom Syndication
   Format</a></cite>, M. Nottingham, R. Sayre. IETF.</dd>

   <dt id=refsBCP47>[BCP47]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/bcp/bcp47.txt>Tags for
   Identifying Languages; Matching of Language Tags</a></cite>,
   A. Phillips, M. Davis. IETF.</dd>

   <dt id=refsBECSS>[BECSS]</dt>
   <dd><cite><a href=http://www.w3.org/TR/becss/>Behavioral
   Extensions to CSS</a></cite>, I. Hickson. W3C.</dd>

   <dt id=refsBEZIER>[BEZIER]</dt>
   <dd><cite>Courbes &agrave; poles</cite>, P. de Casteljau. INPI, 1959.</dd>

   <dt id=refsBIDI>[BIDI]</dt>
   <dd><cite><a href=http://www.unicode.org/reports/tr9/>UAX #9: Unicode
   Bidirectional Algorithm</a></cite>, M. Davis. Unicode Consortium.</dd>

   <dt id=refsBOCU1>[BOCU1]</dt>
   <dd>(Non-normative) <cite><a href=http://www.unicode.org/notes/tn6/>UTN #6: BOCU-1:
   MIME-Compatible Unicode Compression</a></cite>, M. Scherer,
   M. Davis. Unicode Consortium.</dd>

   <dt id=refsCESU8>[CESU8]</dt>
   <dd>(Non-normative) <cite><a href=http://www.unicode.org/reports/tr26/>UTR #26: Compatibility
   Encoding Scheme For UTF-16: 8-BIT (CESU-8)</a></cite>,
   T. Phipps. Unicode Consortium.</dd>

   <dt id=refsCHARMOD>[CHARMOD]</dt>
   <dd>(Non-normative) <cite><a href=http://www.w3.org/TR/charmod/>Character Model for the World
   Wide Web 1.0: Fundamentals</a></cite>, M. D&uuml;rst, F. Yergeau,
   R. Ishida, M. Wolf, T. Texin. W3C.</dd>

   <dt id=refsCOMPUTABLE>[COMPUTABLE]</dt>
   <dd>(Non-normative) <cite><a href=http://www.turingarchive.org/browse.php/B/12>On computable
   numbers, with an application to the
   Entscheidungsproblem</a></cite>, A. Turing. In <cite>Proceedings of
   the London Mathematical Society</cite>, series 2, volume 42, pages
   230-265. London Mathematical Society, 1937.</dd>

   <dt id=refsCOOKIES>[COOKIES]</dt>
   <!--
   <dd><cite><a href="http://www.ietf.org/rfc/rfc2109.txt">HTTP State
   Management Mechanism</a></cite>, D. Kristol, L. Montulli. IETF.</dd>
   <dd><cite><a href="http://www.ietf.org/rfc/rfc2965.txt">HTTP State Management
   Mechanism</a></cite>, D. Kristol, L. Montulli. IETF.</dd>
   -->
   <dd><cite><a href=http://tools.ietf.org/html/draft-ietf-httpstate-cookie>HTTP State
   Management Mechanism</a></cite>, A. Barth. IETF.</dd>

   <dt id=refsCORS>[CORS]</dt>
   <!--
   <dd><cite><a href="http://www.w3.org/TR/cors/">Cross-Origin
   Resource Sharing</a></cite>, A. van Kesteren. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/2006/waf/access-control/>Cross-Origin
   Resource Sharing</a></cite>, A. van Kesteren.  W3C.</dd>

   <dt id=refsCSS>[CSS]</dt>
   <dd><cite><a href=http://www.w3.org/TR/CSS/>Cascading Style Sheets Level 2
   Revision 1</a></cite>, B. Bos, T. &Ccedil;elik, I.
   Hickson, H. Lie. W3C.</dd>

   <dt id=refsCSSATTR>[CSSATTR]</dt>
   <dd><cite><a href=http://dev.w3.org/csswg/css-style-attr/>CSS
   Styling Attribute Syntax</a></cite>, E. Etemad. W3C.</dd>

   <dt id=refsCSSCOLOR>[CSSCOLOR]</dt>
   <!--
   <dd><cite><a href="http://www.w3.org/TR/css3-color/">CSS Color
   Module Level 3</a></cite>, T. &Ccedil;elik, C. Lilley, L.
   Baron. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/csswg/css3-color/>CSS Color
   Module Level 3</a></cite>, T. &Ccedil;elik, C. Lilley, L.
   Baron. W3C.</dd>

   <dt id=refsCSSFONTS>[CSSFONTS]</dt>
   <dd><cite><a href=http://www.w3.org/TR/css3-fonts/>CSS Fonts
   Module Level 3</a></cite>, J. Daggett. W3C.</dd>

   <dt id=refsCSSOM>[CSSOM]</dt>
   <dd><cite><a href=http://dev.w3.org/csswg/cssom/>Cascading Style Sheets
   Object Model (CSSOM)</a></cite>, A. van Kesteren. W3C.</dd>

   <dt id=refsCSSUI>[CSSUI]</dt>
   <dd><cite><a href=http://www.w3.org/TR/css3-ui/>CSS3 Basic User
   Interface Module</a></cite>, T. &Ccedil;elik. W3C.</dd>

   <dt id=refsDOMCORE>[DOMCORE]</dt>
   <dd><cite><a href=http://www.w3.org/TR/DOM-Level-3-Core/>Document
   Object Model (DOM) Level 3 Core Specification</a></cite>, A. Le
   Hors, P. Le Hegaret, L. Wood, G. Nicol, J. Robie, M. Champion,
   S. Byrnes. W3C.</dd>
   <!--
   <dd><cite><a href="http://simon.html5.org/specs/web-dom-core">Web
   DOM Core</a></cite>, S. Pieters. W3C.</dd>
   -->

   <dt id=refsDOMEVENTS>[DOMEVENTS]</dt>
   <!--
   <dd><cite><a
   href="http://www.w3.org/TR/DOM-Level-3-Events/">Document Object
   Model (DOM) Level 3 Events Specification</a></cite>,
   B. H&ouml;hrmann, P. Le Hegaret, T. Pixley. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html>Document
   Object Model (DOM) Level 3 Events Specification</a></cite>,
   D. Schepers. W3C.</dd>

   <dt id=refsDOMRANGE>[DOMRANGE]</dt>
   <dd><cite><a href=http://www.w3.org/TR/DOM-Level-2-Traversal-Range/>Document
   Object Model (DOM) Level 2 Traversal and Range
   Specification</a></cite>, J.  Kesselman, J. Robie, M. Champion,
   P. Sharpe, V. Apparao, L.  Wood. W3C.</dd>

   <dt id=refsE163>[E163]</dt>
   <dd><cite>Recommendation E.163 &mdash; Numbering Plan for The International
   Telephone Service</cite>, CCITT Blue Book, Fascicle II.2, pp. 128-134, November
   1988.</dd>

   <dt id=refsECMA262>[ECMA262]</dt>
   <dd><cite><a href=http://www.ecma-international.org/publications/standards/Ecma-262.htm>ECMAScript
   Language Specification</a></cite>. ECMA.</dd>

   <dt id=refsECMA357>[ECMA357]</dt>
   <dd>(Non-normative) <cite><a href=http://www.ecma-international.org/publications/standards/Ecma-357.htm>ECMAScript
   for XML (E4X) Specification</a></cite>. ECMA.</dd>

   <dt id=refsEUCKR>[EUCKR]</dt>
   <dd><cite>Hangul Unix Environment</cite>. Korea Industrial
   Standards Association. Ref. No. KS C 5861-1992.</dd>

   <dt id=refsEVENTSOURCE>[EVENTSOURCE]</dt>
   <!--
   <dd><cite><a href="http://www.w3.org/TR/eventsource/">Server-Sent
   Events</a></cite>, I. Hickson. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/html5/eventsource/>Server-Sent
   Events</a></cite>, I. Hickson. W3C.</dd>

   <dt id=refsFILEAPI>[FILEAPI]</dt>
   <dd><cite><a href=http://dev.w3.org/2006/webapi/FileUpload/publish/FileAPI.html>File
   API</a></cite>, A. Ranganathan. W3C.</dd>

   <dt id=refsGBK>[GBK]</dt>
   <dd><cite>Chinese Internal Code Specification</cite>. Chinese IT
   Standardization Technical Committee.</dd>
   <!-- http://www.iana.org/assignments/charset-reg/GBK -->

   <dt id=refsGRAPHICS>[GRAPHICS]</dt>
   <dd>(Non-normative) <cite>Computer Graphics: Principles and
   Practice in C</cite>, Second Edition, J. Foley, A. van Dam,
   S. Feiner, J. Hughes. Addison-Wesley. ISBN
   0-201-84840-6.</dd>
   <!--
   This book ("Computer Graphics: Principles and Practice in C")
   apparently does not make any references to literature in the
   bibliographic section to define the "even-odd" rule for polygon
   filling and hit testing. In the absence of such a reference, I
   guess that this book is the most authoritative reference.
   -->

   <dt id=refsGREGORIAN>[GREGORIAN]</dt>
   <dd>(Non-normative) <cite>Inter Gravissimas</cite>, A. Lilius,
   C. Clavius. Gregory XIII Papal Bulls, February 1582.</dd>

   <dt id=refsHATOM>[HATOM]</dt>
   <dd>(Non-normative) <cite><a href=http://microformats.org/wiki/hatom>hAtom</a></cite>, D
   Janes. Microformats.</dd>

   <dt id=refsHTMLDIFF>[HTMLDIFF]</dt>
   <!--
   <dd>(Non-normative) <cite><a
   href="http://www.w3.org/TR/html5-diff/">HTML5 differences from
   HTML4</a></cite>, A. van Kesteren. W3C.</dd>
   -->
   <dd>(Non-normative) <cite><a href=http://dev.w3.org/html5/html4-differences/>HTML5
   differences from HTML4</a></cite>, A. van Kesteren.  W3C.</dd>

   <dt id=refsHTTP>[HTTP]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2616.txt>Hypertext
   Transfer Protocol &mdash; HTTP/1.1</a></cite>, R. Fielding, J. Gettys,
   J. Mogul, H.  Frystyk, L. Masinter, P. Leach, T. Berners-Lee. IETF.</dd>

   <dt id=refsIANACHARSET>[IANACHARSET]</dt>
   <dd><cite><a href=http://www.iana.org/assignments/character-sets>Character
   Sets</a></cite>. IANA.</dd>

   <dt id=refsIANAPERMHEADERS>[IANAPERMHEADERS]</dt>
   <dd><cite><a href=http://www.iana.org/assignments/message-headers/perm-headers.html>Permanent
   Message Header Field Names</a></cite>. IANA.</dd>

   <dt id=refsISO8601>[ISO8601]</dt>
   <dd><cite><a href="http://isotc.iso.org/livelink/livelink/4021199/ISO_8601_2004_E.zip?func=doc.Fetch&amp;nodeid=4021199">ISO8601: Data elements and interchange formats &mdash; Information interchange &mdash; Representation of dates and times</a></cite>. ISO.</dd>

   <dt id=refsISO885911>[ISO885911]</dt>
   <dd><cite><a href=http://anubis.dkuug.dk/jtc1/sc2/open/02n3333.pdf>ISO-8859-11:
   Information technology &mdash; 8-bit single-byte coded graphic
   character sets &mdash; Part 11: Latin/Thai
   alphabet</a></cite>. ISO.</dd>

   <dt id=refsJSON>[JSON]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc4627.txt>The
   application/json Media Type for JavaScript Object Notation
   (JSON)</a></cite>, D. Crockford. IETF.</dd>

   <dt id=refsJSURL>[JSURL]</dt>
   <dd><cite><a href=http://tools.ietf.org/html/draft-hoehrmann-javascript-scheme>The
   'javascript' resource identifier scheme</a></cite>,
   B. H&ouml;hrmann. IETF.</dd>

   <dt id=refsMAILTO>[MAILTO]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2368.txt>The mailto URL
   scheme</a></cite>, P. Hoffman, L. Masinter, J. Zawinski.
   IETF.</dd>

   <dt id=refsMATHML>[MATHML]</dt>
   <dd><cite><a href=http://www.w3.org/TR/MathML/>Mathematical
   Markup Language (MathML)</a></cite>, D. Carlisle, P. Ion, R. Miner,
   N. Poppelier. W3C.</dd>

   <dt id=refsMIMESNIFF>[MIMESNIFF]</dt>
   <dd><cite><a href=http://tools.ietf.org/html/draft-abarth-mime-sniff>Content-Type
   Processing Model</a></cite>, A. Barth, I. Hickson. IETF.</dd>

   <dt id=refsMQ>[MQ]</dt>
   <!--
   <dd><cite><a href="http://www.w3.org/TR/css3-mediaqueries/">Media
   Queries</a></cite>, H. Lie, T.  &Ccedil;elik, D. Glazman, A. van
   Kesteren. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/csswg/css3-mediaqueries/>Media
   Queries</a></cite>, H. Lie, T.  &Ccedil;elik, D. Glazman, A. van
   Kesteren. W3C.</dd>

   <dt id=refsNPAPI>[NPAPI]</dt>
   <dd>(Non-normative) <cite><a href=https://developer.mozilla.org/en/Gecko_Plugin_API_Reference>Gecko
   Plugin API Reference</a></cite>. Mozilla.</dd>

   <dt id=refsOPENSEARCH>[OPENSEARCH]</dt>
   <dd><cite><a href=http://www.opensearch.org/Specifications/OpenSearch/1.1#Autodiscovery_in_HTML.2FXHTML>Autodiscovery
   in HTML/XHTML</a></cite>. In <cite>OpenSearch 1.1 Draft 4</cite>,
   Section 4.6.2. OpenSearch.org.</dd>

   <dt id=refsORIGIN>[ORIGIN]</dt>
   <dd><cite><a href=http://tools.ietf.org/html/draft-abarth-origin>The HTTP
   Origin Header</a></cite>, A. Barth, C. Jackson, I. Hickson. IETF.</dd>

   <dt id=refsPINGBACK>[PINGBACK]</dt>
   <dd><cite><a href=http://www.hixie.ch/specs/pingback/pingback>Pingback
   1.0</a></cite>, S. Langridge, I. Hickson.</dd>

   <dt id=refsPNG>[PNG]</dt>
   <dd><cite><a href=http://www.w3.org/TR/PNG/>Portable Network
   Graphics (PNG) Specification</a></cite>, D. Duce. W3C.</dd>

   <dt id=refsPORTERDUFF>[PORTERDUFF]</dt>
   <dd><cite><a href=http://keithp.com/~keithp/porterduff/p253-porter.pdf>Compositing
   Digital Images</a></cite>, T. Porter, T. Duff. In <cite>Computer
   graphics</cite>, volume 18, number 3, pp. 253-259. ACM Press, July
   1984.</dd>

   <dt id=refsPPUTF8>[PPUTF8]</dt>
   <dd>(Non-normative) <cite><a href=http://www.ifi.uzh.ch/mml/mduerst/papers/PDF/IUC11-UTF-8.pdf>The
   Properties and Promises <!-- Promizes (sic) --> of
   UTF-8</a></cite>, M. D&uuml;rst. University of Z&uuml;rich. In <cite>Proceedings of the 11th International
   Unicode Conference</cite>.</dd>

   <dt id=refsPROGRESS>[PROGRESS]</dt>
   <!--
   <dd><cite><a href="http://www.w3.org/TR/progress-events/">Progress
   Events</a></cite>, C. McCathieNevile. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/2006/webapi/progress/Progress.html>Progress
   Events</a></cite>, C. McCathieNevile. W3C.</dd>

   <dt id=refsPSL>[PSL]</dt>
   <dd><cite><a href=http://publicsuffix.org/>Public Suffix List</a></cite>.
   Mozilla Foundation.</dd>

   <dt id=refsRFC1034>[RFC1034]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc1034.txt>Domain
   Names - Concepts and Facilities</a></cite>, P. Mockapetris. IETF,
   November 1987.</dd>

   <dt id=refsRFC1345>[RFC1345]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc1345.txt>Character Mnemonics
   and Character Sets</a></cite>, K. Simonsen. IETF.</dd>

   <dt id=refsRFC1468>[RFC1468]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc1468.txt>Japanese Character
   Encoding for Internet Messages</a></cite>, J. Murai, M. Crispin, E. van der
   Poel. IETF.</dd>

   <dt id=refsRFC1554>[RFC1554]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc1554.txt>ISO-2022-JP-2:
   Multilingual Extension of ISO-2022-JP</a></cite>, M. Ohta, K. Handa. IETF.</dd>

   <dt id=refsRFC1557>[RFC1557]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc1557.txt>Korean Character
   Encoding for Internet Messages</a></cite>, U. Choi, K. Chon, H. Park. IETF.</dd>

   <dt id=refsRFC1842>[RFC1842]</dt>

   <dd><cite><a href=http://www.ietf.org/rfc/rfc1842.txt>ASCII
   Printable Characters-Based Chinese Character Encoding for Internet
   Messages</a></cite>, Y. Wei, Y. Zhang, J. Li, J. Ding, Y. Jiang.
   IETF.</dd>

   <dt id=refsRFC1922>[RFC1922]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc1922.txt>Chinese Character
   Encoding for Internet Messages</a></cite>, HF. Zhu, DY. Hu, ZG. Wang, TC. Kao,
   WCH. Chang, M. Crispin. IETF.</dd>

   <dt id=refsRFC2045>[RFC2045]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2045.txt>Multipurpose Internet
   Mail Extensions (MIME) Part One: Format of Internet Message Bodies</a></cite>,
   N. Freed, N. Borenstein. IETF.</dd>

   <dt id=refsRFC2046>[RFC2046]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2046.txt>Multipurpose Internet
   Mail Extensions (MIME) Part Two: Media Types</a></cite>, N. Freed,
   N.  Borenstein. IETF.</dd> <!-- for text/plain and
   "Internet Media type"; not for definition of "valid MIME type". -->

   <dt id=refsRFC2119>[RFC2119]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in
   RFCs to Indicate Requirement Levels</a></cite>, S. Bradner. IETF.</dd>

   <dt id=refsRFC2237>[RFC2237]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2237.txt>Japanese Character
   Encoding for Internet Messages</a></cite>, K. Tamaru. IETF.</dd>

   <dt id=refsRFC2313>[RFC2313]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2313.txt>PKCS #1:
   RSA Encryption</a></cite>, B. Kaliski. IETF.</dd>

   <dt id=refsRFC2318>[RFC2318]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2318.txt>The
   text/css Media Type</a></cite>, H. Lie, B. Bos, C. Lilley. IETF.</dd>

   <dt id=refsRFC2388>[RFC2388]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2388.txt>Returning Values from
   Forms: multipart/form-data</a></cite>, L. Masinter. IETF.</dd>

   <dt id=refsRFC2425>[RFC2425]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2425.txt>A MIME
   Content-Type for Directory Information</a></cite>, T. Howes,
   M. Smith, F. Dawson. IETF.</dd>

   <dt id=refsRFC2426>[RFC2426]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2426.txt>vCard MIME Directory
   Profile</a></cite>, F. Dawson, T. Howes. IETF.</dd>

   <dt id=refsRFC2445>[RFC2445]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2445.txt>Internet Calendaring
   and Scheduling Core Object Specification (iCalendar)</a></cite>, F. Dawson, D.
   Stenerson. IETF.</dd>

   <dt id=refsRFC2483>[RFC2483]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2483.txt>URI Resolution
   Services Necessary for URN Resolution</a></cite>, M. Mealling, R. Daniel.
   IETF.</dd>

   <dt id=refsRFC2781>[RFC2781]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2781.txt>UTF-16, an
   encoding of ISO 10646</a></cite>, P. Hoffman, F. Yergeau. IETF.</dd>

   <dt id=refsRFC2646>[RFC2646]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2646.txt>The Text/Plain Format
   Parameter</a></cite>, R. Gellens. IETF.</dd>

   <dt id=refsRFC3023>[RFC3023]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc3023.txt>XML Media
   Types</a></cite>, M. Murata, S. St. Laurent, D. Kohn. IETF.</dd>

   <dt id=refsRFC3279>[RFC3279]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc3279.txt>Algorithms
   and Identifiers for the Internet X.509 Public Key Infrastructure
   Certificate and Certificate Revocation List (CRL)
   Profile</a></cite>, W. Polk, R. Housley, L. Bassham. IETF.</dd>

   <dt id=refsRFC3490>[RFC3490]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc3490.txt>Internationalizing
   Domain Names in Applications (IDNA)</a></cite>, P. Faltstrom, P. Hoffman, A.
   Costello. IETF.</dd>

   <dt id=refsRFC3548>[RFC3548]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc3548.txt>The Base16, Base32,
   and Base64 Data Encodings</a></cite>, S. Josefsson. IETF.</dd>

   <dt id=refsRFC3864>[RFC3864]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc3864.txt>Registration Procedures
   for Message Header Fields</a></cite>, G. Klyne, M. Nottingham,
   J. Mogul. IETF.</dd>

   <dt id=refsRFC3986>[RFC3986]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc3986.txt>Uniform Resource
   Identifier (URI): Generic Syntax</a></cite>, T. Berners-Lee, R. Fielding, L.
   Masinter. IETF.</dd>

   <dt id=refsRFC3987>[RFC3987]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc3987.txt>Internationalized
   Resource Identifiers (IRIs)</a></cite>, M. D&uuml;rst, M. Suignard. IETF.</dd>

   <dt id=refsRFC4281>[RFC4281]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc4281.txt>The Codecs Parameter
   for "Bucket" Media Types</a></cite>, R. Gellens, D. Singer, P. Frojdh. IETF.</dd>

   <dt id=refsRFC4329>[RFC4329]</dt>
   <dd>(Non-normative) <cite><a href=http://www.ietf.org/rfc/rfc4329.txt>Scripting Media
   Types</a></cite>, B. H&ouml;hrmann. IETF.</dd>

   <dt id=refsRFC4770>[RFC4770]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc4770.txt>vCard Extensions for
   Instant Messaging (IM)</a></cite>, C. Jennings, J. Reschke. IETF.</dd>

   <dt id=refsRFC5280>[RFC5280]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc5280.txt>Internet
   X.509 Public Key Infrastructure Certificate and Certificate
   Revocation List (CRL) Profile</a></cite>, D. Cooper, S. Santesson,
   S. Farrell, S. Boeyen, R. Housley, W. Polk. IETF.</dd>

   <dt id=refsRFC5322>[RFC5322]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc5322.txt>Internet Message
   Format</a></cite>, P. Resnick. IETF.</dd>

   <dt id=refsRFC5724>[RFC5724]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc5724.txt>URI Scheme
   for Global System for Mobile Communications (GSM) Short Message
   Service (SMS)</a></cite>, E. Wilde, A. Vaha-Sipila. IETF.</dd>

   <dt id=refsSCSU>[SCSU]</dt>
   <dd>(Non-normative) <cite><a href=http://www.unicode.org/reports/tr6/>UTR #6: A Standard
   Compression Scheme For Unicode</a></cite>, M. Wolf, K. Whistler,
   C. Wicksteed, M. Davis, A. Freytag, M. Scherer. Unicode Consortium.</dd>

   <dt id=refsSELECTORS>[SELECTORS]</dt>
   <dd><cite><a href=http://www.w3.org/TR/css3-selectors>Selectors</a></cite>,
   T. &Ccedil;elik, E. Etemad, D.  Glazman, I. Hickson, P. Linss,
   J. Williams. W3C.</dd>

   <dt id=refsSHIFTJIS>[SHIFTJIS]</dt>
   <dd><cite>JIS X0208: 7-bit and 8-bit double byte coded KANJI sets
   for information interchange</cite>. Japanese Standards Association.</dd>

   <dt id=refsSRGB>[SRGB]</dt>
   <dd><cite lang=en-GB><a href="http://webstore.iec.ch/webstore/webstore.nsf/artnum/025408!OpenDocument&amp;Click=">IEC
   61966-2-1: Multimedia systems and equipment &mdash; Colour measurement
   and management &mdash; Part 2-1: Colour management &mdash; Default RGB colour
   space &mdash; sRGB</a></cite>. IEC.</dd>

   <dt id=refsSVG>[SVG]</dt>
   <dd><cite><a href=http://www.w3.org/TR/SVGTiny12/>Scalable Vector
   Graphics (SVG) Tiny 1.2 Specification</a></cite>, O. Andersson,
   R. Berjon, E. Dahlstr&ouml;m, A. Emmons, J. Ferraiolo, A. Grasso,
   V. Hardy, S. Hayman, D. Jackson, C. Lilley, C. McCormack,
   A. Neumann, C. Northway, A. Quint, N. Ramani, D. Schepers,
   A. Shellshear. W3C.</dd>

   <dt id=refsTIS620>[TIS620]</dt>
   <dd><cite><a href=http://www.nectec.or.th/it-standards/std620/std620.htm>UDC
   681.3.04:003.62</a></cite>. Thai Industrial Standards Institute,
   Ministry of Industry, Royal Thai Government. ISBN
   974-606-153-4.</dd>

   <dt id=refsUAAG>[UAAG]</dt>
   <dd>(Non-normative) <cite><a href=http://www.w3.org/TR/UAAG20/>Web Content Accessibility
   Guidelines (UAAG) 2.0</a></cite>, J. Allan, K. Ford, J. Richards,
   J. Spellman. W3C.</dd>

   <dt id=refsUNICODE>[UNICODE]</dt>
   <dd><cite><a href=http://www.unicode.org/versions/>The Unicode Standard</a></cite>. Unicode Consortium.</dd>

   <dt id=refsUNIVCHARDET>[UNIVCHARDET]</dt>
   <dd>(Non-normative) <cite><a href=http://www.mozilla.org/projects/intl/UniversalCharsetDetection.html>A
   composite approach to language/encoding
   detection</a></cite>, S. Li, K. Momoi. Netscape. In
   <cite>Proceedings of the 19th International Unicode
   Conference</cite>.</dd>

   <dt id=refsUTF7>[UTF7]</dt>
   <dd><cite><a href=http://www.ietf.org/rfc/rfc2152.txt>UTF-7: A
   Mail-Safe Transformation Format of Unicode</a></cite>,
   D. Goldsmith, M. Davis. IETF.</dd>

   <dt id=refsUTF8DET>[UTF8DET]</dt>
   <dd>(Non-normative) <cite><a href=http://www.w3.org/International/questions/qa-forms-utf-8>Multilingual
   form encoding</a></cite>, M. D&uuml;rst. W3C.</dd>

   <dt id=refsUTR36>[UTR36]</dt>
   <dd>(Non-normative) <cite><a href=http://www.unicode.org/reports/tr36/>UTR #36: Unicode
   Security Considerations</a></cite>, M. Davis, M. Suignard. Unicode
   Consortium.</dd>

   <dt id=refsWCAG>[WCAG]</dt>
   <dd>(Non-normative) <cite><a href=http://www.w3.org/TR/WCAG20/>Web Content Accessibility
   Guidelines (WCAG) 2.0</a></cite>, B. Caldwell, M. Cooper, L. Reid,
   G. Vanderheiden. W3C.</dd>

   <dt id=refsWEBIDL>[WEBIDL]</dt>
   <!--
   <dd><cite><a href="http://www.w3.org/TR/WebIDL/">Web
   IDL</a></cite>, C. McCormack. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/2006/webapi/WebIDL/>Web
   IDL</a></cite>, C. McCormack. W3C.</dd>

   <dt id=refsWEBLINK>[WEBLINK]</dt>
   <dd><cite><a href=http://tools.ietf.org/html/draft-nottingham-http-link-header>Web
   Linking</a></cite>, M. Nottingham. IETF.</dd>

   <dt id=refsWEBSOCKET>[WEBSOCKET]</dt>
   <!--
   <dd><cite><a href="http://www.w3.org/TR/websockets/">The WebSocket
   API</a></cite>, I. Hickson. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/html5/websockets/>The WebSocket
   API</a></cite>, I. Hickson. W3C.</dd>

   <dt id=refsWEBSQL>[WEBSQL]</dt>
   <dd><cite><a href=http://dev.w3.org/html5/webdatabase/>Web SQL
   Database</a></cite>, I. Hickson. W3C.</dd>

   <dt id=refsWEBSTORAGE>[WEBSTORAGE]</dt>
   <dd><cite><a href=http://dev.w3.org/html5/webstorage/>Web
   Storage</a></cite>, I. Hickson. W3C.</dd>

   <dt id=refsWEBWORKERS>[WEBWORKERS]</dt>
   <!--
   <dd><cite><a
   href="http://www.w3.org/TR/webworkers/">Workers</a></cite>,
   I. Hickson. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/html5/workers/>Web
   Workers</a></cite>, I. Hickson. W3C.</dd>

   <dt id=refsWHATWGWIKI>[WHATWGWIKI]</dt>
   <dd><cite><a href=http://wiki.whatwg.org/>The WHATWG Wiki</a></cite>. WHATWG.</dd>

   <dt id=refsWIN1252>[WIN1252]</dt>
   <dd><cite><a href=http://www.microsoft.com/globaldev/reference/sbcs/1252.htm>Windows 1252</a></cite>. Microsoft.</dd>

   <dt id=refsWIN1254>[WIN1254]</dt>
   <dd><cite><a href=http://www.microsoft.com/globaldev/reference/sbcs/1254.htm>Windows 1254</a></cite>. Microsoft.</dd>

   <dt id=refsWIN31J>[WIN31J]</dt>
   <dd><cite><a href=http://www.microsoft.com/globaldev/reference/dbcs/932.mspx>Windows Codepage 932</a></cite>. Microsoft.</dd>

   <dt id=refsWIN874>[WIN874]</dt>
   <dd><cite><a href=http://www.microsoft.com/globaldev/reference/sbcs/874.mspx>Windows 874</a></cite>. Microsoft.</dd>

   <dt id=refsWIN949>[WIN949]</dt>
   <dd><cite><a href=http://www.microsoft.com/globaldev/reference/dbcs/949.mspx>Windows Codepage 949</a></cite>. Microsoft.</dd>

   <dt id=refsX121>[X121]</dt>
   <dd><cite>Recommendation X.121 &mdash; International Numbering Plan for
   Public Data Networks</cite>, CCITT Blue Book, Fascicle VIII.3,
   pp. 317-332.</dd>

   <dt id=refsX690>[X690]</dt>
   <dd><cite><a href=http://www.itu.int/ITU-T/studygroups/com17/languages/X.690-0207.pdf>Recommendation
   X.690 &mdash; Information Technology &mdash; ASN.1 Encoding Rules &mdash;
   Specification of Basic Encoding Rules (BER), Canonical Encoding
   Rules (CER), and Distinguished Encoding Rules
   (DER)</a></cite>. International Telecommunication Union.</dd>

   <dt id=refsXHR>[XHR]</dt>
   <!--
   <dd><cite><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest
   Object</a></cite>, A. van Kesteren. W3C.</dd>
   -->
   <dd><cite><a href=http://dev.w3.org/2006/webapi/XMLHttpRequest-2/><code>XMLHttpRequest</code></a></cite>,
   A. van Kesteren. W3C.</dd>

   <dt id=refsXML>[XML]</dt>
   <dd><cite><a href=http://www.w3.org/TR/xml/>Extensible Markup
   Language</a></cite>, T. Bray, J. Paoli, C. Sperberg-McQueen,
   E. Maler, F. Yergeau. W3C.</dd>

   <dt id=refsXMLBASE>[XMLBASE]</dt>
   <dd><cite><a href=http://www.w3.org/TR/xmlbase/>XML
   Base</a></cite>, J. Marsh, R. Tobin. W3C.</dd>

   <dt id=refsXMLNS>[XMLNS]</dt>
   <dd><cite><a href=http://www.w3.org/TR/xml-names/>Namespaces in
   XML</a></cite>, T. Bray, D. Hollander, A. Layman, R. Tobin. W3C.</dd>

   <dt id=refsXPATH10>[XPATH10]</dt>
   <dd><cite><a href=http://www.w3.org/TR/1999/REC-xpath-19991116>XML Path
   Language (XPath) Version 1.0</a></cite>, J. Clark, S. DeRose. W3C.</dd>

   <dt id=refsXSLT10>[XSLT10]</dt>
   <dd><cite><a href=http://www.w3.org/TR/1999/REC-xslt-19991116>XSL
   Transformations (XSLT) Version 1.0</a></cite>, J. Clark. W3C.</dd>



  </dl><h2 class=no-num id=acknowledgements>Acknowledgements</h2> <!-- ACKS -->

  <p>Thanks to

  Aankhen,
  Aaron Boodman,
  Aaron Leventhal,
  Adam Barth,
  Adam de Boor,
  Adam Hepton,
  Adam Roben,
  Addison Phillips,
  Adele Peterson,
  Adrian Bateman,
  Adrian Sutton,
  Agust&iacute;n Fern&aacute;ndez,
  Ajai Tirumali,
  Akatsuki Kitamura,
  Alan Plum,
  Alastair Campbell,
  Alex Bishop,
  Alex Nicolaou,
  Alex Rousskov,
  Alexander J. Vincent,
  Alexey Feldgendler,
  &#1040;&#1083;&#1077;&#1082;&#1089;&#1077;&#1081; &#1055;&#1088;&#1086;&#1089;&#1082;&#1091;&#1088;&#1103;&#1082;&#1086;&#1074; (Alexey Proskuryakov),
  Alexis Deveria,
  Allan Clements,
  Amos Jeffries,
  Anders Carlsson,
  Andreas<!-- mqmq87 -->,
  Andrei Popescu,
  Andr&eacute; E. Veltstra,
  Andrew Clover,
  Andrew Gove,
  Andrew Grieve,
  Andrew Oakley,
  Andrew Sidwell,
  Andrew Smith,
  Andrew W. Hagen,
  Andrey V. Lukyanov,
  Andy Heydon,
  Andy Palay,
  Anne van Kesteren,
  Anthony Boyd,
  Anthony Bryan,
  Anthony Hickson,
  Anthony Ricaud,
  Antti Koivisto,
  Aron Spohr,
  Arphen Lin,
  Aryeh Gregor,
  Asbj&oslash;rn Ulsberg,
  Ashley Sheridan,
  Atsushi Takayama,
  Aurelien Levy,
  Ave Wrigley,
  Ben Boyle,
  Ben Godfrey,
  Ben Lerner,
  Ben Leslie,
  Ben Meadowcroft,
  Ben Millard,
  Benjamin Carl Wiley Sittler,
  Benjamin Hawkes-Lewis,
  Bert Bos,
  Bijan Parsia,
  Bil Corry,
  Bill Mason,
  Bill McCoy,
  Billy Wong,
  Bjartur Thorlacius,
  Bj&ouml;rn H&ouml;hrmann,
  Blake Frantz,
  Boris Zbarsky,
  Brad Fults,
  Brad Neuberg,
  Brady Eidson,
  Brendan Eich,
  Brenton Simpson,
  Brett Wilson,
  Brett Zamir,
  Brian Campbell,
  Brian Korver,
  Brian Kuhn,
  Brian Ryner,
  Brian Smith,
  Brian Wilson,
  Bryan Sullivan,
  Bruce D'Arcus,
  Bruce Lawson,
  Bruce Miller,
  C. Williams,
  Cameron McCormack,
  Cao Yipeng,
  Carlos Gabriel Cardona,
  Carlos Perell&oacute; Mar&iacute;n,
  Chao Cai,
  &#50980;&#49437;&#52268; (Channy Yun),
  Charl van Niekerk,
  Charles Iliya Krempeaux,
  Charles McCathieNevile,
  Chris Apers,
  Chris Cressman,
  Chris Evans,
  Chris Morris,
  Chris Pearce,
  Christian Biesinger,
  Christian Johansen,
  Christian Schmidt,
  Christopher Aillon,
  Chriswa,
  Cole Robison,
  Colin Fine,
  Collin Jackson,
  Corprew Reed,
  Craig Cockburn,
  Csaba Gabor,
  Csaba Marton,
  Daniel Barclay,
  Daniel Bratell,
  Daniel Brooks,
  Daniel Brumbaugh Keeney,
  Daniel Cheng,
  Daniel Davis,
  Daniel Glazman,
  Daniel Peng,
  Daniel Schattenkirchner,
  Daniel Sp&aring;ng,
  Daniel Steinberg,
  Danny Sullivan,
  Darin Adler,
  Darin Fisher,
  Darxus,
  Dave Camp,
  Dave Hodder,
  Dave Lampton,
  Dave Singer,
  Dave Townsend<!-- Mossop on moz irc -->,
  David Baron,
  David Bloom,
  David Bruant,
  David Carlisle,
  David E. Cleary,
  David Egan Evans,
  David Flanagan,
  David Gerard,
  David H&aring;s&auml;ther,
  David Hyatt,
  David I. Lehn,
  David Matja,
  David Remahl,
  David Smith,
  David Woolley,
  DeWitt Clinton,
  Dean Edridge,
  Dean Edwards,
  Debi Orton,
  Derek Featherstone,
  Devdatta,
  Dimitri Glazkov,
  Dimitry Golubovsky,
  Divya Manian,
  dolphinling,
  Dominique Haza&euml;l-Massieux,
  Don Brutzman,
  Doron Rosenberg,
  Doug Kramer,
  Drew Wilson,
  Edmund Lai,
  Eduard Pascual,
  Eduardo Vela,
  Edward O'Connor,
  Edward Welbourne,
  Edward Z. Yang,
  Eira Monstad,
  Eitan Adler,
  Eliot Graff,
  Elizabeth Castro,
  Elliott Sprehn,
  Elliotte Harold,
  Eric Carlson,
  Eric Law,
  Eric Rescorla,
  Erik Arvidsson,
  Evan Martin,
  Evan Prodromou,
  Evert,
  fantasai,
  Felix Sasaki,
  Francesco Schwarz,
  Francis Brosnan Blazquez,
  Franck 'Shift' Qu&eacute;lain,
  Frank Barchard,
  &#40284;&#39164;&#25991;&#25935; (Fumitoshi Ukai),
  Futomi Hatano,
  Gavin Carothers,
  Gareth Rees,
  Garrett Smith,
  Geoffrey Garen,
  Geoffrey Sneddon,
  George Lund,
  Gianmarco Armellin,
  Giovanni Campagna,
  Graham Klyne,
  Greg Botten,
  Greg Houston,
  Greg Wilkins,
  Gregg Tavares,
  Grey,
  Gytis Jakutonis,
  H&aring;kon Wium Lie,
  Hallvord Reiar Michaelsen Steen,
  Hans S. T&oslash;mmerhalt,
  Henri Sivonen,
  Henrik Lied,
  Henry Mason,
  Hugh Winkler,
  Ian Bicking,
  Ian Davis,
  Ignacio Javier,
  Ivan Enderlin,
  Ivo Emanuel Gon&ccedil;alves,
  J. King,
  Jacques Distler,
  James Craig,
  James Graham,
  James Justin Harrell,
  James M Snell,
  James Perrett,
  James Robinson,
  Jan-Klaas Kollhof,
  Jason Kersey,
  Jason Lustig,
  Jason White,
  Jasper Bryant-Greene,
  Jatinder Mann,
  Jed Hartman,
  Jeff Balogh,
  Jeff Cutsinger,
  Jeff Schiller,
  Jeff Walden,
  Jeffrey Zeldman,
  &#32993;&#24935;&#37586; (Jennifer Braithwaite),
  Jens Bannmann,
  Jens Fendler,
  Jens Lindstr&ouml;m,
  Jens Meiert,
  Jeremy Keith,
  Jeremy Orlow,
  Jeroen van der Meer,
  Jian Li,
  Jim Jewett,
  Jim Ley,
  Jim Meehan,
  Jjgod Jiang,
  Jo&atilde;o Eiras,
  Joe Clark,
  Joe Gregorio,
  Joel Spolsky,
  Johan Herland,
  John Boyer,
  John Bussjaeger,
  John Carpenter,
  John Fallows,
  John Foliot,
  John Harding,
  John Keiser,
  John Snyders,
  John-Mark Bell,
  Johnny Stenback,
  Jon Ferraiolo,
  Jon Gibbins,
  Jon Perlow,
  Jonas Sicking,
  Jonathan Cook,
  Jonathan Rees,
  Jonathan Worent,
  Jonny Axelsson,
  Jorgen Horstink,
  Jorunn Danielsen Newth,
  Joseph Kesselman,
  Joseph Pecoraro,
  Josh Aas,
  Josh Levenberg,
  Joshua Randall,
  Jukka K. Korpela,
  Jules Cl&eacute;ment-Ripoche,
  Julian Reschke,
  Justin Lebar,
  Justin Sinclair,
  Kai Hendry,
  Kartikaya Gupta,
  Kathy Walton,
  Kelly Norton,
  Kevin Benson,
  Korn&eacute;l P&aacute;l,
  Kornel Lesinski,
  Kristof Zelechovski,
  &#40658;&#28580;&#21083;&#24535; (Kurosawa Takeshi),
  Kyle Hofmann<!-- Ozob -->,
  L&eacute;onard Bouchet,
  Lachlan Hunt,
  Larry Masinter,
  Larry Page,
  Lars Gunther<!-- Keryx Web -->,
  Lars Solberg,
  Laura Granka,
  Laura L. Carlson,
  Laura Wisewell,
  Laurens Holst,
  Lee Kowalkowski,
  Leif Halvard Silli,
  Lenny Domnitser,
  Leons Petrazickis,
  Lobotom Dysmon,
  Logan<!-- on moz irc -->,
  Loune,
  Luke Kenneth Casson Leighton,
  Maciej Stachowiak,
  Magnus Kristiansen<!-- Dashiva -->,
  Maik Merten,
  Malcolm Rowe,
  Mark Birbeck,
  Mark Miller,
  Mark Nottingham,
  Mark Pilgrim,
  Mark Rowe<!--bdash-->,
  Mark Schenk,
  Mark Wilton-Jones,
  Martijn Wargers,
  Martin Atkins,
  Martin D&uuml;rst,
  Martin Honnen,
  Martin Kutschker,
  Martin Thomson,
  Masataka Yakura,
  Mathieu Henri,
  Matt Schmidt,
  Matt Wright,
  Matthew Gregan,
  Matthew Mastracci,
  Matthew Raymond,
  Matthew Thomas,
  Mattias Waldau,
  Max Romantschuk,
  Menno van Slooten,
  Micah Dubinko,
  Michael 'Ratt' Iannarelli,
  Michael A. Nachbaur,
  Michael A. Puls II<!--Shadow2531-->,
  Michael Carter,
  Michael Daskalov,
  Michael Enright,
  Michael Gratton,
  Michael Nordman,
  Michael Powers,
  Michael(tm) Smith,
  Michal Zalewski,
  Michel Fortin,
  Michelangelo De Simone,
  Michiel van der Blonk,
  Mihai &#350;ucan<!-- from ROBO Design -->,
  Mike Brown,
  Mike Dierken<!-- S. Mike Dierken -->,
  Mike Dixon,
  Mike Schinkel,
  Mike Shaver,
  Mikko Rantalainen,
  Mohamed Zergaoui<!-- Innovimax SARL -->,
  Mounir Lamouri,
  Ms2ger,
  NARUSE Yui,
  Neil Deakin,
  Neil Rashbrook,
  Neil Soiffer,
  Nicholas Shanks,
  Nicholas Stimpson,
  Nicholas Zakas,
  Nicolas Gallagher,
  Noah Mendelsohn,
  Noah Slater,
  Ojan Vafai,
  Olaf Hoffmann,
  Olav Junker Kj&aelig;r,
  Old&#345;ich Vete&scaron;n&iacute;k,
  Oliver Hunt,
  Oliver Rigby,
  Olivier Gendrin,
  Olli Pettay,
  Patrick H. Lauke,
  Paul Norman,
  Per-Erik Brodin,
  Perry Smith,
  Peter Karlsson,
  Peter Kasting,
  Peter Stark,
  Peter-Paul Koch,
  Phil Pickering,
  Philip J&auml;genstedt,
  Philip Taylor,
  Philip TAYLOR<!-- a different one -->,
  Prateek Rungta,
  Pravir Gupta,
  Rachid Finge,
  Rajas Moonka,
  Ralf Stoltze,
  Ralph Giles,
  Raphael Champeimont,
  Remco,
  Remy Sharp,
  Rene Saarsoo,
  Rene Stach,
  Ric Hardacre,
  Rich Doughty,
  Richard Ishida,
  Rigo Wenning,
  Rikkert Koppes,
  Rimantas Liubertas,
  Riona Macnamara,
  Rob Ennals,
  Rob Jellinghaus,
  Robert Blaut,
  Robert Collins,
  Robert O'Callahan,
  Robert Sayre,
  Robin Berjon,
  Roland Steiner,
  Roman Ivanov,
  Roy Fielding,
  Ryan King,
  S. Mike Dierken,
  Salvatore Loreto,
  Sam Dutton,
  Sam Kuper,
  Sam Ruby,
  Sam Weinig,
  Sander van Lambalgen,
  Sarven Capadisli,
  Scott Gonz&aacute;lez,
  Scott Hess,
  Sean Fraser,
  Sean Hogan,
  Sean Knapp,
  Sebastian Markb&aring;ge,
  Sebastian Schnitzenbaumer,
  Seth Call,
  Shanti Rao,
  Shaun Inman,
  Shiki Okasaka,
  Sierk Bornemann,
  Sigbj&oslash;rn Vik,
  Silvia Pfeiffer,
  Simon Montagu,
  Simon Pieters,
  Simon Spiegel,
  skeww, <!-- on reddit -->
  Stefan Haustein,
  Stefan Santesson,
  Steffen Meschkat,
  Stephen Ma,
  Steve Faulkner,
  Steve Runyon,
  Steven Bennett,
  Steven Garrity,
  Steven Tate,
  Stewart Brodie,
  Stuart Ballard,
  Stuart Parmenter,
  Subramanian Peruvemba,
  Sunava Dutta,
  Susan Borgrink,
  Susan <!--G.--> Lesch,
  Sylvain Pasche,
  T. J. Crowder,
  <span lang=tr title="">Tantek &Ccedil;elik</span>,
  &#30000;&#26449;&#20581;&#20154; (TAMURA Kent),
  Ted Mielczarek,
  Terrence Wood,
  Thomas Broyer,
  Thomas O'Connor,
  Tim Altman,
  Tim Johansson,
  Toby Inkster,
  Todd Moody,
  Tom Pike,
  Tommy Thorsen,
  Travis Leithead,
  Tyler Close,
  Vladimir Katardjiev,
  Vladimir Vuki&#263;evi&#263;,
  voracity,
  Wakaba,
  Wayne Pollock,
  Wellington Fernando de Macedo,
  Will Levine,
  William Swanson,
  Wladimir Palant,
  Wojciech Mach,
  Wolfram Kriesing,
  Yang Chen,
  Yehuda Katz,
  Yi-An Huang,
  Yngve Nysaeter Pettersen,
  Yuzo Fujishima,
  Zhenbin Xu,
  Zoltan Herczeg,
  and
  &Oslash;istein E. Andersen,

  for their useful comments, both large and small, that have led to
  changes to this specification over the years.</p>

  <p>Thanks also to everyone who has ever posted about HTML to their
  blogs, public mailing lists, or forums, including all the
  contributors to the <a href=http://www.w3.org/html/wg/lists/>various W3C HTML WG
  lists</a> and the <a href=http://www.whatwg.org/mailing-list>various WHATWG lists</a>.

  <p>Special thanks to Richard Williamson for creating the first
  implementation of <code><a href=#the-canvas-element>canvas</a></code> in Safari, from which the
  canvas feature was designed.</p>

  <p>Special thanks also to the Microsoft employees who first
  implemented the event-based drag-and-drop mechanism, <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code>, and other
  features first widely deployed by the Windows Internet Explorer
  browser.</p>

  <p>Thanks to the participants of the microdata usability study for
  allowing us to use their mistakes as a guide for designing the
  microdata feature.</p>

<!--TT-->
  <p>Thanks to the SubRip community, including in particular Zuggy and
  ai4spam, for their work on the SubRip software program whose SRT
  file format was used as the basis for the WebSRT timed track file
  format.</p>
<!--TT-->

  <div class=impl>

  <p>Special thanks and $10,000 to David Hyatt who came up with a
  broken implementation of the <a href=#adoptionAgency>adoption
  agency algorithm</a> that the editor had to reverse engineer and fix
  before using it in the parsing section.</p>

  </div>

  <p>Thanks to the many sources that provided inspiration for the
  examples used in the specification.</p>


  <p>Thanks also to the Microsoft blogging community for some ideas,
  to the attendees of the W3C Workshop on Web Applications and
  Compound Documents for inspiration, to the #mrt crew, the #mrt.no
  crew, and the #whatwg crew, and to Pillar and Hedral for their ideas
  and support.</p>

  <!-- Hopefully Kam won't notice he's covered by these
  acknowledgements three times! -->

<!--
 v2  * library of resources:
        var library = new ZipFile("data.zip");
        library.onload = function() {
          var sound1 = library.getAudio("sound1.wav"); // returns an Audio object
          var image1 = library.getImage("image1.png"); // returns an HTMLImageElement
          var doc1 = library.getXMLDocument("doc1.xml"); // returns a Document
          var doc2 = library.getHTMLDocument("doc1.html"); // returns an HTMLDocument
        }
       or:
        var library = new ResourceLoader("data.zip");
        library.add("moredata.zip");
        library.onload = function() { ... }
        library.onloading = function() {
          reportLoadProgress(library.progress); // 0.0 .. 1.0
        }
       or:
        var library = new AudioZip("sounds.zip");
        library.onload = function() {
          var sound1 = library["sound1.wav"];
          sound.play();
        }
 v2  * [onclick] should make element focusable; enter should send onclick ?
 v2  * a fairly common situation for web authors is to have two lists, where
       the contents of the second depends on the value of the first. Is there
       any way we could extend the current model to include this functionality?
       (e.g. bugzilla product/component ui)
 v2  * quick-searchable select
 v2  * include/exclude selectors (two multi-select columns with arrows to
       move selected items) and that sort of thing.
       http://slashdot.org/comments.pl?sid=110240&cid=9357022
 v2  * Oh, and forms need a standardized Help widget/icon. I know I can
       turn my cursor into a question mark, but I'm looking for something
       simple and pervasive. Maybe you can wrap fields in a help tag, just
       as you do for fieldsets. And in that help tag, attributes are
       available that allow for a nice, formatted, clean, full help text
       popup/area/thing.
       http://slashdot.org/comments.pl?sid=110240&cid=9359006
 v2  * Validating only part of a form. - Anja Lehmann
 v2  * Reminder to add a way to expose access keys in buttons, i.e.
       Sub&mit where & signifies the m is the access key to use. Possibly
       automatic? <input accesskey="m" value="Submit"> browser would be
       smart enough to underline the first instance of the access key if
       it exists (case insensitive)? - kerz
       [or deprecate the lot (->web apps)]
 v2  * need an attribute that says "the children of this element are in
       their own tabbing universe, tabindex should be relative to each
       other, not to the document"
       -> web apps?
 v2  * make select widgets have multiple columns
       or ->web apps with list view
 v2  * required as a group (one of the following must be available):
       + i propose something like the following:
           <input type="text" group="contact" name="voicephone"> Voice phone
           <input type="text" group="contact" name="fax"> Fax
           <input type="text" group="contact" name="mobile"> Mobile phone
           <input type="text" group="contact" name="email"> E-mail
         if the user fills out none of the form fields in the "contact"
         group, an error message is shown and the form is not submitted.
         - Peter-Paul Koch
 v2  * formatting of number fields, text fields, etc, so that when the
       field is not focused, the value is displayed differently. Seems
       like this would also be useful e.g. for <output> or something so
       you can display localised dates, etc.
 v2  * being able to select date range (from day x to day y)
 v2  * ways of visualizing a linefeed in a <textarea> so it looks different
       from wrapping text
 v2  * all login systems have
         1. enter username and password
         2. create new account
         3. lost password
       some way of integrating this into one system, since it's so common
 v2  * way of identifying different sorts of mailadresses
         a) mailing-list
         b) person
         c) department in a company ("support", "marketing" and such)
         d) general mail (like "info", "mail", "contact" and such)
         e) other sorts of groupings
       (or ->web apps; this is talking about in mailto: links, I think)
 v2  * hotswapping login identities like in windows xp
         you are logged in on operamail.com, and you want to check the mail
         of another user. somehow, combined with the wand or whatever,
         the browser will remember the login page, and it can re-submit it
         without having to load the initial page (saving time)
 v2  * provide different measuring systems, like having the html indicate
       fluid in both fluid ounces and liters, and the browser can display
       one or the other based on regional settings in the browser or ui,
       display conversions in a tooltip, or let the user decide which
       format to display.
 v2  * indicate "x days ago" or "y days into the future" rather than date
 v2  * input control for anniversaries
 v2  * only submit fields that have changed, or a way to include in the
       submission a list of which form controls were changed from their
       default value
 v2  * have a way of marking the first option of a <select> as the default
       but have it not satisfy a new required="" attribute on <select> so
       that you can have selects that require a valid value.
 v2  * type="time" value="now"
 v2  * add something to type="number" to support basic currency and unit
       formatting of input
 v2  * <fieldset enabled-if-checked="myCheckboxOrRadioButton">
       ...to allow sections to only be enabled if a radio button makes it
       relevant, for instance.
 v2  * Yan Morin proposed a multi-column dropdown <select> or <datalist>:
         _________________
        |_New_York______|V|_________________  <- input  with a table link and a down arrow
        |_City__________|_State_|_Country_|_| <- header of the table
        | Montreal      |  QC   | Canada  |A| <- top arrow of the scroll
        |>New York     <|  NY   | US      | | <- selected row
        | Washington    |  DC   | US      |X| <- cursor scroll
        | San Francisco |  CA   | US      | |
        |_Toronto_______|__ON___|_Canada__|V| <- bottom arrow of the scroll

 v2  * add for="" attribute to <input type="password"> so that you can
       link usernames and passwords. (Jonas Sicking)
 v2  * value for unchecked checkbox?
 v2  * A way to specify the default button - Michael Gratton
 v2  * <fieldset readonly>?
 v2  * dolphinling suggests having a way to mark certain parts of a
       form as being dependent on another (mutually exclusive parts of
       a form)
 v2  * expose the form data set, either as an object (on which one can
       invoke the JSON serialiser), or in the form of a method on
       HTMLFormElement that returns the form data set serialised
       according to a particular encoding (defaulting to the form's
       enctype="" one, probably). This would allow forms to be used
       with XHR-like systems without having to manually construct the
       form data set the way that is done today.

Consistency in editorial style:
 v2  * need to become consistent about whether or not to quote keyword
       ("<code title="">foo</code>" vs <code>foo</code>)
 v2  * make the spec consistent about whether the word "algorithm" is part of
       an algorithm's name or not ("</dfn> algorithm", "</span> algorithm")
 v2  * make the spec more consistent about its use of "hexadecimal"
       and "base-sixteen", the order that 0-9 A-Z a-z is mentioned,
       and the detail to which the spec explains how to interpret a
       string as a hexadecimal number.
 v2  * become more consistent about what markup we use to mark up
       productions (nothing? <i>? <code>?)
 v2  * use <code>Document</code> consistently instead of 'document'.
 v2  * s/raise/throw/g
 v2  * be clearer about arrays/lists/collections being zero-based
       despite using the term "/index/th".
 v2  * use the sample widgets:
          <li><img alt="A text field with editable sections for each
          value, with a button to pop up a dialog showing a calendar or
          clock." src="sample-datetime-ui-2"></li>
          <li><img alt="A calendar grid with a clock in the upper right
          hand corner." src="sample-datetime-ui-3"></li>
-->
generated by cgit v1.1 at 2025-07-11 22:34:45 +0000