Annotation of html5/spec/syntax.html, revision 1.1037

1.872     mike        1: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
1.894     mike        2: <!DOCTYPE html>
1.1034    mike        3: <html lang="en-US-x-Hixie" class="split chapter"><head><title>8 The HTML syntax &#8212; HTML5 </title><style type="text/css">
1.1       mike        4:    pre { margin-left: 2em; white-space: pre-wrap; }
                      5:    h2 { margin: 3em 0 1em 0; }
                      6:    h3 { margin: 2.5em 0 1em 0; }
                      7:    h4 { margin: 2.5em 0 0.75em 0; }
                      8:    h5, h6 { margin: 2.5em 0 1em; }
                      9:    h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
                     10:    h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
                     11:    p { margin: 1em 0; }
                     12:    hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
                     13:    dl, dd { margin-top: 0; margin-bottom: 0; }
                     14:    dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
                     15:    dt + dt { margin-top: 0; }
                     16:    dd dt { margin-top: 0.25em; margin-bottom: 0; }
                     17:    dd p { margin-top: 0; }
                     18:    dd dl + p { margin-top: 1em; }
                     19:    dd table + p { margin-top: 1em; }
                     20:    p + * > li, dd li { margin: 1em 0; }
                     21:    dt, dfn { font-weight: bold; font-style: normal; }
                     22:    dt dfn { font-style: italic; }
                     23:    pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
                     24:    pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
                     25:    pre em { font-weight: bolder; font-style: normal; }
                     26:    @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
                     27:    var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
                     28:    table { border-collapse: collapse; border-style: hidden hidden none hidden; }
1.983     mike       29:    table thead, table tbody { border-bottom: solid; }
1.1       mike       30:    table tbody th:first-child { border-left: solid; }
1.475     mike       31:    table tbody th { text-align: left; }
1.1       mike       32:    table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
                     33:    blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
                     34: 
                     35:    .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
                     36:    .matrix, .matrix td { border: none; text-align: right; }
                     37:    .matrix { margin-left: 2em; }
                     38:    .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
                     39:    .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
                     40:    .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
                     41: 
                     42:    .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
                     43:    img.extra { float: right; }
                     44:    pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
                     45:    pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
                     46:    pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
                     47:    pre.css:first-line { color: #AAAA50; }
1.840     mike       48:    dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
1.1       mike       49:    hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
                     50:    dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
                     51:    dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
                     52:    dl.domintro dd p { margin: 0.5em 0; }
                     53:    dl.switch { padding-left: 2em; }
                     54:    dl.switch > dt { text-indent: -1.5em; }
                     55:    dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
                     56:    dl.triple { padding: 0 0 0 1em; }
                     57:    dl.triple dt, dl.triple dd { margin: 0; display: inline }
                     58:    dl.triple dt:after { content: ':'; }
                     59:    dl.triple dd:after { content: '\A'; white-space: pre; }
                     60:    .diff-old { text-decoration: line-through; color: silver; background: transparent; }
                     61:    .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
                     62:    a .diff-new { border-bottom: 1px blue solid; }
                     63: 
                     64:    h2 { page-break-before: always; }
                     65:    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
                     66:    h1 + h2, hr + h2.no-toc { page-break-before: auto; }
                     67: 
1.1016    mike       68:    p  > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
                     69:    li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }
1.1       mike       70: 
                     71:    div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
                     72:    div.head p { margin: 0; }
                     73:    div.head h1 { margin: 0; }
                     74:    div.head .logo { float: right; margin: 0 1em; }
                     75:    div.head .logo img { border: none } /* remove border from top image */
                     76:    div.head dl { margin: 1em 0; }
1.671     mike       77:    div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
1.1       mike       78: 
                     79:    body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
                     80:    body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
                     81:    body > .toc > li > * { margin-bottom: 0.5em; }
                     82:    body > .toc > li > * > li > * { margin-bottom: 0.25em; }
                     83:    .toc, .toc li { list-style: none; }
                     84: 
                     85:    .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
                     86:    .brief li { margin: 0; padding: 0; }
                     87:    .brief li p { margin: 0; padding: 0; }
                     88: 
                     89:    .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
                     90:    .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
                     91:    .category-list li { display: inline; }
                     92:    .category-list li:not(:last-child)::after { content: ', '; }
                     93:    .category-list li > span, .category-list li > a { text-transform: lowercase; }
                     94:    .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
                     95: 
                     96:    .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
                     97:    .XXX > :first-child { margin-top: 0; }
                     98:    p .XXX { line-height: 3em; }
1.159     mike       99:    .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
                    100:    .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
                    101:    .annotation :link, .annotation :visited { color: inherit; }
                    102:    .annotation :link:hover, .annotation :visited:hover { background: transparent; }
                    103:    .annotation span { border: none ! important; }
1.1       mike      104:    .note { color: green; background: transparent; font-family: sans-serif; }
                    105:    .warning { color: red; background: transparent; }
                    106:    .note, .warning { font-weight: bolder; font-style: italic; }
                    107:    p.note, div.note { padding: 0.5em 2em; }
                    108:    span.note { padding: 0 2em; }
                    109:    .note p:first-child, .warning p:first-child { margin-top: 0; }
                    110:    .note p:last-child, .warning p:last-child { margin-bottom: 0; }
                    111:    .warning:before { font-style: normal; }
                    112:    p.note:before { content: 'Note: '; }
                    113:    p.warning:before { content: '\26A0 Warning! '; }
                    114: 
                    115:    .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
                    116:    .bookkeeping { font-size: 0.8em; margin: 2em 0; }
                    117:    .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
1.1006    mike      118:    .bookkeeping dt { margin: 0.5em 2em 0; }
                    119:    .bookkeeping dd { margin: 0 3em 0.5em; }
1.1       mike      120: 
                    121:    h4 { position: relative; z-index: 3; }
                    122:    h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
                    123:    .element {
                    124:      background: #EEEEFF;
                    125:      color: black;
                    126:      margin: 0 0 1em 0.15em;
                    127:      padding: 0 1em 0.25em 0.75em;
                    128:      border-left: solid #9999FF 0.25em;
                    129:      position: relative;
                    130:      z-index: 1;
                    131:    }
                    132:    .element:before {
                    133:      position: absolute;
                    134:      z-index: 2;
                    135:      top: 0;
                    136:      left: -1.15em;
                    137:      height: 2em;
                    138:      width: 0.9em;
                    139:      background: #EEEEFF;
                    140:      content: ' ';
                    141:      border-style: none none solid solid;
                    142:      border-color: #9999FF;
                    143:      border-width: 0.25em;
                    144:    }
                    145: 
