syntax.html 72.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
<!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>8 The HTML syntax &#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="dnd.html" title="7.7 Drag and drop" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="parsing.html" title="8.2 Parsing HTML documents" 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="dnd.html" class="prev">7.7 Drag and drop</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="parsing.html" class="next">8.2 Parsing HTML documents</a>
  <ol class="toc"><li><a href="syntax.html#syntax"><span class="secno">8 </span>The HTML syntax</a>
  <ol><li><a href="syntax.html#writing"><span class="secno">8.1 </span>Writing HTML documents</a>
    <ol><li><a href="syntax.html#the-doctype"><span class="secno">8.1.1 </span>The DOCTYPE</a></li><li><a href="syntax.html#elements-0"><span class="secno">8.1.2 </span>Elements</a>
      <ol><li><a href="syntax.html#start-tags"><span class="secno">8.1.2.1 </span>Start tags</a></li><li><a href="syntax.html#end-tags"><span class="secno">8.1.2.2 </span>End tags</a></li><li><a href="syntax.html#attributes-0"><span class="secno">8.1.2.3 </span>Attributes</a></li><li><a href="syntax.html#optional-tags"><span class="secno">8.1.2.4 </span>Optional tags</a></li><li><a href="syntax.html#element-restrictions"><span class="secno">8.1.2.5 </span>Restrictions on content models</a></li><li><a href="syntax.html#cdata-rcdata-restrictions"><span class="secno">8.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</a></li></ol></li><li><a href="syntax.html#text-0"><span class="secno">8.1.3 </span>Text</a>
      <ol><li><a href="syntax.html#newlines"><span class="secno">8.1.3.1 </span>Newlines</a></li></ol></li><li><a href="syntax.html#character-references"><span class="secno">8.1.4 </span>Character references</a></li><li><a href="syntax.html#cdata-sections"><span class="secno">8.1.5 </span>CDATA sections</a></li><li><a href="syntax.html#comments"><span class="secno">8.1.6 </span>Comments</a></li></ol></li></ol></li></ol></div>

  <h2 id="syntax"><span class="secno">8 </span><dfn>The HTML syntax</dfn></h2><p class="note">This section only describes the rules for resources
  labeled with an <a href="infrastructure.html#html-mime-type">HTML MIME type</a>. Rules for XML resources
  are discussed in the section below entitled "<a href="the-xhtml-syntax.html#the-xhtml-syntax">The XHTML
  syntax</a>".</p><h3 id="writing"><span class="secno">8.1 </span>Writing HTML documents</h3><div class="impl">

  <p><i>This section only applies to documents, authoring tools, and
  markup generators. In particular, it does not apply to conformance
  checkers; conformance checkers must use the requirements given in
  the next section ("parsing HTML documents").</i></p>

  </div><p>Documents must consist of the following parts, in the given
  order:</p><ol><li>Optionally, a single U+FEFF BYTE ORDER MARK (BOM) character.</li>

   <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
   <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>

   <li>A <a href="#syntax-doctype" title="syntax-doctype">DOCTYPE</a>.

   </li><li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
   <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>

   <li>The root element, in the form of an <code><a href="semantics.html#the-html-element">html</a></code> <a href="#syntax-elements" title="syntax-elements">element</a>.</li>

   <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
   <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>

  </ol><p>The various types of content mentioned above are described in the
  next few sections.</p><p>In addition, there are some restrictions on how <a href="semantics.html#character-encoding-declaration" title="character encoding declaration">character encoding
  declarations</a> are to be serialized, as discussed in the
  section on that topic.</p><div class="note">

   <p>Space characters before the root <code><a href="semantics.html#the-html-element">html</a></code> element, and
   space characters at the start of the <code><a href="semantics.html#the-html-element">html</a></code> element and
   before the <code><a href="semantics.html#the-head-element">head</a></code> element, will be dropped when the
   document is parsed; space characters <em>after</em> the root
   <code><a href="semantics.html#the-html-element">html</a></code> element will be parsed as if they were at the end
   of the <code><a href="sections.html#the-body-element">body</a></code> element. Thus, space characters around the
   root element do not round-trip.</p>

   <p>It is suggested that newlines be inserted after the DOCTYPE,
   after any comments that are before the root element, after the
   <code><a href="semantics.html#the-html-element">html</a></code> element's start tag (if it is not <a href="#syntax-tag-omission" title="syntax-tag-omission">omitted</a>), and after any comments
   that are inside the <code><a href="semantics.html#the-html-element">html</a></code> element but before the
   <code><a href="semantics.html#the-head-element">head</a></code> element.</p>

  </div><p>Many strings in the HTML syntax (e.g. the names of elements and
  their attributes) are case-insensitive, but only for characters in
  the ranges U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL
  LETTER Z) and U+0061 to U+007A (LATIN SMALL LETTER A to LATIN SMALL
  LETTER Z). For convenience, in this section this is just referred to
  as "case-insensitive".</p><h4 id="the-doctype"><span class="secno">8.1.1 </span>The DOCTYPE</h4><p>A <dfn id="syntax-doctype" title="syntax-doctype">DOCTYPE</dfn> is a  required preamble.</p><p class="note">DOCTYPEs are required for legacy reasons. When
  omitted, browsers tend to use a different rendering mode that is
  incompatible with some specifications. Including the DOCTYPE in a
  document ensures that the browser makes a best-effort attempt at
  following the relevant specifications.</p><p>A DOCTYPE must consist of the following components, in this
  order:</p><ol class="brief"><li>A string that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">&lt;!DOCTYPE</code>".</li>
   <li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
   <li>A string that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">html</code>".</li>
   <li>Optionally, a <a href="#doctype-legacy-string">DOCTYPE legacy string</a> or an <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a> (defined below).</li>
   <li>Zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
   <li>A U+003E GREATER-THAN SIGN character (&gt;).</li>
  </ol><p class="note">In other words, <code>&lt;!DOCTYPE html&gt;</code>,
  case-insensitively.</p><hr><p>For the purposes of HTML generators that cannot output HTML
  markup with the short DOCTYPE "<code title="">&lt;!DOCTYPE
  html&gt;</code>", a <dfn id="doctype-legacy-string">DOCTYPE legacy string</dfn> may be inserted
  into the DOCTYPE (in the position defined above). This string must
  consist of:</p><ol class="brief"><li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
   <li>A string that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">SYSTEM</code>".</li>
   <li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
   <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>quote mark</i>).</li>
   <li>The literal string "<code><a href="urls.html#about:legacy-compat">about:legacy-compat</a></code>".</li>
   <li>A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>quote mark</i>).</li>
  </ol><p class="note">In other words, <code>&lt;!DOCTYPE html SYSTEM
  "about:legacy-compat"&gt;</code> or <code>&lt;!DOCTYPE html SYSTEM
  'about:legacy-compat'&gt;</code>, case-insensitively except for the
  part in single or double quotes.</p><p>The <a href="#doctype-legacy-string">DOCTYPE legacy string</a> should not be used unless
  the document is generated from a system that cannot output the
  shorter string.</p><hr><p>To help authors transition from HTML4 and XHTML1, an
  <dfn id="obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</dfn> can be inserted into
  the DOCTYPE (in the position defined above). This string must
  consist of:</p><ol class="brief"><li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
   <li>A string that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">PUBLIC</code>".</li>
   <li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
   <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>first quote mark</i>).</li>
   <li>The string from one of the cells in the first column of the table below. The row to which this cell belongs is the <i>selected row</i>.</li>
   <li>A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>first quote mark</i>).</li>
   <li>If the cell in the second column of the <i>selected row</i> is not blank, one or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
   <li>If the cell in the second column of the <i>selected row</i> is not blank, a U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>third quote mark</i>).</li>
   <li>If the cell in the second column of the <i>selected row</i> is not blank, the string from the cell in the second column of the <i>selected row</i>.</li>
   <li>If the cell in the second column of the <i>selected row</i> is not blank, a matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>third quote mark</i>).</li>
  </ol><table><caption>
    Allowed values for public and system identifiers in an <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a>.
   </caption>
   <thead><tr><th> Public identifier
     </th><th> System identifier
   </th></tr></thead><tbody><tr><td> <code title="">-//W3C//DTD&#160;HTML&#160;4.0//EN</code>
     </td><td>
    </td></tr><tr><td> <code title="">-//W3C//DTD&#160;HTML&#160;4.0//EN</code>
     </td><td> <code title="">http://www.w3.org/TR/REC-html40/strict.dtd</code>
    </td></tr><tr><td> <code title="">-//W3C//DTD&#160;HTML&#160;4.01//EN</code>
     </td><td>
    </td></tr><tr><td> <code title="">-//W3C//DTD&#160;HTML&#160;4.01//EN</code>
     </td><td> <code title="">http://www.w3.org/TR/html4/strict.dtd</code>
    </td></tr><tr><td> <code title="">-//W3C//DTD&#160;XHTML&#160;1.0&#160;Strict//EN</code>
     </td><td> <code title="">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</code>
    </td></tr><tr><td> <code title="">-//W3C//DTD&#160;XHTML&#160;1.1//EN</code>
     </td><td> <code title="">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</code>
  </td></tr></tbody></table><p>A <a href="#syntax-doctype" title="syntax-doctype">DOCTYPE</a> containing an
  <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a> is an <dfn id="obsolete-permitted-doctype">obsolete
  permitted DOCTYPE</dfn>. Authors should not use <a href="#obsolete-permitted-doctype" title="obsolete permitted DOCTYPE">obsolete permitted
  DOCTYPEs</a>, as they are unnecessarily long.</p><h4 id="elements-0"><span class="secno">8.1.2 </span>Elements</h4><p>There are five different kinds of <dfn id="syntax-elements" title="syntax-elements">elements</dfn>: <a href="#void-elements">void elements</a>,
  <a href="#raw-text-elements">raw text elements</a>, <a href="#rcdata-elements">RCDATA elements</a>,
  <a href="#foreign-elements">foreign elements</a>, and <a href="#normal-elements">normal elements</a>.</p><dl><dt><dfn id="void-elements">Void elements</dfn></dt>

   <dd><code><a href="the-map-element.html#the-area-element">area</a></code>, <code><a href="semantics.html#the-base-element">base</a></code>, <code><a href="text-level-semantics.html#the-br-element">br</a></code>,
   <code><a href="tabular-data.html#the-col-element">col</a></code>, <code><a href="interactive-elements.html#the-command-element">command</a></code>, <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>,
   <code><a href="grouping-content.html#the-hr-element">hr</a></code>, <code><a href="embedded-content-1.html#the-img-element">img</a></code>, <code><a href="the-input-element.html#the-input-element">input</a></code>,
   <code><a href="the-button-element.html#the-keygen-element">keygen</a></code>, <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="semantics.html#the-meta-element">meta</a></code>,
   <code><a href="the-iframe-element.html#the-param-element">param</a></code>, <code><a href="the-iframe-element.html#the-source-element">source</a></code>, <code><a href="the-iframe-element.html#the-track-element">track</a></code>,
   <code><a href="text-level-semantics.html#the-wbr-element">wbr</a></code></dd>
   

   <dt><dfn id="raw-text-elements">Raw text elements</dfn></dt>

   <dd><code><a href="scripting-1.html#the-script-element">script</a></code>, <code><a href="semantics.html#the-style-element">style</a></code></dd> 
   <dt><dfn id="rcdata-elements">RCDATA elements</dfn></dt>

   <dd><code><a href="the-button-element.html#the-textarea-element">textarea</a></code>, <code><a href="semantics.html#the-title-element">title</a></code></dd>

   <dt><dfn id="foreign-elements">Foreign elements</dfn></dt>

   <dd>Elements from the <a href="namespaces.html#mathml-namespace">MathML namespace</a>
   and the <a href="namespaces.html#svg-namespace">SVG namespace</a>.</dd>

   <dt><dfn id="normal-elements">Normal elements</dfn></dt>

   <dd>All other allowed <a href="infrastructure.html#html-elements">HTML elements</a> are normal
   elements.</dd>

  </dl><p><dfn id="syntax-tags" title="syntax-tags">Tags</dfn> are used to delimit the start
  and end of elements in the markup. <a href="#raw-text-elements" title="raw text
  elements">Raw text</a>, <a href="#rcdata-elements" title="RCDATA
  elements">RCDATA</a>, and <a href="#normal-elements" title="normal
  elements">normal</a> elements have a <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> to indicate where they
  begin, and an <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a> to
  indicate where they end. The start and end tags of certain
  <a href="#normal-elements">normal elements</a> can be <a href="#syntax-tag-omission" title="syntax-tag-omission">omitted</a>, as described
  later. Those that cannot be omitted must not be omitted. <a href="#void-elements">Void
  elements</a> only have a start tag; end tags must not be
  specified for <a href="#void-elements">void elements</a>. <a href="#foreign-elements">Foreign
  elements</a> must either have a start tag and an end tag, or a
  start tag that is marked as self-closing, in which case they must
  not have an end tag.</p><p>The contents of the element must be placed between just after the
  start tag (which <a href="#syntax-tag-omission" title="syntax-tag-omission">might be implied,
  in certain cases</a>) and just before the end tag (which again,
  <a href="#syntax-tag-omission" title="syntax-tag-omission">might be implied in certain
  cases</a>). The exact allowed contents of each individual element
  depend on the content model of that element, as described earlier in
  this specification. Elements must not contain content that their
  content model disallows. In addition to the restrictions placed on
  the contents by those content models, however, the five types of
  elements have additional <em>syntactic</em> requirements.</p><p><a href="#void-elements">Void elements</a> can't have any contents (since there's
  no end tag, no content can be put between the start tag and the end
  tag).</p><p><a href="#raw-text-elements">Raw text elements</a> can have <a href="#syntax-text" title="syntax-text">text</a>, though it has <a href="#cdata-rcdata-restrictions">restrictions</a> described
  below.</p><p><a href="#rcdata-elements">RCDATA elements</a> can have <a href="#syntax-text" title="syntax-text">text</a> and <a href="#syntax-charref" title="syntax-charref">character references</a>, but the text
  must not contain an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>.
  There are also <a href="#cdata-rcdata-restrictions">further
  restrictions</a> described below.</p><p><a href="#foreign-elements">Foreign elements</a> whose start tag is marked as
  self-closing can't have any contents (since, again, as there's no
  end tag, no content can be put between the start tag and the end
  tag). <a href="#foreign-elements">Foreign elements</a> whose start tag is <em>not</em>
  marked as self-closing can have <a href="#syntax-text" title="syntax-text">text</a>, <a href="#syntax-charref" title="syntax-charref">character references</a>, <a href="#syntax-cdata" title="syntax-cdata">CDATA sections</a>, other <a href="#syntax-elements" title="syntax-elements">elements</a>, and <a href="#syntax-comments" title="syntax-comments">comments</a>, but the text must not
  contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>.</p><div class="note">

   <p>The HTML syntax does not support namespace
   declarations, even in <a href="#foreign-elements">foreign elements</a>.</p>

   <p>For instance, consider the following HTML fragment:</p>

   <pre>&lt;p&gt;
 &lt;svg&gt;
  &lt;metadata&gt;
   &lt;!-- this is invalid --&gt;
   &lt;cdr:license xmlns:cdr="http://www.example.com/cdr/metadata" name="MIT"/&gt;
  &lt;/metadata&gt;
 &lt;/svg&gt;
&lt;/p&gt;</pre>

   <p>The innermost element, <code title="">cdr:license</code>, is
   actually in the SVG namespace, as the "<code title="">xmlns:cdr</code>" attribute has no effect (unlike in
   XML). In fact, as the comment in the fragment above says, the
   fragment is actually non-conforming. This is because the SVG
   specification does not define any elements called "<code title="">cdr:license</code>" in the SVG namespace.</p>

  </div><p><a href="#normal-elements">Normal elements</a> can have <a href="#syntax-text" title="syntax-text">text</a>, <a href="#syntax-charref" title="syntax-charref">character references</a>, other <a href="#syntax-elements" title="syntax-elements">elements</a>, and <a href="#syntax-comments" title="syntax-comments">comments</a>, but the text must not
  contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>. Some
  <a href="#normal-elements">normal elements</a> also have <a href="#element-restrictions">yet more restrictions</a> on what
  content they are allowed to hold, beyond the restrictions imposed by
  the content model and those described in this paragraph. Those
  restrictions are described below.</p><p>Tags contain a <dfn id="syntax-tag-name" title="syntax-tag-name">tag name</dfn>,
  giving the element's name. HTML elements all have names that only
  use characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
  NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
  Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER
  Z. In the HTML syntax, tag names, even those for <a href="#foreign-elements">foreign
  elements</a>, may be written with any mix of lower- and uppercase
  letters that, when converted to all-lowercase, matches the element's
  tag name; tag names are case-insensitive.</p><h5 id="start-tags"><span class="secno">8.1.2.1 </span>Start tags</h5><p><dfn id="syntax-start-tag" title="syntax-start-tag">Start tags</dfn> must have the
  following format:</p><ol><li>The first character of a start tag must be a U+003C LESS-THAN
   SIGN character (&lt;).</li>

   <li>The next few characters of a start tag must be the element's
   <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a>.</li>

   <li>If there are to be any attributes in the next step, there must
   first be one or more <a href="common-microsyntaxes.html#space-character" title="space character">space
   characters</a>.</li>

   <li>Then, the start tag may have a number of attributes, the <a href="#syntax-attributes" title="syntax-attributes">syntax for which</a> is described
   below. Attributes must be separated from each other by one or more
   <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>

   <li>After the attributes, or after the <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a> if there are no attributes,
   there may be one or more <a href="common-microsyntaxes.html#space-character" title="space character">space
   characters</a>. (Some attributes are required to be followed by
   a space. See the <a href="#syntax-attributes" title="syntax-attributes">attributes
   section</a> below.)</li>

   <li>Then, if the element is one of the <a href="#void-elements">void elements</a>,
   or if the element is a <a href="#foreign-elements" title="foreign elements">foreign
   element</a>, then there may be a single U+002F SOLIDUS character
   (/). This character has no effect on <a href="#void-elements">void elements</a>,
   but on <a href="#foreign-elements">foreign elements</a> it marks the start tag as
   self-closing.</li>

   <li>Finally, start tags must be closed by a U+003E GREATER-THAN
   SIGN character (&gt;).</li>

  </ol><h5 id="end-tags"><span class="secno">8.1.2.2 </span>End tags</h5><p><dfn id="syntax-end-tag" title="syntax-end-tag">End tags</dfn> must have the
  following format:</p><ol><li>The first character of an end tag must be a U+003C LESS-THAN
   SIGN character (&lt;).</li>

   <li>The second character of an end tag must be a U+002F SOLIDUS
   character (/).</li>

   <li>The next few characters of an end tag must be the element's
   <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a>.</li>

   <li>After the tag name, there may be one or more <a href="common-microsyntaxes.html#space-character" title="space
   character">space characters</a>.</li>

   <li>Finally, end tags must be closed by a U+003E GREATER-THAN SIGN
   character (&gt;).</li>

  </ol><h5 id="attributes-0"><span class="secno">8.1.2.3 </span>Attributes</h5><p><dfn id="syntax-attributes" title="syntax-attributes">Attributes</dfn> for an element
  are expressed inside the element's start tag.</p><p>Attributes have a name and a value. <dfn id="syntax-attribute-name" title="syntax-attribute-name">Attribute names</dfn> must consist of
  one or more characters other than the <a href="common-microsyntaxes.html#space-character" title="space
  character">space characters</a>, U+0000 NULL, U+0022 QUOTATION
  MARK ("), U+0027 APOSTROPHE ('), U+003E GREATER-THAN SIGN
  (&gt;), U+002F SOLIDUS (/), and U+003D EQUALS SIGN (=) characters,
  the control characters, and any characters that are not defined by
  Unicode. In the HTML syntax, attribute names, even those for
  <a href="#foreign-elements">foreign elements</a>, may be written with any mix of lower-
  and uppercase letters that are an <a href="infrastructure.html#ascii-case-insensitive">ASCII
  case-insensitive</a> match for the attribute's name.</p><p><dfn id="syntax-attribute-value" title="syntax-attribute-value">Attribute values</dfn> are a
  mixture of <a href="#syntax-text" title="syntax-text">text</a> and <a href="#syntax-charref" title="syntax-charref">character references</a>, except with the
  additional restriction that the text cannot contain an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>.</p><p>Attributes can be specified in four different ways:</p><dl><dt>Empty attribute syntax</dt>

   <dd>

    <p>Just the <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute
    name</a>. The value is implicitly the empty string.</p>

    <div class="example">

     <p>In the following example, the <code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code> attribute is given with
     the empty attribute syntax:</p>

     <pre>&lt;input <em>disabled</em>&gt;</pre>

    </div>

    <p>If an attribute using the empty attribute syntax is to be
    followed by another attribute, then there must be a <a href="common-microsyntaxes.html#space-character">space
    character</a> separating the two.</p>

   </dd>

   <dt id="unquoted">Unquoted attribute value syntax</dt>

   <dd>

    <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>,
    followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space
    characters</a>, followed by a single U+003D EQUALS SIGN
    character, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space
    character">space characters</a>, followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in
    addition to the requirements given above for attribute values,
    must not contain any literal <a href="common-microsyntaxes.html#space-character" title="space character">space
    characters</a>, any U+0022 QUOTATION MARK characters ("),
    U+0027 APOSTROPHE characters ('), U+003D EQUALS SIGN
    characters (=), U+003C LESS-THAN SIGN characters (&lt;), U+003E
    GREATER-THAN SIGN characters (&gt;), or U+0060 GRAVE ACCENT
    characters (`), and must not be the empty string.</p>

    

    <div class="example">

     <p>In the following example, the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute is given
     with the unquoted attribute value syntax:</p>

     <pre>&lt;input <em>value=yes</em>&gt;</pre>

    </div>

    <p>If an attribute using the unquoted attribute syntax is to be
    followed by another attribute or by the optional U+002F SOLIDUS
    character (/) allowed in step 6 of the <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> syntax above, then there
    must be a <a href="common-microsyntaxes.html#space-character">space character</a> separating the two.</p>

   </dd>

   <dt>Single-quoted attribute value syntax</dt>

   <dd>

    <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>,
    followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space
    characters</a>, followed by a single U+003D EQUALS SIGN
    character, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space
    character">space characters</a>, followed by a single U+0027
    APOSTROPHE character ('), followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in
    addition to the requirements given above for attribute values,
    must not contain any literal U+0027 APOSTROPHE characters ('), and
    finally followed by a second single U+0027 APOSTROPHE character
    (').</p>

    <div class="example">

     <p>In the following example, the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is given with the
     single-quoted attribute value syntax:</p>

     <pre>&lt;input <em>type='checkbox'</em>&gt;</pre>

    </div>

    <p>If an attribute using the single-quoted attribute syntax is to
    be followed by another attribute, then there must be a <a href="common-microsyntaxes.html#space-character">space
    character</a> separating the two.</p>

   </dd>

   <dt>Double-quoted attribute value syntax</dt>

   <dd>

    <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>,
    followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space
    characters</a>, followed by a single U+003D EQUALS SIGN
    character, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space
    character">space characters</a>, followed by a single U+0022
    QUOTATION MARK character ("), followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in
    addition to the requirements given above for attribute values,
    must not contain any literal U+0022 QUOTATION MARK characters ("),
    and finally followed by a second single U+0022 QUOTATION MARK
    character (").</p>

    <div class="example">

     <p>In the following example, the <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> attribute is given with the
     double-quoted attribute value syntax:</p>

     <pre>&lt;input <em>name="be evil"</em>&gt;</pre>

    </div>

    <p>If an attribute using the double-quoted attribute syntax is to
    be followed by another attribute, then there must be a <a href="common-microsyntaxes.html#space-character">space
    character</a> separating the two.</p>

   </dd>

  </dl><p>There must never be two or more attributes on the same start tag
  whose names are an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
  each other.</p><hr><p>When a <a href="#foreign-elements" title="foreign elements">foreign element</a> has
  one of the namespaced attributes given by the local name and
  namespace of the first and second cells of a row from the following
  table, it must be written using the name given by the third cell
  from the same row.</p><table><thead><tr><th> Local name </th><th> Namespace </th><th> Attribute name
   </th></tr></thead><tbody><tr><td> <code title="">actuate</code> </td><td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:actuate</code>
    </td></tr><tr><td> <code title="">arcrole</code> </td><td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:arcrole</code>
    </td></tr><tr><td> <code title="">href</code> </td><td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:href</code>
    </td></tr><tr><td> <code title="">role</code> </td><td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:role</code>
    </td></tr><tr><td> <code title="">show</code> </td><td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:show</code>
    </td></tr><tr><td> <code title="">title</code> </td><td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:title</code>
    </td></tr><tr><td> <code title="">type</code> </td><td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:type</code>
    </td></tr><tr><td> <code title="">base</code> </td><td> <a href="namespaces.html#xml-namespace">XML namespace</a>  </td><td> <code title="">xml:base</code>
    </td></tr><tr><td> <code title="">lang</code> </td><td> <a href="namespaces.html#xml-namespace">XML namespace</a> </td><td> <code title="">xml:lang</code>
    </td></tr><tr><td> <code title="">space</code> </td><td> <a href="namespaces.html#xml-namespace">XML namespace</a> </td><td> <code title="">xml:space</code>
    </td></tr><tr><td> <code title="">xmlns</code> </td><td> <a href="namespaces.html#xmlns-namespace">XMLNS namespace</a> </td><td> <code title="">xmlns</code>
    </td></tr><tr><td> <code title="">xlink</code> </td><td> <a href="namespaces.html#xmlns-namespace">XMLNS namespace</a> </td><td> <code title="">xmlns:xlink</code>
  </td></tr></tbody></table><p>No other namespaced attribute can be expressed in <a href="#syntax">the
  HTML syntax</a>.</p><h5 id="optional-tags"><span class="secno">8.1.2.4 </span>Optional tags</h5><p>Certain tags can be <dfn id="syntax-tag-omission" title="syntax-tag-omission">omitted</dfn>.</p><p class="note">Omitting an element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> does not mean the element
  is not present; it is implied, but it is still there. An HTML
  document always has a root <code><a href="semantics.html#the-html-element">html</a></code> element, even if the
  string <code title="">&lt;html&gt;</code> doesn't appear anywhere in
  the markup.</p><p>An <code><a href="semantics.html#the-html-element">html</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the
  first thing inside the <code><a href="semantics.html#the-html-element">html</a></code> element is not a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>An <code><a href="semantics.html#the-html-element">html</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="semantics.html#the-html-element">html</a></code> element is not
  immediately followed by a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>A <code><a href="semantics.html#the-head-element">head</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the
  element is empty, or if the first thing inside the
  <code><a href="semantics.html#the-head-element">head</a></code> element is an element.</p><p>A <code><a href="semantics.html#the-head-element">head</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="semantics.html#the-head-element">head</a></code> element is not
  immediately followed by a <a href="common-microsyntaxes.html#space-character">space character</a> or a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>A <code><a href="sections.html#the-body-element">body</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the
  element is empty, or if the first thing inside the <code><a href="sections.html#the-body-element">body</a></code>
  element is not a <a href="common-microsyntaxes.html#space-character">space character</a> or a <a href="#syntax-comments" title="syntax-comments">comment</a>, except if the first thing
  inside the <code><a href="sections.html#the-body-element">body</a></code> element is a <code><a href="scripting-1.html#the-script-element">script</a></code> or
  <code><a href="semantics.html#the-style-element">style</a></code> element. </p><p>A <code><a href="sections.html#the-body-element">body</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="sections.html#the-body-element">body</a></code> element is not
  immediately followed by a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>A <code><a href="grouping-content.html#the-li-element">li</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="grouping-content.html#the-li-element">li</a></code> element is
  immediately followed by another <code><a href="grouping-content.html#the-li-element">li</a></code> element or if there
  is no more content in the parent element.</p><p>A <code><a href="grouping-content.html#the-dt-element">dt</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="grouping-content.html#the-dt-element">dt</a></code> element is
  immediately followed by another <code><a href="grouping-content.html#the-dt-element">dt</a></code> element or a
  <code><a href="grouping-content.html#the-dd-element">dd</a></code> element.</p><p>A <code><a href="grouping-content.html#the-dd-element">dd</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="grouping-content.html#the-dd-element">dd</a></code> element is
  immediately followed by another <code><a href="grouping-content.html#the-dd-element">dd</a></code> element or a
  <code><a href="grouping-content.html#the-dt-element">dt</a></code> element, or if there is no more content in the
  parent element.</p><p>A <code><a href="grouping-content.html#the-p-element">p</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="grouping-content.html#the-p-element">p</a></code> element is
  immediately followed by an <code><a href="sections.html#the-address-element">address</a></code>,
  <code><a href="sections.html#the-article-element">article</a></code>, <code><a href="sections.html#the-aside-element">aside</a></code>, <code><a href="grouping-content.html#the-blockquote-element">blockquote</a></code>,
  <code><a href="obsolete.html#dir">dir</a></code>, <code><a href="grouping-content.html#the-div-element">div</a></code>, <code><a href="grouping-content.html#the-dl-element">dl</a></code>,
  <code><a href="forms.html#the-fieldset-element">fieldset</a></code>, <code><a href="sections.html#the-footer-element">footer</a></code>, <code><a href="forms.html#the-form-element">form</a></code>,
  <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>, <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code>, <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code>, <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code>,
  <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code>, <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code>, <code><a href="sections.html#the-header-element">header</a></code>,
  <code><a href="sections.html#the-hgroup-element">hgroup</a></code>, <code><a href="grouping-content.html#the-hr-element">hr</a></code>, <code><a href="interactive-elements.html#the-menu-element">menu</a></code>,
  <code><a href="sections.html#the-nav-element">nav</a></code>, <code><a href="grouping-content.html#the-ol-element">ol</a></code>, <code><a href="grouping-content.html#the-p-element">p</a></code>, <code><a href="grouping-content.html#the-pre-element">pre</a></code>,
  <code><a href="sections.html#the-section-element">section</a></code>, <code><a href="tabular-data.html#the-table-element">table</a></code>, or <code><a href="grouping-content.html#the-ul-element">ul</a></code>,
  element, or if there is no more content in the parent element and
  the parent element is not an <code><a href="text-level-semantics.html#the-a-element">a</a></code> element.</p><p>An <code><a href="text-level-semantics.html#the-rt-element">rt</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="text-level-semantics.html#the-rt-element">rt</a></code> element is
  immediately followed by an <code><a href="text-level-semantics.html#the-rt-element">rt</a></code> or <code><a href="text-level-semantics.html#the-rp-element">rp</a></code>
  element, or if there is no more content in the parent element.</p><p>An <code><a href="text-level-semantics.html#the-rp-element">rp</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="text-level-semantics.html#the-rp-element">rp</a></code> element is
  immediately followed by an <code><a href="text-level-semantics.html#the-rt-element">rt</a></code> or <code><a href="text-level-semantics.html#the-rp-element">rp</a></code>
  element, or if there is no more content in the parent element.</p><p>An <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a> may be omitted if the
  <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element  is immediately followed by
  another <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element, or if  there is no
  more content in the parent element.</p><p>An <code><a href="the-button-element.html#the-option-element">option</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="the-button-element.html#the-option-element">option</a></code> element is
  immediately followed by another <code><a href="the-button-element.html#the-option-element">option</a></code> element, or if
  it is immediately followed by an <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element, or
  if there is no more content in the parent element.</p><p>A <code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the
  first thing inside the <code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element is a
  <code><a href="tabular-data.html#the-col-element">col</a></code> element, and if the element is not immediately
  preceded by another <code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element whose <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a> has been omitted. (It can't be
  omitted if the element is empty.)</p><p>A <code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a> may be omitted if the
  <code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element is not immediately followed by a
  <a href="common-microsyntaxes.html#space-character">space character</a> or a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>A <code><a href="tabular-data.html#the-thead-element">thead</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="tabular-data.html#the-thead-element">thead</a></code> element is
  immediately followed by a <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> or <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code>
  element.</p><p>A <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the
  first thing inside the <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> element is a
  <code><a href="tabular-data.html#the-tr-element">tr</a></code> element, and if the element is not immediately
  preceded by a <code><a href="tabular-data.html#the-tbody-element">tbody</a></code>, <code><a href="tabular-data.html#the-thead-element">thead</a></code>, or
  <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code> element whose <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> has been omitted. (It can't be omitted if the element is
  empty.)</p><p>A <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> element is
  immediately followed by a <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> or <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code>
  element, or if there is no more content in the parent element.</p><p>A <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code> element is
  immediately followed by a <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> element, or if there is
  no more content in the parent element.</p><p>A <code><a href="tabular-data.html#the-tr-element">tr</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="tabular-data.html#the-tr-element">tr</a></code> element is
  immediately followed by another <code><a href="tabular-data.html#the-tr-element">tr</a></code> element, or if there
  is no more content in the parent element.</p><p>A <code><a href="tabular-data.html#the-td-element">td</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="tabular-data.html#the-td-element">td</a></code> element is
  immediately followed by a <code><a href="tabular-data.html#the-td-element">td</a></code> or <code><a href="tabular-data.html#the-th-element">th</a></code>
  element, or if there is no more content in the parent element.</p><p>A <code><a href="tabular-data.html#the-th-element">th</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
  tag</a> may be omitted if the <code><a href="tabular-data.html#the-th-element">th</a></code> element is
  immediately followed by a <code><a href="tabular-data.html#the-td-element">td</a></code> or <code><a href="tabular-data.html#the-th-element">th</a></code>
  element, or if there is no more content in the parent element.</p><p><strong>However</strong>, a <a href="#syntax-start-tag" title="syntax-start-tag">start
  tag</a> must never be omitted if it has any attributes.</p><h5 id="element-restrictions"><span class="secno">8.1.2.5 </span>Restrictions on content models</h5><p>For historical reasons, certain elements have extra restrictions
  beyond even the restrictions given by their content model.</p><p>A <code><a href="tabular-data.html#the-table-element">table</a></code> element must not contain <code><a href="tabular-data.html#the-tr-element">tr</a></code>
  elements, even though these elements are technically allowed inside
  <code><a href="tabular-data.html#the-table-element">table</a></code> elements according to the content models
  described in this specification. (If a <code><a href="tabular-data.html#the-tr-element">tr</a></code> element is
  put inside a <code><a href="tabular-data.html#the-table-element">table</a></code> in the markup, it will in fact imply
  a <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> start tag before it.)</p><p>A single <a href="#syntax-newlines" title="syntax-newlines">newline</a> may be
  placed immediately after the <a href="#syntax-start-tag" title="syntax-start-tag">start
  tag</a> of <code><a href="grouping-content.html#the-pre-element">pre</a></code> and <code><a href="the-button-element.html#the-textarea-element">textarea</a></code>
  elements. This does not affect the processing of the element. The
  otherwise optional <a href="#syntax-newlines" title="syntax-newlines">newline</a>
  <em>must</em> be included if the element's contents themselves start
  with a <a href="#syntax-newlines" title="syntax-newlines">newline</a> (because
  otherwise the leading newline in the contents would be treated like
  the optional newline, and ignored).</p><div class="example">
   <p>The following two <code><a href="grouping-content.html#the-pre-element">pre</a></code> blocks are equivalent:</p>
   <pre>&lt;pre&gt;Hello&lt;/pre&gt;</pre>
   <pre>&lt;pre&gt;<br>Hello&lt;/pre&gt;</pre>
  </div><h5 id="cdata-rcdata-restrictions"><span class="secno">8.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</h5><p>The text in <a href="#raw-text-elements" title="raw text elements">raw text</a> and
  <a href="#rcdata-elements">RCDATA elements</a> must not contain any occurrences of the
  string "<code title="">&lt;/</code>" (U+003C LESS-THAN SIGN, U+002F
  SOLIDUS) followed by characters that case-insensitively match the
  tag name of the element followed by one of U+0009 CHARACTER
  TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D
  CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN (&gt;), or
  U+002F SOLIDUS (/).</p><h4 id="text-0"><span class="secno">8.1.3 </span>Text</h4><p><dfn id="syntax-text" title="syntax-text">Text</dfn> is allowed inside elements,
  attribute values, and comments. Text must consist of Unicode
  characters. Text must not contain U+0000 characters. Text must not
  contain permanently undefined Unicode characters (noncharacters).
  Text must not contain control characters other than <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>. Extra constraints
  are placed on what is and what is not allowed in text based on where
  the text is to be put, as described in the other sections.</p><h5 id="newlines"><span class="secno">8.1.3.1 </span>Newlines</h5><p><dfn id="syntax-newlines" title="syntax-newlines">Newlines</dfn> in HTML may be
  represented either as U+000D CARRIAGE RETURN (CR) characters, U+000A
  LINE FEED (LF) characters, or pairs of U+000D CARRIAGE RETURN (CR),
  U+000A LINE FEED (LF) characters in that order.</p><p>Where <a href="#syntax-charref" title="syntax-charref">character references</a>
  are allowed, a character reference of a U+000A LINE FEED (LF)
  character (but not a U+000D CARRIAGE RETURN (CR) character) also
  represents a <a href="#syntax-newlines" title="syntax-newlines">newline</a>.</p><h4 id="character-references"><span class="secno">8.1.4 </span>Character references</h4><p>In certain cases described in other sections, <a href="#syntax-text" title="syntax-text">text</a> may be mixed with <dfn id="syntax-charref" title="syntax-charref">character references</dfn>. These can be used
  to escape characters that couldn't otherwise legally be included in
  <a href="#syntax-text" title="syntax-text">text</a>.</p><p>Character references must start with a U+0026 AMPERSAND character
  (&amp;). Following this, there are three possible kinds of character
  references:</p><dl><dt>Named character references</dt>

   <dd>The ampersand must be followed by one of the names given in the
   <a href="named-character-references.html#named-character-references">named character references</a> section, using the same
   case. <span class="impl">The name must be one that is terminated by
   a U+003B SEMICOLON character (;).</span></dd>


   <dt>Decimal numeric character reference</dt>

   <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
   character (#), followed by one or more digits in the range U+0030
   DIGIT ZERO (0) to U+0039 DIGIT NINE (9), representing a base-ten
   integer that corresponds to a Unicode code point that is allowed
   according to the definition below. The digits must then be followed
   by a U+003B SEMICOLON character (;).</dd>


   <dt>Hexadecimal numeric character reference</dt>

   <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
   character (#), which must be followed by either a U+0078 LATIN
   SMALL LETTER X character (x) or a U+0058 LATIN CAPITAL LETTER X
   character (X), which must then be followed by one or more digits in
   the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061
   LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, and U+0041
   LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F,
   representing a base-sixteen integer that corresponds to a Unicode
   code point that is allowed according to the definition below. The
   digits must then be followed by a U+003B SEMICOLON character
   (;).</dd>

  </dl><p>The numeric character reference forms described above are allowed
  to reference any Unicode code point other than U+0000, U+000D,
  permanently undefined Unicode characters (noncharacters), and
  control characters other than <a href="common-microsyntaxes.html#space-character" title="space character">space
  characters</a>.</p><p>An <dfn id="syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous
  ampersand</dfn> is a U+0026 AMPERSAND character (&amp;) that is
  followed by one or more characters in the range U+0030 DIGIT ZERO
  (0) to U+0039 DIGIT NINE (9), U+0061 LATIN SMALL LETTER A to U+007A
  LATIN SMALL LETTER Z, and U+0041 LATIN CAPITAL LETTER A to U+005A
  LATIN CAPITAL LETTER Z, followed by a U+003B SEMICOLON character
  (;), where these characters do not match any of the names given in
  the <a href="named-character-references.html#named-character-references">named character references</a> section.</p><h4 id="cdata-sections"><span class="secno">8.1.5 </span>CDATA sections</h4><p><dfn id="syntax-cdata" title="syntax-cdata">CDATA sections</dfn> must consist of
  the following components, in this order:</p><ol><li>The string "<code title="">&lt;![CDATA[</code>".</li>

   <li>Optionally, <a href="#syntax-text" title="syntax-text">text</a>, with the
   additional restriction that the text must not contain the string
   "<code title="">]]&gt;</code>".</li>

   <li>The string "<code title="">]]&gt;</code>".</li>

  </ol><div class="example">

   <p>CDATA sections can only be used in foreign content (MathML or
   SVG). In this example, a CDATA section is used to escape the
   contents of an <code>ms</code> element:</p>

   <pre>&lt;p&gt;You can add a string to a number, but this stringifies the number:&lt;/p&gt;
&lt;math&gt;
 &lt;ms&gt;&lt;![CDATA[x&lt;y]]&gt;&lt;/ms&gt;
 &lt;mo&gt;+&lt;/mo&gt;
 &lt;mn&gt;3&lt;/mn&gt;
 &lt;mo&gt;=&lt;/mo&gt;
 &lt;ms&gt;&lt;![CDATA[x&lt;y3]]&gt;&lt;/ms&gt;
&lt;/math&gt;</pre>

  </div><h4 id="comments"><span class="secno">8.1.6 </span>Comments</h4><p><dfn id="syntax-comments" title="syntax-comments">Comments</dfn> must start with the
  four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION
  MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS (<code title="">&lt;!--</code>). Following this sequence, the comment may
  have <a href="#syntax-text" title="syntax-text">text</a>, with the additional
  restriction that the text must not start with a single U+003E
  GREATER-THAN SIGN character (&gt;), nor start with a U+002D
  HYPHEN-MINUS character (-) followed by a U+003E GREATER-THAN SIGN
  (&gt;) character, nor contain two consecutive U+002D HYPHEN-MINUS
  characters (<code title="">--</code>), nor end with a U+002D
  HYPHEN-MINUS character (-). Finally, the comment must be ended by
  the three character sequence U+002D HYPHEN-MINUS, U+002D
  HYPHEN-MINUS, U+003E GREATER-THAN SIGN (<code title="">--&gt;</code>).</p></body></html>