discontinued / server · Files

embedded-content-1.html 94.3 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 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 
<!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 Embedded content &#8212; 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="edits.html" title="4.7 Edits" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="the-iframe-element.html" title="4.8.2 The iframe element" 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="&#9587;&#8413;"></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="edits.html" class="prev">4.7 Edits</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="the-iframe-element.html" class="next">4.8.2 The iframe element</a>
  <ol class="toc"><li><ol><li><a href="embedded-content-1.html#embedded-content-1"><span class="secno">4.8 </span>Embedded content</a>
    <ol><li><a href="embedded-content-1.html#the-img-element"><span class="secno">4.8.1 </span>The <code>img</code> element</a>
      <ol><li><a href="embedded-content-1.html#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="embedded-content-1.html#general-guidelines"><span class="secno">4.8.1.1.1 </span>General guidelines</a></li><li><a href="embedded-content-1.html#a-link-or-button-containing-nothing-but-the-image"><span class="secno">4.8.1.1.2 </span>A link or button containing nothing but the image</a></li><li><a href="embedded-content-1.html#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts-diagrams-graphs-maps-illustrations"><span class="secno">4.8.1.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li><li><a href="embedded-content-1.html#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons-logos"><span class="secno">4.8.1.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li><li><a href="embedded-content-1.html#text-that-has-been-rendered-to-a-graphic-for-typographical-effect"><span class="secno">4.8.1.1.5 </span>Text that has been rendered to a graphic for typographical effect</a></li><li><a href="embedded-content-1.html#a-graphical-representation-of-some-of-the-surrounding-text"><span class="secno">4.8.1.1.6 </span>A graphical representation of some of the surrounding text</a></li><li><a href="embedded-content-1.html#a-purely-decorative-image-that-doesn-t-add-any-information"><span class="secno">4.8.1.1.7 </span>A purely decorative image that doesn't add any information</a></li><li><a href="embedded-content-1.html#a-group-of-images-that-form-a-single-larger-picture-with-no-links"><span class="secno">4.8.1.1.8 </span>A group of images that form a single larger picture with no links</a></li><li><a href="embedded-content-1.html#a-group-of-images-that-form-a-single-larger-picture-with-links"><span class="secno">4.8.1.1.9 </span>A group of images that form a single larger picture with links</a></li><li><a href="embedded-content-1.html#a-key-part-of-the-content"><span class="secno">4.8.1.1.10 </span>A key part of the content</a></li><li><a href="embedded-content-1.html#an-image-not-intended-for-the-user"><span class="secno">4.8.1.1.11 </span>An image not intended for the user</a></li><li><a href="embedded-content-1.html#guidance-for-markup-generators"><span class="secno">4.8.1.1.12 </span>Guidance for markup generators</a></li><li><a href="embedded-content-1.html#guidance-for-conformance-checkers"><span class="secno">4.8.1.1.13 </span>Guidance for conformance checkers</a></li></ol></li></ol></li></ol></li></ol></li></ol></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>

<p class="XXX annotation"><span><a href="http://www.w3.org/html/wg/tracker/issues/30">ISSUE-30</a>
(longdesc) impacts this section. Priority feedback is requested on this
issue from Last Call reviewers. In particular, reviewers are invited to
review and comment on any change proposals that are related to this issue.
See the
<a href="http://dev.w3.org/html5/status/issue-status.html">current list of open Last Call issues and change proposals</a>
maintained by the HTML Working Group chairs.</span>