1.149     mike      146:    .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
                    147:    td > .example:only-child { margin: 0 0 0 0.1em; }
1.1       mike      148: 
                    149:    ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
                    150:    ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
                    151:    ul.domTree li li { list-style: none; }
                    152:    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; }
                    153:    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; }
                    154:    ul.domTree span { font-style: italic; font-family: serif; }
                    155:    ul.domTree .t1 code { color: purple; font-weight: bold; }
                    156:    ul.domTree .t2 { font-style: normal; font-family: monospace; }
                    157:    ul.domTree .t2 .name { color: black; font-weight: bold; }
                    158:    ul.domTree .t2 .value { color: blue; font-weight: normal; }
                    159:    ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
                    160:    ul.domTree .t7 code, .domTree .t8 code { color: green; }
                    161:    ul.domTree .t10 code { color: teal; }
                    162: 
1.736     mike      163:    body.dfnEnabled dfn { cursor: pointer; }
                    164:    .dfnPanel {
                    165:      display: inline;
                    166:      position: absolute;
                    167:      z-index: 10;
                    168:      height: auto;
                    169:      width: auto;
                    170:      padding: 0.5em 0.75em;
                    171:      font: small sans-serif, Droid Sans Fallback;
                    172:      background: #DDDDDD;
                    173:      color: black;
                    174:      border: outset 0.2em;
                    175:    }
                    176:    .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
                    177:    .dfnPanel :link, .dfnPanel :visited { color: black; }
                    178:    .dfnPanel p { font-weight: bolder; }
                    179:    .dfnPanel * + p { margin-top: 0.25em; }
                    180:    .dfnPanel li { list-style-position: inside; }
                    181: 
1.671     mike      182:    #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
                    183:    #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
                    184:    #configUI p label { display: block; }
                    185:    #configUI #updateUI, #configUI .loginUI { text-align: center; }
                    186:    #configUI input[type=button] { display: block; margin: auto; }
1.1002    mike      187: 
1.1021    mike      188:    fieldset { margin: 1em; padding: 0.5em 1em; }
                    189:    fieldset > legend + * { margin-top: 0; }
1.1013    mike      190:    fieldset > :last-child { margin-bottom: 0; }
1.1021    mike      191:    fieldset p { margin: 0.5em 0; }
                    192: 
1.1033    mike      193:   </style><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><style type="text/css">
1.267     mike      194: 
1.292     mike      195:    .applies thead th > * { display: block; }
                    196:    .applies thead code { display: block; }
                    197:    .applies tbody th { whitespace: nowrap; }
                    198:    .applies td { text-align: center; }
                    199:    .applies .yes { background: yellow; }
                    200: 
1.1007    mike      201:    .matrix, .matrix td { border: hidden; text-align: right; }
1.267     mike      202:    .matrix { margin-left: 2em; }
                    203: 
                    204:    .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
                    205:    .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
                    206:    .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
                    207: 
1.1009    mike      208:    td.eg { border-width: thin; text-align: center; }
                    209: 
1.267     mike      210:    #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
                    211:    #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
                    212:    #table-example-1 caption { padding-bottom: 0.5em; }
                    213:    #table-example-1 thead, #table-example-1 tbody { border: none; }
                    214:    #table-example-1 th, #table-example-1 td { border: solid thin; }
                    215:    #table-example-1 th { font-weight: normal; }
                    216:    #table-example-1 td { border-style: none solid; vertical-align: top; }
                    217:    #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
                    218:    #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
                    219:    #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
                    220:    #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
                    221:    #table-example-1 tbody td:first-child::after { content: leader(". "); }
                    222:    #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
                    223:    #table-example-1 tbody td:first-child + td { width: 10em; }
                    224:    #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
                    225:    #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
                    226: 
                    227:    .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
                    228:    .apple-table-examples * { font-family: "Times", serif; }
                    229:    .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
                    230:    .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
                    231:    .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
                    232:    .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
                    233:    .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
                    234:    .apple-table-examples td { text-align: right; vertical-align: top; }
                    235:    .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
                    236:    .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
                    237:    .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
                    238:    .apple-table-examples sup { line-height: 0; }
                    239: 
1.724     mike      240:    .details-example img { vertical-align: top; }
                    241: 
1.1028    mike      242:    #base64-table {
                    243:      white-space: nowrap;
                    244:      font-size: 0.6em;
                    245:      column-width: 6em;
                    246:      column-count: 5;
                    247:      column-gap: 1em;
                    248:      -moz-column-width: 6em;
                    249:      -moz-column-count: 5;
                    250:      -moz-column-gap: 1em;
                    251:      -webkit-column-width: 6em;
                    252:      -webkit-column-count: 5;
                    253:      -webkit-column-gap: 1em;
                    254:    }
                    255:    #base64-table thead { display: none; }
                    256:    #base64-table * { border: none; }
                    257:    #base64-table tbody td:first-child:after { content: ':'; }
                    258:    #base64-table tbody td:last-child { text-align: right; }
                    259: 
1.882     mike      260:    #named-character-references-table {
1.1010    mike      261:      white-space: nowrap;
1.882     mike      262:      font-size: 0.6em;
1.1010    mike      263:      column-width: 30em;
1.882     mike      264:      column-gap: 1em;
1.1010    mike      265:      -moz-column-width: 30em;
1.882     mike      266:      -moz-column-gap: 1em;
1.1010    mike      267:      -webkit-column-width: 30em;
1.882     mike      268:      -webkit-column-gap: 1em;
                    269:    }
1.1010    mike      270:    #named-character-references-table > table > tbody > tr > td:first-child + td,
1.882     mike      271:    #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
                    272:    #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; }
1.1010    mike      273:    #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
1.882     mike      274: 
1.997     mike      275:    .glyph.control { color: red; }
                    276: 
1.999     mike      277:    @font-face {
                    278:      font-family: 'Essays1743';
                    279:      src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
                    280:    }
                    281:    @font-face {
                    282:      font-family: 'Essays1743';
                    283:      font-weight: bold;
                    284:      src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
                    285:    }
                    286:    @font-face {
                    287:      font-family: 'Essays1743';
                    288:      font-style: italic;
                    289:      src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
                    290:    }
                    291:    @font-face {
                    292:      font-family: 'Essays1743';
                    293:      font-style: italic;
                    294:      font-weight: bold;
                    295:      src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
                    296:    }
                    297: 
