html5/spec/syntax.html - view

File: [Public] / html5 / spec / syntax.html
Revision 1.1254: download - view: text, annotated - select for diffs
Wed Nov 21 04:44:09 2012 UTC (12 years, 5 months ago) by sruby
Branches: MAIN
CVS tags: HEAD

commit 1077bca89fbac7a99525653cda746ae1c3e87409
Author: Silvia Pfeiffer <silviapfeiffer1@gmail.com>
Date:   Wed Nov 21 15:38:38 2012 +1100

    [Editorial] Update of revision number up to which WHATWG changes have
    been merged.

<!DOCTYPE html><html lang="en-US-x-Hixie"><meta charset="utf-8"><title>8 The HTML syntax — HTML5</title><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { white-space: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } i, em { font-style: italic; } dt dfn { font-style: italic; } pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } pre em { font-weight: bolder; font-style: normal; } @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } table { border-collapse: collapse; border-style: hidden hidden none hidden; } table thead, table tbody { border-bottom: solid; } table tbody th:first-child { border-left: solid; } table tbody th { text-align: left; } table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } .matrix, .matrix td { border: none; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } img.extra, p.overview { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em } pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } pre.css:first-line { color: #AAAA50; } dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; } hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } dl.domintro dd p { margin: 0.5em 0; } dl.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; } dl.switch { padding-left: 2em; } dl.switch > dt { text-indent: -1.5em; } dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } dl.triple { padding: 0 0 0 1em; } dl.triple dt, dl.triple dd { margin: 0; display: inline } dl.triple dt:after { content: ':'; } dl.triple dd:after { content: '\A'; white-space: pre; } .diff-old { text-decoration: line-through; color: silver; background: transparent; } .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } a .diff-new { border-bottom: 1px blue solid; } figure.diagrams { border: double black; background: white; padding: 1em; } figure.diagrams img { display: block; margin: 1em auto; } h2 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h1 + h2, hr + h2.no-toc { page-break-before: auto; } p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; } div.head { margin: 0 0 1em; padding: 1em 0 0 0; } div.head p { margin: 0; } div.head h1 { margin: 0; } div.head .logo { float: right; margin: 0 1em; } div.head .logo img { border: none } /* remove border from top image */ div.head dl { margin: 1em 0; } div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } body > .toc > li { margin-top: 1em; margin-bottom: 1em; } body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } body > .toc > li > * { margin-bottom: 0.5em; } body > .toc > li > * > li > * { margin-bottom: 0.25em; } .toc, .toc li { list-style: none; } .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } .brief li { margin: 0; padding: 0; } .brief li p { margin: 0; padding: 0; } .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } .category-list li { display: inline; } .category-list li:not(:last-child)::after { content: ', '; } .category-list li > span, .category-list li > a { text-transform: lowercase; } .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } .XXX > :first-child { margin-top: 0; } p .XXX { line-height: 3em; } .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } .annotation :link, .annotation :visited { color: inherit; } .annotation :link:hover, .annotation :visited:hover { background: transparent; } .annotation span { border: none ! important; } .note { color: green; background: transparent; font-family: sans-serif; } .warning { color: red; background: transparent; } .note, .warning { font-weight: bolder; font-style: italic; } .note em, .warning em, .note i, .warning i { font-style: normal; } p.note, div.note { padding: 0.5em 2em; } span.note { padding: 0 2em; } .note p:first-child, .warning p:first-child { margin-top: 0; } .note p:last-child, .warning p:last-child { margin-bottom: 0; } .warning:before { font-style: normal; } p.note:before { content: 'Note: '; } p.warning:before { content: '\26A0 Warning! '; } .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } .bookkeeping { font-size: 0.8em; margin: 2em 0; } .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } .bookkeeping dt { margin: 0.5em 2em 0; } .bookkeeping dd { margin: 0 3em 0.5em; } h4 { position: relative; z-index: 3; } h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } .element { background: #EEEEFF; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; border-left: solid #9999FF 0.25em; position: relative; z-index: 1; } .element:before { position: absolute; z-index: 2; top: 0; left: -1.15em; height: 2em; width: 0.9em; background: #EEEEFF; content: ' '; border-style: none none solid solid; border-color: #9999FF; border-width: 0.25em; } .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } td > .example:only-child { margin: 0 0 0 0.1em; } ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } ul.domTree li li { list-style: none; } ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree span { font-style: italic; font-family: serif; } ul.domTree .t1 code { color: purple; font-weight: bold; } ul.domTree .t2 { font-style: normal; font-family: monospace; } ul.domTree .t2 .name { color: black; font-weight: bold; } ul.domTree .t2 .value { color: blue; font-weight: normal; } ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } ul.domTree .t7 code, .domTree .t8 code { color: green; } ul.domTree .t10 code { color: teal; } body.dfnEnabled dfn { cursor: pointer; } .dfnPanel { display: inline; position: absolute; z-index: 10; height: auto; width: auto; padding: 0.5em 0.75em; font: small sans-serif, Droid Sans Fallback; background: #DDDDDD; color: black; border: outset 0.2em; } .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; } .dfnPanel :link, .dfnPanel :visited { color: black; } .dfnPanel p { font-weight: bolder; } .dfnPanel * + p { margin-top: 0.25em; } .dfnPanel li { list-style-position: inside; } #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } #configUI p label { display: block; } #configUI #updateUI, #configUI .loginUI { text-align: center; } #configUI input[type=button] { display: block; margin: auto; } fieldset { margin: 1em; padding: 0.5em 1em; } fieldset > legend + * { margin-top: 0; } fieldset > :last-child { margin-bottom: 0; } fieldset p { margin: 0.5em 0; } </style><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><script> function getCookie(name) { var params = location.search.substr(1).split("&"); for (var index = 0; index < params.length; index++) { if (params[index] == name) return "1"; var data = params[index].split("="); if (data[0] == name) return unescape(data[1]); } var cookies = document.cookie.split("; "); for (var index = 0; index < cookies.length; index++) { var data = cookies[index].split("="); if (data[0] == name) return unescape(data[1]); } return null; } </script><link href="dnd.html" rel="prev" title="7.7 Drag and drop"> <link href="index.html#contents" rel="contents" title="Table of contents"> <link href="parsing.html" rel="next" title="8.2 Parsing HTML documents"> <body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head"> <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> <h1>HTML5</h1> <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> <h2 class="no-num no-toc" id="editor's-draft-date-1-january-1970">Editor's Draft 21 November 2012</h2> </div> <nav class="prev_next"> <a href="dnd.html">&slarr; 7.7 Drag and drop</a> – <a href="index.html#contents">Table of contents</a> – <a href="parsing.html">8.2 Parsing HTML documents &srarr;</a> <ol class="toc"><li><a href="syntax.html#syntax"><span class="secno">8 </span>The HTML syntax</a> <ol><li><a href="syntax.html#writing"><span class="secno">8.1 </span>Writing HTML documents</a> <ol><li><a href="syntax.html#the-doctype"><span class="secno">8.1.1 </span>The DOCTYPE</a><li><a href="syntax.html#elements-0"><span class="secno">8.1.2 </span>Elements</a> <ol><li><a href="syntax.html#start-tags"><span class="secno">8.1.2.1 </span>Start tags</a><li><a href="syntax.html#end-tags"><span class="secno">8.1.2.2 </span>End tags</a><li><a href="syntax.html#attributes-0"><span class="secno">8.1.2.3 </span>Attributes</a><li><a href="syntax.html#optional-tags"><span class="secno">8.1.2.4 </span>Optional tags</a><li><a href="syntax.html#element-restrictions"><span class="secno">8.1.2.5 </span>Restrictions on content models</a><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></ol><li><a href="syntax.html#text"><span class="secno">8.1.3 </span>Text</a> <ol><li><a href="syntax.html#newlines"><span class="secno">8.1.3.1 </span>Newlines</a></ol><li><a href="syntax.html#character-references"><span class="secno">8.1.4 </span>Character references</a><li><a href="syntax.html#cdata-sections"><span class="secno">8.1.5 </span>CDATA sections</a><li><a href="syntax.html#comments"><span class="secno">8.1.6 </span>Comments</a></ol></ol></ol></nav> <h2 id="syntax"><span class="secno">8 </span><dfn>The HTML syntax</dfn></h2> <p class="note">This section only describes the rules for resources labeled with an <a href="infrastructure.html#html-mime-type">HTML MIME type</a>. Rules for XML resources are discussed in the section below entitled "<a href="the-xhtml-syntax.html#the-xhtml-syntax">The XHTML syntax</a>".</p> <h3 id="writing"><span class="secno">8.1 </span>Writing HTML documents</h3> <div class="impl"> <p><i>This section only applies to documents, authoring tools, and markup generators. In particular, it does not apply to conformance checkers; conformance checkers must use the requirements given in the next section ("parsing HTML documents").</i></p> </div> <p>Documents must consist of the following parts, in the given order:</p> <ol><li>Optionally, a single "BOM" (U+FEFF) character.</li> <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>A <a href="#syntax-doctype" title="syntax-doctype">DOCTYPE</a>. <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>The root element, in the form of an <code><a href="the-html-element.html#the-html-element">html</a></code> <a href="#syntax-elements" title="syntax-elements">element</a>.</li> <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> </ol><p>The various types of content mentioned above are described in the next few sections.</p> <p>In addition, there are some restrictions on how <a href="the-meta-element.html#character-encoding-declaration" title="character encoding declaration">character encoding declarations</a> are to be serialized, as discussed in the section on that topic.</p> <div class="note"> <p>Space characters before the root <code><a href="the-html-element.html#the-html-element">html</a></code> element, and space characters at the start of the <code><a href="the-html-element.html#the-html-element">html</a></code> element and before the <code><a href="the-head-element.html#the-head-element">head</a></code> element, will be dropped when the document is parsed; space characters <em>after</em> the root <code><a href="the-html-element.html#the-html-element">html</a></code> element will be parsed as if they were at the end of the <code><a href="the-body-element.html#the-body-element">body</a></code> element. Thus, space characters around the root element do not round-trip.</p> <p>It is suggested that newlines be inserted after the DOCTYPE, after any comments that are before the root element, after the <code><a href="the-html-element.html#the-html-element">html</a></code> element's start tag (if it is not <a href="#syntax-tag-omission" title="syntax-tag-omission">omitted</a>), and after any comments that are inside the <code><a href="the-html-element.html#the-html-element">html</a></code> element but before the <code><a href="the-head-element.html#the-head-element">head</a></code> element.</p> </div> <p>Many strings in the HTML syntax (e.g. the names of elements and their attributes) are case-insensitive, but only for characters in the ranges U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z) and U+0061 to U+007A (LATIN SMALL LETTER A to LATIN SMALL LETTER Z). For convenience, in this section this is just referred to as "case-insensitive".</p> <h4 id="the-doctype"><span class="secno">8.1.1 </span>The DOCTYPE</h4> <p>A <dfn id="syntax-doctype" title="syntax-doctype">DOCTYPE</dfn> is a  required preamble.</p> <p class="note">DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.</p> <p>A DOCTYPE must consist of the following components, in this order:</p> <ol class="brief"><li>A string that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title=""><!DOCTYPE</code>".</li> <li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>A string that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">html</code>".</li> <li>Optionally, a <a href="#doctype-legacy-string">DOCTYPE legacy string</a> or an <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a> (defined below).</li> <li>Zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>A U+003E GREATER-THAN SIGN character (>).</li> </ol><p class="note">In other words, <code><!DOCTYPE html></code>, case-insensitively.</p> <hr><p>For the purposes of HTML generators that cannot output HTML markup with the short DOCTYPE "<code title=""><!DOCTYPE html></code>", a <dfn id="doctype-legacy-string">DOCTYPE legacy string</dfn> may be inserted into the DOCTYPE (in the position defined above). This string must consist of:</p> <ol class="brief"><li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>A string that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">SYSTEM</code>".</li> <li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>quote mark</i>).</li> <li>The literal string "<code><a href="urls.html#about:legacy-compat">about:legacy-compat</a></code>".</li> <li>A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>quote mark</i>).</li> </ol><p class="note">In other words, <code><!DOCTYPE html SYSTEM "about:legacy-compat"></code> or <code><!DOCTYPE html SYSTEM 'about:legacy-compat'></code>, case-insensitively except for the part in single or double quotes.</p> <p>The <a href="#doctype-legacy-string">DOCTYPE legacy string</a> should not be used unless the document is generated from a system that cannot output the shorter string.</p> <hr><p>To help authors transition from HTML4 and XHTML1, an <dfn id="obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</dfn> can be inserted into the DOCTYPE (in the position defined above). This string must consist of:</p> <ol class="brief"><li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>A string that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">PUBLIC</code>".</li> <li>One or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>first quote mark</i>).</li> <li>The string from one of the cells in the first column of the table below. The row to which this cell belongs is the <i>selected row</i>.</li> <li>A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>first quote mark</i>).</li> <li>If the cell in the second column of the <i>selected row</i> is not blank, one or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>If the cell in the second column of the <i>selected row</i> is not blank, a U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>third quote mark</i>).</li> <li>If the cell in the second column of the <i>selected row</i> is not blank, the string from the cell in the second column of the <i>selected row</i>.</li> <li>If the cell in the second column of the <i>selected row</i> is not blank, a matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>third quote mark</i>).</li> </ol><table><caption> Allowed values for public and system identifiers in an <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a>. </caption> <thead><tr><th> Public identifier <th> System identifier <tbody><tr><td> <code title="">-//W3C//DTD HTML 4.0//EN</code> <td> <tr><td> <code title="">-//W3C//DTD HTML 4.0//EN</code> <td> <code title="">http://www.w3.org/TR/REC-html40/strict.dtd</code> <tr><td> <code title="">-//W3C//DTD HTML 4.01//EN</code> <td> <tr><td> <code title="">-//W3C//DTD HTML 4.01//EN</code> <td> <code title="">http://www.w3.org/TR/html4/strict.dtd</code> <tr><td> <code title="">-//W3C//DTD XHTML 1.0 Strict//EN</code> <td> <code title="">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</code> <tr><td> <code title="">-//W3C//DTD XHTML 1.1//EN</code> <td> <code title="">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</code> </table><p>A <a href="#syntax-doctype" title="syntax-doctype">DOCTYPE</a> containing an <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a> is an <dfn id="obsolete-permitted-doctype">obsolete permitted DOCTYPE</dfn>. Authors should not use <a href="#obsolete-permitted-doctype" title="obsolete permitted DOCTYPE">obsolete permitted DOCTYPEs</a>, as they are unnecessarily long.</p> <h4 id="elements-0"><span class="secno">8.1.2 </span>Elements</h4> <p>There are five different kinds of <dfn id="syntax-elements" title="syntax-elements">elements</dfn>: <a href="#void-elements">void elements</a>, <a href="#raw-text-elements">raw text elements</a>, <a href="#rcdata-elements">RCDATA elements</a>, <a href="#foreign-elements">foreign elements</a>, and <a href="#normal-elements">normal elements</a>.</p> <dl><dt><dfn id="void-elements">Void elements</dfn></dt> <dd><code><a href="the-area-element.html#the-area-element">area</a></code>, <code><a href="the-base-element.html#the-base-element">base</a></code>, <code><a href="the-br-element.html#the-br-element">br</a></code>, <code><a href="the-col-element.html#the-col-element">col</a></code>, <code><a href="the-command-element.html#the-command-element">command</a></code>, <code><a href="the-embed-element.html#the-embed-element">embed</a></code>, <code><a href="the-hr-element.html#the-hr-element">hr</a></code>, <code><a href="the-img-element.html#the-img-element">img</a></code>, <code><a href="the-input-element.html#the-input-element">input</a></code>, <code><a href="the-keygen-element.html#the-keygen-element">keygen</a></code>, <code><a href="the-link-element.html#the-link-element">link</a></code>, <code><a href="the-meta-element.html#the-meta-element">meta</a></code>, <code><a href="the-param-element.html#the-param-element">param</a></code>, <code><a href="the-source-element.html#the-source-element">source</a></code>, <code><a href="the-track-element.html#the-track-element">track</a></code>, <code><a href="the-wbr-element.html#the-wbr-element">wbr</a></code></dd>  <dt><dfn id="raw-text-elements">Raw text elements</dfn></dt> <dd><code><a href="the-script-element.html#the-script-element">script</a></code>, <code><a href="the-style-element.html#the-style-element">style</a></code></dd>  <dt><dfn id="rcdata-elements">RCDATA elements</dfn></dt> <dd><code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code>, <code><a href="the-title-element.html#the-title-element">title</a></code></dd> <dt><dfn id="foreign-elements">Foreign elements</dfn></dt> <dd>Elements from the <a href="namespaces.html#mathml-namespace">MathML namespace</a> and the <a href="namespaces.html#svg-namespace">SVG namespace</a>.</dd> <dt><dfn id="normal-elements">Normal elements</dfn></dt> <dd>All other allowed <a href="infrastructure.html#html-elements">HTML elements</a> are normal elements.</dd> </dl><p><dfn id="syntax-tags" title="syntax-tags">Tags</dfn> are used to delimit the start and end of elements in the markup. <a href="#raw-text-elements" title="raw text elements">Raw text</a>, <a href="#rcdata-elements" title="RCDATA elements">RCDATA</a>, and <a href="#normal-elements" title="normal elements">normal</a> elements have a <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> to indicate where they begin, and an <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a> to indicate where they end. The start and end tags of certain <a href="#normal-elements">normal elements</a> can be <a href="#syntax-tag-omission" title="syntax-tag-omission">omitted</a>, as described later. Those that cannot be omitted must not be omitted. <a href="#void-elements">Void elements</a> only have a start tag; end tags must not be specified for <a href="#void-elements">void elements</a>. <a href="#foreign-elements">Foreign elements</a> must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag.</p> <p>The contents of the element must be placed between just after the start tag (which <a href="#syntax-tag-omission" title="syntax-tag-omission">might be implied, in certain cases</a>) and just before the end tag (which again, <a href="#syntax-tag-omission" title="syntax-tag-omission">might be implied in certain cases</a>). The exact allowed contents of each individual element depend on the content model of that element, as described earlier in this specification. Elements must not contain content that their content model disallows. In addition to the restrictions placed on the contents by those content models, however, the five types of elements have additional <em>syntactic</em> requirements.</p> <p><a href="#void-elements">Void elements</a> can't have any contents (since there's no end tag, no content can be put between the start tag and the end tag).</p> <p><a href="#raw-text-elements">Raw text elements</a> can have <a href="#syntax-text" title="syntax-text">text</a>, though it has <a href="#cdata-rcdata-restrictions">restrictions</a> described below.</p> <p><a href="#rcdata-elements">RCDATA elements</a> can have <a href="#syntax-text" title="syntax-text">text</a> and <a href="#syntax-charref" title="syntax-charref">character references</a>, but the text must not contain an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>. There are also <a href="#cdata-rcdata-restrictions">further restrictions</a> described below.</p> <p><a href="#foreign-elements">Foreign elements</a> whose start tag is marked as self-closing can't have any contents (since, again, as there's no end tag, no content can be put between the start tag and the end tag). <a href="#foreign-elements">Foreign elements</a> whose start tag is <em>not</em> marked as self-closing can have <a href="#syntax-text" title="syntax-text">text</a>, <a href="#syntax-charref" title="syntax-charref">character references</a>, <a href="#syntax-cdata" title="syntax-cdata">CDATA sections</a>, other <a href="#syntax-elements" title="syntax-elements">elements</a>, and <a href="#syntax-comments" title="syntax-comments">comments</a>, but the text must not contain the character U+003C LESS-THAN SIGN (<) or an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>.</p> <div class="note"> <p>The HTML syntax does not support namespace declarations, even in <a href="#foreign-elements">foreign elements</a>.</p> <p>For instance, consider the following HTML fragment:</p> <pre><p> <svg> <metadata> <!-- this is invalid --> <cdr:license xmlns:cdr="http://www.example.com/cdr/metadata" name="MIT"/> </metadata> </svg> </p></pre> <p>The innermost element, <code title="">cdr:license</code>, is actually in the SVG namespace, as the "<code title="">xmlns:cdr</code>" attribute has no effect (unlike in XML). In fact, as the comment in the fragment above says, the fragment is actually non-conforming. This is because the SVG specification does not define any elements called "<code title="">cdr:license</code>" in the SVG namespace.</p> </div> <p><a href="#normal-elements">Normal elements</a> can have <a href="#syntax-text" title="syntax-text">text</a>, <a href="#syntax-charref" title="syntax-charref">character references</a>, other <a href="#syntax-elements" title="syntax-elements">elements</a>, and <a href="#syntax-comments" title="syntax-comments">comments</a>, but the text must not contain the character U+003C LESS-THAN SIGN (<) or an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>. Some <a href="#normal-elements">normal elements</a> also have <a href="#element-restrictions">yet more restrictions</a> on what content they are allowed to hold, beyond the restrictions imposed by the content model and those described in this paragraph. Those restrictions are described below.</p> <p>Tags contain a <dfn id="syntax-tag-name" title="syntax-tag-name">tag name</dfn>, giving the element's name. HTML elements all have names that only use characters in the range <a href="common-microsyntaxes.html#ascii-digits">ASCII digits</a>, <a href="common-microsyntaxes.html#lowercase-ascii-letters">lowercase ASCII letters</a>, and <a href="common-microsyntaxes.html#uppercase-ascii-letters">uppercase ASCII letters</a>. In the HTML syntax, tag names, even those for <a href="#foreign-elements">foreign elements</a>, may be written with any mix of lower- and uppercase letters that, when converted to all-lowercase, matches the element's tag name; tag names are case-insensitive.</p> <h5 id="start-tags"><span class="secno">8.1.2.1 </span>Start tags</h5> <p><dfn id="syntax-start-tag" title="syntax-start-tag">Start tags</dfn> must have the following format:</p> <ol><li>The first character of a start tag must be a U+003C LESS-THAN SIGN character (<).</li> <li>The next few characters of a start tag must be the element's <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a>.</li> <li>If there are to be any attributes in the next step, there must first be one or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>Then, the start tag may have a number of attributes, the <a href="#syntax-attributes" title="syntax-attributes">syntax for which</a> is described below. Attributes must be separated from each other by one or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>After the attributes, or after the <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a> if there are no attributes, there may be one or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>. (Some attributes are required to be followed by a space. See the <a href="#syntax-attributes" title="syntax-attributes">attributes section</a> below.)</li> <li>Then, if the element is one of the <a href="#void-elements">void elements</a>, or if the element is a <a href="#foreign-elements" title="foreign elements">foreign element</a>, then there may be a single U+002F SOLIDUS character (/). This character has no effect on <a href="#void-elements">void elements</a>, but on <a href="#foreign-elements">foreign elements</a> it marks the start tag as self-closing.</li> <li>Finally, start tags must be closed by a U+003E GREATER-THAN SIGN character (>).</li> </ol><h5 id="end-tags"><span class="secno">8.1.2.2 </span>End tags</h5> <p><dfn id="syntax-end-tag" title="syntax-end-tag">End tags</dfn> must have the following format:</p> <ol><li>The first character of an end tag must be a U+003C LESS-THAN SIGN character (<).</li> <li>The second character of an end tag must be a "/" (U+002F) character.</li> <li>The next few characters of an end tag must be the element's <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a>.</li> <li>After the tag name, there may be one or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</li> <li>Finally, end tags must be closed by a U+003E GREATER-THAN SIGN character (>).</li> </ol><h5 id="attributes-0"><span class="secno">8.1.2.3 </span>Attributes</h5> <p><dfn id="syntax-attributes" title="syntax-attributes">Attributes</dfn> for an element are expressed inside the element's start tag.</p> <p>Attributes have a name and a value. <dfn id="syntax-attribute-name" title="syntax-attribute-name">Attribute names</dfn> must consist of one or more characters other than the <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, U+0000 NULL, U+0022 QUOTATION MARK ("), U+0027 APOSTROPHE ('), U+003E GREATER-THAN SIGN (>), "/" (U+002F), and "=" (U+003D) characters, the control characters, and any characters that are not defined by Unicode. In the HTML syntax, attribute names, even those for <a href="#foreign-elements">foreign elements</a>, may be written with any mix of lower- and uppercase letters that are an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the attribute's name.</p> <p><dfn id="syntax-attribute-value" title="syntax-attribute-value">Attribute values</dfn> are a mixture of <a href="#syntax-text" title="syntax-text">text</a> and <a href="#syntax-charref" title="syntax-charref">character references</a>, except with the additional restriction that the text cannot contain an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>.</p> <p>Attributes can be specified in four different ways:</p> <dl><dt>Empty attribute syntax</dt> <dd> <p>Just the <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>. The value is implicitly the empty string.</p> <div class="example"> <p>In the following example, the <code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-disabled">disabled</a></code> attribute is given with the empty attribute syntax:</p> <pre><input <em>disabled</em>></pre> </div> <p>If an attribute using the empty attribute syntax is to be followed by another attribute, then there must be a <a href="common-microsyntaxes.html#space-character">space character</a> separating the two.</p> </dd> <dt id="unquoted">Unquoted attribute value syntax</dt> <dd> <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by a single U+003D EQUALS SIGN character, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in addition to the requirements given above for attribute values, must not contain any literal <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, any U+0022 QUOTATION MARK characters ("), U+0027 APOSTROPHE characters ('), "=" (U+003D) characters, U+003C LESS-THAN SIGN characters (<), U+003E GREATER-THAN SIGN characters (>), or "`" (U+0060) characters, and must not be the empty string.</p>  <div class="example"> <p>In the following example, the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute is given with the unquoted attribute value syntax:</p> <pre><input <em>value=yes</em>></pre> </div> <p>If an attribute using the unquoted attribute syntax is to be followed by another attribute or by the optional "/" (U+002F) character allowed in step 6 of the <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> syntax above, then there must be a <a href="common-microsyntaxes.html#space-character">space character</a> separating the two.</p> </dd> <dt>Single-quoted attribute value syntax</dt> <dd> <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by a single U+003D EQUALS SIGN character, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by a single "'" (U+0027) character, followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in addition to the requirements given above for attribute values, must not contain any literal "'" (U+0027) characters, and finally followed by a second single U+0027 APOSTROPHE character (').</p> <div class="example"> <p>In the following example, the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is given with the single-quoted attribute value syntax:</p> <pre><input <em>type='checkbox'</em>></pre> </div> <p>If an attribute using the single-quoted attribute syntax is to be followed by another attribute, then there must be a <a href="common-microsyntaxes.html#space-character">space character</a> separating the two.</p> </dd> <dt>Double-quoted attribute value syntax</dt> <dd> <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by a single U+003D EQUALS SIGN character, followed by zero or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by a single """ (U+0022) character, followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in addition to the requirements given above for attribute values, must not contain any literal """ (U+0022) characters, and finally followed by a second single """ (U+0022) character.</p> <div class="example"> <p>In the following example, the <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code> attribute is given with the double-quoted attribute value syntax:</p> <pre><input <em>name="be evil"</em>></pre> </div> <p>If an attribute using the double-quoted attribute syntax is to be followed by another attribute, then there must be a <a href="common-microsyntaxes.html#space-character">space character</a> separating the two.</p> </dd> </dl><p>There must never be two or more attributes on the same start tag whose names are an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for each other.</p> <hr><p>When a <a href="#foreign-elements" title="foreign elements">foreign element</a> has one of the namespaced attributes given by the local name and namespace of the first and second cells of a row from the following table, it must be written using the name given by the third cell from the same row.</p> <table><thead><tr><th> Local name <th> Namespace <th> Attribute name <tbody><tr><td> <code title="">actuate</code> <td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> <td> <code title="">xlink:actuate</code> <tr><td> <code title="">arcrole</code> <td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> <td> <code title="">xlink:arcrole</code> <tr><td> <code title="">href</code> <td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> <td> <code title="">xlink:href</code> <tr><td> <code title="">role</code> <td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> <td> <code title="">xlink:role</code> <tr><td> <code title="">show</code> <td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> <td> <code title="">xlink:show</code> <tr><td> <code title="">title</code> <td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> <td> <code title="">xlink:title</code> <tr><td> <code title="">type</code> <td> <a href="namespaces.html#xlink-namespace">XLink namespace</a> <td> <code title="">xlink:type</code> <tr><td> <code title="">base</code> <td> <a href="namespaces.html#xml-namespace">XML namespace</a>  <td> <code title="">xml:base</code> <tr><td> <code title="">lang</code> <td> <a href="namespaces.html#xml-namespace">XML namespace</a> <td> <code title="">xml:lang</code> <tr><td> <code title="">space</code> <td> <a href="namespaces.html#xml-namespace">XML namespace</a> <td> <code title="">xml:space</code> <tr><td> <code title="">xmlns</code> <td> <a href="namespaces.html#xmlns-namespace">XMLNS namespace</a> <td> <code title="">xmlns</code> <tr><td> <code title="">xlink</code> <td> <a href="namespaces.html#xmlns-namespace">XMLNS namespace</a> <td> <code title="">xmlns:xlink</code> </table><p>No other namespaced attribute can be expressed in <a href="#syntax">the HTML syntax</a>.</p> <p class="note">Whether the attributes in the table above are conforming or not is defined by other specifications (e.g. the SVG and MathML specifications); this section only describes the syntax rules if the attributes are serialised using the HTML syntax.</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> in the situations described below does not mean the element is not present; it is implied, but it is still there. For example, an HTML document always has a root <code><a href="the-html-element.html#the-html-element">html</a></code> element, even if the string <code title=""><html></code> doesn't appear anywhere in the markup.</p>  <p>An <code><a href="the-html-element.html#the-html-element">html</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the first thing inside the <code><a href="the-html-element.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="the-html-element.html#the-html-element">html</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a> may be omitted if the <code><a href="the-html-element.html#the-html-element">html</a></code> element is not immediately followed by a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p>  <p>A <code><a href="the-head-element.html#the-head-element">head</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the element is empty, or if the first thing inside the <code><a href="the-head-element.html#the-head-element">head</a></code> element is an element.</p>  <p>A <code><a href="the-head-element.html#the-head-element">head</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a> may be omitted if the <code><a href="the-head-element.html#the-head-element">head</a></code> element is not immediately followed by a <a href="common-microsyntaxes.html#space-character">space character</a> or a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p>  <p>A <code><a href="the-body-element.html#the-body-element">body</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the element is empty, or if the first thing inside the <code><a href="the-body-element.html#the-body-element">body</a></code> element is not a <a href="common-microsyntaxes.html#space-character">space character</a> or a <a href="#syntax-comments" title="syntax-comments">comment</a>, except if the first thing inside the <code><a href="the-body-element.html#the-body-element">body</a></code> element is a <code><a href="the-script-element.html#the-script-element">script</a></code> or <code><a href="the-style-element.html#the-style-element">style</a></code> element. p> 

A bodya></code> element's end taga> may be omitted if the <code><a href="the-body-element.html#the-body-element">body</a>code> element is not immediately followed by a <a href="#syntax-comments" title="syntax-comments">comment</a>.p> 

An lia></code> element's end taga> may be omitted if the <code><a href="the-li-element.html#the-li-element">li</a>code> element is immediately followed by another <code><a href="the-li-element.html#the-li-element">li</a>code> element or if there is no more content in the parent element.</p>

An optgroupa></code> element's end taga> may be omitted if the <code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a>code> element  is immediately followed by another optgroupa></code> element, or if there is no more content in the parent element.p> <!-- so e.g. the max number of </optgroup>s are omitted here: