the-map-element.html
65.9 KB
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US-x-Hixie" ><head><title>4.8.12 The map element — HTML5 </title><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead, table tbody { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.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; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
.bookkeeping dt { margin: 0.5em 2em 0; }
.bookkeeping dd { margin: 0 3em 0.5em; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
body.dfnEnabled dfn { cursor: pointer; }
.dfnPanel {
display: inline;
position: absolute;
z-index: 10;
height: auto;
width: auto;
padding: 0.5em 0.75em;
font: small sans-serif, Droid Sans Fallback;
background: #DDDDDD;
color: black;
border: outset 0.2em;
}
.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
.dfnPanel :link, .dfnPanel :visited { color: black; }
.dfnPanel p { font-weight: bolder; }
.dfnPanel * + p { margin-top: 0.25em; }
.dfnPanel li { list-style-position: inside; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
fieldset { margin: 1em; padding: 0.5em 1em; }
fieldset > legend + * { margin-top: 0; }
fieldset > :last-child { margin-bottom: 0; }
fieldset p { margin: 0.5em 0; }
.stability {
position: fixed;
bottom: 0;
left: 0; right: 0;
margin: 0 auto 0 auto !important;
z-index: 1000;
width: 50%;
background: maroon; color: yellow;
-webkit-border-radius: 1em 1em 0 0;
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
-moz-box-shadow: 0 0 1em #500;
-webkit-box-shadow: 0 0 1em #500;
box-shadow: 0 0 1em red;
padding: 0.5em 1em;
text-align: center;
}
.stability strong {
display: block;
}
.stability input {
appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
}
.stability input:hover {
color: white;
text-shadow: 0 0 2px black;
}
.stability input:active {
padding: 0.3em 0.45em 0.2em 0.55em;
}
.stability :link, .stability :visited,
.stability :link:hover, .stability :visited:hover {
background: transparent;
color: white;
}
</style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><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: hidden; 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; }
td.eg { border-width: thin; text-align: center; }
#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; }
#base64-table {
white-space: nowrap;
font-size: 0.6em;
column-width: 6em;
column-count: 5;
column-gap: 1em;
-moz-column-width: 6em;
-moz-column-count: 5;
-moz-column-gap: 1em;
-webkit-column-width: 6em;
-webkit-column-count: 5;
-webkit-column-gap: 1em;
}
#base64-table thead { display: none; }
#base64-table * { border: none; }
#base64-table tbody td:first-child:after { content: ':'; }
#base64-table tbody td:last-child { text-align: right; }
#named-character-references-table {
white-space: nowrap;
font-size: 0.6em;
column-width: 30em;
column-gap: 1em;
-moz-column-width: 30em;
-moz-column-gap: 1em;
-webkit-column-width: 30em;
-webkit-column-gap: 1em;
}
#named-character-references-table > table > tbody > tr > td:first-child + td,
#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; }
#named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
.glyph.control { color: red; }
@font-face {
font-family: 'Essays1743';
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
}
@font-face {
font-family: 'Essays1743';
font-weight: bold;
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
}
@font-face {
font-family: 'Essays1743';
font-style: italic;
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
}
@font-face {
font-family: 'Essays1743';
font-style: italic;
font-weight: bold;
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
}
</style><style type="text/css">
.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><script type="text/javascript">
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;
}
</script>
<script src="link-fixup.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet"><link href="the-canvas-element.html" title="4.8.11 The canvas element" rel="prev">
<link href="spec.html#contents" title="Table of contents" rel="index">
<link href="tabular-data.html" title="4.9 Tabular data" rel="next">
</head><body><div class="head" id="head">
<div id="multipage-common">
<p class="stability" id="wip"><strong>This is a work in
progress!</strong> For the latest updates from the HTML WG, possibly
including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
There may also be a more
<a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
with changes based on resolution of Last Call issues.
<input onclick="closeWarning(this.parentNode)" type="button" value="╳⃝"></p>
<script type="text/javascript">
function closeWarning(element) {
element.parentNode.removeChild(element);
var date = new Date();
date.setDate(date.getDate()+4);
document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
}
if (getCookie('hide-obsolescence-warning') == '1')
setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
</script></div>
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="the-canvas-element.html" class="prev">4.8.11 The canvas element</a> –
<a href="spec.html#contents">Table of contents</a> –
<a href="tabular-data.html" class="next">4.9 Tabular data</a>
<ol class="toc"><li><ol><li><ol><li><a href="the-map-element.html#the-map-element"><span class="secno">4.8.12 </span>The <code>map</code> element</a></li><li><a href="the-map-element.html#the-area-element"><span class="secno">4.8.13 </span>The <code>area</code> element</a></li><li><a href="the-map-element.html#image-maps"><span class="secno">4.8.14 </span>Image maps</a>
<ol><li><a href="the-map-element.html#authoring"><span class="secno">4.8.14.1 </span>Authoring</a></li><li><a href="the-map-element.html#processing-model"><span class="secno">4.8.14.2 </span>Processing model</a></li></ol></li><li><a href="the-map-element.html#mathml"><span class="secno">4.8.15 </span>MathML</a></li><li><a href="the-map-element.html#svg-0"><span class="secno">4.8.16 </span>SVG</a></li><li><a href="the-map-element.html#dimension-attributes"><span class="secno">4.8.17 </span>Dimension attributes</a></li></ol></li></ol></li></ol></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="content-models.html#flow-content">Flow content</a>.</dd>
<dd>When the element only contains <a href="content-models.html#phrasing-content">phrasing content</a>: <a href="content-models.html#phrasing-content">phrasing content</a>.</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>When the element only contains <a href="content-models.html#phrasing-content">phrasing content</a>: where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
<dd>Otherwise: where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#transparent">Transparent</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#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="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-map-name" title="dom-map-name">name</a>;
readonly attribute <a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a> <a href="#dom-map-areas" title="dom-map-areas">areas</a>;
readonly attribute <a href="common-dom-interfaces.html#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="rendering.html#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="common-microsyntaxes.html#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="infrastructure.html#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="elements.html#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="common-dom-interfaces.html#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="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="embedded-content-1.html#the-img-element">img</a></code> and <code><a href="the-iframe-element.html#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="common-dom-interfaces.html#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="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at the
<code><a href="infrastructure.html#document">Document</a></code> node, whose filter matches only
<code><a href="embedded-content-1.html#the-img-element">img</a></code> and <code><a href="the-iframe-element.html#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="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name.</p>
</div><div class="example">
<p>Image maps can be defined in conjunction with other content on
the page, to ease maintenance. This example is of a page with an
image map at the top of the page and a corresponding set of text
links at the bottom.</p>
<pre><!DOCTYPE HTML>
<TITLE>Babies™: Toys</TITLE>
<HEADER>
<H1>Toys</H1>
<IMG SRC="/images/menu.gif"
ALT="Babies™ navigation menu. Select a department to go to its page."
USEMAP="#NAV">
</HEADER>
...
<FOOTER>
<MAP NAME="NAV">
<P>
<A HREF="/clothes/">Clothes</A>
<AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
<A HREF="/toys/">Toys</A>
<AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"> |
<A HREF="/food/">Food</A>
<AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"> |
<A HREF="/books/">Books</A>
<AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/">
</MAP>
</FOOTER></pre>
</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="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>Where <a href="content-models.html#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="elements.html#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="links.html#attr-hyperlink-href">href</a></code></dd>
<dd><code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code></dd>
<dd><code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code></dd>
<dd><code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code></dd>
<dd><code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code></dd>
<dd><code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlareaelement">HTMLAreaElement</dfn> : <a href="elements.html#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>;
attribute DOMString <a href="#dom-area-rel" title="dom-area-rel">rel</a>;
readonly attribute <a href="common-dom-interfaces.html#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="urls.html#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="rendering.html#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="links.html#attr-hyperlink-href">href</a></code> attribute, then the
<code><a href="#the-area-element">area</a></code> element represents a <a href="links.html#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="links.html#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="common-microsyntaxes.html#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><th>Keywords
</th><th class="impl">Notes
</th></tr></thead><tbody><tr><td rowspan="2"><a href="#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a>
</td><td><dfn id="attr-area-shape-keyword-circle" title="attr-area-shape-keyword-circle"><code>circle</code></dfn>
</td><td class="impl">
</td></tr><tr><td class="impl"><dfn id="attr-area-shape-keyword-circ" title="attr-area-shape-keyword-circ"><code>circ</code></dfn>
</td><td class="impl">Non-conforming
</td></tr><tr><td><a href="#attr-area-shape-default" title="attr-area-shape-default">Default state</a>
</td><td><dfn id="attr-area-shape-keyword-default" title="attr-area-shape-keyword-default"><code>default</code></dfn>
</td><td class="impl">
</td></tr><tr><td rowspan="2"><a href="#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a>
</td><td><dfn id="attr-area-shape-keyword-poly" title="attr-area-shape-keyword-poly"><code>poly</code></dfn>
</td><td class="impl">
</td></tr><tr><td class="impl"><dfn id="attr-area-shape-keyword-polygon" title="attr-area-shape-keyword-polygon"><code>polygon</code></dfn>
</td><td class="impl">Non-conforming
</td></tr><tr><td rowspan="2"><a href="#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a>
</td><td><dfn id="attr-area-shape-keyword-rect" title="attr-area-shape-keyword-rect"><code>rect</code></dfn>
</td><td class="impl">
</td></tr><tr><td class="impl"><dfn id="attr-area-shape-keyword-rectangle" title="attr-area-shape-keyword-rectangle"><code>rectangle</code></dfn>
</td><td class="impl">Non-conforming
</td></tr></tbody></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="common-microsyntaxes.html#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><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="links.html#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="links.html#attr-hyperlink-href">href</a></code>,
<code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code>
attributes decide how the
link is followed. The <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>,
<code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="links.html#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="links.html#attr-hyperlink-target">target</a></code>,
<code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>, <code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code> attributes must be omitted
if the <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute is
not present.</p><div class="impl">
<p>The <a href="content-models.html#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-click"><a href="infrastructure.html#event-click">click</a></code> event in
question is not <a href="infrastructure.html#concept-events-trusted" title="concept-events-trusted">trusted</a>
(i.e. a <code title="dom-click"><a href="editing.html#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="links.html#attr-hyperlink-target">target</a></code>
attribute is such that applying <a href="browsers.html#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="links.html#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="common-dom-interfaces.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception and abort these
steps.</p></li>
<li>Otherwise, the user agent must <a href="links.html#following-hyperlinks" title="following
hyperlinks">follow the hyperlink</a> created 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>,
<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="common-dom-interfaces.html#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="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code>
content attribute.</p>
<p>The IDL attribute <dfn id="dom-area-rellist" title="dom-area-rellist"><code>relList</code></dfn> must
<a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-hyperlink-rel"><a href="links.html#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="urls.html#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 <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, with
the <a href="urls.html#concept-uda-input" title="concept-uda-input">input</a> being the result of
<a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the element's <code title="attr-hyperlink-href"><a href="links.html#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="urls.html#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="links.html#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><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="links.html#hyperlink" title="hyperlink">hyperlinks</a>.</p><p>An image, in the form of an <code><a href="embedded-content-1.html#the-img-element">img</a></code> element or an
<code><a href="the-iframe-element.html#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="embedded-content-1.html#the-img-element">img</a></code> or <code><a href="the-iframe-element.html#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="common-microsyntaxes.html#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." height="150" src="sample-usemap.png" width="600"></p>
<p>If we wanted just the colored areas to be clickable, we could
do it as follows:</p>
<pre><p>
Please select a shape:
<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.">
<map name="shapes">
<area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
<area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
<area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
<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.">
</map>
</p></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="embedded-content-1.html#the-img-element">img</a></code> element or an <code><a href="the-iframe-element.html#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="common-microsyntaxes.html#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.</p></li>
<li><p>If that returned null, then abort these steps. The image is
not associated with an image map after all.</p></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>.</p></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="embedded-content-1.html#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-iframe-element.html#the-object-element">object</a></code> elements cannot represent
images, and thus this section never applies (the <a href="content-models.html#fallback-content">fallback
content</a> is shown instead). The following steps therefore only
apply to <code><a href="embedded-content-1.html#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="links.html#attr-hyperlink-href">href</a></code> attribute.</p></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="links.html#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.</p></li>
<li><p>Each remaining <code><a href="#the-area-element">area</a></code> element in <var title="">areas</var> represents a <a href="links.html#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="embedded-content-1.html#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="embedded-content-1.html#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.</p></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.</p></li>
<li><p>Use the <a href="common-microsyntaxes.html#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.</p></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><th>Minimum number of items
</th></tr></thead><tbody><tr><td><a href="#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a>
</td><td>3
</td></tr><tr><td><a href="#attr-area-shape-default" title="attr-area-shape-default">Default state</a>
</td><td>0
</td></tr><tr><td><a href="#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a>
</td><td>6
</td></tr><tr><td><a href="#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a>
</td><td>4
</td></tr></tbody></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.</p></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.</p></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.</p></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="">y</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="references.html#refsGRAPHICS">[GRAPHICS]</a></p>
</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="infrastructure.html#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="links.html#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="embedded-content-1.html#the-img-element">img</a></code> and <code><a href="the-iframe-element.html#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="infrastructure.html#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="namespaces.html#mathml-namespace">MathML
namespace</a> falls into the <a href="content-models.html#embedded-content">embedded content</a>,
<a href="content-models.html#phrasing-content">phrasing content</a>, and <a href="content-models.html#flow-content">flow content</a>
categories for the purposes of the content models in this
specification.</p><div class="impl">
<p>User agents must handle text other than <a href="content-models.html#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="namespaces.html#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="namespaces.html#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 <a href="infrastructure.html#other-applicable-specifications">other applicable specifications</a>. <a href="references.html#refsMATHML">[MATHML]</a></p><div class="example">
<p>Here is an example of the use of MathML in an HTML document:</p>
<pre><!DOCTYPE html>
<html>
<head>
<title>The quadratic formula</title>
</head>
<body>
<h1>The quadratic formula</h1>
<p>
<math>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">−</mo> <mi>b</mi>
<mo>±</mo>
<msqrt>
<msup> <mi>b</mi> <mn>2</mn> </msup>
<mo>−</mo>
<mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn> <mo>⁢</mo> <mi>a</mi>
</mrow>
</mfrac>
</math>
</p>
</body>
</html></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="namespaces.html#svg-namespace">SVG
namespace</a> falls into the <a href="content-models.html#embedded-content">embedded content</a>,
<a href="content-models.html#phrasing-content">phrasing content</a>, and <a href="content-models.html#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 title="">foreignObject</code> element contains
elements from the <a href="namespaces.html#html-namespace-0">HTML namespace</a>, such elements must
all be <a href="content-models.html#flow-content">flow content</a>. <a href="references.html#refsSVG">[SVG]</a></p><p>The content model for <code title="">title</code> elements in the
<a href="namespaces.html#svg-namespace">SVG namespace</a> inside <a href="dom.html#html-documents">HTML documents</a> is
<a href="content-models.html#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 <a href="infrastructure.html#other-applicable-specifications">other applicable specifications</a>. <a href="references.html#refsSVG">[SVG]</a></p><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 title="">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="embedded-content-1.html#the-img-element">img</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>,
<code><a href="the-iframe-element.html#the-object-element">object</a></code>, <code><a href="the-iframe-element.html#the-video-element">video</a></code>, and, when their <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state,
<code><a href="the-input-element.html#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="common-microsyntaxes.html#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 ≤
<var title="">specified height</var> * <var title="">target ratio</var> ≤
<var title="">specified width</var> + 0.5</span></li>
<li><span title=""><var title="">specified height</var> - 0.5 ≤
<var title="">specified width</var> / <var title="">target ratio</var> ≤
<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="rendering.html#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.html#the-iframe-element">iframe</a></code>, <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, <code><a href="the-iframe-element.html#the-object-element">object</a></code>,
and <code><a href="the-iframe-element.html#the-video-element">video</a></code> elements must <a href="common-dom-interfaces.html#reflect">reflect</a> the
respective content attributes of the same name.</p>
<p class="note">For <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, and
<code><a href="the-iframe-element.html#the-object-element">object</a></code> the IDL attributes are <code>DOMString</code>;
for <code><a href="the-iframe-element.html#the-video-element">video</a></code> the IDL attributes are <code>unsigned
long</code>.</p>
</div></body></html>