1.872     mike      298:   </style><style type="text/css">
1.881     mike      299:    .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; }
1.1033    mike      300:   </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><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"><script type="text/javascript">
                    301:    function getCookie(name) {
                    302:      var params = location.search.substr(1).split("&");
                    303:      for (var index = 0; index < params.length; index++) {
                    304:        if (params[index] == name)
                    305:          return "1";
                    306:        var data = params[index].split("=");
                    307:        if (data[0] == name)
                    308:          return unescape(data[1]);
                    309:      }
                    310:      var cookies = document.cookie.split("; ");
                    311:      for (var index = 0; index < cookies.length; index++) {
                    312:        var data = cookies[index].split("=");
                    313:        if (data[0] == name)
                    314:          return unescape(data[1]);
                    315:      }
                    316:      return null;
                    317:    }
                    318:    function load(script) {
                    319:      var e = document.createElement('script');
                    320:      e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
                    321:      document.body.appendChild(e);
                    322:    }
                    323:    function init() {
                    324:      if (location.search == '?slow-browser')
                    325:        return;
                    326:      var configUI = document.createElement('div');
                    327:      configUI.id = 'configUI';
                    328:      document.body.appendChild(configUI);
                    329:      // load('reviewer.js'); // would need cross-site XHR
                    330:      if (document.getElementById('head'))
                    331:        load('toc.js');
                    332:      load('styler.js');
                    333:      // load('updater.js'); // would need cross-site XHR
                    334:      load('dfn.js'); // doesn't support split-out specs, but, oh well.
                    335:      // load('status.js'); // would need cross-site XHR
                    336:      if (getCookie('profile') == '1')
                    337:        document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
                    338:      fixBrokenLink();
                    339:    }
                    340:   </script>
1.996     mike      341:   <script src="link-fixup.js"></script>
1.1023    mike      342:   <link href="style.css" rel="stylesheet"><link href="dnd.html" title="7.7 Drag and drop" rel="prev">
1.2       mike      343:   <link href="spec.html#contents" title="Table of contents" rel="index">
1.996     mike      344:   <link href="parsing.html" title="8.2 Parsing HTML documents" rel="next">
1.1033    mike      345:   </head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
1.1       mike      346:    <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
1.998     mike      347: 
1.183     mike      348:    <h1>HTML5</h1>
1.874     mike      349:    </div><div>
1.1023    mike      350:    <a href="dnd.html" class="prev">7.7 Drag and drop</a> &#8211;
1.2       mike      351:    <a href="spec.html#contents">Table of contents</a> &#8211;
1.1023    mike      352:    <a href="parsing.html" class="next">8.2 Parsing HTML documents</a>
1.996     mike      353:   <ol class="toc"><li><a href="syntax.html#syntax"><span class="secno">8 </span>The HTML syntax</a>
                    354:   <ol><li><a href="syntax.html#writing"><span class="secno">8.1 </span>Writing HTML documents</a>
                    355:     <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>
                    356:       <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>
                    357:       <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>
1.1       mike      358: 
1.755     mike      359:   <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
1.725     mike      360:   labeled with an <a href="infrastructure.html#html-mime-type">HTML MIME type</a>. Rules for XML resources
                    361:   are discussed in the section below entitled "<a href="the-xhtml-syntax.html#the-xhtml-syntax">The XHTML
1.1008    mike      362:   syntax</a>".</p><h3 id="writing"><span class="secno">8.1 </span>Writing HTML documents</h3><div class="impl">
1.1       mike      363: 
                    364:   <p><i>This section only applies to documents, authoring tools, and
                    365:   markup generators. In particular, it does not apply to conformance
                    366:   checkers; conformance checkers must use the requirements given in
                    367:   the next section ("parsing HTML documents").</i></p>
                    368: 
1.123     mike      369:   </div><p>Documents must consist of the following parts, in the given
                    370:   order:</p><ol><li>Optionally, a single U+FEFF BYTE ORDER MARK (BOM) character.</li>
1.1       mike      371: 
                    372:    <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
1.996     mike      373:    <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.1       mike      374: 
                    375:    <li>A <a href="#syntax-doctype" title="syntax-doctype">DOCTYPE</a>.
                    376: 
                    377:    </li><li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
1.996     mike      378:    <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.1       mike      379: 
1.1035    mike      380:    <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>
1.1       mike      381: 
                    382:    <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
1.996     mike      383:    <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.1       mike      384: 
                    385:   </ol><p>The various types of content mentioned above are described in the
1.123     mike      386:   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
1.1       mike      387:   declarations</a> are to be serialized, as discussed in the
1.123     mike      388:   section on that topic.</p><div class="note">
1.1       mike      389: 
1.1035    mike      390:    <p>Space characters before the root <code><a href="semantics.html#the-html-element">html</a></code> element, and
                    391:    space characters at the start of the <code><a href="semantics.html#the-html-element">html</a></code> element and
                    392:    before the <code><a href="semantics.html#the-head-element">head</a></code> element, will be dropped when the
1.1       mike      393:    document is parsed; space characters <em>after</em> the root
1.1035    mike      394:    <code><a href="semantics.html#the-html-element">html</a></code> element will be parsed as if they were at the end
1.1036    mike      395:    of the <code><a href="sections.html#the-body-element">body</a></code> element. Thus, space characters around the
1.1       mike      396:    root element do not round-trip.</p>
                    397: 
                    398:    <p>It is suggested that newlines be inserted after the DOCTYPE,
                    399:    after any comments that are before the root element, after the
1.1035    mike      400:    <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
                    401:    that are inside the <code><a href="semantics.html#the-html-element">html</a></code> element but before the
                    402:    <code><a href="semantics.html#the-head-element">head</a></code> element.</p>
1.1       mike      403: 
1.123     mike      404:   </div><p>Many strings in the HTML syntax (e.g. the names of elements and
1.1       mike      405:   their attributes) are case-insensitive, but only for characters in
1.547     mike      406:   the ranges U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL
                    407:   LETTER Z) and U+0061 to U+007A (LATIN SMALL LETTER A to LATIN SMALL
1.1       mike      408:   LETTER Z). For convenience, in this section this is just referred to
1.1034    mike      409:   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
1.1       mike      410:   omitted, browsers tend to use a different rendering mode that is
                    411:   incompatible with some specifications. Including the DOCTYPE in a
                    412:   document ensures that the browser makes a best-effort attempt at