</p><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>
   <dd><a href="content-models.html#embedded-content">Embedded content</a>.</dd>
   <dd>If the element has a <code title="attr-hyperlink-usemap"><a href="the-map-element.html#attr-hyperlink-usemap">usemap</a></code> attribute: <a href="content-models.html#interactive-content">Interactive content</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#embedded-content">embedded content</a> is expected.</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-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="the-map-element.html#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="the-map-element.html#attr-dim-width">width</a></code></dd>
   <dd><code title="attr-dim-height"><a href="the-map-element.html#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="elements.html#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><p>The image given by the <dfn id="attr-img-src" title="attr-img-src"><code>src</code></dfn> attribute is the
  embedded content; the value of the <dfn id="attr-img-alt" title="attr-img-alt"><code>alt</code></dfn> attribute provides
  equivalent content for those who cannot process images or who have
  image loading disabled.</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="urls.html#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> element 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>An <code><a href="#the-img-element">img</a></code> is always in one of the following states:</p>

  <dl><dt><dfn id="img-none" title="img-none">Unavailable</dfn></dt>
   <dd>The user agent hasn't obtained any image data.</dd>

   <dt><dfn id="img-inc" title="img-inc">Partially available</dfn></dt>
   <dd>The user agent has obtained some of the image data.</dd>

   <dt><dfn id="img-all" title="img-all">Completely available</dfn></dt>
   <dd>The user agent has obtained all of the image data.</dd>

   <dt><dfn id="img-error" title="img-error">Broken</dfn></dt>
   <dd>The user agent has obtained all of the image data that it can,
   but it cannot decode the image (e.g. the image is corrupted, or the
   format is not supported, or no data could be obtained).</dd>

  </dl><p>When an <code><a href="#the-img-element">img</a></code> element is either in the <a href="#img-inc" title="img-inc">partially available</a> state or in the <a href="#img-all" title="img-all">completely available</a> state, it is said to be
  <dfn id="img-yes" title="img-yes">available</dfn>.</p>

  <p>An <code><a href="#the-img-element">img</a></code> element is initially <a href="#img-none" title="img-none">unavailable</a>.</p>

  <p>User agents may obtain images immediately or on demand.</p>

  <p>A user agent that obtains images immediately must synchronously
  <a href="#update-the-image-data">update the image data</a> of an <code><a href="#the-img-element">img</a></code> element
  whenever that element is either created with a <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute, or has its <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute set, changed, or
  removed.</p> 
  <p>A user agent that obtains images on demand must <a href="#update-the-image-data">update the
  image data</a> of an <code><a href="#the-img-element">img</a></code> element whenever it needs
  the image data (i.e. on demand), but only if the <code><a href="#the-img-element">img</a></code>
  element has a <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute, and
  if it has not <a href="#update-the-image-data" title="update the image data">updated the image
  data</a> since the last time the <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute was set. When an
  <code><a href="#the-img-element">img</a></code> element's <code title="attr-img-src"><a href="#attr-img-src">src</a></code>
  attribute is changed or removed, if the user agent only obtains
  images on demand, the <code><a href="#the-img-element">img</a></code> element must return to the
  <a href="#img-none" title="img-none">unavailable</a> state.</p> 
  <p>When the user agent is to <dfn id="update-the-image-data">update the image data</dfn> of an
  <code><a href="#the-img-element">img</a></code> element, it must run the following steps:</p>

  <ol><li><p>Return the <code><a href="#the-img-element">img</a></code> element to the <a href="#img-none" title="img-none">unavailable</a> state.</p>

   </li><li><p>If an instance of the <a href="fetching-resources.html#fetch" title="fetch">fetching</a>
   algorithm is still running for this element, then abort that
   algorithm, discarding any pending <a href="webappapis.html#concept-task" title="concept-task">tasks</a> generated by that
   algorithm.</p></li>

   <li><p>Forget the <code><a href="#the-img-element">img</a></code> element's current image data, if
   any.</p></li>

   <li><p>If the user agent cannot support images, or its support for
   images has been disabled, then abort these steps.</p></li>

   <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 set the element to the
   <a href="#img-error" title="img-error">broken</a> state, <a href="webappapis.html#queue-a-task">queue a
   task</a> to <a href="webappapis.html#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.</p></li>

   <li>

    <p>Otherwise, <a href="urls.html#resolve-a-url" title="resolve a url">resolve</a> the value
    of the element's <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute,
    relative to the element, and, if that is successful,
    <a href="fetching-resources.html#fetch">fetch</a> that resource.</p> 
    <p>The resouce obtained in this fashion is the <code><a href="#the-img-element">img</a></code>
    element's image data.</p>

     <p>Fetching the image must <a href="the-end.html#delay-the-load-event">delay the load
    event</a> of the element's document until the <a href="webappapis.html#concept-task" title="concept-task">task</a> that is <a href="webappapis.html#queue-a-task" title="queue a
    task">queued</a> by the <a href="webappapis.html#networking-task-source">networking task source</a>
    once the resource has been <a href="fetching-resources.html#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-0.html#origin" title="origin">cross-origin</a> access control policies
    that mitigate this attack, but unfortunately such policies are
    typically not compatible with existing Web content.</p>

   </li>

  </ol><p>Each <a href="webappapis.html#concept-task" title="concept-task">task</a> that is <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> by the <a href="webappapis.html#networking-task-source">networking task
  source</a> while the image is being <a href="fetching-resources.html#fetch" title="fetch">fetched</a> must set the <code><a href="#the-img-element">img</a></code> element's
  state to <a href="#img-inc" title="img-inc">partially available</a> and update
  the presentation of the image appropriately.</p>

  <p id="img-load">The <a href="webappapis.html#concept-task" title="concept-task">task</a> that is
  <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> by the <a href="webappapis.html#networking-task-source">networking
  task source</a> once the resource has been <a href="fetching-resources.html#fetch" title="fetch">fetched</a> must act as appropriate given the
  following alternatives:</p>

  <dl class="switch"><dt>If the download was successful</dt>

   <dd>Set the <code><a href="#the-img-element">img</a></code> element to the <a href="#img-all" title="img-all">completely available</a> state, update the
   presentation of the image appropriately, and <a href="webappapis.html#queue-a-task">queue a
   task</a> to <a href="webappapis.html#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.</dd>

   <dt>Otherwise</dt>

   <dd>Set the <code><a href="#the-img-element">img</a></code> element to the <a href="#img-error" title="img-error">broken</a> state, and <a href="webappapis.html#queue-a-task">queue a
   task</a> to <a href="webappapis.html#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.</dd>

  </dl><p>If at any point the user agent discovers that the image data is
  corrupted in some fatal way, or that the image is not in a supported
  file format, then the user agent must set the <code><a href="#the-img-element">img</a></code>
  element to the <a href="#img-error" title="img-error">broken</a> state. If the
  <a href="fetching-resources.html#fetch" title="fetch">fetching</a> algorithm is still running for
  this element, then the user agent must also abort that algorithm,
  discarding any pending <a href="webappapis.html#concept-task" title="concept-task">tasks</a>
  generated by that algorithm, and then <a href="webappapis.html#queue-a-task">queue a task</a> to
  <a href="webappapis.html#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.</p>

  <p>When an <code><a href="#the-img-element">img</a></code> element is in the <a href="#img-all" title="img-all">completely available</a> state <em>and</em> the
  user agent can completely decode the media data without errors, then
  the <code><a href="#the-img-element">img</a></code> element is said to be <dfn id="img-good" title="img-good">fully decodable</dfn>.</p>

  <p>Whether the image is fetched successfully or not (e.g. whether
  the response code was a 2xx code <a href="fetching-resources.html#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="fetching-resources.html#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="fetching-resources.html#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="fetching-resources.html#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>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#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 <a href="#img-yes" title="img-yes">available</a> and the
    user agent is configured to display that image, then the element
    <a href="rendering.html#represents">represents</a> the element's image data.</p>

    <p>Otherwise, the element <a href="rendering.html#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 <a href="#img-yes" title="img-yes">available</a> and the
    user agent is configured to display that image, then the element
    <a href="rendering.html#represents">represents</a> the element's image data.</p>

    <p>Otherwise, the element <a href="rendering.html#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 <a href="#img-yes" title="img-yes">available</a> and the
    user agent is configured to display that image, then the element
    <a href="rendering.html#represents">represents</a> the element's image data.</p>

    <p>Otherwise, 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><li><p>If the image has a <code title="attr-title"><a href="elements.html#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.</p></li>

     <li><p>If the image is a descendant of a <code><a href="grouping-content.html#the-figure-element">figure</a></code>
     element that has a child <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code> element, and,
     ignoring the <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code> element and its descendants,
     the <code><a href="grouping-content.html#the-figure-element">figure</a></code> element has no text node descendants
     other than <a href="content-models.html#inter-element-whitespace">inter-element whitespace</a>, and no
     <a href="content-models.html#embedded-content">embedded content</a> descendant other than the
     <code><a href="#the-img-element">img</a></code> element, then the contents of the first such
     <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code> element are the caption information;
     abort these steps.</p></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="rendering.html#represents">represents</a> nothing.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>The element <a href="rendering.html#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="elements.html#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.


  </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="the-map-element.html#attr-hyperlink-usemap">usemap</a></code> attribute,
  if present, can indicate that the image has an associated
  <a href="the-map-element.html#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="text-level-semantics.html#the-a-element">a</a></code> element with an <code title="attr-hyperlink-href"><a href="links.html#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="text-level-semantics.html#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="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. The attribute must not be specified
  on an element that does not have an ancestor <code><a href="text-level-semantics.html#the-a-element">a</a></code> element
  with an <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute.</p><p>The <code><a href="#the-img-element">img</a></code> element supports <a href="the-map-element.html#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="common-dom-interfaces.html#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 completely downloaded or if
    no image is specified; 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="the-map-element.html#attr-dim-width">width</a></code> and <code title="attr-dim-height"><a href="the-map-element.html#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="rendering.html#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">available</i> but
  not being rendered to a visual medium; or else 0, if the image is
  not <i title="img-available">available</i>. <a href="references.html#refsCSS">[CSS]</a></p>

  <p>On setting, they must act as if they <a href="common-dom-interfaces.html#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">available</i>, or
  else 0. <a href="references.html#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 any of the following conditions is true:</p>
  <ul class="brief"><li>The <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute is omitted.
   </li><li>The <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute's value is the empty string.
   </li><li>The final <a href="webappapis.html#concept-task" title="concept-task">task</a> that is <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> by the <a href="webappapis.html#networking-task-source">networking task source</a> once the resource has been <a href="fetching-resources.html#fetch" title="fetch">fetched</a> has been <a href="webappapis.html#queue-a-task" title="queue a task">queued</a>, but has not yet been run, and the <code><a href="#the-img-element">img</a></code> element is not in the <a href="#img-error" title="img-error">broken</a> state.
   </li><li>The <code><a href="#the-img-element">img</a></code> element is <a href="#img-all" title="img-all">completely available</a>.
  </li></ul><p>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="webappapis.html#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="the-map-element.html#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="the-map-element.html#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="browsers.html#active-document">active document</a> of the <a href="browsers.html#browsing-context">browsing context</a> of
  the <code><a href="browsers.html#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="elements.html#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><h6 id="general-guidelines"><span class="secno">4.8.1.1.1 </span>General guidelines</h6><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><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="elements.html#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><h6 id="a-link-or-button-containing-nothing-but-the-image"><span class="secno">4.8.1.1.2 </span>A link or button containing nothing but the image</h6><p>When an <a href="text-level-semantics.html#the-a-element">a</a> element that creates a
  <a href="links.html#hyperlink">hyperlink</a>, or a <code><a href="the-button-element.html#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.3 </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="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="elements.html#the-title-attribute">title</a></code> attribute or in the
   <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code> element of a <code><a href="grouping-content.html#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.4 </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:

   </p><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; &#913;&#914;&#915; 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 &#913;&#914;&#915; 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">available</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.5 </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.6 </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="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="elements.html#the-title-attribute">title</a></code> attribute can
   be used, or the <code><a href="grouping-content.html#the-figure-element">figure</a></code> and <code><a href="grouping-content.html#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="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="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="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.7 </span>A purely decorative image that doesn't add any information</h6><p>If an image is decorative but isn't especially page-specific
  &#8212; for example an image that forms part of a site-wide design
  scheme &#8212; the image should be specified in the site's CSS, not
  in the markup of the document.</p><p>Exceptions to this rule, in cases where CSS cannot be used to
  display an entirely decorative image, are covered by the HTML5:
  Techniques for providing useful text alternatives. <a href="references.html#refsHTMLALTTECHS">[HTMLALTTECHS]</a>
  Authors are also encouraged to consult the Web Content Accessibility
  Guidelines 2.0 for more detailed information and acceptable
  techniques. <a href="references.html#refsWCAG">[WCAG]</a></p><h6 id="a-group-of-images-that-form-a-single-larger-picture-with-no-links"><span class="secno">4.8.1.1.8 </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.9 </span>A group of images that form a single larger picture with links</h6><p>Generally, <a href="the-map-element.html#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.10 </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 may be omitted, but one of the following conditions must
    be met as well:</p>

    <ul><li>The <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute is
     present and has a non-empty value.</li>

     <li id="figcaption-as-alt-condition">The <code><a href="#the-img-element">img</a></code> element
     is in a <code><a href="grouping-content.html#the-figure-element">figure</a></code> element that contains a
     <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code> element that contains content other than
     <a href="content-models.html#inter-element-whitespace">inter-element whitespace</a>, and, ignoring the
     <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code> element and its descendants, the
     <code><a href="grouping-content.html#the-figure-element">figure</a></code> element has no text node descendants other
     than <a href="content-models.html#inter-element-whitespace">inter-element whitespace</a>, and no <a href="content-models.html#embedded-content">embedded
     content</a> descendant other than the <code><a href="#the-img-element">img</a></code>
     element.</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="elements.html#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="elements.html#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.11 </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="the-map-element.html#attr-dim-width">width</a></code> and
  <code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code> attributes should both
  be set to zero.</p><div class="impl">

  <h6 id="guidance-for-markup-generators"><span class="secno">4.8.1.1.12 </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.13 </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><li>The <code title="attr-title"><a href="elements.html#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="grouping-content.html#the-figure-element">figure</a></code>
   element that satisfies <a href="#figcaption-as-alt-condition">the
   conditions described above</a>.</li>

   

   <li>The document has a <code><a href="semantics.html#the-meta-element">meta</a></code> element with a <code title="attr-meta-name"><a href="semantics.html#attr-meta-name">name</a></code> attribute whose value is an
   <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="meta-generator"><a href="semantics.html#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 &#8212;
   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></body></html>