Update of /sources/public/html5/spec-preview In directory hutz:/tmp/cvs-serv13867/spec-preview Added Files: 2dcontext.html Overview.html acknowledgements.html association-of-controls-and-forms.html attributes-common-to-form-controls.html attributes-common-to-ins-and-del-elements.html attributes-common-to-td-and-th-elements.html browsers.html commands.html common-dom-interfaces.html common-input-element-apis.html common-input-element-attributes.html common-microsyntaxes.html constraints.html content-models.html converting-html-to-other-formats.html dimension-attributes.html dnd.html dom.html dynamic-markup-insertion.html editing-apis.html editing.html edits-and-lists.html edits-and-paragraphs.html edits.html element-definitions.html elements.html examples.html form-submission.html forms.html fragment-links.js global-attributes.html grouping-content.html headings-and-sections.html history.html iana.html image-maps.html index.html infrastructure.html interactions-with-xpath-and-xslt.html interactive-elements.html introduction.html links.html mathml.html media-elements.html named-character-references.html namespaces.html obsolete.html offline.html parsing.html references.html rendering.html requirements-relating-to-bidirectional-algorithm-formatting-characters.html scripting-1.html sections.html semantics.html spec.html states-of-the-type-attribute.html styling.html syntax.html system-state-and-capabilities.html tabular-data.html text-level-semantics.html textFieldSelection.html the-a-element.html the-abbr-element.html the-address-element.html the-area-element.html the-article-element.html the-aside-element.html the-audio-element.html the-b-element.html the-base-element.html the-bdi-element.html the-bdo-element.html the-blockquote-element.html the-body-element.html the-br-element.html the-button-element.html the-canvas-element.html the-caption-element.html the-cite-element.html the-code-element.html the-col-element.html the-colgroup-element.html the-command-element.html the-datalist-element.html the-dd-element.html the-del-element.html the-details-element.html the-dfn-element.html the-div-element.html the-dl-element.html the-dt-element.html the-em-element.html the-embed-element.html the-end.html the-fieldset-element.html the-figcaption-element.html the-figure-element.html the-footer-element.html the-form-element.html the-head-element.html the-header-element.html the-hgroup-element.html the-hr-element.html the-html-element.html the-i-element.html the-iframe-element.html the-img-element.html the-input-element.html the-ins-element.html the-kbd-element.html the-keygen-element.html the-label-element.html the-legend-element.html the-li-element.html the-link-element.html the-map-element.html the-mark-element.html the-menu-element.html the-meta-element.html the-meter-element.html the-nav-element.html the-noscript-element.html the-object-element.html the-ol-element.html the-optgroup-element.html the-option-element.html the-output-element.html the-p-element.html the-param-element.html the-pre-element.html the-progress-element.html the-q-element.html the-rp-element.html the-rt-element.html the-ruby-element.html the-s-element.html the-samp-element.html the-script-element.html the-section-element.html the-select-element.html the-small-element.html the-source-element.html the-span-element.html the-strong-element.html the-style-element.html the-sub-and-sup-elements.html the-summary-element.html the-table-element.html the-tbody-element.html the-td-element.html the-textarea-element.html the-tfoot-element.html the-th-element.html the-thead-element.html the-time-element.html the-title-element.html the-tr-element.html the-track-element.html the-u-element.html the-ul-element.html the-var-element.html the-video-element.html the-wbr-element.html the-xhtml-syntax.html timers.html tokenization.html urls.html usage-summary.html user-prompts.html wai-aria.html webappapis.html Log Message: Add a preview of the new build process --- NEW FILE: the-a-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.6.1 The a element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="text-level-semantics.html" title="4.6 Text-level semantics" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-em-element.html" title="4.6.2 The em element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="text-level-semantics.html">← 4.6 Text-level semantics</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-em-element.html">4.6.2 The em element →</a> </div> <h4 id="the-a-element"><span class="secno">4.6.1 </span>The <dfn><code>a</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd>When the element only contains <a href="content-models.html#phrasing-content-1">phrasing content</a>: <a href="content-models.html#phrasing-content-1">phrasing content</a>.</dd> <dd><a href="content-models.html#interactive-content-0">Interactive content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>When the element only contains <a href="content-models.html#phrasing-content-1">phrasing content</a>: where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dd>Otherwise: where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#transparent">Transparent</a>, but there must be no <a href="content-models.html#interactive-content-0">interactive content</a> descendant.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code></dd> <dd><code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code></dd> <!--DOWNLOAD--><!--PING--> <dd><code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code></dd> <dd><code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code></dd> <dd><code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code></dd> <dd><code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlanchorelement">HTMLAnchorElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { stringifier attribute DOMString <a href="#dom-a-href" title="dom-a-href">href</a>; attribute DOMString <a href="#dom-a-target" title="dom-a-target">target</a>; <!--DOWNLOAD--><!--PING--> attribute DOMString <a href="#dom-a-rel" title="dom-a-rel">rel</a>; readonly attribute <a href="infrastructure.html#domtokenlist">DOMTokenList</a> <a href="#dom-a-rellist" title="dom-a-relList">relList</a>; attribute DOMString <a href="#dom-a-media" title="dom-a-media">media</a>; attribute DOMString <a href="#dom-a-hreflang" title="dom-a-hreflang">hreflang</a>; attribute DOMString <a href="#dom-a-type" title="dom-a-type">type</a>; attribute DOMString <a href="#dom-a-text" title="dom-a-text">text</a>; // <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a> attribute DOMString <a href="#dom-a-protocol" title="dom-a-protocol">protocol</a>; attribute DOMString <a href="#dom-a-host" title="dom-a-host">host</a>; attribute DOMString <a href="#dom-a-hostname" title="dom-a-hostname">hostname</a>; attribute DOMString <a href="#dom-a-port" title="dom-a-port">port</a>; attribute DOMString <a href="#dom-a-pathname" title="dom-a-pathname">pathname</a>; attribute DOMString <a href="#dom-a-search" title="dom-a-search">search</a>; attribute DOMString <a href="#dom-a-hash" title="dom-a-hash">hash</a>; };</pre> </dd> </dl><!--TOPIC:HTML--><p>If the <code><a href="#the-a-element">a</a></code> element has an <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute, then it <a href="rendering.html#represents">represents</a> a <a href="links.html#hyperlink">hyperlink</a> (a hypertext anchor).</p> <!-- v2: Eric Meyer requests the ability to nest links so that a big hyperlink, e.g. representing a calendar event, can be clickable, while within it there are subareas that represent links to distinct areas, e.g. a link to see photos of the event, or to edit the event, or some such. --> <p>If the <code><a href="#the-a-element">a</a></code> element has no <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute, then the element <a href="rendering.html#represents">represents</a> a placeholder for where a link might otherwise have been placed, if it had been relevant.</p> <p>The <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code>, <!--DOWNLOAD--><!--PING--> <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>, <code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code> attributes must be omitted if the <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute is not present.</p> <!--MD--> <div class="example"> <p>If a site uses a consistent navigation toolbar on every page, then the link that would normally link to the page itself could be marked up using an <code><a href="#the-a-element">a</a></code> element:</p> <pre><nav> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/news">News</a> </li> <li> <a>Examples</a> </li> <li> <a href="/legal">Legal</a> </li> </ul> </nav></pre> </div> <div class="impl"> <p>The <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code>, <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code>, <!--DOWNLOAD--><!--PING--> attributes affect what happens when users <a href="links.html#following-hyperlinks-0" title="following hyperlinks">follow hyperlinks</a> <!--DOWNLOAD--> created using the <code><a href="#the-a-element">a</a></code> element. The <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>, <code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code> attributes may be used to indicate to the user the likely nature of the target resource before the user follows the link.</p> <p>The <a href="content-models.html#activation-behavior">activation behavior</a> of <code><a href="#the-a-element">a</a></code> elements that create <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> is to run the following steps:</p> <ol><li><p>If the algorithm is not <a href="browsers.html#allowed-to-show-a-pop-up">allowed to show a pop-up</a> and either the <code><a href="#the-a-element">a</a></code> <!--DOWNLOAD--> element's <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code> attribute is present and applying <a href="browsers.html#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name">the rules for choosing a browsing context given a browsing context name</a>, using the value of the <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code> attribute as the browsing context name, would result in there not being a chosen browsing context, then throw an <code><a href="infrastructure.html#invalidaccesserror">InvalidAccessError</a></code> exception and abort these steps.</p></li> <li><p>If the target of the <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event is an <code><a href="the-img-element.html#the-img-element">img</a></code> element with an <code title="attr-img-ismap"><a href="the-img-element.html#attr-img-ismap">ismap</a></code> attribute specified, then server-side image map processing must be performed, as follows:</p> <ol><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A...%3Ca%20href%3D%22%23%22%3E%3Cimg%20ismap%20usemap%3D%22%23a%22%20src%3D/resources/images/smallcats%3E%3C/a%3E%0A%3Cmap%20name%3Da%3E%3Carea%20shape%3Drect%20coords%3D0%2C0%2C50%2C50%20href%3Db%3E%3C/map%3E --><li>If the <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event was a real pointing-device-triggered <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event on the <code><a href="the-img-element.html#the-img-element">img</a></code> element, then let <var title="">x</var> be the distance in CSS pixels from the left edge of the image's left border, if it has one, or the left edge of the image otherwise, to the location of the click, and let <var title="">y</var> be the distance in CSS pixels from the top edge of the image's top border, if it has one, or the top edge of the image otherwise, to the location of the click. Otherwise, let <var title="">x</var> and <var title="">y</var> be zero.</li> <li>Let the <dfn id="hyperlink-suffix"><var>hyperlink suffix</var></dfn> be a U+003F QUESTION MARK character, the value of <var title="">x</var> expressed as a base-ten integer using ASCII digits, a "," (U+002C) character, and the value of <var title="">y</var> expressed as a base-ten integer using ASCII digits. ASCII digits are the characters in the range <a href="#ascii-digits">ASCII digits</a>.</li> </ol></li> <li><p>Finally, the user agent must <a href="links.html#following-hyperlinks-0" title="following hyperlinks">follow the hyperlink</a> <!--DOWNLOAD--> created by the <code><a href="#the-a-element">a</a></code> element, as determined by <!--DOWNLOAD--> any expressed user preference. If the steps above defined a <var><a href="#hyperlink-suffix">hyperlink suffix</a></var>, then take that into account when following or downloading the hyperlink.</p></li> </ol></div> <!--TOPIC:DOM APIs--> <dl class="domintro"><dt><var title="">a</var> . <code title="dom-a-text"><a href="#dom-a-text">text</a></code></dt> <dd> <p>Same as <code><a href="infrastructure.html#textcontent">textContent</a></code>.</p> </dd> </dl><div class="impl"> <p>The IDL attributes <dfn id="dom-a-href" title="dom-a-href"><code>href</code></dfn>, <!--DOWNLOAD--><!--PING--> <dfn id="dom-a-target" title="dom-a-target"><code>target</code></dfn>, <dfn id="dom-a-rel" title="dom-a-rel"><code>rel</code></dfn>, <dfn id="dom-a-media" title="dom-a-media"><code>media</code></dfn>, <dfn id="dom-a-hreflang" title="dom-a-hreflang"><code>hreflang</code></dfn>, and <dfn id="dom-a-type" title="dom-a-type"><code>type</code></dfn>, must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same name.</p> <p>The IDL attribute <dfn id="dom-a-rellist" title="dom-a-rellist"><code>relList</code></dfn> must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code> content attribute.</p> <p>The <dfn id="dom-a-text" title="dom-a-text"><code>text</code></dfn> IDL attribute, on getting, must return the same value as the <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute on the element, and on setting, must act as if the <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute on the element had been set to the new value.</p> <p>The <code><a href="#the-a-element">a</a></code> element also supports the complement of <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, <dfn id="dom-a-protocol" title="dom-a-protocol"><code>protocol</code></dfn>, <dfn id="dom-a-host" title="dom-a-host"><code>host</code></dfn>, <dfn id="dom-a-port" title="dom-a-port"><code>port</code></dfn>, <dfn id="dom-a-hostname" title="dom-a-hostname"><code>hostname</code></dfn>, <dfn id="dom-a-pathname" title="dom-a-pathname"><code>pathname</code></dfn>, <dfn id="dom-a-search" title="dom-a-search"><code>search</code></dfn>, and <dfn id="dom-a-hash" title="dom-a-hash"><code>hash</code></dfn>. These must follow the rules given for <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, with the <a href="urls.html#concept-uda-input" title="concept-uda-input">input</a> being the result of <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the element's <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute relative to the element, if there is such an attribute and resolving it is successful, or the empty string otherwise; and the <a href="urls.html#concept-uda-setter" title="concept-uda-setter">common setter action</a> being the same as setting the element's <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute to the new output value.</p> </div> <!--TOPIC:HTML--> <div class="example"> <p>The <code><a href="#the-a-element">a</a></code> element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:</p> <pre><aside class="advertising"> <h1>Advertising</h1> <a href="http://ad.example.com/?adid=1929&amp;pubid=1422"> <section> <h1>Mellblomatic 9000!</h1> <p>Turn all your widgets into mellbloms!</p> <p>Only $9.99 plus shipping and handling.</p> </section> </a> <a href="http://ad.example.com/?adid=375&amp;pubid=1422"> <section> <h1>The Mellblom Browser</h1> <p>Web browsing at the speed of light.</p> <p>No other browser goes faster!</p> </section> </a> </aside></pre> </div> </body></html> --- NEW FILE: the-img-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.8.1 The img element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } [...1882 lines suppressed...] conditions described above</a>.</li> <!-- the following are additional entries not included in the aforementioned list, as they apply only to conformance checkers --> <!--FORK--> <li>The document has a <code><a href="the-meta-element.html#the-meta-element">meta</a></code> element with a <code title="attr-meta-name"><a href="the-meta-element.html#attr-meta-name">name</a></code> attribute whose value is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="meta-generator"><a href="the-meta-element.html#meta-generator">generator</a></code>". (This case does not represent a case where the document is conforming, only that the generator could not determine appropriate alternative text — validators are required to not show an error in this case to discourage markup generators from including bogus alternative text purely in an attempt to silence validators.)</li> </ul></div> </body></html> --- NEW FILE: the-del-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.7.2 The del element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-ins-element.html" title="4.7.1 The ins element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="attributes-common-to-ins-and-del-elements.html" title="4.7.3 Attributes common to ins and del elements" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-ins-element.html">← 4.7.1 The ins element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="attributes-common-to-ins-and-del-elements.html">4.7.3 Attributes common to ins and del elements →</a> </div> <h4 id="the-del-element"><span class="secno">4.7.2 </span>The <dfn><code>del</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd>When the element only contains <a href="content-models.html#phrasing-content-1">phrasing content</a>: <a href="content-models.html#phrasing-content-1">phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>When the element only contains <a href="content-models.html#phrasing-content-1">phrasing content</a>: where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dd>Otherwise: where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#transparent">Transparent</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-mod-cite"><a href="attributes-common-to-ins-and-del-elements.html#attr-mod-cite">cite</a></code></dd> <dd><code title="attr-mod-datetime"><a href="attributes-common-to-ins-and-del-elements.html#attr-mod-datetime">datetime</a></code></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses the <code><a href="attributes-common-to-ins-and-del-elements.html#htmlmodelement">HTMLModElement</a></code> interface.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-del-element">del</a></code> element <a href="rendering.html#represents">represents</a> a removal from the document.</p> <p><code><a href="#the-del-element">del</a></code> elements should not cross <a href="content-models.html#paragraph" title="paragraph">implied paragraph</a> boundaries.</p> <div class="example"> <p>The following shows a "to do" list where items that have been done are crossed-off with the date and time of their completion.</p> <pre><h1>To Do</h1> <ul> <li>Empty the dishwasher</li> <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li> <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li> <li>Buy a printer</li> </ul></pre> </div> </body></html> --- NEW FILE: the-option-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.10.12 The option element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-optgroup-element.html" title="4.10.11 The optgroup element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-textarea-element.html" title="4.10.13 The textarea element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-optgroup-element.html">← 4.10.11 The optgroup element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-textarea-element.html">4.10.13 The textarea element →</a> </div> <h4 id="the-option-element"><span class="secno">4.10.12 </span>The <dfn><code>option</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd>None.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>As a child of a <code><a href="the-select-element.html#the-select-element">select</a></code> element.</dd> <dd>As a child of a <code><a href="the-datalist-element.html#the-datalist-element">datalist</a></code> element.</dd> <dd>As a child of an <code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a></code> element.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#text-content" title="text content">Text</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-option-disabled"><a href="#attr-option-disabled">disabled</a></code></dd> <dd><code title="attr-option-label"><a href="#attr-option-label">label</a></code></dd> <dd><code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code></dd> <dd><code title="attr-option-value"><a href="#attr-option-value">value</a></code></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">[NamedConstructor=<a href="#dom-option" title="dom-option">Option</a>(), NamedConstructor=<a href="#dom-option-t" title="dom-option-t">Option</a>(DOMString text), NamedConstructor=<a href="#dom-option-tv" title="dom-option-tv">Option</a>(DOMString text, DOMString value), NamedConstructor=<a href="#dom-option-tvd" title="dom-option-tvd">Option</a>(DOMString text, DOMString value, boolean defaultSelected), NamedConstructor=<a href="#dom-option-tvds" title="dom-option-tvds">Option</a>(DOMString text, DOMString value, boolean defaultSelected, boolean selected)] interface <dfn id="htmloptionelement">HTMLOptionElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute boolean <a href="#dom-option-disabled" title="dom-option-disabled">disabled</a>; readonly attribute <a href="the-form-element.html#htmlformelement">HTMLFormElement</a>? <a href="#dom-option-form" title="dom-option-form">form</a>; attribute DOMString <a href="#dom-option-label" title="dom-option-label">label</a>; attribute boolean <a href="#dom-option-defaultselected" title="dom-option-defaultSelected">defaultSelected</a>; attribute boolean <a href="#dom-option-selected" title="dom-option-selected">selected</a>; attribute DOMString <a href="#dom-option-value" title="dom-option-value">value</a>; attribute DOMString <a href="#dom-option-text" title="dom-option-text">text</a>; readonly attribute long <a href="#dom-option-index" title="dom-option-index">index</a>; };</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-option-element">option</a></code> element <a href="rendering.html#represents">represents</a> an option in a <code><a href="the-select-element.html#the-select-element">select</a></code> element or as part of a list of suggestions in a <code><a href="the-datalist-element.html#the-datalist-element">datalist</a></code> element.</p> <p>In certain circumstances described in the definition of the <code><a href="the-select-element.html#the-select-element">select</a></code> element, an <code><a href="#the-option-element">option</a></code> element can be a <code><a href="the-select-element.html#the-select-element">select</a></code> element's <a href="the-select-element.html#placeholder-label-option">placeholder label option</a>. A <a href="the-select-element.html#placeholder-label-option">placeholder label option</a> does not represent an actual option, but instead represents a label for the <code><a href="the-select-element.html#the-select-element">select</a></code> control.</p> <p>The <dfn id="attr-option-disabled" title="attr-option-disabled"><code>disabled</code></dfn> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. An <code><a href="#the-option-element">option</a></code> element is <dfn id="concept-option-disabled" title="concept-option-disabled">disabled</dfn> if its <code title="attr-option-disabled"><a href="#attr-option-disabled">disabled</a></code> attribute is present or if it is a child of an <code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a></code> element whose <code title="attr-optgroup-disabled"><a href="the-optgroup-element.html#attr-optgroup-disabled">disabled</a></code> attribute is present.</p> <div class="impl"> <p>An <code><a href="#the-option-element">option</a></code> element that is <a href="#attr-option-disabled" title="attr-option-disabled">disabled</a> must prevent any <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> events that are <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> on the <a href="webappapis.html#user-interaction-task-source">user interaction task source</a> from being dispatched on the element.</p> </div> <p>The <dfn id="attr-option-label" title="attr-option-label"><code>label</code></dfn> attribute provides a label for element. The <dfn id="concept-option-label" title="concept-option-label">label</dfn> of an <code><a href="#the-option-element">option</a></code> element is the value of the <code title="attr-option-label"><a href="#attr-option-label">label</a></code> content attribute, if there is one, or, if there is not, the value of the element's <code title="dom-option-text"><a href="#dom-option-text">text</a></code> IDL attribute.</p> <p>The <dfn id="attr-option-value" title="attr-option-value"><code>value</code></dfn> attribute provides a value for element. The <dfn id="concept-option-value" title="concept-option-value">value</dfn> of an <code><a href="#the-option-element">option</a></code> element is the value of the <code title="attr-option-value"><a href="#attr-option-value">value</a></code> content attribute, if there is one, or, if there is not, the value of the element's <code title="dom-option-text"><a href="#dom-option-text">text</a></code> IDL attribute.</p> <p>The <dfn id="attr-option-selected" title="attr-option-selected"><code>selected</code></dfn> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. It represents the default <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of the element.</p> <div class="impl"> <p>The <dfn id="concept-option-selectedness" title="concept-option-selectedness">selectedness</dfn> of an <code><a href="#the-option-element">option</a></code> element is a boolean state, initially false. Except where otherwise specified, when the element is created, its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> must be set to true if the element has a <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute. Whenever an <code><a href="#the-option-element">option</a></code> element's <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute is added, its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> must be set to true.</p> <p class="note">The <code title="dom-option-tvd"><a href="#dom-option-tvd">Option()</a></code> constructor with three or fewer arguments overrides the initial state of the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> state to always be false even if the third argument is true (implying that a <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute is to be set). The fourth argument can be used to explicitly set the initial <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> state when using the constructor.</p> <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/604 --> </div> <p>A <code><a href="the-select-element.html#the-select-element">select</a></code> element whose <code title="attr-select-multiple"><a href="the-select-element.html#attr-select-multiple">multiple</a></code> attribute is not specified must not have more than one descendant <code><a href="#the-option-element">option</a></code> element with its <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute set.</p> <div class="impl"> <p>An <code><a href="#the-option-element">option</a></code> element's <dfn id="concept-option-index" title="concept-option-index">index</dfn> is the number of <code><a href="#the-option-element">option</a></code> element that are in the same <a href="the-select-element.html#concept-select-option-list" title="concept-select-option-list">list of options</a> but that come before it in <a href="infrastructure.html#tree-order">tree order</a>. If the <code><a href="#the-option-element">option</a></code> element is not in a <a href="the-select-element.html#concept-select-option-list" title="concept-select-option-list">list of options</a>, then the <code><a href="#the-option-element">option</a></code> element's <a href="#concept-option-index" title="concept-option-index">index</a> is zero.</p> </div> <!--TOPIC:DOM APIs--> <dl class="domintro"><dt><var title="">option</var> . <code title="dom-option-selected"><a href="#dom-option-selected">selected</a></code></dt> <dd> <p>Returns true if the element is selected, and false otherwise.</p> <p>Can be set, to override the current state of the element.</p> </dd> <dt><var title="">option</var> . <code title="dom-option-index"><a href="#dom-option-index">index</a></code></dt> <dd> <p>Returns the index of the element in its <code><a href="the-select-element.html#the-select-element">select</a></code> element's <code title="dom-select-options"><a href="the-select-element.html#dom-select-options">options</a></code> list.</p> </dd> <dt><var title="">option</var> . <code title="dom-option-form"><a href="#dom-option-form">form</a></code></dt> <dd> <p>Returns the element's <code><a href="the-form-element.html#the-form-element">form</a></code> element, if any, or null otherwise.</p> </dd> <dt><var title="">option</var> . <code title="dom-option-text"><a href="#dom-option-text">text</a></code></dt> <dd> <p>Same as <code><a href="infrastructure.html#textcontent">textContent</a></code>, except that spaces are collapsed.</p> </dd> <dt><var title="">option</var> = new <code title="dom-option"><a href="#dom-option">Option</a></code>( [ <var title="">text</var> [, <var title="">value</var> [, <var title="">defaultSelected</var> [, <var title="">selected</var> ] ] ] ] )</dt> <dd> <p>Returns a new <code><a href="#the-option-element">option</a></code> element.</p> <p>The <var title="">text</var> argument sets the contents of the element.</p> <p>The <var title="">value</var> argument sets the <code title="attr-option-value"><a href="#attr-option-value">value</a></code> attribute.</p> <p>The <var title="">defaultSelected</var> argument sets the <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute.</p> <p>The <var title="">selected</var> argument sets whether or not the element is selected. If it is omitted, even if the <var title="">defaultSelected</var> argument is true, the element is not selected.</p> </dd> </dl><div class="impl"> <p>The <dfn id="dom-option-disabled" title="dom-option-disabled"><code>disabled</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name. The <dfn id="dom-option-defaultselected" title="dom-option-defaultSelected"><code>defaultSelected</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> content attribute.</p> <p>The <dfn id="dom-option-label" title="dom-option-label"><code>label</code></dfn> IDL attribute, on getting, must return the element's <a href="#concept-option-label" title="concept-option-label">label</a>. On setting, the element's <code title="attr-option-label"><a href="#attr-option-label">label</a></code> content attribute must be set to the new value.</p> <p>The <dfn id="dom-option-value" title="dom-option-value"><code>value</code></dfn> IDL attribute, on getting, must return the element's <a href="#concept-option-value" title="concept-option-value">value</a>. On setting, the element's <code title="attr-option-value"><a href="#attr-option-value">value</a></code> content attribute must be set to the new value.</p> <p>The <dfn id="dom-option-selected" title="dom-option-selected"><code>selected</code></dfn> IDL attribute, on getting, must return true if the element's <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, and false otherwise. On setting, it must set the element's <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> to the new value.</p> <p>The <dfn id="dom-option-index" title="dom-option-index"><code>index</code></dfn> IDL attribute must return the element's <a href="#concept-option-index" title="concept-option-index">index</a>.</p> <p>The <dfn id="dom-option-text" title="dom-option-text"><code>text</code></dfn> IDL attribute, on getting, must return the value of the <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute on the element, with <a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace" title="strip leading and trailing whitespace">leading and trailing whitespace stripped</a>, and with any sequences of two or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a> replaced by a single U+0020 SPACE character. On setting, it must act as if the <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute on the element had been set to the new value.</p> <p>The <dfn id="dom-option-form" title="dom-option-form"><code>form</code></dfn> IDL attribute's behavior depends on whether the <code><a href="#the-option-element">option</a></code> element is in a <code><a href="the-select-element.html#the-select-element">select</a></code> element or not. If the <code><a href="#the-option-element">option</a></code> has a <code><a href="the-select-element.html#the-select-element">select</a></code> element as its parent, or has an <code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a></code> element as its parent and that <code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a></code> element has a <code><a href="the-select-element.html#the-select-element">select</a></code> element as its parent, then the <code title="dom-option-form"><a href="#dom-option-form">form</a></code> IDL attribute must return the same value as the <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute on that <code><a href="the-select-element.html#the-select-element">select</a></code> element. Otherwise, it must return null.</p> <p>Several constructors are provided for creating <code><a href="#htmloptionelement">HTMLOptionElement</a></code> objects (in addition to the factory methods from DOM Core such as <code title="">createElement()</code>): <dfn id="dom-option" title="dom-option"><code>Option()</code></dfn>, <dfn id="dom-option-t" title="dom-option-t"><code>Option(<var title="">text</var>)</code></dfn>, <dfn id="dom-option-tv" title="dom-option-tv"><code>Option(<var title="">text</var>, <var title="">value</var>)</code></dfn>, <dfn id="dom-option-tvd" title="dom-option-tvd"><code>Option(<var title="">text</var>, <var title="">value</var>, <var title="">defaultSelected</var>)</code></dfn>, and <dfn id="dom-option-tvds" title="dom-option-tvds"><code>Option(<var title="">text</var>, <var title="">value</var>, <var title="">defaultSelected</var>, <var title="">selected</var>)</code></dfn>. When invoked as constructors, these must return a new <code><a href="#htmloptionelement">HTMLOptionElement</a></code> object (a new <code><a href="#the-option-element">option</a></code> element). If the <var title="">text</var> argument is present, the new object must have as its only child a <code><a href="infrastructure.html#text-0">Text</a></code> node whose data is the value of that argument. If the <var title="">value</var> argument is present, the new object must have a <code title="attr-option-value"><a href="#attr-option-value">value</a></code> attribute set with the value of the argument as its value. If the <var title="">defaultSelected</var> argument is present and true, the new object must have a <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute set with no value. If the <var title="">selected</var> argument is present and true, the new object must have its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true; otherwise the fourth argument is absent or false, and the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> must be set to false, even if the <var title="">defaultSelected</var> argument is present and true. The element's document must be the <a href="browsers.html#active-document">active document</a> of the <a href="browsers.html#browsing-context">browsing context</a> of the <code><a href="browsers.html#window">Window</a></code> object on which the interface object of the invoked constructor is found.</p> </div> <!--TOPIC:HTML--> </body></html> --- NEW FILE: the-figcaption-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.5.12 The figcaption element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-figure-element.html" title="4.5.11 The figure element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-div-element.html" title="4.5.13 The div element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-figure-element.html">← 4.5.11 The figure element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-div-element.html">4.5.13 The div element →</a> </div> <h4 id="the-figcaption-element"><span class="secno">4.5.12 </span>The <dfn><code>figcaption</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd>None.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>As the first or last child of a <code><a href="the-figure-element.html#the-figure-element">figure</a></code> element.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-figcaption-element">figcaption</a></code> element <a href="rendering.html#represents">represents</a> a caption or legend for the rest of the contents of the <code><a href="#the-figcaption-element">figcaption</a></code> element's parent <code><a href="the-figure-element.html#the-figure-element">figure</a></code> element<span class="impl">, if any</span>.</p> </body></html> --- NEW FILE: the-hr-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.5.2 The hr element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-p-element.html" title="4.5.1 The p element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-pre-element.html" title="4.5.3 The pre element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-p-element.html">← 4.5.1 The p element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-pre-element.html">4.5.3 The pre element →</a> </div> <h4 id="the-hr-element"><span class="secno">4.5.2 </span>The <dfn><code>hr</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd>Empty.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlhrelement">HTMLHRElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-hr-element">hr</a></code> element <a href="rendering.html#represents">represents</a> a <a href="content-models.html#paragraph">paragraph</a>-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.</p> <div class="example"> <p>The following fictional extract from a project manual shows two sections that use the <code><a href="#the-hr-element">hr</a></code> element to separate topics within the section.</p> <pre><section> <h1>Communication</h1> <p>There are various methods of communication. This section covers a few of the important ones used by the project.</p> <strong><a href="#the-hr-element"><hr></a></strong> <p>Communication stones seem to come in pairs and have mysterious properties:</p> <ul> <li>They can transfer thoughts in two directions once activated if used alone.</li> <li>If used with another device, they can transfer one's consciousness to another body.</li> <li>If both stones are used with another device, the consciousnesses switch bodies.</li> </ul> <strong><a href="#the-hr-element"><hr></a></strong> <p>Radios use the electromagnetic spectrum in the meter range and longer.</p> <strong><a href="#the-hr-element"><hr></a></strong> <p>Signal flares use the electromagnetic spectrum in the nanometer range.</p> </section> <section> <h1>Food</h1> <p>All food at the project is rationed:</p> <dl> <dt>Potatoes</dt> <dd>Two per day</dd> <dt>Soup</dt> <dd>One bowl per day</dd> </dl> <strong><a href="#the-hr-element"><hr></a></strong> <p>Cooking is done by the chefs on a set rotation.</p> </section></pre> <p>There is no need for an <code><a href="#the-hr-element">hr</a></code> element between the sections themselves, since the <code><a href="the-section-element.html#the-section-element">section</a></code> elements and the <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code> elements imply thematic changes themselves.</p> </div> <div class="example"> <p>The following extract from <cite>Pandora's Star</cite> by Peter F. Hamilton shows two paragraphs that precede a scene change and the paragraph that follows it. The scene change, represented in the printed book by a gap containing a solitary centered star between the second and third paragraphs, is here represented using the <code><a href="#the-hr-element">hr</a></code> element.</p> <!-- ISBN 1-4050-0020-1; bottom of page 14 --> <pre lang="en-GB"><p>Dudley was ninety-two, in his second life, and fast approaching time for another rejuvenation. Despite his body having the physical age of a standard fifty-year-old, the prospect of a long degrading campaign within academia was one he regarded with dread. For a supposedly advanced civilization, the Intersolar Commonwealth could be appallingly backward at times, not to mention cruel.</p> <p><i>Maybe it won't be that bad</i>, he told himself. The lie was comforting enough to get him through the rest of the night's shift.</p> <strong><a href="#the-hr-element"><hr></a></strong> <p>The Carlton AllLander drove Dudley home just after dawn. Like the astronomer, the vehicle was old and worn, but perfectly capable of doing its job. It had a cheap diesel engine, common enough on a semi-frontier world like Gralmond, although its drive array was a thoroughly modern photoneural processor. With its high suspension and deep-tread tyres it could plough along the dirt track to the observatory in all weather and seasons, including the metre-deep snow of Gralmond's winters.</p></pre> </div> <p class="note">The <code><a href="#the-hr-element">hr</a></code> element does not affect the document's <a href="headings-and-sections.html#outline">outline</a>.</p> </body></html> --- NEW FILE: the-summary-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.11.2 The summary element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-details-element.html" title="4.11.1 The details element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-command-element.html" title="4.11.3 The command element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-details-element.html">← 4.11.1 The details element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-command-element.html">4.11.3 The command element →</a> </div> <h4 id="the-summary-element"><span class="secno">4.11.2 </span>The <dfn><code>summary</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd>None.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>As the first child of a <code><a href="the-details-element.html#the-details-element">details</a></code> element.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-summary-element">summary</a></code> element <a href="rendering.html#represents">represents</a> a summary, caption, or legend for the rest of the contents of the <code><a href="#the-summary-element">summary</a></code> element's parent <code><a href="the-details-element.html#the-details-element">details</a></code> element<span class="impl">, if any</span>.</p> </body></html> --- NEW FILE: the-small-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.6.4 The small element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-strong-element.html" title="4.6.3 The strong element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-s-element.html" title="4.6.5 The s element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-strong-element.html">← 4.6.3 The strong element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-s-element.html">4.6.5 The s element →</a> </div> <h4 id="the-small-element"><span class="secno">4.6.4 </span>The <dfn><code>small</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-small-element">small</a></code> element <a href="rendering.html#represents">represents</a> side comments such as small print.</p> <p class="note">Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.</p> <p class="note">The <code><a href="#the-small-element">small</a></code> element does not "de-emphasize" or lower the importance of text emphasized by the <code><a href="the-em-element.html#the-em-element">em</a></code> element or marked as important with the <code><a href="the-strong-element.html#the-strong-element">strong</a></code> element. To mark text as not emphasized or important, simply do not mark it up with the <code><a href="the-em-element.html#the-em-element">em</a></code> or <code><a href="the-strong-element.html#the-strong-element">strong</a></code> elements respectively.</p> <p>The <code><a href="#the-small-element">small</a></code> element should not be used for extended spans of text, such as multiple paragraphs, lists, or sections of text. It is only intended for short runs of text. The text of a page listing terms of use, for instance, would not be a suitable candidate for the <code><a href="#the-small-element">small</a></code> element: in such a case, the text is not a side comment, it is the main content of the page.</p> <div class="example"> <p>In this example, the <code><a href="#the-small-element">small</a></code> element is used to indicate that value-added tax is not included in a price of a hotel room:</p> <pre class="example"><dl> <dt>Single room <dd>199 € <small>breakfast included, VAT not included</small> <dt>Double room <dd>239 € <small>breakfast included, VAT not included</small> </dl></pre> </div> <div class="example"> <p>In this second example, the <code><a href="#the-small-element">small</a></code> element is used for a side comment in an article.</p> <pre><p>Example Corp today announced record profits for the second quarter <small>(Full Disclosure: Foo News is a subsidiary of Example Corp)</small>, leading to speculation about a third quarter merger with Demo Group.</p></pre> <p>This is distinct from a sidebar, which might be multiple paragraphs long and is removed from the main flow of text. In the following example, we see a sidebar from the same article. This sidebar also has small print, indicating the source of the information in the sidebar.</p> <pre><aside> <h1>Example Corp</h1> <p>This company mostly creates small software and Web sites.</p> <p>The Example Corp company mission is "To provide entertainment and news on a sample basis".</p> <p><small>Information obtained from <a href="http://example.com/about.html">example.com</a> home page.</small></p> </aside></pre> </div> <div class="example"> <p>In this last example, the <code><a href="#the-small-element">small</a></code> element is marked as being <em>important</em> small print.</p> <pre><p><strong><small>Continued use of this service will result in a kiss.</small></strong></p></pre> </div> </body></html> --- NEW FILE: the-kbd-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.6.14 The kbd element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-samp-element.html" title="4.6.13 The samp element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-sub-and-sup-elements.html" title="4.6.15 The sub and sup elements" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-samp-element.html">← 4.6.13 The samp element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-sub-and-sup-elements.html">4.6.15 The sub and sup elements →</a> </div> <h4 id="the-kbd-element"><span class="secno">4.6.14 </span>The <dfn><code>kbd</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-kbd-element">kbd</a></code> element <a href="rendering.html#represents">represents</a> user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).</p> <p>When the <code><a href="#the-kbd-element">kbd</a></code> element is nested inside a <code><a href="the-samp-element.html#the-samp-element">samp</a></code> element, it represents the input as it was echoed by the system.</p> <p>When the <code><a href="#the-kbd-element">kbd</a></code> element <em>contains</em> a <code><a href="the-samp-element.html#the-samp-element">samp</a></code> element, it represents input based on system output, for example invoking a menu item.</p> <p>When the <code><a href="#the-kbd-element">kbd</a></code> element is nested inside another <code><a href="#the-kbd-element">kbd</a></code> element, it represents an actual key or other single unit of input as appropriate for the input mechanism.</p> <div class="example"> <p>Here the <code><a href="#the-kbd-element">kbd</a></code> element is used to indicate keys to press:</p> <pre><p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p></pre> <p>In this second example, the user is told to pick a particular menu item. The outer <code><a href="#the-kbd-element">kbd</a></code> element marks up a block of input, with the inner <code><a href="#the-kbd-element">kbd</a></code> elements representing each individual step of the input, and the <code><a href="the-samp-element.html#the-samp-element">samp</a></code> elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:</p> <pre><p>To make George eat an apple, select <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd> </p></pre> <p>Such precision isn't necessary; the following is equally fine:</p> <pre><p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p></pre> </div> </body></html> --- NEW FILE: Overview.html --- <!DOCTYPE html><html lang=en-US-x-Hixie><head><title>HTML5</title><style type=text/css> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } [...90266 lines suppressed...] ("<code title="">foo</code>" vs <code>foo</code>) v2 * make the spec consistent about whether the word "algorithm" is part of an algorithm's name or not ("</dfn> algorithm", "</span> algorithm") v2 * make the spec more consistent about its use of "hexadecimal" and "base-sixteen", the order that 0-9 A-Z a-z is mentioned, and the detail to which the spec explains how to interpret a string as a hexadecimal number. v2 * become more consistent about what markup we use to mark up productions (nothing? <i>? <code>?) v2 * use <code>Document</code> consistently instead of 'document'. v2 * be clearer about arrays/lists/collections being zero-based despite using the term "/index/th". v2 * use the sample widgets: <li><img alt="A text field with editable sections for each value, with a button to pop up a dialog showing a calendar or clock." src="sample-datetime-ui-2"></li> <li><img alt="A calendar grid with a clock in the upper right hand corner." src="sample-datetime-ui-3"></li> --> </body></html> --- NEW FILE: the-end.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>8.2.6 The end — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } [...1233 lines suppressed...] <li> <p>If there is a <var title="concept-frag-parse-context"><a href="#concept-frag-parse-context">context</a></var> element, return the child nodes of <var title="">root</var>, in <a href="infrastructure.html#tree-order">tree order</a>.</p> <p>Otherwise, return the children of the <code><a href="dom.html#document">Document</a></code> object, in <a href="infrastructure.html#tree-order">tree order</a>.</p> </li> </ol><p class="note">This algorithm is invoked without a <var title="concept-frag-parse-context"><a href="#concept-frag-parse-context">context</a></var> element in the case of <code title="dom-Document-innerHTML">Document.innerHTML</code>.</p> </div> </body></html> --- NEW FILE: parsing.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>8.2 Parsing HTML documents — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } [...1708 lines suppressed...] <h5 id="other-parsing-state-flags"><span class="secno">8.2.3.5 </span>Other parsing state flags</h5> <p>The <dfn id="scripting-flag">scripting flag</dfn> is set to "enabled" if <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting was enabled</a> for the <code><a href="dom.html#document">Document</a></code> with which the parser is associated when the parser was created, and "disabled" otherwise.</p> <p class="note">The <a href="#scripting-flag">scripting flag</a> can be enabled even when the parser was originally created for the <a href="the-end.html#html-fragment-parsing-algorithm">HTML fragment parsing algorithm</a>, even though <code><a href="the-script-element.html#the-script-element">script</a></code> elements don't execute in that case.</p> <p>The <dfn id="frameset-ok-flag">frameset-ok flag</dfn> is set to "ok" when the parser is created. It is set to "not ok" after certain tokens are seen.</p> </div> </body></html> --- NEW FILE: the-span-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.6.25 The span element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-bdo-element.html" title="4.6.24 The bdo element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-br-element.html" title="4.6.26 The br element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-bdo-element.html">← 4.6.24 The bdo element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-br-element.html">4.6.26 The br element →</a> </div> <h4 id="the-span-element"><span class="secno">4.6.25 </span>The <dfn><code>span</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlspanelement">HTMLSpanElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-span-element">span</a></code> element doesn't mean anything on its own, but can be useful when used together with the <a href="global-attributes.html#global-attributes">global attributes</a>, e.g. <code title="attr-class"><a href="global-attributes.html#classes">class</a></code>, <code title="attr-lang"><a href="global-attributes.html#attr-lang">lang</a></code>, or <code title="attr-dir"><a href="global-attributes.html#the-dir-attribute">dir</a></code>. It <a href="rendering.html#represents">represents</a> its children.</p> <div class="example"> <p>In this example, a code fragment is marked up using <code><a href="#the-span-element">span</a></code> elements and <code title="attr-class"><a href="global-attributes.html#classes">class</a></code> attributes so that its keywords and identifiers can be color-coded from CSS:</p> <!-- extract from http://www.cs.cmu.edu/~dst/DeCSS/Gallery/vlc-dvd_css-c.txt --> <pre><pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) { <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17); <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff; <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>) <span class="keyword">break</span>; }</code></pre></pre> </div> </body></html> --- NEW FILE: the-fieldset-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.10.4 The fieldset element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-form-element.html" title="4.10.3 The form element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-legend-element.html" title="4.10.5 The legend element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-form-element.html">← 4.10.3 The form element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-legend-element.html">4.10.5 The legend element →</a> </div> <h4 id="the-fieldset-element"><span class="secno">4.10.4 </span>The <dfn><code>fieldset</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="headings-and-sections.html#sectioning-root">Sectioning root</a>.</dd> <dd><a href="forms.html#category-listed" title="category-listed">Listed</a> <a href="forms.html#form-associated-element">form-associated element</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd>Optionally a <code><a href="the-legend-element.html#the-legend-element">legend</a></code> element, followed by <a href="content-models.html#flow-content-1">flow content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-fieldset-disabled"><a href="#attr-fieldset-disabled">disabled</a></code></dd> <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd> <dd><code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlfieldsetelement">HTMLFieldSetElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute boolean <a href="#dom-fieldset-disabled" title="dom-fieldset-disabled">disabled</a>; readonly attribute <a href="the-form-element.html#htmlformelement">HTMLFormElement</a>? <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>; attribute DOMString <a href="attributes-common-to-form-controls.html#dom-fe-name" title="dom-fe-name">name</a>; readonly attribute DOMString <a href="#dom-fieldset-type" title="dom-fieldset-type">type</a>; readonly attribute <a href="common-dom-interfaces.html#htmlformcontrolscollection-0">HTMLFormControlsCollection</a> <a href="#dom-fieldset-elements" title="dom-fieldset-elements">elements</a>; readonly attribute boolean <a href="constraints.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>; readonly attribute <a href="constraints.html#validitystate">ValidityState</a> <a href="constraints.html#dom-cva-validity" title="dom-cva-validity">validity</a>; readonly attribute DOMString <a href="constraints.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>; boolean <a href="constraints.html#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>(); void <a href="constraints.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error); };</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-fieldset-element">fieldset</a></code> element <a href="rendering.html#represents">represents</a> a set of form controls optionally grouped under a common name.</p> <p>The name of the group is given by the first <code><a href="the-legend-element.html#the-legend-element">legend</a></code> element that is a child of the <code><a href="#the-fieldset-element">fieldset</a></code> element, if any. The remainder of the descendants form the group.</p> <p>The <dfn id="attr-fieldset-disabled" title="attr-fieldset-disabled"><code>disabled</code></dfn> attribute, when specified, causes all the form control descendants of the <code><a href="#the-fieldset-element">fieldset</a></code> element, excluding those that are descendants of the <code><a href="#the-fieldset-element">fieldset</a></code> element's first <code><a href="the-legend-element.html#the-legend-element">legend</a></code> element child, if any, to be <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>.</p> <p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to explicitly associate the <code><a href="#the-fieldset-element">fieldset</a></code> element with its <a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code> attribute represents the element's name.</p> <!--TOPIC:DOM APIs--> <dl class="domintro"><dt><var title="">fieldset</var> . <code title="dom-fieldset-type"><a href="#dom-fieldset-type">type</a></code></dt> <dd> <p>Returns the string "fieldset".</p> </dd> <dt><var title="">fieldset</var> . <code title="dom-form-elements"><a href="the-form-element.html#dom-form-elements">elements</a></code></dt> <dd> <p>Returns an <code><a href="common-dom-interfaces.html#htmlformcontrolscollection-0">HTMLFormControlsCollection</a></code> of the form controls in the element.</p> </dd> </dl><div class="impl"> <p>The <dfn id="dom-fieldset-disabled" title="dom-fieldset-disabled"><code>disabled</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name.</p> <p>The <dfn id="dom-fieldset-type" title="dom-fieldset-type"><code>type</code></dfn> IDL attribute must return the string "<code title="">fieldset</code>".</p> <p>The <dfn id="dom-fieldset-elements" title="dom-fieldset-elements"><code>elements</code></dfn> IDL attribute must return an <code><a href="common-dom-interfaces.html#htmlformcontrolscollection-0">HTMLFormControlsCollection</a></code> rooted at the <code><a href="#the-fieldset-element">fieldset</a></code> element, whose filter matches <a href="forms.html#category-listed" title="category-listed">listed elements</a>.</p> <p>The <code title="dom-cva-willValidate"><a href="constraints.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="constraints.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="constraints.html#dom-cva-validationmessage">validationMessage</a></code> attributes, and the <code title="dom-cva-checkValidatity"><a href="constraints.html#dom-cva-checkvalidatity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="constraints.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code> methods, are part of the <a href="constraints.html#the-constraint-validation-api">constraint validation API</a>. The <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> and <code title="dom-fe-name"><a href="attributes-common-to-form-controls.html#dom-fe-name">name</a></code> IDL attributes are part of the element's forms API.</p> </div> <!--TOPIC:HTML--> <div class="example"> <p>This example shows a <code><a href="#the-fieldset-element">fieldset</a></code> element being used to group a set of related controls:</p> <pre><fieldset> <legend>Display</legend> <p><label><input type=radio name=c value=0 checked> Black on White</label> <p><label><input type=radio name=c value=1> White on Black</label> <p><label><input type=checkbox name=g> Use grayscale</label> <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label> <datalist id=contrast> <option label=Normal value=0> <option label=Maximum value=100> </datalist> </fieldset></pre> </div> <div class="example"> <p>The following snippet shows a fieldset with a checkbox in the legend that controls whether or not the fieldset is enabled. The contents of the fieldset consist of two required text fields and an optional year/month control.</p> <pre><fieldset name="clubfields" disabled> <legend> <label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <p><label>Name on card: <input name=clubname required></label></p> <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p> <p><label>Expiry date: <input name=clubexp type=month></label></p> </fieldset></pre> </div> <div class="example"> <p>You can also nest <code><a href="#the-fieldset-element">fieldset</a></code> elements. Here is an example expanding on the previous one that does so:</p> <pre><fieldset name="clubfields" disabled> <legend> <label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <p><label>Name on card: <input name=clubname required></label></p> <fieldset name="numfields"> <legend> <label> <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked"> My card has numbers on it </label> </legend> <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p> </fieldset> <fieldset name="letfields" disabled> <legend> <label> <input type=radio name=clubtype onchange="form.letfields.disabled = !checked"> My card has letters on it </label> </legend> <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p> </fieldset> </fieldset></pre> <p>In this example, if the outer "Use Club Card" checkbox is not checked, everything inside the outer <code><a href="#the-fieldset-element">fieldset</a></code>, including the two radio buttons in the legends of the two nested <code><a href="#the-fieldset-element">fieldset</a></code>s, will be disabled. However, if the checkbox is checked, then the radio buttons will both be enabled and will let you select which of the two inner <code><a href="#the-fieldset-element">fieldset</a></code>s is to be enabled.</p> </div> </body></html> --- NEW FILE: the-figure-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.5.11 The figure element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-dd-element.html" title="4.5.10 The dd element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-figcaption-element.html" title="4.5.12 The figcaption element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-dd-element.html">← 4.5.10 The dd element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-figcaption-element.html">4.5.12 The figcaption element →</a> </div> <h4 id="the-figure-element"><span class="secno">4.5.11 </span>The <dfn><code>figure</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="headings-and-sections.html#sectioning-root">Sectioning root</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd>Either: One <code><a href="the-figcaption-element.html#the-figcaption-element">figcaption</a></code> element followed by <a href="content-models.html#flow-content-1">flow content</a>.</dd> <dd>Or: <a href="content-models.html#flow-content-1">Flow content</a> followed by one <code><a href="the-figcaption-element.html#the-figcaption-element">figcaption</a></code> element.</dd> <dd>Or: <a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><!-- v2: Add a <credit> element for photo credits --><p>The <code><a href="#the-figure-element">figure</a></code> element <a href="rendering.html#represents">represents</a> some <a href="content-models.html#flow-content-1">flow content</a>, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.</p> <p>The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.</p> <p>The <span class="impl">first</span> <code><a href="the-figcaption-element.html#the-figcaption-element">figcaption</a></code> element child of the element, if any, represents the caption of the <code><a href="#the-figure-element">figure</a></code> element's contents. If there is no child <code><a href="the-figcaption-element.html#the-figcaption-element">figcaption</a></code> element, then there is no caption.</p> <div class="example"> <p>This example shows the <code><a href="#the-figure-element">figure</a></code> element to mark up a code listing.</p> <pre><p>In <a href="#l4">listing 4</a> we see the primary core interface API declaration.</p> <figure id="l4"> <figcaption>Listing 4. The primary core interface API declaration.</figcaption> <pre><code>interface PrimaryCore { boolean verifyDataLine(); void sendData(in sequence&lt;byte> data); void initSelfDestruct(); }</code></pre> </figure> <p>The API is designed to use UTF-8.</p></pre> </div> <div class="example"> <p>Here we see a <code><a href="#the-figure-element">figure</a></code> element to mark up a photo.</p> <pre><figure> <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently."> <figcaption>Bubbles at work</figcaption> </figure></pre> </div> <div class="example"> <p>In this example, we see an image that is <em>not</em> a figure, as well as an image and a video that are.</p> <pre><h2>Malinko's comics</h2> <p>This case centered on some sort of "intellectual property" infringement related to a comic (see Exhibit A). The suit started after a trailer ending with these words: <blockquote> <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!"> </blockquote> <p>...was aired. A lawyer, armed with a Bigger Notebook, launched a preemptive strike using snowballs. A complete copy of the trailer is included with Exhibit B. <figure> <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper."> <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption> </figure> <figure> <video src="ex-b.mov"></video> <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption> </figure> <p>The case was resolved out of court.</pre> </div> <div class="example"> <p>Here, a part of a poem is marked up using <code><a href="#the-figure-element">figure</a></code>.</p> <pre><figure> <p>'Twas brillig, and the slithy toves<br> Did gyre and gimble in the wabe;<br> All mimsy were the borogoves,<br> And the mome raths outgrabe.</p> <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption> </figure></pre> </div> <div class="example"> <p>In this example, which could be part of a much larger work discussing a castle, nested <code><a href="#the-figure-element">figure</a></code> elements are used to provide both a group caption and individual captions for each figure in the group:</p> <pre><figure> <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption> <figure> <figcaption>Etching. Anonymous, ca. 1423.</figcaption> <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it."> </figure> <figure> <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption> <img src="castle1858.jpeg" alt="The castle now has two towers and two walls."> </figure> <figure> <figcaption>Film photograph. Peter Jankle, 1999.</figcaption> <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece."> </figure> </figure></pre> </div> <!--FORK--><!--TITLE--> </body></html> --- NEW FILE: the-script-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.3.1 The script element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } [...1410 lines suppressed...] <a href="#parser-inserted">"parser-inserted"</a>, though, such that their <code title="dom-script-async"><a href="#dom-script-async">async</a></code> IDL attribute will return false in the absence of an <code title="attr-script-async"><a href="#attr-script-async">async</a></code> content attribute.</p></li> <li><p>The <code title="dom-XSLTProcessor-transformToFragment">XSLTProcessor.transformToFragment()</code> method needs to create a fragment that is equivalent to one built manually by creating the elements using <code title="dom-document-createElementNS"><a href="infrastructure.html#dom-document-createelementns">document.createElementNS()</a></code>. For instance, it needs to create <code><a href="#the-script-element">script</a></code> elements that aren't <a href="#parser-inserted">"parser-inserted"</a> and that don't have their <a href="#already-started">"already started"</a> flag set, so that they will execute when the fragment is inserted into a document.</p></li> </ul><p>The main distinction between the first two cases and the last case is that the first two operate on <code><a href="dom.html#document">Document</a></code>s and the last operates on a fragment.</p> </div> </body></html> --- NEW FILE: the-input-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.10.7 The input element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } [...1687 lines suppressed...] of the same name.</p> <p>The <code title="dom-cva-willValidate"><a href="constraints.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="constraints.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="constraints.html#dom-cva-validationmessage">validationMessage</a></code> attributes, and the <code title="dom-cva-checkValidatity"><a href="constraints.html#dom-cva-checkvalidatity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="constraints.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code> methods, are part of the <a href="constraints.html#the-constraint-validation-api">constraint validation API</a>. The <code title="dom-lfe-labels"><a href="the-label-element.html#dom-lfe-labels">labels</a></code> attribute provides a list of the element's <code><a href="the-label-element.html#the-label-element">label</a></code>s. The <code title="dom-textarea/input-select"><a href="textFieldSelection.html#dom-textarea/input-select">select()</a></code>, <code title="dom-textarea/input-selectionStart"><a href="textFieldSelection.html#dom-textarea/input-selectionstart">selectionStart</a></code>, <code title="dom-textarea/input-selectionEnd"><a href="textFieldSelection.html#dom-textarea/input-selectionend">selectionEnd</a></code>, <code title="dom-textarea/input-selectionDirection"><a href="textFieldSelection.html#dom-textarea/input-selectiondirection">selectionDirection</a></code>, <code title="dom-textarea/input-setRangeText">setRangeText()</code>, and <code title="dom-textarea/input-setSelectionRange"><a href="textFieldSelection.html#dom-textarea/input-setselectionrange">setSelectionRange()</a></code> methods and attributes expose the element's text selection. The <code title="dom-fe-autofocus"><a href="attributes-common-to-form-controls.html#dom-fe-autofocus">autofocus</a></code>, <code title="dom-fe-disabled"><a href="attributes-common-to-form-controls.html#dom-fe-disabled">disabled</a></code>, <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code>, and <code title="dom-fe-name"><a href="attributes-common-to-form-controls.html#dom-fe-name">name</a></code> IDL attributes are part of the element's forms API.</p> </div> </body></html> --- NEW FILE: constraints.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.10.21 Constraints — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } [...1752 lines suppressed...] <h4 id="resetting-a-form"><span class="secno">4.10.23 </span>Resetting a form</h4> <p>When a <code><a href="the-form-element.html#the-form-element">form</a></code> element <var title="">form</var> is <dfn id="concept-form-reset" title="concept-form-reset">reset</dfn>, the user agent must <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-reset">reset</code>, that is cancelable, at <var title="">form</var>, and then, if that event is not canceled, must invoke the <a href="#concept-form-reset-control" title="concept-form-reset-control">reset algorithm</a> of each <a href="forms.html#category-reset" title="category-reset">resettable element</a> whose <a href="association-of-controls-and-forms.html#form-owner">form owner</a> is <var title="">form</var>.</p> <p>Each <a href="forms.html#category-reset" title="category-reset">resettable element</a> defines its own <dfn id="concept-form-reset-control" title="concept-form-reset-control">reset algorithm</dfn>. Changes made to form controls as part of these algorithms do not count as changes caused by the user (and thus, e.g., do not cause <code title="event-input">input</code> events to fire).</p> </div> </body></html> --- NEW FILE: the-p-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.5.1 The p element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="grouping-content.html" title="4.5 Grouping content" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-hr-element.html" title="4.5.2 The hr element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="grouping-content.html">← 4.5 Grouping content</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-hr-element.html">4.5.2 The hr element →</a> </div> <h4 id="the-p-element"><span class="secno">4.5.1 </span>The <dfn><code>p</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlparagraphelement">HTMLParagraphElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-p-element">p</a></code> element <a href="rendering.html#represents">represents</a> a <a href="content-models.html#paragraph">paragraph</a>.</p> <p class="note">While paragraphs are usually represented in visual media by blocks of text that are physically separated from adjacent blocks through blank lines, a style sheet or user agent would be equally justified in presenting paragraph breaks in a different manner, for instance using inline pilcrows (¶).</p> <div class="example"> <p>The following examples are conforming HTML fragments:</p> <pre><p>The little kitten gently seated himself on a piece of carpet. Later in his life, this would be referred to as the time the cat sat on the mat.</p></pre> <pre><fieldset> <legend>Personal information</legend> <p> <label>Name: <input name="n"></label> <label><input name="anon" type="checkbox"> Hide from other users</label> </p> <p><label>Address: <textarea name="a"></textarea></label></p> </fieldset></pre> <pre><p>There was once an example from Femley,<br> Whose markup was of dubious quality.<br> The validator complained,<br> So the author was pained,<br> To move the error from the markup to the rhyming.</p></pre> </div> <p>The <code><a href="#the-p-element">p</a></code> element should not be used when a more specific element is more appropriate.</p> <div class="example"> <p>The following example is technically correct:</p> <pre><section> <!-- ... --> <p>Last modified: 2001-04-23</p> <p>Author: http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="attributes-common-to-td-and-th-elements.html" title="4.9.11 Attributes common to td and th elements" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="forms.html" title="4.10 Forms" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="attributes-common-to-td-and-th-elements.html">← 4.9.11 Attributes common to td and th elements</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="forms.html">4.10 Forms →</a> </div> <h4 id="examples"><span class="secno">4.9.13 </span>Examples</h4> <p><i>This section is non-normative.</i></p> <p>The following shows how might one mark up the bottom part of table 45 of the <cite>Smithsonian physical tables, Volume 71</cite>:</p> <!-- Smithsonian physical tables, Volume 71: By Smithsonian Institution, Frederick Eugene Fowle; page 76 --> <!-- from the reprint of the seventh revised edition; publication 2539, published 1921 --> <pre><table> <caption>Specification values: <b>Steel</b>, <b>Castings</b>, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption> <thead> <tr> <th rowspan=2>Grade.</th> <th rowspan=2>Yield Point.</th> <th colspan=2>Ultimate tensile strength</th> <th rowspan=2>Per cent elong. 50.8mm or 2 in.</th> <th rowspan=2>Per cent reduct. area.</th> </tr> <tr> <th>kg/mm<sup>2</sup></th> <th>lb/in<sup>2</sup></th> </tr> </thead> <tbody> <tr> <td>Hard</td> <td>0.45 ultimate</td> <td>56.2</td> <td>80,000</td> <td>15</td> <td>20</td> </tr> <tr> <td>Medium</td> <td>0.45 ultimate</td> <td>49.2</td> <td>70,000</td> <td>18</td> <td>25</td> </tr> <tr> <td>Soft</td> <td>0.45 ultimate</td> <td>42.2</td> <td>60,000</td> <td>22</td> <td>30</td> </tr> </tbody> </table></pre> <p>This table could look like this:</p> <table id="table-example-1"><caption>Specification values: <b>Steel</b>, <b>Castings</b>, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption> <thead><tr><th rowspan="2">Grade.</th> <th rowspan="2">Yield Point.</th> <th colspan="2">Ultimate tensile strength</th> <th rowspan="2">Per cent elong. 50.8 mm or 2 in.</th> <th rowspan="2">Per cent reduct. area.</th> </tr><tr><th>kg/mm<sup>2</sup></th> <th>lb/in<sup>2</sup></th> </tr></thead><tbody><tr><td>Hard</td> <td>0.45 ultimate</td> <td>56.2</td> <td>80,000</td> <td>15</td> <td>20</td> </tr><tr><td>Medium</td> <td>0.45 ultimate</td> <td>49.2</td> <td>70,000</td> <td>18</td> <td>25</td> </tr><tr><td>Soft</td> <td>0.45 ultimate</td> <td>42.2</td> <td>60,000</td> <td>22</td> <td>30</td> </tr></tbody></table><hr><p>The following shows how one might mark up the gross margin table on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:</p> <pre><table> <thead> <tr> <th> <th>2008 <th>2007 <th>2006 <tbody> <tr> <th>Net sales <td>$ 32,479 <td>$ 24,006 <td>$ 19,315 <tr> <th>Cost of sales <td> 21,334 <td> 15,852 <td> 13,717 <tbody> <tr> <th>Gross margin <td>$ 11,145 <td>$ 8,154 <td>$ 5,598 <tfoot> <tr> <th>Gross margin percentage <td>34.3% <td>34.0% <td>29.0% </table></pre> <!--HTML4POLICE--><!--FORK--> <hr><p>The following shows how one might mark up the operating expenses table from lower on the same page of that document:</p> <pre><table> <colgroup> <col> <colgroup> <col> <col> <col> <thead> <tr> <th> <th>2008 <th>2007 <th>2006 <tbody> <tr> <th scope=rowgroup> Research and development <td> $ 1,109 <td> $ 782 <td> $ 712 <tr> <th scope=row> Percentage of net sales <td> 3.4% <td> 3.3% <td> 3.7% <tbody> <tr> <th scope=rowgroup> Selling, general, and administrative <td> $ 3,761 <td> $ 2,963 <td> $ 2,433 <tr> <th scope=row> Percentage of net sales <td> 11.6% <td> 12.3% <td> 12.6% </table></pre> <p>This table could look like this:</p> <table class="apple-table-examples e2"><thead><tr><th> </th><th>2008 </th><th>2007 </th><th>2006 </th></tr></thead><tbody><tr><th scope="rowgroup"> Research and development </th><td> $ 1,109 </td><td> $ 782 </td><td> $ 712 </td></tr><tr><th scope="row"> Percentage of net sales </th><td> 3.4% </td><td> 3.3% </td><td> 3.7% </td></tr></tbody><tbody><tr><th scope="rowgroup"> Selling, general, and administrative </th><td> $ 3,761 </td><td> $ 2,963 </td><td> $ 2,433 </td></tr><tr><th scope="row"> Percentage of net sales </th><td> 11.6% </td><td> 12.3% </td><td> 12.6% </td></tr></tbody></table></body></html> --- NEW FILE: the-map-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.8.12 The map element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-canvas-element.html" title="4.8.11 The canvas element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-area-element.html" title="4.8.13 The area element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-canvas-element.html">← 4.8.11 The canvas element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-area-element.html">4.8.13 The area element →</a> </div> <h4 id="the-map-element"><span class="secno">4.8.12 </span>The <dfn><code>map</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd>When the element only contains <a href="content-models.html#phrasing-content-1">phrasing content</a>: <a href="content-models.html#phrasing-content-1">phrasing content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>When the element only contains <a href="content-models.html#phrasing-content-1">phrasing content</a>: where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dd>Otherwise: where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#transparent">Transparent</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-map-name"><a href="#attr-map-name">name</a></code></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlmapelement">HTMLMapElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute DOMString <a href="#dom-map-name" title="dom-map-name">name</a>; readonly attribute <a href="infrastructure.html#htmlcollection">HTMLCollection</a> <a href="#dom-map-areas" title="dom-map-areas">areas</a>; readonly attribute <a href="infrastructure.html#htmlcollection">HTMLCollection</a> <a href="#dom-map-images" title="dom-map-images">images</a>; };</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-map-element">map</a></code> element, in conjunction with any <code><a href="the-area-element.html#the-area-element">area</a></code> element descendants, defines an <a href="image-maps.html#image-map">image map</a>. The element <a href="rendering.html#represents">represents</a> its children.</p> <p>The <dfn id="attr-map-name" title="attr-map-name"><code>name</code></dfn> attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>. The value of the <code title="attr-map-name"><a href="#attr-map-name">name</a></code> attribute must not be a <a href="infrastructure.html#compatibility-caseless" title="compatibility caseless">compatibility-caseless</a> match for the value of the <code title="attr-map-name"><a href="#attr-map-name">name</a></code> attribute of another <code><a href="#the-map-element">map</a></code> element in the same document. If the <code title="attr-id"><a href="global-attributes.html#the-id-attribute">id</a></code> attribute is also specified, both attributes must have the same value.</p> <!--TOPIC:DOM APIs--> <dl class="domintro"><dt><var title="">map</var> . <code title="dom-map-areas"><a href="#dom-map-areas">areas</a></code></dt> <dd> <p>Returns an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="the-area-element.html#the-area-element">area</a></code> elements in the <code><a href="#the-map-element">map</a></code>.</p> </dd> <dt><var title="">map</var> . <code title="dom-map-images"><a href="#dom-map-images">images</a></code></dt> <dd> <p>Returns an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="the-img-element.html#the-img-element">img</a></code> and <code><a href="the-object-element.html#the-object-element">object</a></code> elements that use the <code><a href="#the-map-element">map</a></code>.</p> </dd> </dl><div class="impl"> <p>The <dfn id="dom-map-areas" title="dom-map-areas"><code>areas</code></dfn> attribute must return an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> rooted at the <code><a href="#the-map-element">map</a></code> element, whose filter matches only <code><a href="the-area-element.html#the-area-element">area</a></code> elements.</p> <p>The <dfn id="dom-map-images" title="dom-map-images"><code>images</code></dfn> attribute must return an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> rooted at the <code><a href="dom.html#document">Document</a></code> node, whose filter matches only <code><a href="the-img-element.html#the-img-element">img</a></code> and <code><a href="the-object-element.html#the-object-element">object</a></code> elements that are associated with this <code><a href="#the-map-element">map</a></code> element according to the <a href="image-maps.html#image-map">image map</a> processing model.</p> <p>The IDL attribute <dfn id="dom-map-name" title="dom-map-name"><code>name</code></dfn> must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name.</p> </div> <!--TOPIC:HTML--> <div class="example"> <p>Image maps can be defined in conjunction with other content on the page, to ease maintenance. This example is of a page with an image map at the top of the page and a corresponding set of text links at the bottom.</p> <pre><!DOCTYPE HTML> <TITLE>Babies™: Toys</TITLE> <HEADER> <H1>Toys</H1> <IMG SRC="/images/menu.gif" ALT="Babies™ navigation menu. Select a department to go to its page." USEMAP="#NAV"> </HEADER> ... <FOOTER> <MAP NAME="NAV"> <P> <A HREF="/clothes/">Clothes</A> <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> | <A HREF="/toys/">Toys</A> <AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"> | <A HREF="/food/">Food</A> <AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"> | <A HREF="/books/">Books</A> <AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/"> </MAP> </FOOTER></pre> </div> </body></html> --- NEW FILE: 2dcontext.html --- <!DOCTYPE html><html lang=en-US-x-Hixie><head><title>HTML Canvas 2D Context</title><style type=text/css> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } [...6491 lines suppressed...] L. Montulli. IETF.</dd> <dt id=refsRFC2616>[RFC2616]</dt> <dd><cite><a href=http://tools.ietf.org/html/rfc2616>Hypertext Transfer Protocol — HTTP/1.1</a></cite>, R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach, T. Berners-Lee. IETF.</dd> <dt id=refsRFC2965>[RFC2965]</dt> <dd><cite><a href=http://tools.ietf.org/html/rfc2965>HTTP State Management Mechanism</a></cite>, D. Kristol, L. Montulli. IETF.</dd> <dt id=refsRFC5234>[RFC5234]</dt> <dd><cite><a href=http://www.ietf.org/rfc/std/std68.txt>Augmented BNF for Syntax Specifications: ABNF</a></cite>, D. Crocker, P. Overell. IETF.</dd> <!--REFERENCES OFF--> </dl></body></html> --- NEW FILE: the-head-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.2.1 The head element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-html-element.html" title="4.1.1 The html element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-title-element.html" title="4.2.2 The title element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-html-element.html">← 4.1.1 The html element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-title-element.html">4.2.2 The title element →</a> </div> <h4 id="the-head-element"><span class="secno">4.2.1 </span>The <dfn><code>head</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd>None.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>As the first element in an <code><a href="the-html-element.html#the-html-element">html</a></code> element.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd>If the document is <a href="the-iframe-element.html#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a> or if title information is available from a higher-level protocol: Zero or more elements of <a href="content-models.html#metadata-content-0">metadata content</a>.</dd> <dd>Otherwise: One or more elements of <a href="content-models.html#metadata-content-0">metadata content</a>, of which exactly one is a <code><a href="the-title-element.html#the-title-element">title</a></code> element.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlheadelement">HTMLHeadElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-head-element">head</a></code> element <a href="rendering.html#represents">represents</a> a collection of metadata for the <code><a href="dom.html#document">Document</a></code>.</p> <div class="example"> <p>The collection of metadata in a <code><a href="#the-head-element">head</a></code> element can be large or small. Here is an example of a very short one:</p> <pre><!doctype html> <html> <head> <title>A document with a short head</title> </head> <body> ...</pre> <p>Here is an example of a longer one:</p> <pre><!DOCTYPE HTML> <HTML> <HEAD> <META CHARSET="UTF-8"> <BASE HREF="http://www.example.com/"> <TITLE>An application with a long head</TITLE> <LINK REL="STYLESHEET" HREF="default.css"> <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"> <SCRIPT SRC="support.js"></SCRIPT> <META NAME="APPLICATION-NAME" CONTENT="Long headed application"> </HEAD> <BODY> ...</pre> </div> <p class="note">The <code><a href="the-title-element.html#the-title-element">title</a></code> element is a required child in most situations, but when a higher-level protocol provides title information, e.g. in the Subject line of an e-mail when HTML is used as an e-mail authoring format, the <code><a href="the-title-element.html#the-title-element">title</a></code> element can be omitted.</p> </body></html> --- NEW FILE: the-s-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.6.5 The s element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-small-element.html" title="4.6.4 The small element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-cite-element.html" title="4.6.6 The cite element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-small-element.html">← 4.6.4 The small element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-cite-element.html">4.6.6 The cite element →</a> </div> <h4 id="the-s-element"><span class="secno">4.6.5 </span>The <dfn><code>s</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-s-element">s</a></code> element <a href="rendering.html#represents">represents</a> contents that are no longer accurate or no longer relevant.</p> <p class="note">The <code><a href="#the-s-element">s</a></code> element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the <code><a href="the-del-element.html#the-del-element">del</a></code> element.</p> <div class="example"> <p>In this example a recommended retail price has been marked as no longer relevant as the product in question has a new sale price.</p> <pre><p>Buy our Iced Tea and Lemonade!</p> <p><s>Recommended retail price: $3.99 per bottle</s></p> <p><strong>Now selling for just $2.99 a bottle!</strong></p></pre> </div> </body></html> --- NEW FILE: fragment-links.js --- var fragment_links = { 'concept-appcache-pending-masters':'offline','attr-meter-high':'the-meter-element','unquoted':'syntax','explicitly-supported-xml-type':'history','ix-handler-ondrag':'index','dom-media-defaultmuted':'media-elements','handler-mediacontroller-ondurationchange':'media-elements','attr-label-for':'the-label-element','update-the-image-data':'the-img-element','htmlcommandelement':'the-command-element','the-history-interface':'history','refsXHR':'references','refsWEBGL':'references','concept-appcache-cache':'offline','dom-texttrackcuelist-length':'media-elements','dom-source-media':'the-source-element','htmlfieldsetelement':'the-fieldset-element','dom-itemid':'links','handler-window-onblur':'webappapis','conformance-requirements-for-authors':'introduction','attr-input-vspace':'obsolete','dom-meter-optimum':'the-meter-element','the-root-element':'semantics','scriptTag':'tokenization','command-facet-type':'commands','attr-form-autocomplete-on-state':'the-form-element','concept-http-equivalent':'urls','obtain-a-physical-form':'rendering','hierarchical-url':'urls','dom-area-rel':'the-area-element','changing-the-encoding-while-parsing':'parsing','concept-slots':'attributes-common-to-td-and-th-elements','dom-command-icon':'the-command-element','valid-non-negative-integer':'common-microsyntaxes','attr-fs-enctype-urlencoded':'form-submission','browsing-context-container':'browsers','about:blank':'urls','paused-media-controller':'media-elements','ix-handler-window-onafterprint':'index','webvtt':'infrastructure','script-data-escaped-dash-state':'tokenization','dom-command-ro-commandchecked':'commands','md-vcard-sex':'links','the-after-head-insertion-mode':'tokenization','strip-leading-and-trailing-whitespace':'common-microsyntaxes','dom-tdth-axis':'obsolete','activation':'editing','htmlhtmlelement':'the-html-element','create-a-script':'webappapis','the-br-element':'the-br-element','case-sensitivity-and-string-comparison':'infrastructure','ix-handler-onreset':'index','namespaces':'namespaces','dom-body-bgcolor':'obsolete','attr-meter-value':'the-meter-element','dom-style-disabled':'the-style-element','attr-media-src':'media-elements','special':'parsing','dom-navigator-appname':'system-state-and-capabilities','concept-facet':'commands','changesToNetworkingModel':'offline','dom-tr-sectionrowindex':'the-tr-element','critical-subresources':'infrastructure','attr-script-async':'the-script-element','the-s-element':'the-s-element','ix-handler-ondblclick':'index','browsers':'browsers','attr-input-accept':'states-of-the-type-attribute','fire-loadedmetadata':'media-elements','attr-br-clear':'obsolete','script-nesting-level':'parsing','attr-iframe-longdesc':'obsolete','fakepath-srsly':'states-of-the-type-attribute','attr-input-usemap':'obsolete','dom-tr-deletecell':'the-tr-element','alternate-style-sheets':'styling','dom-table-deletetfoot':'the-table-element','md-vcard-logo':'links','dom-table-thead':'the-table-element','attr-meta-http-equiv-content-language':'the-meta-element','the-maxlength-attribute':'common-input-element-attributes','concept-uda-input':'urls','handler-mediacontroller-onloadeddata':'media-elements','e-mail-state-(type=email)':'states-of-the-type-attribute','resetting-a-form':'constraints','dom-a-text':'the-a-element','guidance-for-markup-generators':'the-img-element','element-dfn-categories':'element-definitions','dom-input-alt':'the-input-element','dom-document-location':'history','the-cite-element':'the-cite-element','attr-button-type':'the-button-element','attr-input-type-button-keyword':'the-input-element','dom-select-type':'the-select-element','relationship-strings':'links','htmldirectoryelement':'obsolete','attr-hr-align':'obsolete','valid-mime-type-with-no-parameters':'infrastructure','concept-node-clone':'infrastructure','attr-textarea-wrap-soft':'the-textarea-element','md-vcard-tel-value':'links','parse-error':'parsing','the-h3-element':'the-aside-element','dom-select-options':'the-select-element','concept-fe-disabled':'attributes-common-to-form-controls','add-a-vcard-line':'links','refsRFC3490':'references','dom-windowbase64-btoa':'webappapis','cross-origin-request':'infrastructure','dom-object-border':'obsolete','refsCSSFONTS':'references','dom-feature-strings':'common-dom-interfaces','effective-media-volume':'media-elements','plaintext':'obsolete','dom-img-crossorigin':'the-img-element','character-encodings-0':'parsing','root-element':'infrastructure','dom-table-bgcolor':'obsolete','domstringlist':'infrastructure','md-vcard-type-adr-home':'links','spelling-and-grammar-checking':'editing-apis','bogus-comment-state':'tokenization','dom-texttrack-activecues':'media-elements','the-wbr-element':'the-wbr-element','concept-encoding-confidence':'parsing','htmltitleelement':'the-title-element','appcache':'offline','concept-spellcheck-default-inherit':'editing-apis','ix-handler-window-onmessage':'index','scroll-to-the-fragment-identifier':'history','encrypted-http-and-related-security-concerns':'urls','refsXFN':'references','videotrack':'media-elements','text-track-api':'media-elements','push-onto-the-list-of-active-formatting-elements':'parsing','dom-texttrack-label':'media-elements','character-references':'syntax','cors-same-origin':'urls','dom-frame-name':'obsolete','dom-tbody-valign':'obsolete','split-a-string-on-commas':'common-microsyntaxes','dom-videotrack-kind':'media-elements','dom-node-namespaceuri':'infrastructure','dom-spellcheck':'editing-apis','attr-object-align':'obsolete','dom-textarea-rows':'the-textarea-element','dom-dropzone':'dnd','dom-tbody-rows':'the-tbody-element','html-mime-type':'infrastructure','dom-video-videoheight':'the-video-element','transfer-a-transferable-object':'common-dom-interfaces','pre-click-activation-steps':'content-models','webvtt-file-using-only-nested-cues':'infrastructure','dom-form-reset':'the-form-element','dom-frame-scrolling':'obsolete','refsRFC1557':'references','dom-img-width':'the-img-element','fire-a-simple-event':'webappapis','browsing-the-web':'history','encoding-microdata':'links','text-track-showing':'media-elements','md-vcard-rel-sweetheart':'links','assigned-access-key':'editing','resourceSuspend':'media-elements','attr-fae-form':'association-of-controls-and-forms','dom-dialog-open':'commands','dom-properties':'links','scroll-an-element-into-view':'infrastructure','concept-meter-high':'the-meter-element','dom-area-alt':'the-area-element','attr-form-accept-charset':'the-form-element','html-fragment-serialization-algorithm':'the-end','the-after-after-body-insertion-mode':'tokenization','blocked-by-a-modal-dialog':'editing','vcard':'links','dom-media-volume':'media-elements','custom-handlers':'system-state-and-capabilities','dom-timeranges-end':'media-elements','dialog-arguments\'-origin':'user-prompts','dom-iframe-src':'the-iframe-element','dom-barprop-visible':'browsers','dom-media-paused':'media-elements','the-menu-bar-barprop-object':'browsers','handler-mediacontroller-onwaiting':'media-elements','handler-onloadedmetadata':'webappapis','the-img-element':'the-img-element','mq':'common-microsyntaxes','concept-appcache-matches-fallback':'offline','url-property-elements':'links','type-blacklist':'system-state-and-capabilities','dom-accesskey':'editing','scripting':'webappapis','valid-browsing-context-name-or-keyword':'browsers','dom-htmloptionscollection-selectedindex':'common-dom-interfaces','refsWIN1254':'references','after-attribute-name-state':'tokenization','attr-meta-http-equiv-refresh':'the-meta-element','extracting-vevent-data':'links','concept-navigate-mature':'history','rules-for-constructing-the-chapter-tree-from-a-text-track':'media-elements','dom-input-min':'the-input-element','popup-sandboxing-flag-set':'browsers','translation-mode':'global-attributes','comment-end-bang-state':'tokenization','dom-image':'the-img-element','attr-hr-noshade':'obsolete','attr-form-autocomplete-off-state':'the-form-element','dom-input-size':'the-input-element','rawtext-less-than-sign-state':'tokenization','case-sensitivity':'links','md-vcard-label':'links','syntax-attributes':'syntax','rawtext-state':'tokenization','command-facet-checkedstate':'commands','refsRFC3279':'references','value-track-kind-description':'media-elements','ordinary':'parsing','hashchangeevent':'history','htmltrackelement':'the-track-element','attr-p-align':'obsolete','md-vevent-rrule':'links','dom-marquee-scrolldelay':'obsolete','element-type':'infrastructure','header-and-data-cell-semantics':'attributes-common-to-td-and-th-elements','edits-and-paragraphs':'edits-and-paragraphs','text-track-kind':'media-elements','concept-dnd-p':'dnd','handler-onclick':'webappapis','typographic-conventions':'introduction','attr-tdth-abbr':'obsolete','dndevents':'dnd','syntax-comments':'syntax','acknowledge-self-closing-flag':'tokenization','dom-linkstyle-sheet':'infrastructure','split-a-string-on-spaces':'common-microsyntaxes','base-url-change-steps':'infrastructure','dom-body-vlink':'obsolete','attr-pre-width':'obsolete','footnotes':'links','the-details-element':'the-details-element','dom-htmloptionscollection-remove':'common-dom-interfaces','execCommand':'editing-apis','plaintext-state':'tokenization','support-named-properties':'infrastructure','event-mediacontroller-playing':'media-elements','refsRFC4770':'references','ix-handler-oncancel':'index','timers':'timers','meta-description':'the-meta-element','event-handler-attributes':'webappapis','valid-simple-color':'common-microsyntaxes','concept-appcache-fallback-ns':'offline','image-maps':'image-maps','filecallback':'infrastructure','origin':'browsers','poster-frame':'the-video-element','handler-onload':'webappapis','the-session-history-of-browsing-contexts':'history','prepare-an-event':'media-elements','the-progress-element-0':'rendering','media-element-event-task-source':'media-elements','md-vcard':'links','submit-mailto-headers':'constraints','dom-datatransferitem-getasstring':'dnd','htmlmenuelement':'the-menu-element','hasfeature':'common-dom-interfaces','ix-handler-onseeked':'index','reload-override-flag':'dom','attributes-0':'syntax','attributes-1':'index','style-sheet-ready':'styling','scripting-0':'infrastructure','attr-input-alt':'states-of-the-type-attribute','handler-onmouseout':'webappapis','concept-input-min':'common-input-element-attributes','attr-marquee-direction-down':'obsolete','security-location':'history','refsABOUT':'references','edits':'edits','most-recently-reported-readiness-state':'media-elements','history-0':'introduction','history-1':'history','attr-marquee-behavior-scroll':'obsolete','weeks':'common-microsyntaxes','handler-mediacontroller-onemptied':'media-elements','dom-document-nameditem':'dom','sourcing-out-of-band-text-tracks':'media-elements','concept-event-dispatch':'infrastructure','the-bdi-element':'the-bdi-element','refsPAGEVIS':'references','dom-itemscope':'links','resulting-autocompletion-state':'common-input-element-attributes','dom-validitystate-valid':'constraints','attr-textarea-cols':'the-textarea-element','handler-mediacontroller-onvolumechange':'media-elements','dom-input-multiple':'the-input-element','blink':'obsolete','attr-fieldset-disabled':'the-fieldset-element','dom-media-seek':'media-elements','htmldetailselement':'the-details-element','event-media-progress':'media-elements','md-vevent-resources':'links','url-hostport':'urls','refsTURN':'references','dom-basefont-size':'obsolete','the-u-element':'the-u-element','handler-window-onmessage':'webappapis','parse-the-webvtt-settings':'infrastructure','url-host-specific':'urls','attr-base-href':'the-base-element','handler-mediacontroller-oncanplay':'media-elements','dom-media-muted':'media-elements','set-up-the-position':'commands','track-url':'the-track-element','refsRFC3676':'references','text-tracks-describing-chapters':'media-elements','fire-a-click-event':'webappapis','the-blockquote-element':'the-blockquote-element','a-graphical-representation-of-some-of-the-surrounding-text':'the-img-element','attr-object-type':'the-object-element','dom-media-have_enough_data':'media-elements','attr-input-type-email-keyword':'the-input-element','dom-table-frame':'obsolete','dom-texttrack-kind-metadata':'media-elements','refsCHARMOD':'references','script\'s-url-character-encoding':'webappapis','the-input-element-as-a-text-entry-widget':'rendering','concept-meter-actual':'the-meter-element','typed-items':'links','sandboxLinks':'history','dom-htmlallcollection-nameditem':'common-dom-interfaces','dom-history-state':'history','client-identification':'system-state-and-capabilities','attr-input-type-color-keyword':'the-input-element','concept-form-submit':'constraints','attr-ol-type':'the-ol-element','dom-media-load':'media-elements','nearest-activatable-element':'content-models','master-command':'the-command-element','md-vcard-kind-individual':'links','htmlhrelement':'the-hr-element','toolbars':'the-menu-element','sandboxed-top-level-navigation-browsing-context-flag':'browsers','rb':'obsolete','standard-metadata-names':'the-meta-element','handler-appcache-onerror':'offline','attr-meta-http-equiv-default-style':'the-meta-element','generic-task-sources':'webappapis','dom-input-readonly':'the-input-element','concept-input-step':'common-input-element-attributes','default-media':'the-link-element','dom-li-type':'obsolete','mediacontroller':'media-elements','refsIANAPERMHEADERS':'references','attr-itemid':'links','dom-area-search':'the-area-element','attr-ol-type-keyword-decimal':'the-ol-element','cross-origin-request-status':'infrastructure','html-elements':'infrastructure','texttrackcuelist':'media-elements','comment-0':'infrastructure','refsRFC2388':'references','a-form-control\'s-value':'attributes-common-to-form-controls','dom-frame-longdesc':'obsolete','algorithm-for-extracting-an-encoding-from-a-meta-element':'urls','image-button-state-(type=image)':'states-of-the-type-attribute','renderingUA':'infrastructure','object-plugin':'the-object-element','valid-e-mail-address-list':'states-of-the-type-attribute','r1':'the-table-element','r2':'the-table-element','has-a-border':'rendering','xpath-1.0-processors':'interactions-with-xpath-and-xslt','md-vcard-fn':'links','parse-a-time-component':'common-microsyntaxes','attr-media-preload-none-state':'media-elements','dom-texttrackcue-endtime':'media-elements','text-track-loaded':'media-elements','suffering-from-being-too-long':'constraints','dom-name':'browsers','submitting-element-directionality':'form-submission','value-track-kind-translation':'media-elements','handler-marquee-onfinish':'obsolete','concept-meter-maximum':'the-meter-element','attr-dir-auto':'global-attributes','the-drag-data-item-kind':'dnd','script-processing-defer':'the-script-element','extracting-a-vcard':'links','other-elements,-attributes-and-apis':'obsolete','concept-textarea-api-value':'the-textarea-element','ix-handler-oncanplay':'index','attr-fs-formtarget':'form-submission','rank':'the-aside-element','network-states':'media-elements','the-input-element':'the-input-element','valid-global-date-and-time-string':'common-microsyntaxes','duration-time-component-scale':'common-microsyntaxes','limited-to-only-non-negative-numbers-greater-than-zero':'common-dom-interfaces','md-vcard-kind-org':'links','navigator':'system-state-and-capabilities','dom-document-bgcolor':'obsolete','link-type-help':'links','datatransferitemlist':'dnd','list-of-scripts-that-will-execute-in-order-as-soon-as-possible':'the-script-element','dom-track-srclang':'the-track-element','attr-track-kind-keyword-descriptions':'the-track-element','dom-area-hash':'the-area-element','attr-embed-vspace':'obsolete','set-of-comma-separated-tokens':'common-microsyntaxes','have-range-limitations':'common-input-element-attributes','parsing-main-afterframeset':'tokenization','documenttype':'infrastructure','dom-title':'global-attributes','urlmismatcherror':'infrastructure','handler-ondurationchange':'webappapis','attr-media-controls':'media-elements','htmlmetaelement':'the-meta-element','active-flag-was-set-when-the-script-started':'media-elements','attr-script-charset':'the-script-element','dom-meta-scheme':'obsolete','the-input-element-as-a-range-control':'rendering','md-vcard-uid':'links','dom-location-hash':'history','dom-media-have_nothing':'media-elements','refsRFC4395':'references','fragment-escaped':'urls','dom-img-vspace':'obsolete','attr-fe-autofocus':'attributes-common-to-form-controls','dom-document-plugins':'dom','textarea-effective-height':'rendering','html-fragment-parsing-algorithm':'the-end','handler-window-onpageshow':'webappapis','dom-marquee-scrollamount':'obsolete','refsRFC1554':'references','dom-select-length':'the-select-element','in-a-document':'infrastructure','table-example-1':'examples','event-mediacontroller-emptied':'media-elements','dynamic-markup-insertion':'dynamic-markup-insertion','dynamic-nested-browsing-context-properties':'browsers','classes':'global-attributes','md-vcard-rel-co-worker':'links','guidelines-for-exposing-cues-in-various-formats-as-text-track-cues':'media-elements','dom-mediaerror-code':'media-elements','audiotracklist':'media-elements','the-list-of-active-formatting-elements':'parsing','form-element-pointer':'parsing','dom-textarea-maxlength':'the-textarea-element','parse-a-yearless-date-string':'common-microsyntaxes','dom-input-valueasdate':'common-input-element-apis','navigate':'history','syntax-ambiguous-ampersand':'syntax','dom-iframe-srcdoc':'the-iframe-element','the-script-block\'s-character-encoding':'the-script-element','top-level-browsing-context':'browsers','simple-color':'common-microsyntaxes','attr-button-value':'the-button-element','dom-texttrack-disabled':'media-elements','refsRFC1321':'references','attr-ol-type-keyword-upper-alpha':'the-ol-element','dom-tdth-width':'obsolete','attr-table-cellspacing':'obsolete','link-type-nofollow':'links','dom-input-defaultchecked':'the-input-element','script-processing-noscript':'the-script-element','dom-tbody-choff':'obsolete','handler-onfocus':'webappapis','attr-input-size':'common-input-element-attributes','attr-object-declare':'obsolete','refsWIN31J':'references','attributes-for-embedded-content-and-images':'rendering','handler-appcache-oncached':'offline','dom-tdth-valign':'obsolete','guidance-for-conformance-checkers':'the-img-element','the-title-element':'the-title-element','pragma-set-default-language':'the-meta-element','event-definitions':'media-elements','fetching-resources':'urls','a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations':'the-img-element','color-state-(type=color)':'states-of-the-type-attribute','attr-iframe-vspace':'obsolete','refsMQ':'references','dom-datatransfer-setdragimage':'dnd','event-dragend':'dnd','the-input-element-as-domain-specific-widgets':'rendering','lists':'rendering','algorithm-for-assigning-header-cells':'attributes-common-to-td-and-th-elements','dom-texttrack-kind-subtitles':'media-elements','dom-embed-align':'obsolete','dom-table-tbodies':'the-table-element','htmlmapelement':'the-map-element','dom-domstringmap-setitem':'common-dom-interfaces','dom':'dom','consumed':'parsing','md-vcard-note':'links','ix-handler-ondragover':'index','the-mark-element':'the-mark-element','valid-yearless-date-string':'common-microsyntaxes','selector-active':'links','text-(type=text)-state-and-search-state-(type=search)':'states-of-the-type-attribute','dom-optgroup-label':'the-optgroup-element','about:srcdoc':'urls','ix-handler-onvolumechange':'index','the-script-block\'s-source':'the-script-element','provide-a-stable-state':'webappapis','the-insertion-mode':'parsing','concept-fs-target':'form-submission','dom-marquee-truespeed':'obsolete','handler-onabort':'webappapis','dom-htmloptionscollection-length':'common-dom-interfaces','concept-datetime-local':'common-microsyntaxes','dom-media-preload':'media-elements','pseudo-classes':'links','concept-node-clone-ext':'infrastructure','colors':'common-microsyntaxes','dom-marquee-stop':'obsolete','handler-onreset':'webappapis','typed-item':'links','md-vcard-categories':'links','palpable-content-0':'content-models','handler-onplaying':'webappapis','refsPROGRESS':'references','dom-videotrack-label':'media-elements','htmloptionscollection':'common-dom-interfaces','md-vcard-tel-type':'links','dom-media-crossorigin':'media-elements','radionodelist':'common-dom-interfaces','refsIEEE754':'references','cookie-free-document-object':'dom','url-path':'urls','file-upload-state-(type=file)':'states-of-the-type-attribute','domtokenlist':'infrastructure','parsed-as-a-css-color-value':'infrastructure','dom-marquee-behavior':'obsolete','html-integration-point':'tokenization','dom-img-usemap':'the-img-element','htmlframesetelement':'obsolete','dom-validitystate-typemismatch':'constraints','preferred-mime-name':'infrastructure','parse-a-date-or-time-string':'common-microsyntaxes','htmlstyleelement':'the-style-element','attr-th-scope-colgroup':'the-th-element','md-vcard-rel-parent':'links','attr-fs-enctype':'form-submission','attr-textarea-wrap-hard':'the-textarea-element','dom-title-text':'the-title-element','mathml-namespace':'namespaces','refsCSSIMAGES':'references','the-navigator-object':'system-state-and-capabilities','dom-history':'history','parsing-main-inselectintable':'tokenization','attr-dropzone-link':'dnd','dom-external-addsearchprovider':'system-state-and-capabilities','print-when-loaded':'user-prompts','handler-onkeydown':'webappapis','htmloutputelement':'the-output-element','event-media-canplay':'media-elements','ix-handler-onkeypress':'index','dom-option-form':'the-option-element','selector-invalid':'links','refsRFC1922':'references','refsFILEAPI':'references','attr-iframe-srcdoc':'the-iframe-element','syntax-tags':'syntax','proto-url':'system-state-and-capabilities','concept-item':'links','attr-tr-charoff':'obsolete','event-mediacontroller-loadedmetadata':'media-elements','handler-state-string':'system-state-and-capabilities','the-h4-element':'the-aside-element','refsDOMCORE':'references','kinds-of-content':'content-models','the-td-element':'the-td-element','accessing-other-browsing-contexts':'browsers','attr-input-type-time-keyword':'the-input-element','the-input-element-as-a-button':'rendering','dom-media-mediagroup':'media-elements','event-dragstart':'dnd','dom-input-src':'the-input-element','dom-hr-width':'obsolete','dom-windowtimers-cleartimeout':'timers','event-media-waiting':'media-elements','xml-fragment-serialization-algorithm':'the-xhtml-syntax','attr-itemref':'links','marquee-scroll-interval':'obsolete','attr-tdth-headers':'attributes-common-to-td-and-th-elements','refsRFC2313':'references','attr-textarea-wrap-soft-state':'the-textarea-element','active-document':'browsers','article-example':'the-article-element','texttrackcue':'media-elements','top-layer':'infrastructure','dom-htmloptionscollection-nameditem':'common-dom-interfaces','dom-pre-width':'obsolete','refsRFC5234':'references','refsRFC5724':'references','attr-li-value':'the-li-element','attr-command-type-keyword-checkbox':'the-command-element','the-address-element':'the-address-element','selecting-specific-audio-and-video-tracks-declaratively':'media-elements','dom-domstringmap-nameditem':'common-dom-interfaces','refsORIGIN':'references','attr-button-type-button':'the-button-element','concept-option-value':'the-option-element','tables':'rendering','quotaexceedederror':'infrastructure','attr-head-profile':'obsolete','kind-strings':'links','dom-keygen-keytype':'the-keygen-element','dom-basefont-color':'obsolete','handler-onloadeddata':'webappapis','the-button-element-0':'rendering','attr-tdth-charoff':'obsolete','form-associated-element':'forms','dom-radionodelist-value':'common-dom-interfaces','writing-secure-applications-with-html':'introduction','dom-frame-frameborder':'obsolete','table-model-error':'attributes-common-to-td-and-th-elements','overview-of-the-parsing-model':'parsing','img-error':'the-img-element','ix-handler-onscroll':'index','dom-option-defaultselected':'the-option-element','dom-appcache-update':'offline','refsRFC2483':'references','media-elements':'media-elements','attr-tr-align':'obsolete','htmlbrelement':'the-br-element','dom-canvas-height':'the-canvas-element','urls':'urls','quirks-mode':'infrastructure','base64-table':'webappapis','dom-frame-contentwindow':'obsolete','mediaerror':'media-elements','concept-section':'headings-and-sections','cdata-section-state':'tokenization','ix-handler-window-onpopstate':'index','dom-texttrackcue-getcueashtml':'media-elements','common-input-element-attributes':'common-input-element-attributes','dom-tbody-insertrow':'the-tbody-element','attr-meter-optimum':'the-meter-element','doctype-public-identifier-(single-quoted)-state':'tokenization','best-practices-for-in-page-editors':'editing','concept-appcache-explicit':'offline','dom-mediacontroller-defaultplaybackrate':'media-elements','attr-area-shape-rect':'the-area-element','security-and-privacy-considerations':'media-elements','radio-button-group':'states-of-the-type-attribute','attr-input-min':'common-input-element-attributes','semantics-0':'elements','dom-style-scoped':'the-style-element','eventinit':'infrastructure','htmlheadelement':'the-head-element','refsRFC2237':'references','attr-input-type-url-keyword':'the-input-element','sandboxPluginApplet':'obsolete','doctype-public-identifier-(double-quoted)-state':'tokenization','unicode-serialization-of-an-origin':'browsers','htmlembedelement':'the-embed-element','text-rendered-in-native-user-interfaces':'rendering','application/x-www-form-urlencoded':'iana','syntax-errors':'introduction','htmlmediaelement':'media-elements','dom-history-replacestate':'history','dom-map-areas':'the-map-element','about:legacy-compat':'urls','attr-crossorigin-use-credentials':'urls','attr-link-href':'the-link-element','typemismatcherror':'infrastructure','parse-a-yearless-date-component':'common-microsyntaxes','collections':'common-dom-interfaces','refsRFC3629':'references','character-encoding-declaration':'the-meta-element','concept-uda-setter':'urls','element-dfn-attributes':'element-definitions','attr-keygen-challenge':'the-keygen-element','dom-texttrack-kind-captions':'media-elements','non-scripted':'infrastructure','concept-input-step-default':'common-input-element-attributes','dom-htmloptionscollection-add':'common-dom-interfaces','attr-div-align':'obsolete','best-practices-for-authors-using-media-elements':'media-elements','category-reset':'forms','dom-dir-compact':'obsolete','row-group-header':'attributes-common-to-td-and-th-elements','ix-handler-window-onblur':'index','dom-object-vspace':'obsolete','dom-frame-marginheight':'obsolete','attr-ol-type-keyword-upper-roman':'the-ol-element','dom-hr-noshade':'obsolete','traverse-the-history':'history','concept-textarea-mutable':'the-textarea-element','sbu-not-copy':'webappapis','attr-input-type-text-keyword':'the-input-element','the-source-element':'the-source-element','tree-construction':'tokenization','attr-th-scope-col':'the-th-element','dom-textarea/input-select':'textFieldSelection','n':'the-table-element','attr-area-shape-circle':'the-area-element','handler-appcache-ondownloading':'offline','element-definitions':'element-definitions','dom-area-port':'the-area-element','concept-progress-value':'the-progress-element','items':'links','selector-in-range':'links','after-attribute-value-(quoted)-state':'tokenization','attr-fs-method-get':'form-submission','dom-dragevent-datatransfer':'dnd','receives-a-set-cookie-string':'infrastructure','md-vcard-nickname':'links','attr-hyperlink-media':'links','concept-appcache-manifest-explicit':'offline','link-type-prev':'links','table-aria-strong':'wai-aria','dom-area-host':'the-area-element','rules-for-parsing-integers':'common-microsyntaxes','dynamic-changes-to-base-urls':'urls','attr-fs-formmethod':'form-submission','refsGRAPHICS':'references','concept-appcache-mode':'offline','xml-mime-type':'infrastructure','absolute-url':'urls','concept-datetime-digit':'common-microsyntaxes','attr-img-hspace':'obsolete','common-parser-idioms':'common-microsyntaxes','dom-element-tagname':'infrastructure','concept-fv-valid':'constraints','dom-img-height':'the-img-element','handler-onended':'webappapis','interactive-media':'rendering','md-vcard-rel-sibling':'links','dom-opener':'browsers','using-the-option-element-to-define-a-command':'commands','table-descriptions-techniques':'the-table-element','dom-iframe-marginheight':'obsolete','parse-a-time-zone-offset-string':'common-microsyntaxes','a-link-or-button-containing-nothing-but-the-image':'the-img-element','object-type-detection':'the-object-element','explicit-eof-character':'parsing','value-track-kind-none':'media-elements','associating-names-with-items':'links','dom-basefont-face':'obsolete','dom-base-href':'the-base-element','attr-fe-maxlength':'attributes-common-to-form-controls','security-with-canvas-elements':'the-canvas-element','ix-handler-onplay':'index','the-status-bar-barprop-object':'browsers','htmlkeygenelement':'the-keygen-element','text-track-cue-start-alignment':'media-elements','md-vevent-status':'links','the-body-element':'the-body-element','heading-content':'content-models','dom-TrackList-getKind-categories':'media-elements','handler-onprogress':'webappapis','syntax-start-tag':'syntax','attr-html-manifest':'the-html-element','htmliframeelement':'the-iframe-element','dom-a-charset':'obsolete','mutationobserver':'infrastructure','the-output-element':'the-output-element','credential-flag':'infrastructure','ix-handler-onemptied':'index','attr-input-type-image-keyword':'the-input-element','statically-validate-the-constraints':'constraints','white_space':'common-microsyntaxes','using-the-accesskey-attribute-to-define-a-command-on-other-elements':'commands','handler-onchange':'webappapis','dom-script-async':'the-script-element','bc-focus-ergo-bcc-focus':'editing','attr-ol-type-state-decimal':'the-ol-element','refsEDITING':'references','quotes':'rendering','event-dragover':'dnd','script-data-state':'tokenization','scriptTagXSLT':'the-script-element','attr-ol-compact':'obsolete','md-vcard-type-tel-fax':'links','htmltimeelement':'the-time-element','garbage-collection':'common-dom-interfaces','other-changes-to-html5':'links','attribute-text':'element-definitions','prepare-a-script':'the-script-element','attribute-value-(single-quoted)-state':'tokenization','parsing-main-inbody':'tokenization','the-script-block\'s-type':'the-script-element','dom-uda-hash':'urls','script-data-double-escaped-state':'tokenization','character':'infrastructure','md-vcard-rel-date':'links','the-title-attribute-0':'rendering','category-label':'forms','blocked-media-controller':'media-elements','unordered-set-of-unique-space-separated-tokens':'common-microsyntaxes','disk-space':'offline','attr-fe-name-charset':'attributes-common-to-form-controls','scriptingLanguages':'the-script-element','foster-parent':'tokenization','concept-timezone':'common-microsyntaxes','canceled-activation-steps':'content-models','refsWEBVTT':'references','concept-script':'webappapis','dom-area-media':'the-area-element','refsHTMLALTTECHS':'references','drag-data-store-mode':'dnd','read-plugin':'history','valid-date-string-with-optional-time':'common-microsyntaxes','latest-entry':'history','concept-yearless-date':'common-microsyntaxes','event-media-loadeddata':'media-elements','background':'introduction','htmlobjectelement':'the-object-element','script-data-escaped-end-tag-open-state':'tokenization','security-document':'dom','dom-navigator-iscontenthandlerregistered':'system-state-and-capabilities','md-vevent-summary':'links','case-sensitive':'infrastructure','audiotracklist-and-videotracklist-objects':'media-elements','using-the-a-element-to-define-a-command':'commands','dom-validitystate-toolong':'constraints','attr-background':'obsolete','selector-rtl':'links','the-marquee-element-0':'obsolete','refsRFC4281':'references','mediacontrollerplaybackstate':'media-elements','requirements-for-implementations':'obsolete','security':'dom','attr-dim-height':'dimension-attributes','dom-table-createcaption':'the-table-element','dom-tabindex':'editing','md-vcard-type-tel-text':'links','domstringmap-0':'common-dom-interfaces','invalidmodificationerror':'infrastructure','week-state-(type=week)':'states-of-the-type-attribute','refsOGGROLE':'references','dom-beforeunloadevent-returnvalue':'history','concept-appcache-foreign':'offline','paragraphs':'content-models','dom-iframe-name':'the-iframe-element','refsBOCU1':'references','head-element-pointer':'parsing','the-ins-element':'the-ins-element','attr-embed-type':'the-embed-element','manually-releasing-the-storage-mutex':'system-state-and-capabilities','insert-an-html-element':'tokenization','best-representation-of-the-number-as-a-floating-point-number':'common-microsyntaxes','dom-contenteditable':'editing','comments':'syntax','dom-contextmenu':'the-menu-element','fire-loadeddata':'media-elements','submit-mutate-action':'constraints','attr-command-type-state-checkbox':'the-command-element','refsATAG':'references','list-of-active-formatting-elements':'parsing','nested-browsing-context':'browsers','attr-area-shape-keyword-rectangle':'the-area-element','dom-select-selectedindex':'the-select-element','phrasing-content':'content-models','dom-document-head':'dom','collecting-the-first-vcard-subproperty':'links','dnd':'dnd','attr-marquee-behavior':'obsolete','ix-handler-window-onresize':'index','attr-meter-min':'the-meter-element','tag-clouds':'links','md-vcard-agent':'links','attr-col-width':'obsolete','event-media-seeking':'media-elements','dom-mediacontroller-buffered':'media-elements','dom-windowtimers-clearinterval':'timers','attr-command-disabled':'the-command-element','strike':'obsolete','handler-ondblclick':'webappapis','dom-itemprop':'links','refsGREGORIAN':'references','event-dragenter':'dnd','dom-self':'browsers','months':'common-microsyntaxes','configuring-a-form-to-communicate-with-a-server':'forms','dom-document-lastmodified':'dom','support-the-scripting-language':'the-script-element','dom-source-src':'the-source-element','dom-select-required':'the-select-element','attr-script-type':'the-script-element','web+-scheme-prefix':'iana','creator-document':'browsers','script\'s-global-object':'webappapis','interactions-with-xpath-and-xslt':'interactions-with-xpath-and-xslt','refsSDPLABEL':'references','htmltableelement':'the-table-element','dom-iframe-align':'obsolete','encoding-sniffing-algorithm':'parsing','attr-tdth-char':'obsolete','shows-caching-progress':'offline','concept-link-type-sniffing':'the-link-element','browsing-context-names':'browsers','dom-tr-cells':'the-tr-element','reflecting-content-attributes-in-idl-attributes':'common-dom-interfaces','parsing':'parsing','dom-domstringmap-additem':'common-dom-interfaces','multipart/form-data-encoding-algorithm':'constraints','refsATOM':'references','dom-dialog-close':'commands','ix-handler-onmouseup':'index','attr-param-type':'obsolete','dom-table-cellpadding':'obsolete','handler-onseeking':'webappapis','dom-menu-compact':'obsolete','dom-script-htmlfor':'obsolete','dom-input-checked':'common-input-element-apis','attr-track-srclang':'the-track-element','read-html':'history','dom-track-src':'the-track-element','attr-button-type-submit':'the-button-element','dom-track-label':'the-track-element','reset-the-form-owner':'association-of-controls-and-forms','report-the-controller-state':'media-elements','remove-an-element-from-a-document':'infrastructure','dom-texttrack-showing':'media-elements','dom-cva-setcustomvalidity':'constraints','the-drag-data-item-type-string':'dnd','the-readonly-attribute':'common-input-element-attributes','dom-history-length':'history','htmlscriptelement':'the-script-element','negative-tabindex':'editing','dom-mediacontroller-ended':'media-elements','concept-document-salvageable':'history','introduction-8':'rendering','refsBIG5':'references','isindex-0':'obsolete','refsRFC1468':'references','attr-area-nohref':'obsolete','suffering-from-an-underflow':'constraints','loading-xml-documents':'dom','serializing-html-fragments':'the-end','handler-mediacontroller-onended':'media-elements','attr-fs-formenctype':'form-submission','attr-fs-action':'form-submission','concept-video-intrinsic-height':'the-video-element','dom-videotrack-selected':'media-elements','dom-document-querycommandenabled':'editing-apis','cdata-sections':'syntax','sections-and-headings':'rendering','dom-document-createelementns':'infrastructure','dom-col-ch':'obsolete','event-media-play':'media-elements','strip-line-breaks':'common-microsyntaxes','command-facet-hiddenstate':'commands','markup-declaration-open-state':'tokenization','sandboxed-scripts-browsing-context-flag':'browsers','md-vcard-title':'links','dom-fs-novalidate':'form-submission','attr':'infrastructure','limited-to-numbers-greater-than-zero':'common-dom-interfaces','handling-first-frame-available':'media-elements','handler-window-onunload':'webappapis','dom-xmldocument-load':'dom','rawtext-end-tag-name-state':'tokenization','attr-crossorigin-none':'urls','dom-media-startdate':'media-elements','refsSVG':'references','introduction-2':'constraints','dom-marquee-direction':'obsolete','concept-bc-noscript':'webappapis','frameset':'obsolete','concept-spellcheck-default-false':'editing-apis','ix-handler-onseeking':'index','md-vcard-adr-street-address':'links','attr-media-preload-auto':'media-elements','attr-media-preload-metadata':'media-elements','ix-handler-window-onstorage':'index','alternative-style-sheet-sets':'infrastructure','text-track-loading':'media-elements','set-the-document\'s-address':'history','md-vcard-kind':'links','getcontext-return':'the-canvas-element','parsing-xhtml-fragments':'the-xhtml-syntax','attr-script-event':'obsolete','dom-itemref':'links','md-vcard-org':'links','dom-mediacontroller-playbackstate':'media-elements','attr-select-size':'the-select-element','dom-document-getelementsbyname':'dom','the-bdo-element':'the-bdo-element','dom-mediaerror-media_err_aborted':'media-elements','dom-input-usemap':'obsolete','current-document-readiness':'dom','event-handler-event-type':'webappapis','text-track-cue-text':'media-elements','ix-handler-onprogress':'index','the-location-interface':'history','script-data-double-escaped-dash-state':'tokenization','attr-q-cite':'the-q-element','node':'infrastructure','dom-link-media':'the-link-element','willful-violation':'introduction','script-created-parser':'dynamic-markup-insertion','meta-generator':'the-meta-element','handler-onstalled':'webappapis','attr-spellcheck':'editing-apis','category-submit':'forms','entry-script':'browsers','editing-0':'editing','time-zones':'common-microsyntaxes','dom-mediaerror-media_err_decode':'media-elements','attr-input-type-keywords':'the-input-element','refsSDP':'references','dom-texttrackcuelist-getcuebyid':'media-elements','attr-a-charset':'obsolete','data-protocol':'infrastructure','meta-keywords':'the-meta-element','dom-document-forms':'dom','scriptEndTag':'tokenization','dom-br-clear':'obsolete','ix-handler-onplaying':'index','concept-datetime':'common-microsyntaxes','html-namespace':'infrastructure','effective-playback-rate':'media-elements','track-label':'the-track-element','a-group-of-images-that-form-a-single-larger-picture-with-links':'the-img-element','dom-marquee-vspace':'obsolete','navigating-nested-browsing-contexts-in-the-dom':'browsers','dom-progress-position':'the-progress-element','slaved-media-elements':'media-elements','attr-meta-content':'the-meta-element','ix-handler-window-onunload':'index','dom-dialog-show':'commands','text-track-hidden':'media-elements','dom-applet-height':'obsolete','hardwareLimitations':'infrastructure','converting-html-to-other-formats':'converting-html-to-other-formats','attr-caption-align':'obsolete','overlong-form':'infrastructure','concept-appcache-onlinewhitelist':'offline','dom-tdth-abbr':'obsolete','event-input-change':'common-input-element-apis','sequential-link-types':'links','refsRFC1034':'references','time-state-(type=time)':'states-of-the-type-attribute','attr-body-margintop':'obsolete','md-vcard-anniversary':'links','dom-dim-width':'dimension-attributes','md-vcard-adr-type':'links','local-dates-and-times':'common-microsyntaxes','editors':'infrastructure','media-timeline':'media-elements','queue-a-post-load-task':'offline','dom-table-insertrow':'the-table-element','xml-parser':'the-xhtml-syntax','concept-n-noscript':'webappapis','handler-texttrack-oncuechange':'media-elements','attr-col-align':'obsolete','htmlselectelement':'the-select-element','preferred-style-sheet-set':'infrastructure','attr-mod-cite':'attributes-common-to-ins-and-del-elements','reset-the-insertion-mode-appropriately':'parsing','dom-table-createtbody':'the-table-element','normalized-timeranges-object':'media-elements','the-textarea-element-0':'rendering','nestedParsing':'parsing','dom-tr-align':'obsolete','concept-http-equivalent-get':'urls','script-data-escape-start-state':'tokenization','xml-namespace':'namespaces','table-charref-overrides':'tokenization','dom-applet-hspace':'obsolete','ix-handler-onloadedmetadata':'index','dom-dataset':'global-attributes','event-definitions-0':'history','documentfragment':'infrastructure','dir':'obsolete','timeranges':'media-elements','conformance-checkers':'infrastructure','attr-hyperlink-href':'links','document\'s-character-encoding':'infrastructure','input-type-attr-summary':'the-input-element','list-of-code-entry-points':'webappapis','remove-a-token-from-a-string':'common-microsyntaxes','the-keygen-element-0':'rendering','event-media-playing':'media-elements','dom-document-hasfocus':'editing','dom-button-value':'the-button-element','secondary-browsing-contexts':'browsers','dom-input-width':'the-input-element','clear-the-stack-back-to-a-table-context':'tokenization','concept-column-group':'attributes-common-to-td-and-th-elements','rules-for-updating-the-display-of-webvtt-text-tracks':'infrastructure','dom-media-have_current_data':'media-elements','dom-frame-marginwidth':'obsolete','event-readystatechange':'dom','attr-tr-bgcolor':'obsolete','global-dates-and-times':'common-microsyntaxes','the-pre-element':'the-pre-element','refsRFC1345':'references','concept-submit-button':'forms','attr-img-crossorigin':'the-img-element','refsPDF':'references','dom-fs-enctype':'form-submission','refsSHIFTJIS':'references','ix-handler-onmouseover':'index','htmldocument':'browsers','dom-window-nameditem':'browsers','durationChange':'media-elements','concept-button':'forms','refsWEBADDRESSES':'references','attr-param-value':'the-param-element','parse-a-time-zone-offset-component':'common-microsyntaxes','refsECMA262':'references','md-vcard-type-tel-video':'links','reset-button-state-(type=reset)':'states-of-the-type-attribute','the-rt-element':'the-rt-element','resource-metadata-management':'dom','securityerror':'infrastructure','system-state-and-capabilities':'system-state-and-capabilities','link-type-license':'links','autoplaying-flag':'media-elements','the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name':'browsers','ltr-specific':'rendering','named-access-on-the-window-object':'browsers','attr-command-type-keyword-radio':'the-command-element','handler-oncuechange':'webappapis','text-track-cue-text-position':'media-elements','handler-oninvalid':'webappapis','attr-dfn-title':'the-dfn-element','compiled-pattern-regular-expression':'common-input-element-attributes','history':'history','dom-mediacontroller-playing':'media-elements','html-parser':'parsing','attr-track-kind-subtitles':'the-track-element','md-vcard-tel':'links','set-of-space-separated-tokens':'common-microsyntaxes','browser-interface-elements':'browsers','running-mutation-observers':'browsers','iana':'iana','the-id-attribute':'global-attributes','style-default-media':'the-style-element','dom-datatransferitemlist-removeitem':'dnd','dom-input-type':'the-input-element','md-vevent':'links','dom-li-value':'the-li-element','htmlparagraphelement':'the-p-element','dom-document':'infrastructure','dom-uda-hostname':'urls','functionstringcallback':'dnd','dom-tdth-ch':'obsolete','popstateeventinit':'history','form-control-dirname-attribute':'form-submission','charset512':'the-meta-element','attr-meta-http-equiv-set-cookie':'the-meta-element','md-vevent-uid':'links','support-global-identifiers-for-items':'links','dom-table-deletecaption':'the-table-element','dom-fieldset-type':'the-fieldset-element','attr-object-standby':'obsolete','mouseevent':'infrastructure','image-maps-0':'rendering','attr-mod-datetime':'attributes-common-to-ins-and-del-elements','md-vcard-rel-crush':'links','dom-media-have_metadata':'media-elements','attr-input-type-range-keyword':'the-input-element','dom-prompt':'user-prompts','live':'infrastructure','parse-a-time-string':'common-microsyntaxes','text-track-cue-automatic-line-position':'media-elements','scope':'introduction','after-doctype-system-keyword-state':'tokenization','scriptTagParserResumes':'tokenization','concept-dropzone-operation':'dnd','dom-print':'user-prompts','svgmatrix':'infrastructure','obtain-the-storage-mutex':'webappapis','next-input-character':'parsing','dom-applet-object':'obsolete','closing-elements-that-have-implied-end-tags':'tokenization','attr-input-readonly':'common-input-element-attributes','ix-handler-onstalled':'index','the-dfn-element':'the-dfn-element','content-type-sniffing:-text-or-binary':'urls','character-reference-in-attribute-value-state':'tokenization','report-the-error':'webappapis','parsing-main-incaption':'tokenization','dom-input-dirname':'the-input-element','concept-input-step-default-base':'common-input-element-attributes','before-doctype-name-state':'tokenization','attr-ol-type-keyword-lower-roman':'the-ol-element','webvtt-cue-text-rendering-rules':'infrastructure','attr-tabindex':'editing','xmp':'obsolete','json':'converting-html-to-other-formats','dom-area-target':'the-area-element','dom-a-rel':'the-a-element','dom-object-type':'the-object-element','printing':'user-prompts','values':'links','act-as-if-a-token-had-been-seen':'tokenization','attr-link-media':'the-link-element','attributes-common-to-form-controls':'attributes-common-to-form-controls','eventhandlernonnull':'webappapis','the-datatransferitemlist-interface':'dnd','discard-a-document':'browsers','handler-onselect':'webappapis','domexception':'infrastructure','htmlformcontrolscollection-0':'common-dom-interfaces','handler-ontimeupdate':'webappapis','date-state-(type=date)':'states-of-the-type-attribute','xml-compatible':'infrastructure','dom-window-locationbar':'browsers','img-inc':'the-img-element','htmlbuttonelement':'the-button-element','attr-fs-novalidate':'form-submission','table-uda':'urls','media-playback':'media-elements','text-track-not-loaded':'media-elements','attr-optgroup-label':'the-optgroup-element','dom-pagetransitionevent-persisted':'history','dom-img-alt':'the-img-element','dom-option-disabled':'the-option-element','dom-command-checked':'the-command-element','drag-data-store-elements-list':'dnd','explicit-self-navigation-override':'browsers','the-param-element':'the-param-element','text-that-has-been-rendered-to-a-graphic-for-typographical-effect':'the-img-element','charset':'the-meta-element','dom-texttrack-kind':'media-elements','table-model':'attributes-common-to-td-and-th-elements','parsing-main-intr':'tokenization','xhtml':'the-xhtml-syntax','attr-marquee-direction-left':'obsolete','history-traversal':'history','the-option-element':'the-option-element','internal-algorithm-for-scanning-and-assigning-header-cells':'attributes-common-to-td-and-th-elements','sandboxScriptBlocked':'webappapis','dom-texttrackcue-snaptolines':'media-elements','garbage-collection-and-browsing-contexts':'browsers','attr-script-src':'the-script-element','htmlareaelement':'the-area-element','onerroreventhandlernonnull':'webappapis','md-vcard-type-tel-cell':'links','dom-tr-bgcolor':'obsolete','htmldialogelement':'commands','md-vcard-rel-co-resident':'links','parser-appcache':'tokenization','url-query':'urls','attr-hyperlink-type':'links','form-submission-algorithm':'constraints','appcacheevents':'offline','scripts-that-modify-the-page-as-it-is-being-parsed':'the-end','sandboxPluginObject':'the-object-element','outline':'headings-and-sections','attr-select-multiple':'the-select-element','get-the-timed-task':'timers','htmlmarqueeelement':'obsolete','attr-iframe-sandbox':'the-iframe-element','address-type-strings':'links','dom-location-pathname':'history','the-span-element':'the-span-element','definitions':'constraints','ix-handler-oncanplaythrough':'index','dom-click':'editing','void-elements':'syntax','dom-quote-cite':'the-blockquote-element','dom-datatransfer-files':'dnd','effective-script-origin':'browsers','wrongdocumenterror':'infrastructure','dom-tdth-rowspan':'attributes-common-to-td-and-th-elements','script-processing-parser-inserted':'the-script-element','xmldocument':'dom','dom-dialog-returnvalue':'commands','the-keygen-element':'the-keygen-element','attr-media-preload-auto-state':'media-elements','parse-a-local-date-and-time-string':'common-microsyntaxes','text-track-cue-pause-on-exit-flag':'media-elements','a-quick-introduction-to-html':'introduction','event-mediacontroller-pause':'media-elements','rcdata-state':'tokenization','ix-handler-onabort':'index','dom-fs-formmethod':'form-submission','refsRFC2806':'references','attr-link-urn':'obsolete','htmlquoteelement':'the-blockquote-element','attr-input-autocomplete':'common-input-element-attributes','command-facet-id':'commands','user-prompts':'user-prompts','dom-video-poster':'the-video-element','md-vcard-rel-me':'links','dom-a-rellist':'the-a-element','forced-sandboxing-flag-set':'history','forms':'forms','closing-the-input-stream':'dynamic-markup-insertion','window':'browsers','listing':'obsolete','attr-th-scope':'the-th-element','dom-object-codetype':'obsolete','parsing-main-intd':'tokenization','dom-external':'system-state-and-capabilities','text-track-cue-order':'media-elements','refsRFC1842':'references','attr-object-data':'the-object-element','magic-border-selector':'rendering','update-the-session-history-with-the-new-page':'history','event-mediacontroller-loadeddata':'media-elements','ix-handler-oncontextmenu':'index','conversations':'links','the-h5-element':'the-aside-element','refsCP50220':'references','text-track-cue-alignment':'media-elements','print-media':'rendering','attr-tdth-height':'obsolete','form-controls':'rendering','after-doctype-system-identifier-state':'tokenization','attr-table-align':'obsolete','refsWCAG':'references','concept-http-equivalent-codes':'urls','category-listed':'forms','refsEUCKR':'references','attr-media-muted':'media-elements','attr-hyperlink-usemap':'image-maps','signedpublickeyandchallenge':'the-keygen-element','dom-font-color':'obsolete','rendering':'rendering','md-vcard-rel-friend':'links','enabling-and-disabling-scripting':'webappapis','uievent':'infrastructure','embedded-content-1':'rendering','embedded-content-0':'edits-and-lists','task-source':'webappapis','dom-ol-compact':'obsolete','the-dialog-element':'commands','attr-track-default':'the-track-element','a-utf-16-encoding':'infrastructure','other-metadata-names':'the-meta-element','the-required-attribute':'common-input-element-attributes','selector-read-only':'links','authors-using-xhtml':'iana','refsFULLSCREEN':'references','ready-to-be-parser-executed':'the-script-element','handler-onwaiting':'webappapis','clear-the-list-of-active-formatting-elements-up-to-the-last-marker':'parsing','concept-progress-maximum':'the-progress-element','dom-window-personalbar':'browsers','dom-input-height':'the-input-element','frames':'obsolete','making-entire-documents-editable:-the-designmode-idl-attribute':'editing','attr-body-marginwidth':'obsolete','best-practices-for-implementors-of-media-elements':'media-elements','attr-command-radiogroup':'the-command-element','canvas':'the-canvas-element','syntax-tag-omission':'syntax','md-vcard-rel-kin':'links','ix-handler-onkeyup':'index','a-browsing-context-is-discarded':'browsers','dom-tdth-height':'obsolete','dom-applet-vspace':'obsolete','attr-dl-compact':'obsolete','dom-navigator-appversion':'system-state-and-capabilities','common-pitfalls-to-avoid-when-using-the-scripting-apis':'introduction','handler-onvolumechange':'webappapis','md-vevent-sequence':'links','htmlunknownelement':'elements','eventhandler':'webappapis','writing-a-form\'s-user-interface':'forms','target-element':'history','sectioning-root':'headings-and-sections','the-size-attribute':'common-input-element-attributes','the-main-part-of-the-content':'links','mutationobserver-scripting-environment':'infrastructure','dependencies':'infrastructure','event-online':'offline','unloading-document-cleanup-steps':'history','htmllinkelement':'the-link-element','heading-content-0':'content-models','checkbox-state-(type=checkbox)':'states-of-the-type-attribute','dom-textarea-dirname':'the-textarea-element','earliest-possible-position-when-the-script-started':'media-elements','has-a-style-sheet-that-is-blocking-scripts':'styling','language':'global-attributes','dom-track-kind':'the-track-element','dom-progress-max':'the-progress-element','attr-dir-ltr':'global-attributes','mutation-during-parsing':'tokenization','dom-audiotrack-kind':'media-elements','valid-list-of-integers':'common-microsyntaxes','script-processing-encoding':'the-script-element','the-document\'s-current-address':'dom','concept-form-reset':'constraints','handler-mediacontroller-onloadedmetadata':'media-elements','attr-hr-width':'obsolete','md-vcard-type-tel-voice':'links','the-style-attribute':'global-attributes','the-div-element':'the-div-element','dom-meter-max':'the-meter-element','cache-host':'offline','dom-table-border':'the-table-element','dom-document-writeln':'dynamic-markup-insertion','handler-marquee-onbounce':'obsolete','dom-input-files':'common-input-element-apis','unknown-images':'the-img-element','refsFILESYSTEMAPI':'references','dom-fae-form':'association-of-controls-and-forms','dom-script-defer':'the-script-element','dom-document-cookie':'dom','building-menus-and-toolbars':'the-menu-element','valid-vevent-duration-string':'links','domimplementation':'infrastructure','licensing-works':'links','elements-0':'syntax','elements-1':'index','determine-the-value-of-a-named-property':'infrastructure','concept-option-index':'the-option-element','script-execution-environment':'webappapis','limited-to-only-non-negative-numbers':'common-dom-interfaces','dropzone-processing-steps':'dnd','dom-img-longdesc':'obsolete','attr-media-mediagroup':'media-elements','invalidstateerror':'infrastructure','attr-marquee-direction':'obsolete','md-vcard-tz':'links','dom-a-href':'the-a-element','dom-window-statusbar':'browsers','concept-table-advance':'attributes-common-to-td-and-th-elements','script-processing-for':'the-script-element','attr-ol-type-state-lower-alpha':'the-ol-element','event-handler-idl-attributes':'webappapis','limited-to-only-known-values':'common-dom-interfaces','the-q-element':'the-q-element','event-media-emptied':'media-elements','dom-option-tvds':'the-option-element','dom-document-applets':'obsolete','relevant-types':'links','syntax-charref':'syntax','concept-media-load-algorithm':'media-elements','attr-command-type':'the-command-element','frame-border-color':'rendering','dom-document-close':'dynamic-markup-insertion','parsing-main-inforeign':'tokenization','attr-input-type-radio-keyword':'the-input-element','the-figure-element':'the-figure-element','semantics':'semantics','dom-object-declare':'obsolete','img-all':'the-img-element','dom-document-getitems':'links','attr-tbody-valign':'obsolete','dom-tdth-bgcolor':'obsolete','attr-track-kind-chapters':'the-track-element','refsUTF7':'references','md-vcard-type-tel-pager':'links','refsHTML4':'references','refsHTML5':'references','dom-a-name':'obsolete','document.title':'dom','valid-non-empty-url-potentially-surrounded-by-spaces':'urls','ix-handler-onwaiting':'index','the-scrollbar-barprop-object':'browsers','dom-input-pattern':'the-input-element','syntax-cdata':'syntax','dom-object-hspace':'obsolete','handler-onemptied':'webappapis','dom-input-value-default-on':'common-input-element-apis','htmltablecaptionelement':'the-caption-element','script-closable':'browsers','ignore-destructive-writes-counter':'dynamic-markup-insertion','synchronous-section':'webappapis','dom-option-index':'the-option-element','refsRFC6266':'references','dates-and-times':'common-microsyntaxes','refsRFC5280':'references','using-the-accesskey-attribute-on-a-label-element-to-define-a-command':'commands','optional-tags':'syntax','the-windowproxy-object':'browsers','attribute-value-(double-quoted)-state':'tokenization','video-object-fit':'rendering','attr-link-sizes':'links','ix-handler-window-onscroll':'index','md-vcard-org-related-url':'links','attr-link-methods':'obsolete','md-vcard-n-given-name':'links','dom-table-deleterow':'the-table-element','handler-appcache-onobsolete':'offline','dom-object-code':'obsolete','dom-form-name':'the-form-element','editing':'editing','isindex':'tokenization','dom-img-name':'obsolete','attr-th-scope-row':'the-th-element','script\'s-browsing-context':'webappapis','concept-video-intrinsic-width':'the-video-element','code-unit-length':'infrastructure','dom-applet-archive':'obsolete','ix-handler-onclose':'index','refsICE':'references','scroll-to-fragid':'history','the-input-element-as-a-file-upload-control':'rendering','refsXHTMLMOD':'references','refsOPENSEARCH':'references','attr-form-autocomplete':'the-form-element','converted-to-ascii-uppercase':'infrastructure','property-names':'links','controller-playback':'media-elements','dom-area-coords':'the-area-element','dom-htmlallcollection-item-string':'common-dom-interfaces','event-pageshow':'history','dom-param-value':'the-param-element','base-dnd-feedback':'dnd','the-var-element':'the-var-element','redirect-steps':'infrastructure','selector-checked':'links','processinginstruction':'infrastructure','dom-area-hostname':'the-area-element','general-guidelines':'the-img-element','dom-media-ended':'media-elements','dom-fs-formtarget':'form-submission','the-article-element':'the-article-element','parsing-cache-manifests':'offline','ix-handler-ontimeupdate':'index','algorithm-for-ending-a-row-group':'attributes-common-to-td-and-th-elements','bgsound':'obsolete','dom-audiotrack-id':'media-elements','attr-form-accept':'obsolete','set-of-scripts-that-will-execute-as-soon-as-possible':'the-script-element','md-vcard-adr-post-office-box':'links','concept-option-selectedness':'the-option-element','attr-input-dirname':'common-input-element-attributes','attr-input-checked':'the-input-element','dom-command-ro-commandicon':'commands','misinterpreted-for-compatibility':'parsing','refsHPAAIG':'references','atob':'webappapis','spacer':'obsolete','has-an-element-in-the-specific-scope':'parsing','the-aside-element':'the-aside-element','dom-command-type':'the-command-element','dom-fs-target':'form-submission','dom-videotrack-language':'media-elements','dom-label-htmlfor':'the-label-element','dom-mediaerror-media_err_src_not_supported':'media-elements','attr-contenteditable':'editing','attr-input-value':'the-input-element','htmlheadingelement':'the-aside-element','xml':'infrastructure','dom-area-hreflang':'the-area-element','collecting-vcard-subproperties':'links','the-dirname-attribute':'common-input-element-attributes','dom-appcache-status':'offline','refsWHATWGWIKI':'references','custom-validity-error-message':'constraints','dom-length':'browsers','the-min-and-max-attributes':'common-input-element-attributes','prescan-a-byte-stream-to-determine-its-encoding':'parsing','dom-mediacontroller':'media-elements','attr-area-shape-default':'the-area-element','navigatorcontentutils':'system-state-and-capabilities','misnested-tags:-b-p-/b-/p':'the-end','media-controller-playback-rate':'media-elements','dom-classname':'global-attributes','valid-normalized-forced-utc-global-date-and-time-string':'common-microsyntaxes','allowed-to-show-a-pop-up':'browsers','media-element-attributes':'media-elements','attr-input-type':'the-input-element','htmllegendelement':'the-legend-element','md-vcard-bday':'links','element-level-focus-apis':'editing','algorithm-for-processing-rows':'attributes-common-to-td-and-th-elements','dom-tdth-colspan':'attributes-common-to-td-and-th-elements','refsRFC3987':'references','htmlspanelement':'the-span-element','dom-table-createtfoot':'the-table-element','concept-spellcheck-default':'editing-apis','sce-not-copy':'webappapis','ix-handler-window-ononline':'index','attr-body-marginleft':'obsolete','md-vcard-n-honorific-prefix':'links','webvtt-cue-text-parsing-rules':'infrastructure','dom-datatransferitemlist-add':'dnd','attr-iframe-sandbox-allow-scripts':'browsers','dom-datatransferitemlist-length':'dnd','md-vevent-attach':'links','the-header-element':'the-header-element','dom-meta-content':'the-meta-element','end-tag-open-state':'tokenization','dom-node-localname':'infrastructure','execute-the-script-block':'the-script-element','concept-input-min-default':'common-input-element-attributes','dom-object-data':'the-object-element','dom-mediaerror-media_err_network':'media-elements','after-doctype-public-identifier-state':'tokenization','dom-validitystate-rangeunderflow':'constraints','defineTimeline':'media-elements','ix-handler-ondurationchange':'index','svg-namespace':'namespaces','text/cache-manifest':'iana','attr-map-name':'the-map-element','concept-transferable-neutered':'common-dom-interfaces','concept-time':'common-microsyntaxes','infrastructure':'infrastructure','md-work':'links','original-insertion-mode':'parsing','security-2':'browsers','rules-for-updating-the-text-track-rendering':'media-elements','handler-mediacontroller-ontimeupdate':'media-elements','refsDOT':'references','htmltablerowelement':'the-tr-element','attr-source-src':'the-source-element','text-track':'media-elements','toolbars-0':'rendering','dom-datalist-options':'the-datalist-element','dom-command-label':'the-command-element','attr-script-language':'obsolete','element-dfn-dom':'element-definitions','row-header':'attributes-common-to-td-and-th-elements','rules-for-parsing-non-negative-integers':'common-microsyntaxes','current-pixel-density':'the-img-element','parsing-main-afterbody':'tokenization','dom-iframe-longdesc':'obsolete','rules-for-parsing-a-list-of-dimensions':'common-microsyntaxes','the-summary-element':'the-summary-element','text-track-cue':'media-elements','ended-playback':'media-elements','the-dropzone-attribute':'dnd','attr-option-selected':'the-option-element','dom-mod-datetime':'attributes-common-to-ins-and-del-elements','foster-parent-element':'tokenization','refsCSSCOLOR':'references','form-submission':'form-submission','an-overridden-reload':'dom','attr-hyperlink-target':'links','dom-media-videotracks':'media-elements','scripting-1':'scripting-1','selector-valid':'links','dom-domstringmap-removeitem':'common-dom-interfaces','dom-appcache-updateready':'offline','security-0':'constraints','parse-a-global-date-and-time-string':'common-microsyntaxes','dom-applet-width':'obsolete','delaying-the-load-event-flag':'media-elements','handler-texttracklist-onremovetrack':'media-elements','refsUAAG':'references','replacement-enabled':'history','wai-aria':'wai-aria','concept-appcache-selection':'offline','attr-media-preload':'media-elements','dates':'common-microsyntaxes','dom-marquee-loop':'obsolete','mdvocabs':'links','refsCSSOMVIEW':'references','attr-menu-compact':'obsolete','valid-time-zone-offset-string':'common-microsyntaxes','insert-an-element-into-a-document':'infrastructure','valid-non-empty-url':'urls','authoring':'image-maps','the-external-interface':'system-state-and-capabilities','dom-output-type':'the-output-element','script-data-escaped-end-tag-name-state':'tokenization','url-scheme':'urls','the-p-element':'the-p-element','syntax-elements':'syntax','dom-embed-type':'the-embed-element','boolean-attribute':'common-microsyntaxes','interfaces-for-url-manipulation':'urls','rendered-legend':'rendering','writing':'syntax','dom-ul-compact':'obsolete','dom-appcache-abort':'offline','ix-handler-onblur':'index','attr-iframe-name':'the-iframe-element','dom-texttrackcue-text':'media-elements','dom-iframe-contentwindow':'the-iframe-element','event-mediacontroller-ratechange':'media-elements','dom-datatransferitemlist-clear':'dnd','tabular-data':'tabular-data','concept-fe-value':'attributes-common-to-form-controls','joint-session-history':'history','rcdata-less-than-sign-state':'tokenization','ix-handler-onended':'index','dom-fe-autofocus':'attributes-common-to-form-controls','relaxing-the-same-origin-restriction':'browsers','refsWEBSTORAGE':'references','dom-document-getelementbyid':'infrastructure','dom-confirm':'user-prompts','htmlbaseelement':'the-base-element','adjust-mathml-attributes':'tokenization','dom-input-accept':'the-input-element','dom-caption-align':'obsolete','attr-media-loop':'media-elements','dom-alert':'user-prompts','text-track-list-of-cues':'media-elements','dom-fe-name':'attributes-common-to-form-controls','ix-handler-onsubmit':'index','the-area-element':'the-area-element','doctype-state':'tokenization','external':'system-state-and-capabilities','dom-navigator-canplaytype':'media-elements','md-vcard-rel-acquaintance':'links','link-type-bookmark':'links','concept-input-required':'common-input-element-attributes','texttracklist':'media-elements','attr-keygen-keytype':'the-keygen-element','prefix-match':'infrastructure','refsCESU8':'references','runtime-script-errors-in-documents':'webappapis','attr-crossorigin-use-credentials-keyword':'urls','source-node':'dnd','time-ranges':'media-elements','handler-window-onerror':'webappapis','attr-area-shape-keyword-default':'the-area-element','dom-input-required':'the-input-element','attr-ol-type-state-upper-roman':'the-ol-element','attr-dir-rtl':'global-attributes','method-context':'timers','concept-media-load-resource':'media-elements','pending-dialog-stack':'commands','fragment-case':'the-end','text-track-cue-writing-direction':'media-elements','serializing-xhtml-fragments':'the-xhtml-syntax','md-vcard-gender-identity':'links','text-track-cue-display-state':'media-elements','concept-input-value-number-string':'the-input-element','dom-canvas-width':'the-canvas-element','dom-time-datetime':'the-time-element','attr-hx-align':'obsolete','create-an-element-for-the-token':'tokenization','dom-document-linkcolor':'obsolete','ix-handler-window-onload':'index','concept-input-value-string-number':'the-input-element','month-state-(type=month)':'states-of-the-type-attribute','some-sample-manifests':'offline','parse-a-sandboxing-directive':'browsers','insertion-point':'parsing','dom-document-open':'dynamic-markup-insertion','md-vevent-location':'links','the-application-cache-selection-algorithm':'offline','htmlbodyelement':'the-body-element','assigning-keyboard-shortcuts':'editing','concept-input-value-string-date':'the-input-element','boolean-attributes':'common-microsyntaxes','ix-handler-window-onpageshow':'index','script\'s-document':'webappapis','md-vevent-last-modified':'links','add-an-icalendar-line':'links','refsCORS':'references','provides-a-paint-source':'infrastructure','assigning-a-media-controller-declaratively':'media-elements','media-controller-volume-multiplier':'media-elements','resetBCName':'history','the-dt-element':'the-dt-element','dom-validitystate-customerror':'constraints','table-descriptions':'the-table-element','links-created-by-a-and-area-elements':'links','dom-iframe-marginwidth':'obsolete','dom-table-createthead':'the-table-element','dom-link-rev':'obsolete','the-map-element':'the-map-element','dom-document-body':'dom','rules-for-parsing-dimension-values':'common-microsyntaxes','attr-tbody-char':'obsolete','value-track-kind-caption':'media-elements','the-window-object':'browsers','editing-apis':'editing-apis','process-the-iframe-attributes':'the-iframe-element','refsISO885911':'references','attr-textarea-dirname':'the-textarea-element','dom-validitystate-rangeoverflow':'constraints','handler-mediacontroller-oncanplaythrough':'media-elements','palpable-content':'content-models','texttrackmode':'media-elements','drag-data-store-item-list':'dnd','data-mining':'infrastructure','dom-fs-formenctype':'form-submission','the-object-element':'the-object-element','dom-table-deletethead':'the-table-element','dom-form-autocomplete':'the-form-element','run-post-click-activation-steps':'content-models','dom-document-readystate':'dom','opener-browsing-context':'browsers','the-rp-element':'the-rp-element','handler-window-onhashchange':'webappapis','comment':'tokenization','dom-th-scope':'the-th-element','md-vevent-categories':'links','nodelist':'infrastructure','attr-command-checked':'the-command-element','attr-track-kind-keyword-subtitles':'the-track-element','refsSRGB':'references','concept-input-immutable':'the-input-element','the-li-element':'the-li-element','dom-a-coords':'obsolete','design-notes':'introduction','attr-iframe-frameborder':'obsolete','attr-hyperlink-hreflang':'links','ready-states':'media-elements','current-target-element':'dnd','parsing-main-inselect':'tokenization','attr-link-title':'the-link-element','a-serialization-of-the-image-as-a-file':'the-canvas-element','the-marquee-element':'rendering','dom-a-shape':'obsolete','compliance-with-other-specifications':'introduction','attr-dropzone-copy':'dnd','past-names-map':'the-form-element','handler-marquee-onstart':'obsolete','text-track-cue-horizontal-writing-direction':'media-elements','the-thead-element':'the-thead-element','md-vcard-org-organization-unit':'links','event-hashchange':'history','dom-location-href':'history','md-vcard-photo':'links','raw-text-elements':'syntax','publickeyandchallenge':'the-keygen-element','md-vevent-exdate':'links','represents':'rendering','textcontent':'infrastructure','dom-window-blur':'editing','refsRFC3986':'references','the-del-element':'the-del-element','selector-ltr':'links','concept-plugin-secure':'infrastructure','event-media-loadstart':'media-elements','following-hyperlinks':'links','attr-embed-hspace':'obsolete','refsCSSRUBY':'references','noembed':'obsolete','htmltablecolelement':'the-colgroup-element','refsUNDO':'references','concept-embed-active':'the-embed-element','groupings-of-browsing-contexts':'browsers','text/html':'iana','browsing-context':'browsers','dom-top':'browsers','restrictions-on-content-models-and-on-attribute-values':'introduction','dom-form-length':'the-form-element','event-loop':'webappapis','dom-document-nameditem-filter':'dom','attr-table-width':'obsolete','audience':'introduction','md-vcard-n-family-name':'links','dom-a-pathname':'the-a-element','dom-history-pushstate':'history','md-vcard-n-honorific-suffix':'links','parse-a-duration-string':'common-microsyntaxes','concept-task':'webappapis','attr-body-alink':'obsolete','content-models-0':'links','dom-applet-alt':'obsolete','the-dl-element':'the-dl-element','ix-handler-onload':'index','attributes-common-to-td-and-th-elements':'attributes-common-to-td-and-th-elements','exposed':'dom','x-that':'introduction','concept-input-min-zero':'common-input-element-attributes','lists-of-integers':'common-microsyntaxes','run-canceled-activation-steps':'content-models','duration-time-component':'common-microsyntaxes','attr-base-target':'the-base-element','return-value':'user-prompts','images':'rendering','dom-media-played':'media-elements','requirements-relating-to-bidirectional-algorithm-formatting-characters':'requirements-relating-to-bidirectional-algorithm-formatting-characters','attributes-common-to-ins-and-del-elements':'attributes-common-to-ins-and-del-elements','text-track-cue-start-time':'media-elements','selector-out-of-range':'links','md-vcard-rel-emergency':'links','dom-input-indeterminate':'the-input-element','marquee-loop-count':'obsolete','attr-table-summary':'obsolete','dom-textarea-cols':'the-textarea-element','nomodificationallowederror':'infrastructure','aborterror':'infrastructure','sandboxing':'browsers','concept-command':'commands','the-video-element':'the-video-element','refsRFC2445':'references','selector-hover':'links','concept-appcache-manifest-network':'offline','dom-mediacontroller-duration':'media-elements','text-track-cue-identifier':'media-elements','ordered-set-of-unique-space-separated-tokens':'common-microsyntaxes','attr-fs-method-post':'form-submission','references':'references','dom-media-src':'media-elements','dom-document-all':'obsolete','attr-object-code':'obsolete','throw':'infrastructure','the-meter-element-0':'rendering','the-script-settings-determined-from-the-node':'webappapis','htmlappletelement':'obsolete','concept-row':'attributes-common-to-td-and-th-elements','refsRFC4648':'references','yearless-dates':'common-microsyntaxes','edits-and-tables':'edits-and-lists','dom-popstateevent-state':'history','md-work-work':'links','non-interactive':'infrastructure','title-on-style':'the-style-element','attr-link-charset':'obsolete','serializing-a-css-value':'infrastructure','dom-trees':'infrastructure','list-of-available-images':'the-img-element','stack-of-open-elements':'parsing','timer-task-source':'timers','refsRFC2119':'references','content-type':'urls','the-command':'the-command-element','attr-body-text':'obsolete','webappapis':'webappapis','dom-input-stepup':'common-input-element-apis','dom-img-naturalwidth':'the-img-element','dom-table-caption':'the-table-element','dfn-read-only-array':'infrastructure','using-the-button-element-to-define-a-command':'commands','cssstyledeclaration':'infrastructure','temporary-buffer':'tokenization','attr-link-type':'the-link-element','md-vcard-rel-colleague':'links','event-media-suspend':'media-elements','attr-command-type-state-command':'the-command-element','event-media-stalled':'media-elements','refsSDPOFFERANSWER':'references','htmltablesectionelement':'the-tbody-element','handler-ondrag':'webappapis','the-title-attribute':'global-attributes','attr-source-type':'the-source-element','clear-the-stack-back-to-a-table-body-context':'tokenization','styling':'styling','attr-input-autocomplete-on-state':'common-input-element-attributes','refsJPEG':'references','concept-bc-script':'webappapis','handler-window-onbeforeunload':'webappapis','inline-documentation-for-external-scripts':'the-script-element','attr-textarea-readonly':'the-textarea-element','handler-oninput':'webappapis','the-code-element':'the-code-element','concept-select-pick':'the-select-element','toolbar-state':'the-menu-element','increment-the-marquee-current-loop-index':'obsolete','htmlimageelement':'the-img-element','drageventinit':'dnd','dom-video-videowidth':'the-video-element','the-personal-bar-barprop-object':'browsers','dom-textarea/input-selectionstart':'textFieldSelection','datetime-value':'the-time-element','refused-to-allow-the-document-to-be-unloaded':'history','rcdata-end-tag-open-state':'tokenization','attr-img-align':'obsolete','attr-fs-formnovalidate':'form-submission','syntax-text':'syntax','handler-appcache-onupdateready':'offline','list-of-scripts-that-will-execute-when-the-document-has-finished-parsing':'the-script-element','attr-command-title':'the-command-element','domstringmap':'common-dom-interfaces','mathml':'mathml','htmloptgroupelement':'the-optgroup-element','password-state-(type=password)':'states-of-the-type-attribute','dom-videotracklist-selectedindex':'media-elements','trackeventinit':'media-elements','current-input-character':'parsing','dom-appcache-swapcache':'offline','parsing-main-inhtml':'tokenization','dom-document-scripts':'dom','external-resource-link':'links','dom-windowbase64-atob':'webappapis','popstateevent':'history','dom-event-target':'infrastructure','formatting':'parsing','link-type-noreferrer':'links','forming-a-table':'attributes-common-to-td-and-th-elements','dom-col-width':'obsolete','text-track-cue-size':'media-elements','the-fieldset-element-0':'rendering','file':'infrastructure','attr-input-type-password-keyword':'the-input-element','the-properties-of-an-item':'links','presentational-hints':'rendering','ix-handler-onfocus':'index','dom-meter-value':'the-meter-element','the-time-element':'the-time-element','script-data-double-escape-end-state':'tokenization','dom-form-nameditem':'the-form-element','script-data-escaped-less-than-sign-state':'tokenization','refsX121':'references','dom-navigator-online':'offline','concept-id':'infrastructure','dom-object-usemap':'the-object-element','obsolete-but-conforming-features':'obsolete','refsMEDIAFRAG':'references','utf-8':'infrastructure','close-the-cell':'tokenization','dialog-arguments':'user-prompts','the-select-element':'the-select-element','text-track-cue-end-alignment':'media-elements','attr-track-label':'the-track-element','dom-track-default':'the-track-element','fire-waiting-when-waiting':'media-elements','attr-a-rev':'obsolete','blocked-on-its-media-controller':'media-elements','refsHTMLDIFF':'references','durations':'common-microsyntaxes','the-input-byte-stream':'parsing','dom-table-rows':'the-table-element','attr-fs-method-post-keyword':'form-submission','command-facet-action':'commands','dom-draggable':'dnd','refs2DCONTEXT':'references','the-menu-element':'the-menu-element','script-data-double-escape-start-state':'tokenization','dom-outerhtml':'infrastructure','concept-http-equiv-extensions':'the-meta-element','anonymous-command':'commands','bogus-doctype-state':'tokenization','dom-window-nameditem-filter':'browsers','fallback-content':'content-models','dom-datatransfer-effectallowed':'dnd','number-state-(type=number)':'states-of-the-type-attribute','keywords-and-enumerated-attributes':'common-microsyntaxes','attr-body-marginheight':'obsolete','barred-from-constraint-validation':'constraints','dom-fs-encoding':'form-submission','event-mediacontcoller-ended':'media-elements','the-em-element':'the-em-element','css-element-reference-identifier':'infrastructure','attr-fe-disabled':'attributes-common-to-form-controls','dom-media-texttracks':'media-elements','definitions-0':'webappapis','drag-and-drop':'links','concept-appcache-newer':'offline','dom-cva-validationmessage':'constraints','killing-scripts':'webappapis','non-fatal-media-error':'media-elements','dom-canvas-todataurl':'the-canvas-element','alt':'the-img-element','value-track-kind-main':'media-elements','directly-reachable-browsing-contexts':'browsers','handler-onratechange':'webappapis','dom-tbody-ch':'obsolete','table-encoding-overrides':'parsing','the-h1-element':'the-aside-element','dom-mod-cite':'attributes-common-to-ins-and-del-elements','tt':'obsolete','dom-validitystate-valuemissing':'constraints','seamlessLinks':'history','tree-order':'infrastructure','concept-input-type-file-selected':'states-of-the-type-attribute','foreign-elements':'syntax','refsRFC2109':'references','initial-code-entry-point':'webappapis','the-ruby-element':'the-ruby-element','dom-document-embeds':'dom','application-cache-api':'offline','handler-onsuspend':'webappapis','dom-form-elements':'the-form-element','handler-window-onafterprint':'webappapis','dom-navigator-yieldforstorageupdates':'system-state-and-capabilities','use-div-for-wrappers':'the-section-element','dom-mediacontroller-volume':'media-elements','refsTIS620':'references','dom-table-rules':'obsolete','dom-fieldset-disabled':'the-fieldset-element','handler-window-onoffline':'webappapis','md-vevent-exrule':'links','dom-area-type':'the-area-element','htmltextareaelement':'the-textarea-element','dom-cva-validity':'constraints','dom-timeranges-length':'media-elements','processing-model':'image-maps','navigate-non-Document':'history','concept-fs-method':'form-submission','attr-iframe-hspace':'obsolete','the-link-is-an-alternative-stylesheet':'links','ascii-compatible-character-encoding':'infrastructure','non-conforming-features':'obsolete','attr-textarea-placeholder':'the-textarea-element','refsJSURL':'references','official-playback-position':'media-elements','dom-tr-valign':'obsolete','concept-get-attributes-when-sniffing':'parsing','security-3':'history','form-submission-0':'constraints','security-1':'browsers','safe-passing-of-structured-data':'common-dom-interfaces','scriptTagXML':'the-xhtml-syntax','dom-script-event':'obsolete','plugins':'infrastructure','dom-audio':'the-audio-element','preprocessing-the-input-stream':'parsing','attr-textarea-rows':'the-textarea-element','dom-textarea-wrap':'the-textarea-element','ix-handler-onmousewheel':'index','table-script-bom':'the-script-element','terminology-0':'urls','media-resource-specific-text-track':'media-elements','insertion-mode':'parsing','attr-track-kind-captions':'the-track-element','dom-datatransfer-getdata':'dnd','attr-input-placeholder':'common-input-element-attributes','mathml-text-integration-point':'tokenization','webvtt-file-using-cue-text':'infrastructure','dom-based-xslt-1.0-processors':'interactions-with-xpath-and-xslt','tokenization':'tokenization','flow-content-1':'content-models','flow-content-0':'rendering','attr-hr-color':'obsolete','script-data-double-escaped-dash-dash-state':'tokenization','dom-window-item':'browsers','dom-validitystate-stepmismatch':'constraints','sandboxPluginEmbed':'the-embed-element','dom-texttrackcue':'media-elements','doctype-name-state':'tokenization','attr-meter-low':'the-meter-element','attr-script-defer':'the-script-element','dom-area-href':'the-area-element','table-uda-examples':'urls','text-track-cue-end-time':'media-elements','md-vevent-transp':'links','dom-window-scrollbars':'browsers','document.write()':'dynamic-markup-insertion','nobr':'obsolete','dom-textarea/input-setselectionrange':'textFieldSelection','dom-textarea-defaultvalue':'the-textarea-element','windowtimers':'timers','concept-document-content-type':'infrastructure','dom-mediacontroller-played':'media-elements','comment-state':'tokenization','md-vcard-org-organization-name':'links','states-of-the-type-attribute':'states-of-the-type-attribute','read-text':'history','same-origin':'browsers','the-document\'s-address':'dom','dom-style-type':'the-style-element','refsPPUTF8':'references','md-vevent-contact':'links','url-encoded-form-data':'constraints','attr-col-charoff':'obsolete','attr-tbody-align':'obsolete','handler-onclose':'webappapis','attr-tdth-valign':'obsolete','convert-a-list-of-dimensions-to-a-list-of-pixel-values':'rendering','concept-option-disabled':'the-option-element','inter-element-whitespace':'content-models','concept-event-type':'infrastructure','dom-texttrack-hidden':'media-elements','no-quirks-mode':'infrastructure','application/x-www-form-urlencoded-encoding-algorithm':'constraints','the-track-element':'the-track-element','suffering-from-a-custom-error':'constraints','attr-a-urn':'obsolete','dom-option-tvd':'the-option-element','event-media-timeupdate':'media-elements','dom-map-name':'the-map-element','dom-object-caller':'the-object-element','dom-mediacontroller-seekable':'media-elements','attr-ul-type':'obsolete','introduction-9':'rendering','md-vcard-rel-contact':'links','introduction-5':'webappapis','introduction-4':'offline','introduction-7':'dnd','md-vevent-comment':'links','introduction-1':'forms','introduction-0':'media-elements','introduction-3':'links','the-button-element':'the-button-element','implied-strong-reference':'common-dom-interfaces','dom-output-value':'the-output-element','dom-a-search':'the-a-element','suffering-from-a-step-mismatch':'constraints','dom-button-type':'the-button-element','the-ol-element':'the-ol-element','meta-charset-during-parse':'tokenization','event-appcache-cached':'offline','dom-domimplementation-createhtmldocument':'infrastructure','constructing-form-data-set':'constraints','pending-application-cache-download-process-tasks':'offline','appcache-history-2':'history','attr-tdth-colspan':'attributes-common-to-td-and-th-elements','refsABNF':'references','attr-col-span':'the-col-element','document':'dom','dom-window-status':'browsers','element-dfn-content-model':'element-definitions','drag-data-store-bitmap':'dnd','dom-input-autocomplete':'the-input-element','dom-media-defaultplaybackrate':'media-elements','the-i-element':'the-i-element','the-embed-element':'the-embed-element','figcaption-as-alt-condition':'the-img-element','concept-appcache-mode-fast':'offline','text-track-failed-to-load':'media-elements','paragraph':'content-models','dom-innerhtml':'infrastructure','attr-textarea-rows-value':'the-textarea-element','has-an-element-in-select-scope':'parsing','refsCSSUI':'references','indexsizeerror':'infrastructure','dom-html-version':'obsolete','dom-keygen-challenge':'the-keygen-element','handler-appcache-onprogress':'offline','history-autocomplete':'history','dom-texttrackcue-position':'media-elements','ascii-case-insensitive':'infrastructure','magically-aligned':'commands','only-contemporary-times':'states-of-the-type-attribute','dom-videotracklist-gettrackbyid':'media-elements','dom-script-src':'the-script-element','numbers':'common-microsyntaxes','traverse-the-history-by-a-delta':'history','rules-for-parsing-a-legacy-color-value':'common-microsyntaxes','writing-cache-manifests':'offline','sandboxPluginNavigate':'history','md-vcard-org-related-rel':'links','has-an-element-in-button-scope':'parsing','application/xhtml+xml':'iana','frameset-ok-flag':'parsing','attr-tdth-rowspan':'attributes-common-to-td-and-th-elements','comment-start-dash-state':'tokenization','attr-marquee-direction-right':'obsolete','hyperlink-annotation':'links','menus':'the-menu-element','md-vcard-impp':'links','attr-tdth-bgcolor':'obsolete','dom-img-ismap':'the-img-element','refsDOM2HTML':'references','refsNPAPI':'references','unicode-code-point':'infrastructure','the-dd-element':'the-dd-element','attr-data-*':'global-attributes','md-vevent-description':'links','dom-area-protocol':'the-area-element','stop-parsing':'the-end','enabling-and-disabling-form-controls':'attributes-common-to-form-controls','reflect':'common-dom-interfaces','attr-object-classid':'obsolete','dom-linkstyle-disabled':'styling','sandboxed-seamless-iframes-flag':'browsers','dom-document-anchors':'obsolete','md-vcard-adr-country-name':'links','input-type-change':'the-input-element','adoptionAgency':'tokenization','dom-datatransferitemlist-item':'dnd','dom-history-go':'history','column-group-header':'attributes-common-to-td-and-th-elements','color-spaces-and-color-correction':'the-canvas-element','dom-accesskeylabel':'editing','htmlaudioelement':'the-audio-element','dom-option-selected':'the-option-element','notfounderror':'infrastructure','refsXPATH10':'references','obsolete-permitted-doctype':'syntax','candidate-for-constraint-validation':'constraints','dom-parent':'browsers','refsMIMESNIFF':'references','bidirectional-text':'rendering','hierarchyrequesterror':'infrastructure','attr-style-type':'the-style-element','the-lang-and-xml:lang-attributes':'global-attributes','refsE163':'references','refsARIAIMPL':'references','dom-marquee-hspace':'obsolete','handler-tracklist-onchange':'media-elements','dom-media-networkstate':'media-elements','abort-a-parser':'the-end','htmlmodelement':'attributes-common-to-ins-and-del-elements','dom-manipulation-task-source':'webappapis','meta-application-name':'the-meta-element','pagetransitioneventinit':'history','dom-body-text':'obsolete','dom-media-have_future_data':'media-elements','dom-uievent-detail':'infrastructure','examples-0':'links','examples-1':'links','examples-2':'links','beforeunloadevent':'history','the-dragevent-interface':'dnd','seek-the-media-controller':'media-elements','edits-and-lists':'edits-and-lists','attr-input-type-date-keyword':'the-input-element','adjust-foreign-attributes':'tokenization','dom-hr-size':'obsolete','windowproxy':'browsers','dom-head-profile':'obsolete','create-a-script-from-a-node':'webappapis','associatedSection':'headings-and-sections','attr-td-scope':'obsolete','multipart-form-data':'constraints','md-vevent-rdate':'links','interactive-content-0':'content-models','the-nav-element':'the-nav-element','after-doctype-public-keyword-state':'tokenization','seeking':'media-elements','concept-appcache-status':'offline','ix-handler-oncuechange':'index','event-media-pause':'media-elements','selector-optional':'links','rules-for-parsing-a-hash-name-reference':'common-microsyntaxes','concept-input-step-scale':'common-input-element-attributes','svg-0':'mathml','conformance-requirements':'infrastructure','refsRFC2616':'references','dom-media-autoplay':'media-elements','dom-event-istrusted':'infrastructure','dom-datatransferitem-kind':'dnd','dom-link-rel':'the-link-element','the-footer-element':'the-footer-element','dom-select-size':'the-select-element','concept-option-label':'the-option-element','event-mediacontroller-timeupdate':'media-elements','auxiliary-browsing-contexts':'browsers','implicit-submission':'constraints','attr-table-datapagesize':'obsolete','attr-textarea-required':'the-textarea-element','the-initial-insertion-mode':'tokenization','generate-implied-end-tags':'tokenization','handler-onkeyup':'webappapis','attr-progress-value':'the-progress-element','concept-fe-values':'attributes-common-to-form-controls','writing-xhtml-documents':'the-xhtml-syntax','dom-media-addtexttrack':'media-elements','vevent':'links','attr-area-shape-keyword-poly':'the-area-element','named-character-references-table':'named-character-references','attr-option-value':'the-option-element','event-loops':'webappapis','attr-crossorigin-anonymous-keyword':'urls','dom-showmodaldialog':'user-prompts','dom-area-rellist':'the-area-element','rules-for-parsing-simple-color-values':'common-microsyntaxes','editing-hosts':'rendering','attr-param-name':'the-param-element','event':'infrastructure','handler-texttrackcue-onexit':'media-elements','dom-input-value':'common-input-element-apis','attr-embed-align':'obsolete','attr-option-name':'obsolete','attr-blockquote-cite':'the-blockquote-element','dom-window-close':'browsers','attr-button-type-submit-state':'the-button-element','attr-input-required':'common-input-element-attributes','concept-appcache-onlinewhitelist-wildcard':'offline','steps-to-expose-a-media-resource-specific-text-track':'media-elements','security-window':'browsers','task-queue':'webappapis','offline':'offline','dom-canvas-getcontext':'the-canvas-element','dom-command-command':'the-command-element','the-microdata-model':'links','charset1024':'the-meta-element','dom-media-buffered':'media-elements','inert':'editing','the-progress-element':'the-progress-element','attr-img-src':'the-img-element','attr-lang':'global-attributes','input-stream':'parsing','dom-fs-action':'form-submission','placeholder-label-option':'the-select-element','matches-the-environment':'common-microsyntaxes','attr-option-label':'the-option-element','dom-windowtimers-setinterval':'timers','other-parsing-state-flags':'parsing','rel-up':'links','refsHTTP':'references','completely-loaded':'the-end','expiring-application-caches':'offline','the-audio-element':'the-audio-element','md-vcard-sound':'links','dom-focus':'editing','dom-sharedworkerglobalscope-applicationcache':'offline','iframe-sandboxing-flag-set':'browsers','replaced-elements':'rendering','the-after-after-frameset-insertion-mode':'tokenization','concept-handler-error':'webappapis','dom-tr-ch':'obsolete','security-risks-in-the-drag-and-drop-model':'dnd','attr-media-preload-metadata-state':'media-elements','handler-onmouseover':'webappapis','refsMFREL':'references','md-vcard-rel-muse':'links','allowed-to-navigate':'browsers','dom-hidden':'editing','insert-a-foreign-element':'tokenization','md-vcard-role':'links','using-the-accesskey-attribute-on-a-legend-element-to-define-a-command':'commands','script-data-double-escaped-less-than-sign-state':'tokenization','ix-handler-window-onoffline':'index','dom-colgroup-span':'the-colgroup-element','script-data-escaped-dash-dash-state':'tokenization','the-xml:base-attribute-(xml-only)':'global-attributes','has-an-element-in-list-item-scope':'parsing','timed-text-tracks':'media-elements','implementing-the-server-side-processing-for-a-form':'forms','limiting-user-input-length':'attributes-common-to-form-controls','concept-event-listener':'infrastructure','attr-a-name':'obsolete','parse-state':'parsing','handler-tracklist-onremovetrack':'media-elements','script':'the-script-element','introduction':'introduction','menus-intro':'the-menu-element','invalidcharactererror':'infrastructure','hashchangeeventinit':'history','pragma-directives':'the-meta-element','list-state':'the-menu-element','dom-base-target':'the-base-element','md-vcard-rel-neighbor':'links','canvas-blob-serialization-task-source':'the-canvas-element','linkstyle':'infrastructure','dom-link-hreflang':'the-link-element','dragevent':'dnd','concept-input-value-default-range':'states-of-the-type-attribute','dom-select-value':'the-select-element','refsBECSS':'references','dom-applet-align':'obsolete','obsolete':'obsolete','eventtarget':'infrastructure','attr-meta-name':'the-meta-element','transparent-content-models':'content-models','simple-dialogs':'user-prompts','media-controllers':'media-elements','unload-a-document':'history','attr-li-type':'obsolete','text-content':'content-models','md-vcard-related':'links','attr-input-step':'common-input-element-attributes','dom-area-pathname':'the-area-element','link-type-author':'links','handler-window-onpopstate':'webappapis','concept-cell':'attributes-common-to-td-and-th-elements','arraybuffer':'infrastructure','handler-window-onbeforeprint':'webappapis','the-a-element':'the-a-element','phrasing-content-1':'content-models','phrasing-content-0':'rendering','dom-uda-search':'urls','command-api':'commands','htmlallcollection':'common-dom-interfaces','dom-navigator-unregisterprotocolhandler':'system-state-and-capabilities','interactive':'infrastructure','attr-tr-char':'obsolete','dom-window-focus':'editing','dom-table-width':'obsolete','the-colgroup-element':'the-colgroup-element','the-tr-element':'the-tr-element','ordinal-value':'the-li-element','warnings-for-obsolete-but-conforming-features':'obsolete','skip-whitespace':'common-microsyntaxes','html-namespace-0':'namespaces','cache-failure-steps':'offline','dom-mediacontroller-currenttime':'media-elements','dom-uda-protocol':'urls','events':'webappapis','attr-area-shape-keyword-rect':'the-area-element','read-media':'history','session-history':'history','dom-select-item':'the-select-element','valid-url-potentially-surrounded-by-spaces':'urls','dom-window-toolbar':'browsers','audiotrack':'media-elements','dom-document-referrer':'dom','attr-body-marginbottom':'obsolete','handler-tracklist-onaddtrack':'media-elements','handler-texttracklist-onaddtrack':'media-elements','md-vcard-adr-region':'links','dom-media-controls':'media-elements','syntax-doctype':'syntax','dom-frameset-rows':'obsolete','attr-table-border':'the-table-element','attr-track-kind-keyword-captions':'the-track-element','handler-appcache-onchecking':'offline','xlink-namespace':'namespaces','attr-input-type-week-keyword':'the-input-element','maximum-allowed-value-length':'attributes-common-to-form-controls','attr-iframe-sandbox-allow-same-origin':'browsers','htmlpreelement':'the-pre-element','dom-link-charset':'obsolete','the-draggable-attribute':'dnd','attr-fs-method':'form-submission','attr-dir-rtl-state':'global-attributes','sandboxWindowOpen':'browsers','before-doctype-public-identifier-state':'tokenization','event-definition':'history','attr-dir-auto-state':'global-attributes','windows':'browsers','dom-tdth-choff':'obsolete','command-facet-label':'commands','dom-navigator-useragent':'system-state-and-capabilities','attr-area-shape':'the-area-element','dom-iframe-scrolling':'obsolete','attr-style-title':'the-style-element','concept-output-mode':'the-output-element','refsIANACHARSET':'references','attributes-for-form-submission':'form-submission','determining-the-character-encoding':'parsing','maps-to-the-pixel-length-property':'rendering','content-type-sniffing':'urls','refsHTML':'references','drag-and-drop-initialization-steps':'dnd','change-the-encoding':'parsing','event-media-canplaythrough':'media-elements','generic-raw-text-element-parsing-algorithm':'tokenization','html-vs-xhtml':'introduction','refsRFC2046':'references','dom-hx-align':'obsolete','handler-onscroll':'webappapis','the-xhtml-syntax':'the-xhtml-syntax','dom-font-face':'obsolete','font':'obsolete','attr-option-disabled':'the-option-element','concept-n-script':'webappapis','dom-frames':'browsers','entry-update':'history','webvtt-cue-text-dom-construction-rules':'infrastructure','appropriate-form-encoding-algorithm':'constraints','attr-a-shape':'obsolete','dom-document-dir':'global-attributes','global-attributes':'global-attributes','queue-a-task':'webappapis','dom-object-standby':'obsolete','interactive-elements':'interactive-elements','ix-handler-ondragstart':'index','the-abbr-element':'the-abbr-element','windowbase64':'webappapis','dom-frame-noresize':'obsolete','attr-style-scoped':'the-style-element','inert-subtrees':'editing','multipart/form-data-boundary-string':'constraints','the-autocomplete-attribute':'common-input-element-attributes','refsXMLNS':'references','parse-a-month-component':'common-microsyntaxes','attr-input-type-tel-keyword':'the-input-element','parsing-main-intabletext':'tokenization','md-vcard-member':'links','script\'s-base-url':'webappapis','dom-select-nameditem':'the-select-element','restrictions-for-contents-of-script-elements':'the-script-element','association-of-controls-and-forms':'association-of-controls-and-forms','dom-texttracklist-length':'media-elements','generic-rcdata-element-parsing-algorithm':'tokenization','structure-of-this-specification':'introduction','attr-table-rules':'obsolete','the-label-element':'the-label-element','attr-input-autocomplete-off-state':'common-input-element-attributes','valid-duration-string':'common-microsyntaxes','dom-window-stop':'browsers','active-parser':'dom','handler-window-onfocus':'webappapis','the-meter-element':'the-meter-element','dom-input-max':'the-input-element','concept-fe-checked':'attributes-common-to-form-controls','url-host':'urls','md-vcard-email':'links','refsHATOM':'references','dom-applet-codebase':'obsolete','attr-param-valuetype':'obsolete','attr-fs-enctype-formdata':'form-submission','storage-mutex':'webappapis','parse-a-date-component':'common-microsyntaxes','attr-track-kind-descriptions':'the-track-element','css-position-absolute-anchored':'commands','concept-input-checked-dirty-flag':'the-input-element','lists-of-dimensions':'common-microsyntaxes','user-interface':'media-elements','md-vcard-type-adr-work':'links','img-load':'the-img-element','about-blank-origin':'browsers','dom-form-acceptcharset':'the-form-element','attr-fs-target':'form-submission','dom-blur':'editing','md-vcard-rel-met':'links','before-attribute-name-state':'tokenization','dom-hashchangeevent-newurl':'history','the-h1,-h2,-h3,-h4,-h5,-and-h6-elements':'the-aside-element','locked-for-focus':'editing','refsEVENTSOURCE':'references','ix-handler-onerror':'index','state-object':'history','concept-table':'attributes-common-to-td-and-th-elements','refsBCP47':'references','attr-input-type-submit-keyword':'the-input-element','establish-script-block-source':'the-script-element','run-synthetic-click-activation-steps':'content-models','refsRFC6350':'references','dom-body-alink':'obsolete','dom-dim-height':'dimension-attributes','embedded-content':'content-models','script-data-less-than-sign-state':'tokenization','the-multiple-attribute':'common-input-element-attributes','collections-0':'infrastructure','dom-embed-src':'the-embed-element','event-media-ended':'media-elements','dom-media-error':'media-elements','doctype-system-identifier-(double-quoted)-state':'tokenization','dom-input-value-default':'common-input-element-apis','element-restrictions':'syntax','error-codes':'media-elements','dom-body-link':'obsolete','datacloneerror':'infrastructure','conforming-html5-documents':'infrastructure','hyperlink':'links','dom-navigator':'system-state-and-capabilities','text-track-disabled':'media-elements','attr-body-vlink':'obsolete','handler-ondragleave':'webappapis','parsing-main-intbody':'tokenization','attr-dialog-open':'commands','table-aria-weak':'wai-aria','definitions-1':'webappapis','value-sanitization-algorithm':'the-input-element','attr-input-hspace':'obsolete','found-another-audio-track':'media-elements','htmlsourceelement':'the-source-element','dom-link-sizes':'the-link-element','dom-textarea/input-selectiondirection':'textFieldSelection','concept-form-association':'association-of-controls-and-forms','the-head-element':'the-head-element','ix-handler-window-onbeforeprint':'index','concept-dnd-ro':'dnd','multipart/x-mixed-replace':'iana','handler-ondragover':'webappapis','collect-a-sequence-of-characters':'common-microsyntaxes','dom-texttrack-language':'media-elements','handler-onblur':'webappapis','dom-label-control':'the-label-element','character-reference-in-rcdata-state':'tokenization','dom-external-issearchproviderinstalled':'system-state-and-capabilities','refsDOMPARSING':'references','parse-a-manifest':'offline','platform-array-objects':'infrastructure','the-accesskey-attribute':'editing','md-vevent-url':'links','tag-name-state':'tokenization','using-the-microdata-dom-api':'links','value-track-kind-alternate':'media-elements','text-level-semantics':'text-level-semantics','dom-input-value-value':'common-input-element-apis','attr-th-scope-rowgroup':'the-th-element','refsRFC2781':'references','dom-image-wh':'the-img-element','blob':'infrastructure','dom-media-play':'media-elements','concept-error-nothandled':'webappapis','ascii-serialization-of-an-origin':'browsers','dom-media-controller':'media-elements','xmlns-namespace':'namespaces','data-state':'tokenization','dom-appcache-downloading':'offline','secondary-browsing-context':'browsers','fatal-decode-error':'media-elements','ix-handler-ondrop':'index','navigate-fragid-step':'history','refsSELECTORS':'references','md-vevent-dtstart':'links','downloading-or-updating-an-application-cache':'offline','md-vevent-geo':'links','htmlprogresselement':'the-progress-element','concept-appcache-completeness':'offline','handler-ondragend':'webappapis','dom-uda-port':'urls','concept-appcache-obsolete':'offline','dom-form-item':'the-form-element','dom-fs-formnovalidate':'form-submission','refsPINGBACK':'references','dom-script-charset':'the-script-element','attr-input-type-datetime-keyword':'the-input-element','unicode-character':'infrastructure','attr-embed-name':'obsolete','dom-object-archive':'obsolete','attr-textarea-wrap-hard-state':'the-textarea-element','textarea-effective-width':'rendering','refsRFC2045':'references','handler-window-onpagehide':'webappapis','dom-input-list':'common-input-element-apis','default-playback-start-position':'media-elements','global-identifiers-for-items':'links','the-table-element':'the-table-element','event-popstate':'history','marquee-current-loop-index':'obsolete','event-appcache-progress':'offline','dom-tree-accessors':'dom','dimRendering':'rendering','parse-a-url':'urls','attr-table-frame':'obsolete','attr-iframe-align':'obsolete','attr-input-type-datetime-local-keyword':'the-input-element','attr-media-preload-none':'media-elements','found-a-media-resource-specific-timed-track':'media-elements','dom-a-hostname':'the-a-element','webvtt-file':'infrastructure','concept-meter-optimum':'the-meter-element','multicol':'obsolete','following-hyperlinks-0':'links','stopped-due-to-errors':'media-elements','dom-windowmodal-returnvalue':'user-prompts','converting-a-character-width-to-pixels':'rendering','creator-browsing-context':'browsers','concept-dropzone-match':'dnd','dom-select-remove':'the-select-element','concept-fs-enctype':'form-submission','attr-tdth-align':'obsolete','active-range':'editing-apis','dom-option-label':'the-option-element','ancestor-browsing-context':'browsers','concept-meter-minimum':'the-meter-element','misnested-tags:-b-i-/b-/i':'the-end','refsXHTML1':'references','url-decomposition-idl-attributes':'urls','dom-ul-type':'obsolete','radio-button-state-(type=radio)':'states-of-the-type-attribute','attr-dir-ltr-state':'global-attributes','dom-datatransferitem-getasfile':'dnd','md-vevent-class':'links','concept-http-equivalent-headers':'urls','arbitrarycallback':'timers','event-drag':'dnd','url-state-(type=url)':'states-of-the-type-attribute','concept-appcache-fallback':'offline','anchor-points':'commands','dom-textarea-value':'the-textarea-element','attr-iframe-sandbox-allow-top-navigation':'browsers','drag-data-store-allowed-effects-state':'dnd','dom-track-readystate':'the-track-element','event-media-ratechange':'media-elements','dom-itemvalue':'links','dom-link-href':'the-link-element','attr-object-name':'the-object-element','attr-area-coords':'the-area-element','dom-datatransferitem-type':'dnd','attr-track-kind-metadata':'the-track-element','onerroreventhandler':'webappapis','attr-ol-type-keyword-lower-alpha':'the-ol-element','dom-command-ro-commanddisabled':'commands','the-location-bar-barprop-object':'browsers','attr-dropzone-move':'dnd','dom-location-protocol':'history','list-of-the-descendant-browsing-contexts':'browsers','text-track-label':'media-elements','compatibility-caseless':'infrastructure','newlines':'syntax','validitystate':'constraints','event-mediacontroller-canplay':'media-elements','attr-a-coords':'obsolete','dom-location-assign':'history','cors-enabled-fetch':'urls','attr-input-maxlength':'common-input-element-attributes','the-end':'the-end','attribute-value-(unquoted)-state':'tokenization','constructing-the-form-data-set':'constraints','dom-track-none':'the-track-element','the-ul-element':'the-ul-element','dom-tbody-align':'obsolete','metadata-content-0':'content-models','location':'history','event-media-abort':'media-elements','attr-hr-size':'obsolete','the-sup-element':'the-sub-and-sup-elements','concept-rel-extensions':'links','drag-data-store-default-feedback':'dnd','dom-navigator-platform':'system-state-and-capabilities','an-entry-with-persisted-user-state':'history','limited-quirks-mode':'infrastructure','attr-form-name':'the-form-element','event-offline':'offline','the-legend-element':'the-legend-element','big':'obsolete','refsPORTERDUFF':'references','spin-the-event-loop':'webappapis','md-vcard-rel-child':'links','do-not-apply':'common-input-element-attributes','dom-form-submit':'the-form-element','attr-command-icon':'the-command-element','attr-fs-formaction':'form-submission','dom-appcache-idle':'offline','handler-onmousemove':'webappapis','attr-fe-name-isindex':'attributes-common-to-form-controls','run-pre-click-activation-steps':'content-models','image-map':'image-maps','dom-param-name':'the-param-element','concept-appcache-upgrade':'offline','the-caption-element':'the-caption-element','parser-inserted':'the-script-element','facets':'commands','designMode':'editing','handler-window-onload':'webappapis','ignore':'infrastructure','valid-local-date-and-time-string':'common-microsyntaxes','ix-handler-window-onerror':'index','dom-media-network_idle':'media-elements','root-element-of-a-document-object':'infrastructure','introduction-6':'editing','input-author-notes':'forms','dom-a-protocol':'the-a-element','terminology':'infrastructure','dom-ol-reversed':'the-ol-element','converted-to-ascii-lowercase':'infrastructure','the-title-element-0':'dom','dom-table-tfoot':'the-table-element','attr-source-media':'the-source-element','has-an-element-in-table-scope':'parsing','valid-floating-point-number':'common-microsyntaxes','dom-cva-checkvalidatity':'constraints','dom-option-text':'the-option-element','refsECMA357':'references','examples':'examples','naming-form-controls':'attributes-common-to-form-controls','dom-fs-formaction':'form-submission','refsWIN874':'references','script-processing-src-sync':'the-script-element','bindings':'rendering','ix-event-handlers':'index','refsCSSATTR':'references','dom-applet-code':'obsolete','strictly-split-a-string':'common-microsyntaxes','dom-input-valueasnumber':'common-input-element-apis','list-of-text-tracks':'media-elements','dom-legend-form':'the-legend-element','opening-the-input-stream':'dynamic-markup-insertion','input-impl-notes':'states-of-the-type-attribute','attr-track-src':'the-track-element','script-processing-src-prepare':'the-script-element','document-family':'browsers','networking-task-source':'webappapis','noframes':'obsolete','attr-command-command':'the-command-element','selector-disabled':'links','maps-to-the-dimension-property':'rendering','attr-iframe-allowtransparency':'obsolete','dom-datatransfer-dropeffect':'dnd','names:-the-itemprop-attribute':'links','dom-document-write':'dynamic-markup-insertion','the-directionality':'global-attributes','the-list-attribute':'common-input-element-attributes','one-permitted-sandboxed-navigator':'browsers','dom-details-open':'the-details-element','escapingString':'the-end','content-type-sniffing:-image':'urls','the-noscript-element':'the-noscript-element','interactive-content':'content-models','dom-location-search':'history','dom-col-align':'obsolete','dom-tr-rowindex':'the-tr-element','handler-mediacontroller-onpause':'media-elements','event-dragleave':'dnd','attr-iframe-src':'the-iframe-element','using-the-rules-for':'parsing','refsPOLYGLOT':'references','refsRFC5322':'references','hidden-state-(type=hidden)':'states-of-the-type-attribute','valid-browsing-context-name':'browsers','command-facet-accesskey':'commands','attr-input-type-number-keyword':'the-input-element','self-closing-start-tag-state':'tokenization','security-and-privacy':'system-state-and-capabilities','script-data-end-tag-open-state':'tokenization','attr-fs-method-get-keyword':'form-submission','md-vcard-type-tel-textphone':'links','parsing-main-inhead':'tokenization','location-of-the-media-resource':'media-elements','attr-link-sizes-any':'links','refsRFC2318':'references','parser-pause-flag':'parsing','dom-document-fgcolor':'obsolete','container-frame-element':'rendering','ix-handler-onpause':'index','unfocusing-steps':'editing','dom-select-selectedoptions':'the-select-element','text-track-cue-line-position':'media-elements','refsCSP':'references','conversion-to-icalendar':'links','alphanumeric-ascii-characters':'common-microsyntaxes','acknowledgements':'acknowledgements','suffering-from-a-pattern-mismatch':'constraints','dom-document-querycommandvalue':'editing-apis','quirks-mode-doctypes':'tokenization','relevant-namespace-object':'infrastructure','stylesheet':'infrastructure','concept-input-mutable':'the-input-element','dom-option':'the-option-element','dom-col-span':'the-col-element','refsX690':'references','the-h6-element':'the-aside-element','text-track-cue-computed-line-position':'media-elements','perform-a-microtask-checkpoint':'webappapis','ix-handler-ondragend':'index','sections':'sections','ready-for-post-load-tasks':'the-end','dom-navigator-registerprotocolhandler':'system-state-and-capabilities','document-metadata':'the-html-element','refsCOMPUTABLE':'references','reconstruct-the-active-formatting-elements':'parsing','common-event-behaviors':'common-input-element-apis','dom-audiotracklist-gettrackbyid':'media-elements','range-state-(type=range)':'states-of-the-type-attribute','htmlulistelement':'the-ul-element','transferable-objects':'common-dom-interfaces','attr-input-align':'obsolete','the-iframe-element':'the-iframe-element','concept-property-value':'links','the-before-head-insertion-mode':'tokenization','bring-the-media-element-up-to-speed-with-its-new-media-controller':'media-elements','dom-hr-align':'obsolete','datatransfer':'dnd','dom-table-summary':'obsolete','refsMAILTO':'references','dom-select-multiple':'the-select-element','dom-marquee-width':'obsolete','constraint-validation':'constraints','script-processing-prepare':'the-script-element','md-work-author':'links','htmlparamelement':'the-param-element','concept-duration':'common-microsyntaxes','create-a-document-object':'history','reload-override-buffer':'dom','attr-ol-type-state-lower-roman':'the-ol-element','md-vcard-adr-locality':'links','embedding-custom-non-visible-data-with-the-data-*-attributes':'global-attributes','dom-datatransfer-items':'dnd','the-th-element':'the-th-element','current-entry-of-the-joint-session-history':'history','attr-iframe-marginheight':'obsolete','browsing-context-name':'browsers','force-async':'the-script-element','authors-using-html':'iana','drag-and-drop-processing-model':'dnd','character-encodings':'infrastructure','attr-img-ismap':'the-img-element','dom-track-error':'the-track-element','element-content-categories':'index','signed-integers':'common-microsyntaxes','dom-texttrackcue-vertical':'media-elements','refsCSSOM':'references','list-of-active-timers':'timers','intro-early-example':'introduction','md-vcard-adr-postal-code':'links','dom-timeranges-start':'media-elements','linkui':'the-link-element','prompt-to-unload-a-document':'history','dom-object-contentwindow':'the-object-element','parsing-urls':'urls','attr-col-char':'obsolete','valid-e-mail-address':'states-of-the-type-attribute','user-interaction-task-source':'webappapis','attr-th-scope-auto':'the-th-element','sandboxed-plugins-browsing-context-flag':'browsers','cors-cross-origin':'urls','attr-input-list':'common-input-element-attributes','unloading-document-visibility-change-steps':'history','item-types':'links','attr-colgroup-span':'the-colgroup-element','attr-object-archive':'obsolete','being-rendered':'rendering','event-appcache-noupdate':'offline','dom-location':'history','elements':'elements','mediaevents':'media-elements','dom-frameset-cols':'obsolete','a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos':'the-img-element','md-vcard-n':'links','editable':'editing-apis','termination-nesting-level':'history','plain-text-form-data':'constraints','application-cache-group':'offline','attr-marquee-truespeed':'obsolete','sandboxSubmitBlocked':'constraints','sandboxed-navigation-browsing-context-flag':'browsers','non-negative-integers':'common-microsyntaxes','relevant-application-cache':'offline','text-track-mode':'media-elements','valid-month-string':'common-microsyntaxes','syntax-attribute-name':'syntax','attr-translate':'global-attributes','documents-in-the-dom':'dom','htmlvideoelement':'the-video-element','attr-button-type-reset':'the-button-element','the-pattern-attribute':'common-input-element-attributes','drag-data-store-hot-spot-coordinate':'dnd','source-default-media':'the-source-element','attr-input-max':'common-input-element-attributes','align-descendants':'rendering','an-introduction-to-error-handling-and-strange-cases-in-the-parser':'the-end','extensibility':'infrastructure','set-the-event-handler-content-attribute-to-an-error':'webappapis','attr-area-shape-keyword-circle':'the-area-element','refsHMAC':'references','event-media-volumechange':'media-elements','cors-settings-attributes':'urls','doctype-legacy-string':'syntax','submit-body':'constraints','headings-and-sections':'headings-and-sections','dom-table-cellspacing':'obsolete','md-vcard-rel-spouse':'links','handler-ondragstart':'webappapis','parse-a-month-string':'common-microsyntaxes','handler-onmousewheel':'webappapis','dom-map-images':'the-map-element','dom-texttrack-kind-chapters':'media-elements','fire-a-synthetic-mouse-event':'webappapis','dom-option-t':'the-option-element','concept-input-max':'common-input-element-attributes','md-vcard-adr-extended-address':'links','concept-week':'common-microsyntaxes','dom-videotrack-id':'media-elements','md-vcard-url':'links','dom-mediacontroller-play':'media-elements','dom-media-readystate':'media-elements','dom-fe-disabled':'attributes-common-to-form-controls','current-media-controller':'media-elements','resources':'infrastructure','syntax-newlines':'syntax','media-resource':'media-elements','syntax-references':'common-microsyntaxes','attr-iframe-seamless':'the-iframe-element','event-media-error':'media-elements','determine-the-value-of-an-indexed-property':'infrastructure','valid-week-string':'common-microsyntaxes','valid-url':'urls','dom-texttrackcue-track':'media-elements','adjust-svg-attributes':'tokenization','before-attribute-value-state':'tokenization','concept-fetch-loaded':'urls','printing-steps':'user-prompts','categories':'forms','primary-context':'the-canvas-element','attr-output-for':'the-output-element','dom-link-rellist':'the-link-element','contenteditable':'editing','event-appcache-updateready':'offline','htmltableheadercellelement':'the-th-element','override-url':'history','the-sub-element':'the-sub-and-sup-elements','concept-column':'attributes-common-to-td-and-th-elements','ix-handler-onratechange':'index','cue-events':'media-elements','fire-a-dnd-event':'dnd','fakepath-orly':'common-input-element-apis','selector-default':'links','ix-handler-window-onfocus':'index','dom-textarea-required':'the-textarea-element','dom-htmlformcontrolscollection-nameditem':'common-dom-interfaces','ix-handler-onloadstart':'index','unloading-documents':'history','dom-a-rev':'obsolete','texttrack':'media-elements','application-cache':'offline','dimension-attributes':'dimension-attributes','browser-state':'offline','between-doctype-public-and-system-identifiers-state':'tokenization','handler-onmouseup':'webappapis','attr-embed-src':'the-embed-element','video':'the-video-element','foster-parenting':'tokenization','attr-img-name':'obsolete','dom-script-text':'the-script-element','affected-by-a-base-url-change':'infrastructure','index':'index','insert-a-character':'tokenization','the-hgroup-element':'the-hgroup-element','md-vevent-created':'links','dom-fieldset-elements':'the-fieldset-element','parsing-main-intable':'tokenization','events-0':'index','stall-timeout':'media-elements','attr-ol-reversed':'the-ol-element','valid-mime-type':'infrastructure','acronym':'obsolete','attr-meter-max':'the-meter-element','valid-time-string':'common-microsyntaxes','attr-contextmenu':'the-menu-element','attr-textarea-cols-value':'the-textarea-element','rcdata-end-tag-name-state':'tokenization','dom-input-step':'the-input-element','context-menu-state':'the-menu-element','the-strong-element':'the-strong-element','input-img-available':'states-of-the-type-attribute','timeouterror':'infrastructure','dom-uda-host':'urls','script-data-escape-start-dash-state':'tokenization','iframe-content-model':'the-iframe-element','dom-node-childnodes':'infrastructure','img-good':'the-img-element','dom-mediacontroller-paused':'media-elements','common-input-element-apis':'common-input-element-apis','domsettabletokenlist':'infrastructure','a-key-part-of-the-content':'the-img-element','floating-point-numbers':'common-microsyntaxes','refsSCSU':'references','htmldivelement':'the-div-element','dom-texttrack-addcue':'media-elements','media-element':'media-elements','the-constraint-validation-api':'constraints','uint8clampedarray':'infrastructure','script-data-end-tag-name-state':'tokenization','dom-marquee-start':'obsolete','refsBIDI':'references','table-http-equiv':'the-meta-element','the-hr-element':'the-hr-element','dom-input-align':'obsolete','microdata-dom-api':'links','link-type-next':'links','sandboxed-automatic-features-browsing-context-flag':'browsers','dom-tr-insertcell':'the-tr-element','validity-states':'constraints','unclosed-formatting-elements':'the-end','event-mediacontroller-ended':'media-elements','child-browsing-context':'browsers','dom-history-back':'history','dom-media-network_empty':'media-elements','default-button':'constraints','the-script-element':'the-script-element','escaping-the-vcard-text-string':'links','dom-textarea-type':'the-textarea-element','concept-select-size':'the-select-element','frame':'obsolete','navigating-auxiliary-browsing-contexts-in-the-dom':'browsers','syntax-attribute-value':'syntax','unit-of-related-similar-origin-browsing-contexts':'browsers','namespaceerror':'infrastructure','refsTYPEDARRAY':'references','htmlmeterelement':'the-meter-element','dom-media-currentsrc':'media-elements','dom-marquee-bgcolor':'obsolete','dom-tdth-align':'obsolete','content-type-sniffing-0':'urls','dom-link-type':'the-link-element','dom-texttrackcue-pauseonexit':'media-elements','an-iframe-srcdoc-document':'the-iframe-element','refsWIN949':'references','refsCSS':'references','the-step-attribute':'common-input-element-attributes','rel-alternate':'links','concept-meta-extensions':'the-meta-element','concept-embed-type':'the-embed-element','hyperlink-suffix':'the-a-element','attr-tdth-axis':'obsolete','creating-and-inserting-elements':'tokenization','handler-mediacontroller-onratechange':'media-elements','dom-audiotracklist-length':'media-elements','delay-the-load-event':'the-end','dom-area-shape':'the-area-element','decohints':'rendering','htmloptionscollection-0':'common-dom-interfaces','htmllielement':'the-li-element','refsDOMEVENTS':'references','the-toolbar-barprop-object':'browsers','a-purely-decorative-image-that-doesn\'t-add-any-information':'the-img-element','dom-a-port':'the-a-element','attr-img-vspace':'obsolete','windowmodal':'user-prompts','the-script-block\'s-fallback-character-encoding':'the-script-element','dom-img-align':'obsolete','whitelisted-scheme':'system-state-and-capabilities','attr-img-longdesc':'obsolete','md-work-title':'links','focusable':'editing','number-of-days-in-month-month-of-year-year':'common-microsyntaxes','found-another-video-track':'media-elements','read-xml':'history','trackevent':'media-elements','dom-windowtimers-settimeout':'timers','handler-onshow':'webappapis','attr-media-crossorigin':'media-elements','the-canvas-element':'the-canvas-element','attr-meta-http-equiv-content-type':'the-meta-element','parsing-xhtml-documents':'the-xhtml-syntax','attr-dataformatas':'obsolete','event-handlers-on-elements,-document-objects,-and-window-objects':'webappapis','fetch':'urls','refsWHATWGBLOG':'references','before-doctype-system-identifier-state':'tokenization','attr-style-media':'the-style-element','concept-select-toggle':'the-select-element','invalidaccesserror':'infrastructure','links':'links','dom-document-domain':'browsers','submit-get-action':'constraints','networkerror':'infrastructure','list-of-dragged-nodes':'dnd','event-appcache-checking':'offline','videotracklist':'media-elements','refsARIA':'references','parsing-main-inframeset':'tokenization','dom-texttrackcue-line':'media-elements','a-style-sheet-that-is-blocking-scripts':'styling','attr-meta-http-equiv':'the-meta-element','parsing-html-fragments':'the-end','htmldatalistelement':'the-datalist-element','media-resource-end-position':'media-elements','ix-handler-onloadeddata':'index','refsUTR36':'references','dom-input-stepdown':'common-input-element-apis','the-sub-and-sup-elements':'the-sub-and-sup-elements','specially-focusable':'editing','dom-applet-name':'obsolete','after-doctype-name-state':'tokenization','algorithm-for-growing-downward-growing-cells':'attributes-common-to-td-and-th-elements','dom-appcache-obsolete':'offline','the-style-element':'the-style-element','refsISO8601':'references','common-idioms':'links','dom-img-src':'the-img-element','browsing-context-nested-through':'browsers','ix-handler-onmouseout':'index','refsRFC1494':'references','translate-enabled':'global-attributes','dom-dialog-showmodal':'commands','concept-appcache-init':'offline','origin-0':'browsers','event-appcache-obsolete':'offline','ix-handler-window-onpagehide':'index','focus-management':'editing','attr-img-alt':'the-img-element','context-menus':'the-menu-element','dom-appcache-checking':'offline','read-ua-inline':'history','handler-oncontextmenu':'webappapis','dom-texttrackcue-starttime':'media-elements','refsXML':'references','cors-settings-attribute':'urls','attr-button-type-reset-state':'the-button-element','concept-mo-invoke':'infrastructure','dom-stylesheet-disabled':'infrastructure','using-the-command-element-to-define-a-command':'commands','dom-media-seekable':'media-elements','parsing-main-inheadnoscript':'tokenization','element':'infrastructure','script-processing-src':'the-script-element','attr-iframe-marginwidth':'obsolete','sourcing-in-band-text-tracks':'media-elements','concept-fetch-total':'urls','xml-fragment-parsing-algorithm':'the-xhtml-syntax','last-selected-source':'the-img-element','applicationcache':'offline','frames-and-framesets':'rendering','concept-fs-novalidate':'form-submission','dom-a-type':'the-a-element','attr-track-kind-keyword-metadata':'the-track-element','send-a-signal':'offline','valid-media-query':'common-microsyntaxes','mouseeventinit':'infrastructure','auxiliary-browsing-context':'browsers','attr-input-type-hidden-keyword':'the-input-element','coercing-an-html-dom-into-an-infoset':'the-end','telephone-state-(type=tel)':'states-of-the-type-attribute','documentEncoding':'parsing','attr-datasrc':'obsolete','htmlinputelement':'the-input-element','ix-handler-oninput':'index','dom-track-track':'the-track-element','htmloptionelement':'the-option-element','attr-input-type-file-keyword':'the-input-element','the-base-element':'the-base-element','history-traversal-task-source':'webappapis','concept-ltr':'global-attributes','the-command-element':'the-command-element','dom-img-complete':'the-img-element','the-execution-of-scripts-that-are-moving-across-multiple-documents':'the-end','media-controller-mute-override':'media-elements','dom-document-querycommandstate':'editing-apis','dom-uda-pathname':'urls','dom-command-radiogroup':'the-command-element','script-processing-inline':'the-script-element','concept-textarea-raw-value':'the-textarea-element','abort-a-document':'history','handler-oncanplay':'webappapis','attr-select-required':'the-select-element','xhtml-document':'infrastructure','skip-white_space-characters':'common-microsyntaxes','concept-marquee-off':'obsolete','dropEffect-initialization':'dnd','dom-document-images':'dom','activation-behavior':'content-models','attr-input-type-checkbox-keyword':'the-input-element','parent-browsing-context':'browsers','dom-source-type':'the-source-element','transparent':'content-models','handler-onplay':'webappapis','event-handler-content-attributes':'webappapis','linkTypes':'links','text-0':'infrastructure','cookie-string':'infrastructure','the-html-element':'the-html-element','attr-col-valign':'obsolete','processing-model-0':'attributes-common-to-td-and-th-elements','processing-model-1':'webappapis','processing-model-2':'webappapis','processing-model-3':'editing','refsMATHML':'references','concept-fs-action':'form-submission','attr-progress-max':'the-progress-element','md-vcard-lang':'links','text-track-cue-active-flag':'media-elements','offsets-into-the-media-resource':'media-elements','a-type-that-the-user-agent-knows-it-cannot-render':'media-elements','dom-img-naturalheight':'the-img-element','runtime-script-errors':'webappapis','constraints':'constraints','history-notes':'history','refsJSON':'references','attr-input-multiple':'common-input-element-attributes','the-input-element-as-a-color-well':'rendering','htmlfontelement':'obsolete','refsWEBIDL':'references','dom-htmloptionscollection-setter':'common-dom-interfaces','dom-audio-s':'the-audio-element','conformance-classes':'infrastructure','dom-hashchangeevent-oldurl':'history','submit-mailto-body':'constraints','meta':'the-meta-element','dom-a-hreflang':'the-a-element','attr-optgroup-disabled':'the-optgroup-element','refsWEBWORKERS':'references','sandboxed-forms-browsing-context-flag':'browsers','refsPNG':'references','text-track-cue-vertical-growing-right-writing-direction':'media-elements','dom-iframe-frameborder':'obsolete','dom-media-network_no_source':'media-elements','ix-handler-onclick':'index','ix-handler-onchange':'index','document-level-focus-apis':'editing','selector-indeterminate':'links','the-before-html-insertion-mode':'tokenization','most-recently-reported-playback-state':'media-elements','script-processing-start':'the-script-element','the-hidden-attribute':'editing','concept-meter-low':'the-meter-element','concept-marquee-on':'obsolete','handler-onerror':'webappapis','navigating-across-documents':'history','the-col-element':'the-col-element','dom-texttrack-removecue':'media-elements','math':'mathml','get-the-object':'converting-html-to-other-formats','webvtt-cue-settings':'infrastructure','dom-input-defaultvalue':'the-input-element','attr-input-type-month-keyword':'the-input-element','the-translate-attribute':'global-attributes','the-placeholder-attribute':'common-input-element-attributes','concept-role-none':'wai-aria','close-the-dialog':'commands','dom-document-defaultview':'browsers','character-reference-in-data-state':'tokenization','suffering-from-being-missing':'constraints','local-date-and-time-state-(type=datetime-local)':'states-of-the-type-attribute','dom-iframe-sandbox':'the-iframe-element','text-track-cue-snap-to-lines-flag':'media-elements','dom-domimplementation-createdocument':'infrastructure','command-facet-disabledstate':'commands','attr-a-methods':'obsolete','refsCOOKIES':'references','usage-summary':'usage-summary','refsRFC4329':'references','top-level-microdata-items':'links','security-forms':'constraints','dom-media-pause':'media-elements','transferable':'common-dom-interfaces','ix-handler-onkeydown':'index','times':'common-microsyntaxes','attr-details-open':'the-details-element','home-subtree':'infrastructure','dom-document-namedItem-which':'dom','dom-document-links':'dom','microdata-error':'links','htmltabledatacellelement':'the-td-element','application/x-www-form-urlencoded-decoding-algorithm':'constraints','the-meta-element':'the-meta-element','concept-input-max-default':'common-input-element-attributes','dom-window-menubar':'browsers','dom-object-typemustmatch':'the-object-element','htmlbasefontelement':'obsolete','other-link-types':'links','attr-abbr-title':'the-abbr-element','interactively-validate-the-constraints':'constraints','refsWEBMCG':'references','attr-script-for':'obsolete','dom-document-commands':'commands','suffering-from-an-overflow':'constraints','a-group-of-images-that-form-a-single-larger-picture-with-no-links':'the-img-element','selector-enabled':'links','concept-input-type-image-coordinate':'states-of-the-type-attribute','dom-textarea/input-selectionend':'textFieldSelection','apis-for-creating-and-navigating-browsing-contexts-by-name':'browsers','sandboxCookies':'dom','attr-area-alt':'the-area-element','dom-window':'browsers','concept-row-group':'attributes-common-to-td-and-th-elements','sandboxOrigin':'browsers','represented-by-the-collection':'infrastructure','refsGBK':'references','concept-spellcheck-default-true':'editing-apis','dom-canvas-toblob':'the-canvas-element','event-media-loadedmetadata':'media-elements','dom-command-ro-commandlabel':'commands','sectioning-content-0':'content-models','dom-node-insertbefore':'infrastructure','calling-scripts':'webappapis','telephone-type-strings':'links','htmlelement':'elements','script-data-escaped-state':'tokenization','selector-required':'links','the-page':'rendering','url-port':'urls','refsRFC3864':'references','handler-window-onstorage':'webappapis','enumerated-attribute':'common-microsyntaxes','clear-the-stack-back-to-a-table-row-context':'tokenization','non-replaced-elements':'rendering','dom-ol-type':'the-ol-element','decoded-as-utf-8,-with-error-handling':'infrastructure','the-event-handler-processing-algorithm':'webappapis','resolve-a-url':'urls','dom-mediacontroller-waiting':'media-elements','locked-for-reset':'the-form-element','marquee-scroll-distance':'obsolete','space-separated-tokens':'common-microsyntaxes','creating-scripts':'webappapis','direction-of-playback':'media-elements','the-details-element-0':'rendering','dom-font-size':'obsolete','htmlallcollection-0':'common-dom-interfaces','supported-property-indices':'infrastructure','has-no-style-sheet-that-is-blocking-scripts':'styling','dom-col-valign':'obsolete','parsing-main-incdata':'tokenization','client-side-form-validation':'forms','concept-textarea-dirty':'the-textarea-element','await-a-stable-state':'webappapis','using-the-input-element-to-define-a-command':'commands','xml-documents':'infrastructure','the-indicated-part-of-the-document':'history','attr-menu-type':'the-menu-element','md-vcard-rev':'links','other-applicable-specifications':'infrastructure','doctype-system-identifier-(single-quoted)-state':'tokenization','barprop':'browsers','invalidnodetypeerror':'infrastructure','dom-a-media':'the-a-element','dom-audiotrack-enabled':'media-elements','dom-document-querycommandindeterm':'editing-apis','concept-link-obtain':'the-link-element','supported-property-names':'infrastructure','dom-command-ro-commandhidden':'commands','value-track-kind-sign':'media-elements','links,-forms,-and-navigation':'rendering','webvtt-parser':'infrastructure','dom-command-ro-commandtype':'commands','metadata-content':'content-models','dom-iframe-seamless':'the-iframe-element','parse-a-date-string':'common-microsyntaxes','dom-body-background':'obsolete','document-base-url':'urls','expose-a-user-interface-to-the-user':'media-elements','selectors':'links','attr-object-vspace':'obsolete','documents':'dom','dom-texttrackcue-size':'media-elements','unexpected-markup-in-tables':'the-end','attr-iframe-sandbox-allow-popups':'browsers','attr-hyperlink-rel':'links','attr-object-hspace':'obsolete','ix-handler-onsuspend':'index','refsRFC2246':'references','refsXSLT10':'references','media-resources-with-multiple-media-tracks':'media-elements','attr-meta-charset':'the-meta-element','attr-marquee-behavior-slide':'obsolete','code-unit':'infrastructure','handler-oncancel':'webappapis','transparently-follow-the-redirect':'urls','script-processing-empty':'the-script-element','dom-image-w':'the-img-element','simple-cross-origin-request':'infrastructure','presentational-markup':'introduction','dom-img-border':'obsolete','attr-command-type-state-radio':'the-command-element','dom-texttrackcue-id':'media-elements','scriptForeignEndTag':'tokenization','dom-audiotrack-language':'media-elements','handler-onkeypress':'webappapis','attr-tdth-width':'obsolete','authority-based-url':'urls','dom-tdth-headers':'attributes-common-to-td-and-th-elements','htmlcanvaselement':'the-canvas-element','dom-dir':'global-attributes','concept-js-deref':'webappapis','concept-output-defaultvalue':'the-output-element','dom-classlist':'global-attributes','handler-mediacontroller-onplay':'media-elements','url':'urls','forget-the-media-element\'s-media-resource-specific-text-tracks':'media-elements','obsolete-permitted-doctype-string':'syntax','filelist':'infrastructure','the-link-element':'the-link-element','url-fragment':'urls','ix-handler-ondragleave':'index','event-mediacontroller-volumechange':'media-elements','refsCLDR':'references','the-form-element':'the-form-element','dom-translate':'global-attributes','timeline-offset':'media-elements','rules-for-parsing-floating-point-number-values':'common-microsyntaxes','text':'syntax','syntaxerror':'infrastructure','javascript-protocol':'webappapis','attr-ol-start':'the-ol-element','dom-frame-contentdocument':'obsolete','dom-tr-choff':'obsolete','attr-time-datetime':'the-time-element','the-body-element-0':'dom','dom-media-seeking':'media-elements','rcdata-elements':'syntax','html-documents':'infrastructure','attr-table-cellpadding':'obsolete','pause':'webappapis','defined-property-name':'links','sectioning-content':'content-models','notsupportederror':'infrastructure','the-html-element-0':'dom','dom-location-port':'history','refsCSSVALUES':'references','attr-area-shape-keyword-polygon':'the-area-element','application-cache-download-process':'offline','dom-document-vlinkcolor':'obsolete','attr-body-bgcolor':'obsolete','pending-parsing-blocking-script':'the-script-element','dom-document-clear':'obsolete','media-controller-duration':'media-elements','refsPSL':'references','comma-separated-tokens':'common-microsyntaxes','dialogs-implemented-using-separate-documents':'user-prompts','attr-track-kind':'the-track-element','labeled-control':'the-label-element','set-up-the-default-static-position':'commands','syntax':'syntax','attr-ol-type-state-upper-alpha':'the-ol-element','the-figcaption-element':'the-figcaption-element','effectAllowed-initialization':'dnd','dom-datatransfer-addelement':'dnd','recommended-reading':'introduction','refsUTF8DET':'references','event-mediacontroller-durationchange':'media-elements','selector-link':'links','navigatoronline':'offline','event-click':'infrastructure','dom-object-codebase':'obsolete','dom-input-placeholder':'the-input-element','the-kbd-element':'the-kbd-element','refsWSP':'references','value-track-kind-commentary':'media-elements','resource-sharing-check':'infrastructure','dom-textarea-readonly':'the-textarea-element','selecting-names-when-defining-vocabularies':'links','the-head-element-0':'dom','dom-open':'browsers','x-this':'introduction','seamless-browsing-context-flag':'the-iframe-element','aborting-a-document-load':'history','attr-marquee-direction-up':'obsolete','global-identifier':'links','handler-ondrop':'webappapis','concept-month':'common-microsyntaxes','attr-video-poster':'the-video-element','dom-mediacontroller-pause':'media-elements','handler-window-onresize':'webappapis','button-state-(type=button)':'states-of-the-type-attribute','img-none':'the-img-element','dom-mediacontroller-readystate':'media-elements','normal-elements':'syntax','dom-img-hspace':'obsolete','link-type-prefetch':'links','custom-request-headers':'infrastructure','dom-a-host':'the-a-element','dom-meter-low':'the-meter-element','handler-appcache-onnoupdate':'offline','ix-handler-window-onbeforeunload':'index','interfaces':'index','attr-itemtype':'links','ix-handler-window-onhashchange':'index','appropriate-end-tag-token':'tokenization','the-tfoot-element':'the-tfoot-element','basefont':'obsolete','dom-object-name':'the-object-element','focus':'editing','dom-script-type':'the-script-element','the-datalist-element':'the-datalist-element','dom-embed-caller':'the-embed-element','dom-output-htmlfor':'the-output-element','attr-table-bgcolor':'obsolete','the-datatransferitem-interface':'dnd','md-vcard-geo':'links','dom-node-parentnode':'infrastructure','attr-itemscope':'links','dom-meter-high':'the-meter-element','current-node':'parsing','commands':'commands','initial-playback-position':'media-elements','flow-content':'content-models','plugin':'infrastructure','common-dom-interfaces':'common-dom-interfaces','dom-element-id':'infrastructure','dom-tbody-deleterow':'the-tbody-element','syntax-tag-name':'syntax','attr-body-marginright':'obsolete','dom-a-hash':'the-a-element','attr-meta-scheme':'obsolete','valid-normalized-local-date-and-time-string':'common-microsyntaxes','attributes':'element-definitions','webvtt-file-using-chapter-title-text':'infrastructure','dom-object-align':'obsolete','ix-handler-onmousedown':'index','bidirectional-algorithm-formatting-character-ranges':'requirements-relating-to-bidirectional-algorithm-formatting-characters','dom-mediacontroller-muted':'media-elements','create-a-date-object':'infrastructure','dom-div-align':'obsolete','valid-date-string':'common-microsyntaxes','attr-iframe-scrolling':'obsolete','datatransferitem':'dnd','md-vevent-duration':'links','attr-canvas-width':'the-canvas-element','concept-date':'common-microsyntaxes','dom-textarea-textlength':'the-textarea-element','refsBEZIER':'references','pending-table-character-tokens':'tokenization','additional-allowed-character':'tokenization','dom-media-audiotracks':'media-elements','microdata-and-other-namespaces':'links','handler-onsubmit':'webappapis','attr-img-lowsrc':'obsolete','media-element-load-algorithm':'media-elements','dom-audiotrack-label':'media-elements','refsSTUN':'references','dom-textarea-placeholder':'the-textarea-element','seekUpdate':'media-elements','text/plain-encoding-algorithm':'constraints','event-media-seeked':'media-elements','date-and-time-state-(type=datetime)':'states-of-the-type-attribute','form-owner':'association-of-controls-and-forms','attr-crossorigin-anonymous':'urls','refsWEBLINK':'references','resolving-urls':'urls','dom-param-type':'obsolete','dom-menu-type':'the-menu-element','handler-mediacontroller-onplaying':'media-elements','event-pagehide':'history','htmlframeelement':'obsolete','refsWEBSOCKET':'references','dom-track-loading':'the-track-element','refsUNIVCHARDET':'references','dom-appcache-uncached':'offline','dom-videotracklist-length':'media-elements','dom-node-ownerdocument':'infrastructure','the-element-pointers':'parsing','concept-input-value-dirty-flag':'the-input-element','dom-media-playbackrate':'media-elements','dom-style-media':'the-style-element','dom-dl-compact':'obsolete','selector-visited':'links','attr-input-src':'states-of-the-type-attribute','attr-iframe-sandbox-allow-forms':'browsers','rules-for-parsing-a-list-of-integers':'common-microsyntaxes','attr-tr-valign':'obsolete','attr-menu-label':'the-menu-element','playing-the-media-resource':'media-elements','the-applet-element':'obsolete','paused-for-in-band-content':'media-elements','defining-term':'the-dfn-element','the-textarea-element':'the-textarea-element','attr-dim-width':'dimension-attributes','dom-datatransfer-cleardata':'dnd','dom-legend-align':'obsolete','concept-param-parameter':'the-param-element','parse-a-week-string':'common-microsyntaxes','md-vcard-type-tel-home':'links','img-yes':'the-img-element','earliest-possible-position':'media-elements','outline-depth':'headings-and-sections','scripting-flag':'parsing','valid-integer':'common-microsyntaxes','rawtext-end-tag-open-state':'tokenization','event-handlers':'webappapis','event-firing':'webappapis','text-track-readiness-state':'media-elements','ix-handler-onshow':'index','dom-param-valuetype':'obsolete','the-hr-element-0':'rendering','dom-itemtype':'links','immediate-user-selection':'dnd','dom-mediacontroller-playbackrate':'media-elements','text-track-cue-middle-alignment':'media-elements','attr-object-codetype':'obsolete','noopener':'browsers','concept-appcache-master':'offline','dom-media-network_loading':'media-elements','consume-a-character-reference':'tokenization','submit-data-post':'constraints','nested-browsing-contexts':'browsers','dom-optgroup-disabled':'the-optgroup-element','the-h2-element':'the-aside-element','tag-open-state':'tokenization','the-document\'s-domain':'browsers','dom-command-disabled':'the-command-element','attr-media-autoplay':'media-elements','htmldlistelement':'the-dl-element','the-tbody-element':'the-tbody-element','link-type-search':'links','dom-texttrack-cues':'media-elements','dom-output-defaultvalue':'the-output-element','dom-applicationcache':'offline','document.writeln()':'dynamic-markup-insertion','sequential-focus-navigation-and-the-tabindex-attribute':'editing','text-track-model':'media-elements','handler-window-ononline':'webappapis','concept-appcache-manifest-fallback':'offline','other-pragma-directives':'the-meta-element','htmlformcontrolscollection':'common-dom-interfaces','concept-events-trusted':'infrastructure','dom-texttrack-mode':'media-elements','md-work-license':'links','center':'obsolete','refsWIN1252':'references','dom-meter-min':'the-meter-element','unit-of-related-browsing-contexts':'browsers','md-vcard-n-additional-name':'links','drag-data-store':'dnd','dom-area-nohref':'obsolete','handler-onloadstart':'webappapis','ix-handler-ondragenter':'index','textFieldSelection':'textFieldSelection','audio':'the-audio-element','dom-document-alinkcolor':'obsolete','sandboxing-flag-set':'browsers','concept-frag-parse-context':'the-end','element-dfn-contexts':'element-definitions','htmlcollection':'infrastructure','attr-tdth-nowrap':'obsolete','dom-track-loaded':'the-track-element','hidden-elements':'rendering','dom-link-target':'obsolete','the-section-element':'the-section-element','the-drag-data-store':'dnd','link-type-stylesheet':'links','week-number-of-the-last-day':'common-microsyntaxes','handler-texttrackcue-onenter':'media-elements','events-and-the-window-object':'webappapis','attr-fs-enctype-text':'form-submission','autofocusing-a-form-control':'attributes-common-to-form-controls','nextid':'obsolete','syntax-end-tag':'syntax','md-vcard-rel-agent':'links','dom-frameelement':'browsers','elements-in-the-dom':'elements','handler-onmousedown':'webappapis','refsRFC3023':'references','attr-link-hreflang':'the-link-element','dom-history-forward':'history','attr-html-version':'obsolete','editing-host':'editing-apis','convert-a-domstring-to-a-sequence-of-unicode-characters':'infrastructure','navigatorstorageutils':'system-state-and-capabilities','feed-the-parser':'the-xhtml-syntax','value-track-kind-subtitle':'media-elements','concept-dnd-rw':'dnd','current-table':'parsing','dom-media-loop':'media-elements','dom-htmlallcollection-tags':'common-dom-interfaces','the-text-tracks-are-ready':'media-elements','refsXMLBASE':'references','attr-area-shape-poly':'the-area-element','refsSHA1':'references','percentages-and-dimensions':'common-microsyntaxes','dom-col-choff':'obsolete','dom-option-tv':'the-option-element','dom-meta-name':'the-meta-element','dom-document-querycommandsupported':'editing-apis','the-fieldset-element':'the-fieldset-element','extracting-json':'converting-html-to-other-formats','dom-a-target':'the-a-element','dom-document-activeelement':'editing','attr-xml-lang':'global-attributes','sample-handler-impl':'system-state-and-capabilities','concept-error-handled':'webappapis','attr-link-target':'obsolete','empty-cell':'attributes-common-to-td-and-th-elements','using-the-command-attribute-on-command-elements-to-define-a-command-indirectly':'commands','concept-input-value-date-string':'the-input-element','dom-document-createelement':'infrastructure','dom-form-checkvalidity':'the-form-element','table-layout-techniques':'the-table-element','dom-navigator-registercontenthandler':'system-state-and-capabilities','sandboxed-origin-browsing-context-flag':'browsers','attr-button-type-button-state':'the-button-element','dom-htmlselectelement-setter':'the-select-element','htmlolistelement':'the-ol-element','dom-iframe-contentdocument':'the-iframe-element','attr-command-label':'the-command-element','attr-input-pattern':'common-input-element-attributes','how-to-read-this-specification':'introduction','playing-media-controller':'media-elements','dom-location-reload':'history','concept-input-list':'common-input-element-attributes','dom-input-maxlength':'the-input-element','dom-p-align':'obsolete','attr-link-rel':'the-link-element','media-controller-default-playback-rate':'media-elements','htmlformelement':'the-form-element','synchronising-multiple-media-elements':'media-elements','embedded-content-2':'content-models','dom-tdth-nowrap':'obsolete','attr-body-link':'obsolete','an-image-not-intended-for-the-user':'the-img-element','handler-onreadystatechange':'webappapis','htmlanchorelement':'the-a-element','md-vcard-kind-group':'links','rules-for-serializing-simple-color-values':'common-microsyntaxes','the-datatransfer-interface':'dnd','dom-hr-color':'obsolete','attr-textarea-wrap':'the-textarea-element','attr-datafld':'obsolete','md-vevent-dtend':'links','media-controller-position':'media-elements','ix-handler-onmousemove':'index','the-dir-attribute':'global-attributes','the-doctype':'syntax','dom-location-hostname':'history','common-microsyntaxes':'common-microsyntaxes','refsRFC2965':'references','the-input-element-as-a-checkbox-and-radio-button-widgets':'rendering','dom-meta-httpequiv':'the-meta-element','attr-img-border':'obsolete','concept-appcache-manifest':'offline','refsIANALINKTYPE':'references','dom-validitystate-patternmismatch':'constraints','dom-cva-willvalidate':'constraints','refsRFC2397':'references','create-an-impotent-script':'webappapis','md-vcard-label-value':'links','suffering-from-a-type-mismatch':'constraints','event-appcache-error':'offline','meta-author':'the-meta-element','current-drag-operation':'dnd','the-small-element':'the-small-element','custom-data-attribute':'global-attributes','session-history-entry':'history','sandboxed-auxiliary-navigation-browsing-context-flag':'browsers','dom-frame-src':'obsolete','dom-option-value':'the-option-element','event-media-durationchange':'media-elements','concept-origin-alias':'browsers','dom-lang':'global-attributes','attribute\'s-serialized-name':'the-end','dom-style':'global-attributes','focusing-steps':'editing','potentially-playing':'media-elements','refsEUCJP':'references','browsing-context-scope-origin':'browsers','attr-ul-compact':'obsolete','ix-handler-onselect':'index','extracting-encodings-from-meta-elements':'urls','navigatorid':'system-state-and-capabilities','dom-media-currenttime':'media-elements','attr-input-type-reset-keyword':'the-input-element','read-multipart-x-mixed-replace':'history','mime-type':'infrastructure','create-a-drag-data-store':'dnd','valid-hash-name-reference':'common-microsyntaxes','attr-command-type-keyword-command':'the-command-element','dom-fs-method':'form-submission','event-mediacontroller-play':'media-elements','md-vcard-label-type':'links','command-facet-hint':'commands','event-input-input':'common-input-element-apis','event-mediacontroller-waiting':'media-elements','selector-read-write':'links','md-vcard-type-tel-work':'links','dom-lfe-labels':'the-label-element','dom-datatransfer-setdata':'dnd','text-track-showing-by-default':'media-elements','column-header':'attributes-common-to-td-and-th-elements','loading-the-media-resource':'media-elements','dom-iscontenteditable':'editing','dom-navigator-isprotocolhandlerregistered':'system-state-and-capabilities','svg':'mathml','ix-handler-oninvalid':'index','md-vcard-adr':'links','dom-datatransfer-types':'dnd','manifests':'offline','the-b-element':'the-b-element','vaguer-moments-in-time':'common-microsyntaxes','the-css-user-agent-style-sheet-and-presentational-hints':'rendering','pagetransitionevent':'history','content-models':'content-models','media-data':'media-elements','active-sandboxing-flag-set':'browsers','command-facet-icon':'commands','concept-form-reset-control':'constraints','dom-windowmodal-dialogarguments':'user-prompts','algorithm-for-processing-row-groups':'attributes-common-to-td-and-th-elements','attr-link-rev':'obsolete','dom-select-add':'the-select-element','potentially-cors-enabled-fetch':'urls','attr-fe-name':'attributes-common-to-form-controls','event-drop':'dnd','attr-area-shape-keyword-circ':'the-area-element','tag-cloud':'links','no-translate':'global-attributes','serializability-of-script-execution':'introduction','already-started':'the-script-element','attr-input-type-search-keyword':'the-input-element','handler-ondragenter':'webappapis','jump-to-a-code-entry-point':'webappapis','handler-onpause':'webappapis','handler-onseeked':'webappapis','dom-navigator-unregistercontenthandler':'system-state-and-capabilities','dom-texttrack-kind-descriptions':'media-elements','dom-embed-name':'obsolete','refsDASH':'references','refsRFC4366':'references','conversion-to-vcard':'links','fully-active':'browsers','script-processing-style-delayed':'the-script-element','htmllabelelement':'the-label-element','rateUpdate':'media-elements','internal-structured-cloning-algorithm':'common-dom-interfaces','current-playback-position':'media-elements','attr-textarea-maxlength':'the-textarea-element','refsNPN':'references','concept-rtl':'global-attributes','attr-track-kind-keyword-chapters':'the-track-element','width-of-the-select\'s-labels':'rendering','dom-location-host':'history','comment-start-state':'tokenization','dom-texttrackcue-align':'media-elements','the-select-element-0':'rendering','handler-oncanplaythrough':'webappapis','dom-object-contentdocument':'the-object-element','refsAES128CTR':'references','attr-legend-align':'obsolete','end-tags':'syntax','disowned-its-opener':'browsers','source-browsing-context':'history','mime-types':'media-elements','dom-marquee-height':'obsolete','dom-media-duration':'media-elements','valid-lowercase-simple-color':'common-microsyntaxes','tokenizing-character-references':'tokenization','dom-input-value-filename':'common-input-element-apis','named-character-references':'named-character-references','the-stack-of-open-elements':'parsing','dom-trackevent-track':'media-elements','concept-range':'infrastructure','attr-object-border':'obsolete','md-vcard-kind-location':'links','attr-tbody-charoff':'obsolete','paused-for-user-interaction':'media-elements','space-character':'common-microsyntaxes','getting-media-metadata':'media-elements','cdata-rcdata-restrictions':'syntax','dom-table-align':'obsolete','rel-icon':'links','track-language':'the-track-element','dom-ol-start':'the-ol-element','outlines':'headings-and-sections','dom-menu-label':'the-menu-element','attribute-name-state':'tokenization','blocked-media-element':'media-elements','htmltablecellelement':'attributes-common-to-td-and-th-elements','initiate-the-drag-and-drop-operation':'dnd','the-samp-element':'the-samp-element','text-track-cue-vertical-growing-left-writing-direction':'media-elements','submit-button-state-(type=submit)':'states-of-the-type-attribute','url-manipulation-and-creation':'urls','concept-input-checked-dirty':'the-input-element','dom-tdth-cellindex':'attributes-common-to-td-and-th-elements','security-nav':'browsers','grouping-content':'grouping-content','handler-window-onscroll':'webappapis','dom-progress-value':'the-progress-element','dom-link-disabled':'the-link-element','event-appcache-downloading':'offline','comment-end-state':'tokenization','has-an-element-in-scope':'parsing','attr-canvas-height':'the-canvas-element','current-entry':'history','link-type-tag':'links','refsUNICODE':'references','text-track-language':'media-elements','attr-object-codebase':'obsolete','dom-keygen-type':'the-keygen-element','dom-location-replace':'history','structured-clone':'common-dom-interfaces','attr-input-autocomplete-default-state':'common-input-element-attributes','refsCP51932':'references','start-tags':'syntax','comment-end-dash-state':'tokenization','attr-object-typemustmatch':'the-object-element','content-categories':'content-models','event-mediacontroller-canplaythrough':'media-elements','parsing-main-incolgroup':'tokenization','attr-marquee-behavior-alternate':'obsolete','the-optgroup-element':'the-optgroup-element','concept-select-option-list':'the-select-element','dom-document-0':'browsers' }; var fragid = window.location.hash.substr(1); if (!fragid) { /* handle section-foo.html links from the old multipage version, and broken foo.html from the new version */ var m = window.location.pathname.match(/\/(?:section-)?([\w\-]+)\.html/); if (m) fragid = m[1]; } var page = fragment_links[fragid]; if (page) { window.location.replace(page+'.html#'+fragid); } --- NEW FILE: the-section-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.4.2 The section element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-body-element.html" title="4.4.1 The body element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-nav-element.html" title="4.4.3 The nav element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-body-element.html">← 4.4.1 The body element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-nav-element.html">4.4.3 The nav element →</a> </div> <h4 id="the-section-element"><span class="secno">4.4.2 </span>The <dfn><code>section</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#sectioning-content-0">Sectioning content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-section-element">section</a></code> element <a href="rendering.html#represents">represents</a> a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.</p> <p class="example">Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.</p> <p class="note">Authors are encouraged to use the <code><a href="the-article-element.html#the-article-element">article</a></code> element instead of the <code><a href="#the-section-element">section</a></code> element when it would make sense to syndicate the contents of the element.</p> <p class="note" id="use-div-for-wrappers">The <code><a href="#the-section-element">section</a></code> element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the <code><a href="the-div-element.html#the-div-element">div</a></code> element instead. A general rule is that the <code><a href="#the-section-element">section</a></code> element is appropriate only if the element's contents would be listed explicitly in the document's <a href="headings-and-sections.html#outline">outline</a>.</p> <div class="example"> <p>In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.</p> <pre><article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article></pre> <p>Notice how the use of <code><a href="#the-section-element">section</a></code> means that the author can use <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code> elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.</p> </div> <div class="example"> <p>Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony.</p> <pre><!DOCTYPE Html> <Html ><Head ><Title >Graduation Ceremony Summer 2022</Title ></Head ><Body ><H1 >Graduation</H1 ><Section ><H1 >Ceremony</H1 ><P >Opening Procession</P ><P >Speech by Validactorian</P ><P >Speech by Class President</P ><P >Presentation of Diplomas</P ><P >Closing Speech by Headmaster</P ></Section ><Section ><H1 >Graduates</H1 ><Ul ><Li >Molly Carpenter</Li ><Li >Anastasia Luccio</Li ><Li >Ebenezar McCoy</Li ><Li >Karrin Murphy</Li ><Li >Thomas Raith</Li ><Li >Susan Rodriguez</Li ></Ul ></Section ></Body ></Html></pre> </div> <div class="example"> <p>In this example, a book author has marked up some sections as chapters and some as appendices, and uses CSS to style the headers in these two classes of section differently. The whole book is wrapped in an <code><a href="the-article-element.html#the-article-element">article</a></code> element as part of an even larger document containing other books.</p> <pre><article class="book"> <style> section { border: double medium; margin: 2em; } section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; } section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; } </style> <header> <hgroup> <h1>My Book</h1> <h2>A sample with not much content</h2> </hgroup> <p><small>Published by Dummy Publicorp Ltd.</small></p> </header> <section class="chapter"> <h1>My First Chapter</h1> <p>This is the first of my chapters. It doesn't say much.</p> <p>But it has two paragraphs!</p> </section> <section class="chapter"> <h1>It Continutes: The Second Chapter</h1> <p>Bla dee bla, dee bla dee bla. Boom.</p> </section> <section class="chapter"> <h1>Chapter Three: A Further Example</h1> <p>It's not like a battle between brightness and earthtones would go unnoticed.</p> <p>But it might ruin my story.</p> </section> <section class="appendix"> <h1>Appendix A: Overview of Examples</h1> <p>These are demonstrations.</p> </section> <section class="appendix"> <h1>Appendix B: Some Closing Remarks</h1> <p>Hopefully this long example shows that you <em>can</em> style sections, so long as they are used to indicate actual sections.</p> </section> </article></pre> </div> </body></html> --- NEW FILE: the-article-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.4.4 The article element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-nav-element.html" title="4.4.3 The nav element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-aside-element.html" title="4.4.5 The aside element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-nav-element.html">← 4.4.3 The nav element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-aside-element.html">4.4.5 The aside element →</a> </div> <h4 id="the-article-element"><span class="secno">4.4.4 </span>The <dfn><code>article</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#sectioning-content-0">Sectioning content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-article-element">article</a></code> element <a href="rendering.html#represents">represents</a> a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.</p> <p>When <code><a href="#the-article-element">article</a></code> elements are nested, the inner <code><a href="#the-article-element">article</a></code> elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as <code><a href="#the-article-element">article</a></code> elements nested within the <code><a href="#the-article-element">article</a></code> element for the blog entry.</p> <p>Author information associated with an <code><a href="#the-article-element">article</a></code> element (q.v. the <code><a href="the-address-element.html#the-address-element">address</a></code> element) does not apply to nested <code><a href="#the-article-element">article</a></code> elements.</p> <p class="note">When used specifically with content to be redistributed in syndication, the <code><a href="#the-article-element">article</a></code> element is similar in purpose to the <code title="">entry</code> element in Atom. <a href="references.html#refsATOM">[ATOM]</a> </p><p class="note">The schema.org microdata vocabulary can be used to provide the publication date for an <code><a href="#the-article-element">article</a></code> element, using one of the CreativeWork subtypes.</p> <div class="example" id="article-example"> <p>This example shows a blog post using the <code><a href="#the-article-element">article</a></code> element, with some schema.org annotations:</p> <pre><article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">The Very First Rule of Life</h1> <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p> <link itemprop="url" href="?comments=0"> </header>[ <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p><em>...</em></p> <footer> <a itemprop="discussionUrl" href="?comments=1">Show comments...</a> </footer> </article></pre> <p>Here is that same blog post, but showing some of the comments:</p> <pre><article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">The Very First Rule of Life</h1> <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p> <link itemprop="url" href="?comments=0"> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p><em>...</em></p> <section> <h1>Comments</h1> <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1"> <link itemprop="url" href="#c1"> <footer> <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">George Washington</span> </span></p> <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2"> <link itemprop="url" href="#c2"> <footer> <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">George Hammond</span> </span></p> <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section> </article></pre> <p>Notice the use of <code><a href="the-footer-element.html#the-footer-element">footer</a></code> to give the information for each comment (such as who wrote it and when): the <code><a href="the-footer-element.html#the-footer-element">footer</a></code> element <em>can</em> appear at the start of its section when appropriate, such as in this case. (Using <code><a href="the-header-element.html#the-header-element">header</a></code> in this case wouldn't be wrong either; it's mostly a matter of authoring preference.)</p> </div> </body></html> --- NEW FILE: the-blockquote-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.5.4 The blockquote element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-pre-element.html" title="4.5.3 The pre element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-ol-element.html" title="4.5.5 The ol element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-pre-element.html">← 4.5.3 The pre element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-ol-element.html">4.5.5 The ol element →</a> </div> <h4 id="the-blockquote-element"><span class="secno">4.5.4 </span>The <dfn><code>blockquote</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="headings-and-sections.html#sectioning-root">Sectioning root</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-blockquote-cite"><a href="#attr-blockquote-cite">cite</a></code></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlquoteelement">HTMLQuoteElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute DOMString <a href="#dom-quote-cite" title="dom-quote-cite">cite</a>; };</pre> <p class="note">The <code><a href="#htmlquoteelement">HTMLQuoteElement</a></code> interface is also used by the <code><a href="the-q-element.html#the-q-element">q</a></code> element.</p> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-blockquote-element">blockquote</a></code> element <a href="rendering.html#represents">represents</a> a section that is quoted from another source.</p> <p>Content inside a <code><a href="#the-blockquote-element">blockquote</a></code> must be quoted from another source, whose address, if it has one, may be cited in the <dfn id="attr-blockquote-cite" title="attr-blockquote-cite"><code>cite</code></dfn> attribute.</p> <p>If the <code title="attr-blockquote-cite"><a href="#attr-blockquote-cite">cite</a></code> attribute is present, it must be a <a href="urls.html#valid-url-potentially-surrounded-by-spaces">valid URL potentially surrounded by spaces</a>. <span class="impl">To obtain the corresponding citation link, the value of the attribute must be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a> relative to the element. User agents should allow users to follow such citation links.</span></p> <p>The content of a <code><a href="#the-blockquote-element">blockquote</a></code> may be abbreviated or may have context added in the conventional manner for the text's language.</p> <div class="example"> <p>For example, in English this is traditionally done using square brackets. Consider a page with the sentence "Fred ate the cracker. He then said he liked apples and fish."; it could be quoted as follows:</p> <pre><blockquote> <p>[Fred] then said he liked [...] fish.</p> </blockquote></pre> </div> <p>Attribution for the quotation, if any, must be placed outside the <code><a href="#the-blockquote-element">blockquote</a></code> element.</p> <!-- Eventually someone is going to ask about quotes that are self-attributing, e.g. someone quoting an e-mail with full headers... --> <div class="example"> <p>For example, here the attribution is given in a paragraph after the quote:</p> <pre><blockquote> <p>I contend that we are both atheists. I just believe in one fewer god than you do. When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours.</p> </blockquote> <p>— Stephen Roberts</p></pre> <p>The other examples below show other ways of showing attribution.</p> </div> <div class="impl"> <p>The <dfn id="dom-quote-cite" title="dom-quote-cite"><code>cite</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the element's <code title="">cite</code> content attribute.</p> </div> <div class="example"> <p>Here a <code><a href="#the-blockquote-element">blockquote</a></code> element is used in conjunction with a <code><a href="the-figure-element.html#the-figure-element">figure</a></code> element and its <code><a href="the-figcaption-element.html#the-figcaption-element">figcaption</a></code> to clearly relate a quote to its attribution (which is not part of the quote and therefore doesn't belong inside the <code><a href="#the-blockquote-element">blockquote</a></code> itself):</p> <pre><figure> <blockquote> <p>The truth may be puzzling. It may take some work to grapple with. It may be counterintuitive. It may contradict deeply held prejudices. It may not be consonant with what we desperately want to be true. But our preferences do not determine what's true. We have a method, and that method helps us to reach not absolute truth, only asymptotic approaches to the truth — never there, just closer and closer, always finding vast new oceans of undiscovered possibilities. Cleverly designed experiments are the key.</p> </blockquote> <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from the <cite>Skeptical Enquirer</cite> Volume 19, Issue 1 (January-February 1995)</cite></figcaption> </figure></pre> </div> <div class="example"> <p>This next example shows the use of <code><a href="the-cite-element.html#the-cite-element">cite</a></code> alongside <code><a href="#the-blockquote-element">blockquote</a></code>:</p> <pre><p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p> <blockquote cite="http://quotes.example.org/s/sonnet130.html"> <p>My mistress' eyes are nothing like the sun,<br> Coral is far more red, than her lips red,<br> ...</pre> </div> <div class="example"> <p>This example shows how a forum post could use <code><a href="#the-blockquote-element">blockquote</a></code> to show what post a user is replying to. The <code><a href="the-article-element.html#the-article-element">article</a></code> element is used for each post, to mark up the threading.</p> <pre><article> <h1><a href="http://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1> <article> <header><strong>t3yw</strong> 12 points 1 hour ago</header> <p>I bet a narwhal would love that.</p> <footer><a href="?pid=29578">permalink</a></footer> <article> <header><strong>greg</strong> 8 points 1 hour ago</header> <blockquote><p>I bet a narwhal would love that.</p></blockquote> <p>Dude narwhals don't eat bacon.</p> <footer><a href="?pid=29579">permalink</a></footer> <article> <header><strong>t3yw</strong> 15 points 1 hour ago</header> <blockquote> <blockquote><p>I bet a narwhal would love that.</p></blockquote> <p>Dude narwhals don't eat bacon.</p> </blockquote> <p>Next thing you'll be saying they don't get capes and wizard hats either!</p> <footer><a href="?pid=29580">permalink</a></footer> <article> <article> <header><strong>boing</strong> -5 points 1 hour ago</header> <p>narwhals are worse than ceiling cat</p> <footer><a href="?pid=29581">permalink</a></footer> </article> </article> </article> </article> <article> <header><strong>fred</strong> 1 points 23 minutes ago</header> <blockquote><p>I bet a narwhal would love that.</p></blockquote> <p>I bet they'd love to peel a banana too.</p> <footer><a href="?pid=29582">permalink</a></footer> </article> </article> </article></pre> </div> <div class="example"> <p>This example shows the use of a <code><a href="#the-blockquote-element">blockquote</a></code> for short snippets, demonstrating that one does not have to use <code><a href="the-p-element.html#the-p-element">p</a></code> elements inside <code><a href="#the-blockquote-element">blockquote</a></code> elements:</p> <pre><p>He began his list of "lessons" with the following:</p> <blockquote>One should never assume that his side of the issue will be recognized, let alone that it will be conceded to have merits.</blockquote> <p>He continued with a number of similar points, ending with:</p> <blockquote>Finally, one should be prepared for the threat of breakdown in negotiations at any given moment and not be cowed by the possiblity.</blockquote> <p>We shall now discuss these points...</pre> </div> <p class="note"><a href="links.html#conversations">Examples of how to represent a conversation</a> are shown in a later section; it is not appropriate to use the <code><a href="the-cite-element.html#the-cite-element">cite</a></code> and <code><a href="#the-blockquote-element">blockquote</a></code> elements for this purpose.</p> </body></html> --- NEW FILE: the-rp-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.6.22 The rp element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-rt-element.html" title="4.6.21 The rt element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-bdi-element.html" title="4.6.23 The bdi element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-rt-element.html">← 4.6.21 The rt element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-bdi-element.html">4.6.23 The bdi element →</a> </div> <h4 id="the-rp-element"><span class="secno">4.6.22 </span>The <dfn><code>rp</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd>None.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>As a child of a <code><a href="the-ruby-element.html#the-ruby-element">ruby</a></code> element, either immediately before or immediately after an <code><a href="the-rt-element.html#the-rt-element">rt</a></code> element.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <!-- <dd>If the <code>rp</code> element is immediately after an <code>rt</code> element that is immediately preceded by another <code>rp</code> element: a single character from Unicode character class Pe.</dd> <dd>Otherwise: a single character from Unicode character class Ps.</dd> --> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-rp-element">rp</a></code> element can be used to provide parentheses around a ruby text component of a ruby annotation, to be shown by user agents that don't support ruby annotations.</p> <p>An <code><a href="#the-rp-element">rp</a></code> element <span class="impl">that is a child of a <code><a href="the-ruby-element.html#the-ruby-element">ruby</a></code> element</span> <a href="rendering.html#represents">represents</a> nothing<span class="impl"> and its contents must be ignored</span>. <span class="impl">An <code><a href="#the-rp-element">rp</a></code> element whose parent element is not a <code><a href="the-ruby-element.html#the-ruby-element">ruby</a></code> element <a href="rendering.html#represents">represents</a> its children.</span></p> <div class="example"> <p>The example above, in which each ideograph in the text <span lang="ja" title="">漢字</span> is annotated with its phonetic reading, could be expanded to use <code><a href="#the-rp-element">rp</a></code> so that in legacy user agents the readings are in parentheses:</p> <pre lang="ja">... <ruby>漢<rp> (</rp><rt>かん</rt><rp>) </rp>字<rp> (</rp><rt>じ</rt><rp>) </rp></ruby> ...</pre> <p>In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be:</p> <pre lang="ja">... 漢 (かん) 字 (じ) ...</pre> </div> </body></html> --- NEW FILE: the-details-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.11.1 The details element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="interactive-elements.html" title="4.11 Interactive elements" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-summary-element.html" title="4.11.2 The summary element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="interactive-elements.html">← 4.11 Interactive elements</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-summary-element.html">4.11.2 The summary element →</a> </div> <h4 id="the-details-element"><span class="secno">4.11.1 </span>The <dfn><code>details</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="headings-and-sections.html#sectioning-root">Sectioning root</a>.</dd> <dd><a href="content-models.html#interactive-content-0">Interactive content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd>One <code><a href="the-summary-element.html#the-summary-element">summary</a></code> element followed by <a href="content-models.html#flow-content-1">flow content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-details-open"><a href="#attr-details-open">open</a></code></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmldetailselement">HTMLDetailsElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute boolean <a href="#dom-details-open" title="dom-details-open">open</a>; };</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-details-element">details</a></code> element <a href="rendering.html#represents">represents</a> a disclosure widget from which the user can obtain additional information or controls.</p> <p class="note">The <code><a href="#the-details-element">details</a></code> element is not appropriate for footnotes. Please see <a href="links.html#footnotes">the section on footnotes</a> for details on how to mark up footnotes.</p> <p>The <span class="impl">first</span> <code><a href="the-summary-element.html#the-summary-element">summary</a></code> element child of the element, if any, <a href="rendering.html#represents">represents</a> the summary or legend of the details. <span class="impl">If there is no child <code><a href="the-summary-element.html#the-summary-element">summary</a></code> element, the user agent should provide its own legend (e.g. "Details").</span></p> <p>The rest of the element's contents <a href="rendering.html#represents">represents</a> the additional information or controls.</p> <p>The <dfn id="attr-details-open" title="attr-details-open"><code>open</code></dfn> content attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If present, it indicates that both the summary and the additional information is to be shown to the user. If the attribute is absent, only the summary is to be shown.</p> <div class="impl"> <p>When the element is created, if the attribute is absent, the additional information should be hidden; if the attribute is present, that information should be shown. Subsequently, if the attribute is removed, then the information should be hidden; if the attribute is added, the information should be shown.</p> <p>The user agent should allow the user to request that the additional information be shown or hidden. To honor a request for the details to be shown, the user agent must set the <code title="attr-details-open"><a href="#attr-details-open">open</a></code> attribute on the element to the value <code title="">open</code>. To honor a request for the information to be hidden, the user agent must remove the <code title="attr-details-open"><a href="#attr-details-open">open</a></code> attribute from the element.</p> <p>The <dfn id="dom-details-open" title="dom-details-open"><code>open</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-details-open"><a href="#attr-details-open">open</a></code> content attribute.</p> </div> <div class="example"> <p>The following example shows the <code><a href="#the-details-element">details</a></code> element being used to hide technical details in a progress report.</p> <pre><section class="progress window"> <h1>Copying "Really Achieving Your Childhood Dreams"</h1> <details> <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary> <dl> <dt>Transfer rate:</dt> <dd>452KB/s</dd> <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt>Duration:</dt> <dd>01:16:27</dd> <dt>Color profile:</dt> <dd>SD (6-1-6)</dd> <dt>Dimensions:</dt> <dd>320×240</dd> </dl> </details> </section></pre> </div> <div class="example"> <p>The following shows how a <code><a href="#the-details-element">details</a></code> element can be used to hide some controls by default:</p> <pre><details> <summary><label for=fn>Name & Extension:</label></summary> <p><input type=text id=fn name=fn value="Pillar Magazine.pdf"> <p><label><input type=checkbox name=ext checked> Hide extension</label> </details></pre> <p>One could use this in conjunction with other <code><a href="#the-details-element">details</a></code> in a list to allow the user to collapse a set of fields down to a small set of headings, with the ability to open each one.</p> <p class="details-example"><img alt="" height="611" src="images/sample-details-1.png" width="345"><img alt="" height="666" src="images/sample-details-2.png" width="345"></p> <p>In these examples, the summary really just summarises what the controls can change, and not the actual values, which is less than ideal.</p> </div> <div class="example"> <p>Because the <code title="attr-details-open"><a href="#attr-details-open">open</a></code> attribute is added and removed automatically as the user interacts with the control, it can be used in CSS to style the element differently based on its state. Here, a stylesheet is used to animate the color of the summary when the element is opened or closed:</p> <pre><style> details > summary { transition: color 1s; color: black; } details[open] > summary { color: red; } </style> <details> <summary>Automated Status: Operational</summary> <p>Velocity: 12m/s</p> <p>Direction: North</p> </details></pre> </div> </body></html> --- NEW FILE: the-aside-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.4.5 The aside element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-article-element.html" title="4.4.4 The article element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-hgroup-element.html" title="4.4.7 The hgroup element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-article-element.html">← 4.4.4 The article element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-hgroup-element.html">4.4.7 The hgroup element →</a> <ol class="toc"><li><ol><li><ol><li><a href="the-aside-element.html#the-aside-element"><span class="secno">4.4.5 </span>The <code>aside</code> element</a></li><li><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements"><span class="secno">4.4.6 </span>The <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, and <code>h6</code> elements</a></li></ol></li></ol></li></ol></div> <h4 id="the-aside-element"><span class="secno">4.4.5 </span>The <dfn><code>aside</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#sectioning-content-0">Sectioning content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-aside-element">aside</a></code> element <a href="rendering.html#represents">represents</a> a section of a page that consists of content that is tangentially related to the content around the <code><a href="#the-aside-element">aside</a></code> element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.</p> <p>The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of <code><a href="the-nav-element.html#the-nav-element">nav</a></code> elements, and for other content that is considered separate from the main content of the page.</p> <p class="note">It's not appropriate to use the <code><a href="#the-aside-element">aside</a></code> element just for parentheticals, since those are part of the main flow of the document.</p> <div class="example"> <p>The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.</p> <pre><aside> <h1>Switzerland</h1> <p>Switzerland, a land-locked country in the middle of geographic Europe, has not joined the geopolitical European Union, though it is a signatory to a number of European treaties.</p> </aside></pre> </div> <div class="example"> <p>The following example shows how an aside is used to mark up a pull quote in a longer article.</p> <pre>... <p>He later joined a large company, continuing on the same work. <q>I love my job. People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. Some people wonder what they would do if they didn't have to work... but I know what I would do, because I was unemployed for a year, and I filled that time doing exactly what I do now.</q></p> <aside> <q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q> </aside> <p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p> ...</pre> </div> <div class="example"> <p>The following extract shows how <code><a href="#the-aside-element">aside</a></code> can be used for blogrolls and other side content on a blog:</p> <pre><body> <header> <h1>My wonderful blog</h1> <p>My tagline</p> </header> <aside> <!-- <em>this aside contains two sections that are tangentially related to the page, namely, links to other blogs, and links to blog posts from this blog</em> --> <nav> <h1>My blogroll</h1> <ul> <li><a href="http://blog.example.com/">Example Blog</a> </ul> </nav> <nav> <h1>Archives</h1> <ol reversed> <li><a href="/last-post">My last post</a> <li><a href="/first-post">My first post</a> </ol> </nav> </aside> <aside> <!-- <em>this aside is tangentially related to the page also, it contains twitter messages from the blog author</em> --> <h1>Twitter Feed</h1> <blockquote cite="http://twitter.example.net/t31351234"> I'm on vacation, writing my blog. </blockquote> <blockquote cite="http://twitter.example.net/t31219752"> I'm going to go on vacation soon. </blockquote> </aside> <article> <!-- <em>this is a blog post</em> --> <h1>My last post</h1> <p>This is my last post.</p> <footer> <p><a href="/last-post" rel=bookmark>Permalink</a> </footer> </article> <article> <!-- <em>this is also a blog post</em> --> <h1>My first post</h1> <p>This is my first post.</p> <aside> <!-- <em>this aside is about the blog post, since it's inside the <article> element; it would be wrong, for instance, to put the blogroll here, since the blogroll isn't really related to this post specifically, only to the page as a whole</em> --> <h1>Posting</h1> <p>While I'm thinking about it, I wanted to say something about posting. Posting is fun!</p> </aside> <footer> <p><a href="/first-post" rel=bookmark>Permalink</a> </footer> </article> <footer> <nav> <a href="/archives">Archives</a> — <a href="/about">About me</a> — <a href="/copyright">Copyright</a> </nav> </footer> </body></pre> </div> <h4 id="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements"><span class="secno">4.4.6 </span>The <dfn id="the-h1-element"><code>h1</code></dfn>, <dfn id="the-h2-element"><code>h2</code></dfn>, <dfn id="the-h3-element"><code>h3</code></dfn>, <dfn id="the-h4-element"><code>h4</code></dfn>, <dfn id="the-h5-element"><code>h5</code></dfn>, and <dfn id="the-h6-element"><code>h6</code></dfn> elements</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#heading-content-0">Heading content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>As a child of an <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> element.</dd> <dd>Where <a href="content-models.html#flow-content-1">flow content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlheadingelement">HTMLHeadingElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre> </dd> </dl><!--TOPIC:HTML--><p>These elements <a href="rendering.html#represents" title="represents">represent</a> headings for their sections.</p> <p>The semantics and meaning of these elements are defined in the section on <a href="headings-and-sections.html#headings-and-sections">headings and sections</a>.</p> <p>These elements have a <dfn id="rank">rank</dfn> given by the number in their name. The <code><a href="#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code> element is said to have the highest rank, the <code><a href="#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> element has the lowest rank, and two elements with the same name have equal rank.</p> <div class="example"> <p>As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:</p> <pre><body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body></pre> <pre><body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas coordinates</h1> <section> <h1>Canvas coordinates diagram</h1> </section> </section> <section> <h1>Paths</h1> </section> </body></pre> <p>Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is best is purely an issue of preferred authoring style.</p> </div> </body></html> --- NEW FILE: the-title-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.2.2 The title element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-head-element.html" title="4.2.1 The head element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-base-element.html" title="4.2.3 The base element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-head-element.html">← 4.2.1 The head element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-base-element.html">4.2.3 The base element →</a> </div> <h4 id="the-title-element"><span class="secno">4.2.2 </span>The <dfn><code>title</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#metadata-content-0">Metadata content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>In a <code><a href="the-head-element.html#the-head-element">head</a></code> element containing no other <code><a href="#the-title-element">title</a></code> elements.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#text-content" title="text content">Text</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmltitleelement">HTMLTitleElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute DOMString <a href="#dom-title-text" title="dom-title-text">text</a>; };</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-title-element">title</a></code> element <a href="rendering.html#represents">represents</a> the document's title or name. Authors should use titles that identify their documents even when they are used out of context, for example in a user's history or bookmarks, or in search results. The document's title is often different from its first heading, since the first heading does not have to stand alone when taken out of context.</p> <p>There must be no more than one <code><a href="#the-title-element">title</a></code> element per document.</p> <!--TOPIC:DOM APIs--> <dl class="domintro"><dt><var title="">title</var> . <code title="dom-title-text"><a href="#dom-title-text">text</a></code> [ = <var title="">value</var> ]</dt> <dd> <p>Returns the contents of the element, ignoring child nodes that aren't <code><a href="infrastructure.html#text-0">Text</a></code> nodes.</p> <p>Can be set, to replace the element's children with the given value.</p> </dd> </dl><div class="impl"> <p>The IDL attribute <dfn id="dom-title-text" title="dom-title-text"><code>text</code></dfn> must return a concatenation of the contents of all the <code><a href="infrastructure.html#text-0">Text</a></code> nodes that are children of the <code><a href="#the-title-element">title</a></code> element (ignoring any other nodes such as comments or elements), in tree order. On setting, it must act the same way as the <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute.</p> </div> <!--TOPIC:HTML--> <div class="example"> <p>Here are some examples of appropriate titles, contrasted with the top-level headings that might be used on those same pages.</p> <pre> <title>Introduction to The Mating Rituals of Bees</title> ... <h1>Introduction</h1> <p>This companion guide to the highly successful <cite>Introduction to Medieval Bee-Keeping</cite> book is...</pre> <p>The next page might be a part of the same site. Note how the title describes the subject matter unambiguously, while the first heading assumes the reader knows what the context is and therefore won't wonder if the dances are Salsa or Waltz:</p> <pre> <title>Dances used during bee mating rituals</title> ... <h1>The Dances</h1></pre> </div> <p>The string to use as the document's title is given by the <code title="dom-document-title"><a href="dom.html#document.title">document.title</a></code> IDL attribute.</p> <div class="impl"> <p>User agents should use the document's title when referring to the document in their user interface. When the contents of a <code><a href="#the-title-element">title</a></code> element are used in this way, <a href="global-attributes.html#the-directionality">the directionality</a> of that <code><a href="#the-title-element">title</a></code> element should be used to set the directionality of the document's title in the user interface.</p> </div> </body></html> --- NEW FILE: offline.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>5.7 Offline Web applications — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } [...2523 lines suppressed...] <pre><!DOCTYPE HTML> <html> <head> <title>Online status</title> <script> function updateIndicator() { document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline'; } </script> </head> <body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()"> <p>The network is: <span id="indicator">(state unknown)</span> </body> </html></pre> </div> <!--TOPIC:HTML--> </body></html> --- NEW FILE: textFieldSelection.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.10.20 APIs for the text field selections — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="form-submission.html" title="4.10.19.6 Form submission" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="constraints.html" title="4.10.21 Constraints" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="form-submission.html">← 4.10.19.6 Form submission</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="constraints.html">4.10.21 Constraints →</a> </div> <h4 id="textFieldSelection"><span class="secno">4.10.20 </span>APIs for the text field selections</h4> <!-- v2 idea: DOM Range APIs to expose the textarea/input edited value (ack martijnw) --> <p>The <code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> elements define the following members in their DOM interfaces for handling their selection:</p> <pre class="idl extract"> void <a href="#dom-textarea/input-select" title="dom-textarea/input-select">select</a>(); attribute unsigned long <a href="#dom-textarea/input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>; attribute unsigned long <a href="#dom-textarea/input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>; attribute DOMString <a href="#dom-textarea/input-selectiondirection" title="dom-textarea/input-selectionDirection">selectionDirection</a>; void <a href="#dom-textarea/input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(unsigned long start, unsigned long end, optional DOMString direction = "preserve");</pre> <!-- v2: also add textLength? it seems to be widely used --> <p>These methods and attributes expose and control the selection of <code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> text fields.</p> <dl class="domintro"><dt><var title="">element</var> . <code title="dom-textarea/input-select"><a href="#dom-textarea/input-select">select</a></code>()</dt> <dd> <p>Selects everything in the text field.</p> </dd> <dt><var title="">element</var> . <code title="dom-textarea/input-selecionStart">selectionStart</code> [ = <var title="">value</var> ]</dt> <dd> <p>Returns the offset to the start of the selection.</p> <p>Can be set, to change the start of the selection.</p> </dd> <dt><var title="">element</var> . <code title="dom-textarea/input-selecionEnd">selectionEnd</code> [ = <var title="">value</var> ]</dt> <dd> <p>Returns the offset to the end of the selection.</p> <p>Can be set, to change the end of the selection.</p> </dd> <dt><var title="">element</var> . <code title="dom-textarea/input-selecionDirection">selectionDirection</code> [ = <var title="">value</var> ]</dt> <dd> <p>Returns the current direction of the selection.</p> <p>Can be set, to change the direction of the selection.</p> <p>The possible values are "<code title="">forward</code>", "<code title="">backward</code>", and "<code title="">none</code>".</p> </dd> <dt><var title="">element</var> . <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea/input-setselectionrange">setSelectionRange</a></code>(<var title="">start</var>, <var title="">end</var> [, <var title="">direction</var>] )</dt> <dd> <p>Changes the selection to cover the given substring in the given direction. If the direction is omitted, it will be reset to be the platform default (none or forward).</p> </dd> </dl><div class="impl"> <p>When these methods and attributes are used with <code><a href="the-input-element.html#the-input-element">input</a></code> elements while they don't apply, they must throw an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception. Otherwise, they must act as described below.</p> <p>For <code><a href="the-input-element.html#the-input-element">input</a></code> elements, these methods and attributes must operate on the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>. For <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> elements, these methods and attributes must operate on the element's <a href="the-textarea-element.html#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a>.</p> <p>Where possible, user interface features for changing the text selection in <code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> elements must be implemented in terms of the DOM API described in this section, so that, e.g., all the same events fire.</p> <p>The selections of <code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> elements have a <i>direction</i>, which is either <i>forward</i>, <i>backward</i>, or <i>none</i>. This direction is set when the user manipulates the selection. The exact meaning of the selection direction depends on the platform.</p> <p class="note">On Windows, the direction indicates the position of the caret relative to the selection: a <i>forward</i> selection has the caret at the end of the selection and a <i>backward</i> selection has the caret at the start of the selection. Windows has no <i>none</i> direction. On Mac, the direction indicates which end of the selection is affected when the user adjusts the size of the selection using the arrow keys with the Shift modifier: the forward direction means the end of the selection is modified, and the backwards direction means the start of the selection is modified. The none direction is the default on Mac, it indicates that no particular direction has yet been selected. The user sets the direction implicitly when first adjusting the selection, based on which directional arrow key was used.</p> <p>The <dfn id="dom-textarea/input-select" title="dom-textarea/input-select"><code>select()</code></dfn> method must cause the contents of the text field to be fully selected, with the selection direction being none, if the platform support selections with the direction <i>none</i>, or otherwise <i>forward</i>. The user agent must then <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> that bubbles named <code title="event-select">select</code> at the element, using the <a href="webappapis.html#user-interaction-task-source">user interaction task source</a> as the task source.</p> <p>The <dfn id="dom-textarea/input-selectionstart" title="dom-textarea/input-selectionStart"><code>selectionStart</code></dfn> attribute must, on getting, return the offset (in logical order) to the character that immediately follows the start of the selection. If there is no selection, then it must return the offset (in logical order) to the character that immediately follows the text entry cursor.</p> <p>On setting, it must act as if the <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea/input-setselectionrange">setSelectionRange()</a></code> method had been called, with the new value as the first argument; the current value of the <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea/input-selectionend">selectionEnd</a></code> attribute as the second argument, unless the current value of the <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea/input-selectionend">selectionEnd</a></code> is less than the new value, in which case the second argument must also be the new value; and the current value of the <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea/input-selectiondirection">selectionDirection</a></code> as the third argument.</p> <p>The <dfn id="dom-textarea/input-selectionend" title="dom-textarea/input-selectionEnd"><code>selectionEnd</code></dfn> attribute must, on getting, return the offset (in logical order) to the character that immediately follows the end of the selection. If there is no selection, then it must return the offset (in logical order) to the character that immediately follows the text entry cursor.</p> <p>On setting, it must act as if the <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea/input-setselectionrange">setSelectionRange()</a></code> method had been called, with the current value of the <code title="dom-textarea/input-selectionStart"><a href="#dom-textarea/input-selectionstart">selectionStart</a></code> attribute as the first argument, the new value as the second argument, and the current value of the <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea/input-selectiondirection">selectionDirection</a></code> as the third argument.</p> <p>The <dfn id="dom-textarea/input-selectiondirection" title="dom-textarea/input-selectionDirection"><code>selectionDirection</code></dfn> attribute must, on getting, return the string corresponding to the current selection direction: if the direction is <i>forward</i>, "<code title="">forward</code>"; if the direction is <i>backward</i>, "<code title="">backward</code>"; and otherwise, "<code title="">none</code>".</p> <p>On setting, it must act as if the <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea/input-setselectionrange">setSelectionRange()</a></code> method had been called, with the current value of the <code title="dom-textarea/input-selectionStart"><a href="#dom-textarea/input-selectionstart">selectionStart</a></code> attribute as the first argument, the current value of the <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea/input-selectionend">selectionEnd</a></code> attribute as the second argument, and the new value as the third argument.</p> <p>The <dfn id="dom-textarea/input-setselectionrange" title="dom-textarea/input-setSelectionRange"><code>setSelectionRange(<var title="">start</var>, <var title="">end</var>, <var title="">direction</var>)</code></dfn> method must set the selection of the text field to the sequence of characters starting with the character at the <var title="">start</var>th position (in logical order) and ending with the character at the <span title="">(<var title="">end</var>-1)</span>th position. Arguments greater than the length of the value of the text field must be treated as pointing at the end of the text field. If <var title="">end</var> is less than or equal to <var title="">start</var> then the start of the selection and the end of the selection must both be placed immediately before the character with offset <var title="">end</var>. In UAs where there is no concept of an empty selection, this must set the cursor to be just before the character with offset <var title="">end</var>. The direction of the selection must be set to <i>backward</i> if <var title="">direction</var> is a <a href="infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code title="">backward</code>", <i>forward</i> if <var title="">direction</var> is a <a href="infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code title="">forward</code>" or if the platform does not support selections with the direction <i>none</i>, and <i>none</i> otherwise (including if the argument is omitted). The user agent must then <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> that bubbles named <code title="event-select">select</code> at the element, using the <a href="webappapis.html#user-interaction-task-source">user interaction task source</a> as the task source.</p> <p>All elements to which this API applies have either a selection or a text entry cursor position at all times (even for elements that are not <a href="rendering.html#being-rendered">being rendered</a>). User agents should follow platform conventions to determine their initial state.</p> </div> <p>Characters with no visible rendering, such as U+200D ZERO WIDTH JOINER, still count as characters. Thus, for instance, the selection can include just an invisible character, and the text insertion cursor can be placed to one side or another of such a character.</p> <div class="example"> <p>To obtain the currently selected text, the following JavaScript suffices:</p> <pre>var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);</pre> <p>...where <var title="">control</var> is the <code><a href="the-input-element.html#the-input-element">input</a></code> or <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> element.</p> </div> <div class="example"> <p>To add some text at the start of a text control, while maintaining the text selection, the three attributes must be preserved:</p> <pre>var oldStart = control.selectionStart; var oldEnd = control.selectionEnd; var oldDirection = control.selectionDirection; var prefix = "http://"; control.value = prefix + control.value; control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldDirection);</pre> <p>...where <var title="">control</var> is the <code><a href="the-input-element.html#the-input-element">input</a></code> or <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> element.</p> </div> <!--TOPIC:HTML--> </body></html> --- NEW FILE: global-attributes.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>3.2.3 Global attributes — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } [...1246 lines suppressed...] in the attribute names, to reduce the risk of clashes. Where it makes sense, library authors are also encouraged to make the exact name used in the attribute names customizable, so that libraries whose authors unknowingly picked the same name can be used on the same page, and so that multiple versions of a particular library can be used on the same page even when those versions are not mutually compatible.</p> <div class="example"> <p>For example, a library called "DoQuery" could use attribute names like <code title="">data-doquery-range</code>, and a library called "jJo" could use attributes names like <code title="">data-jjo-range</code>. The jJo library could also provide an API to set which prefix to use (e.g. <code title="">J.setDataPrefix('j2')</code>, making the attributes have names like <code title="">data-j2-range</code>).</p> </div> </body></html> --- NEW FILE: the-bdi-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.6.23 The bdi element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-rp-element.html" title="4.6.22 The rp element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-bdo-element.html" title="4.6.24 The bdo element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-rp-element.html">← 4.6.22 The rp element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-bdo-element.html">4.6.24 The bdo element →</a> </div> <h4 id="the-bdi-element"><span class="secno">4.6.23 </span>The <dfn><code>bdi</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd>Also, the <code title="attr-dir"><a href="global-attributes.html#the-dir-attribute">dir</a></code> global attribute has special semantics on this element.</dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-bdi-element">bdi</a></code> element <a href="rendering.html#represents">represents</a> a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. <a href="references.html#refsBIDI">[BIDI]</a></p> <p class="note">The <code title="attr-dir"><a href="global-attributes.html#the-dir-attribute">dir</a></code> global attribute defaults to <code title="attr-dir-auto"><a href="global-attributes.html#attr-dir-auto">auto</a></code> on this element (it never inherits from the parent element like with other elements).</p> <div class="impl"> <p>For the purposes of applying the bidirectional algorithm to the contents of a <code><a href="#the-bdi-element">bdi</a></code> element, user agents must treat the element as a paragraph-level container.</p> <p>For the purposes of applying the bidirectional algorithm to the paragraph-level container that a <code><a href="#the-bdi-element">bdi</a></code> element finds itself within, the <code><a href="#the-bdi-element">bdi</a></code> element must be treated like a U+FFFC OBJECT REPLACEMENT CHARACTER (in the same manner that an image or other inline object is handled).</p> <p>The requirements on handling the <code><a href="#the-bdi-element">bdi</a></code> element for the bidirectional algorithm may be implemented indirectly through the style layer. For example, an HTML+CSS user agent could implement these requirements by implementing the CSS 'unicode-bidi' property. <a href="references.html#refsCSS">[CSS]</a></p> </div> <div class="example"> <p>This element is especially useful when embedding user-generated content with an unknown directionality.</p> <p>In this example, usernames are shown along with the number of posts that the user has submitted. If the <code><a href="#the-bdi-element">bdi</a></code> element were not used, the username of the Arabic user would end up confusing the text (the bidirectional algorithm would put the colon and the number "3" next to the word "User" rather than next to the word "posts").</p> <pre><ul> <li>User <bdi>jcranmer</bdi>: 12 posts. <li>User <bdi>hober</bdi>: 5 posts. <li>User <bdi><bdo dir="rtl">إيان</bdo></bdi>: 3 posts. </ul></pre> </div> </body></html> --- NEW FILE: the-legend-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.10.5 The legend element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-fieldset-element.html" title="4.10.4 The fieldset element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-label-element.html" title="4.10.6 The label element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-fieldset-element.html">← 4.10.4 The fieldset element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-label-element.html">4.10.6 The label element →</a> </div> <h4 id="the-legend-element"><span class="secno">4.10.5 </span>The <dfn><code>legend</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd>None.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>As the first child of a <code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code> element.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmllegendelement">HTMLLegendElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { readonly attribute <a href="the-form-element.html#htmlformelement">HTMLFormElement</a>? <a href="#dom-legend-form" title="dom-legend-form">form</a>; };</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-legend-element">legend</a></code> element <a href="rendering.html#represents">represents</a> a caption for the rest of the contents of the <code><a href="#the-legend-element">legend</a></code> element's parent <code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code> element<span class="impl">, if any</span>.</p> <!--TOPIC:DOM APIs--> <dl class="domintro"><dt><var title="">legend</var> . <code title="dom-legend-form"><a href="#dom-legend-form">form</a></code></dt> <dd> <p>Returns the element's <code><a href="the-form-element.html#the-form-element">form</a></code> element, if any, or null otherwise.</p> </dd> </dl><div class="impl"> <p>The <dfn id="dom-legend-form" title="dom-legend-form"><code>form</code></dfn> IDL attribute's behavior depends on whether the <code><a href="#the-legend-element">legend</a></code> element is in a <code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code> element or not. If the <code><a href="#the-legend-element">legend</a></code> has a <code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code> element as its parent, then the <code title="dom-legend-form"><a href="#dom-legend-form">form</a></code> IDL attribute must return the same value as the <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute on that <code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code> element. Otherwise, it must return null.</p> </div> <!--TOPIC:HTML--> </body></html> --- NEW FILE: the-dt-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.5.9 The dt element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-dl-element.html" title="4.5.8 The dl element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-dd-element.html" title="4.5.10 The dd element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-dl-element.html">← 4.5.8 The dl element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-dd-element.html">4.5.10 The dd element →</a> </div> <h4 id="the-dt-element"><span class="secno">4.5.9 </span>The <dfn><code>dt</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd>None.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Before <code><a href="the-dd-element.html#the-dd-element">dd</a></code> or <code><a href="#the-dt-element">dt</a></code> elements inside <code><a href="the-dl-element.html#the-dl-element">dl</a></code> elements.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>, but with no <code><a href="the-header-element.html#the-header-element">header</a></code>, <code><a href="the-footer-element.html#the-footer-element">footer</a></code>, <a href="content-models.html#sectioning-content-0">sectioning content</a>, or <a href="content-models.html#heading-content-0">heading content</a> descendants.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-dt-element">dt</a></code> element <a href="rendering.html#represents">represents</a> the term, or name, part of a term-description group in a description list (<code><a href="the-dl-element.html#the-dl-element">dl</a></code> element).</p> <p class="note">The <code><a href="#the-dt-element">dt</a></code> element itself, when used in a <code><a href="the-dl-element.html#the-dl-element">dl</a></code> element, does not indicate that its contents are a term being defined, but this can be indicated using the <code><a href="the-dfn-element.html#the-dfn-element">dfn</a></code> element.</p> <div class="example"> <p>This example shows a list of frequently asked questions (a FAQ) marked up using the <code><a href="#the-dt-element">dt</a></code> element for questions and the <code><a href="the-dd-element.html#the-dd-element">dd</a></code> element for answers.</p> <pre><article> <h1>FAQ</h1> <dl> <dt>What do we want?</dt> <dd>Our data.</dd> <dt>When do we want it?</dt> <dd>Now.</dd> <dt>Where is it?</dt> <dd>We are not sure.</dd> </dl> </article></pre> </div> </body></html> --- NEW FILE: history.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>5.5 Session history and navigation — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } [...2731 lines suppressed...] false.</p></li> <!-- we could also stop all script, or stop animations --> </ol><p>User agents may allow users to explicitly invoke the <a href="#abort-a-document" title="abort a document">abort a document</a> algorithm for a <code><a href="dom.html#document">Document</a></code>. If the user does so, then, if that <code><a href="dom.html#document">Document</a></code> is an <a href="browsers.html#active-document">active document</a>, the user agent should <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-abort">abort</code> at that <code><a href="dom.html#document">Document</a></code>'s <code><a href="browsers.html#window">Window</a></code> object before invoking the <a href="#abort-a-document" title="abort a document">abort</a> algorithm.</p> <!-- I'd love to make this more precise, anyone have any suggestions on what it should say? --> </div> <!--TOPIC:Offline Web Applications--> </body></html> --- NEW FILE: the-source-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.8.8 The source element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-audio-element.html" title="4.8.7 The audio element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-track-element.html" title="4.8.9 The track element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-audio-element.html">← 4.8.7 The audio element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-track-element.html">4.8.9 The track element →</a> </div> <h4 id="the-source-element"><span class="secno">4.8.8 </span>The <dfn><code>source</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd>None.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>As a child of a <a href="media-elements.html#media-element">media element</a>, before any <a href="content-models.html#flow-content-1">flow content</a> or <code><a href="the-track-element.html#the-track-element">track</a></code> elements.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd>Empty.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-source-src"><a href="#attr-source-src">src</a></code></dd> <dd><code title="attr-source-type"><a href="#attr-source-type">type</a></code></dd> <dd><code title="attr-source-media"><a href="#attr-source-media">media</a></code></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlsourceelement">HTMLSourceElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute DOMString <a href="#dom-source-src" title="dom-source-src">src</a>; attribute DOMString <a href="#dom-source-type" title="dom-source-type">type</a>; attribute DOMString <a href="#dom-source-media" title="dom-source-media">media</a>; };</pre> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-source-element">source</a></code> element allows authors to specify multiple alternative <a href="media-elements.html#media-resource" title="media resource">media resources</a> for <a href="media-elements.html#media-element" title="media element">media elements</a>. It does not <a href="rendering.html#represents" title="represents">represent</a> anything on its own.</p> <p>The <dfn id="attr-source-src" title="attr-source-src"><code>src</code></dfn> attribute gives the address of the <a href="media-elements.html#media-resource">media resource</a>. The value must be a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by spaces</a>. This attribute must be present.</p> <p class="note">Dynamically modifying a <code><a href="#the-source-element">source</a></code> element and its attribute when the element is already inserted in a <code><a href="the-video-element.html#the-video-element">video</a></code> or <code><a href="the-audio-element.html#the-audio-element">audio</a></code> element will have no effect. To change what is playing, just use the <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code> attribute on the <a href="media-elements.html#media-element">media element</a> directly, possibly making use of the <code title="dom-navigator-canPlayType"><a href="media-elements.html#dom-navigator-canplaytype">canPlayType()</a></code> method to pick from amongst available resources. Generally, manipulating <code><a href="#the-source-element">source</a></code> elements manually after the document has been parsed is an unncessarily complicated approach.</p> <p>The <dfn id="attr-source-type" title="attr-source-type"><code>type</code></dfn> attribute gives the type of the <a href="media-elements.html#media-resource">media resource</a>, to help the user agent determine if it can play this <a href="media-elements.html#media-resource">media resource</a> before fetching it. If specified, its value must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>. The <code title="">codecs</code> parameter, which certain MIME types define, might be necessary to specify exactly how the resource is encoded. <a href="references.html#refsRFC4281">[RFC4281]</a></p> <div class="example"> <p>The following list shows some examples of how to use the <code title="">codecs=</code> MIME parameter in the <code title="attr-source-type"><a href="#attr-source-type">type</a></code> attribute.</p> <dl><dt>H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></pre></dd> <dt>H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'></pre></dd> <dt>H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'></pre></dd> <dt>H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'></pre></dd> <dt>MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'></pre></dd> <dt>MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'></pre></dd> <dt>MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container</dt> <dd><pre><source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'></pre></dd> <dt>Theora video and Vorbis audio in Ogg container</dt> <dd><pre><source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'></pre></dd> <dt>Theora video and Speex audio in Ogg container</dt> <dd><pre><source src='video.ogv' type='video/ogg; codecs="theora, speex"'></pre></dd> <dt>Vorbis audio alone in Ogg container</dt> <dd><pre><source src='audio.ogg' type='audio/ogg; codecs=vorbis'></pre></dd> <dt>Speex audio alone in Ogg container</dt> <dd><pre><source src='audio.spx' type='audio/ogg; codecs=speex'></pre></dd> <dt>FLAC audio alone in Ogg container</dt> <dd><pre><source src='audio.oga' type='audio/ogg; codecs=flac'></pre></dd> <dt>Dirac video and Vorbis audio in Ogg container</dt> <dd><pre><source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'></pre></dd> <!-- awaiting definition by the Matroska guys: <dt>Theora video and Vorbis audio in Matroska container</dt> <dd><pre><source src='video.mkv' type='video/x-matroska; codecs="theora, vorbis"'></pre></dd> --> <!-- awaiting definition by the Ogg or BBC guys: <dt>Dirac video and Vorbis audio in Matroska container</dt> <dd><pre><source src='video.mkv' type='video/x-matroska; codecs='></pre></dd> --> <!-- awaiting definition by the Microsoft guys: <dt>WMV9 video and WMA 2 audio in ASF container</dt> <dd><pre><source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd> <dt>WMV8 video and WMA 2 audio in ASF container</dt> <dd><pre><source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd> <dt>VC-1 video and WMA 10 Pro audio in ASF container</dt> <dd><pre><source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd> <dt>XviD video and MP3 audio in AVI container</dt> <dd><pre><source src='video.avi' type='video/x-msvideo; codecs='></pre></dd> <dt>Motion-JPEG video and uncompressed PCM audio in AVI container</dt> <dd><pre><source src='video.avi' type='video/x-msvideo; codecs='></pre></dd> --> <!-- awaiting definition by Real: <dt>Real Video 10 video and High-Efficiency AAC audio in Real Media container</dt> <dd><pre><source src='video.rm' type='application/vnd.rn-realmedia; codecs='></pre></dd> --> <!-- undefined: <dt>MPEG-1 video and MPEG-1 Audio Layer II audio in MPEG-1 program stream</dt> <dd><pre><source src='video.mpg' type='video/mpeg; codecs='></pre></dd> --> </dl></div> <p>The <dfn id="attr-source-media" title="attr-source-media"><code>media</code></dfn> attribute gives the intended media type of the <a href="media-elements.html#media-resource">media resource</a>, to help the user agent determine if this <a href="media-elements.html#media-resource">media resource</a> is useful to the user before fetching it. Its value must be a <a href="common-microsyntaxes.html#valid-media-query">valid media query</a>.</p> <p id="source-default-media">The default, if the <code title="attr-srouce-media">media</code> attribute is omitted, is "<code title="">all</code>", meaning that by default the <a href="media-elements.html#media-resource">media resource</a> is suitable for all media.</p> <div class="impl"> <p>If a <code><a href="#the-source-element">source</a></code> element is inserted as a child of a <a href="media-elements.html#media-element">media element</a> that has no <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code> attribute and whose <code title="dom-media-networkState"><a href="media-elements.html#dom-media-networkstate">networkState</a></code> has the value <code title="dom-media-NETWORK_EMPTY"><a href="media-elements.html#dom-media-network_empty">NETWORK_EMPTY</a></code>, the user agent must invoke the <a href="media-elements.html#media-element">media element</a>'s <a href="media-elements.html#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>.</p> <p>The IDL attributes <dfn id="dom-source-src" title="dom-source-src"><code>src</code></dfn>, <dfn id="dom-source-type" title="dom-source-type"><code>type</code></dfn>, and <dfn id="dom-source-media" title="dom-source-media"><code>media</code></dfn> must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same name.</p> </div> <div class="example"> <p>If the author isn't sure if the user agents will all be able to render the media resources provided, the author can listen to the <code title="event-error">error</code> event on the last <code><a href="#the-source-element">source</a></code> element and trigger fallback behavior:</p> <pre><script> function fallback(video) { // replace <video> with its contents while (video.hasChildNodes()) { if (video.firstChild instanceof HTMLSourceElement) video.removeChild(video.firstChild); else video.parentNode.insertBefore(video.firstChild, video); } video.parentNode.removeChild(video); } </script> <video controls autoplay> <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"' onerror="fallback(parentNode)"> ... </video></pre> </div> <!--TOPIC:Video Text Tracks--> </body></html> --- NEW FILE: the-embed-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.8.3 The embed element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> 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="the-iframe-element.html" title="4.8.2 The iframe element" rel="prev"> <link href="Overview.html#contents" title="Table of contents" rel="contents"> <link href="the-object-element.html" title="4.8.4 The object element" rel="next"> </head><body onload="fixBrokenLink();" class="split chapter"><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 17 August 2012</h2> </div> <div class="prev_next"> <a href="the-iframe-element.html">← 4.8.2 The iframe element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-object-element.html">4.8.4 The object element →</a> </div> <h4 id="the-embed-element"><span class="secno">4.8.3 </span>The <dfn><code>embed</code></dfn> element</h4> <!-- (v2?) we have all kinds of quirks we should define if they come up during testing, as e.g. shown in: http://mxr.mozilla.org/mozilla-central/source/layout/generic/nsObjectFrame.cpp http://trac.webkit.org/browser/trunk/WebCore/html/HTMLEmbedElement.cpp http://trac.webkit.org/browser/trunk/WebCore/rendering/RenderPartObject.cpp (updateWidget) e.g. - 240x200 default - the attributes/params are sent in a name-value pair list as follows (for Gecko): + attributes of the element, in source order + a synthesised 'src' attribute, if there was no 'src' but there was a 'data', with the value of the 'data' attribute + the params, in source order (WebKit does something different still) - the HIDDEN attribute (might be moot now) --> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dd><a href="content-models.html#embedded-content-2">Embedded content</a>.</dd> <dd><a href="content-models.html#interactive-content-0">Interactive content</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#embedded-content-2">embedded content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd>Empty.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-embed-src"><a href="#attr-embed-src">src</a></code></dd> <dd><code title="attr-embed-type"><a href="#attr-embed-type">type</a></code></dd> <dd><code title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width">width</a></code></dd> <dd><code title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height">height</a></code></dd> <dd>Any other attribute that has no namespace (see prose).</dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs--> <dd> <pre class="idl">interface <dfn id="htmlembedelement">HTMLEmbedElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute DOMString <a href="#dom-embed-src" title="dom-embed-src">src</a>; attribute DOMString <a href="#dom-embed-type" title="dom-embed-type">type</a>; attribute DOMString <a href="dimension-attributes.html#dom-dim-width" title="dom-dim-width">width</a>; attribute DOMString <a href="dimension-attributes.html#dom-dim-height" title="dom-dim-height">height</a>; <a href="#dom-embed-caller" title="dom-embed-caller">legacycaller</a> any (any... arguments); };</pre> <div class="impl"> <p>Depending on the type of content instantiated by the <code><a href="#the-embed-element">embed</a></code> element, the node may also support other interfaces.</p> </div> </dd> </dl><!--TOPIC:HTML--><p>The <code><a href="#the-embed-element">embed</a></code> element <a href="rendering.html#represents">represents</a> an integration point for an external (typically non-HTML) application or interactive content.</p> <p>The <dfn id="attr-embed-src" title="attr-embed-src"><code>src</code></dfn> attribute gives the address of the resource being embedded. The attribute, if present, must contain a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by spaces</a>.</p> <!--MD--> <p>The <dfn id="attr-embed-type" title="attr-embed-type"><code>type</code></dfn> attribute, if present, gives the <a href="infrastructure.html#mime-type">MIME type</a> by which the plugin to instantiate is selected. The value must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>. If both the <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute and the <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute are present, then the <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute must specify the same type as the <a href="urls.html#content-type" title="Content-Type">explicit Content-Type metadata</a> of the resource given by the <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute.</p> <div class="impl"> <p>When the element is created with neither a <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute nor a <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute, and when attributes are removed such that neither attribute is present on the element anymore, and when the element has a <a href="media-elements.html#media-element">media element</a> ancestor, and when the element has an ancestor <code><a href="the-object-element.html#the-object-element">object</a></code> element that is <em>not</em> showing its <a href="content-models.html#fallback-content">fallback content</a>, any plugins instantiated for the element must be removed, and the <code><a href="#the-embed-element">embed</a></code> element represents nothing.</p> <p>An <code><a href="#the-embed-element">embed</a></code> element is said to be <dfn id="concept-embed-active" title="concept-embed-active">potentially active</dfn> when the following conditions are all met simultaneously:</p> <ul class="brief"><li>The element is <a href="infrastructure.html#in-a-document" title="in a document">in a <code>Document</code></a> or was <a href="infrastructure.html#in-a-document" title="in a document">in a <code>Document</code></a> the last time the <a href="webappapis.html#event-loop">event loop</a> reached step 1.</li> <li>The element's <code><a href="dom.html#document">Document</a></code> is <a href="browsers.html#fully-active">fully active</a>.</li> <li>The element has either a <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute set or a <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute set (or both).</li> <li>The element's <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute is either absent or its value is the empty string.</li> <li>The element is not a descendant of a <a href="media-elements.html#media-element">media element</a>.</li> <li>The element is not a descendant of an <code><a href="the-object-element.html#the-object-element">object</a></code> element that is not showing its <a href="content-models.html#fallback-content">fallback content</a>.</li> <li>The element is <a href="rendering.html#being-rendered">being rendered</a>, or was <a href="rendering.html#being-rendered">being rendered</a> the last time the <a href="webappapis.html#event-loop">event loop</a> reached step 1.</li> </ul><p>Whenever an <code><a href="#the-embed-element">embed</a></code> element that was not <a href="#concept-embed-active" title="concept-embed-active">potentially active</a> becomes <a href="#concept-embed-active" title="concept-embed-active">potentially active</a>, and whenever a <a href="#concept-embed-active" title="concept-embed-active">potentially active</a> <code><a href="#the-embed-element">embed</a></code> element's <code title="attr-embed-type"><a href="#attr-embed-type">src</a></code> attribute is set, changed, or removed, and whenever a <a href="#concept-embed-active" title="concept-embed-active">potentially active</a> <code><a href="#the-embed-element">embed</a></code> element's <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute is set, changed, or removed, the appropriate set of steps from the following is then applied:</p> <dl class="switch"><dt>If the element has a <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute set</dt> <dd> <p>The user agent must <a href="urls.html#resolve-a-url" title="resolve a url">resolve</a> the value of the element's <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute, relative to the element. If that is successful, the user agent should <a href="urls.html#fetch">fetch</a> the resulting <a href="urls.html#absolute-url">absolute URL</a>, from the element's <a href="browsers.html#browsing-context-scope-origin">browsing context scope origin</a> if it has one<!-- potentially http-origin privacy sensitive -->. The <a href="webappapis.html#concept-task" title="concept-task">task</a> that is <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> by the <a href="webappapis.html#networking-task-source">networking task source</a> once the resource has been <a href="urls.html#fetch" title="fetch">fetched</a> must find and instantiate an appropriate <a href="infrastructure.html#plugin">plugin</a> based on the <a href="#concept-embed-type" title="concept-embed-type">content's type</a>, and hand that <a href="infrastructure.html#plugin">plugin</a> the content of the resource, replacing any previously instantiated plugin for the element.</p> <!-- Note that this doesn't happen when the base URL changes. --> <p>Fetching the resource must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the element's document.</p> <!-- if we add load/error events, then replace the previous paragraph with the text one: --> <!-- similar text in various places --> <!--<p>Fetching the resource must <span>delay the load event</span> of the element's document until the final <span title="concept-task">task</span> that is <span title="queue a task">queued</span> by the <span>networking task source</span> once the resource has been <span title="fetch">fetched</span> has been run.</p>--> </dd> <dt>If the element has no <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute set</dt> <dd><p>The user agent should find and instantiate an appropriate <a href="infrastructure.html#plugin">plugin</a> based on the value of the <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute.</p> </dd></dl><p>Whenever an <code><a href="#the-embed-element">embed</a></code> element that was <a href="#concept-embed-active" title="concept-embed-active">potentially active</a> stops being <a href="#concept-embed-active" title="concept-embed-active">potentially active</a>, any <a href="infrastructure.html#plugin">plugin</a> that had been instantiated for that element must be unloaded.</p> <p id="sandboxPluginEmbed">When a <a href="infrastructure.html#plugin">plugin</a> is to be instantiated but it cannot be <a href="infrastructure.html#concept-plugin-secure" title="concept-plugin-secure">secured</a> and the <a href="browsers.html#sandboxed-plugins-browsing-context-flag">sandboxed plugins browsing context flag</a> is set on the <code><a href="#the-embed-element">embed</a></code> element's <code><a href="dom.html#document">Document</a></code>'s <a href="browsers.html#active-sandboxing-flag-set">active sandboxing flag set</a>, then the user agent must not instantiate the <a href="infrastructure.html#plugin">plugin</a>, and must instead render the <code><a href="#the-embed-element">embed</a></code> element in a manner that conveys that the <a href="infrastructure.html#plugin">plugin</a> was disabled. The user agent may offer the user the option to override the sandbox and instantiate the <a href="infrastructure.html#plugin">plugin</a> anyway; if the user invokes such an option, the user agent must act as if the conditions above did not apply for the purposes of this element.</p> <p class="warning">Plugins that cannot be <a href="infrastructure.html#concept-plugin-secure" title="concept-plugin-secure">secured</a> are disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User agents should convey the danger of overriding the sandbox to the user if an option to do so is provided.</p> <p>The <dfn id="concept-embed-type" title="concept-embed-type">type of the content</dfn> being embedded is defined as follows:</p> <ol><li><p>If the element has a <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute, and that attribute's value is a type that a <a href="infrastructure.html#plugin">plugin</a> supports, then the value of the <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute is the <a href="#concept-embed-type" title="concept-embed-type">content's type</a>.</p></li> <li> <!-- if we get to this point we know we can successfully parsed the URL, since this algorithm is only used after fetching the resource in the steps above --> <p>Otherwise, if the <a href="urls.html#url-path" title="url-path"><path></a> component of the <a href="urls.html#url">URL</a> of the specified resource (after any redirects) matches a pattern that a <a href="infrastructure.html#plugin">plugin</a> supports, then the <a href="#concept-embed-type" title="concept-embed-type">content's type</a> is the type that that plugin can handle.</p> <p class="example">For example, a plugin might say that it can handle resources with <a href="urls.html#url-path" title="url-path"><path></a> components that end with the four character string "<code title="">.swf</code>".</p> <!-- it's sad that we have to do extension sniffing. sigh. --> <!-- see also <object> which has a similar step --> </li> <li><p>Otherwise, if the specified resource has <a href="urls.html#content-type" title="Content-Type">explicit Content-Type metadata</a>, then that is the <a href="#concept-embed-type" title="concept-embed-type">content's type</a>.</p></li> <li><p>Otherwise, the content has no type and there can be no appropriate <a href="infrastructure.html#plugin">plugin</a> for it.</p></li> <!-- This algorithm is a monument to bad design. Go legacy! --> </ol><p>The <code><a href="#the-embed-element">embed</a></code> element has no <a href="content-models.html#fallback-content">fallback content</a>. If the user agent can't find a suitable plugin, then the user agent must use a default plugin. (This default could be as simple as saying "Unsupported Format".)</p> <p>Whether the resource is fetched successfully or not (e.g. whether the response code was a 2xx code <a href="urls.html#concept-http-equivalent-codes" title="concept-http-equivalent-codes">or equivalent</a>) must be ignored when determining the resource's type and when handing the resource to the plugin.</p> <p class="note">This allows servers to return data for plugins even with error responses (e.g. HTTP 500 Internal Server Error codes can still contain plugin data).</p> </div> <p>Any namespace-less attribute other than <code title="attr-embed-name"><a href="obsolete.html#attr-embed-name">name</a></code>, <code title="attr-embed-align"><a href="obsolete.html#attr-embed-align">align</a></code>, <code title="attr-embed-hspace"><a href="obsolete.html#attr-embed-hspace">hspace</a></code>, and <code title="attr-embed-vspace"><a href="obsolete.html#attr-embed-vspace">vspace</a></code> <!-- when editing, see also note below --> may be specified on the <code><a href="#the-embed-element">embed</a></code> element, so long as its name is <a href="infrastructure.html#xml-compatible">XML-compatible</a> and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z). These attributes are then passed as parameters to the <a href="infrastructure.html#plugin">plugin</a>.</p> <p class="note">All attributes in <a href="infrastructure.html#html-documents">HTML documents</a> get lowercased automatically, so the restriction on uppercase letters doesn't affect such documents.</p> <p class="note">The four exceptions are to exclude legacy attributes that have side-effects beyond just sending parameters to the <a href="infrastructure.html#plugin">plugin</a>.</p> <div class="impl"> <p>The user agent should pass the names and values of all the attributes of the <code><a href="#the-embed-element">embed</a></code> element that have no namespace to the <a href="infrastructure.html#plugin">plugin</a> used, when it is instantiated.</p> <p>The <code><a href="#htmlembedelement">HTMLEmbedElement</a></code> object representing the element must expose the scriptable interface of the <a href="infrastructure.html#plugin">plugin</a> instantiated for the <code><a href="#the-embed-element">embed</a></code> element. At a minimum, this interface must implement the <dfn id="dom-embed-caller" title="dom-embed-caller">legacy caller operation</dfn>. (It is suggested that the default behavior of this legacy caller operation, e.g. the behavior of the default plugin's legacy caller operation, be to throw a <code><a href="infrastructure.html#notsupportederror">NotSupportedError</a></code> exception.)</p> </div> <p>The <code><a href="#the-embed-element">embed</a></code> element supports <a href="dimension-attributes.html#dimension-attributes">dimension attributes</a>.</p> <div class="impl"> <p>The IDL attributes <dfn id="dom-embed-src" title="dom-embed-src"><code>src</code></dfn> and <dfn id="dom-embed-type" title="dom-embed-type"><code>type</code></dfn> each must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same name.</p> </div> <div class="example"> <p>Here's a way to embed a resource that requires a proprietary plugin, like Flash:</p> <pre><embed src="catgame.swf"></pre> <p>If the user does not have the plugin (for example if the plugin vendor doesn't support the user's platform), then the user will be unable to use the resource.</p> <p>To pass the plugin a parameter "quality" with the value "high", an attribute can be specified:</p> <pre><embed src="catgame.swf" quality="high"></pre> <p>This would be equivalent to the following, when using an <code><a href="the-object-element.html#the-object-element">object</a></code> element instead:</p> <pre><object data="catgame.swf"> <param name="quality" value="high"> </object></pre> </div> </body></html> --- NEW FILE: the-ins-element.html --- <!DOCTYPE html> <html lang="en-US-x-Hixie"><head><title>4.7.1 The ins element — HTML5</title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } 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; } 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-