1.1029    mike      413:   following the relevant specifications.</p><p>A DOCTYPE must consist of the following components, in this
1.882     mike      414:   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>
1.996     mike      415:    <li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.1011    mike      416:    <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>
1.861     mike      417:    <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>
1.996     mike      418:    <li>Zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.588     mike      419:    <li>A U+003E GREATER-THAN SIGN character (&gt;).</li>
1.1011    mike      420:   </ol><p class="note">In other words, <code>&lt;!DOCTYPE html&gt;</code>,
1.861     mike      421:   case-insensitively.</p><hr><p>For the purposes of HTML generators that cannot output HTML
1.1       mike      422:   markup with the short DOCTYPE "<code title="">&lt;!DOCTYPE
1.1011    mike      423:   html&gt;</code>", a <dfn id="doctype-legacy-string">DOCTYPE legacy string</dfn> may be inserted
1.1       mike      424:   into the DOCTYPE (in the position defined above). This string must
1.996     mike      425:   consist of:</p><ol class="brief"><li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.1       mike      426:    <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>
1.996     mike      427:    <li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.1       mike      428:    <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>quote mark</i>).</li>
1.996     mike      429:    <li>The literal string "<code><a href="urls.html#about:legacy-compat">about:legacy-compat</a></code>".</li>
1.856     mike      430:    <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>
1.1011    mike      431:   </ol><p class="note">In other words, <code>&lt;!DOCTYPE html SYSTEM
                    432:   "about:legacy-compat"&gt;</code> or <code>&lt;!DOCTYPE html SYSTEM
1.1004    mike      433:   'about:legacy-compat'&gt;</code>, case-insensitively except for the
                    434:   part in single or double quotes.</p><p>The <a href="#doctype-legacy-string">DOCTYPE legacy string</a> should not be used unless
1.1       mike      435:   the document is generated from a system that cannot output the
1.1034    mike      436:   shorter string.</p><hr><p>To help authors transition from HTML4 and XHTML1, an
1.861     mike      437:   <dfn id="obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</dfn> can be inserted into
                    438:   the DOCTYPE (in the position defined above). This string must
1.996     mike      439:   consist of:</p><ol class="brief"><li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.861     mike      440:    <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>
1.996     mike      441:    <li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.861     mike      442:    <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>first quote mark</i>).</li>
                    443:    <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>
                    444:    <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>
1.996     mike      445:    <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>
1.861     mike      446:    <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>
                    447:    <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>
                    448:    <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>
                    449:   </ol><table><caption>
                    450:     Allowed values for public and system identifiers in an <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a>.
                    451:    </caption>
                    452:    <thead><tr><th> Public identifier
                    453:      </th><th> System identifier
                    454:    </th></tr></thead><tbody><tr><td> <code title="">-//W3C//DTD&#160;HTML&#160;4.0//EN</code>
                    455:      </td><td>
                    456:     </td></tr><tr><td> <code title="">-//W3C//DTD&#160;HTML&#160;4.0//EN</code>
                    457:      </td><td> <code title="">http://www.w3.org/TR/REC-html40/strict.dtd</code>
                    458:     </td></tr><tr><td> <code title="">-//W3C//DTD&#160;HTML&#160;4.01//EN</code>
                    459:      </td><td>
                    460:     </td></tr><tr><td> <code title="">-//W3C//DTD&#160;HTML&#160;4.01//EN</code>
                    461:      </td><td> <code title="">http://www.w3.org/TR/html4/strict.dtd</code>
                    462:     </td></tr><tr><td> <code title="">-//W3C//DTD&#160;XHTML&#160;1.0&#160;Strict//EN</code>
                    463:      </td><td> <code title="">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</code>
                    464:     </td></tr><tr><td> <code title="">-//W3C//DTD&#160;XHTML&#160;1.1//EN</code>
                    465:      </td><td> <code title="">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</code>
                    466:   </td></tr></tbody></table><p>A <a href="#syntax-doctype" title="syntax-doctype">DOCTYPE</a> containing an
                    467:   <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a> is an <dfn id="obsolete-permitted-doctype">obsolete
                    468:   permitted DOCTYPE</dfn>. Authors should not use <a href="#obsolete-permitted-doctype" title="obsolete permitted DOCTYPE">obsolete permitted
1.1008    mike      469:   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>,
1.373     mike      470:   <a href="#raw-text-elements">raw text elements</a>, <a href="#rcdata-elements">RCDATA elements</a>,
                    471:   <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>
1.1       mike      472: 
1.996     mike      473:    <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>,
1.1035    mike      474:    <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>,
1.996     mike      475:    <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>,
1.1035    mike      476:    <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>,
                    477:    <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>,
1.973     mike      478:    <code><a href="text-level-semantics.html#the-wbr-element">wbr</a></code></dd>
1.1034    mike      479:    
1.1       mike      480: 
1.373     mike      481:    <dt><dfn id="raw-text-elements">Raw text elements</dfn></dt>
1.1       mike      482: 
1.1035    mike      483:    <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> 
1.373     mike      484:    <dt><dfn id="rcdata-elements">RCDATA elements</dfn></dt>
1.1       mike      485: 
1.1035    mike      486:    <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>
1.1       mike      487: 
1.373     mike      488:    <dt><dfn id="foreign-elements">Foreign elements</dfn></dt>
1.1       mike      489: 
1.996     mike      490:    <dd>Elements from the <a href="namespaces.html#mathml-namespace">MathML namespace</a>
                    491:    and the <a href="namespaces.html#svg-namespace">SVG namespace</a>.</dd>
1.1       mike      492: 
1.373     mike      493:    <dt><dfn id="normal-elements">Normal elements</dfn></dt>
1.1       mike      494: 
                    495:    <dd>All other allowed <a href="infrastructure.html#html-elements">HTML elements</a> are normal
                    496:    elements.</dd>
                    497: 
                    498:   </dl><p><dfn id="syntax-tags" title="syntax-tags">Tags</dfn> are used to delimit the start
1.373     mike      499:   and end of elements in the markup. <a href="#raw-text-elements" title="raw text
                    500:   elements">Raw text</a>, <a href="#rcdata-elements" title="RCDATA
                    501:   elements">RCDATA</a>, and <a href="#normal-elements" title="normal
                    502:   elements">normal</a> elements have a <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> to indicate where they
                    503:   begin, and an <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a> to
                    504:   indicate where they end. The start and end tags of certain
                    505:   <a href="#normal-elements">normal elements</a> can be <a href="#syntax-tag-omission" title="syntax-tag-omission">omitted</a>, as described
1.1       mike      506:   later. Those that cannot be omitted must not be omitted. <a href="#void-elements">Void
                    507:   elements</a> only have a start tag; end tags must not be
1.373     mike      508:   specified for <a href="#void-elements">void elements</a>. <a href="#foreign-elements">Foreign
                    509:   elements</a> must either have a start tag and an end tag, or a
                    510:   start tag that is marked as self-closing, in which case they must
                    511:   not have an end tag.</p><p>The contents of the element must be placed between just after the
