UNPKG

thenavisapp

Version:

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

526 lines (437 loc) 915 kB
<!DOCTYPE html><html class=split data-revision="$Revision: 8844 $" lang=en-GB-x-hixie><title>HTML Standard</title><script> var loadTimer = new Date(); var current_revision = "r" + document.documentElement.getAttribute('data-revision').substr(11); current_revision = current_revision.substr(0, current_revision.length - 2); var last_known_revision = current_revision; function F( /* varargs... */) { var fragment = document.createDocumentFragment(); for (var index = 0; index < arguments.length; index += 1) { if (arguments[index] instanceof Array) { fragment.appendChild(F.apply(this, arguments[index])); } else if (typeof arguments[index] == 'string') { fragment.appendChild(document.createTextNode(arguments[index])); } else { fragment.appendChild(arguments[index]); } } return fragment; } function E(name, /* optional */ attributes /*, varargs... */) { var element = document.createElement(name); var index = 1; if ((arguments.length > 1) && (typeof attributes != 'string') && (!(attributes instanceof Node)) && (!(attributes instanceof Array))) { for (var attName in attributes) { if (typeof attributes[attName] == 'boolean') { if (attributes[attName]) element.setAttribute(attName, ''); } else if (typeof attributes[attName] == 'function') { element[attName] = attributes[attName]; } else { element.setAttribute(attName, attributes[attName]); } } index = 2; } for (; index < arguments.length; index += 1) { if (arguments[index] instanceof Array) { element.appendChild(F.apply(this, arguments[index])); } else if (typeof arguments[index] == 'string') { element.appendChild(document.createTextNode(arguments[index])); } else { element.appendChild(arguments[index]); } } return element; } 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; } var currentAlert; var currentAlertTimeout; function showAlert(s, href) { if (!currentAlert) { currentAlert = document.createElement('div'); currentAlert.id = 'alert'; var x = document.createElement('button'); x.textContent = '\u2573'; x.onclick = closeAlert2; currentAlert.appendChild(x); currentAlert.appendChild(document.createElement('span')); currentAlert.onmousemove = function () { clearTimeout(currentAlertTimeout); currentAlert.className = ''; currentAlertTimeout = setTimeout(closeAlert, 10000); } document.body.appendChild(currentAlert); } else { clearTimeout(currentAlertTimeout); currentAlert.className = ''; } currentAlert.lastChild.textContent = ''; currentAlert.lastChild.appendChild(F(s)); if (href) { var link = document.createElement('a'); link.href = href; link.textContent = href; currentAlert.lastChild.appendChild(F(' ', link)); } currentAlertTimeout = setTimeout(closeAlert, 10000); } function closeAlert() { clearTimeout(currentAlertTimeout); if (currentAlert) { currentAlert.className = 'closed'; currentAlertTimeout = setTimeout(closeAlert2, 3000); } } function closeAlert2() { clearTimeout(currentAlertTimeout); if (currentAlert) { currentAlert.parentNode.removeChild(currentAlert); currentAlert = null; } } window.addEventListener('keydown', function (event) { if (event.keyCode == 27) { if (currentAlert) closeAlert2(); } else { closeAlert(); } }, false); window.addEventListener('scroll', function (event) { closeAlert(); }, false); function load(script) { var e = document.createElement('script'); e.setAttribute('src', '/' + script); document.body.appendChild(e); } var startedInit = 0; function init() { startedInit = 1; if (location.search == '?slow-browser') return; load('reviewer.js'); if (document.documentElement.className == "big" || document.documentElement.className == "big split index") load('toc.js'); load('updater.js'); load('dfn.js'); load('status.js'); if (getCookie('profile') == '1') document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; } if (document.documentElement.className == "") setTimeout(function () { if (!startedInit) showAlert("Too slow? Try reading the multipage copy of the spec instead:", "https://whatwg.org/html"); }, 6000); window.addEventListener('keypress', function (event) { if ((event.which == 114) && (event.metaKey)) { if (!confirm('Are you sure you want to reload this page?')) event.preventDefault(); } }, false); </script><script> function toggleStatus(div) { div.parentNode.classList.toggle('wrapped'); } </script><link rel=stylesheet href=https://whatwg.org/style/specification><link rel=icon href=https://whatwg.org/images/icon><style> [hidden] { display: none; } .proposal { border: blue solid; padding: 1em; } .bad, .bad *:not(.X\58X) { color: gray; border-color: gray; background: transparent; } #updatesStatus { display: none; z-index: 10; } #updatesStatus.relevant { display: block; position: fixed; right: 1em; top: 1em; padding: 0.5em; font: bold small sans-serif; min-width: 25em; width: 30%; max-width: 40em; height: auto; border: ridge 4px gray; background: #EEEEEE; color: black; } div.head .logo { width: 11em; margin-bottom: 20em; } #configUI { position: absolute; z-index: 20; top: auto; right: 0; width: 11em; padding: 0 0.5em 0 0.5em; font-size: small; background: gray; background: rgba(32,32,32,0.9); color: white; border-radius: 0.5em 0 0 0.5em; } #configUI p { margin: 0.75em 0; padding: 0.3em; } #configUI p label { display: block; } #configUI #updateUI, #configUI .loginUI { text-align: center; } #configUI input[type=button] { display: block; margin: auto; } #configUI :link, #configUI :visited { color: white; } #configUI :link:hover, #configUI :visited:hover { background: transparent; } #alert { position: fixed; top: 20%; left: 20%; right: 20%; font-size: 2em; padding: 0.5em; z-index: 40; background: gray; background: rgba(32,32,32,0.9); color: white; border-radius: 0.5em; transition: opacity 1s linear; } #alert.closed { opacity: 0; } #alert button { position: absolute; top: -1em; right: 2em; border-radius: 0.5em 0.5em 0 0; border: none; line-height: 0.9; color: white; background: rgb(64,64,64); font-size: 0.6em; font-weight: 900; cursor: pointer; padding: 0.25em; } #alert :link, #alert :visited { color: white; text-decoration: underline; } #alert :link:hover, #alert :visited:hover { background: transparent; } @media print { #configUI, #alert { display: none; } } .fingerprint { position: absolute; right: 0; z-index: 5; } .status { font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; top: auto; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; margin: -2em 0 0 0; border-collapse: initial; border-spacing: initial; } .status.wrapped { width: 1em; height: 1em; } .status.wrapped > :not(input) { display: none; } .status > input { position: absolute; right: 0; top: 0; width: 1em; height: 1em; border: none; background: transparent; padding: 0; margin: 0; } .status > p { font-size: 0.6em; margin: 0; padding: 0; } .status > p + p { padding-top: 0.5em; } .status > .support { display: block; } .status > .support > span { padding: 0.2em 0; display: block; display: table; } .status > .support > span.partial { color: #666666; filter: grayscale(50%); } .status > .support > span.no { color: #CCCCCC; filter: grayscale(100%); } .status > .support > span:first-of-type { padding-top: 0.5em; } .status > .support > span > span { padding: 0 0.5em; display: table-cell; vertical-align: top; } .status > .support > span > span:first-child { width: 100%; } .status > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .status > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .status > .support > .and_chr::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome-android.png); } .status > .support > .and_ff::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .status > .support > .and_uc::before { background-image: url(https://resources.whatwg.org/browser-logos/uc.png); } /* UC Browser for Android */ .status > .support > .android::before { background-image: url(https://resources.whatwg.org/browser-logos/android.svg); } .status > .support > .bb::before { background-image: url(https://resources.whatwg.org/browser-logos/bb.jpg); } /* Blackberry Browser */ .status > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.png); } .status > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .status > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .status > .support > .ie_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/ie-mobile.svg); } .status > .support > .ios_saf::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .status > .support > .op_mini::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mobile.png); } .status > .support > .op_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mobile.png); } .status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.png); } .status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .status > .caniuse { text-align: right; font-style: italic; } .panel { position: fixed; z-index: 30; top: 10%; left: 0; margin: auto; right: 0; width: 35em; border: double thick; background: #EEEEEE; color: black; padding: 1em; font: 1em sans-serif; max-height: 70%; overflow: auto; } .panel h2 { margin: 0; text-align: center; } .panel ul { min-height: 6em; } .panel p { text-align: right; margin: 0; } .panel form { background: transparent; color: black; margin: 0.5em -0.5em 1em; padding: 0.5em; } .panel form.changed { background: yellow; color: black; } .panel form p { text-align: left; margin: 1em 0 0; } .panel form p:first-child { margin-top: 0; } .panel form p:last-child { margin-bottom: 0; } .panel form p textarea { width: 100% /* need the keyword that makes it fit to the parent here XXX */; min-height: 4em; display: block; } .panel form dl { line-height: 1.5em; } .panel form dt { display: inline-block; width: 20em; white-space: nowrap; text-align: right; font-weight: normal; margin: 0; padding: 0; } .panel form dd { display: inline; margin: 0 0 0 1em; padding: 0; } .panel form dd:after { display: block; } ul.checkboxes { list-style-type: none; } .progress { text-decoration: blink; } .applies .yes { background: yellow; } </style><style> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies td { text-align: center; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .vertical-summary-table tr > th[rowspan="2"]:first-child + th, .vertical-summary-table tr > td[rowspan="2"]:first-child + td { border-bottom: hidden; } .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 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; } .three-column-nowrap tr > td:first-child, .three-column-nowrap tr > td:first-child + td, .three-column-nowrap tr > td:first-child + td + td { white-space: nowrap; } .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; } </style><style> #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } @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><script src=link-fixup.js></script><body onload=init()> <header id=head class="head with-buttons"> <p><a href=https://whatwg.org/ class=logo><img alt=WHATWG src=//whatwg.org/images/logo width=101 height=101></a></p> <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>1 November 2014</span></h2></hgroup> </header> <nav><a href=webstorage.html>← 11 Web storage</a> — <a href=index.html>Table of Contents</a> — <a href=xhtml.html>13 The XHTML syntax →</a></nav><ol class=toc><li id=toc-syntax><a href=syntax.html#syntax>12 The HTML syntax</a><ol><li><a href=syntax.html#writing>12.1 Writing HTML documents</a><ol><li><a href=syntax.html#the-doctype>12.1.1 The DOCTYPE</a><li><a href=syntax.html#elements-2>12.1.2 Elements</a><ol><li><a href=syntax.html#start-tags>12.1.2.1 Start tags</a><li><a href=syntax.html#end-tags>12.1.2.2 End tags</a><li><a href=syntax.html#attributes-2>12.1.2.3 Attributes</a><li><a href=syntax.html#optional-tags>12.1.2.4 Optional tags</a><li><a href=syntax.html#element-restrictions>12.1.2.5 Restrictions on content models</a><li><a href=syntax.html#cdata-rcdata-restrictions>12.1.2.6 Restrictions on the contents of raw text and escapable raw text elements</a></ol><li><a href=syntax.html#text-2>12.1.3 Text</a><ol><li><a href=syntax.html#newlines>12.1.3.1 Newlines</a></ol><li><a href=syntax.html#character-references>12.1.4 Character references</a><li><a href=syntax.html#cdata-sections>12.1.5 CDATA sections</a><li><a href=syntax.html#comments>12.1.6 Comments</a></ol><li><a href=syntax.html#parsing>12.2 Parsing HTML documents</a><ol><li><a href=syntax.html#overview-of-the-parsing-model>12.2.1 Overview of the parsing model</a><li><a href=syntax.html#the-input-byte-stream>12.2.2 The input byte stream</a><ol><li><a href=syntax.html#parsing-with-a-known-character-encoding>12.2.2.1 Parsing with a known character encoding</a><li><a href=syntax.html#determining-the-character-encoding>12.2.2.2 Determining the character encoding</a><li><a href=syntax.html#character-encodings>12.2.2.3 Character encodings</a><li><a href=syntax.html#changing-the-encoding-while-parsing>12.2.2.4 Changing the encoding while parsing</a><li><a href=syntax.html#preprocessing-the-input-stream>12.2.2.5 Preprocessing the input stream</a></ol><li><a href=syntax.html#parse-state>12.2.3 Parse state</a><ol><li><a href=syntax.html#the-insertion-mode>12.2.3.1 The insertion mode</a><li><a href=syntax.html#the-stack-of-open-elements>12.2.3.2 The stack of open elements</a><li><a href=syntax.html#the-list-of-active-formatting-elements>12.2.3.3 The list of active formatting elements</a><li><a href=syntax.html#the-element-pointers>12.2.3.4 The element pointers</a><li><a href=syntax.html#other-parsing-state-flags>12.2.3.5 Other parsing state flags</a></ol><li><a href=syntax.html#tokenization>12.2.4 Tokenization</a><ol><li><a href=syntax.html#data-state>12.2.4.1 Data state</a><li><a href=syntax.html#character-reference-in-data-state>12.2.4.2 Character reference in data state</a><li><a href=syntax.html#rcdata-state>12.2.4.3 RCDATA state</a><li><a href=syntax.html#character-reference-in-rcdata-state>12.2.4.4 Character reference in RCDATA state</a><li><a href=syntax.html#rawtext-state>12.2.4.5 RAWTEXT state</a><li><a href=syntax.html#script-data-state>12.2.4.6 Script data state</a><li><a href=syntax.html#plaintext-state>12.2.4.7 PLAINTEXT state</a><li><a href=syntax.html#tag-open-state>12.2.4.8 Tag open state</a><li><a href=syntax.html#end-tag-open-state>12.2.4.9 End tag open state</a><li><a href=syntax.html#tag-name-state>12.2.4.10 Tag name state</a><li><a href=syntax.html#rcdata-less-than-sign-state>12.2.4.11 RCDATA less-than sign state</a><li><a href=syntax.html#rcdata-end-tag-open-state>12.2.4.12 RCDATA end tag open state</a><li><a href=syntax.html#rcdata-end-tag-name-state>12.2.4.13 RCDATA end tag name state</a><li><a href=syntax.html#rawtext-less-than-sign-state>12.2.4.14 RAWTEXT less-than sign state</a><li><a href=syntax.html#rawtext-end-tag-open-state>12.2.4.15 RAWTEXT end tag open state</a><li><a href=syntax.html#rawtext-end-tag-name-state>12.2.4.16 RAWTEXT end tag name state</a><li><a href=syntax.html#script-data-less-than-sign-state>12.2.4.17 Script data less-than sign state</a><li><a href=syntax.html#script-data-end-tag-open-state>12.2.4.18 Script data end tag open state</a><li><a href=syntax.html#script-data-end-tag-name-state>12.2.4.19 Script data end tag name state</a><li><a href=syntax.html#script-data-escape-start-state>12.2.4.20 Script data escape start state</a><li><a href=syntax.html#script-data-escape-start-dash-state>12.2.4.21 Script data escape start dash state</a><li><a href=syntax.html#script-data-escaped-state>12.2.4.22 Script data escaped state</a><li><a href=syntax.html#script-data-escaped-dash-state>12.2.4.23 Script data escaped dash state</a><li><a href=syntax.html#script-data-escaped-dash-dash-state>12.2.4.24 Script data escaped dash dash state</a><li><a href=syntax.html#script-data-escaped-less-than-sign-state>12.2.4.25 Script data escaped less-than sign state</a><li><a href=syntax.html#script-data-escaped-end-tag-open-state>12.2.4.26 Script data escaped end tag open state</a><li><a href=syntax.html#script-data-escaped-end-tag-name-state>12.2.4.27 Script data escaped end tag name state</a><li><a href=syntax.html#script-data-double-escape-start-state>12.2.4.28 Script data double escape start state</a><li><a href=syntax.html#script-data-double-escaped-state>12.2.4.29 Script data double escaped state</a><li><a href=syntax.html#script-data-double-escaped-dash-state>12.2.4.30 Script data double escaped dash state</a><li><a href=syntax.html#script-data-double-escaped-dash-dash-state>12.2.4.31 Script data double escaped dash dash state</a><li><a href=syntax.html#script-data-double-escaped-less-than-sign-state>12.2.4.32 Script data double escaped less-than sign state</a><li><a href=syntax.html#script-data-double-escape-end-state>12.2.4.33 Script data double escape end state</a><li><a href=syntax.html#before-attribute-name-state>12.2.4.34 Before attribute name state</a><li><a href=syntax.html#attribute-name-state>12.2.4.35 Attribute name state</a><li><a href=syntax.html#after-attribute-name-state>12.2.4.36 After attribute name state</a><li><a href=syntax.html#before-attribute-value-state>12.2.4.37 Before attribute value state</a><li><a href=syntax.html#attribute-value-(double-quoted)-state>12.2.4.38 Attribute value (double-quoted) state</a><li><a href=syntax.html#attribute-value-(single-quoted)-state>12.2.4.39 Attribute value (single-quoted) state</a><li><a href=syntax.html#attribute-value-(unquoted)-state>12.2.4.40 Attribute value (unquoted) state</a><li><a href=syntax.html#character-reference-in-attribute-value-state>12.2.4.41 Character reference in attribute value state</a><li><a href=syntax.html#after-attribute-value-(quoted)-state>12.2.4.42 After attribute value (quoted) state</a><li><a href=syntax.html#self-closing-start-tag-state>12.2.4.43 Self-closing start tag state</a><li><a href=syntax.html#bogus-comment-state>12.2.4.44 Bogus comment state</a><li><a href=syntax.html#markup-declaration-open-state>12.2.4.45 Markup declaration open state</a><li><a href=syntax.html#comment-start-state>12.2.4.46 Comment start state</a><li><a href=syntax.html#comment-start-dash-state>12.2.4.47 Comment start dash state</a><li><a href=syntax.html#comment-state>12.2.4.48 Comment state</a><li><a href=syntax.html#comment-end-dash-state>12.2.4.49 Comment end dash state</a><li><a href=syntax.html#comment-end-state>12.2.4.50 Comment end state</a><li><a href=syntax.html#comment-end-bang-state>12.2.4.51 Comment end bang state</a><li><a href=syntax.html#doctype-state>12.2.4.52 DOCTYPE state</a><li><a href=syntax.html#before-doctype-name-state>12.2.4.53 Before DOCTYPE name state</a><li><a href=syntax.html#doctype-name-state>12.2.4.54 DOCTYPE name state</a><li><a href=syntax.html#after-doctype-name-state>12.2.4.55 After DOCTYPE name state</a><li><a href=syntax.html#after-doctype-public-keyword-state>12.2.4.56 After DOCTYPE public keyword state</a><li><a href=syntax.html#before-doctype-public-identifier-state>12.2.4.57 Before DOCTYPE public identifier state</a><li><a href=syntax.html#doctype-public-identifier-(double-quoted)-state>12.2.4.58 DOCTYPE public identifier (double-quoted) state</a><li><a href=syntax.html#doctype-public-identifier-(single-quoted)-state>12.2.4.59 DOCTYPE public identifier (single-quoted) state</a><li><a href=syntax.html#after-doctype-public-identifier-state>12.2.4.60 After DOCTYPE public identifier state</a><li><a href=syntax.html#between-doctype-public-and-system-identifiers-state>12.2.4.61 Between DOCTYPE public and system identifiers state</a><li><a href=syntax.html#after-doctype-system-keyword-state>12.2.4.62 After DOCTYPE system keyword state</a><li><a href=syntax.html#before-doctype-system-identifier-state>12.2.4.63 Before DOCTYPE system identifier state</a><li><a href=syntax.html#doctype-system-identifier-(double-quoted)-state>12.2.4.64 DOCTYPE system identifier (double-quoted) state</a><li><a href=syntax.html#doctype-system-identifier-(single-quoted)-state>12.2.4.65 DOCTYPE system identifier (single-quoted) state</a><li><a href=syntax.html#after-doctype-system-identifier-state>12.2.4.66 After DOCTYPE system identifier state</a><li><a href=syntax.html#bogus-doctype-state>12.2.4.67 Bogus DOCTYPE state</a><li><a href=syntax.html#cdata-section-state>12.2.4.68 CDATA section state</a><li><a href=syntax.html#tokenizing-character-references>12.2.4.69 Tokenizing character references</a></ol><li><a href=syntax.html#tree-construction>12.2.5 Tree construction</a><ol><li><a href=syntax.html#creating-and-inserting-nodes>12.2.5.1 Creating and inserting nodes</a><li><a href=syntax.html#parsing-elements-that-contain-only-text>12.2.5.2 Parsing elements that contain only text</a><li><a href=syntax.html#closing-elements-that-have-implied-end-tags>12.2.5.3 Closing elements that have implied end tags</a><li><a href=syntax.html#parsing-main-inhtml>12.2.5.4 The rules for parsing tokens in HTML content</a><ol><li><a href=syntax.html#the-initial-insertion-mode>12.2.5.4.1 The "initial" insertion mode</a><li><a href=syntax.html#the-before-html-insertion-mode>12.2.5.4.2 The "before html" insertion mode</a><li><a href=syntax.html#the-before-head-insertion-mode>12.2.5.4.3 The "before head" insertion mode</a><li><a href=syntax.html#parsing-main-inhead>12.2.5.4.4 The "in head" insertion mode</a><li><a href=syntax.html#parsing-main-inheadnoscript>12.2.5.4.5 The "in head noscript" insertion mode</a><li><a href=syntax.html#the-after-head-insertion-mode>12.2.5.4.6 The "after head" insertion mode</a><li><a href=syntax.html#parsing-main-inbody>12.2.5.4.7 The "in body" insertion mode</a><li><a href=syntax.html#parsing-main-incdata>12.2.5.4.8 The "text" insertion mode</a><li><a href=syntax.html#parsing-main-intable>12.2.5.4.9 The "in table" insertion mode</a><li><a href=syntax.html#parsing-main-intabletext>12.2.5.4.10 The "in table text" insertion mode</a><li><a href=syntax.html#parsing-main-incaption>12.2.5.4.11 The "in caption" insertion mode</a><li><a href=syntax.html#parsing-main-incolgroup>12.2.5.4.12 The "in column group" insertion mode</a><li><a href=syntax.html#parsing-main-intbody>12.2.5.4.13 The "in table body" insertion mode</a><li><a href=syntax.html#parsing-main-intr>12.2.5.4.14 The "in row" insertion mode</a><li><a href=syntax.html#parsing-main-intd>12.2.5.4.15 The "in cell" insertion mode</a><li><a href=syntax.html#parsing-main-inselect>12.2.5.4.16 The "in select" insertion mode</a><li><a href=syntax.html#parsing-main-inselectintable>12.2.5.4.17 The "in select in table" insertion mode</a><li><a href=syntax.html#parsing-main-intemplate>12.2.5.4.18 The "in template" insertion mode</a><li><a href=syntax.html#parsing-main-afterbody>12.2.5.4.19 The "after body" insertion mode</a><li><a href=syntax.html#parsing-main-inframeset>12.2.5.4.20 The "in frameset" insertion mode</a><li><a href=syntax.html#parsing-main-afterframeset>12.2.5.4.21 The "after frameset" insertion mode</a><li><a href=syntax.html#the-after-after-body-insertion-mode>12.2.5.4.22 The "after after body" insertion mode</a><li><a href=syntax.html#the-after-after-frameset-insertion-mode>12.2.5.4.23 The "after after frameset" insertion mode</a></ol><li><a href=syntax.html#parsing-main-inforeign>12.2.5.5 The rules for parsing tokens in foreign content</a></ol><li><a href=syntax.html#the-end>12.2.6 The end</a><li><a href=syntax.html#coercing-an-html-dom-into-an-infoset>12.2.7 Coercing an HTML DOM into an infoset</a><li><a href=syntax.html#an-introduction-to-error-handling-and-strange-cases-in-the-parser>12.2.8 An introduction to error handling and strange cases in the parser</a><ol><li><a href=syntax.html#misnested-tags:-b-i-/b-/i>12.2.8.1 Misnested tags: &lt;b>&lt;i>&lt;/b>&lt;/i></a><li><a href=syntax.html#misnested-tags:-b-p-/b-/p>12.2.8.2 Misnested tags: &lt;b>&lt;p>&lt;/b>&lt;/p></a><li><a href=syntax.html#unexpected-markup-in-tables>12.2.8.3 Unexpected markup in tables</a><li><a href=syntax.html#scripts-that-modify-the-page-as-it-is-being-parsed>12.2.8.4 Scripts that modify the page as it is being parsed</a><li><a href=syntax.html#the-execution-of-scripts-that-are-moving-across-multiple-documents>12.2.8.5 The execution of scripts that are moving across multiple documents</a><li><a href=syntax.html#unclosed-formatting-elements>12.2.8.6 Unclosed formatting elements</a></ol></ol><li><a href=syntax.html#serialising-html-fragments>12.3 Serialising HTML fragments</a><li><a href=syntax.html#parsing-html-fragments>12.4 Parsing HTML fragments</a><li><a href=syntax.html#named-character-references>12.5 Named character references</a></ol></ol><h2 id=syntax>12 <dfn>The HTML syntax</dfn></h2> <p class=note>This section only describes the rules for resources labeled with an <a id=syntax:html-mime-type href=infrastructure.html#html-mime-type>HTML MIME type</a>. Rules for XML resources are discussed in the section below entitled "<a id=syntax:the-xhtml-syntax href=xhtml.html#the-xhtml-syntax>The XHTML syntax</a>".</p> <h3 id=writing>12.1 Writing HTML documents</h3> <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> <p>Documents must consist of the following parts, in the given order:</p> <ol><li>Optionally, a single U+FEFF BYTE ORDER MARK (BOM) character.<li>Any number of <a href=#syntax-comments id=writing:syntax-comments>comments</a> and <a href=infrastructure.html#space-character id=writing:space-character>space characters</a>.<li>A <a href=#syntax-doctype id=writing:syntax-doctype>DOCTYPE</a>. <li>Any number of <a href=#syntax-comments id=writing:syntax-comments-2>comments</a> and <a href=infrastructure.html#space-character id=writing:space-character-2>space characters</a>.<li>The root element, in the form of an <code id=writing:the-html-element><a href=semantics.html#the-html-element>html</a></code> <a href=#syntax-elements id=writing:syntax-elements>element</a>.<li>Any number of <a href=#syntax-comments id=writing:syntax-comments-3>comments</a> and <a href=infrastructure.html#space-character id=writing:space-character-3>space characters</a>.</ol> <p>The various types of content mentioned above are described in the next few sections.</p> <p>In addition, there are some restrictions on how <a href=semantics.html#character-encoding-declaration id=writing:character-encoding-declaration>character encoding declarations</a> are to be serialised, as discussed in the section on that topic.</p> <div class=note> <p>Space characters before the root <code id=writing:the-html-element-2><a href=semantics.html#the-html-element>html</a></code> element, and space characters at the start of the <code id=writing:the-html-element-3><a href=semantics.html#the-html-element>html</a></code> element and before the <code id=writing:the-head-element><a href=semantics.html#the-head-element>head</a></code> element, will be dropped when the document is parsed; space characters <em>after</em> the root <code id=writing:the-html-element-4><a href=semantics.html#the-html-element>html</a></code> element will be parsed as if they were at the end of the <code id=writing:the-body-element><a href=semantics.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 id=writing:the-html-element-5><a href=semantics.html#the-html-element>html</a></code> element's start tag (if it is not <a href=#syntax-tag-omission id=writing:syntax-tag-omission>omitted</a>), and after any comments that are inside the <code id=writing:the-html-element-6><a href=semantics.html#the-html-element>html</a></code> element but before the <code id=writing:the-head-element-2><a href=semantics.html#the-head-element>head</a></code> element.</p> </div> <p>Many strings in the HTML syntax (e.g. the names of elements and their attributes) are case-insensitive, but only for <a id=writing:uppercase-ascii-letters href=infrastructure.html#uppercase-ascii-letters>uppercase ASCII letters</a> and <a id=writing:lowercase-ascii-letters href=infrastructure.html#lowercase-ascii-letters>lowercase ASCII letters</a>. For convenience, in this section this is just referred to as "case-insensitive".</p> <h4 id=the-doctype>12.1.1 The DOCTYPE</h4><div class=status><input onclick=toggleStatus(this) value=⋰ type=button><p class=bugs><strong>Spec bugs:</strong> <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=25232" title="De-emphasis DOCTYPE: shift focus from ”required preamble” to ”required rendering mode”">25232</a></div> <p>A <dfn id=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 id=the-doctype:ascii-case-insensitive href=infrastructure.html#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>&lt;!DOCTYPE</code>".<li>One or more <a href=infrastructure.html#space-character id=the-doctype:space-character>space characters</a>.<li>A string that is an <a id=the-doctype:ascii-case-insensitive-2 href=infrastructure.html#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>html</code>".<li>Optionally, a <a href=#doctype-legacy-string id=the-doctype:doctype-legacy-string>DOCTYPE legacy string</a> or an <a href=#obsolete-permitted-doctype-string id=the-doctype:obsolete-permitted-doctype-string>obsolete permitted DOCTYPE string</a> (defined below).<li>Zero or more <a href=infrastructure.html#space-character id=the-doctype:space-character-2>space characters</a>.<li>A U+003E GREATER-THAN SIGN character (>).</ol> <p class=note>In other words, <code>&lt;!DOCTYPE html></code>, case-insensitively.</p> <hr> <p>For the purposes of HTML generators that cannot output HTML markup with the short DOCTYPE "<code>&lt;!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=infrastructure.html#space-character id=the-doctype:space-character-3>space characters</a>.<li>A string that is an <a id=the-doctype:ascii-case-insensitive-3 href=infrastructure.html#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>SYSTEM</code>".<li>One or more <a href=infrastructure.html#space-character id=the-doctype:space-character-4>space characters</a>.<li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>quote mark</i>).<li>The literal string "<code id=the-doctype:about:legacy-compat><a href=infrastructure.html#about:legacy-compat>about:legacy-compat</a></code>".<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>).</ol> <p class=note>In other words, <code>&lt;!DOCTYPE html SYSTEM "about:legacy-compat"></code> or <code>&lt;!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 id=the-doctype:doctype-legacy-string-2>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:<div class=status><input onclick=toggleStatus(this) value=⋰ type=button><p class=bugs><strong>Spec bugs:</strong> <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=23753" title="A more informative message for “obsolete permitted DOCTYPE”">23753</a></div> <ol class=brief><li>One or more <a href=infrastructure.html#space-character id=the-doctype:space-character-5>space characters</a>.<li>A string that is an <a id=the-doctype:ascii-case-insensitive-4 href=infrastructure.html#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>PUBLIC</code>".<li>One or more <a href=infrastructure.html#space-character id=the-doctype:space-character-6>space characters</a>.<li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>first quote mark</i>).<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>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>If the cell in the second column of the <i>selected row</i> is not blank, one or more <a href=infrastructure.html#space-character id=the-doctype:space-character-7>space characters</a>.<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>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>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>).</ol> <table><caption> Allowed values for public and system identifiers in an <a href=#obsolete-permitted-doctype-string id=the-doctype:obsolete-permitted-doctype-string-2>obsolete permitted DOCTYPE string</a>. </caption><thead><tr><th> Public identifier <th> System identifier <tbody><tr><td> <code>-//W3C//DTD HTML 4.0//EN</code> <td> <tr><td> <code>-//W3C//DTD HTML 4.0//EN</code> <td> <code>http://www.w3.org/TR/REC-html40/strict.dtd</code> <tr><td> <code>-//W3C//DTD HTML 4.01//EN</code> <td> <tr><td> <code>-//W3C//DTD HTML 4.01//EN</code> <td> <code>http://www.w3.org/TR/html4/strict.dtd</code> <tr><td> <code>-//W3C//DTD XHTML 1.0 Strict//EN</code> <td> <code>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</code> <tr><td> <code>-//W3C//DTD XHTML 1.1//EN</code> <td> <code>http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</code> </table> <p>A <a href=#syntax-doctype id=the-doctype:syntax-doctype>DOCTYPE</a> containing an <a href=#obsolete-permitted-doctype-string id=the-doctype:obsolete-permitted-doctype-string-3>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 id=the-doctype:obsolete-permitted-doctype>obsolete permitted DOCTYPEs</a>, as they are unnecessarily long.</p> <h4 id=elements-2>12.1.2 Elements</h4> <p>There are five different kinds of <dfn id=syntax-elements>elements</dfn>: <a href=#void-elements id=elements-2:void-elements>void elements</a>, <a href=#raw-text-elements id=elements-2:raw-text-elements>raw text elements</a>, <a href=#escapable-raw-text-elements id=elements-2:escapable-raw-text-elements>escapable raw text elements</a>, <a href=#foreign-elements id=elements-2:foreign-elements>foreign elements</a>, and <a href=#normal-elements id=elements-2:normal-elements>normal elements</a>.</p> <dl><dt><dfn id=void-elements>Void elements</dfn><dd><code id=elements-2:the-area-element><a href=embedded-content.html#the-area-element>area</a></code>, <code id=elements-2:the-base-element><a href=semantics.html#the-base-element>base</a></code>, <code id=elements-2:the-br-element><a href=semantics.html#the-br-element>br</a></code>, <code id=elements-2:the-col-element><a href=tables.html#the-col-element>col</a></code>, <code id=elements-2:the-embed-element><a href=embedded-content.html#the-embed-element>embed</a></code>, <code id=elements-2:the-hr-element><a href=semantics.html#the-hr-element>hr</a></code>, <code id=elements-2:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, <code id=elements-2:the-input-element><a href=forms.html#the-input-element>input</a></code>, <code id=elements-2:the-keygen-element><a href=forms.html#the-keygen-element>keygen</a></code>, <code id=elements-2:the-link-element><a href=semantics.html#the-link-element>link</a></code>, <code id=elements-2:the-menuitem-element><a href=forms.html#the-menuitem-element>menuitem</a></code>, <code id=elements-2:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code>, <code id=elements-2:the-param-element><a href=embedded-content.html#the-param-element>param</a></code>, <code id=elements-2:the-source-element><a href=embedded-content.html#the-source-element>source</a></code>, <code id=elements-2:the-track-element><a href=embedded-content.html#the-track-element>track</a></code>, <code id=elements-2:the-wbr-element><a href=semantics.html#the-wbr-element>wbr</a></code><dt><dfn id=raw-text-elements>Raw text elements</dfn><dd><code id=elements-2:the-script-element><a href=scripting.html#the-script-element>script</a></code>, <code id=elements-2:the-style-element><a href=semantics.html#the-style-element>style</a></code><dt><dfn id=escapable-raw-text-elements>escapable raw text elements</dfn><dd><code id=elements-2:the-textarea-element><a href=forms.html#the-textarea-element>textarea</a></code>, <code id=elements-2:the-title-element><a href=semantics.html#the-title-element>title</a></code><dt><dfn id=foreign-elements>Foreign elements</dfn><dd>Elements from the <a id=elements-2:mathml-namespace href=infrastructure.html#mathml-namespace>MathML namespace</a> and the <a id=elements-2:svg-namespace href=infrastructure.html#svg-namespace>SVG namespace</a>.<dt><dfn id=normal-elements>Normal elements</dfn><dd>All other allowed <a id=elements-2:html-elements href=infrastructure.html#html-elements>HTML elements</a> are normal elements.</dl> <p><dfn id=syntax-tags>Tags</dfn> are used to delimit the start and end of elements in the markup. <a href=#raw-text-elements id=elements-2:raw-text-elements-2>Raw text</a>, <a href=#escapable-raw-text-elements id=elements-2:escapable-raw-text-elements-2>escapable raw text</a>, and <a href=#normal-elements id=elements-2:normal-elements-2>normal</a> elements have a <a href=#syntax-start-tag id=elements-2:syntax-start-tag>start tag</a> to indicate where they begin, and an <a href=#syntax-end-tag id=elements-2:syntax-end-tag>end tag</a> to indicate where they end. The start and end tags of certain <a href=#normal-elements id=elements-2:normal-elements-3>normal elements</a> can be <a href=#syntax-tag-omission id=elements-2:syntax-tag-omission>omitted</a>, as described below in the section on <a href=#syntax-tag-omission id=elements-2:syntax-tag-omission-2>optional tags</a>. Those that cannot be omitted must not be omitted. <a href=#void-elements id=elements-2:void-elements-2>Void elements</a> only have a start tag; end tags must not be specified for <a href=#void-elements id=elements-2:void-elements-3>void elements</a>. <a href=#foreign-elements id=elements-2:foreign-elements-2>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 <a href=dom.html#concept-html-contents id=elements-2:concept-html-contents>contents</a> of the element must be placed between just after the start tag (which <a href=#syntax-tag-omission id=elements-2:syntax-tag-omission-3>might be implied, in certain cases</a>) and just before the end tag (which again, <a href=#syntax-tag-omission id=elements-2:syntax-tag-omission-4>might be implied in certain cases</a>). The exact allowed contents of each individual element depend on the <a href=dom.html#content-models id=elements-2:content-models>content model</a> 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 id=elements-2:void-elements-4>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 id=elements-2:raw-text-elements-3>Raw text elements</a> can have <a href=#syntax-text id=elements-2:syntax-text>text</a>, though it has <a href=#cdata-rcdata-restrictions>restrictions</a> described below.</p> <p><a href=#escapable-raw-text-elements id=elements-2:escapable-raw-text-elements-3>Escapable raw text elements</a> can have <a href=#syntax-text id=elements-2:syntax-text-2>text</a> and <a href=#syntax-charref id=elements-2:syntax-charref>character references</a>, but the text must not contain an <a href=#syntax-ambiguous-ampersand id=elements-2: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 id=elements-2:foreign-elements-3>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 id=elements-2:foreign-elements-4>Foreign elements</a> whose start tag is <em>not</em> marked as self-closing can have <a href=#syntax-text id=elements-2:syntax-text-3>text</a>, <a href=#syntax-charref id=elements-2:syntax-charref-2>character references</a>, <a href=#syntax-cdata id=elements-2:syntax-cdata>CDATA sections</a>, other <a href=#syntax-elements id=elements-2:syntax-elements>elements</a>, and <a href=#syntax-comments id=elements-2:syntax-comments>comments</a>, but the text must not contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href=#syntax-ambiguous-ampersand id=elements-2:syntax-ambiguous-ampersand-2>ambiguous ampersand</a>.</p> <div class=note> <p>The HTML syntax does not support namespace declarations, even in <a href=#foreign-elements id=elements-2:foreign-elements-5>foreign elements</a>.</p> <p>For instance, consider the following