1.1       mike      512:   start tag (which <a href="#syntax-tag-omission" title="syntax-tag-omission">might be implied,
                    513:   in certain cases</a>) and just before the end tag (which again,
                    514:   <a href="#syntax-tag-omission" title="syntax-tag-omission">might be implied in certain
                    515:   cases</a>). The exact allowed contents of each individual element
1.1004    mike      516:   depend on the content model of that element, as described earlier in
                    517:   this specification. Elements must not contain content that their
1.1       mike      518:   content model disallows. In addition to the restrictions placed on
                    519:   the contents by those content models, however, the five types of
1.123     mike      520:   elements have additional <em>syntactic</em> requirements.</p><p><a href="#void-elements">Void elements</a> can't have any contents (since there's
1.1       mike      521:   no end tag, no content can be put between the start tag and the end
1.373     mike      522:   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
                    523:   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
                    524:   must not contain an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>.
1.1       mike      525:   There are also <a href="#cdata-rcdata-restrictions">further
1.373     mike      526:   restrictions</a> described below.</p><p><a href="#foreign-elements">Foreign elements</a> whose start tag is marked as
                    527:   self-closing can't have any contents (since, again, as there's no
                    528:   end tag, no content can be put between the start tag and the end
                    529:   tag). <a href="#foreign-elements">Foreign elements</a> whose start tag is <em>not</em>
                    530:   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
1.588     mike      531:   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">
1.374     mike      532: 
                    533:    <p>The HTML syntax does not support namespace
                    534:    declarations, even in <a href="#foreign-elements">foreign elements</a>.</p>
                    535: 
                    536:    <p>For instance, consider the following HTML fragment:</p>
                    537: 
                    538:    <pre>&lt;p&gt;
                    539:  &lt;svg&gt;
                    540:   &lt;metadata&gt;
                    541:    &lt;!-- this is invalid --&gt;
                    542:    &lt;cdr:license xmlns:cdr="http://www.example.com/cdr/metadata" name="MIT"/&gt;
                    543:   &lt;/metadata&gt;
                    544:  &lt;/svg&gt;
                    545: &lt;/p&gt;</pre>
                    546: 
                    547:    <p>The innermost element, <code title="">cdr:license</code>, is
                    548:    actually in the SVG namespace, as the "<code title="">xmlns:cdr</code>" attribute has no effect (unlike in
                    549:    XML). In fact, as the comment in the fragment above says, the
                    550:    fragment is actually non-conforming. This is because the SVG
                    551:    specification does not define any elements called "<code title="">cdr:license</code>" in the SVG namespace.</p>
                    552: 
                    553:   </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
1.588     mike      554:   contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>. Some
                    555:   <a href="#normal-elements">normal elements</a> also have <a href="#element-restrictions">yet more restrictions</a> on what
1.1       mike      556:   content they are allowed to hold, beyond the restrictions imposed by
                    557:   the content model and those described in this paragraph. Those
1.123     mike      558:   restrictions are described below.</p><p>Tags contain a <dfn id="syntax-tag-name" title="syntax-tag-name">tag name</dfn>,
1.1       mike      559:   giving the element's name. HTML elements all have names that only
1.464     mike      560:   use characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
                    561:   NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
                    562:   Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER
                    563:   Z. In the HTML syntax, tag names, even those for <a href="#foreign-elements">foreign
1.462     mike      564:   elements</a>, may be written with any mix of lower- and uppercase
                    565:   letters that, when converted to all-lowercase, matches the element's
1.1008    mike      566:   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
1.123     mike      567:   following format:</p><ol><li>The first character of a start tag must be a U+003C LESS-THAN
1.588     mike      568:    SIGN character (&lt;).</li>
1.1       mike      569: 
                    570:    <li>The next few characters of a start tag must be the element's
                    571:    <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a>.</li>
                    572: 
                    573:    <li>If there are to be any attributes in the next step, there must
1.996     mike      574:    first be one or more <a href="common-microsyntaxes.html#space-character" title="space character">space
1.1       mike      575:    characters</a>.</li>
                    576: 
                    577:    <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
1.1004    mike      578:    below. Attributes must be separated from each other by one or more
1.996     mike      579:    <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li>
1.1       mike      580: 
1.766     mike      581:    <li>After the attributes, or after the <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a> if there are no attributes,
1.996     mike      582:    there may be one or more <a href="common-microsyntaxes.html#space-character" title="space character">space
1.766     mike      583:    characters</a>. (Some attributes are required to be followed by
                    584:    a space. See the <a href="#syntax-attributes" title="syntax-attributes">attributes
                    585:    section</a> below.)</li>
1.1       mike      586: 
                    587:    <li>Then, if the element is one of the <a href="#void-elements">void elements</a>,
1.373     mike      588:    or if the element is a <a href="#foreign-elements" title="foreign elements">foreign
1.588     mike      589:    element</a>, then there may be a single U+002F SOLIDUS character
                    590:    (/). This character has no effect on <a href="#void-elements">void elements</a>,
                    591:    but on <a href="#foreign-elements">foreign elements</a> it marks the start tag as
                    592:    self-closing.</li>
1.1       mike      593: 
                    594:    <li>Finally, start tags must be closed by a U+003E GREATER-THAN
1.588     mike      595:    SIGN character (&gt;).</li>
1.1       mike      596: 
1.1008    mike      597:   </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
1.123     mike      598:   following format:</p><ol><li>The first character of an end tag must be a U+003C LESS-THAN
1.588     mike      599:    SIGN character (&lt;).</li>
1.1       mike      600: 
                    601:    <li>The second character of an end tag must be a U+002F SOLIDUS
1.588     mike      602:    character (/).</li>
1.1       mike      603: 
                    604:    <li>The next few characters of an end tag must be the element's
                    605:    <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a>.</li>
                    606: 
1.996     mike      607:    <li>After the tag name, there may be one or more <a href="common-microsyntaxes.html#space-character" title="space
1.1       mike      608:    character">space characters</a>.</li>
                    609: 
1.588     mike      610:    <li>Finally, end tags must be closed by a U+003E GREATER-THAN SIGN
                    611:    character (&gt;).</li>
1.1       mike      612: 
1.1008    mike      613:   </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
1.123     mike      614:   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
1.996     mike      615:   one or more characters other than the <a href="common-microsyntaxes.html#space-character" title="space
1.1       mike      616:   character">space characters</a>, U+0000 NULL, U+0022 QUOTATION
                    617:   MARK ("), U+0027 APOSTROPHE ('), U+003E GREATER-THAN SIGN
                    618:   (&gt;), U+002F SOLIDUS (/), and U+003D EQUALS SIGN (=) characters,
                    619:   the control characters, and any characters that are not defined by
1.462     mike      620:   Unicode. In the HTML syntax, attribute names, even those for
                    621:   <a href="#foreign-elements">foreign elements</a>, may be written with any mix of lower-
                    622:   and uppercase letters that are an <a href="infrastructure.html#ascii-case-insensitive">ASCII
1.123     mike      623:   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
1.1       mike      624:   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
1.123     mike      625:   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>
1.1       mike      626: 
                    627:    <dd>
                    628: 
                    629:     <p>Just the <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute
1.837     mike      630:     name</a>. The value is implicitly the empty string.</p>
1.1       mike      631: 
                    632:     <div class="example">
                    633: 
1.996     mike      634:      <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
1.1       mike      635:      the empty attribute syntax:</p>
                    636: 
                    637:      <pre>&lt;input <em>disabled</em>&gt;</pre>
                    638: 
                    639:     </div>
                    640: 
                    641:     <p>If an attribute using the empty attribute syntax is to be
1.996     mike      642:     followed by another attribute, then there must be a <a href="common-microsyntaxes.html#space-character">space
1.1       mike      643:     character</a> separating the two.</p>
                    644: 
                    645:    </dd>
                    646: 
1.2       mike      647:    <dt id="unquoted">Unquoted attribute value syntax</dt>
1.1       mike      648: 
                    649:    <dd>
                    650: 
                    651:     <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>,
1.996     mike      652:     followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space
1.1       mike      653:     characters</a>, followed by a single U+003D EQUALS SIGN
1.996     mike      654:     character, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space
1.1       mike      655:     character">space characters</a>, followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in
                    656:     addition to the requirements given above for attribute values,
1.996     mike      657:     must not contain any literal <a href="common-microsyntaxes.html#space-character" title="space character">space
1.588     mike      658:     characters</a>, any U+0022 QUOTATION MARK characters ("),
                    659:     U+0027 APOSTROPHE characters ('), U+003D EQUALS SIGN
                    660:     characters (=), U+003C LESS-THAN SIGN characters (&lt;), U+003E
                    661:     GREATER-THAN SIGN characters (&gt;), or U+0060 GRAVE ACCENT
                    662:     characters (`), and must not be the empty string.</p>
1.463     mike      663: 
1.1034    mike      664:     
1.1       mike      665: 
                    666:     <div class="example">
                    667: 
1.996     mike      668:      <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
1.1       mike      669:      with the unquoted attribute value syntax:</p>
                    670: 
                    671:      <pre>&lt;input <em>value=yes</em>&gt;</pre>
                    672: 
                    673:     </div>
                    674: 
                    675:     <p>If an attribute using the unquoted attribute syntax is to be
1.101     mike      676:     followed by another attribute or by the optional U+002F SOLIDUS
1.464     mike      677:     character (/) allowed in step 6 of the <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> syntax above, then there
1.996     mike      678:     must be a <a href="common-microsyntaxes.html#space-character">space character</a> separating the two.</p>
1.1       mike      679: 
                    680:    </dd>
                    681: 
                    682:    <dt>Single-quoted attribute value syntax</dt>
                    683: 
                    684:    <dd>
                    685: 
                    686:     <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>,
1.996     mike      687:     followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space
1.1       mike      688:     characters</a>, followed by a single U+003D EQUALS SIGN
1.996     mike      689:     character, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space
1.1       mike      690:     character">space characters</a>, followed by a single U+0027
1.588     mike      691:     APOSTROPHE character ('), followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in
1.1       mike      692:     addition to the requirements given above for attribute values,
1.588     mike      693:     must not contain any literal U+0027 APOSTROPHE characters ('), and
                    694:     finally followed by a second single U+0027 APOSTROPHE character
                    695:     (').</p>
1.1       mike      696: 
                    697:     <div class="example">
                    698: 
1.996     mike      699:      <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
1.1       mike      700:      single-quoted attribute value syntax:</p>
                    701: 
                    702:      <pre>&lt;input <em>type='checkbox'</em>&gt;</pre>
                    703: 
                    704:     </div>
                    705: 
                    706:     <p>If an attribute using the single-quoted attribute syntax is to
1.996     mike      707:     be followed by another attribute, then there must be a <a href="common-microsyntaxes.html#space-character">space
1.1       mike      708:     character</a> separating the two.</p>
                    709: 
                    710:    </dd>
                    711: 
                    712:    <dt>Double-quoted attribute value syntax</dt>
                    713: 
                    714:    <dd>
                    715: 
                    716:     <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>,
1.996     mike      717:     followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space
1.1       mike      718:     characters</a>, followed by a single U+003D EQUALS SIGN
1.996     mike      719:     character, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space
1.1       mike      720:     character">space characters</a>, followed by a single U+0022
1.588     mike      721:     QUOTATION MARK character ("), followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in
1.1       mike      722:     addition to the requirements given above for attribute values,
1.588     mike      723:     must not contain any literal U+0022 QUOTATION MARK characters ("),
                    724:     and finally followed by a second single U+0022 QUOTATION MARK
                    725:     character (").</p>
1.1       mike      726: 
                    727:     <div class="example">
                    728: 
1.996     mike      729:      <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
1.1       mike      730:      double-quoted attribute value syntax:</p>
                    731: 
                    732:      <pre>&lt;input <em>name="be evil"</em>&gt;</pre>
                    733: 
                    734:     </div>
                    735: 
                    736:     <p>If an attribute using the double-quoted attribute syntax is to
1.996     mike      737:     be followed by another attribute, then there must be a <a href="common-microsyntaxes.html#space-character">space
1.1       mike      738:     character</a> separating the two.</p>
                    739: 
                    740:    </dd>
                    741: 
                    742:   </dl><p>There must never be two or more attributes on the same start tag
                    743:   whose names are an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
1.462     mike      744:   each other.</p><hr><p>When a <a href="#foreign-elements" title="foreign elements">foreign element</a> has
                    745:   one of the namespaced attributes given by the local name and
                    746:   namespace of the first and second cells of a row from the following
                    747:   table, it must be written using the name given by the third cell
                    748:   from the same row.</p><table><thead><tr><th> Local name </th><th> Namespace </th><th> Attribute name
1.996     mike      749:    </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>
                    750:     </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>
                    751:     </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>
                    752:     </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>
                    753:     </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>
                    754:     </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>
                    755:     </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>
1.1034    mike      756:     </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>
1.996     mike      757:     </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>
                    758:     </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>
                    759:     </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>
                    760:     </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>
1.671     mike      761:   </td></tr></tbody></table><p>No other namespaced attribute can be expressed in <a href="#syntax">the
1.1008    mike      762:   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
1.1       mike      763:   is not present; it is implied, but it is still there. An HTML
1.1035    mike      764:   document always has a root <code><a href="semantics.html#the-html-element">html</a></code> element, even if the
1.1       mike      765:   string <code title="">&lt;html&gt;</code> doesn't appear anywhere in
1.1035    mike      766:   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
                    767:   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
                    768:   tag</a> may be omitted if the <code><a href="semantics.html#the-html-element">html</a></code> element is not
                    769:   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
1.821     mike      770:   element is empty, or if the first thing inside the
1.1035    mike      771:   <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
                    772:   tag</a> may be omitted if the <code><a href="semantics.html#the-head-element">head</a></code> element is not
1.1036    mike      773:   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
                    774:   element is empty, or if the first thing inside the <code><a href="sections.html#the-body-element">body</a></code>
1.996     mike      775:   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
1.1036    mike      776:   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
                    777:   <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
                    778:   tag</a> may be omitted if the <code><a href="sections.html#the-body-element">body</a></code> element is not
1.1034    mike      779:   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
1.996     mike      780:   tag</a> may be omitted if the <code><a href="grouping-content.html#the-li-element">li</a></code> element is
                    781:   immediately followed by another <code><a href="grouping-content.html#the-li-element">li</a></code> element or if there
1.1034    mike      782:   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
1.996     mike      783:   tag</a> may be omitted if the <code><a href="grouping-content.html#the-dt-element">dt</a></code> element is
                    784:   immediately followed by another <code><a href="grouping-content.html#the-dt-element">dt</a></code> element or a
1.1034    mike      785:   <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
1.996     mike      786:   tag</a> may be omitted if the <code><a href="grouping-content.html#the-dd-element">dd</a></code> element is
                    787:   immediately followed by another <code><a href="grouping-content.html#the-dd-element">dd</a></code> element or a
                    788:   <code><a href="grouping-content.html#the-dt-element">dt</a></code> element, or if there is no more content in the
1.1034    mike      789:   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
1.996     mike      790:   tag</a> may be omitted if the <code><a href="grouping-content.html#the-p-element">p</a></code> element is
                    791:   immediately followed by an <code><a href="sections.html#the-address-element">address</a></code>,
                    792:   <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>,
1.1018    mike      793:   <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>,
                    794:   <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>,
                    795:   <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>,
                    796:   <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>,
1.1037  ! mike      797:   <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>,
1.1018    mike      798:   <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>,
1.996     mike      799:   <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>,
1.1       mike      800:   element, or if there is no more content in the parent element and
1.1034    mike      801:   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
1.1       mike      802:   tag</a> may be omitted if the <code><a href="text-level-semantics.html#the-rt-element">rt</a></code> element is
                    803:   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>
1.1034    mike      804:   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
1.1       mike      805:   tag</a> may be omitted if the <code><a href="text-level-semantics.html#the-rp-element">rp</a></code> element is
                    806:   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>
1.1034    mike      807:   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
                    808:   <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element  is immediately followed by
                    809:   another <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element, or if  there is no
                    810:   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
1.996     mike      811:   tag</a> may be omitted if the <code><a href="the-button-element.html#the-option-element">option</a></code> element is
                    812:   immediately followed by another <code><a href="the-button-element.html#the-option-element">option</a></code> element, or if
                    813:   it is immediately followed by an <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element, or
1.1034    mike      814:   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
1.1       mike      815:   first thing inside the <code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element is a
                    816:   <code><a href="tabular-data.html#the-col-element">col</a></code> element, and if the element is not immediately
                    817:   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
1.1034    mike      818:   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
1.1       mike      819:   <code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element is not immediately followed by a
1.1034    mike      820:   <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
1.1       mike      821:   tag</a> may be omitted if the <code><a href="tabular-data.html#the-thead-element">thead</a></code> element is
                    822:   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>
1.1034    mike      823:   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
1.1       mike      824:   first thing inside the <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> element is a
                    825:   <code><a href="tabular-data.html#the-tr-element">tr</a></code> element, and if the element is not immediately
                    826:   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
                    827:   <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code> element whose <a href="#syntax-end-tag" title="syntax-end-tag">end
                    828:   tag</a> has been omitted. (It can't be omitted if the element is
1.1034    mike      829:   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
1.1       mike      830:   tag</a> may be omitted if the <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> element is
                    831:   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>
1.1034    mike      832:   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
1.1       mike      833:   tag</a> may be omitted if the <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code> element is
                    834:   immediately followed by a <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> element, or if there is
1.1034    mike      835:   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
1.1       mike      836:   tag</a> may be omitted if the <code><a href="tabular-data.html#the-tr-element">tr</a></code> element is
                    837:   immediately followed by another <code><a href="tabular-data.html#the-tr-element">tr</a></code> element, or if there
1.1034    mike      838:   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
1.1       mike      839:   tag</a> may be omitted if the <code><a href="tabular-data.html#the-td-element">td</a></code> element is
                    840:   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>
1.1034    mike      841:   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
1.1       mike      842:   tag</a> may be omitted if the <code><a href="tabular-data.html#the-th-element">th</a></code> element is
                    843:   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>
1.123     mike      844:   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
1.1008    mike      845:   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
1.123     mike      846:   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>
1.1       mike      847:   elements, even though these elements are technically allowed inside
                    848:   <code><a href="tabular-data.html#the-table-element">table</a></code> elements according to the content models
                    849:   described in this specification. (If a <code><a href="tabular-data.html#the-tr-element">tr</a></code> element is
                    850:   put inside a <code><a href="tabular-data.html#the-table-element">table</a></code> in the markup, it will in fact imply
1.304     mike      851:   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
                    852:   placed immediately after the <a href="#syntax-start-tag" title="syntax-start-tag">start
1.996     mike      853:   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>
1.1       mike      854:   elements. This does not affect the processing of the element. The
1.304     mike      855:   otherwise optional <a href="#syntax-newlines" title="syntax-newlines">newline</a>
1.381     mike      856:   <em>must</em> be included if the element's contents themselves start
                    857:   with a <a href="#syntax-newlines" title="syntax-newlines">newline</a> (because
                    858:   otherwise the leading newline in the contents would be treated like
                    859:   the optional newline, and ignored).</p><div class="example">
1.996     mike      860:    <p>The following two <code><a href="grouping-content.html#the-pre-element">pre</a></code> blocks are equivalent:</p>
1.1       mike      861:    <pre>&lt;pre&gt;Hello&lt;/pre&gt;</pre>
                    862:    <pre>&lt;pre&gt;<br>Hello&lt;/pre&gt;</pre>
1.1008    mike      863:   </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
1.889     mike      864:   <a href="#rcdata-elements">RCDATA elements</a> must not contain any occurrences of the
                    865:   string "<code title="">&lt;/</code>" (U+003C LESS-THAN SIGN, U+002F
                    866:   SOLIDUS) followed by characters that case-insensitively match the
                    867:   tag name of the element followed by one of U+0009 CHARACTER
                    868:   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D
                    869:   CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN (&gt;), or
1.1008    mike      870:   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,
1.1005    mike      871:   attribute values, and comments. Text must consist of Unicode
                    872:   characters. Text must not contain U+0000 characters. Text must not
                    873:   contain permanently undefined Unicode characters (noncharacters).
                    874:   Text must not contain control characters other than <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>. Extra constraints
                    875:   are placed on what is and what is not allowed in text based on where
1.1008    mike      876:   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
1.1       mike      877:   represented either as U+000D CARRIAGE RETURN (CR) characters, U+000A
                    878:   LINE FEED (LF) characters, or pairs of U+000D CARRIAGE RETURN (CR),
1.882     mike      879:   U+000A LINE FEED (LF) characters in that order.</p><p>Where <a href="#syntax-charref" title="syntax-charref">character references</a>
                    880:   are allowed, a character reference of a U+000A LINE FEED (LF)
                    881:   character (but not a U+000D CARRIAGE RETURN (CR) character) also
1.1008    mike      882:   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
1.1       mike      883:   to escape characters that couldn't otherwise legally be included in
1.588     mike      884:   <a href="#syntax-text" title="syntax-text">text</a>.</p><p>Character references must start with a U+0026 AMPERSAND character
                    885:   (&amp;). Following this, there are three possible kinds of character
                    886:   references:</p><dl><dt>Named character references</dt>
1.1       mike      887: 
                    888:    <dd>The ampersand must be followed by one of the names given in the
                    889:    <a href="named-character-references.html#named-character-references">named character references</a> section, using the same
1.677     mike      890:    case. <span class="impl">The name must be one that is terminated by
                    891:    a U+003B SEMICOLON character (;).</span></dd>
1.1       mike      892: 
                    893: 
                    894:    <dt>Decimal numeric character reference</dt>
                    895: 
                    896:    <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
1.588     mike      897:    character (#), followed by one or more digits in the range U+0030
                    898:    DIGIT ZERO (0) to U+0039 DIGIT NINE (9), representing a base-ten
                    899:    integer that corresponds to a Unicode code point that is allowed
                    900:    according to the definition below. The digits must then be followed
                    901:    by a U+003B SEMICOLON character (;).</dd>
1.1       mike      902: 
                    903: 
                    904:    <dt>Hexadecimal numeric character reference</dt>
                    905: 
                    906:    <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
1.588     mike      907:    character (#), which must be followed by either a U+0078 LATIN
                    908:    SMALL LETTER X character (x) or a U+0058 LATIN CAPITAL LETTER X
                    909:    character (X), which must then be followed by one or more digits in
                    910:    the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061
                    911:    LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, and U+0041
                    912:    LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F,
1.464     mike      913:    representing a base-sixteen integer that corresponds to a Unicode
                    914:    code point that is allowed according to the definition below. The
                    915:    digits must then be followed by a U+003B SEMICOLON character
                    916:    (;).</dd>
1.378     mike      917: 
                    918:   </dl><p>The numeric character reference forms described above are allowed
1.882     mike      919:   to reference any Unicode code point other than U+0000, U+000D,
                    920:   permanently undefined Unicode characters (noncharacters), and
1.996     mike      921:   control characters other than <a href="common-microsyntaxes.html#space-character" title="space character">space
1.378     mike      922:   characters</a>.</p><p>An <dfn id="syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous
1.464     mike      923:   ampersand</dfn> is a U+0026 AMPERSAND character (&amp;) that is
1.897     mike      924:   followed by one or more characters in the range U+0030 DIGIT ZERO
                    925:   (0) to U+0039 DIGIT NINE (9), U+0061 LATIN SMALL LETTER A to U+007A
                    926:   LATIN SMALL LETTER Z, and U+0041 LATIN CAPITAL LETTER A to U+005A
                    927:   LATIN CAPITAL LETTER Z, followed by a U+003B SEMICOLON character
                    928:   (;), where these characters do not match any of the names given in
1.1029    mike      929:   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
                    930:   the following components, in this order:</p><ol><li>The string "<code title="">&lt;![CDATA[</code>".</li>
                    931: 
                    932:    <li>Optionally, <a href="#syntax-text" title="syntax-text">text</a>, with the
                    933:    additional restriction that the text must not contain the string
                    934:    "<code title="">]]&gt;</code>".</li>
                    935: 
                    936:    <li>The string "<code title="">]]&gt;</code>".</li>
                    937: 
                    938:   </ol><div class="example">
1.724     mike      939: 
                    940:    <p>CDATA sections can only be used in foreign content (MathML or
                    941:    SVG). In this example, a CDATA section is used to escape the
                    942:    contents of an <code>ms</code> element:</p>
                    943: 
                    944:    <pre>&lt;p&gt;You can add a string to a number, but this stringifies the number:&lt;/p&gt;
                    945: &lt;math&gt;
                    946:  &lt;ms&gt;&lt;![CDATA[x&lt;y]]&gt;&lt;/ms&gt;
                    947:  &lt;mo&gt;+&lt;/mo&gt;
                    948:  &lt;mn&gt;3&lt;/mn&gt;
                    949:  &lt;mo&gt;=&lt;/mo&gt;
                    950:  &lt;ms&gt;&lt;![CDATA[x&lt;y3]]&gt;&lt;/ms&gt;
                    951: &lt;/math&gt;</pre>
                    952: 
1.1008    mike      953:   </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
1.1       mike      954:   four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION
                    955:   MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS (<code title="">&lt;!--</code>). Following this sequence, the comment may
                    956:   have <a href="#syntax-text" title="syntax-text">text</a>, with the additional
                    957:   restriction that the text must not start with a single U+003E
1.588     mike      958:   GREATER-THAN SIGN character (&gt;), nor start with a U+002D
                    959:   HYPHEN-MINUS character (-) followed by a U+003E GREATER-THAN SIGN
                    960:   (&gt;) character, nor contain two consecutive U+002D HYPHEN-MINUS
                    961:   characters (<code title="">--</code>), nor end with a U+002D
                    962:   HYPHEN-MINUS character (-). Finally, the comment must be ended by
1.1       mike      963:   the three character sequence U+002D HYPHEN-MINUS, U+002D
1.996     mike      964:   HYPHEN-MINUS, U+003E GREATER-THAN SIGN (<code title="">--&gt;</code>).</p></body></html>

Webmaster